fix select tokens

Author: BenOsodrac

core/src/components/select/select.common.scss

@@ -1,5 +1,4 @@
 @use "../../themes/mixins" as mixins;
-@import "./select.vars";
 
 // Select
 // --------------------------------------------------
@@ -50,7 +49,6 @@
   position: relative;
 
   width: 100%;
-  min-height: 44px;
 
   white-space: nowrap;
 
@@ -75,10 +73,6 @@
   pointer-events: none;
 }
 
-:host(.ion-focused) button {
-  border: 2px solid #5e9ed6;
-}
-
 /**
  * Select can be slotted
  * in components such as item and
@@ -149,8 +143,6 @@ button {
 .select-text {
   flex: 1;
 
-  min-width: 16px;
-
   font-size: inherit;
 
   text-overflow: ellipsis;
@@ -194,15 +186,6 @@ button {
   box-sizing: border-box;
 }
 
-.select-wrapper .select-placeholder {
-  /**
-   * When the floating label appears on top of the
-   * select, we need to fade the text out so that the
-   * label does not overlap with the placeholder.
-   */
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
 .select-wrapper-inner {
   display: flex;
 
@@ -299,18 +282,6 @@ button {
 
   align-items: center;
 
-  /**
-   * Label text should not extend
-   * beyond the bounds of the select.
-   * However, we do not set the max
-   * width to 100% because then
-   * only the label would show and users
-   * would not be able to see what they are typing.
-   */
-  max-width: 200px;
-
-  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
-
   /**
    * This ensures that double tapping this text
    * clicks the <label> and focuses the input
@@ -359,13 +330,6 @@ button {
 
   align-items: center;
 
-  /**
-   * When the floating label appears on top of the
-   * input, we need to fade the input out so that the
-   * label does not overlap with the placeholder.
-   */
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
-
   /**
    * This ensures that the .select-text gets
    * truncated with ellipses when the text is
@@ -411,18 +375,6 @@ button {
   flex-direction: row-reverse;
 }
 
-/**
- * Label is on the left of the select in LTR and
- * on the right in RTL. Label also has a fixed width.
- */
-:host(.select-label-placement-fixed) .label-text-wrapper {
-  flex: 0 0 100px;
-
-  width: 100px;
-  min-width: 100px;
-  max-width: 200px;
-}
-
 // Select Label Placement - Stacked and Floating
 // ----------------------------------------------------------------
 

core/src/components/select/select.ionic.scss

@@ -20,6 +20,8 @@
   --highlight-color-focused: #{globals.$ion-border-focus-default};
   --highlight-color-valid: #{globals.$ion-semantics-success-900};
   --highlight-color-invalid: #{globals.$ion-semantics-danger-800};
+
+  min-height: globals.$ion-scale-1100;
 }
 
 // Select Hint Text
@@ -34,12 +36,29 @@
   color: globals.$ion-primitives-neutral-800;
 }
 
+.select-text {
+  min-width: globals.$ion-space-400;
+}
+
 // Select Label
 // ----------------------------------------------------------------
 
 .label-text-wrapper {
   @include globals.typography(globals.$ion-body-sm-medium);
 
+  /**
+   * Label text should not extend
+   * beyond the bounds of the select.
+   * However, we do not set the max
+   * width to 100% because then
+   * only the label would show and users
+   * would not be able to see what they are typing.
+   */
+  max-width: globals.$ion-scale-5000;
+
+  transition: color globals.$ion-transition-time-150 globals.$ion-transition-curve-expressive,
+    transform globals.$ion-transition-time-150 globals.$ion-transition-curve-expressive;
+
   color: globals.$ion-primitives-neutral-1000;
 }
 
@@ -56,6 +75,16 @@
   @include globals.margin(0, globals.$ion-space-100, 0, 0);
 }
 
+:host(.select-label-placement-fixed) .label-text-wrapper {
+  $text-wrapper-width: calc(globals.$ion-scale-2400 + globals.$ion-space-100);
+
+  flex: 0 0 $text-wrapper-width;
+
+  width: $text-wrapper-width;
+  min-width: $text-wrapper-width;
+  max-width: globals.$ion-scale-5000;
+}
+
 // Select Label Placement - End
 // ----------------------------------------------------------------
 
@@ -90,6 +119,15 @@
   background: transparent;
 }
 
+.select-wrapper .select-placeholder {
+  /**
+   * When the floating label appears on top of the
+   * select, we need to fade the text out so that the
+   * label does not overlap with the placeholder.
+   */
+  transition: opacity globals.$ion-transition-time-150 globals.$ion-transition-curve-expressive;
+}
+
 // Select Inner Wrapper
 // ----------------------------------------------------------------
 
@@ -117,6 +155,13 @@
 .native-wrapper {
   @include globals.typography(globals.$ion-body-md-regular);
 
+  /**
+   * When the floating label appears on top of the
+   * input, we need to fade the input out so that the
+   * label does not overlap with the placeholder.
+   */
+  transition: opacity globals.$ion-transition-time-150 globals.$ion-transition-curve-expressive;
+
   color: globals.$ion-primitives-neutral-1200;
 }
 
@@ -144,10 +189,10 @@
 ::slotted(ion-button[slot="start"].button-has-icon-only),
 ::slotted(ion-button[slot="end"].button-has-icon-only) {
   --border-radius: 50%;
-  --padding-start: 8px;
-  --padding-end: 8px;
-  --padding-top: 8px;
-  --padding-bottom: 8px;
+  --padding-start: #{globals.$ion-space-200};
+  --padding-end: #{globals.$ion-space-200};
+  --padding-top: #{globals.$ion-space-200};
+  --padding-bottom: #{globals.$ion-space-200};
 
   aspect-ratio: 1;
 }
@@ -162,7 +207,7 @@
 }
 
 .select-icon {
-  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 0.15s globals.$ion-transition-curve-expressive;
 }
 
 /**

core/src/components/select/select.native.scss

@@ -1,17 +1,27 @@
 @import "../../themes/native/native.globals";
 @import "./select.common";
+@import "./select.vars";
 
 // Select: Native
 // --------------------------------------------------
 
 :host {
   --placeholder-opacity: #{$placeholder-opacity};
 
+  min-height: 44px;
+
   font-family: $font-family-base;
 
   z-index: $z-index-item-input;
 }
 
+// Select Used in ion-item
+// --------------------------------------------------
+
+:host(.ion-focused) button {
+  border: 2px solid #5e9ed6;
+}
+
 // Select Icon
 // --------------------------------------------------
 
@@ -41,6 +51,15 @@
   @include border-radius(var(--border-radius));
 }
 
+.select-wrapper .select-placeholder {
+  /**
+   * When the floating label appears on top of the
+   * select, we need to fade the text out so that the
+   * label does not overlap with the placeholder.
+   */
+  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 // Select Bottom Content
 // ----------------------------------------------------------------
 
@@ -62,6 +81,30 @@
   color: $text-color-step-300;
 }
 
+// Select Text
+// --------------------------------------------------
+
+.select-text {
+  min-width: 16px;
+}
+
+// Select Label
+// ----------------------------------------------------------------
+
+.label-text-wrapper {
+  /**
+   * Label text should not extend
+   * beyond the bounds of the select.
+   * However, we do not set the max
+   * width to 100% because then
+   * only the label would show and users
+   * would not be able to see what they are typing.
+   */
+  max-width: 200px;
+
+  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 // Select Label Placement - Start
 // ----------------------------------------------------------------
 
@@ -95,6 +138,15 @@
    * when the label sits at the start.
    */
   @include margin(0, $form-control-label-margin, 0, 0);
+  /**
+  * Label is on the left of the select in LTR and
+  * on the right in RTL. Label also has a fixed width.
+  */
+  flex: 0 0 100px;
+
+  width: 100px;
+  min-width: 100px;
+  max-width: 200px;
 }
 
 // Select Label Placement - Stacked and Floating
@@ -170,3 +222,15 @@
 ::slotted([slot="end"]:first-of-type) {
   margin-inline-start: $form-control-label-margin;
 }
+
+// Select Native Wrapper
+// ----------------------------------------------------------------
+
+.native-wrapper {
+  /**
+   * When the floating label appears on top of the
+   * input, we need to fade the input out so that the
+   * label does not overlap with the placeholder.
+   */
+  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}