diff --git a/core/api.txt b/core/api.txt index f9e01aaf3b..8dc2c9d6b8 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,size,"medium" | undefined,undefined,false,false +ion-avatar,prop,size,"medium" | "small" | undefined,undefined,false,false ion-avatar,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-avatar,css-prop,--border-radius,ionic ion-avatar,css-prop,--border-radius,ios diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 0b7b31f612..4e5bb6f07f 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 `"medium"` for the default height and width. Defaults to `"medium"` for the `ionic` theme, undefined for all other themes. + * Set to `"small"` for a compact size, or to `"medium"` for the default height and width. Defaults to `"medium"` for the `ionic` theme, undefined for all other themes. */ - "size"?: 'medium'; + "size"?: 'small' | 'medium'; /** * The theme determines the visual appearance of the component. */ @@ -5568,9 +5568,9 @@ declare namespace LocalJSX { */ "mode"?: "ios" | "md"; /** - * Set to `"medium"` for the default height and width. Defaults to `"medium"` for the `ionic` theme, undefined for all other themes. + * Set to `"small"` for a compact size, or to `"medium"` for the default height and width. Defaults to `"medium"` for the `ionic` theme, undefined for all other themes. */ - "size"?: 'medium'; + "size"?: 'small' | 'medium'; /** * The theme determines the visual appearance of the component. */ diff --git a/core/src/components/avatar/avatar.ionic.scss b/core/src/components/avatar/avatar.ionic.scss index 2eda3dba71..9311fb77ad 100644 --- a/core/src/components/avatar/avatar.ionic.scss +++ b/core/src/components/avatar/avatar.ionic.scss @@ -5,6 +5,9 @@ // -------------------------------------------------- :host { + --padding-top: #{globals.$ionic-space-0}; + --padding-bottom: #{globals.$ionic-space-0}; + display: flex; align-items: center; @@ -25,10 +28,18 @@ // Avatar Sizes // -------------------------------------------------- +:host(.avatar-small) { + --padding-end: #{globals.$ionic-space-150}; + --padding-start: #{globals.$ionic-space-150}; + + width: globals.$ionic-scale-800; + height: globals.$ionic-scale-800; + + font-size: globals.$ionic-font-size-350; +} + :host(.avatar-medium) { - --padding-top: #{globals.$ionic-space-0}; --padding-end: #{globals.$ionic-space-200}; - --padding-bottom: #{globals.$ionic-space-0}; --padding-start: #{globals.$ionic-space-200}; width: globals.$ionic-scale-1000; diff --git a/core/src/components/avatar/avatar.tsx b/core/src/components/avatar/avatar.tsx index bd1134bfaf..30da01da58 100644 --- a/core/src/components/avatar/avatar.tsx +++ b/core/src/components/avatar/avatar.tsx @@ -20,11 +20,11 @@ export class Avatar implements ComponentInterface { @Element() el!: HTMLElement; /** - * Set to `"medium"` for the default height and width. + * Set to `"small"` for a compact size, or to `"medium"` for the default height and width. * * Defaults to `"medium"` for the `ionic` theme, undefined for all other themes. */ - @Prop() size?: 'medium'; + @Prop() size?: 'small' | 'medium'; get hasImage() { return !!this.el.querySelector('ion-img') || !!this.el.querySelector('img'); diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts b/core/src/components/avatar/test/size/avatar.e2e.ts index 3d7360f957..2138db767a 100644 --- a/core/src/components/avatar/test/size/avatar.e2e.ts +++ b/core/src/components/avatar/test/size/avatar.e2e.ts @@ -6,6 +6,51 @@ import { configs, test } from '@utils/test/playwright'; */ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => { test.describe(title('avatar: size'), () => { + test.describe('small', () => { + 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-size-small-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-size-small-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-size-small-image`)); + }); + }); + test.describe('medium', () => { test('should not have visual regressions when containing text', async ({ page }) => { await page.setContent( 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 new file mode 100644 index 0000000000..2ad835f630 Binary files /dev/null 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 new file mode 100644 index 0000000000..4c6410c24f Binary files /dev/null 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 new file mode 100644 index 0000000000..f787258700 Binary files /dev/null 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 new file mode 100644 index 0000000000..ca2f436a95 Binary files /dev/null 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 new file mode 100644 index 0000000000..4f885f1f76 Binary files /dev/null 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 new file mode 100644 index 0000000000..07bb6f1c5a Binary files /dev/null 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 new file mode 100644 index 0000000000..0d9feb40f2 Binary files /dev/null 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 new file mode 100644 index 0000000000..cecdcbea59 Binary files /dev/null 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 new file mode 100644 index 0000000000..015eaef4a2 Binary files /dev/null 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/index.html b/core/src/components/avatar/test/size/index.html index 4de374675e..cbb9c27692 100644 --- a/core/src/components/avatar/test/size/index.html +++ b/core/src/components/avatar/test/size/index.html @@ -30,15 +30,26 @@ -

Text

+

Default

AB + + + + + + +
+ +

Text

+
+ AB AB

Icons

- + @@ -48,7 +59,7 @@

Images

- +