diff --git a/core/api.txt b/core/api.txt index e918066138..cb233e2d7e 100644 --- a/core/api.txt +++ b/core/api.txt @@ -184,6 +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,"round" | 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 03ef26d101..07d039058e 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -335,6 +335,10 @@ export namespace Components { * The mode determines the platform behaviors of the component. */ "mode"?: "ios" | "md"; + /** + * Set to `"round"` for an avatar with fully rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes. + */ + "shape"?: 'round'; /** * 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. */ @@ -5567,6 +5571,10 @@ declare namespace LocalJSX { * The mode determines the platform behaviors of the component. */ "mode"?: "ios" | "md"; + /** + * Set to `"round"` for an avatar with fully rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes. + */ + "shape"?: 'round'; /** * 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 f6434916ff..9e8c228944 100644 --- a/core/src/components/avatar/avatar.ionic.scss +++ b/core/src/components/avatar/avatar.ionic.scss @@ -22,6 +22,8 @@ } :host(:not(.avatar-image)) { + @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); + border: globals.$ionic-border-size-025 solid globals.$ionic-color-neutral-800; } @@ -79,7 +81,14 @@ width: globals.$ionic-scale-1400; height: globals.$ionic-scale-1400; - font-size: globals.$ionic-font-size-550; + font-size: globals.$ionic-font-size-500; line-height: globals.$ionic-line-height-700; } + +// Avatar Shapes +// -------------------------------------------------- + +: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 b90c659896..6e3db222f3 100644 --- a/core/src/components/avatar/avatar.tsx +++ b/core/src/components/avatar/avatar.tsx @@ -28,6 +28,13 @@ export class Avatar implements ComponentInterface { */ @Prop() size?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge'; + /** + * Set to `"round"` for an avatar with fully rounded corners. + * + * Defaults to `"round"` for the `ionic` theme, undefined for all other themes. + */ + @Prop() shape?: 'round'; + get hasImage() { return !!this.el.querySelector('ion-img') || !!this.el.querySelector('img'); } @@ -48,15 +55,33 @@ export class Avatar implements ComponentInterface { return size; } + private getShape(): string | undefined { + const theme = getIonTheme(this); + const { shape } = this; + + // TODO(ROU-10755): Remove theme check when shapes are defined for all themes. + if (theme !== 'ionic') { + return undefined; + } + + if (shape === undefined) { + return 'round'; + } + + return shape; + } + render() { const theme = getIonTheme(this); const size = this.getSize(); + const shape = this.getShape(); return ( diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts b/core/src/components/avatar/test/shape/avatar.e2e.ts new file mode 100644 index 0000000000..7a54762782 --- /dev/null +++ b/core/src/components/avatar/test/shape/avatar.e2e.ts @@ -0,0 +1,54 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * This behavior does not vary across directions. + */ +configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => { + test.describe(title('avatar: shape'), () => { + test.describe('round', () => { + test('should not have visual regressions when containing text', async ({ page }) => { + await page.setContent( + ` + AB + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-round-text`)); + }); + + test('should not have visual regressions when containing an icon', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-round-icon`)); + }); + + test('should not have visual regressions when containing an image', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-round-image`)); + }); + }); + }); +}); diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..0c83c6cf9f Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-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-round-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..4fb87757e5 Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-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-round-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-icon-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a9cc9fe39c Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-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-round-image-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-image-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6413156d07 Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-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-round-image-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-image-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..fa7ba21193 Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-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-round-image-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-image-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a379340ad6 Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-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-round-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-text-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..23f8bad6bc Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-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-round-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-text-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..87df931c47 Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-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-round-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-text-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..d40428e320 Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-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 new file mode 100644 index 0000000000..a70ecdcb8d --- /dev/null +++ b/core/src/components/avatar/test/shape/index.html @@ -0,0 +1,55 @@ + + + + + Avatar - Shape + + + + + + + + + + + + + + + Avatar - Shape + + + + +

Default

+
+ AB + + + + + + +
+ +

Round

+
+ AB + AB + AB + AB + AB +
+ + + + diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png index 59474e263f..48800fd377 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png index 610139a51c..6057f92753 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Safari-linux.png index cc93d02129..e1e98e22ab 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Chrome-linux.png index 6052d9cb64..2078f94c11 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Firefox-linux.png index 8fee88c64e..11597cf239 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Safari-linux.png index 3863235cfd..e09b5d0d2f 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Chrome-linux.png index 809febf3a6..d0b569a97f 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Firefox-linux.png index e9f988306c..0369ce4e31 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Safari-linux.png index 5dee4eee30..ea5fe4f50d 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png index dfb50e7fdc..0c83c6cf9f 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png index d3f2a5e314..4fb87757e5 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Safari-linux.png index cdbb3cec21..a9cc9fe39c 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Chrome-linux.png index 771f594575..6413156d07 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Firefox-linux.png index a566b986a1..fa7ba21193 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Safari-linux.png index 4b80c96bab..a379340ad6 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Chrome-linux.png index 841ddb2029..23f8bad6bc 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Firefox-linux.png index ff8f260ae6..87df931c47 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Safari-linux.png index e8849fc65a..d40428e320 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png index 2ad835f630..090c99ff72 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png index 4c6410c24f..1ba7e09f3c 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Safari-linux.png index f787258700..0fd2474f09 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Chrome-linux.png index ca2f436a95..07d1a1b8f2 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Firefox-linux.png index 4f885f1f76..f13b8fdf87 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Safari-linux.png index 07bb6f1c5a..6c7b0eada2 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Chrome-linux.png index 0d9feb40f2..35badde60f 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Firefox-linux.png index cecdcbea59..e3631d4fae 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Safari-linux.png index 015eaef4a2..8772edd630 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png index 486cc47f6b..10f93b980f 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png index feadc4bf39..5838a6cc25 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Safari-linux.png index ff3897da24..61d9db7c14 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Chrome-linux.png index 54ee2dfae9..fec443a68f 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Firefox-linux.png index 5c71e4c15c..8ac67ec89f 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Safari-linux.png index eb2d5ee524..69b00065ed 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Chrome-linux.png index d677f0589c..eca527c41a 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Firefox-linux.png index e8455ee0cf..a350215310 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Safari-linux.png index 878db1b1be..68035275fa 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png index cc70a57b5c..25b5453b40 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png index ce9e4960f9..e53bc71141 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png index d08fc4c722..ac6867ae89 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Chrome-linux.png index bbb8b4aabd..ad929e04bd 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Firefox-linux.png index bb3c201f76..5e5cfe0d15 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Safari-linux.png index adefbb60ab..40195fc59a 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Chrome-linux.png index bfc3fa1a8a..40cab8b9f6 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Firefox-linux.png index 6423dfa339..601938fc20 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Safari-linux.png index 01b707b35b..aca9f6d281 100644 Binary files a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index 20d8c4c3f9..9ae8165539 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -210,14 +210,14 @@ export declare interface IonApp extends Components.IonApp {} @ProxyCmp({ - inputs: ['mode', 'size', 'theme'] + inputs: ['mode', 'shape', 'size', 'theme'] }) @Component({ selector: 'ion-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['mode', 'size', 'theme'], + inputs: ['mode', 'shape', 'size', 'theme'], }) export class IonAvatar { protected el: HTMLElement; diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index 2bfb4707a5..2c40bd0556 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -290,14 +290,14 @@ export declare interface IonApp extends Components.IonApp {} @ProxyCmp({ defineCustomElementFn: defineIonAvatar, - inputs: ['mode', 'size', 'theme'] + inputs: ['mode', 'shape', 'size', 'theme'] }) @Component({ selector: 'ion-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['mode', 'size', 'theme'], + inputs: ['mode', 'shape', 'size', 'theme'], standalone: true }) export class IonAvatar { diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 200c9bd0ab..0c5e1d05e6 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -103,7 +103,8 @@ export const IonAccordionGroup = /*@__PURE__*/ defineContainer('ion-avatar', defineIonAvatar, [ - 'size' + 'size', + 'shape' ]);