From 7f8be3e18c5bcb5c45a44300cb18b4b77a390bbf Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 23 May 2024 12:44:35 -0400 Subject: [PATCH] feat(avatar): add styles for large size in ionic theme (#29541) Issue number: internal --------- ## What is the current behavior? Avatar does not have styles for the `"large"` size in the ionic theme. ## What is the new behavior? - Adds the styles for the large size (width, height, padding, font size) - Adds e2e test for large size to the existing avatar test for sizes ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information [Preview](https://ionic-framework-git-rou-10736-ionic1.vercel.app/src/components/avatar/test/size?ionic:theme=ionic) --- core/api.txt | 2 +- core/src/components.d.ts | 8 ++-- core/src/components/avatar/avatar.ionic.scss | 10 ++++ core/src/components/avatar/avatar.tsx | 5 +- .../components/avatar/test/size/avatar.e2e.ts | 45 ++++++++++++++++++ ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 652 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 578 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 592 bytes ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 740 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 688 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 728 bytes ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 798 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 819 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 721 bytes .../components/avatar/test/size/index.html | 7 +++ 15 files changed, 70 insertions(+), 7 deletions(-) create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Safari-linux.png create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Safari-linux.png create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Safari-linux.png diff --git a/core/api.txt b/core/api.txt index 8dc2c9d6b8..f97c5a7328 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" | "small" | undefined,undefined,false,false +ion-avatar,prop,size,"large" | "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 4e5bb6f07f..fdef0c5812 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 `"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. + * Set to `"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. */ - "size"?: 'small' | 'medium'; + "size"?: 'small' | 'medium' | 'large'; /** * The theme determines the visual appearance of the component. */ @@ -5568,9 +5568,9 @@ declare namespace LocalJSX { */ "mode"?: "ios" | "md"; /** - * 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. + * Set to `"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. */ - "size"?: 'small' | 'medium'; + "size"?: 'small' | 'medium' | 'large'; /** * 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 9311fb77ad..83f703fb0a 100644 --- a/core/src/components/avatar/avatar.ionic.scss +++ b/core/src/components/avatar/avatar.ionic.scss @@ -47,3 +47,13 @@ font-size: globals.$ionic-font-size-400; } + +:host(.avatar-large) { + --padding-end: #{globals.$ionic-space-250}; + --padding-start: #{globals.$ionic-space-250}; + + width: globals.$ionic-scale-1200; + height: globals.$ionic-scale-1200; + + font-size: globals.$ionic-font-size-450; +} diff --git a/core/src/components/avatar/avatar.tsx b/core/src/components/avatar/avatar.tsx index 30da01da58..982f28b91b 100644 --- a/core/src/components/avatar/avatar.tsx +++ b/core/src/components/avatar/avatar.tsx @@ -20,11 +20,12 @@ export class Avatar implements ComponentInterface { @Element() el!: HTMLElement; /** - * Set to `"small"` for a compact size, or to `"medium"` for the default height and width. + * Set to `"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. */ - @Prop() size?: 'small' | 'medium'; + @Prop() size?: 'small' | 'medium' | 'large'; 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 2138db767a..7502a0fa48 100644 --- a/core/src/components/avatar/test/size/avatar.e2e.ts +++ b/core/src/components/avatar/test/size/avatar.e2e.ts @@ -95,5 +95,50 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-medium-image`)); }); }); + + test.describe('large', () => { + 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-large-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-large-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-large-image`)); + }); + }); }); }); 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 new file mode 100644 index 0000000000000000000000000000000000000000..59474e263f3aa7787395e56123a2a6f70c9bddb0 GIT binary patch literal 652 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 literal 0 HcmV?d00001 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 new file mode 100644 index 0000000000000000000000000000000000000000..e9f988306cfa11e397e2dfe43674c274fb327bc7 GIT binary patch literal 819 zcmV-31I+x1P)_J8&DRf2m*?|IKX&+|L?Tu?DPJ6psbUJ4T6^ZEXygq4*Q zZ~@Ik#|bpkeL9;H-~=Q(z*|V7fs#Mx1SDH1F##ta(Ll+ca{`hrl$fAy1d_=l4i69E za=Fmo-~X+wySqF1{rv9+~@TrP*f!9mQ- z%v2OW`&zA*?dS7(Twh<~@$nHBiv^RDlg$x8MT9~j3=Iw8^70bf+uP{q=qM{jAmDU5 zF)=Yw+IxF@gWK)K^Yb%ycX!d!(o&U(x)6v&B6xaw!qU3sDpuK1` ziu3bx?Ck8ItE;QA0$yHTu(7cLtJMm#*^EFSz*=c_byXAr3i5ir$Y!(6A#i+rj6@>A zM09s|kH-VM-Oi?uuxO;--`}(Q zAQUAC7#kZajoCt>z$Oq;)ai7XpP#RKlu9B%t#fpARMEA$xj76B46yy*E^#WA!ok4- z78e(x*XygIP_qD<{p7GlqXD`4b;V*asMTux`_t^d0&Z?@5DW(Kb;OEMQnP@ot1E=V z;fgOW(K$IeVGmqqXXmd3;_*0(t@MijCZuKo^l(w1)9h|-ZT)seI-SPe-X6OjMx(JL z;PXpNci`dS0k^lejMnnkmJ<+dl}v%0fK0}UPRj|1wo0ZzPCzDOMW^Ki xL|Y|OASWP`v7*y*0-~*wDX>I9ru+>_`vIRb3qKD^vDp9s002ovPDHLkV1i)wh&})S literal 0 HcmV?d00001 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 new file mode 100644 index 0000000000000000000000000000000000000000..5dee4eee30fc260cbce095d8182b30daa8fd21fb GIT binary patch literal 721 zcmV;?0xtcDP)a;if$?>qGOD4=#Ul%7bPyz67+OQw1W>KwvQJ}r4IMme!u(P-3RWtA(5ri zX>d#^004zT;jcCRk8*__Me zwuZ{(a;;WdmrAA5YPCip5vS96K%s88D+t11Fc^(SX0!QgAR3Kowc6!!$@4r-)1^}B z>FLSga7bDFCr8$9x1CO>TCJvO`r80WlDD_FcXxO3cs!HI003I8mc+&P7UDQ=I2>MI zUwggYPN%b2EOzG&2E*Ce+57wZp@e9fR;g4jmn#qmOeT}p*VoP zLyN_NVHlDm6$*vTW;2;g6h*mQuC3T~I^}tOxm=FN<8rwylgVPS*g=F?mYqx{e!qWJ z`u+ZDwF)8BXf&I#VzIbcrc$Z%^YeoUwcBliAP9osc^&|8d3h-a0>d!DU~n^be}7L9 z1OQ+@pR+9c{QN8kLO2}$Wg!S5%d(;<=JWY2%Ppaci;MMh;Pd$)gq2F==H^DJRQ{$A z!!V*KK0ZF4o}R9o{eHjEX#DR%T4AwRdcEGq$H$J$PlPCnvRbVqNp3dnc6+ngq$nzx zOny5{6vbYzCzs20I-QhVqzZ8y$8lUd9^dM#)oO>s!7xlBkvKUySv9-eu2!oB06+*| zUS2qk3xz^b&T9`LilP7j9*^hi(ACw|+uIw AB AB + AB

Icons

@@ -55,6 +56,9 @@ + + +

Images

@@ -65,6 +69,9 @@ + + +