diff --git a/core/api.txt b/core/api.txt index 6dabdc41401..f2af11afc9b 100644 --- a/core/api.txt +++ b/core/api.txt @@ -316,28 +316,79 @@ 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,hue,"bold" | "subtle" | undefined,undefined,false,false ion-badge,prop,mode,"ios" | "md",undefined,false,false -ion-badge,prop,shape,"round | rectangular" | "soft" | undefined,undefined,false,false +ion-badge,prop,shape,"crisp" | "rectangular" | "round" | "soft" | undefined,undefined,false,false ion-badge,prop,size,"large" | "medium" | "small" | 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 -ion-badge,css-prop,--color,ionic -ion-badge,css-prop,--color,ios -ion-badge,css-prop,--color,md -ion-badge,css-prop,--padding-bottom,ionic -ion-badge,css-prop,--padding-bottom,ios -ion-badge,css-prop,--padding-bottom,md -ion-badge,css-prop,--padding-end,ionic -ion-badge,css-prop,--padding-end,ios -ion-badge,css-prop,--padding-end,md -ion-badge,css-prop,--padding-start,ionic -ion-badge,css-prop,--padding-start,ios -ion-badge,css-prop,--padding-start,md -ion-badge,css-prop,--padding-top,ionic -ion-badge,css-prop,--padding-top,ios -ion-badge,css-prop,--padding-top,md +ion-badge,css-prop,--ion-badge-font-family +ion-badge,css-prop,--ion-badge-hue-bold-default-background +ion-badge,css-prop,--ion-badge-hue-bold-default-color +ion-badge,css-prop,--ion-badge-hue-bold-semantic-default-background +ion-badge,css-prop,--ion-badge-hue-bold-semantic-default-color +ion-badge,css-prop,--ion-badge-hue-subtle-default-background +ion-badge,css-prop,--ion-badge-hue-subtle-default-color +ion-badge,css-prop,--ion-badge-hue-subtle-semantic-default-background +ion-badge,css-prop,--ion-badge-hue-subtle-semantic-default-color +ion-badge,css-prop,--ion-badge-shape-crisp-border-radius +ion-badge,css-prop,--ion-badge-shape-rectangular-border-radius +ion-badge,css-prop,--ion-badge-shape-round-border-radius +ion-badge,css-prop,--ion-badge-shape-soft-border-radius +ion-badge,css-prop,--ion-badge-size-large-content-font-size +ion-badge,css-prop,--ion-badge-size-large-content-font-weight +ion-badge,css-prop,--ion-badge-size-large-content-height +ion-badge,css-prop,--ion-badge-size-large-content-icon-height +ion-badge,css-prop,--ion-badge-size-large-content-icon-width +ion-badge,css-prop,--ion-badge-size-large-content-letter-spacing +ion-badge,css-prop,--ion-badge-size-large-content-line-height +ion-badge,css-prop,--ion-badge-size-large-content-min-height +ion-badge,css-prop,--ion-badge-size-large-content-min-width +ion-badge,css-prop,--ion-badge-size-large-content-padding-bottom +ion-badge,css-prop,--ion-badge-size-large-content-padding-end +ion-badge,css-prop,--ion-badge-size-large-content-padding-start +ion-badge,css-prop,--ion-badge-size-large-content-padding-top +ion-badge,css-prop,--ion-badge-size-large-dot-height +ion-badge,css-prop,--ion-badge-size-large-dot-min-width +ion-badge,css-prop,--ion-badge-size-large-dot-padding-bottom +ion-badge,css-prop,--ion-badge-size-large-dot-padding-end +ion-badge,css-prop,--ion-badge-size-large-dot-padding-start +ion-badge,css-prop,--ion-badge-size-large-dot-padding-top +ion-badge,css-prop,--ion-badge-size-medium-content-font-size +ion-badge,css-prop,--ion-badge-size-medium-content-font-weight +ion-badge,css-prop,--ion-badge-size-medium-content-height +ion-badge,css-prop,--ion-badge-size-medium-content-icon-height +ion-badge,css-prop,--ion-badge-size-medium-content-icon-width +ion-badge,css-prop,--ion-badge-size-medium-content-letter-spacing +ion-badge,css-prop,--ion-badge-size-medium-content-line-height +ion-badge,css-prop,--ion-badge-size-medium-content-min-height +ion-badge,css-prop,--ion-badge-size-medium-content-min-width +ion-badge,css-prop,--ion-badge-size-medium-content-padding-bottom +ion-badge,css-prop,--ion-badge-size-medium-content-padding-end +ion-badge,css-prop,--ion-badge-size-medium-content-padding-start +ion-badge,css-prop,--ion-badge-size-medium-content-padding-top +ion-badge,css-prop,--ion-badge-size-medium-dot-height +ion-badge,css-prop,--ion-badge-size-medium-dot-min-width +ion-badge,css-prop,--ion-badge-size-medium-dot-padding-bottom +ion-badge,css-prop,--ion-badge-size-medium-dot-padding-end +ion-badge,css-prop,--ion-badge-size-medium-dot-padding-start +ion-badge,css-prop,--ion-badge-size-medium-dot-padding-top +ion-badge,css-prop,--ion-badge-size-small-content-font-size +ion-badge,css-prop,--ion-badge-size-small-content-font-weight +ion-badge,css-prop,--ion-badge-size-small-content-height +ion-badge,css-prop,--ion-badge-size-small-content-icon-height +ion-badge,css-prop,--ion-badge-size-small-content-icon-width +ion-badge,css-prop,--ion-badge-size-small-content-letter-spacing +ion-badge,css-prop,--ion-badge-size-small-content-line-height +ion-badge,css-prop,--ion-badge-size-small-content-min-height +ion-badge,css-prop,--ion-badge-size-small-content-min-width +ion-badge,css-prop,--ion-badge-size-small-content-padding-bottom +ion-badge,css-prop,--ion-badge-size-small-content-padding-end +ion-badge,css-prop,--ion-badge-size-small-content-padding-start +ion-badge,css-prop,--ion-badge-size-small-content-padding-top +ion-badge,css-prop,--ion-badge-size-small-dot-height +ion-badge,css-prop,--ion-badge-size-small-dot-min-width +ion-badge,css-prop,--ion-badge-size-small-dot-padding-bottom +ion-badge,css-prop,--ion-badge-size-small-dot-padding-end +ion-badge,css-prop,--ion-badge-size-small-dot-padding-start +ion-badge,css-prop,--ion-badge-size-small-dot-padding-top ion-breadcrumb,shadow ion-breadcrumb,prop,active,boolean,false,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index b08966f7b9a..fb7e5f9cff6 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -11,6 +11,7 @@ import { ActionSheetButton } from "./components/action-sheet/action-sheet-interf import { OverlayEventDetail } from "./utils/overlays-interface"; import { IonicSafeString } from "./utils/sanitization"; import { AlertButton, AlertInput } from "./components/alert/alert-interface"; +import { IonBadgeHue, IonBadgeShape, IonBadgeSize, IonBadgeVerticalPosition } from "./components/badge/badge.interfaces"; import { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./components/router/utils/interface"; import { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface"; import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface"; @@ -52,6 +53,7 @@ export { ActionSheetButton } from "./components/action-sheet/action-sheet-interf export { OverlayEventDetail } from "./utils/overlays-interface"; export { IonicSafeString } from "./utils/sanitization"; export { AlertButton, AlertInput } from "./components/alert/alert-interface"; +export { IonBadgeHue, IonBadgeShape, IonBadgeSize, IonBadgeVerticalPosition } from "./components/badge/badge.interfaces"; export { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./components/router/utils/interface"; export { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface"; export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface"; @@ -471,29 +473,25 @@ export namespace Components { */ "color"?: Color; /** - * Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors. Only applies to the `ionic` theme. + * Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors. Defaults to `"bold"` if both the hue property and theme config are unset. */ - "hue"?: 'bold' | 'subtle'; + "hue"?: IonBadgeHue; /** * The mode determines the platform behaviors of the component. */ "mode"?: "ios" | "md"; /** - * Set to `"rectangular"` for non-rounded corners. Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes. + * Set to `"crisp"` for a badge with even slightly rounded corners, `"soft"` for a badge with slightly rounded corners, `"round"` for a badge with fully rounded corners, or `"rectangular"` for a badge without rounded corners. Defaults to `"soft"` if both the shape property and theme config are unset. */ - "shape"?: 'soft' | 'round | rectangular'; + "shape"?: IonBadgeShape; /** - * Set to `"small"` for a small badge. Set to `"medium"` for a medium badge. Set to `"large"` for a large badge, when it is empty (no text or icon). Defaults to `"small"` for the `ionic` theme, undefined for all other themes. + * Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a larger size. Defaults to `"small"` if both the size property and theme config are unset. */ - "size"?: 'small' | 'medium' | 'large'; - /** - * The theme determines the visual appearance of the component. - */ - "theme"?: "ios" | "md" | "ionic"; + "size"?: IonBadgeSize; /** * 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'; + "vertical"?: IonBadgeVerticalPosition; } interface IonBreadcrumb { /** @@ -900,7 +898,7 @@ export namespace Components { */ "shape"?: IonChipShape; /** - * Set to `"small"` for a chip with less height and padding. Defaults to `"large"` if both the size property and theme config are unset. + * Set to `"small"` for a chip with less height and padding, or `"large"` for a chip with more height and padding. Defaults to `"large"` if both the size property and theme config are unset. */ "size"?: IonChipSize; } @@ -6398,29 +6396,25 @@ declare namespace LocalJSX { */ "color"?: Color; /** - * Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors. Only applies to the `ionic` theme. + * Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors. Defaults to `"bold"` if both the hue property and theme config are unset. */ - "hue"?: 'bold' | 'subtle'; + "hue"?: IonBadgeHue; /** * The mode determines the platform behaviors of the component. */ "mode"?: "ios" | "md"; /** - * Set to `"rectangular"` for non-rounded corners. Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes. + * Set to `"crisp"` for a badge with even slightly rounded corners, `"soft"` for a badge with slightly rounded corners, `"round"` for a badge with fully rounded corners, or `"rectangular"` for a badge without rounded corners. Defaults to `"soft"` if both the shape property and theme config are unset. */ - "shape"?: 'soft' | 'round | rectangular'; + "shape"?: IonBadgeShape; /** - * Set to `"small"` for a small badge. Set to `"medium"` for a medium badge. Set to `"large"` for a large badge, when it is empty (no text or icon). Defaults to `"small"` for the `ionic` theme, undefined for all other themes. + * Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a larger size. Defaults to `"small"` if both the size property and theme config are unset. */ - "size"?: 'small' | 'medium' | 'large'; - /** - * The theme determines the visual appearance of the component. - */ - "theme"?: "ios" | "md" | "ionic"; + "size"?: IonBadgeSize; /** * 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'; + "vertical"?: IonBadgeVerticalPosition; } interface IonBreadcrumb { /** @@ -6862,7 +6856,7 @@ declare namespace LocalJSX { */ "shape"?: IonChipShape; /** - * Set to `"small"` for a chip with less height and padding. Defaults to `"large"` if both the size property and theme config are unset. + * Set to `"small"` for a chip with less height and padding, or `"large"` for a chip with more height and padding. Defaults to `"large"` if both the size property and theme config are unset. */ "size"?: IonChipSize; } diff --git a/core/src/components/avatar/avatar.ionic.scss b/core/src/components/avatar/avatar.ionic.scss index 11ffcdc881a..d31e6c9c5cb 100644 --- a/core/src/components/avatar/avatar.ionic.scss +++ b/core/src/components/avatar/avatar.ionic.scss @@ -169,79 +169,6 @@ height: globals.$ion-scale-800; } -// Avatar Badge Empty (hint) -// -------------------------------------------------- - -:host ::slotted(ion-badge.badge-vertical-top:empty) { - @include globals.transform(translate(globals.$ion-scale-050, calc(globals.$ion-scale-050 * -1))); -} - -:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:empty) { - @include globals.transform(translate(globals.$ion-scale-100, calc(globals.$ion-scale-100 * -1))); -} - -:host ::slotted(ion-badge.badge-vertical-bottom:empty) { - @include globals.transform(translate(0, globals.$ion-scale-100)); -} - -:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:empty) { - @include globals.transform(translate(globals.$ion-scale-100, globals.$ion-scale-100)); -} - -// Avatar Badge Bottom (hint) -// -------------------------------------------------- - -:host ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) { - @include globals.transform(translate(50%, 50%)); -} - -:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) { - @include globals.position(null, globals.$ion-scale-100, globals.$ion-scale-100, null); - @include globals.transform(translate(100%, 100%)); -} - -:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) { - @include globals.position(null, calc(globals.$ion-scale-050 * -1), calc(globals.$ion-scale-050 * -1), null); -} - -:host(.avatar-small) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)), -:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)), -:host(.avatar-large) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) { - @include globals.position(null, globals.$ion-scale-050, globals.$ion-scale-050, null); -} - -:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) { - @include globals.position(null, globals.$ion-scale-150, globals.$ion-scale-150, null); -} - -// Avatar Badge Top (hint) -// -------------------------------------------------- - -:host ::slotted(ion-badge.badge-vertical-top:not(:empty)) { - @include globals.transform(translate(50%, -50%)); -} - -:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)) { - @include globals.position(globals.$ion-scale-050, 0, null, null); -} - -:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)) { - @include globals.position(globals.$ion-scale-100, calc(globals.$ion-scale-050 * -1), null, null); -} - -:host(.avatar-small) ::slotted(ion-badge.badge-vertical-top:not(:empty)), -:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-top:not(:empty)) { - @include globals.position(globals.$ion-scale-150, 0, null, null); -} - -:host(.avatar-large) ::slotted(ion-badge.badge-vertical-top:not(:empty)) { - @include globals.position(globals.$ion-scale-150, globals.$ion-scale-050, null, null); -} - -:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-top:not(:empty)) { - @include globals.position(globals.$ion-scale-150, globals.$ion-scale-150, null, null); -} - // Avatar Disabled // -------------------------------------------------- :host(.avatar-disabled)::after { diff --git a/core/src/components/avatar/avatar.md.scss b/core/src/components/avatar/avatar.md.scss index cfcd2520280..b7679654770 100644 --- a/core/src/components/avatar/avatar.md.scss +++ b/core/src/components/avatar/avatar.md.scss @@ -11,22 +11,3 @@ width: $avatar-md-width; height: $avatar-md-height; } - -// Avatar Empty Badge (hint) -// -------------------------------------------------- - -::slotted(ion-badge.badge-vertical-top:empty) { - @include globals.transform(translate(-50%, 50%)); -} - -::slotted(ion-badge.badge-vertical-bottom:empty) { - @include globals.transform(translateX(-100%)); -} - -:host ::slotted(ion-badge.badge-vertical-top:not(:empty)) { - @include globals.transform(translate(0, 100%)); -} - -:host ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) { - @include globals.transform(translate(0, -100%)); -} diff --git a/core/src/components/avatar/avatar.tsx b/core/src/components/avatar/avatar.tsx index da5ccb81707..e4529fdb4c5 100644 --- a/core/src/components/avatar/avatar.tsx +++ b/core/src/components/avatar/avatar.tsx @@ -1,5 +1,6 @@ import type { ComponentInterface } from '@stencil/core'; import { Component, Element, Host, Prop, h } from '@stencil/core'; +import { createBadgeManager } from '@utils/badge-position'; import { getIonTheme } from '../../global/ionic-global'; @@ -19,6 +20,12 @@ import { getIonTheme } from '../../global/ionic-global'; export class Avatar implements ComponentInterface { @Element() el!: HTMLElement; + private hasLoaded = false; + + private badgeManager = createBadgeManager(this.el, () => ({ + target: this.el, + })); + /** * Set to `"xxsmall"` for the smallest size. * Set to `"xsmall"` for a very small size. @@ -45,6 +52,21 @@ export class Avatar implements ComponentInterface { */ @Prop() disabled = false; + connectedCallback() { + if (this.hasLoaded) { + this.badgeManager.init(); + } + } + + componentDidLoad() { + this.hasLoaded = true; + this.badgeManager.init(); + } + + disconnectedCallback() { + this.badgeManager.destroy(); + } + get hasImage() { return !!this.el.querySelector('ion-img') || !!this.el.querySelector('img'); } @@ -53,15 +75,13 @@ export class Avatar implements ComponentInterface { return !!this.el.querySelector('ion-icon'); } + private onSlotChanged = () => { + this.badgeManager.onSlotChanged(); + }; + private getSize(): string | undefined { - const theme = getIonTheme(this); const { size } = this; - // TODO(ROU-10752): Remove theme check when sizes are defined for all themes. - if (theme !== 'ionic') { - return undefined; - } - if (size === undefined) { return 'medium'; } @@ -102,7 +122,7 @@ export class Avatar implements ComponentInterface { [`avatar-disabled`]: disabled, }} > - + ); } diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts b/core/src/components/avatar/test/badge/avatar.e2e.ts new file mode 100644 index 00000000000..b417dddd25a --- /dev/null +++ b/core/src/components/avatar/test/badge/avatar.e2e.ts @@ -0,0 +1,71 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +import { ION_BADGE_SIZES, ION_BADGE_VERTICAL_POSITIONS } from '../../../badge/badge.interfaces'; + +configs({ modes: ['md', 'ios', 'ionic-md'] }).forEach(({ config, screenshot, title }) => { + test.describe(title('avatar: badge'), () => { + ['xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge'].forEach((avatarSize) => { + test(`${avatarSize} - should not have visual regressions with badges`, async ({ page }) => { + const contents = ['', '1', '999+', '']; + + const avatarRows = ION_BADGE_VERTICAL_POSITIONS.map( + (position) => + ` +

badge position: ${position}

+
${contents + .flatMap((html) => + ION_BADGE_SIZES.map( + (badgeSize) => ` + + + ${html} + ` + ) + ) + .join('\n')} +
+ ` + ).join('\n'); + + await page.setContent( + ` + + +
+ ${avatarRows} +
+ `, + config + ); + + const container = page.locator('#container'); + + /** + * Avatars overflow the default viewport, causing + * unrendered areas to appear black in the screenshot. + * Resizing to fit content. + */ + const box = await container.boundingBox(); + await page.setViewportSize({ width: Math.ceil(box!.width) + 50, height: Math.ceil(box!.height) + 32 }); + + await expect(container).toHaveScreenshot(screenshot(`avatar-${avatarSize}-badge`)); + }); + }); + }); +}); diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..77c7288175d Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f94a1e8b1fc Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..c7b50f9f6a2 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..543a06c4583 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..ea96548b726 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..d7d09679724 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..7af456536ae Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f5ce9d77db1 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ios-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f0a2db998dd Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..4fac58699c1 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..1c7e7168a53 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ios-rtl-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..e80d57cae91 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-md-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..1b27e46e088 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-md-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..b5e3a03ae7f Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-md-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..5746ad9c2bb Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-md-rtl-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..f55e4df7918 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-md-rtl-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..3fa73f40468 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-md-rtl-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..4d3c12c3ecd Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-large-badge-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..4b83d5caa80 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..d12f2eccd30 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..627f6a1b361 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..21fdc278de6 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..72bd47d5905 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..6eed7f914a7 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..d4a696834e7 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f5ce9d77db1 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ios-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f0a2db998dd Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..4fac58699c1 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..1c7e7168a53 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ios-rtl-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..e80d57cae91 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-md-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..1b27e46e088 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-md-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..b5e3a03ae7f Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-md-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..5746ad9c2bb Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-md-rtl-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..f55e4df7918 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-md-rtl-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..3fa73f40468 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-md-rtl-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..4d3c12c3ecd Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-medium-badge-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..d53693a307c Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..5620afdebbe Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..130a246e939 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..b0b28775e9d Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..518a0de584b Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..ad42495a05c Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..7af456536ae Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f5ce9d77db1 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ios-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f0a2db998dd Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..4fac58699c1 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..1c7e7168a53 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ios-rtl-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..e80d57cae91 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-md-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..1b27e46e088 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-md-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..b5e3a03ae7f Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-md-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..5746ad9c2bb Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-md-rtl-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..f55e4df7918 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-md-rtl-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..3fa73f40468 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-md-rtl-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..4d3c12c3ecd Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-small-badge-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..7b89cca08c8 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..37b2f487635 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..fa80202c8eb Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..72304769030 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..1b62098d8d0 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..9738788f495 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..7af456536ae Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f5ce9d77db1 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ios-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f0a2db998dd Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..4fac58699c1 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..1c7e7168a53 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ios-rtl-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..e80d57cae91 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-md-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..1b27e46e088 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-md-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..b5e3a03ae7f Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-md-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..5746ad9c2bb Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-md-rtl-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..f55e4df7918 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-md-rtl-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..3fa73f40468 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-md-rtl-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..4d3c12c3ecd Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xlarge-badge-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..1a1ad97454a Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..6fd7e930c1f Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..87af8308b15 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..d757c10f46c Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..3ea16c2a130 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f80b44b20ef Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..7af456536ae Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f5ce9d77db1 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ios-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f0a2db998dd Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..4fac58699c1 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..1c7e7168a53 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ios-rtl-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..e80d57cae91 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-md-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..1b27e46e088 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-md-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..b5e3a03ae7f Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-md-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..5746ad9c2bb Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-md-rtl-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..f55e4df7918 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-md-rtl-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..3fa73f40468 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-md-rtl-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..4d3c12c3ecd Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xsmall-badge-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..b907a2a2d46 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..d83fac30093 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..3bfbc9675ab Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..dfdcf84c787 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..5bb8925a349 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..0f074de5216 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..7af456536ae Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f5ce9d77db1 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ios-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f0a2db998dd Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..4fac58699c1 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..1c7e7168a53 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ios-rtl-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..e80d57cae91 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-md-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..cc8efc6be86 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-md-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..b5e3a03ae7f Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-md-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..5746ad9c2bb Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-md-rtl-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..f55e4df7918 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-md-rtl-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..3fa73f40468 Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-md-rtl-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..4d3c12c3ecd Binary files /dev/null and b/core/src/components/avatar/test/badge/avatar.e2e.ts-snapshots/avatar-xxsmall-badge-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/index.html b/core/src/components/avatar/test/badge/index.html new file mode 100644 index 00000000000..9fc541ad879 --- /dev/null +++ b/core/src/components/avatar/test/badge/index.html @@ -0,0 +1,105 @@ + + + + + Avatar - Badge + + + + + + + + + + + + + + + Avatar - Badge + + + + + + + + + diff --git a/core/src/components/badge/badge.common.scss b/core/src/components/badge/badge.common.scss deleted file mode 100644 index 1523886ea5e..00000000000 --- a/core/src/components/badge/badge.common.scss +++ /dev/null @@ -1,47 +0,0 @@ -@use "../../themes/functions.color" as color; -@import "../../themes/mixins"; - -// Badge -// -------------------------------------------------- - -:host { - /** - * @prop --background: Background of the badge - * @prop --color: Text color of the badge - * - * @prop --padding-top: Top padding of the badge - * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge - * @prop --padding-bottom: Bottom padding of the badge - * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge - */ - @include font-smoothing(); - @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); - - display: inline-block; - - background: var(--background); - color: var(--color); - - text-align: center; - - white-space: nowrap; - - contain: content; - vertical-align: baseline; -} - -// Badge (hint) -// -------------------------------------------------- - -:host([vertical]:not(.in-tab-button)) { - @include position(null, 0, null, null); - position: absolute; -} - -:host(:not(.in-tab-button)[vertical].badge-vertical-top) { - top: 0; -} - -:host(:not(.in-tab-button)[vertical].badge-vertical-bottom) { - bottom: 0; -} diff --git a/core/src/components/badge/badge.interfaces.ts b/core/src/components/badge/badge.interfaces.ts new file mode 100644 index 00000000000..0c3d1b982d8 --- /dev/null +++ b/core/src/components/badge/badge.interfaces.ts @@ -0,0 +1,95 @@ +import type { IonPadding } from '../../themes/themes.interfaces'; + +export type IonBadgeRecipe = { + font?: { + family?: string; + }; + + // Hues + hue?: { + [K in IonBadgeHue]?: IonBadgeStateDefinition & { + semantic?: IonBadgeStateDefinition; + }; + }; + + // Shapes + shape?: { + [K in IonBadgeShape]?: IonBadgeShapeDefinition; + }; + + // Sizes + size?: { + [K in IonBadgeSize]?: { + /* Badge with content (i.e. text or an icon) */ + content?: IonBadgeSizeContentDefinition; + + /* Badge without content (i.e. dot badge) */ + dot?: IonBadgeSizeDotDefinition; + }; + }; +}; + +type IonBadgeColorDefinition = { + background?: string; + color?: string; +}; + +type IonBadgeStateDefinition = { + default?: IonBadgeColorDefinition; +}; + +type IonBadgeShapeDefinition = { + border?: { + radius?: string; + }; +}; + +type IonBadgeSizeDefinition = { + height?: string; + + padding?: IonPadding; +}; + +type IonBadgeSizeContentDefinition = IonBadgeSizeDefinition & { + letterSpacing?: string | number; + + min?: { + height?: string; + width?: string; + }; + + font?: { + size?: string; + weight?: string | number; + }; + + line?: { + height?: string | number; + }; + + icon?: { + width?: string; + height?: string; + }; +}; + +type IonBadgeSizeDotDefinition = IonBadgeSizeDefinition & { + min?: { + width?: string; + }; +}; + +export type IonBadgeConfig = { + hue?: IonBadgeHue; + size?: IonBadgeSize; + shape?: IonBadgeShape; +}; + +export const ION_BADGE_HUES = ['bold', 'subtle'] as const; +export type IonBadgeHue = (typeof ION_BADGE_HUES)[number]; +export const ION_BADGE_SHAPES = ['crisp', 'soft', 'round', 'rectangular'] as const; +export type IonBadgeShape = (typeof ION_BADGE_SHAPES)[number]; +export const ION_BADGE_SIZES = ['small', 'medium', 'large'] as const; +export type IonBadgeSize = (typeof ION_BADGE_SIZES)[number]; +export const ION_BADGE_VERTICAL_POSITIONS = ['top', 'bottom'] as const; +export type IonBadgeVerticalPosition = (typeof ION_BADGE_VERTICAL_POSITIONS)[number]; diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss deleted file mode 100644 index 4342c2b51d3..00000000000 --- a/core/src/components/badge/badge.ionic.scss +++ /dev/null @@ -1,176 +0,0 @@ -@use "../../themes/ionic/ionic.globals.scss" as globals; -@use "./badge.common"; - -// Ionic Badge -// -------------------------------------------------- - -:host { - --padding-start: #{globals.$ion-space-200}; - --padding-end: #{globals.$ion-space-200}; - --padding-top: #{globals.$ion-space-0}; - --padding-bottom: #{globals.$ion-space-0}; - - @include globals.typography(globals.$ion-body-sm-medium); - - display: inline-flex; - - align-items: center; - justify-content: center; - - min-width: globals.$ion-scale-250; -} - -// Bold Badge -// -------------------------------------------------- - -:host(.badge-bold) { - --background: #{globals.ion-color(primary, base)}; - --color: #{globals.ion-color(primary, contrast)}; -} - -:host(.badge-bold.ion-color) { - background: globals.current-color(base); - color: globals.current-color(contrast); -} - -// Subtle Badge -// -------------------------------------------------- - -:host(.badge-subtle) { - --background: #{globals.ion-color(primary, base, $subtle: true)}; - --color: #{globals.ion-color(primary, contrast, $subtle: true)}; -} - -:host(.badge-subtle.ion-color) { - background: globals.current-color(base, $subtle: true); - color: globals.current-color(contrast, $subtle: true); -} - -// Badge Shapes -// -------------------------------------------------- - -/* Soft Badge */ -:host(.badge-soft) { - @include globals.border-radius(globals.$ion-soft-xs); -} - -:host(.badge-small.badge-soft) { - @include globals.border-radius(globals.$ion-soft-2xs); -} - -/* Round Badge */ -:host(.badge-round) { - @include globals.border-radius(globals.$ion-round-sm); -} - -/* Rectangular Badge */ -:host(.badge-rectangular) { - @include globals.border-radius(globals.$ion-rectangular-sm); -} - -// Badge Sizes -// -------------------------------------------------- - -/* Small Badge */ -:host(.badge-small) { - --padding-start: #{globals.$ion-space-050}; - --padding-end: #{globals.$ion-space-050}; - - min-width: globals.$ion-scale-400; - height: globals.$ion-scale-400; -} - -:host(.badge-small) ::slotted(ion-icon) { - width: globals.$ion-scale-300; - height: globals.$ion-scale-300; -} - -/* Medium Badge */ -/* Large size defaults to the medium size to avoid styles breakage */ -:host(.badge-medium), -:host(.badge-large) { - --padding-start: #{globals.$ion-space-100}; - --padding-end: #{globals.$ion-space-100}; - - @include globals.typography(globals.$ion-body-md-medium); - - min-width: globals.$ion-scale-600; - height: globals.$ion-scale-600; -} - -:host(.badge-medium) ::slotted(ion-icon), -:host(.badge-large) ::slotted(ion-icon) { - width: globals.$ion-scale-400; - height: globals.$ion-scale-400; -} - -// Badge (hint) -// -------------------------------------------------- - -:host(:empty) { - --padding-start: 0; - --padding-end: 0; -} - -:host([vertical]:not(:empty)) { - --padding-start: #{globals.$ion-scale-100}; - --padding-end: #{globals.$ion-scale-100}; - --padding-top: #{globals.$ion-scale-100}; - --padding-bottom: #{globals.$ion-scale-100}; -} - -// Badge (hint) Sizes -// -------------------------------------------------- - -/* 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; -} - -// Badge Inside Tab Button -// -------------------------------------------------- - -:host([vertical].in-tab-button) { - position: relative; -} - -// Icon Inside Badge Hint -// -------------------------------------------------- -:host([vertical]) ::slotted(ion-icon) { - @include globals.position(50%, null, null, 50%); - - position: absolute; - - transform: translate(-50%, -50%); -} - -// Badge in Button -// -------------------------------------------------- - -:host(:not(:empty).in-button) { - --padding-start: #{globals.$ion-scale-050}; - --padding-end: #{globals.$ion-scale-050}; - - @include globals.typography(globals.$ion-body-action-xs); - - min-width: globals.$ion-scale-400; - height: globals.$ion-scale-400; - - ::slotted(ion-icon) { - width: globals.$ion-scale-300; - height: globals.$ion-scale-300; - } -} diff --git a/core/src/components/badge/badge.ios.scss b/core/src/components/badge/badge.ios.scss deleted file mode 100644 index 2d61ad713f9..00000000000 --- a/core/src/components/badge/badge.ios.scss +++ /dev/null @@ -1,38 +0,0 @@ -@import "./badge.native"; -@import "./badge.ios.vars"; - -// iOS Badge -// -------------------------------------------------- - -:host { - @include border-radius($badge-ios-border-radius); - - /** - * "-apple-system-body" on iOS never goes smaller than - * 14px according to https://developer.apple.com/design/human-interface-guidelines/typography#Specifications. - * However, we still keep the max() usage here for consistency - * with other components and in case "-apple-system-body" does - * go smaller than 14px in the future. - */ - font-size: dynamic-font-min(1, $badge-baseline-font-size); -} - -// Badge Inside Tab Button -// -------------------------------------------------- - -:host([vertical].in-tab-button) { - position: relative; - - min-width: $badge-ios-in-tab-button-min-width; -} - -:host([vertical].in-tab-button) ::slotted(ion-icon) { - @include position(50%, null, null, 50%); - - position: absolute; - - width: $badge-ios-in-tab-button-icon-size; - height: $badge-ios-in-tab-button-icon-size; - - transform: translate(-50%, -50%); -} diff --git a/core/src/components/badge/badge.ios.vars.scss b/core/src/components/badge/badge.ios.vars.scss deleted file mode 100644 index a9294899dc1..00000000000 --- a/core/src/components/badge/badge.ios.vars.scss +++ /dev/null @@ -1,19 +0,0 @@ -@import "../../themes/native/native.globals.ios"; - -// iOS Badge -// -------------------------------------------------- - -/// @prop - Border radius of the badge -$badge-ios-border-radius: 10px; - -// Badge inside a Tab Button -// -------------------------------------------------- - -/// @prop - Minimum width of the badge inside a Tab Button -$badge-ios-in-tab-button-min-width: 8px; - -/// @prop - Height of the badge inside a Tab Button -$badge-ios-in-tab-button-height: 8px; - -/// @prop - Badge icon size inside a Tab Button -$badge-ios-in-tab-button-icon-size: 12px; diff --git a/core/src/components/badge/badge.md.scss b/core/src/components/badge/badge.md.scss deleted file mode 100644 index 3d0e94bbde4..00000000000 --- a/core/src/components/badge/badge.md.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import "./badge.native"; -@import "./badge.md.vars"; - -// Material Design Badge -// -------------------------------------------------- - -:host { - --padding-top: 3px; - --padding-end: 4px; - --padding-bottom: 4px; - --padding-start: 4px; - - @include border-radius($badge-md-border-radius); -} diff --git a/core/src/components/badge/badge.md.vars.scss b/core/src/components/badge/badge.md.vars.scss deleted file mode 100644 index d458dcb51ce..00000000000 --- a/core/src/components/badge/badge.md.vars.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import "../../themes/native/native.globals.md"; - -// Material Design Badge -// -------------------------------------------------- - -/// @prop - Border radius of the badge -$badge-md-border-radius: 4px; diff --git a/core/src/components/badge/badge.native.scss b/core/src/components/badge/badge.native.scss deleted file mode 100644 index 0afa59779d6..00000000000 --- a/core/src/components/badge/badge.native.scss +++ /dev/null @@ -1,64 +0,0 @@ -@import "../../themes/native/native.globals.md"; -@import "./badge.common"; -@import "./badge.native.vars"; - -// Badge -// -------------------------------------------------- - -:host { - --padding-top: #{$badge-padding-top}; - --padding-end: #{$badge-padding-end}; - --padding-bottom: #{$badge-padding-bottom}; - --padding-start: #{$badge-padding-start}; - --background: #{ion-color(primary, base)}; - --color: #{ion-color(primary, contrast)}; - - min-width: $badge-min-width; - - font-family: $font-family-base; - - font-size: $badge-font-size; - font-weight: $badge-font-weight; - - line-height: 1; -} - -:host(.ion-color) { - background: current-color(base); - color: current-color(contrast); -} - -// TODO(ROU-10747): Review size styles when sizes are defined for native themes. -:host([vertical]:not(.in-button):not(.in-tab-button)), -: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; - - font-size: $badge-hint-font-size; - - line-height: 10px; -} - -// Badge in Button -// -------------------------------------------------- - -:host(:not(:empty).in-button) { - min-width: $badge-size-in-button; - height: $badge-size-in-button; - - font-size: $badge-font-size-in-button; - - line-height: $badge-line-height-in-button; - - ::slotted(ion-icon) { - width: $badge-icon-size-in-button; - height: $badge-icon-size-in-button; - } -} diff --git a/core/src/components/badge/badge.native.vars.scss b/core/src/components/badge/badge.native.vars.scss deleted file mode 100644 index aad738da58e..00000000000 --- a/core/src/components/badge/badge.native.vars.scss +++ /dev/null @@ -1,47 +0,0 @@ -@import "../../themes/functions.font"; -@import "../../themes/functions.sizes"; - -// Badge -// -------------------------------------------------- - -/// @prop - Font size of the badge hint -$badge-hint-baseline-font-size: 8px; - -/// @prop - Font size of the badge hint -$badge-hint-font-size: dynamic-font($badge-hint-baseline-font-size); - -/// @prop - Size of the badge when inside button -$badge-size-in-button: 16px; - -/// @prop - Font size of the badge when inside button -$badge-font-size-in-button: px-to-rem(12); - -/// @prop - Line height of the badge when inside button -$badge-line-height-in-button: 20px; - -/// @prop - Size of of the badge icon when inside button -$badge-icon-size-in-button: 12px; - -/// @prop - Padding top of the badge -$badge-padding-top: 3px; - -/// @prop - Padding end of the badge -$badge-padding-end: 8px; - -/// @prop - Padding bottom of the badge -$badge-padding-bottom: $badge-padding-top; - -/// @prop - Padding start of the badge -$badge-padding-start: $badge-padding-end; - -/// @prop - Minimum width of the badge -$badge-min-width: 10px; - -/// @prop - Baseline font size of the badge -$badge-baseline-font-size: 13px; - -/// @prop - Font size of the badge -$badge-font-size: dynamic-font($badge-baseline-font-size); - -/// @prop - Font weight of the badge -$badge-font-weight: bold; diff --git a/core/src/components/badge/badge.scss b/core/src/components/badge/badge.scss new file mode 100644 index 00000000000..e98d65740cf --- /dev/null +++ b/core/src/components/badge/badge.scss @@ -0,0 +1,289 @@ +@use "../../themes/mixins" as mixins; +@use "../../themes/functions.color" as colors; + +// Badge: Common Styles +// -------------------------------------------------- + +:host { + /** + * @prop --ion-badge-font-family: the font family of the badge text + * + * Bold + * @prop --ion-badge-hue-bold-default-background: Background color of the `bold` hue in default state + * @prop --ion-badge-hue-bold-default-color: Text color of the `bold` hue in default state + * @prop --ion-badge-hue-bold-semantic-default-background: Background color of the `bold` hue when a semantic color is applied + * @prop --ion-badge-hue-bold-semantic-default-color: Text color of the `bold` hue when a semantic color is applied + * + * Subtle + * @prop --ion-badge-hue-subtle-default-background: Background color of the `subtle` hue in default state + * @prop --ion-badge-hue-subtle-default-color: Text color of the `subtle` hue in default state + * @prop --ion-badge-hue-subtle-semantic-default-background: Background color of the `subtle` hue when a semantic color is applied + * @prop --ion-badge-hue-subtle-semantic-default-color: Text color of the `subtle` hue when a semantic color is applied + * + * Shapes + * @prop --ion-badge-shape-crisp-border-radius: Border radius of the `crisp` shape + * @prop --ion-badge-shape-soft-border-radius: Border radius of the `soft` shape + * @prop --ion-badge-shape-round-border-radius: Border radius of the `round` shape + * @prop --ion-badge-shape-rectangular-border-radius: Border radius of the `rectangular` shape + * + * Sizes: Content (with text or an icon) + * @prop --ion-badge-size-small-content-height: Height of the `small` size when badge has content + * @prop --ion-badge-size-small-content-min-height: Minimum height of the `small` size when badge has content + * @prop --ion-badge-size-small-content-min-width: Minimum width of the `small` size when badge has content + * @prop --ion-badge-size-small-content-padding-top: Top padding of the `small` size when badge has content + * @prop --ion-badge-size-small-content-padding-end: Right padding if direction is left-to-right, left padding if direction is right-to-left of the `small` size when badge has content + * @prop --ion-badge-size-small-content-padding-bottom: Bottom padding of the `small` size when badge has content + * @prop --ion-badge-size-small-content-padding-start: Left padding if direction is left-to-right, right padding if direction is right-to-left of the `small` size when badge has content + * @prop --ion-badge-size-small-content-letter-spacing: Letter spacing of the `small` size when badge has content + * @prop --ion-badge-size-small-content-font-size: Font size of the `small` size when badge has content + * @prop --ion-badge-size-small-content-font-weight: Font weight of the `small` size when badge has content + * @prop --ion-badge-size-small-content-line-height: Line height of the `small` size when badge has content + * @prop --ion-badge-size-small-content-icon-width: Width of the slotted `ion-icon` of the `small` size + * @prop --ion-badge-size-small-content-icon-height: Height of the slotted `ion-icon` of the `small` size + * @prop --ion-badge-size-medium-content-height: Height of the `medium` size when badge has content + * @prop --ion-badge-size-medium-content-min-height: Minimum height of the `medium` size when badge has content + * @prop --ion-badge-size-medium-content-min-width: Minimum width of the `medium` size when badge has content + * @prop --ion-badge-size-medium-content-padding-top: Top padding of the `medium` size when badge has content + * @prop --ion-badge-size-medium-content-padding-end: Right padding if direction is left-to-right, left padding if direction is right-to-left of the `medium` size when badge has content + * @prop --ion-badge-size-medium-content-padding-bottom: Bottom padding of the `medium` size when badge has content + * @prop --ion-badge-size-medium-content-padding-start: Left padding if direction is left-to-right, right padding if direction is right-to-left of the `medium` size when badge has content + * @prop --ion-badge-size-medium-content-letter-spacing: Letter spacing of the `medium` size when badge has content + * @prop --ion-badge-size-medium-content-font-size: Font size of the `medium` size when badge has content + * @prop --ion-badge-size-medium-content-font-weight: Font weight of the `medium` size when badge has content + * @prop --ion-badge-size-medium-content-line-height: Line height of the `medium` size when badge has content + * @prop --ion-badge-size-medium-content-icon-width: Width of the slotted `ion-icon` of the `medium` size + * @prop --ion-badge-size-medium-content-icon-height: Height of the slotted `ion-icon` of the `medium` size + * @prop --ion-badge-size-large-content-height: Height of the `large` size when badge has content + * @prop --ion-badge-size-large-content-min-height: Minimum height of the `large` size when badge has content + * @prop --ion-badge-size-large-content-min-width: Minimum width of the `large` size when badge has content + * @prop --ion-badge-size-large-content-padding-top: Top padding of the `large` size when badge has content + * @prop --ion-badge-size-large-content-padding-end: Right padding if direction is left-to-right, left padding if direction is right-to-left of the `large` size when badge has content + * @prop --ion-badge-size-large-content-padding-bottom: Bottom padding of the `large` size when badge has content + * @prop --ion-badge-size-large-content-padding-start: Left padding if direction is left-to-right, right padding if direction is right-to-left of the `large` size when badge has content + * @prop --ion-badge-size-large-content-letter-spacing: Letter spacing of the `large` size when badge has content + * @prop --ion-badge-size-large-content-font-size: Font size of the `large` size when badge has content + * @prop --ion-badge-size-large-content-font-weight: Font weight of the `large` size when badge has content + * @prop --ion-badge-size-large-content-line-height: Line height of the `large` size when badge has content + * @prop --ion-badge-size-large-content-icon-width: Width of the slotted `ion-icon` of the `large` size + * @prop --ion-badge-size-large-content-icon-height: Height of the slotted `ion-icon` of the `large` size + * + * Sizes: Dot (empty with no text or icon) + * @prop --ion-badge-size-small-dot-height: Height of the `small` size when badge is empty + * @prop --ion-badge-size-small-dot-min-width: Minimum width of the `small` size when badge is empty + * @prop --ion-badge-size-small-dot-padding-top: Top padding of the `small` size when badge is empty + * @prop --ion-badge-size-small-dot-padding-end: Right padding if direction is left-to-right, left padding if direction is right-to-left of the `small` size when badge is empty + * @prop --ion-badge-size-small-dot-padding-bottom: Bottom padding of the `small` size when badge is empty + * @prop --ion-badge-size-small-dot-padding-start: Left padding if direction is left-to-right, right padding if direction is right-to-left of the `small` size when badge is empty + * @prop --ion-badge-size-medium-dot-height: Height of the `medium` size when badge is empty + * @prop --ion-badge-size-medium-dot-min-width: Minimum width of the `medium` size when badge is empty + * @prop --ion-badge-size-medium-dot-padding-top: Top padding of the `medium` size when badge is empty + * @prop --ion-badge-size-medium-dot-padding-end: Right padding if direction is left-to-right, left padding if direction is right-to-left of the `medium` size when badge is empty + * @prop --ion-badge-size-medium-dot-padding-bottom: Bottom padding of the `medium` size when badge is empty + * @prop --ion-badge-size-medium-dot-padding-start: Left padding if direction is left-to-right, right padding if direction is right-to-left of the `medium` size when badge is empty + * @prop --ion-badge-size-large-dot-height: Height of the `large` size when badge is empty + * @prop --ion-badge-size-large-dot-min-width: Minimum width of the `large` size when badge is empty + * @prop --ion-badge-size-large-dot-padding-top: Top padding of the `large` size when badge is empty + * @prop --ion-badge-size-large-dot-padding-end: Right padding if direction is left-to-right, left padding if direction is right-to-left of the `large` size when badge is empty + * @prop --ion-badge-size-large-dot-padding-bottom: Bottom padding of the `large` size when badge is empty + * @prop --ion-badge-size-large-dot-padding-start: Left padding if direction is left-to-right, right padding if direction is right-to-left of the `large` size when badge is empty + */ + @include mixins.font-smoothing(); + + display: inline-flex; + + align-items: center; + justify-content: center; + + font-family: var(--ion-badge-font-family, inherit); + + white-space: nowrap; + + contain: content; + vertical-align: baseline; + + box-sizing: border-box; +} + +// Badge: Bold +// --------------------------------------------- + +// Default +:host(.badge-hue-bold) { + background: var(--ion-badge-hue-bold-default-background); + color: var(--ion-badge-hue-bold-default-color); +} + +// Colors +:host(.badge-hue-bold.ion-color) { + background: var(--ion-badge-hue-bold-semantic-default-background); + color: var(--ion-badge-hue-bold-semantic-default-color); +} + +// Badge: Subtle +// --------------------------------------------- + +// Default +:host(.badge-hue-subtle) { + background: var(--ion-badge-hue-subtle-default-background); + color: var(--ion-badge-hue-subtle-default-color); +} + +// Colors +:host(.badge-hue-subtle.ion-color) { + background: var(--ion-badge-hue-subtle-semantic-default-background); + color: var(--ion-badge-hue-subtle-semantic-default-color); +} + +// Badge Shapes +// --------------------------------------------- + +:host(.badge-shape-crisp) { + @include mixins.border-radius(var(--ion-badge-shape-crisp-border-radius)); +} + +:host(.badge-shape-soft) { + @include mixins.border-radius(var(--ion-badge-shape-soft-border-radius)); +} + +:host(.badge-shape-round) { + @include mixins.border-radius(var(--ion-badge-shape-round-border-radius)); +} + +:host(.badge-shape-rectangular) { + @include mixins.border-radius(var(--ion-badge-shape-rectangular-border-radius)); +} + +// Badge Sizes: Content (with text or an icon) +// --------------------------------------------- + +// Small +:host(.badge-size-small) { + @include mixins.padding( + var(--ion-badge-size-small-content-padding-top), + var(--ion-badge-size-small-content-padding-end), + var(--ion-badge-size-small-content-padding-bottom), + var(--ion-badge-size-small-content-padding-start) + ); + + min-width: var(--ion-badge-size-small-content-min-width); + height: var(--ion-badge-size-small-content-height); + min-height: var(--ion-badge-size-small-content-min-height); + + font-size: var(--ion-badge-size-small-content-font-size); + font-weight: var(--ion-badge-size-small-content-font-weight); + + letter-spacing: var(--ion-badge-size-small-content-letter-spacing); + line-height: var(--ion-badge-size-small-content-line-height); +} + +:host(.badge-size-small) ::slotted(ion-icon) { + width: var(--ion-badge-size-small-content-icon-width, revert-layer); + height: var(--ion-badge-size-small-content-icon-height, revert-layer); +} + +// Medium +:host(.badge-size-medium) { + @include mixins.padding( + var(--ion-badge-size-medium-content-padding-top), + var(--ion-badge-size-medium-content-padding-end), + var(--ion-badge-size-medium-content-padding-bottom), + var(--ion-badge-size-medium-content-padding-start) + ); + + min-width: var(--ion-badge-size-medium-content-min-width); + height: var(--ion-badge-size-medium-content-height); + min-height: var(--ion-badge-size-medium-content-min-height); + + font-size: var(--ion-badge-size-medium-content-font-size); + font-weight: var(--ion-badge-size-medium-content-font-weight); + + letter-spacing: var(--ion-badge-size-medium-content-letter-spacing); + line-height: var(--ion-badge-size-medium-content-line-height); +} + +:host(.badge-size-medium) ::slotted(ion-icon) { + width: var(--ion-badge-size-medium-content-icon-width, revert-layer); + height: var(--ion-badge-size-medium-content-icon-height, revert-layer); +} + +// Large +:host(.badge-size-large) { + @include mixins.padding( + var(--ion-badge-size-large-content-padding-top), + var(--ion-badge-size-large-content-padding-end), + var(--ion-badge-size-large-content-padding-bottom), + var(--ion-badge-size-large-content-padding-start) + ); + + min-width: var(--ion-badge-size-large-content-min-width); + height: var(--ion-badge-size-large-content-height); + min-height: var(--ion-badge-size-large-content-min-height); + + font-size: var(--ion-badge-size-large-content-font-size); + font-weight: var(--ion-badge-size-large-content-font-weight); + + letter-spacing: var(--ion-badge-size-large-content-letter-spacing); + line-height: var(--ion-badge-size-large-content-line-height); +} + +:host(.badge-size-large) ::slotted(ion-icon) { + width: var(--ion-badge-size-large-content-icon-width, revert-layer); + height: var(--ion-badge-size-large-content-icon-height, revert-layer); +} + +// Badge Sizes: Dot (empty with no text or icon) +// --------------------------------------------- + +// Small +:host(.badge-size-small:empty) { + @include mixins.padding( + var(--ion-badge-size-small-dot-padding-top), + var(--ion-badge-size-small-dot-padding-end), + var(--ion-badge-size-small-dot-padding-bottom), + var(--ion-badge-size-small-dot-padding-start) + ); + + min-width: var(--ion-badge-size-small-dot-min-width); + height: var(--ion-badge-size-small-dot-height); + + min-height: unset; +} + +// Medium +:host(.badge-size-medium:empty) { + @include mixins.padding( + var(--ion-badge-size-medium-dot-padding-top), + var(--ion-badge-size-medium-dot-padding-end), + var(--ion-badge-size-medium-dot-padding-bottom), + var(--ion-badge-size-medium-dot-padding-start) + ); + + min-width: var(--ion-badge-size-medium-dot-min-width); + height: var(--ion-badge-size-medium-dot-height); + + min-height: unset; +} + +// Large +:host(.badge-size-large:empty) { + @include mixins.padding( + var(--ion-badge-size-large-dot-padding-top), + var(--ion-badge-size-large-dot-padding-end), + var(--ion-badge-size-large-dot-padding-bottom), + var(--ion-badge-size-large-dot-padding-start) + ); + + min-width: var(--ion-badge-size-large-dot-min-width); + height: var(--ion-badge-size-large-dot-height); + + min-height: unset; +} + +// Anchored Badge (positioned at a specific corner of its parent element) +// --------------------------------------------- + +:host([vertical]) { + position: absolute; + + z-index: 1; +} diff --git a/core/src/components/badge/badge.tsx b/core/src/components/badge/badge.tsx index 369c2ad199b..f1025803254 100644 --- a/core/src/components/badge/badge.tsx +++ b/core/src/components/badge/badge.tsx @@ -1,21 +1,18 @@ import type { ComponentInterface } from '@stencil/core'; import { Component, Element, Host, Prop, h } from '@stencil/core'; -import { createColorClasses, hostContext } from '@utils/theme'; +import { createColorClasses } from '@utils/theme'; -import { getIonTheme } from '../../global/ionic-global'; +import { config } from '../../global/config'; import type { Color } from '../../interface'; +import type { IonBadgeHue, IonBadgeShape, IonBadgeSize, IonBadgeVerticalPosition } from './badge.interfaces'; + /** * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component. - * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component. */ @Component({ tag: 'ion-badge', - styleUrls: { - ios: 'badge.ios.scss', - md: 'badge.md.scss', - ionic: 'badge.ionic.scss', - }, + styleUrl: 'badge.scss', shadow: true, }) export class Badge implements ComponentInterface { @@ -32,108 +29,77 @@ export class Badge implements ComponentInterface { * Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for * a badge with muted, subtle colors. * - * Only applies to the `ionic` theme. + * Defaults to `"bold"` if both the hue property and theme config are unset. */ - @Prop() hue?: 'bold' | 'subtle'; + @Prop() hue?: IonBadgeHue; /** - * Set to `"rectangular"` for non-rounded corners. - * Set to `"soft"` for slightly rounded corners. - * Set to `"round"` for fully rounded corners. + * Set to `"crisp"` for a badge with even slightly rounded corners, + * `"soft"` for a badge with slightly rounded corners, + * `"round"` for a badge with fully rounded corners, + * or `"rectangular"` for a badge without rounded corners. * - * Defaults to `"round"` for the `ionic` theme, undefined for all other themes. + * Defaults to `"soft"` if both the shape property and theme config are unset. */ - @Prop() shape?: 'soft' | 'round | rectangular'; + @Prop() shape?: IonBadgeShape; /** - * Set to `"small"` for a small badge. - * Set to `"medium"` for a medium badge. - * Set to `"large"` for a large badge, when it is empty (no text or icon). + * Set to `"small"` for a smaller size. + * Set to `"medium"` for a medium size. + * Set to `"large"` for a larger size. * - * Defaults to `"small"` for the `ionic` theme, undefined for all other themes. + * Defaults to `"small"` if both the size property and theme config are unset. */ - @Prop() size?: 'small' | 'medium' | 'large'; + @Prop() size?: IonBadgeSize; /** * 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; - - // TODO(ROU-10777): Remove theme check when shapes are defined for all themes. - if (theme !== 'ionic') { - return undefined; - } + @Prop() vertical?: IonBadgeVerticalPosition; - if (shape === undefined) { - return 'round'; - } + /** + * Gets the badge shape. Uses the `shape` property if set, otherwise + * checks the theme config and falls back to 'soft' if neither is provided. + */ + get shapeValue(): IonBadgeShape { + const shapeConfig = config.getObjectValue('IonBadge.shape', 'soft') as IonBadgeShape; + const shape = this.shape || shapeConfig; return shape; } - private getSize(): string | undefined { - const theme = getIonTheme(this); - const { size } = this; - - // TODO(FW-6355): Remove theme check when sizes are defined for all themes. - if (theme !== 'ionic') { - return undefined; - } - - if (size === undefined) { - return 'small'; - } + /** + * Gets the badge size. Uses the `size` property if set, otherwise + * checks the theme config and falls back to 'small' if neither is provided. + */ + get sizeValue(): IonBadgeSize { + const sizeConfig = config.getObjectValue('IonBadge.size', 'small') as IonBadgeSize; + const size = this.size || sizeConfig; return size; } - // The 'subtle' hue is the default for badges containing text or icons - // The 'bold' hue is used when inside of an avatar, button, tab button, - // or when the badge is empty (no text or icon). - private getHue(): string | undefined { - const { hue } = this; - - if (hue !== undefined) { - return hue; - } - - const inAvatar = hostContext('ion-avatar', this.el); - const inButton = hostContext('ion-button', this.el); - const inTabButton = hostContext('ion-tab-button', this.el); - const hasContent = this.el.textContent?.trim() !== '' || this.el.querySelector('ion-icon') !== null; - - // Return 'bold' if the badge is inside an avatar, button, tab button, - // or has no content - if (inAvatar || inButton || inTabButton || !hasContent) { - return 'bold'; - } - - // Return 'subtle' if the badge contains visible text or an icon - return 'subtle'; + /** + * Gets the badge hue. Uses the `hue` property if set, otherwise + * checks the theme config and falls back to 'bold' if neither is provided. + */ + get hueValue(): IonBadgeHue { + const hueConfig = config.getObjectValue('IonBadge.hue', 'bold') as IonBadgeHue; + const hue = this.hue || hueConfig; + + return hue; } render() { - const hue = this.getHue(); - const shape = this.getShape(); - const size = this.getSize(); - const theme = getIonTheme(this); + const { hueValue, shapeValue, sizeValue, color } = this; return ( 2, + class={createColorClasses(color, { + [`badge-hue-${hueValue}`]: true, + [`badge-shape-${shapeValue}`]: true, + [`badge-size-${sizeValue}`]: true, })} > diff --git a/core/src/components/badge/test/a11y/badge.e2e.ts-snapshots/badge-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/a11y/badge.e2e.ts-snapshots/badge-scale-ios-ltr-Mobile-Chrome-linux.png index 726dd09099f..f182d8b6c4f 100644 Binary files a/core/src/components/badge/test/a11y/badge.e2e.ts-snapshots/badge-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/badge/test/a11y/badge.e2e.ts-snapshots/badge-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/a11y/badge.e2e.ts-snapshots/badge-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/a11y/badge.e2e.ts-snapshots/badge-scale-ios-ltr-Mobile-Firefox-linux.png index 83689947665..1da6482a36f 100644 Binary files a/core/src/components/badge/test/a11y/badge.e2e.ts-snapshots/badge-scale-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/badge/test/a11y/badge.e2e.ts-snapshots/badge-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/a11y/badge.e2e.ts-snapshots/badge-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/a11y/badge.e2e.ts-snapshots/badge-scale-ios-ltr-Mobile-Safari-linux.png index e7a7fb6b1d0..d8595354fe8 100644 Binary files a/core/src/components/badge/test/a11y/badge.e2e.ts-snapshots/badge-scale-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/badge/test/a11y/badge.e2e.ts-snapshots/badge-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/a11y/badge.e2e.ts-snapshots/badge-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/a11y/badge.e2e.ts-snapshots/badge-scale-md-ltr-Mobile-Chrome-linux.png index b4e76f3148e..ad9ec08c0aa 100644 Binary files a/core/src/components/badge/test/a11y/badge.e2e.ts-snapshots/badge-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/badge/test/a11y/badge.e2e.ts-snapshots/badge-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/a11y/badge.e2e.ts-snapshots/badge-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/a11y/badge.e2e.ts-snapshots/badge-scale-md-ltr-Mobile-Firefox-linux.png index faea48a5c95..2a0abd658ee 100644 Binary files a/core/src/components/badge/test/a11y/badge.e2e.ts-snapshots/badge-scale-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/badge/test/a11y/badge.e2e.ts-snapshots/badge-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/a11y/badge.e2e.ts-snapshots/badge-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/a11y/badge.e2e.ts-snapshots/badge-scale-md-ltr-Mobile-Safari-linux.png index f89c40f39ad..924da76857b 100644 Binary files a/core/src/components/badge/test/a11y/badge.e2e.ts-snapshots/badge-scale-md-ltr-Mobile-Safari-linux.png and b/core/src/components/badge/test/a11y/badge.e2e.ts-snapshots/badge-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/basic/badge.e2e.ts b/core/src/components/badge/test/basic/badge.e2e.ts index e6a6a871f96..b0f1af84bc5 100644 --- a/core/src/components/badge/test/basic/badge.e2e.ts +++ b/core/src/components/badge/test/basic/badge.e2e.ts @@ -4,11 +4,76 @@ import { configs, test } from '@utils/test/playwright'; configs({ modes: ['md', 'ios', 'ionic-md'] }).forEach(({ config, screenshot, title }) => { test.describe(title('badge: rendering'), () => { test('should not have visual regressions', async ({ page }) => { - await page.goto('/src/components/badge/test/basic', config); + await page.setContent( + ` +
+ + 00 + + + + + 1 + 11 + + + + + 2 + 22 + + + + + 3 + 33 + + + + + 4 + 44 + + + + + 5 + 55 + + + + + 6 + 66 + + + + + 7 + 77 + + + + + 8 + 88 + + + + + 9 + 99 + + + +
+ `, + config + ); - await page.setIonViewport(); + const container = page.locator('#container'); - await expect(page).toHaveScreenshot(screenshot(`badge-basic`)); + await expect(container).toHaveScreenshot(screenshot('badge-basic')); }); }); }); diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png index d52234c36dd..5271ca5ecd7 100644 Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png index 436673c37b0..710908f6107 100644 Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Safari-linux.png index a7b87524af3..d7527ac882d 100644 Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png index c23c6c5e685..d59a88e4e96 100644 Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png index 4b0522452c3..20c5dd8f194 100644 Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Safari-linux.png index 068b19ea332..8a947146c1a 100644 Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ios-ltr-Mobile-Chrome-linux.png index d7b54d3410a..af6f1ba3050 100644 Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ios-ltr-Mobile-Firefox-linux.png index 354ff567a2d..ae782dc06a3 100644 Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ios-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ios-ltr-Mobile-Safari-linux.png index 96df1549d6d..b92720f25e8 100644 Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ios-rtl-Mobile-Chrome-linux.png index e40ab053547..54b5c4f3355 100644 Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ios-rtl-Mobile-Firefox-linux.png index 6745e485b23..7dfbbb52cb6 100644 Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ios-rtl-Mobile-Safari-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ios-rtl-Mobile-Safari-linux.png index 06d6821b792..c4ba8264e8f 100644 Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-ltr-Mobile-Chrome-linux.png index 1a65a45530b..10d8d26c4cd 100644 Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-ltr-Mobile-Firefox-linux.png index d4c653e1d23..019646230e4 100644 Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-ltr-Mobile-Safari-linux.png index 64f4b8d02e4..60ebcd02cd3 100644 Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-ltr-Mobile-Safari-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-rtl-Mobile-Chrome-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-rtl-Mobile-Chrome-linux.png index c7a8945717e..50e23b83541 100644 Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-rtl-Mobile-Firefox-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-rtl-Mobile-Firefox-linux.png index c651569338d..6159818f03b 100644 Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-rtl-Mobile-Safari-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-rtl-Mobile-Safari-linux.png index e69aa306ce2..95543897225 100644 Binary files a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-rtl-Mobile-Safari-linux.png and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/basic/index.html b/core/src/components/badge/test/basic/index.html index 743c0a38a29..faee78b99ee 100644 --- a/core/src/components/badge/test/basic/index.html +++ b/core/src/components/badge/test/basic/index.html @@ -29,6 +29,8 @@ Default Badge + + 1 00 @@ -36,6 +38,8 @@ Primary Badge + + 1 11 @@ -43,6 +47,8 @@ Secondary Badge + + 2 22 @@ -50,6 +56,8 @@ Tertiary Badge + + 3 33 @@ -57,6 +65,8 @@ Success Badge + + 4 44 @@ -64,6 +74,8 @@ Warning Badge + + 5 55 @@ -71,6 +83,8 @@ Danger Badge + + 6 66 @@ -78,6 +92,8 @@ Light Badge + + 7 77 @@ -85,6 +101,8 @@ Medium Badge + + 8 88 @@ -92,13 +110,16 @@ Dark Badge + + 9 99 - primary + + primary Dynamic Badge Color (toggle) @@ -109,6 +130,8 @@ Default Badge + + 0 00 @@ -116,6 +139,8 @@ Primary Badge + + 1 11 @@ -123,6 +148,8 @@ Secondary Badge + + 2 22 @@ -130,6 +157,8 @@ Tertiary Badge + + 3 33 @@ -137,6 +166,8 @@ Success Badge + + 4 44 @@ -144,6 +175,8 @@ Warning Badge + + 5 55 @@ -151,6 +184,8 @@ Danger Badge + + 6 66 @@ -158,6 +193,8 @@ Light Badge + + 7 77 @@ -165,6 +202,8 @@ Medium Badge + + 8 88 @@ -172,6 +211,8 @@ Dark Badge + + 9 99 @@ -182,12 +223,17 @@ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts b/core/src/components/badge/test/hint/badge.e2e.ts deleted file mode 100644 index a59086ff32e..00000000000 --- a/core/src/components/badge/test/hint/badge.e2e.ts +++ /dev/null @@ -1,68 +0,0 @@ -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 empty'), () => { - test('should not have visual regressions', async ({ page }) => { - await page.goto('/src/components/badge/test/hint', config); - - const container = page.locator('#empty'); - - await expect(container).toHaveScreenshot(screenshot(`badge-hint-empty`)); - }); - }); - - test.describe(title('badge: hint inside avatar'), () => { - test('should not have visual regressions', async ({ page }) => { - await page.goto('/src/components/badge/test/hint', config); - - const container = page.locator('#avatar'); - - await expect(container).toHaveScreenshot(screenshot(`badge-hint-avatar`)); - }); - }); - - test.describe(title('badge: hint inside tab button'), () => { - test('should not have visual regressions when icon is on the top', async ({ page }) => { - await page.goto('/src/components/badge/test/hint', config); - - const container = page.locator('#tab-button'); - - await expect(container).toHaveScreenshot(screenshot(`badge-hint-tab-button-icon-top`)); - }); - - test('should not have visual regressions when icon is at the bottom', async ({ page }) => { - await page.goto('/src/components/badge/test/hint', config); - - const container = page.locator('#tab-button-icon-bottom'); - - await expect(container).toHaveScreenshot(screenshot(`badge-hint-tab-button-icon-bottom`)); - }); - }); - - test.describe(title('badge: hint inside button'), () => { - test('should not have visual regressions when icon is on the top', async ({ page }) => { - await page.goto('/src/components/badge/test/hint', config); - - const container = page.locator('#button-top'); - - await expect(container).toHaveScreenshot(screenshot(`badge-hint-button-top`)); - }); - - test('should not have visual regressions when icon is at the bottom', async ({ page }) => { - await page.goto('/src/components/badge/test/hint', config); - - const container = page.locator('#button-bottom'); - - await expect(container).toHaveScreenshot(screenshot(`badge-hint-button-bottom`)); - }); - - test('should not have visual regressions for different button sizes', async ({ page }) => { - await page.goto('/src/components/badge/test/hint', config); - - const container = page.locator('#button-size'); - - await expect(container).toHaveScreenshot(screenshot(`badge-hint-button-size`)); - }); - }); -}); diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index 40fc00edf32..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index 0b74a7dfd40..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index e8891ec7309..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 7fc5d28f8af..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 7b669f1f0c6..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ios-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 9fc851229eb..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 6a19e33950c..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 38e4f7fe1d5..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-md-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index a7d3b2637a1..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index 863cb83afb8..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index 6d33ccc1111..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index b002f36c659..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index ae3e6d036fe..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index dc2aa901690..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ios-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 303a9f1e651..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index fbbba2c139b..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 5e065da2dad..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-md-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index f671068b37f..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-bottom-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index bd5d081c9b9..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index 4edfc08449f..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index bb0dd6d2991..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index daab89184c5..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index e2604d9ecea..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ios-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 886bca116b0..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 371e6c0082c..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index e8d47286c89..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-md-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 12e4937921c..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-size-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index aa7c31d13af..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index 89c34566372..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index c443bd0eb1f..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 4606cf420d8..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index eaa5f9d311d..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ios-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 1cbbc9a1268..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index dfffd00a680..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 169cf1f865d..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-md-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 5e539c53544..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-button-top-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index 07f1444cb93..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index a2f37a41ec2..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index dba59cd4b28..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 52912401cda..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index a0b72987482..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ios-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 9e8b347c13e..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 41a730bfaba..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 75e8f1fb034..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-md-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 0e9b5fe98e3..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-md-ltr-Mobile-Safari-linux.png and /dev/null differ 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 deleted file mode 100644 index e14a8f91100..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null 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 deleted file mode 100644 index 18c64d56fc9..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null 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 deleted file mode 100644 index 0735b108c99..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null 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 deleted file mode 100644 index da289063e71..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-ios-ltr-Mobile-Chrome-linux.png and /dev/null 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 deleted file mode 100644 index a0b72987482..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-ios-ltr-Mobile-Firefox-linux.png and /dev/null 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 deleted file mode 100644 index 2e5bc7ca262..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-ios-ltr-Mobile-Safari-linux.png and /dev/null 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 deleted file mode 100644 index cff64310196..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-md-ltr-Mobile-Chrome-linux.png and /dev/null 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 deleted file mode 100644 index 13ae67e41e2..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-md-ltr-Mobile-Firefox-linux.png and /dev/null 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 deleted file mode 100644 index c0cc41f4971..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index 91424e195cc..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index fb22d6df437..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index e189b33af4e..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index bb8cacee065..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 0ccca50e74e..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ios-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index fd16c7345a5..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 50eb4307d5f..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 7269fc2dbaa..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index fa2d0ff607b..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index 90fbe6a0fb5..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index c713e59e7f1..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index 9363deb44fc..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index db9a258c344..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index aa62f9847d6..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ios-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 4c870ab752d..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index a5ba2ae0b77..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 10543e52687..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-md-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 91d211e9ddd..00000000000 Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-top-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/hint/index.html b/core/src/components/badge/test/hint/index.html deleted file mode 100644 index fba0d6e73ff..00000000000 --- a/core/src/components/badge/test/hint/index.html +++ /dev/null @@ -1,464 +0,0 @@ - - - - - Badge - Hint - - - - - - - - - - - - - - - Badge - Hint - - - - - - - Badge Empty - - - Badge small - - - - Badge Medium - - - - Badge Large - - - - - - - Inside Avatar - - -
- - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - -
- -
- - - 1 - - - - 1 - - - - 1 - - - - 1 - - - - 1 - - - - 1 - -
-
- - - 1 - - - - 1 - - - - 1 - - - - 1 - - - - 1 - - - - 1 - -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - Inside Tab Button - Top Icon - - -
- - - Tab One - - 9 - - - - Tab Two - - - - - - - - Tab Three - - 999 - - - - Tab Four - - - - -
-
- - - Tab One - - 9 - - - - Tab Two - - - - - - - - Tab Three - - 999 - - - - Tab Four - - - - -
- - - - - Inside Tab Button - Bottom Icon - - -
- - - Tab One - - 9 - - - - Tab Two - - - - - - - - Tab Three - - 999 - - - - Tab Four - - - - -
-
- - - Tab One - - 9 - - - - Tab Two - - - - - - - - Tab Three - - 999 - - - - Tab Four - - - - -
- - - - - Inside Button - Top Placement - -
- - - - - - - 1 - - - - 99+ - - - - - - - -
- - - - - Inside Button - Bottom Placement - -
- - - - - - - 1 - - - - 99+ - - - - - - - -
- - - - Inside Button - Button Size - -
- - - 1 - - - - 1 - - - - 1 - - - - 1 - -
-
- - - 1 - - - - 1 - - - - 1 - - - - 1 - -
- - - - - diff --git a/core/src/components/badge/test/hue/badge.e2e.ts b/core/src/components/badge/test/hue/badge.e2e.ts index 30dff8bc483..077b1f00512 100644 --- a/core/src/components/badge/test/hue/badge.e2e.ts +++ b/core/src/components/badge/test/hue/badge.e2e.ts @@ -1,80 +1,65 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => { +import { ION_BADGE_HUES } from '../../../badge/badge.interfaces'; + +/** + * This behavior does not vary across modes/directions. + * + * `ios` is the same as `md`. + */ +configs({ directions: ['ltr'], modes: ['md', 'ionic-md'] }).forEach(({ config, screenshot, title }) => { test.describe(title('badge: hue'), () => { - test('should render subtle badges', async ({ page }) => { - await page.setContent( - ` + ION_BADGE_HUES.forEach((hue) => { + test(`should render ${hue} badges`, async ({ page }) => { + await page.setContent( + `
- 99 - 99 - 99 - 99 - 99 - 99 - 99 - 99 - 99 - 99 + 99 + 99 + 99 + 99 + 99 + 99 + 99 + 99 + 99 + 99
- - - - - - - - - - -
- `, - config - ); - - const container = page.locator('#container'); - - await expect(container).toHaveScreenshot(screenshot(`badge-hue-subtle`)); - }); - - test('should render bold badges', async ({ page }) => { - await page.setContent( - ` -
- 99 - 99 - 99 - 99 - 99 - 99 - 99 - 99 - 99 - 99 + + + + + + + + + +
- - - - - - - - - - + + + + + + + + + +
`, - config - ); + config + ); - const container = page.locator('#container'); + const container = page.locator('#container'); - await expect(container).toHaveScreenshot(screenshot(`badge-hue-bold`)); + await expect(container).toHaveScreenshot(screenshot(`badge-hue-${hue}`)); + }); }); }); }); diff --git a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png index 2f09c6e474c..72bf4df8c3d 100644 Binary files a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png index 3921bbbaa6a..3c93c35bb6e 100644 Binary files a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png index 89509c32abe..4bd9999f0c3 100644 Binary files a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..dde7c1b9989 Binary files /dev/null and b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..cc5ba32d53a Binary files /dev/null and b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-md-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..c9b8b02cd87 Binary files /dev/null and b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png index 52108abbc2b..2c72ecc1b64 100644 Binary files a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png index da5298337cf..6a617de1640 100644 Binary files a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png index c64acd627b0..59fbf23a29a 100644 Binary files a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..4576de021aa Binary files /dev/null and b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..c81f6e400d2 Binary files /dev/null and b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-md-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..114b1c3b919 Binary files /dev/null and b/core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/hue/index.html b/core/src/components/badge/test/hue/index.html index d8e2dff3506..e1ce6f5698c 100644 --- a/core/src/components/badge/test/hue/index.html +++ b/core/src/components/badge/test/hue/index.html @@ -23,7 +23,7 @@ -

Badge Hue: Subtle

+

Badge Hue: Default

99 99 99 @@ -48,6 +48,59 @@

Badge Hue: Subtle

+
+ + + + + + + + + + + + +
+ +

Badge Hue: Subtle

+ 99 + 99 + 99 + 99 + 99 + 99 + 99 + 99 + 99 + 99 + +
+ + + + + + + + + + + + +
+ + + + + + + + + + + +

Badge Hue: Bold

99 99 @@ -72,6 +125,19 @@

Badge Hue: Bold

+ +
+ + + + + + + + + + + diff --git a/core/src/components/badge/test/shape/badge.e2e.ts b/core/src/components/badge/test/shape/badge.e2e.ts index 28b459f7daf..fe788e93ae4 100644 --- a/core/src/components/badge/test/shape/badge.e2e.ts +++ b/core/src/components/badge/test/shape/badge.e2e.ts @@ -1,185 +1,34 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; +import { ION_BADGE_SHAPES } from '../../../badge/badge.interfaces'; + /** * This behavior does not vary across directions. */ -configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => { +configs({ directions: ['ltr'], modes: ['md', 'ios', 'ionic-md'] }).forEach(({ config, screenshot, title }) => { test.describe(title('badge: shape'), () => { - test('should render soft badges for small size', async ({ page }) => { - await page.setContent( - ` -
- 1 -
- `, - config - ); - - const container = page.locator('#container'); - - await expect(container).toHaveScreenshot(screenshot(`badge-shape-soft-small-size`)); - }); - - test('should render soft badges with long text for small size', async ({ page }) => { - await page.setContent( - ` -
- 99+ -
- `, - config - ); - - const container = page.locator('#container'); - - await expect(container).toHaveScreenshot(screenshot(`badge-shape-soft-small-size-long-text`)); - }); - - test('should render soft badges with icon for small size', async ({ page }) => { - await page.setContent( - ` -
- - - -
- `, - config - ); - - const container = page.locator('#container'); - - await expect(container).toHaveScreenshot(screenshot(`badge-shape-soft-small-size-icon`)); - }); - - test('should render soft badges for larger sizes', async ({ page }) => { - await page.setContent( - ` -
- 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+ -
- `, - config - ); - - const container = page.locator('#container'); - - await expect(container).toHaveScreenshot(screenshot(`badge-shape-soft-larger-sizes-long-text`)); - }); - - test('should render soft badges with icon for larger sizes', async ({ page }) => { - await page.setContent( - ` -
- - - -
- `, - config - ); - - const container = page.locator('#container'); - - await expect(container).toHaveScreenshot(screenshot(`badge-shape-soft-larger-sizes-icon`)); - }); - - test('should render round badges', async ({ page }) => { - await page.setContent( - ` - 1 - `, - config - ); - - const badge = page.locator('ion-badge'); - - await expect(badge).toHaveScreenshot(screenshot(`badge-shape-round`)); - }); - - test('should render round badges with long text', async ({ page }) => { - await page.setContent( - ` - 99+ - `, - config - ); - - const badge = page.locator('ion-badge'); - - await expect(badge).toHaveScreenshot(screenshot(`badge-shape-round-long-text`)); - }); - - test('should render round badges with icon', async ({ page }) => { - await page.setContent( - ` - - - - `, - config - ); - - const badge = page.locator('ion-badge'); - - await expect(badge).toHaveScreenshot(screenshot(`badge-shape-round-icon`)); - }); - - test('should render rectangular badges', async ({ page }) => { - await page.setContent( - ` - 1 - `, - config - ); - - const badge = page.locator('ion-badge'); - - await expect(badge).toHaveScreenshot(screenshot(`badge-shape-rectangular`)); - }); - - test('should render rectangular badges with long text', async ({ page }) => { - await page.setContent( - ` - 99+ - `, - config - ); - - const badge = page.locator('ion-badge'); - - await expect(badge).toHaveScreenshot(screenshot(`badge-shape-rectangular-long-text`)); - }); - - test('should render rectangular badges with icon', async ({ page }) => { - await page.setContent( - ` - - - - `, - config - ); - - const badge = page.locator('ion-badge'); - - await expect(badge).toHaveScreenshot(screenshot(`badge-shape-rectangular-icon`)); + ION_BADGE_SHAPES.forEach((shape) => { + test(`should render ${shape} badges`, async ({ page }) => { + // `large` size has been applied to all badges for better visibility + await page.setContent( + ` +
+ + 1 + 99+ + + + +
+ `, + config + ); + + const container = page.locator('#container'); + + await expect(container).toHaveScreenshot(screenshot(`badge-shape-${shape}`)); + }); }); }); }); diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..72799d66e32 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..cdd7e55ebc4 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..e80219358ca Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..f8959d57278 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..e12512ec40c Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-ios-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..1abf62e49be Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..cdcdb16e711 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..d443fa809db Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-md-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f392e61f082 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-crisp-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index a7b6c8b885e..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index 1294a7799a5..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index 47edb525daf..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png index 1571639d828..7d8acc915d7 100644 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png index c6be47cad15..c22f1e31a9c 100644 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png index dec679e567e..a3129d4b3d7 100644 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..629bc73a778 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..489256a1724 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ios-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..3463b1db5b7 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index b9d0e45d8f0..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index d61355144ef..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index 4136654deb6..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..714881a4fd3 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..b73ed99a49b Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-md-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..52f4771ddb4 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-rectangular-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index 866dec268c7..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index 47c791c041b..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-icon-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index 665ab18c513..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-icon-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png index 746d98ffc78..f50f0d93ab0 100644 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png index b3eb5fef51d..5b4c490f53c 100644 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png index dba74afd6a0..0ba2f107904 100644 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..452c753afc8 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..ad89dcb8667 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ios-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..3c344e11433 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index 6471761ab3a..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index a4f869f1fe4..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index cace15520be..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..efaf943972e Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..d512c7fee12 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-md-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..9cbb4e193b4 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-round-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..e4b4fb449f4 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-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-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..667736243a5 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-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-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..c156e2d6e31 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-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-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..c337d7510f4 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..10642f59630 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-ios-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..591c2add8ff Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index c7d7b73ad7a..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index 433144d9c57..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-icon-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index 2eabfe9ac2c..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-icon-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ 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 deleted file mode 100644 index ba8c3651fd7..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null 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 deleted file mode 100644 index 2170c0fed3f..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null 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 deleted file mode 100644 index b87b6d8cece..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null 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 deleted file mode 100644 index 7a5ff43e682..00000000000 Binary files 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 and /dev/null 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 deleted file mode 100644 index 57a9c9a7c6b..00000000000 Binary files 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 and /dev/null 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 deleted file mode 100644 index be1668adbd6..00000000000 Binary files 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 and /dev/null differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..f664b18c233 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..0275d1d6a47 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-md-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..786607839d8 Binary files /dev/null and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index 89762d3b7d9..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index ff0fe2610df..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-icon-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index 2f8712bb9b5..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-icon-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index d532960ca72..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index d5fd5de065f..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index b57e09b9a98..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index 2ae751701db..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index 01c0003618e..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index c81ad0d5c6e..00000000000 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-small-size-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/shape/index.html b/core/src/components/badge/test/shape/index.html index 64a02624fd5..9b473e3ab5d 100644 --- a/core/src/components/badge/test/shape/index.html +++ b/core/src/components/badge/test/shape/index.html @@ -23,70 +23,50 @@ +

`large` size has been applied to all badges for better visibility.

Default - 1 - 99+ - + + 1 + 99+ + - Soft - 1 - 99+ - - - - - - Round - 1 - 99+ - - - - - - Rectangular - 1 - 99+ - - - - - - - - Medium Default - 1 - 99+ - + Crisp + + 1 + 99+ + - Medium Soft - 1 - 99+ - + Soft + + 1 + 99+ + - Medium Round - 1 - 99+ - + Round + + 1 + 99+ + - Medium Rectangular - 1 - 99+ - + Rectangular + + 1 + 99+ + diff --git a/core/src/components/badge/test/size/badge.e2e.ts b/core/src/components/badge/test/size/badge.e2e.ts index fb8bdcd5e6f..25d131cd4ad 100644 --- a/core/src/components/badge/test/size/badge.e2e.ts +++ b/core/src/components/badge/test/size/badge.e2e.ts @@ -1,91 +1,33 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; +import { ION_BADGE_SIZES } from '../../../badge/badge.interfaces'; + /** * This behavior does not vary across directions. */ -configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => { +configs({ directions: ['ltr'], modes: ['md', 'ios', 'ionic-md'] }).forEach(({ config, screenshot, title }) => { test.describe(title('badge: size'), () => { - test('should render small badges', async ({ page }) => { - await page.setContent( - ` - 1 - `, - config - ); - - const badge = page.locator('ion-badge'); - - await expect(badge).toHaveScreenshot(screenshot(`badge-size-small`)); - }); - - test('should render small badges with long text', async ({ page }) => { - await page.setContent( - ` - 99+ - `, - config - ); - - const badge = page.locator('ion-badge'); - - await expect(badge).toHaveScreenshot(screenshot(`badge-size-small-long-text`)); - }); - - test('should render small badges with icon', async ({ page }) => { - await page.setContent( - ` - - - - `, - config - ); - - const badge = page.locator('ion-badge'); - - await expect(badge).toHaveScreenshot(screenshot(`badge-size-small-icon`)); - }); - - test('should render medium badges', async ({ page }) => { - await page.setContent( - ` - 1 - `, - config - ); - - const badge = page.locator('ion-badge'); - - await expect(badge).toHaveScreenshot(screenshot(`badge-size-medium`)); - }); - - test('should render medium badges with long text', async ({ page }) => { - await page.setContent( - ` - 99+ - `, - config - ); - - const badge = page.locator('ion-badge'); - - await expect(badge).toHaveScreenshot(screenshot(`badge-size-medium-long-text`)); - }); - - test('should render medium badges with icon', async ({ page }) => { - await page.setContent( - ` - - - - `, - config - ); - - const badge = page.locator('ion-badge'); - - await expect(badge).toHaveScreenshot(screenshot(`badge-size-medium-icon`)); + ION_BADGE_SIZES.forEach((size) => { + test(`should render ${size} badges`, async ({ page }) => { + await page.setContent( + ` +
+ + 1 + 99+ + + + +
+ `, + config + ); + + const container = page.locator('#container'); + + await expect(container).toHaveScreenshot(screenshot(`badge-size-${size}`)); + }); }); }); }); diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index 1287ce77ae2..00000000000 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index 62ef4a67a41..00000000000 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-icon-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index 075de41e044..00000000000 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-icon-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png index 0e8a892a461..f50f0d93ab0 100644 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png index 133773489cc..5b4c490f53c 100644 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png index 43867da43ba..0ba2f107904 100644 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..452c753afc8 Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..ad89dcb8667 Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ios-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..3c344e11433 Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index 1ea0d57e124..00000000000 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index c80aba97a7b..00000000000 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index a4308f28b34..00000000000 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..efaf943972e Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..d512c7fee12 Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-md-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..9cbb4e193b4 Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index 8d1cd79229a..00000000000 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index 0ba49f14b43..00000000000 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-icon-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index 6397d99dc0d..00000000000 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-icon-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ 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 index e4d3098a4cc..0bb2deee37a 100644 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png 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 index 86487a2c027..0abdd6ed0d1 100644 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png 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 index fff1ef94af8..ad12ce999df 100644 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png 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/badge.e2e.ts-snapshots/badge-size-medium-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..0a7d773017a Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..63453694ea5 Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ios-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..abbe1bafd03 Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index 212648ad5eb..00000000000 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index 8fd3a2a7042..00000000000 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index fdec2fec5b2..00000000000 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..0c710d2d185 Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..b136223fdbd Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-md-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..1577f27ccf3 Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index 866dec268c7..00000000000 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index 47c791c041b..00000000000 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-icon-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index 665ab18c513..00000000000 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-icon-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png index 746d98ffc78..c8e85e9a060 100644 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png index b3eb5fef51d..ffd5d87ef64 100644 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png index dba74afd6a0..0a2a01aaed2 100644 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..e498470060e Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..ddc58c7cb39 Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ios-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..ba9da253042 Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index 6471761ab3a..00000000000 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index a4f869f1fe4..00000000000 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index cace15520be..00000000000 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..28a37bc3b1e Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..8ac7939b65a Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-md-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..0a3f1674d0e Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-md-ltr-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 bb771098852..faefec623dc 100644 --- a/core/src/components/badge/test/size/index.html +++ b/core/src/components/badge/test/size/index.html @@ -26,6 +26,7 @@ Default + 1 99+ @@ -34,6 +35,7 @@ Small + 1 99+ @@ -42,12 +44,22 @@ Medium + 1 99+ + + Large + + 1 + 99+ + + + + diff --git a/core/src/components/button/button.common.scss b/core/src/components/button/button.common.scss index b7e43f2e411..cfbb699eb0e 100644 --- a/core/src/components/button/button.common.scss +++ b/core/src/components/button/button.common.scss @@ -300,21 +300,15 @@ ion-ripple-effect { color: #{var(--ion-toolbar-background, var(--color))}; } -// Button Badge -// -------------------------------------------------- - .button-native ion-ripple-effect, .button-native::after { @include border-radius(inherit); } +// Button Slotted Elements +// --------------------------------------------- + +// Anchored Badge :host(.button-has-badge) .button-native { --overflow: visible; } - -:host ::slotted(ion-badge[vertical]:not(:empty)) { - display: flex; - - align-items: center; - justify-content: center; -} diff --git a/core/src/components/button/button.ionic.scss b/core/src/components/button/button.ionic.scss index 21371acf605..51c1c7b4ea6 100644 --- a/core/src/components/button/button.ionic.scss +++ b/core/src/components/button/button.ionic.scss @@ -295,39 +295,3 @@ --padding-top: #{globals.$ion-space-0}; --padding-bottom: #{globals.$ion-space-0}; } - -:host(.button-small) ::slotted(ion-badge) { - @include globals.position(null, calc(-1 * globals.$ion-space-050), null, null); -} - -:host(.button-medium) { - ::slotted(ion-badge.long-badge.badge-vertical-top) { - @include globals.position($top: globals.$ion-space-100); - } - ::slotted(ion-badge.long-badge.badge-vertical-bottom) { - @include globals.position($bottom: globals.$ion-space-100); - } - - ::slotted(ion-badge:not(.long-badge).badge-vertical-top) { - @include globals.position(globals.$ion-space-100, globals.$ion-space-150, null, null); - } - ::slotted(ion-badge:not(.long-badge).badge-vertical-bottom) { - @include globals.position(null, globals.$ion-space-150, globals.$ion-space-100, null); - } -} - -:host(.button-large) { - ::slotted(ion-badge.long-badge.badge-vertical-top) { - @include globals.position($top: globals.$ion-space-200); - } - ::slotted(ion-badge.long-badge.badge-vertical-bottom) { - @include globals.position($bottom: globals.$ion-space-200); - } - - ::slotted(ion-badge:not(.long-badge).badge-vertical-top) { - @include globals.position(globals.$ion-space-200, globals.$ion-space-200, null, null); - } - ::slotted(ion-badge:not(.long-badge).badge-vertical-bottom) { - @include globals.position(null, globals.$ion-space-200, globals.$ion-space-200, null); - } -} diff --git a/core/src/components/button/button.native.scss b/core/src/components/button/button.native.scss index 3b29fdca42f..10d02f60519 100644 --- a/core/src/components/button/button.native.scss +++ b/core/src/components/button/button.native.scss @@ -48,14 +48,3 @@ ::slotted(ion-icon[slot="end"]) { @include globals.margin(0, -0.2em, 0, 0.3em); } - -// Button Badge -// -------------------------------------------------- - -.button-native ::slotted(ion-badge) { - position: fixed; -} - -:host ::slotted(ion-badge[vertical]:not(:empty)) { - @include globals.padding(2px); -} diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx index aded6ecc555..c957e681d2a 100644 --- a/core/src/components/button/button.tsx +++ b/core/src/components/button/button.tsx @@ -1,5 +1,6 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; import { Component, Element, Event, Host, Prop, Watch, State, forceUpdate, h } from '@stencil/core'; +import { createBadgeManager } from '@utils/badge-position'; import type { AnchorInterface, ButtonInterface } from '@utils/element-interface'; import type { Attributes } from '@utils/helpers'; import { inheritAriaAttributes, hasShadowDom, openURL } from '@utils/helpers'; @@ -31,6 +32,7 @@ import type { RouterDirection } from '../router/utils/interface'; shadow: true, }) export class Button implements ComponentInterface, AnchorInterface, ButtonInterface { + private hasLoaded = false; private inItem = false; private inListHeader = false; private inToolbar = false; @@ -40,6 +42,12 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf @Element() el!: HTMLElement; + private badgeManager = createBadgeManager(this.el, () => ({ + host: this.el, + target: this.el.shadowRoot!.querySelector('.button-native')!, + relativeTo: this.el.shadowRoot!.querySelector('.button-inner')!, + })); + /** * If `true`, the button only has an icon. */ @@ -222,6 +230,21 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf this.inheritedAttributes = inheritAriaAttributes(this.el); } + connectedCallback() { + if (this.hasLoaded) { + this.badgeManager.init(); + } + } + + componentDidLoad() { + this.hasLoaded = true; + this.badgeManager.init(); + } + + disconnectedCallback() { + this.badgeManager.destroy(); + } + private get hasIconOnly() { return !!this.el.querySelector('[slot="icon-only"]'); } @@ -356,7 +379,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf this.ionBlur.emit(); }; - private slotChanged = () => { + private iconOnlySlotChanged = () => { /** * Ensures that the 'has-icon-only' class is properly added * or removed from `ion-button` when manipulating the @@ -368,6 +391,10 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf this.isCircle = this.hasIconOnly; }; + private onSlotChanged = () => { + this.badgeManager.onSlotChanged(); + }; + render() { const { buttonType, @@ -446,9 +473,9 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf {...inheritedAttributes} > - + - + {mode === 'md' && } diff --git a/core/src/components/button/test/badge/button.e2e.ts b/core/src/components/button/test/badge/button.e2e.ts new file mode 100644 index 00000000000..f4854147528 --- /dev/null +++ b/core/src/components/button/test/badge/button.e2e.ts @@ -0,0 +1,91 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +import { ION_BADGE_SIZES, ION_BADGE_VERTICAL_POSITIONS } from '../../../badge/badge.interfaces'; + +configs({ modes: ['md', 'ios', 'ionic-md'] }).forEach(({ config, screenshot, title }) => { + test.describe(title('button: badge'), () => { + ['small', 'medium', 'large'].forEach((buttonSize) => { + test(`${buttonSize} - should not have visual regressions with badges`, async ({ page }) => { + const contents = ['', '1', '999+', '']; + + const iconButtons = ION_BADGE_VERTICAL_POSITIONS.map( + (position) => + ` +

badge position: ${position}

+
${contents + .flatMap((html) => + ION_BADGE_SIZES.map( + (badgeSize) => ` + + ${html} + ` + ) + ) + .join('\n')} +
+ ` + ).join('\n'); + + const textButtons = ION_BADGE_VERTICAL_POSITIONS.map( + (position) => + ` +

badge position: ${position}

+
${contents + .flatMap((html) => + ION_BADGE_SIZES.map( + (badgeSize) => ` + Button + ${html} + ` + ) + ) + .join('\n')} +
+ ` + ).join('\n'); + + await page.setContent( + ` + + +
+ ${iconButtons} + ${textButtons} +
+ `, + config + ); + + const container = page.locator('#container'); + + /** + * Buttons overflow the default viewport, causing + * unrendered areas to appear black in the screenshot. + * Resizing to fit content. + */ + const box = await container.boundingBox(); + await page.setViewportSize({ width: Math.ceil(box!.width) + 200, height: Math.ceil(box!.height) + 32 }); + + await expect(container).toHaveScreenshot(screenshot(`button-${buttonSize}-badge`)); + }); + }); + }); +}); diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..fc9b0e79645 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..3608963a77f Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..7dcd1ab022b Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..c1b06f132f8 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..bf08533d13a Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..1349e40e9cb Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..92daa759d34 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..fa6e6579d4e Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..807723f1365 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..e5d8e320fbe Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..9fe61a2cbe5 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ios-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..9ce4ea32ba6 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..2aae92b6793 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..e28d3bb0154 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..599118efa2c Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-md-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..aa48cbae78c Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-md-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..2fea34124d8 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-md-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..33d60b6c764 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-large-badge-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..744379ffd60 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f0631000e2d Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..1b319a10cfe Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..da19c9af399 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..886c2bbdf07 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..08fd5d8d7a7 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..2f8cfa04122 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..d85870c5539 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..30602460b24 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..a18591eb20a Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..bb9cc732dba Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ios-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..3e63a8a29b1 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..3ced853443c Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..30d504f1b55 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..68d1246e25b Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-md-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..aa2fc58e4eb Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-md-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..92711fe8197 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-md-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..56d6403dd33 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-medium-badge-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..b4ecfbc13b2 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..4d0d88391ee Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..d70d46567e2 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..d896c92ee94 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..7bcaded08b3 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..748c9a093e1 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..713b00fd7c7 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..c54ba96dd07 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..e2dd076d8c9 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..897d7417de3 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..b3b5b9bb712 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ios-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..a88ca4deaa1 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..49e46dd4d3f Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..da3d406e6dd Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..ab9953d769a Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-md-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..3d6a8b7be13 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-md-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..2f643b8256e Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-md-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..49d18a42a1a Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-small-badge-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/index.html b/core/src/components/button/test/badge/index.html new file mode 100644 index 00000000000..fd1ddc6dee1 --- /dev/null +++ b/core/src/components/button/test/badge/index.html @@ -0,0 +1,155 @@ + + + + + Button - Badge + + + + + + + + + + + + + + + Button - Badge + + + + + + + + + diff --git a/core/src/components/chip/chip.interfaces.ts b/core/src/components/chip/chip.interfaces.ts index 43debfec7e3..341a56a7faf 100644 --- a/core/src/components/chip/chip.interfaces.ts +++ b/core/src/components/chip/chip.interfaces.ts @@ -1,4 +1,4 @@ -import type { IonPadding, IonMargin } from '../../themes/themes.interfaces.js'; +import type { IonPadding, IonMargin } from '../../themes/themes.interfaces'; export type IonChipRecipe = { letterSpacing?: string | number; diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx index d1b9776c47e..5b06b7adc02 100644 --- a/core/src/components/chip/chip.tsx +++ b/core/src/components/chip/chip.tsx @@ -67,7 +67,8 @@ export class Chip implements ComponentInterface { // TODO(FW-6266): Determine if `medium` size is needed. /** - * Set to `"small"` for a chip with less height and padding. + * Set to `"small"` for a chip with less height and padding, + * or `"large"` for a chip with more height and padding. * * Defaults to `"large"` if both the size property and theme config are unset. */ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Chrome-linux.png index ae67e684909..322e5dddf9d 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Firefox-linux.png index 7f69a837765..94d17af13d6 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Safari-linux.png index d0a1ab08344..1c0b51a5870 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Chrome-linux.png index 7b76eab2b43..1aa1ddbc4af 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Firefox-linux.png index aee4dbd849e..f9a0235d530 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png index 75f7ecf64b6..06a94a777ec 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Chrome-linux.png index ffe6232a15b..ee2f6ecb8f1 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Firefox-linux.png index aa07005d275..f2c392a9a49 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Safari-linux.png index c3dbde8d7af..a5aa56dbf23 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Chrome-linux.png index 8063bdf8cba..4e088395f44 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Firefox-linux.png index ff419b86173..e64a39bcd6c 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png index 47758df49ae..7a2d0aa4ce1 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Chrome-linux.png index a7ee0e42b27..694fe61c43b 100644 Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Firefox-linux.png index 270b58c3a0c..e1c57c6999a 100644 Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Safari-linux.png index 2c40d88ac57..b0ed97f38aa 100644 Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Chrome-linux.png index cf4cfc9a671..f07bb160324 100644 Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Firefox-linux.png index 39a451de6aa..f89006949f7 100644 Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Safari-linux.png index d7ac8400f33..7922db7fef3 100644 Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-ltr-Mobile-Chrome-linux.png index 0c54dcf0dbe..dacdb81f73e 100644 Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-ltr-Mobile-Firefox-linux.png index 703f12eb865..e3f7802dd4e 100644 Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-ltr-Mobile-Safari-linux.png index a7b05a3be20..43eb7aa1ab4 100644 Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Chrome-linux.png index 96924dc7b8e..4dc297c0683 100644 Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Firefox-linux.png index dd507e07881..e0b6da6b2b6 100644 Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Safari-linux.png index 7640d5585fa..c22dbe8c356 100644 Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/index.html b/core/src/components/tab-bar/test/basic/index.html index 5c4c39ee324..22daa86da4d 100644 --- a/core/src/components/tab-bar/test/basic/index.html +++ b/core/src/components/tab-bar/test/basic/index.html @@ -86,7 +86,7 @@ Favorites - 23 + 23 @@ -99,7 +99,7 @@ Favorites - + @@ -112,7 +112,7 @@ - 47 + 47 @@ -128,7 +128,7 @@ - 88 + 88 @@ -158,7 +158,7 @@ - 44 + 44 @@ -176,7 +176,7 @@ - 16 + 16 Favorites @@ -197,7 +197,7 @@ Favorites - 33 + 33 @@ -211,7 +211,7 @@ Recents - 12 + 12 @@ -240,7 +240,7 @@ Settings - 2 + 2 diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts index 9069cbb8e85..5a7ccc9b2ea 100644 --- a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts +++ b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts @@ -72,7 +72,7 @@ configs().forEach(({ title, screenshot, config }) => { Favorites - 23 + 23 diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png index 31341a0a6d8..038eaba4a51 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Chrome-linux.png index 94f39949241..f84801ada72 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Firefox-linux.png index b78f7c1b021..3b673dbf1ba 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Safari-linux.png index 2b1eb92fea0..ef25a6ad4c7 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Chrome-linux.png index 7729c008b96..d3dc05057fe 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Firefox-linux.png index ebb6748e95e..2a2774677d2 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Safari-linux.png index 96620415fb8..d38b7a3ef6f 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Chrome-linux.png index fa3047272b6..8c9c8113b95 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Firefox-linux.png index 938ff320ead..99dfb0e0758 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Safari-linux.png index cc945af8709..49723443c9d 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Chrome-linux.png index 043581beb4e..85984c6d206 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Firefox-linux.png index 08c60d47d45..034c5db41db 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Safari-linux.png index 2377ddd70f3..42a7c362baf 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-safe-area-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/custom/index.html b/core/src/components/tab-bar/test/custom/index.html index bfbc93c955a..e6ef77bfb0c 100644 --- a/core/src/components/tab-bar/test/custom/index.html +++ b/core/src/components/tab-bar/test/custom/index.html @@ -32,7 +32,7 @@ Favorites - 6 + 6 @@ -51,7 +51,7 @@ Favorites - 6 + 6 @@ -70,7 +70,7 @@ Favorites - 6 + 6 @@ -89,7 +89,7 @@ Favorites - 6 + 6 @@ -108,7 +108,7 @@ Favorites - 6 + 6 diff --git a/core/src/components/tab-bar/test/translucent/index.html b/core/src/components/tab-bar/test/translucent/index.html index 50579f43f69..19c973aa2ea 100644 --- a/core/src/components/tab-bar/test/translucent/index.html +++ b/core/src/components/tab-bar/test/translucent/index.html @@ -24,7 +24,7 @@ Favorites - 6 + 6 @@ -37,7 +37,7 @@ Item One Max - + @@ -46,12 +46,12 @@ - 88 + 88 - 888+ + 888+ @@ -63,17 +63,17 @@ Item One Max - + - 88 + 88 - 888+ + 888+ @@ -99,7 +99,7 @@ Item One Max - 88 + 88 diff --git a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts index ada3b65e46e..8287b9bfd4d 100644 --- a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts +++ b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts @@ -24,7 +24,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c Favorites - 23 + 23 @@ -58,7 +58,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c Favorites - 23 + 23 diff --git a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Chrome-linux.png index e451765985d..514f124fe9d 100644 Binary files a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Safari-linux.png index 6ca8470ec8c..65e966ff114 100644 Binary files a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-container-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Chrome-linux.png index 0f8e0a2fe2d..514f124fe9d 100644 Binary files a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Safari-linux.png index 459409ab9f0..89f58843294 100644 Binary files a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-button/tab-button.common.scss b/core/src/components/tab-button/tab-button.common.scss index 9f250a6ba0a..587649b8331 100644 --- a/core/src/components/tab-button/tab-button.common.scss +++ b/core/src/components/tab-button/tab-button.common.scss @@ -135,17 +135,6 @@ white-space: normal; } -// Tab Button: Badge -// -------------------------------------------------- - -::slotted(ion-badge) { - box-sizing: border-box; - - position: absolute; - - z-index: 1; -} - // Tab Button: Layout // -------------------------------------------------- diff --git a/core/src/components/tab-button/tab-button.ionic.scss b/core/src/components/tab-button/tab-button.ionic.scss index d2a77603305..a44e776cab6 100644 --- a/core/src/components/tab-button/tab-button.ionic.scss +++ b/core/src/components/tab-button/tab-button.ionic.scss @@ -98,47 +98,3 @@ :host(.tab-button-shape-rectangular) { @include globals.border-radius(globals.$ion-border-radius-0); } - -// Tab Button: Badge -// -------------------------------------------------- - -:host ::slotted(ion-badge) { - @include globals.position(null, null, null, calc(50% + globals.$ion-scale-300)); -} - -:host ::slotted(ion-badge.badge-vertical-top) { - @include globals.position(-2px); -} - -:host ::slotted(ion-badge.badge-vertical-top:empty) { - @include globals.position(calc(globals.$ion-scale-100 * -1)); -} - -:host ::slotted(ion-badge.badge-vertical-bottom) { - @include globals.position(calc(50% - globals.$ion-scale-200)); -} - -:host ::slotted(ion-badge.badge-vertical-bottom:empty) { - @include globals.position(calc(50% - globals.$ion-scale-100)); -} - -:host ::slotted(ion-badge[vertical]:not(:empty)) { - @include globals.padding(globals.$ion-scale-100); - - display: flex; - - align-items: center; - justify-content: center; -} - -:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-top) { - @include globals.position(calc(50% - globals.$ion-scale-100)); -} - -:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom) { - @include globals.position(calc(50% + globals.$ion-scale-100)); -} - -:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom:empty) { - @include globals.position(calc(50% + 14px)); -} diff --git a/core/src/components/tab-button/tab-button.ios.scss b/core/src/components/tab-button/tab-button.ios.scss index fa54a745d31..4b76d1a7834 100644 --- a/core/src/components/tab-button/tab-button.ios.scss +++ b/core/src/components/tab-button/tab-button.ios.scss @@ -12,78 +12,6 @@ font-size: $tab-button-ios-font-size; } -// iOS Tab Button: Badge -// -------------------------------------------------- - -::slotted(ion-badge:not([vertical])) { - @include padding(1px, 6px); - @include position(4px, null, null, calc(50% + 6px)); - - height: auto; - - font-size: 12px; - - line-height: 16px; -} - -:host ::slotted(ion-badge:empty) { - @include padding(0, 0); - - width: $tab-ios-button-badge-size-emtpy; - height: $tab-ios-button-badge-size-emtpy; -} - -:host ::slotted(ion-badge[vertical]) { - @include position(null, null, null, $tab-ios-button-badge-start-position); -} - -:host ::slotted(ion-badge.badge-vertical-top) { - @include position($tab-ios-button-badge-top-position); -} - -:host ::slotted(ion-badge.badge-vertical-top:empty) { - @include position($tab-ios-button-badge-top-position-empty); -} - -:host ::slotted(ion-badge.badge-vertical-bottom) { - @include position($tab-ios-button-badge-bottom-position); -} - -:host ::slotted(ion-badge.badge-vertical-bottom:empty) { - @include position($tab-ios-button-badge-bottom-position-empty); -} - -:host ::slotted(ion-badge[vertical]:not(:empty)) { - @include padding( - $tab-ios-button-badge-padding-top, - $tab-ios-button-badge-padding-end, - $tab-ios-button-badge-padding-bottom, - $tab-ios-button-badge-padding-start - ); - - display: flex; - - align-items: center; - justify-content: center; - - min-width: $tab-ios-button-badge-size; - height: $tab-ios-button-badge-size; - - font-size: $tab-ios-button-badge-font-size; -} - -:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-top) { - @include position($tab-ios-button-icon-bottom-badge-top-position); -} - -:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom) { - @include position($tab-ios-button-icon-bottom-badge-bottom-position); -} - -:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom:empty) { - @include position($tab-ios-button-icon-bottom-badge-bottom-position-empty); -} - // iOS Tab Button: Icon // -------------------------------------------------- @@ -148,11 +76,6 @@ // iOS Tab Button: Icon Bottom Layout // -------------------------------------------------- -// Badge -:host(.tab-layout-icon-bottom) ::slotted(ion-badge) { - @include position(null, null, null, calc(50% + 12px)); -} - // Icon :host(.tab-layout-icon-bottom) ::slotted(ion-icon) { @include margin(0, null, 1px, null); @@ -163,32 +86,6 @@ @include margin(4px); } -// iOS Tab Button: Icon Start / End Layout -// -------------------------------------------------- - -:host(.tab-layout-icon-start) ::slotted(ion-badge), -:host(.tab-layout-icon-end) ::slotted(ion-badge) { - @include position(10px, null, null, calc(50% + 35px)); -} - -// iOS Tab Button: Icon Hide / Label Only Layout -// -------------------------------------------------------------- - -// Badge -:host(.tab-layout-icon-hide) ::slotted(ion-badge), -:host(.tab-has-label-only) ::slotted(ion-badge) { - @include position(10px, null, null, calc(50% + 30px)); -} - -// iOS Tab Button: Icon Only / Label Hide Layout -// -------------------------------------------------------------- - -// Badge -:host(.tab-layout-label-hide) ::slotted(ion-badge), -:host(.tab-has-icon-only) ::slotted(ion-badge) { - @include position(10px); -} - // Icon :host(.tab-layout-label-hide) ::slotted(ion-icon) { @include margin(0); diff --git a/core/src/components/tab-button/tab-button.ios.vars.scss b/core/src/components/tab-button/tab-button.ios.vars.scss index 07216846ad1..4221c8fff79 100644 --- a/core/src/components/tab-button/tab-button.ios.vars.scss +++ b/core/src/components/tab-button/tab-button.ios.vars.scss @@ -29,51 +29,3 @@ $tab-button-ios-icon-size: 24px; /// @prop - Size of the tab button icon when there is not a label $tab-button-ios-icon-only-size: 30px; - -// Tab Button: Badge -// -------------------------------------------------- - -/// @prop - Badge size -$tab-ios-button-badge-size: 16px; - -/// @prop - Badge size when empty -$tab-ios-button-badge-size-emtpy: 8px; - -/// @prop - Badge top position -$tab-ios-button-badge-top-position: 2px; - -/// @prop - Badge top position when empty -$tab-ios-button-badge-top-position-empty: 4px; - -/// @prop - Badge bottom position -$tab-ios-button-badge-bottom-position: calc(50% - 8px); - -/// @prop - Badge bottom position when empty -$tab-ios-button-badge-bottom-position-empty: calc(50% - 2px); - -/// @prop - Badge left position -$tab-ios-button-badge-start-position: calc(50% + 12px); - -/// @prop - Badge padding top -$tab-ios-button-badge-padding-top: 4px; - -/// @prop - Badge padding end -$tab-ios-button-badge-padding-end: 4px; - -/// @prop - Badge padding bottom -$tab-ios-button-badge-padding-bottom: 4px; - -/// @prop - Badge padding start -$tab-ios-button-badge-padding-start: 4px; - -/// @prop - Badge font size -$tab-ios-button-badge-font-size: 12px; - -/// @prop - Badge bottom position when tab bottom has icon at Bottom -$tab-ios-button-icon-bottom-badge-top-position: calc(50% - 4px); - -/// @prop - Badge bottom position when tab bottom has icon at bottom -$tab-ios-button-icon-bottom-badge-bottom-position: calc(50% + 4px); - -/// @prop - Badge bottom position when empty and when tab bottom has icon at bottom -$tab-ios-button-icon-bottom-badge-bottom-position-empty: calc(50% + 14px); diff --git a/core/src/components/tab-button/tab-button.md.scss b/core/src/components/tab-button/tab-button.md.scss index ae0ca36bd5b..ec77a3fe8b0 100644 --- a/core/src/components/tab-button/tab-button.md.scss +++ b/core/src/components/tab-button/tab-button.md.scss @@ -47,54 +47,6 @@ font-size: $tab-button-md-icon-size; } -// Material Design Tab Button: Badge -// -------------------------------------------------------------- - -::slotted(ion-badge) { - @include border-radius($tab-button-md-badge-border-radius); - @include padding( - $tab-button-md-badge-padding-top, - $tab-button-md-badge-padding-end, - $tab-button-md-badge-padding-bottom, - $tab-button-md-badge-padding-start - ); - @include position(8px, null, null, calc(50% + 6px)); - - min-width: $tab-button-md-badge-min-width; - - font-size: $tab-button-md-badge-font-size; - - font-weight: normal; -} - -::slotted(ion-badge:empty) { - display: block; - - min-width: $tab-button-md-badge-size-empty; - - height: $tab-button-md-badge-size-empty; -} - -:host ::slotted(ion-badge[vertical="bottom"]) { - @include position($tab-button-md-badge-bottom-position); -} - -:host ::slotted(ion-badge[vertical="bottom"]:empty) { - @include position($tab-button-md-badge-bottom-position-empty); -} - -:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical="top"]) { - @include position($tab-md-button-icon-bottom-badge-top-position, null, null, calc(50% + 6px)); -} - -:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical="bottom"]) { - @include position($tab-md-button-icon-bottom-badge-bottom-position, null, null, calc(50% + 6px)); -} - -:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical="bottom"]:empty) { - @include position($tab-md-button-icon-bottom-badge-bottom-position-empty, null, null, calc(50% + 6px)); -} - // Material Design Tab Button: Icon Top Layout // -------------------------------------------------------------- @@ -111,11 +63,6 @@ // Material Design Tab Button: Icon Bottom Layout // -------------------------------------------------------------- -// Badge -:host(.tab-layout-icon-bottom) ::slotted(ion-badge) { - @include position(8px, null, null, 70%); -} - // Icon :host(.tab-layout-icon-bottom) ::slotted(ion-icon) { @include margin(0, null, 6px, null); @@ -129,12 +76,6 @@ // Material Design Tab Button: Icon Start / Icon End Layout // -------------------------------------------------------------- -// Badge -:host(.tab-layout-icon-start) ::slotted(ion-badge), -:host(.tab-layout-icon-end) ::slotted(ion-badge) { - @include position(16px, null, null, 80%); -} - // Icon :host(.tab-layout-icon-start) ::slotted(ion-icon) { @include margin(null, 6px, null, null); @@ -148,12 +89,6 @@ // Material Design Tab Button: Icon Hide / Label Only Layout // -------------------------------------------------------------- -// Badge -:host(.tab-layout-icon-hide) ::slotted(ion-badge), -:host(.tab-has-label-only) ::slotted(ion-badge) { - @include position(16px, null, null, 70%); -} - // Label :host(.tab-layout-icon-hide) ::slotted(ion-label), :host(.tab-has-label-only) ::slotted(ion-label) { @@ -163,12 +98,6 @@ // Material Design Tab Button: Icon Only / Label Hide Layout // -------------------------------------------------------------- -// Badge -:host(.tab-layout-label-hide) ::slotted(ion-badge), -:host(.tab-has-icon-only) ::slotted(ion-badge) { - @include position(16px); -} - // Icon :host(.tab-layout-label-hide) ::slotted(ion-icon), :host(.tab-has-icon-only) ::slotted(ion-icon) { diff --git a/core/src/components/tab-button/tab-button.md.vars.scss b/core/src/components/tab-button/tab-button.md.vars.scss index e9a5d9c1243..13b0e890d0b 100644 --- a/core/src/components/tab-button/tab-button.md.vars.scss +++ b/core/src/components/tab-button/tab-button.md.vars.scss @@ -56,42 +56,3 @@ $tab-button-md-text-capitalization: none; /// @prop - Size of the tab button icon $tab-button-md-icon-size: 22px; - -/// @prop - Border radius on the tab button badge -$tab-button-md-badge-border-radius: 8px; - -/// @prop - Padding top on the tab button badge -$tab-button-md-badge-padding-top: 3px; - -/// @prop - Padding end on the tab button badge -$tab-button-md-badge-padding-end: 2px; - -/// @prop - Padding bottom on the tab button badge -$tab-button-md-badge-padding-bottom: 2px; - -/// @prop - Padding start on the tab button badge -$tab-button-md-badge-padding-start: 2px; - -/// @prop - Minimum width of the tab button badge -$tab-button-md-badge-min-width: 12px; - -/// @prop - Font size of the tab button badge -$tab-button-md-badge-font-size: 8px; - -/// @prop - Size of the empty tab button badge -$tab-button-md-badge-size-empty: 8px; - -/// @prop - Badge bottom position -$tab-button-md-badge-bottom-position: calc(50% - 8px); - -/// @prop - Badge bottom position when empty -$tab-button-md-badge-bottom-position-empty: calc(50% - 4px); - -/// @prop - Badge bottom position when tab bottom has icon at Bottom -$tab-md-button-icon-bottom-badge-top-position: calc(50% - 4px); - -/// @prop - Badge bottom position when tab bottom has icon at bottom -$tab-md-button-icon-bottom-badge-bottom-position: calc(50% + 4px); - -/// @prop - Badge bottom position when empty and when tab bottom has icon at bottom -$tab-md-button-icon-bottom-badge-bottom-position-empty: calc(50% + 12px); diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx index 169e4bb0bf6..fc41e27effa 100644 --- a/core/src/components/tab-button/tab-button.tsx +++ b/core/src/components/tab-button/tab-button.tsx @@ -1,5 +1,6 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; -import { Component, Element, Event, Host, Listen, Prop, h } from '@stencil/core'; +import { Component, Element, Event, Host, Listen, Prop, Watch, h } from '@stencil/core'; +import { createBadgeManager } from '@utils/badge-position'; import type { AnchorInterface } from '@utils/element-interface'; import type { Attributes } from '@utils/helpers'; import { inheritAttributes } from '@utils/helpers'; @@ -28,10 +29,48 @@ import type { shadow: true, }) export class TabButton implements ComponentInterface, AnchorInterface { + private hasLoaded = false; private inheritedAttributes: Attributes = {}; @Element() el!: HTMLElement; + private badgeManager = createBadgeManager(this.el, () => { + const layout = this.layout || config.get('tabButtonLayout', 'icon-top'); + + const hasIcon = this.hasIcon; + const hasLabel = this.hasLabel; + + const iconEl = hasIcon ? this.el.querySelector(':scope > ion-icon') : null; + const labelEl = hasLabel ? this.el.querySelector('ion-label') : null; + + let target: Element | null = null; + + if (layout === 'icon-hide') { + target = labelEl; + } else if (layout === 'label-hide') { + target = iconEl; + } else if (layout === 'icon-start') { + // Badge anchors to the trailing element + target = labelEl || iconEl; + } else { + // icon-top, icon-bottom, icon-end: badge anchors to the icon + target = iconEl || labelEl; + } + + if (!target) { + return undefined; + } + const isLabelTarget = target === labelEl; + + return { + host: this.el, + target, + relativeTo: this.el.shadowRoot!.querySelector('.button-inner')!, + anchorToEdge: !isLabelTarget, + clamp: !isLabelTarget && hasLabel, + }; + }); + /** * If `true`, the user cannot interact with the tab button. */ @@ -116,6 +155,26 @@ export class TabButton implements ComponentInterface, AnchorInterface { } } + @Watch('layout') + onLayoutChanged() { + this.badgeManager.init(); + } + + connectedCallback() { + if (this.hasLoaded) { + this.badgeManager.init(); + } + } + + componentDidLoad() { + this.hasLoaded = true; + this.badgeManager.init(); + } + + disconnectedCallback() { + this.badgeManager.destroy(); + } + private getShape(): string | undefined { const theme = getIonTheme(this); const { shape } = this; @@ -150,7 +209,7 @@ export class TabButton implements ComponentInterface, AnchorInterface { } private get hasIcon() { - return !!this.el.querySelector('ion-icon'); + return !!this.el.querySelector(':scope > ion-icon'); } private onKeyUp = (ev: KeyboardEvent) => { @@ -172,6 +231,10 @@ export class TabButton implements ComponentInterface, AnchorInterface { return mode === 'md'; } + private onSlotChanged = () => { + this.badgeManager.onSlotChanged(); + }; + render() { const { disabled, hasIcon, hasLabel, href, rel, target, layout, selected, tab, inheritedAttributes } = this; const theme = getIonTheme(this); @@ -215,7 +278,7 @@ export class TabButton implements ComponentInterface, AnchorInterface { {...inheritedAttributes} > - + {theme === 'md' && } diff --git a/core/src/components/tab-button/test/a11y/index.html b/core/src/components/tab-button/test/a11y/index.html index 1b0d809de01..9f38b67af24 100644 --- a/core/src/components/tab-button/test/a11y/index.html +++ b/core/src/components/tab-button/test/a11y/index.html @@ -23,13 +23,13 @@

Tab Button

Tab Two - + Tab Three - +