From 15f8c550467fa2f2fccd8f7e61e70ad26b03f934 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 22 May 2024 11:32:48 -0700 Subject: [PATCH] feat(badge): add medium size for ionic theme (#29528) --- core/api.txt | 2 +- core/src/components.d.ts | 8 ++++---- core/src/components/badge/badge.ionic.scss | 10 ++++++++++ core/src/components/badge/badge.tsx | 4 ++-- core/src/components/badge/test/size/badge.e2e.ts | 13 +++++++++++++ ...ium-ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 501 bytes ...um-ionic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 924 bytes ...ium-ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 473 bytes core/src/components/badge/test/size/index.html | 4 ++++ 9 files changed, 34 insertions(+), 7 deletions(-) create mode 100644 core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png diff --git a/core/api.txt b/core/api.txt index d86d9002b1..7b71e2ad13 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,"small" | undefined,undefined,false,false +ion-badge,prop,size,"medium" | "small" | 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 517586ff27..2d0dc800f5 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. 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. Defaults to `"small"` for the `ionic` theme, undefined for all other themes. */ - "size"?: 'small'; + "size"?: 'small' | 'medium'; /** * 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. 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. Defaults to `"small"` for the `ionic` theme, undefined for all other themes. */ - "size"?: 'small'; + "size"?: 'small' | 'medium'; /** * 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 b6a583e9d4..5b6cfcf915 100644 --- a/core/src/components/badge/badge.ionic.scss +++ b/core/src/components/badge/badge.ionic.scss @@ -30,3 +30,13 @@ line-height: globals.$ionic-line-height-600; } + +/* Medium Badge */ +:host(.badge-medium) { + min-width: globals.$ionic-scale-1000; + height: globals.$ionic-scale-1000; + + font-size: globals.$ionic-font-size-450; + + line-height: globals.$ionic-line-height-700; +} diff --git a/core/src/components/badge/badge.tsx b/core/src/components/badge/badge.tsx index 59da1fbd13..c2c2f95c54 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 `"small"` for less height and width. Set to "medium" for slightly larger dimensions. * Defaults to `"small"` for the `ionic` theme, undefined for all other themes. */ - @Prop() size?: 'small'; + @Prop() size?: 'small' | 'medium'; 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 c9c8aeb6ac..3d277a4e95 100644 --- a/core/src/components/badge/test/size/badge.e2e.ts +++ b/core/src/components/badge/test/size/badge.e2e.ts @@ -18,5 +18,18 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens await expect(badge).toHaveScreenshot(screenshot(`badge-size-small`)); }); + + test('should render medium badges', async ({ page }) => { + await page.setContent( + ` + 00 + `, + config + ); + + const badge = page.locator('ion-badge'); + + await expect(badge).toHaveScreenshot(screenshot(`badge-size-medium`)); + }); }); }); diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..6c1265c54f4acbd191950f5cc2b243f9420f8dc6 GIT binary patch literal 501 zcmVPx$uSrBfR9J=WmcK6pVH}5_x4lEF?LdM^<7Y%H#9)ya8H`x)2bhc^u_M7K@eha* zV`H@uiGfL28u7bQZPS)s&v0#nM7-y{(BXZiyUXY9ect!`zW2U@sXLo0#`oU>KcNLx z(SoXIK~=P%Dq2vLsuwiezA)Hfurd>3xYxuq1n2PrE4vx?j`F|C{e*CHn(1lrbF$Vz zI3T#ZwMgY`2HKrIPHrSCjmzd_a8=@^iF(2T!Omfhp7|#R7ZNOPrx5~{r$erDo(ql* z)Bvy<%TgZpt%EFY1?Y?Vi8lCL9b#fV$^LQPRnBukfc`dv)!7gueI}+~aQ4j}E1UCN@UN-* rhq#&@W6U^oY|{J_0EvyKKmPHj3x(t)iGk0VYPN@G#Yzo1neN4vm_DzmE*& zF$W^kjQC-g6&2Tv7)UehE-tqz0+$l)OGO|du3q98>9elOHvp}!2LN{3NU zZGl1tR9(GPn^mZIXT|=TW=s;W>^L+*)@$Nt+pv1yT`%10^#9?zuXISBfzzW zz(6s$D|ZOhpJo}5J*l;%2EX>&5tiz#!NsI~wBOdkPD)KlYEY>FtdIE`oOjHC9@1u} z;^$o*g8XFIc+rG9(m#cS;4KdEm!qRl3kzAe_NbowWMjt)H`HWK2k$J>Ay_BFmP;nQ zY34!Lo@grLPw~ItGl2>QWCv*@MIJ_q{Op4f z>VcOHRz&BUIlGxLYUCuS(L`>Xh&1ORqgfOM$kriyP#6Z>R(p}&#-3u+2)Rkpjp#D+ z+qsA|^UwKOc+X+bPudK7)36I;Z<2l2&8Q^cLPHcFJ1E<3&PS^ev4Gsg6AsjoewI-_ zjHWL8v^kfPd|sj_qLz`nSk92V4LKE~c=16voTxSMCSmYCn+?@`Jot)iT!b9^v4fC6Ce#|h;N3fVj zHzIY#D#Su8#6m2@KZ(Q2qRFTuxui@boKA|noW66SonF-}(oP|!-6;{KnO(mkljowL z)mSV@8N)(KZSKyeoS0wr*1SiN$?;_^vhp^%R@gq$2tjh$V};rhPfzp!*iTms1^@@? zN<+ukkR#GBnbO~jWhV*sNdWF&^yW;d%3ezbfaoCQQ(IzpFKG@wK3RLRRAm6XGT~EO zVySaEA%stDiCJf4Fvh30#N}$M-sk#0f!9Tvh)->a>kXDG=m6s3)>os*B;ad3C_c3% z25@mx2e2{gq7neC&$t~Fw~vjdqG3uoG5@(n0yLZQ`&=Zi8ft~bLzFSh?Wt#(nknUk zVtkXo;$36s*Y)868VgdtLb4C~>S4LPFQ3{v@gL>?^Small Badge 00 + + Medium Badge + 00 +