feat(select): add ionic theme styles

Author: thetaPC

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

@@ -1,3 +1,4 @@
+@use "../../themes/mixins" as mixins;
 @import "./select.vars";
 
 // Select
@@ -31,7 +32,6 @@
   --padding-bottom: 0px;
   --padding-start: 0px;
   --placeholder-color: currentColor;
-  --placeholder-opacity: #{$placeholder-opacity};
   --background: transparent;
   --border-style: solid;
   --highlight-color-focused: #{ion-color(primary, base)};
@@ -52,12 +52,9 @@
   width: 100%;
   min-height: 44px;
 
-  font-family: $font-family-base;
-
   white-space: nowrap;
 
   cursor: pointer;
-  z-index: $z-index-item-input;
 }
 
 /**
@@ -115,15 +112,13 @@
 }
 
 button {
-  @include visually-hidden();
+  @include mixins.visually-hidden();
 }
 
 // Select Icon
 // --------------------------------------------------
 
 .select-icon {
-  @include margin(0, 0, 0, $select-icon-margin-start);
-
   position: relative;
 
   /**
@@ -193,9 +188,6 @@ button {
 // --------------------------------------------------
 
 .select-wrapper {
-  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
-  @include border-radius(var(--border-radius));
-
   display: flex;
 
   position: relative;
@@ -389,15 +381,6 @@ button {
   flex-direction: row;
 }
 
-:host(.select-label-placement-start) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the select should be on the end
-   * when the label sits at the start.
-   */
-  @include margin(0, $form-control-label-margin, 0, 0);
-}
-
 // Select Label Placement - End
 // ----------------------------------------------------------------
 
@@ -409,27 +392,6 @@ button {
   flex-direction: row-reverse;
 }
 
-/**
- * The margin between the label and
- * the select should be on the start
- * when the label sits at the end.
- */
-:host(.select-label-placement-end) .label-text-wrapper {
-  @include margin(0, 0, 0, $form-control-label-margin);
-}
-
-// Select Label Placement - Fixed
-// ----------------------------------------------------------------
-
-:host(.select-label-placement-fixed) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the select should be on the end
-   * 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.
@@ -488,28 +450,11 @@ button {
  */
 :host(.select-label-placement-stacked) .native-wrapper,
 :host(.select-label-placement-floating) .native-wrapper {
-  @include margin(1px, 0, 0, 0);
-
   flex-grow: 1;
 
   width: 100%;
 }
 
-/**
- * This makes the label sit over the select
- * when the select is blurred and has no value.
- * The label should not sit over the select if the
- * select has a placeholder.
- * Note: This is different from what ion-input does
- * because the activating the select causes an overlay
- * to appear. This makes it hard to read the placeholder.
- * With ion-input, the input just focuses and the placeholder
- * is still easy to read.
- */
-:host(.select-label-placement-floating) .label-text-wrapper {
-  @include transform(translateY(100%), scale(1));
-}
-
 /**
  * The placeholder should be hidden when the label
  * is on top of the select. This prevents the label
@@ -537,19 +482,6 @@ button {
   opacity: 1;
 }
 
-/**
- * This makes the label sit above the input.
- */
-:host(.label-floating) .label-text-wrapper {
-  @include transform(translateY(50%), scale(#{$form-control-label-stacked-scale}));
-
-  /**
-   * Label text should not extend
-   * beyond the bounds of the input.
-   */
-  max-width: calc(100% / #{$form-control-label-stacked-scale});
-}
-
 // Start/End Slots
 // ----------------------------------------------------------------
 
@@ -564,11 +496,9 @@ button {
 }
 
 ::slotted([slot="start"]:last-of-type) {
-  margin-inline-end: $form-control-label-margin;
   margin-inline-start: 0;
 }
 
 ::slotted([slot="end"]:first-of-type) {
-  margin-inline-start: $form-control-label-margin;
   margin-inline-end: 0;
 }

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

@@ -0,0 +1,12 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./select.common";
+
+// Ionic Select
+// -------------------------------------------------
+
+// Select Label
+// ----------------------------------------------------------------
+
+.label-text-wrapper {
+  @include globals.typography(globals.$ion-body-sm-medium);
+}

core/src/components/select/select.ios.scss

@@ -1,4 +1,4 @@
-@import "./select";
+@import "./select.native";
 @import "./select.ios.vars";
 
 // iOS Select

core/src/components/select/select.md.scss

@@ -1,4 +1,4 @@
-@import "./select";
+@import "./select.native";
 @import "./select.md.vars";
 @import "./select.md.solid.scss";
 @import "./select.md.outline.scss";

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

@@ -0,0 +1,116 @@
+@import "../../themes/native/native.globals";
+@import "./select.common";
+
+// Select: Native
+// --------------------------------------------------
+
+:host {
+  --placeholder-opacity: #{$placeholder-opacity};
+
+  font-family: $font-family-base;
+
+  z-index: $z-index-item-input;
+}
+
+// Select Icon
+// --------------------------------------------------
+
+.select-icon {
+  @include margin(0, 0, 0, $select-icon-margin-start);
+}
+
+// Select Wrapper
+// --------------------------------------------------
+
+.select-wrapper {
+  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+  @include border-radius(var(--border-radius));
+}
+
+// Select Label Placement - Start
+// ----------------------------------------------------------------
+
+:host(.select-label-placement-start) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the select should be on the end
+   * when the label sits at the start.
+   */
+  @include margin(0, $form-control-label-margin, 0, 0);
+}
+
+// Select Label Placement - End
+// ----------------------------------------------------------------
+/**
+ * The margin between the label and
+ * the select should be on the start
+ * when the label sits at the end.
+ */
+:host(.select-label-placement-end) .label-text-wrapper {
+  @include margin(0, 0, 0, $form-control-label-margin);
+}
+
+// Select Label Placement - Fixed
+// ----------------------------------------------------------------
+
+:host(.select-label-placement-fixed) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the select should be on the end
+   * when the label sits at the start.
+   */
+  @include margin(0, $form-control-label-margin, 0, 0);
+}
+
+// Select Label Placement - Stacked and Floating
+// ----------------------------------------------------------------
+
+/**
+ * Ensures the select does not
+ * overlap the label.
+ * Also ensure that the native wrapper
+ * takes up the remaining available height and width.
+ */
+:host(.select-label-placement-stacked) .native-wrapper,
+:host(.select-label-placement-floating) .native-wrapper {
+  @include margin(1px, 0, 0, 0);
+}
+
+/**
+ * This makes the label sit over the select
+ * when the select is blurred and has no value.
+ * The label should not sit over the select if the
+ * select has a placeholder.
+ * Note: This is different from what ion-input does
+ * because the activating the select causes an overlay
+ * to appear. This makes it hard to read the placeholder.
+ * With ion-input, the input just focuses and the placeholder
+ * is still easy to read.
+ */
+:host(.select-label-placement-floating) .label-text-wrapper {
+  @include transform(translateY(100%), scale(1));
+}
+
+/**
+ * This makes the label sit above the input.
+ */
+:host(.label-floating) .label-text-wrapper {
+  @include transform(translateY(50%), scale(#{$form-control-label-stacked-scale}));
+
+  /**
+   * Label text should not extend
+   * beyond the bounds of the input.
+   */
+  max-width: calc(100% / #{$form-control-label-stacked-scale});
+}
+
+// Start/End Slots
+// ----------------------------------------------------------------
+
+::slotted([slot="start"]:last-of-type) {
+  margin-inline-end: $form-control-label-margin;
+}
+
+::slotted([slot="end"]:first-of-type) {
+  margin-inline-start: $form-control-label-margin;
+}

core/src/components/select/select.tsx

@@ -49,7 +49,7 @@ import type { SelectChangeEventDetail, SelectInterface, SelectCompareFn } from '
   styleUrls: {
     ios: 'select.ios.scss',
     md: 'select.md.scss',
-    ionic: 'select.md.scss',
+    ionic: 'select.ionic.scss',
   },
   shadow: true,
 })

core/src/components/select/select.vars.scss

@@ -1,4 +1,2 @@
-@import "../../themes/native/native.globals";
-
 /// @prop - Margin start of the select icon
 $select-icon-margin-start: 4px;