diff --git a/BREAKING.md b/BREAKING.md index b76cebd4638..5672db2a2ff 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -62,11 +62,12 @@ The following breaking changes apply to `ion-button`: 5. Icon-only buttons are now squares as tall as a text button of the same size. In `md`, this makes them a few pixels smaller at the small and default sizes and larger at the large size. To change their size, set the size's `min.height` as described above. 6. The `md` button follows Material Design 2 for its spacing, outline, elevation and disabled state. [6](#version-10x-button-md-material-design-2) 7. The `ios` button follows iOS 17 for its font, icons and disabled state. [7](#version-10x-button-ios-17) -8. CSS variables have been replaced. [8](#version-10x-button-replaced-css-variables) -9. `--padding-*` CSS variables are no longer part of the documented public API (but remain functional). [9](#version-10x-button-padding-variables) -10. The fill, size, shape and expand classes have been renamed. [10](#version-10x-button-renamed-classes) -11. The `default` size has been deprecated. [11](#version-10x-button-deprecated-default-size) -12. Theme classes (`ion-button.md`, `ion-button.ios`) are no longer supported. [12](#version-10x-button-theme-classes) +8. A badge without a `vertical` position now has a gap between it and the label, and no longer makes the button taller than its `min.height`. To remove the gap, set `IonButton.size..badge.margin.start` for global styles or `--ion-button-size--badge-margin-start` for component-specific styles to `0`. +9. CSS variables have been replaced. [9](#version-10x-button-replaced-css-variables) +10. `--padding-*` CSS variables are no longer part of the documented public API (but remain functional). [10](#version-10x-button-padding-variables) +11. The fill, size, shape and expand classes have been renamed. [11](#version-10x-button-renamed-classes) +12. The `default` size has been deprecated. [12](#version-10x-button-deprecated-default-size) +13. Theme classes (`ion-button.md`, `ion-button.ios`) are no longer supported. [13](#version-10x-button-theme-classes)
Material Design 2 in md
diff --git a/core/api.txt b/core/api.txt index a16fc0d44af..b23bf210a22 100644 --- a/core/api.txt +++ b/core/api.txt @@ -580,6 +580,10 @@ ion-button,css-prop,--ion-button-shape-crisp-border-radius ion-button,css-prop,--ion-button-shape-rectangular-border-radius ion-button,css-prop,--ion-button-shape-round-border-radius ion-button,css-prop,--ion-button-shape-soft-border-radius +ion-button,css-prop,--ion-button-size-large-badge-margin-bottom +ion-button,css-prop,--ion-button-size-large-badge-margin-end +ion-button,css-prop,--ion-button-size-large-badge-margin-start +ion-button,css-prop,--ion-button-size-large-badge-margin-top ion-button,css-prop,--ion-button-size-large-font-size ion-button,css-prop,--ion-button-size-large-icon-font-size ion-button,css-prop,--ion-button-size-large-icon-leading-margin-bottom @@ -619,6 +623,10 @@ ion-button,css-prop,--ion-button-size-large-spinner-trailing-margin-bottom ion-button,css-prop,--ion-button-size-large-spinner-trailing-margin-end ion-button,css-prop,--ion-button-size-large-spinner-trailing-margin-start ion-button,css-prop,--ion-button-size-large-spinner-trailing-margin-top +ion-button,css-prop,--ion-button-size-medium-badge-margin-bottom +ion-button,css-prop,--ion-button-size-medium-badge-margin-end +ion-button,css-prop,--ion-button-size-medium-badge-margin-start +ion-button,css-prop,--ion-button-size-medium-badge-margin-top ion-button,css-prop,--ion-button-size-medium-font-size ion-button,css-prop,--ion-button-size-medium-icon-font-size ion-button,css-prop,--ion-button-size-medium-icon-leading-margin-bottom @@ -658,6 +666,10 @@ ion-button,css-prop,--ion-button-size-medium-spinner-trailing-margin-bottom ion-button,css-prop,--ion-button-size-medium-spinner-trailing-margin-end ion-button,css-prop,--ion-button-size-medium-spinner-trailing-margin-start ion-button,css-prop,--ion-button-size-medium-spinner-trailing-margin-top +ion-button,css-prop,--ion-button-size-small-badge-margin-bottom +ion-button,css-prop,--ion-button-size-small-badge-margin-end +ion-button,css-prop,--ion-button-size-small-badge-margin-start +ion-button,css-prop,--ion-button-size-small-badge-margin-top ion-button,css-prop,--ion-button-size-small-font-size ion-button,css-prop,--ion-button-size-small-icon-font-size ion-button,css-prop,--ion-button-size-small-icon-leading-margin-bottom diff --git a/core/src/components/button/_button.docs.scss b/core/src/components/button/_button.docs.scss index 4465bc8d16c..1200028e9ef 100644 --- a/core/src/components/button/_button.docs.scss +++ b/core/src/components/button/_button.docs.scss @@ -52,6 +52,10 @@ * @prop --ion-button-size-small-spinner-trailing-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of a spinner in the `end` slot of the `small` button size * @prop --ion-button-size-small-spinner-trailing-margin-bottom: Bottom margin of a spinner in the `end` slot of the `small` button size * @prop --ion-button-size-small-spinner-trailing-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of a spinner in the `end` slot of the `small` button size + * @prop --ion-button-size-small-badge-margin-top: Top margin of a badge without a `vertical` position in a text button of the `small` size + * @prop --ion-button-size-small-badge-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of a badge without a `vertical` position in a text button of the `small` size + * @prop --ion-button-size-small-badge-margin-bottom: Bottom margin of a badge without a `vertical` position in a text button of the `small` size + * @prop --ion-button-size-small-badge-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of a badge without a `vertical` position in a text button of the `small` size * @prop --ion-button-size-medium-min-width: Minimum width of the `medium` button size * @prop --ion-button-size-medium-min-height: Minimum height of the `medium` button size, and the width and height of an icon-only button of that size * @prop --ion-button-size-medium-font-size: Font size of the `medium` button size @@ -91,6 +95,10 @@ * @prop --ion-button-size-medium-spinner-trailing-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of a spinner in the `end` slot of the `medium` button size * @prop --ion-button-size-medium-spinner-trailing-margin-bottom: Bottom margin of a spinner in the `end` slot of the `medium` button size * @prop --ion-button-size-medium-spinner-trailing-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of a spinner in the `end` slot of the `medium` button size + * @prop --ion-button-size-medium-badge-margin-top: Top margin of a badge without a `vertical` position in a text button of the `medium` size + * @prop --ion-button-size-medium-badge-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of a badge without a `vertical` position in a text button of the `medium` size + * @prop --ion-button-size-medium-badge-margin-bottom: Bottom margin of a badge without a `vertical` position in a text button of the `medium` size + * @prop --ion-button-size-medium-badge-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of a badge without a `vertical` position in a text button of the `medium` size * @prop --ion-button-size-large-min-width: Minimum width of the `large` button size * @prop --ion-button-size-large-min-height: Minimum height of the `large` button size, and the width and height of an icon-only button of that size * @prop --ion-button-size-large-font-size: Font size of the `large` button size @@ -130,6 +138,10 @@ * @prop --ion-button-size-large-spinner-trailing-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of a spinner in the `end` slot of the `large` button size * @prop --ion-button-size-large-spinner-trailing-margin-bottom: Bottom margin of a spinner in the `end` slot of the `large` button size * @prop --ion-button-size-large-spinner-trailing-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of a spinner in the `end` slot of the `large` button size + * @prop --ion-button-size-large-badge-margin-top: Top margin of a badge without a `vertical` position in a text button of the `large` size + * @prop --ion-button-size-large-badge-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of a badge without a `vertical` position in a text button of the `large` size + * @prop --ion-button-size-large-badge-margin-bottom: Bottom margin of a badge without a `vertical` position in a text button of the `large` size + * @prop --ion-button-size-large-badge-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of a badge without a `vertical` position in a text button of the `large` size * @prop --ion-button-shape-crisp-border-radius: Border radius of the `crisp` button shape * @prop --ion-button-shape-soft-border-radius: Border radius of the `soft` button shape * @prop --ion-button-shape-round-border-radius: Border radius of the `round` button shape diff --git a/core/src/components/button/button.interface.ts b/core/src/components/button/button.interface.ts index da433562708..54c457c83d4 100644 --- a/core/src/components/button/button.interface.ts +++ b/core/src/components/button/button.interface.ts @@ -238,6 +238,11 @@ type IonButtonSizeDefinition = { icon?: IonButtonIconDefinition; iconOnly?: IonButtonIconOnlyDefinition; spinner?: IonButtonSpinnerDefinition; + + /** A badge without a `vertical` position, which sits after the label of a text button */ + badge?: { + margin?: IonMargin; + }; }; type IonButtonShapeDefinition = { diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss index 1fe8a1a8bcd..70ab7dfadad 100644 --- a/core/src/components/button/button.scss +++ b/core/src/components/button/button.scss @@ -483,6 +483,27 @@ $spinner-sizes: xsmall, small, medium, large, xlarge; // Button: With a Badge // -------------------------------------------------- +// A badge can overflow its button, so the button sits above its siblings to keep the badge visible +:host(.button-has-badge) { + position: relative; + + z-index: 1; +} + :host(.button-has-badge) .button-native { + // Keeps a badge taller than the label from making the button taller than its min height + @include mixins.padding(var(--padding-top, 0), null, var(--padding-bottom, 0), null); + overflow: visible; } + +@each $size in $sizes { + :host(.button-size-#{$size}:not(.button-has-icon-only)) ::slotted(ion-badge:not([vertical])) { + @include mixins.margin( + var(--ion-button-size-#{$size}-badge-margin-top), + var(--ion-button-size-#{$size}-badge-margin-end), + var(--ion-button-size-#{$size}-badge-margin-bottom), + var(--ion-button-size-#{$size}-badge-margin-start) + ); + } +} diff --git a/core/src/components/button/test/badge/button.e2e.ts b/core/src/components/button/test/badge/button.e2e.ts index 12725cfa31b..85eb886aa73 100644 --- a/core/src/components/button/test/badge/button.e2e.ts +++ b/core/src/components/button/test/badge/button.e2e.ts @@ -83,5 +83,93 @@ configs({ modes: ['md', 'ios', 'ionic-md'] }).forEach(({ config, screenshot, tit await expect(container).toHaveScreenshot(screenshot(`button-badge`)); }); + + test('should space a badge without a position from the label', async ({ page }) => { + const rows = ION_BUTTON_SIZES.map( + (buttonSize) => `
${contents + .flatMap((html) => + ION_BADGE_SIZES.map( + (badgeSize) => ` + Button + ${html} + ` + ) + ) + .join('\n')} +
` + ).join('\n'); + + await page.setContent( + ` + + +
+ ${rows} +
+ `, + config + ); + + const container = page.locator('.badge-container'); + + // Content wider than the viewport is cut off at the left edge in rtl + const box = await container.boundingBox(); + await page.setViewportSize({ width: Math.ceil(box!.width), height: Math.ceil(box!.height) }); + + await expect(container).toHaveScreenshot(screenshot(`button-badge-no-position`)); + }); + }); +}); + +/** + * Stacking does not vary across modes or directions + */ +configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('button: badge stacking'), () => { + test('should keep a badge above the next button', async ({ page }) => { + await page.setContent( + ` +
+ + Button + 999+ + + Button +
+ `, + config + ); + + const badgeBox = (await page.locator('#with-badge ion-badge').boundingBox())!; + const nextBox = (await page.locator('#next').boundingBox())!; + + // The area where the badge overflows into the next button + const left = Math.max(badgeBox.x, nextBox.x); + const right = Math.min(badgeBox.x + badgeBox.width, nextBox.x + nextBox.width); + const top = Math.max(badgeBox.y, nextBox.y); + const bottom = Math.min(badgeBox.y + badgeBox.height, nextBox.y + nextBox.height); + expect(right).toBeGreaterThan(left); + expect(bottom).toBeGreaterThan(top); + + const topmost = await page.evaluate( + ([x, y]) => document.elementFromPoint(x, y)?.closest('ion-badge, ion-button')?.tagName, + [(left + right) / 2, (top + bottom) / 2] + ); + expect(topmost).toBe('ION-BADGE'); + }); }); }); diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..bd7ce51cfe4 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..65c4277b0c9 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..8c06b3e7ee2 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..bd12fde9d20 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..5f76c3272c3 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..ec7ae401ffd Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..5e070860194 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..ae2a1c28f63 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..dd73a4b5944 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..8fdf13eac34 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..0432e3fc793 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ios-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..b7c186f0b76 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..c4e06b64a8b Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..efd0eefddc6 Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..cefa049fe6c Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-md-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..46caee4020d Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-md-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..309370a448c Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-md-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..11c55a0c67f Binary files /dev/null and b/core/src/components/button/test/badge/button.e2e.ts-snapshots/button-badge-no-position-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/themes/ionic/default.tokens.ts b/core/src/themes/ionic/default.tokens.ts index 6c8dbc6b93e..c1e1e1975d1 100644 --- a/core/src/themes/ionic/default.tokens.ts +++ b/core/src/themes/ionic/default.tokens.ts @@ -671,6 +671,15 @@ export const defaultTheme: DefaultTheme = { }, }, }, + + badge: { + margin: { + top: 'var(--ion-spacing-0)', + end: 'var(--ion-spacing-0)', + bottom: 'var(--ion-spacing-0)', + start: 'var(--ion-spacing-sm)', + }, + }, }, medium: { @@ -776,6 +785,15 @@ export const defaultTheme: DefaultTheme = { }, }, }, + + badge: { + margin: { + top: 'var(--ion-spacing-0)', + end: 'var(--ion-spacing-0)', + bottom: 'var(--ion-spacing-0)', + start: 'var(--ion-spacing-250)', + }, + }, }, large: { @@ -881,6 +899,15 @@ export const defaultTheme: DefaultTheme = { }, }, }, + + badge: { + margin: { + top: 'var(--ion-spacing-0)', + end: 'var(--ion-spacing-0)', + bottom: 'var(--ion-spacing-0)', + start: 'var(--ion-spacing-md)', + }, + }, }, }, diff --git a/core/src/themes/ios/default.tokens.ts b/core/src/themes/ios/default.tokens.ts index 25f5e7529b9..48cb77a5754 100644 --- a/core/src/themes/ios/default.tokens.ts +++ b/core/src/themes/ios/default.tokens.ts @@ -650,6 +650,15 @@ export const defaultTheme: DefaultTheme = { }, }, }, + + badge: { + margin: { + top: '0', + end: '0', + bottom: '0', + start: 'var(--ion-spacing-xxs)', + }, + }, }, medium: { @@ -740,6 +749,15 @@ export const defaultTheme: DefaultTheme = { }, }, }, + + badge: { + margin: { + top: '0', + end: '0', + bottom: '0', + start: 'var(--ion-spacing-xxs)', + }, + }, }, large: { @@ -830,6 +848,15 @@ export const defaultTheme: DefaultTheme = { }, }, }, + + badge: { + margin: { + top: '0', + end: '0', + bottom: '0', + start: 'var(--ion-spacing-xxs)', + }, + }, }, }, diff --git a/core/src/themes/md/default.tokens.ts b/core/src/themes/md/default.tokens.ts index 018c4456f70..40574bfa7ff 100644 --- a/core/src/themes/md/default.tokens.ts +++ b/core/src/themes/md/default.tokens.ts @@ -699,6 +699,15 @@ export const defaultTheme: DefaultTheme = { }, }, }, + + badge: { + margin: { + top: '0', + end: '0', + bottom: '0', + start: 'var(--ion-spacing-sm)', + }, + }, }, medium: { @@ -791,6 +800,15 @@ export const defaultTheme: DefaultTheme = { }, }, }, + + badge: { + margin: { + top: '0', + end: '0', + bottom: '0', + start: 'var(--ion-spacing-sm)', + }, + }, }, large: { @@ -879,6 +897,15 @@ export const defaultTheme: DefaultTheme = { }, }, }, + + badge: { + margin: { + top: '0', + end: '0', + bottom: '0', + start: 'var(--ion-spacing-md)', + }, + }, }, },