From fea59b73aa247219d664e2af99e830eabce7486f Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 23 May 2024 12:28:00 -0400 Subject: [PATCH] feat(avatar): add styles for small size in ionic theme (#29540) Issue number: internal --------- ## What is the current behavior? Avatar does not have styles for the `"small"` size in the ionic theme. ## What is the new behavior? - Adds the styles for the small size (width, height, padding, font size) - Adds e2e test for small 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-10734-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 | 15 +++++- core/src/components/avatar/avatar.tsx | 4 +- .../components/avatar/test/size/avatar.e2e.ts | 45 ++++++++++++++++++ ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 465 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 460 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 462 bytes ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 501 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 481 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 480 bytes ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 586 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 590 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 562 bytes .../components/avatar/test/size/index.html | 17 +++++-- 15 files changed, 79 insertions(+), 12 deletions(-) create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Safari-linux.png create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Safari-linux.png create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Safari-linux.png 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 0000000000000000000000000000000000000000..2ad835f630979f79b93fbe05ed6f8ba0d0628596 GIT binary patch literal 465 zcmV;?0WSWDP)Px$i%CR5R9J=W*FTEFKorOEZ-NlCP&*-kG+HVmhy-lr0yY*3qK!Aui+BKAu@tnj zQPKp&N;`7_42|x47gh{lFc`d~d9T+)eM#pJ z6#*hZ1o#o)cs$~H-j4vWup1YP1>5ZwDJ7O=QLR>=2e56M>-9>%-v?kanXq23sZ=U= zXN4Mp>$;zsmCI%3^Ld!4aDaF`{%Q7}=aEjQp9c^^uv{+jeIMWVS*=zyo6S&wPdvgFq zQ7Dy4bUGbIqY;%DMvp9|u7!Y^_i9~|kZinl-UkAowqEQUZWxB~cmRN|>-Q`VRDb(D5CI~{r-|w@6tJMmfP6x$eF&=<# z+qc^-QmGWW-7ZR{5?65wj{FAb=hy26&+}N(d_E6R6ypK7Ua!o4*LCrHKG_;(vsskO zWoVj)TrL+Hgxi7p{f_l|jasdSdcDq$5Q!l6`#p}wBijxF3L`E6+WX~liP2~jn0q#x zVK5jVlgYeg-~zBLi_KY8)xg9w9uke?owxuT$HDo0W^)fxI-Q0r%b~6!7XTHdhevA{ zB-)NjrSh(M_MICbR923l1R!xBap3Pbz_Gf&9{L4!+!oLRH?YG10000z;)efwW{kn0Lr>1EZ3WfJ1P1EgmyU}Qj z$74YdN~KbSL(C~!tyaBW@3;F~#bQxWl;v_6?GUqq$K$bHueaN6XcS{ytJS^&sH*CD z-t+kkjUt4~emgb>GZ(K*rjXYWA<$N*tNX@B2;06#B!3x*;t*8l(j07*qoM6N<$ Ef?DO%IRF3v literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..ca2f436a9521bff1ec87745caff9a80352f8104f GIT binary patch literal 501 zcmVPx$uSrBfR9J=Wm)TCjKoo|*0tLz{f(xeTm5CAG{|&q}df^s{F#?qsD=7OaUQ|ti zLT1ben)oNZne@#0I?I1fwd2Bg%nIdOW%7T3UjY!14d@S{XhXdN&8{;R3qvvjyBW~^ zKM3&n0@n{P98Hebn$BZAL*9gRLVQl)EhtyvyfmBKt-%P+?!m4r2Ivmp#uA_OqU^vZ z1Gs+z8Mhjaz^W<)kXcgM7~w6DRja2E!2b=m5UnsmQ-^hV03)OjAR}?FKeZ_sBLt93 zgC>#O?*nsPAwWon15+H}&;(u3V}-4FC*^$EwKd-j^#B~@U_B-}t7I+MN z_fhW7{mq#(<3#q)+ie7RA|XJifUW|c-$3;NsJ#GhEyKNu7?7O;aOnCna zl&ZiNLG(LOdc2qeGLv!$F#tb)d?gFKxg>`W0kG@`XYQFhu~>;K#jol6Pcf$eTsRVHQdD$x8e>RqP=I$1gYl-QgLss0gq060tDdRmmZpC?92@V3P2xOM?& zUApn}+1^;iMPPoW`@5xp&ZHX@(Y~@-07qrH$p!`BGHex$C>DU%rNb+XxvYc$fh+I} X3Zv!W=VM*$00000NkvXXu0mjf!ax*8PocG>h-j$91+bUI_kRM{x*%a;RJ0hiR7J{P zX<=N5AOfASV4{g@&cZeqQ5r2R`!0|XPQOrx0OG@N+sNF84&xj_}9NgCp1fz($gIM1uLQuaW948et zz14gFOf<&vk_uYBB>f#Pc3PZZFj5lqgQNmQwAiO{0&7P}V3|n;_MVcUkV`5k7tm!T z)YFvhqyj_dxP-R8#+pX8gpp1v0E&4|D(I^s^fV_G4rOK3RBp6zjN|d-(+dDB6FW!Q zmhAl-f=&1Z_kj@fNAv@Nknsc{ox(J*Oe|BK0000Px%1W80eR9J=WmqAM^Q5462V+~;lX3|Oo1>H$9jS5*%;KHSWD;I8DyK(7Z zf@pTqqUPF0NEiYOL{J0;1qp=fdz;?yq*o*Oz|EZ1+;jf-e}0_H%y5-TrSgj{#xB71 z_4QVo*J?F9Tj~5)xBxDI3*Z9mt}7f22Hf1-P%f8ABoZsNMx()KGy-5}XNN!_Kqiyn z;^N}}0hp!p%Lgbp%pMo}Zs76be|D z#cVeFqS@cyCm0NJbaaHS>%?L)y4|j$_gVliFE6O7%IWDT;c%E%tM#M)J4_%r@UBx2_d4-a{KeB|otioLzPf9~^oy(|_BC;OiPy4^10 z@tA70ir??I^HNHL5VYHEGMNl~zKZktoaJ)KU@+j};eli_xfy^Ef_OZ>(wxtajizas zrfCBhhJj%iD2l?t!2!Cilh5Zj11ObB-`0x7qWxU2*Bu*u7hC@qxBxDI3*Z7M+rFOv Y1`8dm5kYv*P5=M^07*qoM6N<$f+-Lbv;Y7A literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..cecdcbea5964814e5d3bb75d7005446a98ebd82d GIT binary patch literal 590 zcmV-U0_nfHK(R zeeb)@)BAC}=Y3J<9iC^pyPmu2`d$D3bzdBx&v(TaejEaj&*#4cAr^~)1z;6m6<`(k zYXvr&4RX00zArB5bh@7wSEJFucs!;t4u=DULIJ&A54+tCKA(Sc$^FwJ>UO&r4u>!p z4DforzX9xaJGk9$T(4Jfk1R(QLsZ^*1Hk<7+0ODynorc5VfXQUSa=ApQRH8A7L_(7j3nr5ZxLhusfy?Cr zl}d$3Bm$vO_!z)qu|T<8W(tx5sZ@$~W;UA{fcGIJfz#=PUatp{NQ7W8_!z+Z6XWrC zOd`^uTCGMn9A*H19YUg1p-@0FnS@fQ{1D>PXGjW>1h22J&}y|zlI?bjTCGNvkjZ4! zf?ELOj$AIk4`4o@qgt)fXD1emnIyyp60=&ZuvjbOV07*qoM6N<$f;iR)y8r+H literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..015eaef4a2c97a0c98463634e42b0631155bfe87 GIT binary patch literal 562 zcmV-20?qx2P)BUuK>^UnM}sx@f3?igwW##(=wrO{|~y2$GJ)a&)w2%(vtD&w=Xu@+tRVwHEEZD~ zWwly82k5#kiej_b%;j=cM^TjVc&up}j^mH}T`tF2{tRrl+uQ9%5QKf`kw^r`aX}C$ ziUNSk<#IZmOw&9Z4$I||B+2Ihgit!2w$lLs!?1F>j1aN_j^j9v!!Rru43Z?tFwAp6 zyWM_lwpuOgq1){`#XZ*he@#EY2Y3Sjd-d=87o%^!+`Zks>Hq)$07*qoM6N<$g8f(j A(EtDd literal 0 HcmV?d00001 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

- +