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 0000000000..ae25c46730 Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ 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 0000000000..4ea0076250 Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ 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 0000000000..cd0d1e965a Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png differ 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 +