diff --git a/core/api.txt b/core/api.txt index 4eeea12614..e918066138 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,"large" | "medium" | "small" | "xsmall" | 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 ion-avatar,css-prop,--border-radius,ios diff --git a/core/src/components.d.ts b/core/src/components.d.ts index be9bca602a..03ef26d101 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 `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"` for the default height and width, or to `"large"` for a larger size. Defaults to `"medium"` for the `ionic` theme, undefined for all other themes. + * 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. */ - "size"?: `xsmall` | 'small' | 'medium' | 'large'; + "size"?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge'; /** * The theme determines the visual appearance of the component. */ @@ -5568,9 +5568,9 @@ declare namespace LocalJSX { */ "mode"?: "ios" | "md"; /** - * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"` for the default height and width, or to `"large"` for a larger size. Defaults to `"medium"` for the `ionic` theme, undefined for all other themes. + * 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. */ - "size"?: `xsmall` | 'small' | 'medium' | 'large'; + "size"?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge'; /** * 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 fbb2af9a6b..f6434916ff 100644 --- a/core/src/components/avatar/avatar.ionic.scss +++ b/core/src/components/avatar/avatar.ionic.scss @@ -71,3 +71,15 @@ font-size: globals.$ionic-font-size-450; } + +:host(.avatar-xlarge) { + --padding-end: #{globals.$ionic-space-300}; + --padding-start: #{globals.$ionic-space-300}; + + width: globals.$ionic-scale-1400; + height: globals.$ionic-scale-1400; + + font-size: globals.$ionic-font-size-550; + + line-height: globals.$ionic-line-height-700; +} diff --git a/core/src/components/avatar/avatar.tsx b/core/src/components/avatar/avatar.tsx index 7628a19d94..b90c659896 100644 --- a/core/src/components/avatar/avatar.tsx +++ b/core/src/components/avatar/avatar.tsx @@ -21,11 +21,12 @@ export class Avatar implements ComponentInterface { /** * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"` - * for the default height and width, or to `"large"` for a larger size. + * 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. */ - @Prop() size?: `xsmall` | 'small' | 'medium' | 'large'; + @Prop() size?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge'; 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 75f65222d7..5838519dc5 100644 --- a/core/src/components/avatar/test/size/avatar.e2e.ts +++ b/core/src/components/avatar/test/size/avatar.e2e.ts @@ -185,5 +185,50 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-large-image`)); }); }); + + test.describe('xlarge', () => { + 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-xlarge-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-xlarge-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-xlarge-image`)); + }); + }); }); }); 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 new file mode 100644 index 0000000000..486cc47f6b Binary files /dev/null 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 new file mode 100644 index 0000000000..feadc4bf39 Binary files /dev/null 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 new file mode 100644 index 0000000000..ff3897da24 Binary files /dev/null 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 new file mode 100644 index 0000000000..54ee2dfae9 Binary files /dev/null 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 new file mode 100644 index 0000000000..5c71e4c15c Binary files /dev/null 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 new file mode 100644 index 0000000000..eb2d5ee524 Binary files /dev/null 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 new file mode 100644 index 0000000000..d677f0589c Binary files /dev/null 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 new file mode 100644 index 0000000000..e8455ee0cf Binary files /dev/null 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 new file mode 100644 index 0000000000..878db1b1be Binary files /dev/null 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/index.html b/core/src/components/avatar/test/size/index.html index 1eccfd7e1f..875d5f7ddf 100644 --- a/core/src/components/avatar/test/size/index.html +++ b/core/src/components/avatar/test/size/index.html @@ -47,6 +47,7 @@ AB AB AB + AB

Icons

@@ -63,6 +64,9 @@ + + +

Images

@@ -79,6 +83,9 @@ + + +