MOBILE-4470 styles: Improve combobox and buttons styles

src/core/components/combobox/combobox.scss

@@ -15,6 +15,10 @@
                 display: none;
             }
 
+            &::part(container) {
+                margin: 0px;
+            }
+
             &::part(label) {
                 position: static;
             }
@@ -88,9 +92,16 @@
             margin-inline: 0px;
         }
 
+        &::part(container) {
+            white-space: normal;
+            @include margin-horizontal(null, 24px);
+            font: var(--mdl-typography-label-font-lg);
+        }
+
         &::part(icon) {
             margin: var(--icon-margin);
-            opacity: 1;
+            position: absolute;
+            @include position(null, 8px, null, null);
             --highlight-color: currentColor;
         }
 
@@ -115,21 +126,16 @@
         --color-focused: currentcolor;
         --color-hover: currentcolor;
 
-        border-radius: var(--core-combobox-radius);
-        margin: 4px 8px;
-
-        flex: 1;
-
-        &::part(native) {
-            font: var(--mdl-typography-label-font-lg);
-            border-radius: var(--core-combobox-radius);
-        }
+        --border-radius: var(--core-combobox-radius);
 
         .select-text {
             @include margin-horizontal(null, auto);
+            white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
+            font: var(--mdl-typography-label-font-lg);
         }
+
         .sr-only {
             @include sr-only();
         }
@@ -141,6 +147,10 @@
         ion-icon {
             margin: var(--icon-margin);
         }
+
+        .select-icon {
+            color: var(--ion-color-step-500, gray);
+        }
     }
 
 }

src/core/components/combobox/core-combobox.html

@@ -1,5 +1,6 @@
 <ion-select *ngIf="interface !== 'modal'" class="ion-text-start" [(ngModel)]="selection" (ngModelChange)="onValueChanged(selection)"
-    [interface]="interface" [disabled]="disabled" [class.combobox-icon-only]="icon" [interfaceOptions]="{alignment: 'start', arrow: false}">
+    interface="popover" [disabled]="disabled" [class.combobox-icon-only]="icon"
+    [interfaceOptions]="{alignment: 'start', arrow: false, cssClass: 'core-combobox-select'}">
     <div slot="label">
         <span class="sr-only" *ngIf="label">{{ label }}</span>
         <ion-icon *ngIf="icon" [name]="icon" aria-hidden="true" />
@@ -11,11 +12,13 @@
 <ion-button *ngIf="interface === 'modal'" aria-haspopup="listbox" [attr.aria-controls]="listboxId" [attr.aria-owns]="listboxId"
     [attr.aria-expanded]="expanded" (click)="openModal()" [disabled]="disabled" expand="block" role="combobox">
     <ion-icon *ngIf="icon" [name]="icon" slot="start" aria-hidden="true" />
+
     <span class="sr-only" *ngIf="label">{{ label }},</span>
     <div class="select-text">
         <slot name="text">{{selection}}</slot>
     </div>
-    <div class="select-icon" role="presentation" aria-hidden="true">
+
+    <div class="select-icon" role="presentation" aria-hidden="true" slot="end">
         <div class="select-icon-inner"></div>
     </div>
 </ion-button>

src/theme/components/ion-button.scss

@@ -1,6 +1,22 @@
 
 ion-button {
-    margin: 4px 8px;
+    margin: var(--mdl-spacing-1) var(--mdl-spacing-2);
+    white-space: normal;
+    line-height: 120%;
+
+    core-format-text {
+        white-space: normal;
+        display: contents;
+        line-height: 120%;
+    }
+
+    & > * {
+        white-space: normal;
+    }
+
+    ion-spinner {
+        --color: inherit !important;
+    }
 
     ion-spinner[slot=start],
     img[slot=start] {
@@ -36,36 +52,6 @@ ion-button {
         --box-shadow: none;
     }
 
-    core-format-text {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: block;
-        line-height: 1.2;
-    }
-
-    > * {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    &.ion-text-wrap {
-        white-space: normal;
-        core-format-text {
-            white-space: normal;
-            display: contents;
-        }
-
-        & > * {
-            white-space: normal;
-        }
-    }
-
-    ion-spinner {
-        --color: inherit !important;
-    }
-
     &.button-has-icon-only {
         margin: 2px;
     }

src/theme/components/ion-popover.scss

@@ -16,4 +16,13 @@ ion-popover {
     &.ios {
         --min-width: 250px;
     }
+
+    &.core-combobox-select {
+        --width: auto;
+        --max-width: 80%;
+
+        ion-radio::part(label) {
+            white-space: normal;
+        }
+    }
 }

src/theme/components/ion-radio.scss

@@ -35,7 +35,7 @@ input[type=radio],
     }
 
     &::part(mark) {
-        border-radius: var(--inner-border-radius);
+        border-radius: 50%;
         width: calc(50% + var(--outer-border-width));
         height: calc(50% + var(--outer-border-width));
         transform: scale3d(0, 0, 0);

src/theme/components/ion-select.scss

@@ -63,7 +63,7 @@ ion-item.item-input.item-multiple-inputs {
             top: auto;
             left: auto;
             position: static;
-            border-radius: var(--inner-border-radius);
+            border-radius: 50%;
             width: calc(50% + var(--outer-border-width));
             height: calc(50% + var(--outer-border-width));
             transform: scale3d(0, 0, 0);