diff --git a/BREAKING.md b/BREAKING.md
index 5c8e0c3e4c..5b569631e6 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -16,9 +16,14 @@ This is a comprehensive list of the breaking changes introduced in the major ver
- [Components](#version-9x-components)
- [Card](#version-9x-card)
+ - [Chip](#version-9x-chip)
Components
Card
- The `border-radius` of the `ios` and `md` card now defaults to `14px` and `12px` instead of `8px` and `4px`, respectively, in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"soft"`, or override the `--border-radius` CSS variable to specify a different value.
+
+Chip
+
+- The `border-radius` of the `ios` and `md` chip now defaults to `10px` and `8px`, respectively, instead of `16px` in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"round"`, or override the `--border-radius` CSS variable to specify a different value.
diff --git a/core/api.txt b/core/api.txt
index cbe5a06288..0c15f78cfa 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -350,9 +350,10 @@ ion-chip,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "second
ion-chip,prop,disabled,boolean,false,false,false
ion-chip,prop,mode,"ios" | "md",undefined,false,false
ion-chip,prop,outline,boolean,false,false,false
-ion-chip,prop,shape,"rectangular" | "round" | undefined,undefined,false,false
+ion-chip,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
ion-chip,prop,theme,"ios" | "md" | "ionic",undefined,false,false
ion-chip,css-prop,--background
+ion-chip,css-prop,--border-radius
ion-chip,css-prop,--color
ion-col,shadow
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index a0437f2e43..97ec4730ed 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -763,9 +763,9 @@ export namespace Components {
*/
"outline": boolean;
/**
- * Define the Chip corner shape, when using the Ionic Theme.
+ * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners. Defaults to `"round"` for the `"ionic"` theme and `"soft"` for all other themes.
*/
- "shape"?: 'round' | 'rectangular';
+ "shape"?: 'soft' | 'round' | 'rectangular';
/**
* The theme determines the visual appearance of the component.
*/
@@ -6023,9 +6023,9 @@ declare namespace LocalJSX {
*/
"outline"?: boolean;
/**
- * Define the Chip corner shape, when using the Ionic Theme.
+ * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners. Defaults to `"round"` for the `"ionic"` theme and `"soft"` for all other themes.
*/
- "shape"?: 'round' | 'rectangular';
+ "shape"?: 'soft' | 'round' | 'rectangular';
/**
* The theme determines the visual appearance of the component.
*/
diff --git a/core/src/components/chip/chip.ionic.scss b/core/src/components/chip/chip.ionic.scss
index d8ccf11ed6..c3f4fc5e7b 100644
--- a/core/src/components/chip/chip.ionic.scss
+++ b/core/src/components/chip/chip.ionic.scss
@@ -10,7 +10,6 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi
:host {
--background: #{globals.$ionic-color-neutral-10};
--border-color: transparent;
- --border-radius: #{globals.$ionic-border-radius-rounded-small};
--color: #{globals.$ionic-color-neutral-900};
--focus-ring-color: #{$ionic-states-focus-primary};
--focus-ring-width: #{globals.$ionic-border-size-medium};
@@ -89,6 +88,10 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi
// Chip Shapes
// ---------------------------------------------
+:host(.chip-soft) {
+ --border-radius: #{globals.$ionic-border-radius-rounded-small};
+}
+
:host(.chip-round) {
--border-radius: #{globals.$ionic-border-radius-rounded-large};
}
diff --git a/core/src/components/chip/chip.ios.scss b/core/src/components/chip/chip.ios.scss
index a6d23fc169..b016c063eb 100644
--- a/core/src/components/chip/chip.ios.scss
+++ b/core/src/components/chip/chip.ios.scss
@@ -9,3 +9,18 @@
*/
font-size: clamp(13px, $chip-base-font-size-rem, 22px);
}
+
+// Chip Shapes
+// ---------------------------------------------
+
+:host(.chip-soft) {
+ --border-radius: 10px;
+}
+
+:host(.chip-round) {
+ --border-radius: 999px;
+}
+
+:host(.chip-rectangular) {
+ --border-radius: 0px;
+}
diff --git a/core/src/components/chip/chip.md.scss b/core/src/components/chip/chip.md.scss
index c123b971bb..b531b9cfc5 100644
--- a/core/src/components/chip/chip.md.scss
+++ b/core/src/components/chip/chip.md.scss
@@ -4,3 +4,18 @@
:host {
font-size: $chip-base-font-size-rem;
}
+
+// Chip Shapes
+// ---------------------------------------------
+
+:host(.chip-soft) {
+ --border-radius: 8px;
+}
+
+:host(.chip-round) {
+ --border-radius: 999px;
+}
+
+:host(.chip-rectangular) {
+ --border-radius: 0px;
+}
diff --git a/core/src/components/chip/chip.scss b/core/src/components/chip/chip.scss
index fc235d6599..6e32716edd 100644
--- a/core/src/components/chip/chip.scss
+++ b/core/src/components/chip/chip.scss
@@ -5,11 +5,12 @@
/**
* @prop --background: Background of the chip
* @prop --color: Color of the chip
+ * @prop --border-radius: Border radius of the chip
*/
--background: #{rgba($text-color-rgb, 0.12)};
--color: #{rgba($text-color-rgb, 0.87)};
- @include border-radius(16px);
+ @include border-radius(var(--border-radius));
@include font-smoothing();
@include margin(4px);
@include padding(6px, 12px);
diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx
index fd59fa48d6..c696faff15 100644
--- a/core/src/components/chip/chip.tsx
+++ b/core/src/components/chip/chip.tsx
@@ -37,21 +37,37 @@ export class Chip implements ComponentInterface {
@Prop() disabled = false;
/**
- * Define the Chip corner shape, when using the Ionic Theme.
+ * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully
+ * rounded corners, or `"rectangular"` for a chip without rounded corners.
+ * Defaults to `"round"` for the `"ionic"` theme and `"soft"` for all other themes.
*/
- @Prop() shape?: 'round' | 'rectangular';
+ @Prop() shape?: 'soft' | 'round' | 'rectangular';
+
+ /**
+ * Set the shape based on the theme
+ */
+ private getShape(): string {
+ const theme = getIonTheme(this);
+ const { shape } = this;
+
+ if (shape === undefined) {
+ return theme === 'ionic' ? 'round' : 'soft';
+ }
+
+ return shape;
+ }
render() {
- const { shape } = this;
const theme = getIonTheme(this);
+ const shape = this.getShape();
+
return (
{
- /**
- * This behavior only applies to Ionic Theme.
- * TODO(FW-6120): add the `ios` and `md` modes when shape support is added.
- */
+/**
+ * This behavior does not vary across directions
+ */
+configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('chip: shape'), () => {
test.beforeEach(async ({ page }) => {
await page.goto(`/src/components/chip/test/shape`, config);
@@ -19,6 +18,14 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
});
});
+ test.describe('soft', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ const container = page.locator('#soft');
+
+ await expect(container).toHaveScreenshot(screenshot(`chip-soft`));
+ });
+ });
+
test.describe('round', () => {
test('should not have visual regressions', async ({ page }) => {
const container = page.locator('#round');
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 21a8b1c13a..813f5aac93 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 9c59020f4f..62ab028181 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png
index 9f323f7d73..2e23685601 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..78ae782bcd
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..e8434653e1
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..7a0cb70051
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..84f903e385
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..c0bb84d787
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..793e208a8e
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
index a3e29c2567..5871f22c71 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 353f77beb9..39924d24f6 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..8071bb708a
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..bbe4d08797
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f31018d0a5
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1c45dc63be
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..ad7bc33d21
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..3f5f381e7a
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
index de0ca69d10..8a72b5585b 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..f4cac4b484
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..34610c5bd4
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..a102692055
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c474b3d362
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..3bb4971316
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b4f062cf37
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..6e694b435d
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6bb996fcd7
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..ded190b59f
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..2053b98cdf
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..e789b3e5f6
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..af72de8a7d
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ecab5281ee
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..b0b8277c3e
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..ff4e273d73
Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/index.html b/core/src/components/chip/test/shape/index.html
index dd50a5708f..d2bac4b428 100644
--- a/core/src/components/chip/test/shape/index.html
+++ b/core/src/components/chip/test/shape/index.html
@@ -12,11 +12,23 @@
+
+
-
+
Chip - Shape
Shapes
@@ -24,6 +36,9 @@
Default
+
+ Soft
+
Round
@@ -33,24 +48,5 @@
-
-