diff --git a/core/api.txt b/core/api.txt index d86d9002b1e..7b71e2ad13e 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 517586ff279..2d0dc800f56 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 b6a583e9d45..5b6cfcf915d 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 59da1fbd133..c2c2f95c54e 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 c9c8aeb6ac1..3d277a4e959 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 00000000000..6c1265c54f4 Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..cf273fdf753 Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..fe1e303c848 Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-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 addbff82e40..793531d4e93 100644 --- a/core/src/components/badge/test/size/index.html +++ b/core/src/components/badge/test/size/index.html @@ -32,6 +32,10 @@ Small Badge 00 + + Medium Badge + 00 +