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