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