refactor(select): update styles to support customization

Author: thetaPC

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

@@ -3,14 +3,6 @@
 // Select Fill: Outline (Ionic Theme)
 // ----------------------------------------------------------------
 
-:host(.select-fill-outline) {
-  // TODO(ROU-10778, ROU-10875): Sync the color names to the design system of
-  // ios and md. This will allow us to have a single color map.
-  --border-color: #{globals.current-color(neutral)};
-  --border-radius: #{globals.$ion-border-radius-400};
-  --border-width: #{globals.$ion-border-size-025};
-}
-
 :host(.ion-color) {
   --border-color: #{globals.current-color(base)};
 }

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

@@ -7,6 +7,11 @@
 
 :host {
   --background: #{globals.$ion-primitives-base-white};
+  // TODO(ROU-10778, ROU-10875): Sync the color names to the design system of
+  // ios and md. This will allow us to have a single color map.
+  --border-color: #{globals.current-color(neutral)};
+  --border-radius: #{globals.$ion-border-radius-400};
+  --border-width: #{globals.$ion-border-size-025};
   --padding-start: #{globals.$ion-space-400};
   --padding-end: #{globals.$ion-space-400};
   --padding-top: #{globals.$ion-space-300};
@@ -62,16 +67,6 @@
   @include globals.margin(0, 0, globals.$ion-space-100, 0);
 }
 
-// Select Text
-// ----------------------------------------------------------------
-
-// Targets the text inside the select and the placeholder
-.select-text {
-  @include globals.typography(globals.$ion-body-md-regular);
-
-  color: globals.$ion-primitives-neutral-1200;
-}
-
 // Select Wrapper
 // ----------------------------------------------------------------
 
@@ -85,6 +80,9 @@
 // ----------------------------------------------------------------
 
 .select-wrapper-inner {
+  @include globals.border-radius(var(--border-radius));
+  @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+
   position: relative;
 
   height: globals.$ion-scale-1200;
@@ -104,6 +102,12 @@
 // Select Native Wrapper
 // ----------------------------------------------------------------
 
+.native-wrapper {
+  @include globals.typography(globals.$ion-body-md-regular);
+
+  color: globals.$ion-primitives-neutral-1200;
+}
+
 :host(.select-label-placement-stacked) .native-wrapper,
 :host(.select-label-placement-floating) .native-wrapper {
   /**

core/src/components/select/test/custom/select.e2e.ts

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('select: custom'), () => {
     test('should be able to customize select using css apis', async ({ page }) => {
       test.info().annotations.push({
@@ -64,6 +64,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ion-select::part(label) {
             color: green;
           }
+
+          ion-select::part(placeholder) {
+            color: purple;
+          }
         </style>
       `,
         config

core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png

@@ -48,7 +48,9 @@
         <div class="grid">
           <div class="grid-item">
             <h2>No Fill</h2>
-            <ion-select class="no-fill" label="Fruit" value="apple"></ion-select>
+            <ion-select class="no-fill" label="Fruit" value="apple">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
           </div>
 
           <div class="grid-item">