From 1c035af1a2661b0cc8345fea2f81bc656de92280 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 22 May 2024 14:00:43 -0700 Subject: [PATCH] feat(badge): add xlarge size for ionic theme (#29530) --- core/api.txt | 2 +- core/src/components.d.ts | 8 ++++---- core/src/components/badge/badge.ionic.scss | 13 +++++++++++++ core/src/components/badge/badge.tsx | 4 ++-- core/src/components/badge/test/size/badge.e2e.ts | 13 +++++++++++++ ...ge-ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 632 bytes ...e-ionic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 1163 bytes ...ge-ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 607 bytes core/src/components/badge/test/size/index.html | 12 ++++++++---- 9 files changed, 41 insertions(+), 11 deletions(-) create mode 100644 core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png diff --git a/core/api.txt b/core/api.txt index d5de100175..be951f2a15 100644 --- a/core/api.txt +++ b/core/api.txt @@ -310,7 +310,7 @@ ion-backdrop,event,ionBackdropTap,void,true ion-badge,shadow ion-badge,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true ion-badge,prop,mode,"ios" | "md",undefined,false,false -ion-badge,prop,size,"large" | "medium" | "small" | undefined,undefined,false,false +ion-badge,prop,size,"large" | "medium" | "small" | "xlarge" | undefined,undefined,false,false ion-badge,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-badge,css-prop,--background,ionic ion-badge,css-prop,--background,ios diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 5c2c3bd73c..59f58e668e 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -410,9 +410,9 @@ export namespace Components { */ "mode"?: "ios" | "md"; /** - * Set to `"small"` for less height and width. Set to "medium" for slightly larger dimensions. Set to "large" for even greater height and width. Defaults to `"small"` for the `ionic` theme, undefined for all other themes. + * Set to `"small"` for less height and width. Set to "medium" for slightly larger dimensions. Set to "large" for even greater height and width. Set to `"xlarge"` for the largest badge. Defaults to `"small"` for the `ionic` theme, undefined for all other themes. */ - "size"?: 'small' | 'medium' | 'large'; + "size"?: 'small' | 'medium' | 'large' | 'xlarge'; /** * The theme determines the visual appearance of the component. */ @@ -5642,9 +5642,9 @@ declare namespace LocalJSX { */ "mode"?: "ios" | "md"; /** - * Set to `"small"` for less height and width. Set to "medium" for slightly larger dimensions. Set to "large" for even greater height and width. Defaults to `"small"` for the `ionic` theme, undefined for all other themes. + * Set to `"small"` for less height and width. Set to "medium" for slightly larger dimensions. Set to "large" for even greater height and width. Set to `"xlarge"` for the largest badge. Defaults to `"small"` for the `ionic` theme, undefined for all other themes. */ - "size"?: 'small' | 'medium' | 'large'; + "size"?: 'small' | 'medium' | 'large' | 'xlarge'; /** * The theme determines the visual appearance of the component. */ diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss index a8f3457e7b..dfb72a521e 100644 --- a/core/src/components/badge/badge.ionic.scss +++ b/core/src/components/badge/badge.ionic.scss @@ -53,3 +53,16 @@ line-height: globals.$ionic-line-height-700; } + +/* Extra Large Badge */ +:host(.badge-xlarge) { + --padding-start: #{globals.$ionic-space-200}; + --padding-end: #{globals.$ionic-space-200}; + + min-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/badge/badge.tsx b/core/src/components/badge/badge.tsx index 8dca94cc99..c733457c6c 100644 --- a/core/src/components/badge/badge.tsx +++ b/core/src/components/badge/badge.tsx @@ -27,10 +27,10 @@ export class Badge implements ComponentInterface { @Prop({ reflect: true }) color?: Color; /** - * Set to `"small"` for less height and width. Set to "medium" for slightly larger dimensions. Set to "large" for even greater height and width. + * Set to `"small"` for less height and width. Set to "medium" for slightly larger dimensions. Set to "large" for even greater height and width. Set to `"xlarge"` for the largest badge. * Defaults to `"small"` for the `ionic` theme, undefined for all other themes. */ - @Prop() size?: 'small' | 'medium' | 'large'; + @Prop() size?: 'small' | 'medium' | 'large' | 'xlarge'; private getSize(): string | undefined { const theme = getIonTheme(this); diff --git a/core/src/components/badge/test/size/badge.e2e.ts b/core/src/components/badge/test/size/badge.e2e.ts index 9b71fa7489..48e3b96461 100644 --- a/core/src/components/badge/test/size/badge.e2e.ts +++ b/core/src/components/badge/test/size/badge.e2e.ts @@ -44,5 +44,18 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens await expect(badge).toHaveScreenshot(screenshot(`badge-size-large`)); }); + + test('should render xlarge badges', async ({ page }) => { + await page.setContent( + ` + 00 + `, + config + ); + + const badge = page.locator('ion-badge'); + + await expect(badge).toHaveScreenshot(screenshot(`badge-size-xlarge`)); + }); }); }); diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..ae25c46730b08ce2f54ff556606b37d94387c0d8 GIT binary patch literal 632 zcmeAS@N?(olHy`uVBq!ia0vp^79h;Q1|(OsS<3+_#^NA%Cx&(BWL`2bFd2EeIEG|2 zzMWy85$q^)-2Q!>(C1(38ApTuH|U0P-Cf0(Bv~Er zmUKT_kX$%H&#CZ(z0>NA9V-K!ReWcC5o%{&rkcOvd-sdh-#-1jf6MLXf4_J4W1GIT ztSttw;>AB~FKpWOm?if(=dC{BEwbtv)_xbt<}7$?;dnc<@?gYfH7k=T4-R=q@Ba0e zg|ojT?DL14O4sE?PUyPa@0yYFPh`DhxluYlo6nqgJ#VUQmrL&ZvUg#^Z|M80wL#(VE^X!_yV#nBEMJrN z;`fdp2(@S1vzbz#K1?Ms>brx?2GNPG?tZ(0B9v5(QREq~nf#jaev z`ZiQFRz7_aP;!QTn=4D_vGXf)BX6Hi@&&24n9Ui!cVCBS{_D1?+dgjHMnGrI-?x%s zL*d+{73EJae*4g8%20Fmdc}WNu-tpUsSzCC)85VT-&kEeC)d{Q@$uV|Hzno5^XxSj zt=`n5>1&xY|JM8`&t{6m9a;6yXz!5^Pv!UjxAr{7GXG$A_>##s^J9}<<+je-+VyoV z*HRn1Gue5*(=03}_Ul|xNp=dp_uzle?HAZ02OewZ^gDiV|FUk@1*IznPgg&ebxsLQ E0JE|qiU0rr literal 0 HcmV?d00001 diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..4ea0076250d17443f7731eb713025b644f38b1a6 GIT binary patch literal 1163 zcmV;61a$j}P)trVt#48llsJe&qLO#oR8VsKMHG$AAd;#g$jG8qg(G*Ks@jtw(# z1SSy8q9Gw0D#P$5xIuU*4VY@r~UoD z-*f#g@*X!7>T zYlb>a_;rJeR0A5D0w~ztj^A4Xm^&#-t^yY8cl%NJNr&MBV3?qVL~GeP81bZH&515N zx329Ls0ky@IQ70$e!rB!mJw(cMbFytL3WJ%I(4ZB=P&l$+OvB_JTk{e!qX8%Vooc1 zl$_`e!vs@@n{jrXLL#Tahi!*DRbZMbT}X^KVdwEKyilf)uPJh1X1W!Bx_gn7=T@!n zU%F$LT)~f2u13NzL1rp7%N;U?C*Sen!1roHIkDD>^igIqoF1gD@W|`VmN=0*!i@Tc zZcKXfZxw!KJbPY`m!D;=^`iE>&<1t8qzx0yemn}F=EupuH<`fJ5$OJL(V#*Kq8GBE-NDH&5KDg7g3j0K0^N{}DT{jd$6*V6$u5QYgZ$cV!B#o7d! znT*O;2>wyw!tlW+O@i6wK2&|9F8Mp~>4E;c@^euijaS&RO4v9mfW^L}!r6 z?7C?((~7;=e_m}0C&^^e$Yf6a)`RqwipiWIlX;j-=Gf2OnD~a;WS%CIsl913nQOe* zb7p`|=Ak4r&Xp={V$qg%Y~HV)Seid}VTi+o9b^`B$TV0~FLPklqgJ``-=C{)6E8ny z!$%912`7b2se#PNNEkkYW)sj%jouj}q4wMB$a=5O6=ZGuI?wsw?%t&m@mX-C-t zrO~Io=E3O;eT|;A2-YfEeL*7MioifOdIqv|UJMGKvCDvqcV0!+(N4JyY|4$ph#@9) zbOw>U*o_tf&Eh_4{EZu3uv-CkHuEZdaQk{OKf{J)H07{hBj55W4n{Qw#$lIGSDb*c zRIZ_7;U*up9#Y$V&J$6nToeaM`uC0>Xmn#|(|67Ijlyt={sWJZTsbQmvmdh}$<=pV zD*4inegAP?nmR5LMKkO)=~zfjiAJ{os%f5GP1mJ1o~}zqOyF+s4V!{@8>rsz7Xt~6AJR8gkBs%LA{ydWuH)x7bW!K5DMze954HXg1ji97l%+# dZ{~Q}cLQB8`e=J-96SI3002ovPDHLkV1k_ICo}*6 literal 0 HcmV?d00001 diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..cd0d1e965a5d9d74f1c77ae448d413c186c4a0e5 GIT binary patch literal 607 zcmeAS@N?(olHy`uVBq!ia0vp^79h;Q1SHj;tnma=Y)RhkE)4%caKYZ?lNlJ8L_A#_ zLoyoQPIvSW36wbg|8rW|waA$09$iC@%grfqD*l>^vMdKDS8(YlHQAJKTCr5G?RG!e z&Ed$Ne`%p@38$mAtD9n1$I8_Lx5aK9Teo?)@n+d;X4jkdnAaTM^zpA>{=MJ!_xc~s z?l+e@b~%H^WiM+=VqjLp6e+Q#ZLTYkn3)oRhwpEjX!rSJ#*+QoDKkC(eu%5ru!%n* z`|Q-eB%=(we>2tE*Un_W7(6-q_c@1050j-@9gTdJ+3XhZ{I#&6yziKRBEs7jg*;E4I5X+pPc&W*1pLz&Z~xZF}&k5mE0Aj z<8V>>t|CLV{ayXtex*h~H!>{P8d-v}rj7yB}ojf_WCt9-PNNW&K@rtF4 z8@x^94_~}LDZ7(nX+*=KUo)*&t)669DYfjOcK5D(k*ihRb=CSeWqez~v*1$IDwjjY zo9}O1F2Ws9@_RS;g3n35>Tf#a?dyDZgRGc-&70v?(xUyZTi2ViRJY zdMTvKb5V^Z9{T?vJlcD8Y{u b6F-?Bhx3TE6y(YSQw)QrtDnm{r-UW|j+_>n literal 0 HcmV?d00001 diff --git a/core/src/components/badge/test/size/index.html b/core/src/components/badge/test/size/index.html index 8062263ef5..10db12c721 100644 --- a/core/src/components/badge/test/size/index.html +++ b/core/src/components/badge/test/size/index.html @@ -25,21 +25,25 @@ - Default Badge + Default 00 - Small Badge + Small 00 - Medium Badge + Medium 00 - Large Badge + Large 00 + + XLarge + 00 +