diff --git a/core/api.txt b/core/api.txt index 32487840301..213baad7f71 100644 --- a/core/api.txt +++ b/core/api.txt @@ -317,6 +317,7 @@ ion-badge,prop,mode,"ios" | "md",undefined,false,false ion-badge,prop,shape,"round | rectangular" | "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,prop,vertical,"bottom" | "top" | undefined,undefined,false,false ion-badge,css-prop,--background,ionic ion-badge,css-prop,--background,ios ion-badge,css-prop,--background,md diff --git a/core/src/components.d.ts b/core/src/components.d.ts index d1e2462378a..45dc091256b 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -440,6 +440,10 @@ export namespace Components { * The theme determines the visual appearance of the component. */ "theme"?: "ios" | "md" | "ionic"; + /** + * Set to `"top"` to position the badge on top right absolute position of the parent element. Set to `"bottom"` to position the badge on bottom right absolute position of the parent element. + */ + "vertical"?: 'top' | 'bottom'; } interface IonBreadcrumb { /** @@ -5804,6 +5808,10 @@ declare namespace LocalJSX { * The theme determines the visual appearance of the component. */ "theme"?: "ios" | "md" | "ionic"; + /** + * Set to `"top"` to position the badge on top right absolute position of the parent element. Set to `"bottom"` to position the badge on bottom right absolute position of the parent element. + */ + "vertical"?: 'top' | 'bottom'; } interface IonBreadcrumb { /** diff --git a/core/src/components/badge/badge.common.scss b/core/src/components/badge/badge.common.scss index b690922a616..9a03c11714c 100644 --- a/core/src/components/badge/badge.common.scss +++ b/core/src/components/badge/badge.common.scss @@ -48,6 +48,18 @@ color: #{color.current-color(contrast)}; } -:host(:empty) { - display: none; +// Badge Empty (hint) +// -------------------------------------------------- + +:host(:empty[vertical]) { + @include position(null, 0, null, null); + position: absolute; +} + +:host(:empty.badge-vertical-top) { + top: 0; +} + +:host(:empty.badge-vertical-bottom) { + bottom: 0; } diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss index 4f84177a83b..ca1bd8194d4 100644 --- a/core/src/components/badge/badge.ionic.scss +++ b/core/src/components/badge/badge.ionic.scss @@ -145,3 +145,36 @@ width: globals.$ion-scale-1000; height: globals.$ion-scale-1000; } + +// Badge Empty +// -------------------------------------------------- + +:host(:empty) { + --padding-start: 0; + --padding-end: 0; +} + +:host(:empty[vertical]) { + border: globals.$ion-border-size-025 globals.$ion-border-style-solid globals.$ion-bg-surface-inverse; +} + +// Badge Sizes Empty +// -------------------------------------------------- + +/* sm */ +:host(.badge-small:empty) { + min-width: globals.$ion-scale-200; + height: globals.$ion-scale-200; +} + +/* md */ +:host(.badge-medium:empty) { + min-width: globals.$ion-scale-300; + height: globals.$ion-scale-300; +} + +/* lg */ +:host(.badge-large:empty) { + min-width: globals.$ion-scale-400; + height: globals.$ion-scale-400; +} diff --git a/core/src/components/badge/badge.native.scss b/core/src/components/badge/badge.native.scss index 820c5599ae0..e0538cf63af 100644 --- a/core/src/components/badge/badge.native.scss +++ b/core/src/components/badge/badge.native.scss @@ -11,3 +11,16 @@ font-family: $font-family-base; } + +// TODO(ROU-10747): Review size styles when sizes are defined for native themes. +:host(:empty) { + --padding-start: 0; + --padding-end: 0; + --padding-bottom: 0; + --padding-top: 0; + + @include border-radius(999px); + + width: $badge-min-width; + height: $badge-min-width; +} diff --git a/core/src/components/badge/badge.tsx b/core/src/components/badge/badge.tsx index e15edca816e..353056c39d3 100644 --- a/core/src/components/badge/badge.tsx +++ b/core/src/components/badge/badge.tsx @@ -47,6 +47,12 @@ export class Badge implements ComponentInterface { */ @Prop() size?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'; + /** + * Set to `"top"` to position the badge on top right absolute position of the parent element. + * Set to `"bottom"` to position the badge on bottom right absolute position of the parent element. + */ + @Prop() vertical?: 'top' | 'bottom'; + private getShape(): string | undefined { const theme = getIonTheme(this); const { shape } = this; @@ -89,6 +95,7 @@ export class Badge implements ComponentInterface { [theme]: true, [`badge-${shape}`]: shape !== undefined, [`badge-${size}`]: size !== undefined, + [`badge-vertical-${this.vertical}`]: this.vertical !== undefined, })} > diff --git a/core/src/components/badge/test/hint/badge.e2e.ts b/core/src/components/badge/test/hint/badge.e2e.ts new file mode 100644 index 00000000000..d7a92357375 --- /dev/null +++ b/core/src/components/badge/test/hint/badge.e2e.ts @@ -0,0 +1,14 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ directions: ['ltr'], modes: ['md', 'ios', 'ionic-md'] }).forEach(({ config, screenshot, title }) => { + test.describe(title('badge: hint'), () => { + test('should not have visual regressions', async ({ page }) => { + await page.goto('/src/components/badge/test/hint', config); + + const container = page.locator('ion-list'); + + await expect(container).toHaveScreenshot(screenshot(`badge-hint`)); + }); + }); +}); diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..e14a8f91100 Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..18c64d56fc9 Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..0735b108c99 Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..da289063e71 Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..a0b72987482 Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-ios-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..2e5bc7ca262 Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..cff64310196 Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..13ae67e41e2 Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-md-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..c0cc41f4971 Binary files /dev/null and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/hint/index.html b/core/src/components/badge/test/hint/index.html new file mode 100644 index 00000000000..57f2c65792b --- /dev/null +++ b/core/src/components/badge/test/hint/index.html @@ -0,0 +1,46 @@ + + + + + Badge - Hint + + + + + + + + + + + + + Badge - Hint + + + + + + + Badge Empty + + + Badge small + + + + Badge Medium + + + + Badge Large + + + + + + + diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Chrome-linux.png index 4da62baeeca..f8cbe434dcc 100644 Binary files a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Firefox-linux.png index b1bd956d513..51b53cbb33f 100644 Binary files a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Safari-linux.png index 03854ab1c6f..f31a0077dc4 100644 Binary files a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Chrome-linux.png index b3e60169821..a49e69fc59d 100644 Binary files a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Firefox-linux.png index b823cc94cc8..0bc76a61521 100644 Binary files a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Safari-linux.png index 7874d45d0c9..0e996b541bf 100644 Binary files a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Chrome-linux.png index b59eed28d5c..3237ca09e5a 100644 Binary files a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Firefox-linux.png index 9ae04006389..ee2cf4bec5a 100644 Binary files a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Safari-linux.png index 1348f162ab8..2489dc65fe9 100644 Binary files a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Safari-linux.png and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Chrome-linux.png index 0cd95863834..4d1c486e708 100644 Binary files a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Firefox-linux.png index 5c563f5b940..d2f308c73d2 100644 Binary files a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Safari-linux.png index 37feb54814d..fbe06a170b4 100644 Binary files a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Safari-linux.png and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Safari-linux.png differ diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index efc142a0513..a15bdebf990 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -261,14 +261,14 @@ export declare interface IonBackdrop extends Components.IonBackdrop { @ProxyCmp({ - inputs: ['color', 'mode', 'shape', 'size', 'theme'] + inputs: ['color', 'mode', 'shape', 'size', 'theme', 'vertical'] }) @Component({ selector: 'ion-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'mode', 'shape', 'size', 'theme'], + inputs: ['color', 'mode', 'shape', 'size', 'theme', 'vertical'], }) 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 8a144f3aeb8..dd2def55c85 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -349,14 +349,14 @@ export declare interface IonBackdrop extends Components.IonBackdrop { @ProxyCmp({ defineCustomElementFn: defineIonBadge, - inputs: ['color', 'mode', 'shape', 'size', 'theme'] + inputs: ['color', 'mode', 'shape', 'size', 'theme', 'vertical'] }) @Component({ selector: 'ion-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'mode', 'shape', 'size', 'theme'], + inputs: ['color', 'mode', 'shape', 'size', 'theme', 'vertical'], standalone: true }) export class IonBadge { diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index bb5880189a6..24c75f97e24 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -124,7 +124,8 @@ export const IonBackdrop = /*@__PURE__*/ defineContainer('ion-b export const IonBadge = /*@__PURE__*/ defineContainer('ion-badge', defineIonBadge, [ 'color', 'shape', - 'size' + 'size', + 'vertical' ]);