diff --git a/core/api.txt b/core/api.txt index a8217994eef..e2757eb77ea 100644 --- a/core/api.txt +++ b/core/api.txt @@ -316,28 +316,84 @@ 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 - the font family of the badge text Bold +ion-badge,css-prop,--ion-badge-hue-bold-default-background - Background color of the `bold` hue in default state +ion-badge,css-prop,--ion-badge-hue-bold-default-border-radius - Border radius of the `bold` hue in default state +ion-badge,css-prop,--ion-badge-hue-bold-default-color - Text color of the `bold` hue in default state +ion-badge,css-prop,--ion-badge-hue-bold-semantic-default-background - Background color of the `bold` hue when a semantic color is applied +ion-badge,css-prop,--ion-badge-hue-bold-semantic-default-border-radius - Border radius of the `bold` hue when a semantic color is applied Subtle +ion-badge,css-prop,--ion-badge-hue-bold-semantic-default-color - Text color of the `bold` hue when a semantic color is applied +ion-badge,css-prop,--ion-badge-hue-subtle-default-background - Background color of the `subtle` hue in default state +ion-badge,css-prop,--ion-badge-hue-subtle-default-border-radius - Border radius of the `subtle` hue in default state +ion-badge,css-prop,--ion-badge-hue-subtle-default-color - Text color of the `subtle` hue in default state +ion-badge,css-prop,--ion-badge-hue-subtle-semantic-default-background - Background color of the `subtle` hue when a semantic color is applied +ion-badge,css-prop,--ion-badge-hue-subtle-semantic-default-border-radius - Border radius of the `subtle` hue when a semantic color is applied Shapes +ion-badge,css-prop,--ion-badge-hue-subtle-semantic-default-color - Text color of the `subtle` hue when a semantic color is applied +ion-badge,css-prop,--ion-badge-shape-crisp-border-radius - Border radius of the `crisp` shape +ion-badge,css-prop,--ion-badge-shape-rectangular-border-radius - Border radius of the `rectangular` shape Sizes +ion-badge,css-prop,--ion-badge-shape-round-border-radius - Border radius of the `round` shape +ion-badge,css-prop,--ion-badge-shape-soft-border-radius - Border radius of the `soft` shape +ion-badge,css-prop,--ion-badge-size-large-content-font-size - Font size of the `large` size when badge has content +ion-badge,css-prop,--ion-badge-size-large-content-font-weight - Font weight of the `large` size when badge has content +ion-badge,css-prop,--ion-badge-size-large-content-height - Height of the `large` size when badge has content +ion-badge,css-prop,--ion-badge-size-large-content-icon-height - Height of the slotted `ion-icon` of the `large` size Sizes +ion-badge,css-prop,--ion-badge-size-large-content-icon-width - Width of the slotted `ion-icon` of the `large` size +ion-badge,css-prop,--ion-badge-size-large-content-letter-spacing - Letter spacing of the `large` size when badge has content +ion-badge,css-prop,--ion-badge-size-large-content-line-height - Line height of the `large` size when badge has content +ion-badge,css-prop,--ion-badge-size-large-content-min-height - Minimum height of the `large` size when badge has content +ion-badge,css-prop,--ion-badge-size-large-content-min-width - Minimum width of the `large` size when badge has content +ion-badge,css-prop,--ion-badge-size-large-content-padding-bottom - Bottom padding of the `large` size when badge has content +ion-badge,css-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 +ion-badge,css-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 +ion-badge,css-prop,--ion-badge-size-large-content-padding-top - Top padding of the `large` size when badge has content +ion-badge,css-prop,--ion-badge-size-large-dot-height - Height of the `large` size when badge is empty +ion-badge,css-prop,--ion-badge-size-large-dot-min-width - Minimum width of the `large` size when badge is empty +ion-badge,css-prop,--ion-badge-size-large-dot-padding-bottom - Bottom padding of the `large` size when badge is empty +ion-badge,css-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 +ion-badge,css-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 +ion-badge,css-prop,--ion-badge-size-large-dot-padding-top - Top padding of the `large` size when badge is empty +ion-badge,css-prop,--ion-badge-size-medium-content-font-size - Font size of the `medium` size when badge has content +ion-badge,css-prop,--ion-badge-size-medium-content-font-weight - Font weight of the `medium` size when badge has content +ion-badge,css-prop,--ion-badge-size-medium-content-height - Height of the `medium` size when badge has content +ion-badge,css-prop,--ion-badge-size-medium-content-icon-height - Height of the slotted `ion-icon` of the `medium` size +ion-badge,css-prop,--ion-badge-size-medium-content-icon-width - Width of the slotted `ion-icon` of the `medium` size +ion-badge,css-prop,--ion-badge-size-medium-content-letter-spacing - Letter spacing of the `medium` size when badge has content +ion-badge,css-prop,--ion-badge-size-medium-content-line-height - Line height of the `medium` size when badge has content +ion-badge,css-prop,--ion-badge-size-medium-content-min-height - Minimum height of the `medium` size when badge has content +ion-badge,css-prop,--ion-badge-size-medium-content-min-width - Minimum width of the `medium` size when badge has content +ion-badge,css-prop,--ion-badge-size-medium-content-padding-bottom - Bottom padding of the `medium` size when badge has content +ion-badge,css-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 +ion-badge,css-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 +ion-badge,css-prop,--ion-badge-size-medium-content-padding-top - Top padding of the `medium` size when badge has content +ion-badge,css-prop,--ion-badge-size-medium-dot-height - Height of the `medium` size when badge is empty +ion-badge,css-prop,--ion-badge-size-medium-dot-min-width - Minimum width of the `medium` size when badge is empty +ion-badge,css-prop,--ion-badge-size-medium-dot-padding-bottom - Bottom padding of the `medium` size when badge is empty +ion-badge,css-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 +ion-badge,css-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 +ion-badge,css-prop,--ion-badge-size-medium-dot-padding-top - Top padding of the `medium` size when badge is empty +ion-badge,css-prop,--ion-badge-size-small-content-font-size - Font size of the `small` size when badge has content +ion-badge,css-prop,--ion-badge-size-small-content-font-weight - Font weight of the `small` size when badge has content +ion-badge,css-prop,--ion-badge-size-small-content-height - Height of the `small` size when badge has content +ion-badge,css-prop,--ion-badge-size-small-content-icon-height - Height of the slotted `ion-icon` of the `small` size +ion-badge,css-prop,--ion-badge-size-small-content-icon-width - Width of the slotted `ion-icon` of the `small` size +ion-badge,css-prop,--ion-badge-size-small-content-letter-spacing - Letter spacing of the `small` size when badge has content +ion-badge,css-prop,--ion-badge-size-small-content-line-height - Line height of the `small` size when badge has content +ion-badge,css-prop,--ion-badge-size-small-content-min-height - Minimum height of the `small` size when badge has content +ion-badge,css-prop,--ion-badge-size-small-content-min-width - Minimum width of the `small` size when badge has content +ion-badge,css-prop,--ion-badge-size-small-content-padding-bottom - Bottom padding of the `small` size when badge has content +ion-badge,css-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 +ion-badge,css-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 +ion-badge,css-prop,--ion-badge-size-small-content-padding-top - Top padding of the `small` size when badge has content +ion-badge,css-prop,--ion-badge-size-small-dot-height - Height of the `small` size when badge is empty +ion-badge,css-prop,--ion-badge-size-small-dot-min-width - Minimum width of the `small` size when badge is empty +ion-badge,css-prop,--ion-badge-size-small-dot-padding-bottom - Bottom padding of the `small` size when badge is empty +ion-badge,css-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 +ion-badge,css-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 +ion-badge,css-prop,--ion-badge-size-small-dot-padding-top - Top padding of the `small` size when badge is empty 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 5d1eff6638c..76403218be6 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"; @@ -51,6 +52,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"; @@ -469,21 +471,21 @@ 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'; + "size"?: IonBadgeSize; /** * The theme determines the visual appearance of the component. */ @@ -491,7 +493,7 @@ export namespace Components { /** * 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 { /** @@ -898,7 +900,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; } @@ -6400,21 +6402,21 @@ 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'; + "size"?: IonBadgeSize; /** * The theme determines the visual appearance of the component. */ @@ -6422,7 +6424,7 @@ declare namespace LocalJSX { /** * 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 { /** @@ -6864,7 +6866,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..5066dd1fc99 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,10 @@ import { getIonTheme } from '../../global/ionic-global'; export class Avatar implements ComponentInterface { @Element() el!: HTMLElement; + 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 +50,14 @@ export class Avatar implements ComponentInterface { */ @Prop() disabled = false; + componentDidLoad() { + this.badgeManager.init(); + } + + disconnectedCallback() { + this.badgeManager.destroy(); + } + get hasImage() { return !!this.el.querySelector('ion-img') || !!this.el.querySelector('img'); } @@ -53,15 +66,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 +113,7 @@ export class Avatar implements ComponentInterface { [`avatar-disabled`]: disabled, }} > - + ); } diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts b/core/src/components/avatar/test/badge/badge.e2e.ts new file mode 100644 index 00000000000..7176fec4587 --- /dev/null +++ b/core/src/components/avatar/test/badge/badge.e2e.ts @@ -0,0 +1,51 @@ +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('avatar: badge'), () => { + ['xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge'].forEach((avatarSize) => { + test(`${avatarSize} - should not have visual regressions with badges`, async ({ page }) => { + const badgeSizes = ['small', 'medium', 'large']; + const positions = ['top', 'bottom']; + const contents = ['', '1', '999+', '']; + + const avatars = positions + .flatMap((position) => + badgeSizes.flatMap((badgeSize) => + contents.map( + (html) => ` + + + ${html} + + ` + ) + ) + ) + .join('\n'); + + await page.setContent( + ` + + +
+ ${avatars} +
+ `, + config + ); + + const container = page.locator('#container'); + + await expect(container).toHaveScreenshot(screenshot(`avatar-${avatarSize}-badge`)); + }); + }); + }); +}); diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..2dcb09e3f96 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..e943e55203e Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..743ff522f1f Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..b457a33ec19 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..80579033c44 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-ios-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..b2b84962d62 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-md-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..3120d2d677c Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-md-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f1836da3898 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-md-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f3deff4827c Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-large-badge-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..7c44a607705 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..549f20adeb8 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..48512aa1c2f Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..b457a33ec19 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..80579033c44 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-ios-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..b2b84962d62 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-md-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..3120d2d677c Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-md-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f1836da3898 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-md-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f3deff4827c Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-medium-badge-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..fdf26479da9 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..5df79c1a2e6 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..41431643075 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..b457a33ec19 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..80579033c44 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-ios-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..b2b84962d62 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-md-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..3120d2d677c Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-md-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f1836da3898 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-md-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f3deff4827c Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-small-badge-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..586ba35ed7b Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..57092d038e6 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..a7d69c99a8d Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..b457a33ec19 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..80579033c44 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-ios-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..b2b84962d62 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-md-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..3120d2d677c Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-md-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f1836da3898 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-md-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f3deff4827c Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xlarge-badge-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..e94729651bc Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..76eec6bb7df Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..ad3751577a2 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..b457a33ec19 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..80579033c44 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-ios-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..b2b84962d62 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-md-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..3120d2d677c Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-md-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f1836da3898 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-md-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f3deff4827c Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xsmall-badge-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..e6ec834a863 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..b0eed9f59a5 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..35936cec0ed Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..b457a33ec19 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..80579033c44 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-ios-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..b2b84962d62 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-md-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..3120d2d677c Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-md-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f1836da3898 Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-md-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f3deff4827c Binary files /dev/null and b/core/src/components/avatar/test/badge/badge.e2e.ts-snapshots/avatar-xxsmall-badge-md-ltr-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..e85d76017c6 --- /dev/null +++ b/core/src/components/avatar/test/badge/index.html @@ -0,0 +1,106 @@ + + + + + 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..08e7c455f62 --- /dev/null +++ b/core/src/components/badge/badge.interfaces.ts @@ -0,0 +1,94 @@ +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; + border?: { + radius?: 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 type IonBadgeHue = 'bold' | 'subtle'; +export type IonBadgeShape = 'crisp' | 'soft' | 'round' | 'rectangular'; +export type IonBadgeSize = 'small' | 'medium' | 'large'; +export type IonBadgeVerticalPosition = 'top' | 'bottom'; 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..01763d30cb6 --- /dev/null +++ b/core/src/components/badge/badge.scss @@ -0,0 +1,288 @@ +@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-default-border-radius - Border radius 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 + * @prop --ion-badge-hue-bold-semantic-default-border-radius - Border radius 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-default-border-radius - Border radius 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 + * @prop --ion-badge-hue-subtle-semantic-default-border-radius - Border radius 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; +} + +// 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); + + 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); + + 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); + + 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..bbd9e007135 100644 --- a/core/src/components/badge/badge.tsx +++ b/core/src/components/badge/badge.tsx @@ -1,21 +1,19 @@ 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 +30,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..fce1c134362 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..53d6943ea43 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..7d712a998e3 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/basic/badge.e2e.ts b/core/src/components/badge/test/basic/badge.e2e.ts index e6a6a871f96..422ac783f10 100644 --- a/core/src/components/badge/test/basic/badge.e2e.ts +++ b/core/src/components/badge/test/basic/badge.e2e.ts @@ -4,11 +4,67 @@ 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 + + + + + 11 + + + + + 22 + + + + + 33 + + + + + 44 + + + + + 55 + + + + + 66 + + + + + 77 + + + + + 88 + + + + + 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..b1a4cf3e783 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..026aeb14556 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..2242e1826a6 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..597d974eb12 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..c44a5a7f907 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..fcf7fd23e7b 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..44bc845ef72 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..cc428f58a92 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..18ad91ec7d1 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..85aacd48d44 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..e5fedad3991 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..07eb9002887 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..5fbe9bed581 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..2ee575bfb03 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..e1617b2fe7b 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..71bc48e8a41 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..c237053fdec 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..2ad04ed40aa 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..2016c6d50ef 100644 --- a/core/src/components/badge/test/basic/index.html +++ b/core/src/components/badge/test/basic/index.html @@ -29,6 +29,7 @@ Default Badge + 00 @@ -36,6 +37,7 @@ Primary Badge + 11 @@ -43,6 +45,7 @@ Secondary Badge + 22 @@ -50,6 +53,7 @@ Tertiary Badge + 33 @@ -57,6 +61,7 @@ Success Badge + 44 @@ -64,6 +69,7 @@ Warning Badge + 55 @@ -71,6 +77,7 @@ Danger Badge + 66 @@ -78,6 +85,7 @@ Light Badge + 77 @@ -85,6 +93,7 @@ Medium Badge + 88 @@ -92,13 +101,15 @@ Dark Badge + 99 - primary + + primary Dynamic Badge Color (toggle) @@ -109,6 +120,7 @@ Default Badge + 00 @@ -116,6 +128,7 @@ Primary Badge + 11 @@ -123,6 +136,7 @@ Secondary Badge + 22 @@ -130,6 +144,7 @@ Tertiary Badge + 33 @@ -137,6 +152,7 @@ Success Badge + 44 @@ -144,6 +160,7 @@ Warning Badge + 55 @@ -151,6 +168,7 @@ Danger Badge + 66 @@ -158,6 +176,7 @@ Light Badge + 77 @@ -165,6 +184,7 @@ Medium Badge + 88 @@ -172,6 +192,7 @@ Dark Badge + 99 @@ -182,12 +203,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..74b6a3a2ebe 100644 --- a/core/src/components/badge/test/hue/badge.e2e.ts +++ b/core/src/components/badge/test/hue/badge.e2e.ts @@ -1,35 +1,53 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => { +/** + * 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( `
- 99 - 99 - 99 - 99 - 99 - 99 - 99 - 99 - 99 - 99 + 99 + 99 + 99 + 99 + 99 + 99 + 99 + 99 + 99 + 99
- - - - - - - - - - + + + + + + + + + + + +
+ + + + + + + + + + +
`, config @@ -37,7 +55,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens const container = page.locator('#container'); - await expect(container).toHaveScreenshot(screenshot(`badge-hue-subtle`)); + await expect(container).toHaveScreenshot(screenshot('badge-hue-subtle')); }); test('should render bold badges', async ({ page }) => { @@ -67,6 +85,19 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens + +
+ + + + + + + + + + + `, config @@ -74,7 +105,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens const container = page.locator('#container'); - await expect(container).toHaveScreenshot(screenshot(`badge-hue-bold`)); + await expect(container).toHaveScreenshot(screenshot('badge-hue-bold')); }); }); }); 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..372a3c1d039 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..995f6ee250d 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..b11fd9c6025 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..3584ca3195d 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..3191ed45dc0 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..20d99da3b83 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..75be06f7f15 100644 --- a/core/src/components/badge/test/shape/badge.e2e.ts +++ b/core/src/components/badge/test/shape/badge.e2e.ts @@ -4,182 +4,29 @@ import { configs, test } from '@utils/test/playwright'; /** * 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`)); + ['crisp', 'soft', 'round', 'rectangular'].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..a78c4dab75c 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..b5f83b9470a 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..3e85034ba02 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..14ce00f7dab 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..97f1f26f91b 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..cca83540d2e 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..27e7cfa57f8 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..508d1efd4ef 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..749efae52a4 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..1d88ba925d6 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..8de516ee609 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..22e3b7b0b84 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..bfdc11ea0a1 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..2ca6c17a1a7 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..68f24f5cc67 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..5b262d0ee0c 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..7016c6bf920 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..416121b96d1 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..e3a5a4bdfb5 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..ed6909e5bfd 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..bd4f922b125 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..318519c86d0 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..ace8f869e96 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..129ef17e978 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..d0731d2a3de 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..65ef0c10952 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..7203ab68201 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..49364b61738 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..96859758ba7 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..3b314e37b66 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..318519c86d0 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..ace8f869e96 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..129ef17e978 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..5ba88a417b6 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..77e1aea4935 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..4d1bbcab5fd 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..b857e363586 100644 --- a/core/src/components/badge/test/size/badge.e2e.ts +++ b/core/src/components/badge/test/size/badge.e2e.ts @@ -4,88 +4,28 @@ import { configs, test } from '@utils/test/playwright'; /** * 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`)); + ['small', 'medium', 'large'].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..e3a5a4bdfb5 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..ed6909e5bfd 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..bd4f922b125 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..318519c86d0 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..ace8f869e96 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..129ef17e978 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..5ba88a417b6 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..77e1aea4935 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..4d1bbcab5fd 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..c4119a7c5f4 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..ef29483c39f 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..c84a3e96646 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..2bebeec43d8 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..302ad88699e 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..d694033da70 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..83520dc1754 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..92f95cd02a4 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..5d8f36df9f2 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..0979a84e7f9 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..c3a54f09818 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..bba65109f8b 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/badge/test/vertical/index.html b/core/src/components/badge/test/vertical/index.html new file mode 100644 index 00000000000..148aa03f607 --- /dev/null +++ b/core/src/components/badge/test/vertical/index.html @@ -0,0 +1,224 @@ + + + + + Badge - Vertical + + + + + + + + + + + + + + + Badge - Vertical + + + + +
+

+ Inside Avatar (Navigate to the Avatar Badges page to see + all badge variations.) +

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

+ Inside Tab Button (Navigate to the + Tab Button Badges page to see all badge variations.) +

+ +
+ + + Tab One + + 9 + + + + Tab Two + + + + + + + + Tab Three + + 999 + + + + Tab Four + + + + +
+
+ + + Tab One + + 9 + + + + Tab Two + + + + + + + + Tab Three + + 999 + + + + Tab Four + + + + +
+
+ +
+

+ Inside Button (Navigate to the Button Badges page to see + all badge variations.) +

+ +
+ + + + + + + 1 + + + + 99+ + + + + + + + +
+
+ + + + + + + 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..df8639ddc38 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'; @@ -40,6 +41,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 +229,14 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf this.inheritedAttributes = inheritAriaAttributes(this.el); } + componentDidLoad() { + this.badgeManager.init(); + } + + disconnectedCallback() { + this.badgeManager.destroy(); + } + private get hasIconOnly() { return !!this.el.querySelector('[slot="icon-only"]'); } @@ -356,7 +371,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 +383,10 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf this.isCircle = this.hasIconOnly; }; + private onSlotChanged = () => { + this.badgeManager.onSlotChanged(); + }; + render() { const { buttonType, @@ -446,9 +465,9 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf {...inheritedAttributes} > - + - + {mode === 'md' && } diff --git a/core/src/components/button/test/badge/badge.e2e.ts b/core/src/components/button/test/badge/badge.e2e.ts new file mode 100644 index 00000000000..2b52c08ca7f --- /dev/null +++ b/core/src/components/button/test/badge/badge.e2e.ts @@ -0,0 +1,68 @@ +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('button: badge'), () => { + ['small', 'medium', 'large'].forEach((buttonSize) => { + test(`${buttonSize} - should not have visual regressions with badges`, async ({ page }) => { + const badgeSizes = ['small', 'medium', 'large']; + const positions = ['top', 'bottom']; + const contents = ['', '1', '999+', '']; + + const buttons = positions + .flatMap((position) => + badgeSizes.flatMap((badgeSize) => + contents.flatMap((html) => [ + // Icon-only button + ` + + ${html} + `, + // Text button + ` + Button + ${html} + `, + ]) + ) + ) + .join('\n'); + + await page.setContent( + ` + + +
+ ${buttons} +
+ `, + config + ); + + const container = page.locator('#container'); + + /** + * Large buttons overflow the default viewport, causing + * unrendered areas to appear black in the screenshot. + * Resizing to fit content. + */ + if (buttonSize === 'large') { + const box = await container.boundingBox(); + + await page.setViewportSize({ width: Math.ceil(box!.width) + 32, height: Math.ceil(box!.height) + 32 }); + } + + await expect(container).toHaveScreenshot(screenshot(`button-${buttonSize}-badge`)); + }); + }); + }); +}); diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..25a2657bda9 Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..fce375808db Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..eb93894f1c0 Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..7e009601da4 Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..7fa5bc0128d Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..d5fe905352d Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..124110d6471 Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..c66ce825037 Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..dbe68124da4 Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..05a87e8c7d8 Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..dbf6059c62b Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..ea3077093ef Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..902b4dc16ea Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..54f30dafae4 Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..e5ee58d2154 Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..cfde243017e Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..3f5ce4fd1af Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..58a5071d906 Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-medium-badge-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..a45624be096 Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..504bb4e7aa9 Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..b50d6a7ec70 Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..66b951af92d Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..5ff1df4d9ec Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..32e61393fd1 Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..d4cb1865163 Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..53bf7470e11 Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..de2a910150d Binary files /dev/null and b/core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-small-badge-md-ltr-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..47fb933b248 --- /dev/null +++ b/core/src/components/button/test/badge/index.html @@ -0,0 +1,122 @@ + + + + + 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 6d55dc8f439..cd4fb51fbe5 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..bea53756d93 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..47887969a81 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..0b466578012 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..281cfc9b9a9 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..11449fc1513 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..9b7d5b00ee7 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/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..c4cae295094 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..2096a2c9f2a 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..849a1d7e01c 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..2b6f78a20d1 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..81880c7d445 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..0268194fb6f 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/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..5faf81c5e3b 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..b09b7956dbe 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..a8479d51eb1 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..d548d7b6b8c 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..74720780ca1 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..15453e22ccb 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..5d5dd9c403b 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..27e92682d65 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..a67f7a37ddc 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..b1ba762f3b3 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..bd2ce6c7562 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..3104e3897aa 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..81e47e12e74 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..6c58ebad4a4 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..dc2fd58179a 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..6c58ebad4a4 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..d3f88a7e420 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..510a52cf1b0 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 { createBadgeManager } from '@utils/badge-position'; import type { AnchorInterface } from '@utils/element-interface'; import type { Attributes } from '@utils/helpers'; import { inheritAttributes } from '@utils/helpers'; @@ -32,6 +33,44 @@ export class TabButton implements ComponentInterface, AnchorInterface { @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; + + // Clamp the badge if icon and label exists and layout is either `icon-top` or `icon-bottom` since the badge is positioned in the center of the button and could overlap with both the icon and label. + const clamp = hasIcon && hasLabel && (layout === 'icon-top' || layout === 'icon-bottom'); + + 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; + } + + return { + host: this.el, + target, + relativeTo: this.el.shadowRoot!.querySelector('.button-inner')!, + clamp, + }; + }); + /** * If `true`, the user cannot interact with the tab button. */ @@ -116,6 +155,14 @@ export class TabButton implements ComponentInterface, AnchorInterface { } } + componentDidLoad() { + this.badgeManager.init(); + } + + disconnectedCallback() { + this.badgeManager.destroy(); + } + private getShape(): string | undefined { const theme = getIonTheme(this); const { shape } = this; @@ -150,7 +197,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 +219,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 +266,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 - +