diff --git a/core/src/components/select/select.common.scss b/core/src/components/select/select.common.scss
index 49ff7ac393a..2ff7530fd59 100644
--- a/core/src/components/select/select.common.scss
+++ b/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 {
diff --git a/core/src/components/select/select.ionic.outline.scss b/core/src/components/select/select.ionic.outline.scss
index 1acffced406..6df46883af3 100644
--- a/core/src/components/select/select.ionic.outline.scss
+++ b/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
// ----------------------------------------------------------------
diff --git a/core/src/components/select/select.ionic.scss b/core/src/components/select/select.ionic.scss
index b642c4be4c4..1486b026416 100644
--- a/core/src/components/select/select.ionic.scss
+++ b/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
// ----------------------------------------------------------------
diff --git a/core/src/components/select/select.native.scss b/core/src/components/select/select.native.scss
index 64002313ad6..ffc9fda904c 100644
--- a/core/src/components/select/select.native.scss
+++ b/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
// ----------------------------------------------------------------
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts b/core/src/components/select/test/bottom-content/select.e2e.ts
index 12514c845cf..2dec9404ec8 100644
--- a/core/src/components/select/test/bottom-content/select.e2e.ts
+++ b/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(``, 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(
+ `
+
+ `,
+ 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(
+ `
+
+ `,
+ config
+ );
+ const select = page.locator('ion-select');
+ await expect(select).toHaveScreenshot(screenshot(`select-full-bottom-outline`));
+ });
+ });
+});
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..656bb06c77d
Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e9f84c5a4a1
Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2613ca8752a
Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d8e21e15f3c
Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a566ed99059
Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..38feba0f69e
Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-error-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..4b662746e35
Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4a6d71463d0
Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..aaf8f41603a
Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..df406bd2255
Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b4a14e451e0
Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..857dde80a9b
Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-full-bottom-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..45f56705bf4
Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4edc4668e7d
Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..299ceefc3e8
Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..4b662746e35
Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4a6d71463d0
Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..aaf8f41603a
Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..fa0a36dfff7
Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..3402b612d22
Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..cd0b07edbf9
Binary files /dev/null and b/core/src/components/select/test/bottom-content/select.e2e.ts-snapshots/select-helper-text-wrapping-ionic-md-ltr-light-Mobile-Safari-linux.png differ