diff --git a/core/api.txt b/core/api.txt index e035f35494c..48aab763bea 100644 --- a/core/api.txt +++ b/core/api.txt @@ -2064,7 +2064,7 @@ ion-select,prop,name,string,this.inputId,false,false ion-select,prop,okText,string,'OK',false,false ion-select,prop,placeholder,string | undefined,undefined,false,false ion-select,prop,selectedText,null | string | undefined,undefined,false,false -ion-select,prop,shape,"round" | undefined,undefined,false,false +ion-select,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false ion-select,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-select,prop,toggleIcon,string | undefined,undefined,false,false ion-select,prop,value,any,undefined,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 8d3c764b41e..63eab17e530 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -3280,9 +3280,9 @@ export namespace Components { */ "selectedText"?: string | null; /** - * The shape of the select. If "round" it will have an increased border radius. + * Set to `"soft"` for a select with slightly rounded corners, `"round"` for a select with fully rounded corners, or `"rectangular"` for a select without rounded corners. Defaults to `"round"` for the `"ionic"` theme, undefined for all other themes. */ - "shape"?: 'round'; + "shape"?: 'soft' | 'round' | 'rectangular'; /** * The theme determines the visual appearance of the component. */ @@ -8704,9 +8704,9 @@ declare namespace LocalJSX { */ "selectedText"?: string | null; /** - * The shape of the select. If "round" it will have an increased border radius. + * Set to `"soft"` for a select with slightly rounded corners, `"round"` for a select with fully rounded corners, or `"rectangular"` for a select without rounded corners. Defaults to `"round"` for the `"ionic"` theme, undefined for all other themes. */ - "shape"?: 'round'; + "shape"?: 'soft' | 'round' | 'rectangular'; /** * The theme determines the visual appearance of the component. */ diff --git a/core/src/components/select/select.ionic.scss b/core/src/components/select/select.ionic.scss index 5a7a17f488e..e3660750556 100644 --- a/core/src/components/select/select.ionic.scss +++ b/core/src/components/select/select.ionic.scss @@ -10,7 +10,6 @@ // 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}; @@ -170,7 +169,7 @@ // ---------------------------------------------------------------- // Disabled -// ---------------------------------------------------------------- +// --------------------------------------------- :host(.select-disabled) { --background: #{globals.$ion-primitives-neutral-100}; @@ -183,3 +182,18 @@ :host(.select-disabled) .select-icon { color: globals.$ion-primitives-neutral-500; } + +// Shapes +// ---------------------------------------------------------------- + +:host(.select-shape-soft) { + --border-radius: #{globals.$ion-border-radius-200}; +} + +:host(.select-shape-round) { + --border-radius: #{globals.$ion-border-radius-400}; +} + +:host(.select-shape-rectangular) { + --border-radius: #{globals.$ion-border-radius-0}; +} diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 3efd9c8acb3..209f65f70a4 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -191,9 +191,13 @@ export class Select implements ComponentInterface { @Prop() expandedIcon?: string; /** - * The shape of the select. If "round" it will have an increased border radius. + * Set to `"soft"` for a select with slightly rounded corners, + * `"round"` for a select with fully rounded corners, + * or `"rectangular"` for a select without rounded corners. + * + * Defaults to `"round"` for the `"ionic"` theme, undefined for all other themes. */ - @Prop() shape?: 'round'; + @Prop() shape?: 'soft' | 'round' | 'rectangular'; /** * The value of the select. @@ -990,6 +994,18 @@ export class Select implements ComponentInterface { ); } + private getShape(): string | undefined { + const theme = getIonTheme(this); + const { shape } = this; + + // TODO(ROU-11366): Remove theme check when shapes are defined for all themes. + if (theme === 'ionic' && shape === undefined) { + return 'round'; + } + + return shape; + } + /** * Get the icon to use for the expand icon. * If an icon is set on the component, use that. @@ -1046,9 +1062,9 @@ export class Select implements ComponentInterface { } render() { - const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } = - this; + const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, name, value } = this; const theme = getIonTheme(this); + const shape = this.getShape(); const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked'; const shouldRenderOuterIcon = theme !== 'ionic' && hasFloatingOrStackedLabel; const shouldRenderInnerIcon = theme === 'ionic' || !hasFloatingOrStackedLabel; diff --git a/core/src/components/select/test/fill/select.e2e.ts b/core/src/components/select/test/fill/select.e2e.ts index 5f54991f9e3..4b5f2208482 100644 --- a/core/src/components/select/test/fill/select.e2e.ts +++ b/core/src/components/select/test/fill/select.e2e.ts @@ -89,24 +89,6 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => { const select = page.locator('ion-select'); await expect(select).toHaveScreenshot(screenshot(`select-fill-solid-label-floating`)); }); - test('should not have visual regressions with shaped solid', async ({ page }) => { - await page.setContent( - ` - - Apple - - `, - config - ); - - const select = page.locator('ion-select'); - await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-solid`)); - }); test('padding and border radius should be customizable', async ({ page }) => { await page.setContent( ` @@ -153,25 +135,6 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => { const select = page.locator('ion-select'); await expect(select).toHaveScreenshot(screenshot(`select-fill-outline-label-floating`)); }); - - test('should not have visual regressions with shaped outline', async ({ page }) => { - await page.setContent( - ` - - Apple - - `, - config - ); - - const select = page.locator('ion-select'); - await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-outline`)); - }); }); }); }); diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index e6ba12d6634..00000000000 Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index b82d89c25e2..00000000000 Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 7db77c6e00c..00000000000 Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-md-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 8d17b4855eb..00000000000 Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-md-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-md-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 47634aeaadf..00000000000 Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-md-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-md-rtl-Mobile-Safari-linux.png deleted file mode 100644 index d844a8a8999..00000000000 Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-outline-md-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-solid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-solid-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 54ea7e2eda0..00000000000 Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-solid-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-solid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-solid-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 85a26607094..00000000000 Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-solid-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-solid-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-solid-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 6335e154fc2..00000000000 Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-solid-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-solid-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-solid-md-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 4823db4791e..00000000000 Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-solid-md-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-solid-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-solid-md-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 551e8b1977f..00000000000 Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-solid-md-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-solid-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-solid-md-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 66f113e64c1..00000000000 Binary files a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-shaped-solid-md-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/select/test/shape/index.html b/core/src/components/select/test/shape/index.html new file mode 100644 index 00000000000..a7d9e8f1b35 --- /dev/null +++ b/core/src/components/select/test/shape/index.html @@ -0,0 +1,69 @@ + + + + + Select - Shape + + + + + + + + + + + + + + + Select - Shape + + + + +
+
+

Default

+ + Filled text + +
+ +
+

Soft

+ + Filled text + +
+ +
+

Round

+ + Filled text + +
+ +
+

Rectangular

+ + Filled text + +
+
+
+
+ + diff --git a/core/src/components/select/test/shape/select.e2e.ts b/core/src/components/select/test/shape/select.e2e.ts new file mode 100644 index 00000000000..828f609e01e --- /dev/null +++ b/core/src/components/select/test/shape/select.e2e.ts @@ -0,0 +1,76 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * This behavior does not vary across directions. + */ +configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ config, screenshot, title }) => { + test.describe(title('select: shape'), () => { + ['soft', 'round', 'rectangular'].forEach((shape) => { + test(`${shape} - should not have visual regressions with outline fill`, async ({ page }) => { + await page.setContent( + ` + + Filled text + + `, + config + ); + + const select = page.locator('ion-select'); + + await expect(select).toHaveScreenshot(screenshot(`select-shape-${shape}-fill-outline`)); + }); + }); + }); +}); + +configs({ modes: ['md'] }).forEach(({ config, screenshot, title }) => { + test.describe(title('select: shape'), () => { + test('round - should not have visual regressions with outline fill', async ({ page }) => { + await page.setContent( + ` + + Filled text + + `, + config + ); + + const select = page.locator('ion-select'); + await expect(select).toHaveScreenshot(screenshot(`select-shape-round-fill-outline`)); + }); + + test('round - should not have visual regressions with solid fill', async ({ page }) => { + await page.setContent( + ` + + Filled text + + `, + config + ); + + const select = page.locator('ion-select'); + await expect(select).toHaveScreenshot(screenshot(`select-shape-round-fill-solid`)); + }); + }); +}); diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..14a2ca781ff Binary files /dev/null and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..61c78a69650 Binary files /dev/null and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..16316cfa4e0 Binary files /dev/null and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..d54b4a0e565 Binary files /dev/null and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..b3bc4ab892c Binary files /dev/null and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..cb366520a51 Binary files /dev/null and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..721f6161ee9 Binary files /dev/null and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..49dc7213a5d Binary files /dev/null and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..7de9a0392db Binary files /dev/null and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..46b33ec5038 Binary files /dev/null and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..a0964cd1211 Binary files /dev/null and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..ae586d16cc2 Binary files /dev/null and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-outline-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-solid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-solid-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..35adafd0295 Binary files /dev/null and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-solid-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-solid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-solid-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..1d2b023af7a Binary files /dev/null and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-solid-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-solid-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-solid-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..c6e0365e9d7 Binary files /dev/null and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-solid-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-solid-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-solid-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..ae10471b8cb Binary files /dev/null and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-solid-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-solid-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-solid-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..069bae75da8 Binary files /dev/null and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-solid-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-solid-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-solid-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..8fc304cc0a7 Binary files /dev/null and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-round-fill-solid-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..2a35ecc9852 Binary files /dev/null and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..6b00a2ee323 Binary files /dev/null and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..eb4dbdb530b Binary files /dev/null and b/core/src/components/select/test/shape/select.e2e.ts-snapshots/select-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ