diff --git a/core/api.txt b/core/api.txt index d84b70bc3b..549f3fbbac 100644 --- a/core/api.txt +++ b/core/api.txt @@ -312,6 +312,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,shape,"soft" | undefined,undefined,false,false ion-badge,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall" | undefined,undefined,false,false ion-badge,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-badge,css-prop,--background,ionic diff --git a/core/src/components.d.ts b/core/src/components.d.ts index aa541317ec..e06f4f2962 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -417,6 +417,10 @@ export namespace Components { * The mode determines the platform behaviors of the component. */ "mode"?: "ios" | "md"; + /** + * Set to `"soft"` for slightly rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes. + */ + "shape"?: 'soft'; /** * Set to `"xxsmall"` for the smallest badge. Set to "xsmall" for a very small badge. Set to `"small"` for a small badge. Set to "medium" for a medium badge. Set to "large" for a large badge. Set to `"xlarge"` for the largest badge. Defaults to `"small"` for the `ionic` theme, undefined for all other themes. */ @@ -5661,6 +5665,10 @@ declare namespace LocalJSX { * The mode determines the platform behaviors of the component. */ "mode"?: "ios" | "md"; + /** + * Set to `"soft"` for slightly rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes. + */ + "shape"?: 'soft'; /** * Set to `"xxsmall"` for the smallest badge. Set to "xsmall" for a very small badge. Set to `"small"` for a small badge. Set to "medium" for a medium badge. Set to "large" for a large badge. Set to `"xlarge"` for the largest badge. Defaults to `"small"` for the `ionic` theme, undefined for all other themes. */ diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss index d0e4ac5a7e..b171a7b3c2 100644 --- a/core/src/components/badge/badge.ionic.scss +++ b/core/src/components/badge/badge.ionic.scss @@ -18,6 +18,20 @@ font-weight: globals.$ionic-font-weight-medium; } +// Badge Shapes +// -------------------------------------------------- + +/* Soft Badge */ +:host(.badge-soft) { + @include border-radius(globals.$ionic-border-radius-200); +} + +:host(.badge-xxsmall.badge-soft), +:host(.badge-xsmall.badge-soft), +:host(.badge-small.badge-soft) { + @include border-radius(globals.$ionic-border-radius-100); +} + // Badge Sizes // -------------------------------------------------- diff --git a/core/src/components/badge/badge.tsx b/core/src/components/badge/badge.tsx index 97f743d5ff..eb6a4ee191 100644 --- a/core/src/components/badge/badge.tsx +++ b/core/src/components/badge/badge.tsx @@ -26,6 +26,13 @@ export class Badge implements ComponentInterface { */ @Prop({ reflect: true }) color?: Color; + /** + * Set to `"soft"` for slightly rounded corners. + * + * Defaults to `"round"` for the `ionic` theme, undefined for all other themes. + */ + @Prop() shape?: 'soft'; + /** * Set to `"xxsmall"` for the smallest badge. * Set to "xsmall" for a very small badge. @@ -38,6 +45,22 @@ export class Badge implements ComponentInterface { */ @Prop() size?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'; + private getShape(): string | undefined { + const theme = getIonTheme(this); + const { shape } = this; + + // TODO(ROU-10777): Remove theme check when shapes are defined for all themes. + if (theme !== 'ionic') { + return undefined; + } + + if (shape === undefined) { + return 'round'; + } + + return shape; + } + private getSize(): string | undefined { const theme = getIonTheme(this); const { size } = this; @@ -55,12 +78,14 @@ export class Badge implements ComponentInterface { } render() { + const shape = this.getShape(); const size = this.getSize(); const theme = getIonTheme(this); return ( diff --git a/core/src/components/badge/test/shape/badge.e2e.ts b/core/src/components/badge/test/shape/badge.e2e.ts new file mode 100644 index 0000000000..32bfa16bf5 --- /dev/null +++ b/core/src/components/badge/test/shape/badge.e2e.ts @@ -0,0 +1,77 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * This behavior does not vary across directions. + */ +configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => { + test.describe(title('badge: shape'), () => { + test('should render soft badges for smaller sizes', async ({ page }) => { + await page.setContent( + ` +
+ 1 + 1 + 1 +
+ `, + config + ); + + const container = page.locator('#container'); + + await expect(container).toHaveScreenshot(screenshot(`badge-shape-soft-smaller-sizes`)); + }); + + test('should render soft badges with long text for smaller sizes', async ({ page }) => { + await page.setContent( + ` +
+ 99+ + 99+ + 99+ +
+ `, + config + ); + + const container = page.locator('#container'); + + await expect(container).toHaveScreenshot(screenshot(`badge-shape-soft-smaller-sizes-long-text`)); + }); + + test('should render soft badges for larger sizes', async ({ page }) => { + await page.setContent( + ` +
+ 1 + 1 + 1 +
+ `, + config + ); + + const container = page.locator('#container'); + + await expect(container).toHaveScreenshot(screenshot(`badge-shape-soft-larger-sizes`)); + }); + + test('should render soft badges with long text for larger sizes', async ({ page }) => { + await page.setContent( + ` +
+ 99+ + 99+ + 99+ +
+ `, + config + ); + + const container = page.locator('#container'); + + await expect(container).toHaveScreenshot(screenshot(`badge-shape-soft-larger-sizes-long-text`)); + }); + }); +}); diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..9443d536c2 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..512f458373 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..59cf9050c8 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..117f06854d Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..df43559f40 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..3ac6cd5399 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..0644f61202 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..ead53a8ce9 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..e5265ed9b9 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..8050298f22 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..82086cedb2 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..20d70ff0bb Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/shape/index.html b/core/src/components/badge/test/shape/index.html new file mode 100644 index 0000000000..58ba6d17fd --- /dev/null +++ b/core/src/components/badge/test/shape/index.html @@ -0,0 +1,41 @@ + + + + + Badge - Shape + + + + + + + + + + + + + Button - Shape + + + + + + + Default + 00 + 99+ + + + Soft + 1 + 99+ + + + + + + diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index dc31523cea..db6c7f8902 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -260,14 +260,14 @@ export declare interface IonBackdrop extends Components.IonBackdrop { @ProxyCmp({ - inputs: ['color', 'mode', 'size', 'theme'] + inputs: ['color', 'mode', 'shape', 'size', 'theme'] }) @Component({ selector: 'ion-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'mode', 'size', 'theme'], + inputs: ['color', 'mode', 'shape', 'size', 'theme'], }) export class IonBadge { protected el: HTMLElement; diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index 2c40bd0556..ee91d8f165 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -344,14 +344,14 @@ export declare interface IonBackdrop extends Components.IonBackdrop { @ProxyCmp({ defineCustomElementFn: defineIonBadge, - inputs: ['color', 'mode', 'size', 'theme'] + inputs: ['color', 'mode', 'shape', 'size', 'theme'] }) @Component({ selector: 'ion-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'mode', 'size', 'theme'], + inputs: ['color', 'mode', 'shape', 'size', 'theme'], standalone: true }) export class IonBadge { diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 958a52c82a..835ca9bbdc 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -118,6 +118,7 @@ export const IonBackdrop = /*@__PURE__*/ defineContainer('ion-b export const IonBadge = /*@__PURE__*/ defineContainer('ion-badge', defineIonBadge, [ 'color', + 'shape', 'size' ]);