diff --git a/core/api.txt b/core/api.txt
index 8d4287501c..977f9e9ee8 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -184,7 +184,7 @@ ion-app,prop,theme,"ios" | "md" | "ionic",undefined,false,false
ion-avatar,shadow
ion-avatar,prop,mode,"ios" | "md",undefined,false,false
-ion-avatar,prop,shape,"rectangular" | "round" | undefined,undefined,false,false
+ion-avatar,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
ion-avatar,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | undefined,undefined,false,false
ion-avatar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
ion-avatar,css-prop,--border-radius,ionic
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 2bd6f5c617..0caf827446 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -336,9 +336,9 @@ export namespace Components {
*/
"mode"?: "ios" | "md";
/**
- * Set to `"round"` for an avatar with fully rounded corners, or `"rectangular"` for an avatar without rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+ * Set to `"soft"` for an avatar with slightly rounded corners, `"round"` for an avatar with fully rounded corners, or `"rectangular"` for an avatar without rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
*/
- "shape"?: 'round' | 'rectangular';
+ "shape"?: 'soft' | 'round' | 'rectangular';
/**
* Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"` for the default height and width, `"large"` for a larger size, or `"xlarge"` for the largest dimensions. Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
*/
@@ -5572,9 +5572,9 @@ declare namespace LocalJSX {
*/
"mode"?: "ios" | "md";
/**
- * Set to `"round"` for an avatar with fully rounded corners, or `"rectangular"` for an avatar without rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+ * Set to `"soft"` for an avatar with slightly rounded corners, `"round"` for an avatar with fully rounded corners, or `"rectangular"` for an avatar without rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
*/
- "shape"?: 'round' | 'rectangular';
+ "shape"?: 'soft' | 'round' | 'rectangular';
/**
* Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"` for the default height and width, `"large"` for a larger size, or `"xlarge"` for the largest dimensions. Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
*/
diff --git a/core/src/components/avatar/avatar.ionic.scss b/core/src/components/avatar/avatar.ionic.scss
index ac0d116ede..ee9a0eb645 100644
--- a/core/src/components/avatar/avatar.ionic.scss
+++ b/core/src/components/avatar/avatar.ionic.scss
@@ -89,6 +89,15 @@
// Avatar Shapes
// --------------------------------------------------
+:host(.avatar-xsmall.avatar-soft),
+:host(.avatar-small.avatar-soft) {
+ --border-radius: #{globals.$ionic-border-radius-100};
+}
+
+:host(.avatar-soft) {
+ --border-radius: #{globals.$ionic-border-radius-200};
+}
+
:host(.avatar-round) {
--border-radius: #{globals.$ionic-border-radius-full};
}
diff --git a/core/src/components/avatar/avatar.tsx b/core/src/components/avatar/avatar.tsx
index 016b7a5eb4..40ced26c33 100644
--- a/core/src/components/avatar/avatar.tsx
+++ b/core/src/components/avatar/avatar.tsx
@@ -29,12 +29,13 @@ export class Avatar implements ComponentInterface {
@Prop() size?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge';
/**
- * Set to `"round"` for an avatar with fully rounded corners, or `"rectangular"`
+ * Set to `"soft"` for an avatar with slightly rounded corners,
+ * `"round"` for an avatar with fully rounded corners, or `"rectangular"`
* for an avatar without rounded corners.
*
* Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
*/
- @Prop() shape?: 'round' | 'rectangular';
+ @Prop() shape?: 'soft' | 'round' | 'rectangular';
get hasImage() {
return !!this.el.querySelector('ion-img') || !!this.el.querySelector('img');
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts b/core/src/components/avatar/test/shape/avatar.e2e.ts
index f44a119bb1..8bf6128bb6 100644
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts
@@ -95,5 +95,91 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-rectangular-image`));
});
});
+
+ test.describe('soft', () => {
+ test('should not have visual regressions when containing text', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+ AB
+ AB
+ AB
+
+ `,
+ config
+ );
+
+ const container = page.locator('#container');
+
+ await expect(container).toHaveScreenshot(screenshot(`avatar-shape-soft-text`));
+ });
+
+ test('should not have visual regressions when containing an icon', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ config
+ );
+
+ const container = page.locator('#container');
+
+ await expect(container).toHaveScreenshot(screenshot(`avatar-shape-soft-icon`));
+ });
+
+ test('should not have visual regressions when containing an image', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+ `,
+ config
+ );
+
+ const container = page.locator('#container');
+
+ await expect(container).toHaveScreenshot(screenshot(`avatar-shape-soft-image`));
+ });
+ });
});
});
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..553e1b1fd6
Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..e5ccb785d6
Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..15bd0ffafd
Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..78d54a7adc
Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..70b9f8a910
Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b65394b67c
Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..254e824499
Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..12880f88a7
Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f32f2e9b55
Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/avatar/test/shape/index.html b/core/src/components/avatar/test/shape/index.html
index bd07c0e55f..16434a73b3 100644
--- a/core/src/components/avatar/test/shape/index.html
+++ b/core/src/components/avatar/test/shape/index.html
@@ -41,6 +41,15 @@
+ Soft
+
+ AB
+ AB
+ AB
+ AB
+ AB
+
+
Round
AB