From 8ebece3e30027a398273b68a96d077b0ae103c08 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 28 May 2024 13:46:06 -0400 Subject: [PATCH] feat(avatar): add styles for rectangular shape in ionic theme (#29551) Issue number: internal --------- ## What is the current behavior? Avatar does not have styles for the `"rectangular"` shape in the ionic theme. ## What is the new behavior? - Adds the styles for the rectangular shape (border radius) - Adds e2e test for the rectangular shape ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information [Preview](https://ionic-framework-git-rou-10740-ionic1.vercel.app/src/components/avatar/test/shape?ionic:theme=ionic) --- core/api.txt | 2 +- core/src/components.d.ts | 8 ++-- core/src/components/avatar/avatar.ionic.scss | 4 ++ core/src/components/avatar/avatar.tsx | 5 +- .../avatar/test/shape/avatar.e2e.ts | 45 ++++++++++++++++++ ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 540 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 521 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 500 bytes ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 627 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 585 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 624 bytes ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 695 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 717 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 637 bytes .../components/avatar/test/shape/index.html | 9 ++++ 15 files changed, 66 insertions(+), 7 deletions(-) create mode 100644 core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Safari-linux.png create mode 100644 core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-image-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-image-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-image-ionic-md-ltr-light-Mobile-Safari-linux.png create mode 100644 core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-text-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-text-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-text-ionic-md-ltr-light-Mobile-Safari-linux.png diff --git a/core/api.txt b/core/api.txt index cb233e2d7e..8d4287501c 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,shape,"round" | undefined,undefined,false,false +ion-avatar,prop,shape,"rectangular" | "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 07d039058e..2bd6f5c617 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 `"round"` for an avatar with fully rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes. + * Set to `"round"` for an avatar with fully rounded corners, or `"rectangular"` for an avatar without rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes. */ - "shape"?: 'round'; + "shape"?: 'round' | 'rectangular'; /** * 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. */ @@ -5572,9 +5572,9 @@ declare namespace LocalJSX { */ "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. + * Set to `"round"` for an avatar with fully rounded corners, or `"rectangular"` for an avatar without rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes. */ - "shape"?: 'round'; + "shape"?: 'round' | 'rectangular'; /** * 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 9e8c228944..ac0d116ede 100644 --- a/core/src/components/avatar/avatar.ionic.scss +++ b/core/src/components/avatar/avatar.ionic.scss @@ -92,3 +92,7 @@ :host(.avatar-round) { --border-radius: #{globals.$ionic-border-radius-full}; } + +:host(.avatar-rectangular) { + --border-radius: #{globals.$ionic-border-radius-0}; +} diff --git a/core/src/components/avatar/avatar.tsx b/core/src/components/avatar/avatar.tsx index 6e3db222f3..016b7a5eb4 100644 --- a/core/src/components/avatar/avatar.tsx +++ b/core/src/components/avatar/avatar.tsx @@ -29,11 +29,12 @@ export class Avatar implements ComponentInterface { @Prop() size?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge'; /** - * Set to `"round"` for an avatar with fully rounded corners. + * Set to `"round"` for an avatar with fully rounded corners, or `"rectangular"` + * for an avatar without rounded corners. * * Defaults to `"round"` for the `ionic` theme, undefined for all other themes. */ - @Prop() shape?: 'round'; + @Prop() shape?: 'round' | 'rectangular'; get hasImage() { return !!this.el.querySelector('ion-img') || !!this.el.querySelector('img'); diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts b/core/src/components/avatar/test/shape/avatar.e2e.ts index 7a54762782..f44a119bb1 100644 --- a/core/src/components/avatar/test/shape/avatar.e2e.ts +++ b/core/src/components/avatar/test/shape/avatar.e2e.ts @@ -50,5 +50,50 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-round-image`)); }); }); + + test.describe('rectangular', () => { + 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-rectangular-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-rectangular-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-rectangular-image`)); + }); + }); }); }); diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..dfb50e7fdcf3a57d60d5abc2c42338e5b7a0c8fd GIT binary patch literal 540 zcmV+%0^|LOP)Px$)=5M`R9J=WnZ2s&Komy5=s`qrEK*Cr9}tTmSO}taB4QyTf~^**Yy$cOc>qBK z8}S*e1g*qM0>Lgte1kwz$bf}HPIuto1@Fy-tHrExX7lX@n;8a17>!0AKA0~6n9XMI z_V^>Jsv`7miC1tzR=6N5T#ywm$O;!^$O#P_0(cXfy)J4Mgy8IN*N2 zV=|e*^E~YLdl-g+QmMq8%{*e;wqaQoI-L#(AxI{Z==b|D3mCv|25!Rx7x!3)gkAUa!$^x0&S-)FH{` za=6`YSS%I@g+l1{dXOY3i0I(18CjMg%W_b0KQIeYN^v|MVVWi!$AKUS5JeG%LIL%9 z9r1YleS(+E1)I$V#bObI!2qHt!t*>hjsw#)v0N_E?RJsLWd6V4^?Jo_x5IQgecFq~ zVo0S@Xf~Ue&*vBphe#w6zWVq+#hRu;QIwZ;ilRW%G{0^93F^9zN~MBGB=WL08jYe{ zF2gVkKdt`d9VYY}WVV!IvN*1mp48SHpkh6t>R4?Si&AGXnkkdPgh@uqA~uUMkikIb z_MUP}-7Duj=ickq`_9kzeLv^(Jm-CdVzH>=jhDaxTdmexB1)134oGPYH%PI^vfLmy zNHsvs^BLp@^%xiqhnUS~5Cj2{NCfeCTu=PVTGM85JRakCJVF#jsH%$5Xauj!W;4uB24u6x+8PRl zw3ae3b`LU82E1G@kxHfD^Z5)xk^oPq6T00lDwWF9!`tmP3WWk34u@_?5@4-XL!;4v z)oOiu@a1wryY7J!Rtd00000 LNkvXXu0mjf9NXuC literal 0 HcmV?d00001 diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..cdbb3cec217fe345f9b4dea26d0465d2e682d478 GIT binary patch literal 500 zcmV6-OTg5_{h{34@A=@mn%`VAclx63X;hg_tE=3q%7zX!_`rtUO*XzAl zHBB@2V)9W8W-x;p{P*AwikaK(Hl0o##{mEoi^WExA&O$y5SkT_MkC+%+wHb#n)myC zJRVbogoZDd%kg;BbzPQa2%)a)`~BYYyvSifh%C#o*w-M>^AJKpNaS!joyHhHBti(r zIF(984hw>ys_Jk!JfF|5>kbA3RaFH+2%AH5tLydpd_K1Px%ElET{R9J=Wm`!imKoCG5U_KfM4IgQ8NScryD@E=9KlfC%RaEs*wL%7^QVT{< zQ{&ji(8C6>!GR1$z=0?EfHmuVV%Iw}PJH+=9<#?JcP+4rgJ4_^f^pF{@sLg*x)xZD z`kl{0xuCAN#1d>8ptr#D!}krK(T0o$wKKRVZ&}bC!krGLy*lpuFKG4P_6oF=d@k`G z^hfZyzFICw*McuPjMhjAV!`^K*rFDD(Uy-93ARl61VM&A7=76o zk>KBf&?thQC5smcI-bxbf`KcG7YQa4LYoN2BU!viFq;s9ZRRISLgiREMiQJ(!RxBfD!^4$p6Bqz%W&>u?*W$ z*E|^wPK$6}f|F;ayrplkKZ0fl?v2$_QnG24l`hK5&&MYP^_Dv0d|`PcMN7e(^QT+W zg(bFK_}YZNplgf6(4V!YZ!Z^1y3n8Nc<}M(_T++eE%;Pl%t|4_JALsh!8Wm7_;w$@ zHx)E(=s)bhY7WB;_dZj>O>}IVq8(^&r-I&wkC8Y8kF>o{bqB$?{09f&x8hQlq3-|y N002ovPDHLkV1n$H90>pb literal 0 HcmV?d00001 diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-image-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-image-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..a566b986a1f4d2c80d2e640cc6e4feaeb3c60b8f GIT binary patch literal 585 zcmV-P0=E5$P)4bGz#h=sE7LV^D(HG$O1)@tSl6*6w+*_>(b6sclWxwx(i0N0b(*>$cp!q^iThlA(r)Lg`1_7VfnueAX zEZzg92cS!kX67Zhb;4;_y7Mn^aR%3Gk#K4yP}HA@|Z^3mW`N z8nAE&uxnL}U7cQ$8z}|Iu076=j=4!wb4(s(6-x# zH*MTzcrr(C)Vdlf*({sA`dm_3tPgU0v7m#pyRWI-8Wocqa|tT9WY1qq#ey+CJ_^W*N z)<8w5qUNne)`S4{&aGP4IyfuFwO}+X-tmnEWOa(SK!w2Uuo!`+RyCDJnJFMEc1gvl zU0_BS2F*|rYt};#0djnuQcF3i*R?}Q{->W*+)fO~={G>W8Q^pFx8d|fb5q5wDc?+( zp2b{BwJGlY(m3-EHcSB7wXB{KY@Yyi6~A0;rOx~5MP*`Ik-_Fjz`+{`7f{9h|4PAk XJt8vbZQ*t=v4fNN!NR4jLmo5W5TWudJ)V2)nS1Acw)Xx!U>8d4g!&)+D8Rbv1lOlO;>Kn= z2S_E!rzvF+im#vm4xrVe*}?T9*RKZXf<}c}2`zT8>v7s*V67ZI|3-hzNgZ8C1(aK$ zfV0b$)H@9|X?CPyg=%*3{5Zh9@nSZum+R4!Sf0&b zbJN!TsvA2Fa9FQOl9{rdlS`tUH-l42Wo}C1bl42er!nX#_%v1eGk6tm?c){X3p3lo#N6074+-{f;Ww z^BGPUPO!c+nPE=}9{3DRBb{RJ3C1(Bdt}p6kFpLtbLoy~n+)xBh9(HG94v><2tb2u znrePx%aY;l$R9J=WnK4W2P!xc_K2j_#(n6ae3WDuW6cHg=Gb*(R{s9LmIE#}%!=d6o zaCCBT>CiUu|r++uYsVp(x6SoN1bLIvqD2 z8yh2)N-;Gx_5TD94-aXzTFA1@^z`&V?&Rcz^Ye2Oi39+S<6zr1nM{Vw%}pYa$oC4~ z-`~?}wTQ>#=(_$v5I~k?c6N5$`0DD4{r!E)h7S^*WB@ zeA+WJGsDEh1UEM~o@RL#e0_bTR;!^X3X6-2IF7^F+1aOk-EJ2l1hOo9n&Zf*|4Fi=%>pw6~!j*gB1cz%B7;^KnI$w~70yr+4dchE2lGMNm?WD)>X zRWVHyA;dskzu!j)fe?a+hX;7SEKg5Qp5}Sl!EU!pqtQUqG_J3&0T>@2N0KBA!(e4) z#jQ;w5^QX2xN)!7qf{z!aB#rZ*4Fn3)@n8S{XUgSg-WF|kgHa!zAMwy+R9hz5F zm2$c4UIHNmrBVsrk2jf2vbMH{rfHr8L&ak8E%+|>K_KXtK+rFNpkD$(zXXDQ2?YHT d`t83V{sKXu=5+vPY^MMK002ovPDHLkV1mUeM4bQt literal 0 HcmV?d00001 diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-text-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..ff8f260ae6a5b77bfb8780bf7100ccd8281d20ef GIT binary patch literal 717 zcmV;;0y6!HP)v!t;X)| z?sNeYi3A=V9?)*LsTG64@Fk$%@5kKS+~B)dEQVUG2CvsUJwRf^<#Iuz(ctav4R?2U z^s_)97$of*90p9KQn56 zy$)h9?s6ru(GlOlgTs!I83p$w1k6$1CXJaWN{vn zR;vYKMXS|9uh-KYq-?jhw-mHLo&6H;@9)zg>2|w#dU`@Oo28~L7Rw}j++Vk@uC9ckem&Yej`9%t<}|4?CtIS z6OhD`JxG~JTZ~(r0AF8UL8fwRYYXe^>!0=}lX-o84Uflz`T6;84VFqJWHK2zoleMP zvT=OeN}SKV!feq*5u?*4D7Sy-f#alEn#dk_~_Q9v+a@ zC~uHA$ZCK!p6@~4Agck^c)kaJ%pmJV(~SQBuBgWVPA~+h00000NkvXXu0mjfZqQj* literal 0 HcmV?d00001 diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-text-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..e8849fc65a8281daa029feb2468b2c7fe1585aef GIT binary patch literal 637 zcmV-@0)qXCP)QEE_;FCuhBSH})II3|GLlY5-lt333A(J9FiQqqQ zarYNEJGtrPD2R%GAU8FQ6a#{yg4l{WsDn}Q4MHe=eT{>(??LW#bI!TvQO>~=dvQOe~qK@c3reckZVqkegL(KOBP z_lu(VAw`lT!!QiPghHWoI_+>co}Zr$8(s<{glL-Pd44n+&FAyKm0=i05QL^_*MT>i zjjE~~$NBw!i^U>I(uacme!t)E*Xwno(Rh7*eRy~0tlgK zG^%H3vso^e(?27T2*WVffe}I;kLULG765|5V5id=4u@W^_nf6DDwRqBz~OM{_xsIe zlcFfYO&h~+Z*P;yL=c4Y&CxVX5QHd-I(&0;<955xbDz(*SS;%G`W0Y=5CGI_wOXyF z2W44~$KyEu$#R#=g%CO%4xeT(g-@rGBuO+)3xc2rr_*V*TJ80EcXxMxE*X!5?lLRPDlW!d*Z z48y|VaJ${!ZnpriTCIx3A^;EsK~YpPnGA=+hA@`NWXyN937fD9o3IK0TQK%hzngvo X$Qau8F1xMD00000NkvXXu0mjf@p&Ve literal 0 HcmV?d00001 diff --git a/core/src/components/avatar/test/shape/index.html b/core/src/components/avatar/test/shape/index.html index a70ecdcb8d..bd07c0e55f 100644 --- a/core/src/components/avatar/test/shape/index.html +++ b/core/src/components/avatar/test/shape/index.html @@ -49,6 +49,15 @@ AB AB + +

Rectangular

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