feat(select): add helper and error text to the ionic theme (#30280)

- Adds design for helper and error text to the select for the ionic
theme.
- Updates tests to add screenshots for ionic theme

---------

Co-authored-by: Brandy Smith <[email protected]>

Author: brandyscarney

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

@@ -236,21 +236,12 @@ button {
 // ----------------------------------------------------------------
 
 .select-bottom {
-  /**
-   * The bottom content should take on the start and end
-   * padding so it is always aligned with either the label
-   * or the start of the text select.
-   */
-  @include mixins.padding(5px, var(--padding-end), 0, var(--padding-start));
-
   display: flex;
 
   justify-content: space-between;
 
   border-top: var(--border-width) var(--border-style) var(--border-color);
 
-  font-size: dynamic-font(12px);
-
   white-space: normal;
 }
 
@@ -285,8 +276,6 @@ button {
 
 .select-bottom .helper-text {
   display: block;
-
-  color: $text-color-step-300;
 }
 
 :host(.ion-touched.ion-invalid) .select-bottom .error-text {

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

@@ -7,6 +7,13 @@
   --border-color: #{globals.current-color(base)};
 }
 
+// Select Bottom Content
+// ----------------------------------------------------------------
+
+:host(.select-fill-outline) .select-bottom {
+  border-top: none;
+}
+
 // Select Label
 // ----------------------------------------------------------------
 

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

@@ -22,6 +22,18 @@
   --highlight-color-invalid: #{globals.$ion-semantics-danger-800};
 }
 
+// Select Hint Text
+// ----------------------------------------------------------------
+
+.select-bottom {
+  @include globals.padding(globals.$ion-space-100, null, null, null);
+  @include globals.typography(globals.$ion-body-sm-medium);
+}
+
+.select-bottom .helper-text {
+  color: globals.$ion-primitives-neutral-800;
+}
+
 // Select Label
 // ----------------------------------------------------------------
 

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

@@ -41,6 +41,27 @@
   @include border-radius(var(--border-radius));
 }
 
+// Select Bottom Content
+// ----------------------------------------------------------------
+
+.select-bottom {
+  /**
+   * The bottom content should take on the start and end
+   * padding so it is always aligned with either the label
+   * or the start of the text select.
+   */
+  @include padding(5px, var(--padding-end), 0, var(--padding-start));
+
+  font-size: dynamic-font(12px);
+}
+
+// Select Hint Text
+// ----------------------------------------------------------------
+
+.select-bottom .helper-text {
+  color: $text-color-step-300;
+}
+
 // Select Label Placement - Start
 // ----------------------------------------------------------------
 

core/src/components/select/test/bottom-content/select.e2e.ts

@@ -98,7 +98,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 /**
  * Rendering is different across modes
  */
-configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('select: helper text rendering'), () => {
     test('should not have visual regressions when rendering helper text', async ({ page }) => {
       await page.setContent(`<ion-select label="Label" helper-text="Helper text"></ion-select>`, config);
@@ -213,3 +213,28 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
     });
   });
 });
+
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('select: bottom content'), () => {
+    test('entire select component should render correctly with no fill', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-select label="Label" label-placement="stacked" helper-text="Helper text"></ion-select>
+      `,
+        config
+      );
+      const select = page.locator('ion-select');
+      await expect(select).toHaveScreenshot(screenshot(`select-full-bottom-no-fill`));
+    });
+    test('entire select component should render correctly with outline fill', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-select fill="outline" label="Label" label-placement="stacked" helper-text="Helper text"></ion-select>
+      `,
+        config
+      );
+      const select = page.locator('ion-select');
+      await expect(select).toHaveScreenshot(screenshot(`select-full-bottom-outline`));
+    });
+  });
+});