From f60a3f22324eea64c1ea6566ba3aebf29c738183 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 3 Jun 2024 11:33:29 -0700 Subject: [PATCH] feat(badge): add rectangular to ionic theme (#29576) Co-authored-by: Brandy Carney --- core/src/components.d.ts | 4 +-- core/src/components/badge/badge.ionic.scss | 6 ++++ core/src/components/badge/badge.tsx | 1 + .../components/badge/test/shape/badge.e2e.ts | 26 ++++++++++++++++++ ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 214 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 217 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 209 bytes ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 619 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 656 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 528 bytes .../components/badge/test/shape/index.html | 9 ++++-- 11 files changed, 42 insertions(+), 4 deletions(-) create mode 100644 core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png create mode 100644 core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 7e8a82744a..8b44d6d181 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -418,7 +418,7 @@ export namespace Components { */ "mode"?: "ios" | "md"; /** - * Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes. + * Set to `"rectangular"` for non-rounded corners. Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes. */ "shape"?: 'soft' | 'round'; /** @@ -5666,7 +5666,7 @@ declare namespace LocalJSX { */ "mode"?: "ios" | "md"; /** - * Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes. + * Set to `"rectangular"` for non-rounded corners. Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes. */ "shape"?: 'soft' | 'round'; /** diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss index cfa443f2d9..0ec10a3496 100644 --- a/core/src/components/badge/badge.ionic.scss +++ b/core/src/components/badge/badge.ionic.scss @@ -32,10 +32,16 @@ @include border-radius(globals.$ionic-border-radius-100); } +/* Round Badge */ :host(.badge-round) { @include border-radius(globals.$ionic-border-radius-full); } +/* Rectangular Badge */ +:host(.badge-rectangular) { + @include border-radius(globals.$ionic-border-radius-0); +} + // Badge Sizes // -------------------------------------------------- diff --git a/core/src/components/badge/badge.tsx b/core/src/components/badge/badge.tsx index 99cbb8ae5d..43c4c9846f 100644 --- a/core/src/components/badge/badge.tsx +++ b/core/src/components/badge/badge.tsx @@ -27,6 +27,7 @@ export class Badge implements ComponentInterface { @Prop({ reflect: true }) color?: Color; /** + * Set to `"rectangular"` for non-rounded corners. * Set to `"soft"` for slightly rounded corners. * Set to `"round"` for fully rounded corners. * diff --git a/core/src/components/badge/test/shape/badge.e2e.ts b/core/src/components/badge/test/shape/badge.e2e.ts index 982cc38d9b..5721737781 100644 --- a/core/src/components/badge/test/shape/badge.e2e.ts +++ b/core/src/components/badge/test/shape/badge.e2e.ts @@ -99,5 +99,31 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens await expect(badge).toHaveScreenshot(screenshot(`badge-shape-round-long-text`)); }); + + test('should render rectangular badges', async ({ page }) => { + await page.setContent( + ` + 1 + `, + config + ); + + const badge = page.locator('ion-badge'); + + await expect(badge).toHaveScreenshot(screenshot(`badge-shape-rectangular`)); + }); + + test('should render rectangular badges with long text', async ({ page }) => { + await page.setContent( + ` + 99+ + `, + config + ); + + const badge = page.locator('ion-badge'); + + await expect(badge).toHaveScreenshot(screenshot(`badge-shape-rectangular-long-text`)); + }); }); }); diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..4ea3ecb6f17b3326331eadb585686f6f5630bfdd GIT binary patch literal 214 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz#^NA%Cx&(BWL^R}6FglULn2y} zQ#dMr&QD}uyzCHV_o^X~y~iryg>^%F^F+n_-IE{w3lZFOHbK#S@)iMM=XL7h&bzeL zn;FcNZ%#9wAk7pUTp@Xid51)v&ELZxp0cN^T1N6k6un??4m%jlcKX$K9{K%&&lol> zN;um&UnH`Nr>#s+qV&KD=C)R533utGi}}DjH(7%Vd<+bY+oTP&rb?s$-NxYQ>gTe~ HDWM4fvwcZF literal 0 HcmV?d00001 diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..1e67e0a412ac7c5716d401e3806d42327527eb24 GIT binary patch literal 217 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=ffJ1)eUBArbD$DIAqQ=O;2SK3>7> z=A2-{0whkfF=!hzH?QZkcHShce)wbbe#xk7b*igvRClU8d7hNAg7aBg$L8k=0*}*~ zqHpc^rR{uJ%gXYALu2d1n(YFIXYQ_-n798wHy`URD~AcQCpyZ!_$+jL61HzU;0mu{FUWYJtkRJ2D6VrYz(57!}bG@;vcC*sJqTSDZa|!ei3p zj&F`_(#t!IUjO-PZ&&lze-dkt%QV-vE}iT1|NQ;<`~T#bN|&5`dKRwl*wS!A!K(g0 z|3s~e2Nb+r7mM{oHSh||zIcMo*}lUKWYrZWHa3Qx>Qc!|_T7pGx`@Hk)z4*}Q$iB} D{l--R literal 0 HcmV?d00001 diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..a20bbce159c253116d5016ce611348b04e06c448 GIT binary patch literal 619 zcmV-x0+juUP)Px%B}qg^=m0fjP_Bpn*9k#>T?Bwhs>>lPj4Kv>` zA3uJ>U*Pmoo*F@{c0e&^j2>o;9%hUlwI3r2FmTGj=X*Xf4;u*I@^bv3T(+|*F+=BF z4EDH4X7W6kOtZry@_eA4qx-F8Ipre!dmMP20*fO7qH&ddm!qTM-&KAOoi@05@wcr~YxQVREGzWiqHTaJ!q8JlFxDdyra2lK-| zP9C=XcQTroSV{%Jzh(WS)uf75f`+Z4A*T{FZ+-fin<*{?YkV>tkpVyfo5 zC1U^8D z24Faps@O4t?qn`>+Bw%@r@hIF(=KrRNs^bdYh^o|64Tit)7EHZYJQEo<0(R6r6LF5 z&UlK^sWg$ec29~a`8QRI+CR0cg&CuV8KZ|8qlX!z#~;lU2~NZ$mLUKD002ovPDHLk FV1gYR8`uB< literal 0 HcmV?d00001 diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..408e455f67fafd8e1c912643c34de48cc14303ec GIT binary patch literal 656 zcmV;B0&o3^P)Kg=l={2+N=!w8w45lUjD`4()0o7IKpa> z9iuMA%+MId!?5qlFNRrrzTy~`^&H&81J5j>N3v>`6HL8*<49D99 zaYoP79p4#p=6*(z$C=Bx*%=rnCGjzYSgM4$-)d9Pyb{H=t86` zWOew|P?Uzy9Ro@~YfAVTEY(;UoEzT*vo53@LI#A?P{lzRz%&#Ej3#3xR$x>yFm$Z{ z#!$KJ3yMRCQ3KLI6$j1B;$!ePWoI~h_cz1To!`OHg${^OgELiQkr+CaD=EIBrrOaE qA{3gVAv797ghGIj{Ad~?CWHVuf}^lEG{>O;0000r++DnGjFaCuu^9wC`GbOoNSDx{#+lw{WmFpAKw4buk#}d zGec82H-0HN2sC3~QOIYbf!%r(n{?z@csLmMT>ACq^FIa#h67iB-Fx}hPK%9=g%OVw zT)Va`OSlz>f*3Pln;_ude+2vKyML_A4C4Gu1f>W96m_?s|M~Nm!BK~mkCTysfk8@; zNkf{Mfq{XA8J`r9fDx_Mn3>L-=E8aN+28$Fet8XO8x0 z9!#S{dq1u@@e|HvL6a_8@P&nmF~pKR!kT0D-tW=299(RSZ$JOTBlYs*zl#t4FfcHP z3ouCtFg<$n_x+du3=9k(zWqlw8Qo9FKvk0Y)+FJLr+)@?eI!PzCYZZ9f;)EdrzMAe zV48+AKBWYi7Uu9VFfdHo_MLbsJODlP7#J8b+&H6bIElU SSN%Hx0000 - Button - Shape + Badge - Shape @@ -26,7 +26,7 @@ Default - 00 + 1 99+ @@ -39,6 +39,11 @@ 1 99+ + + Rectangular + 1 + 99+ +