diff --git a/BREAKING.md b/BREAKING.md index ccf95c999bc..5c7919fdf46 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -64,11 +64,12 @@ The following breaking changes apply to `ion-button`: 7. In `md`, `solid` buttons in an `ion-buttons` outside a toolbar now match standalone buttons, instead of taking the toolbar's dark colors. To keep the previous appearance, set `--ion-button-hue-bold-solid-default-background` to `var(--ion-toolbar-color, var(--ion-text-color, #424242))` and `--ion-button-hue-bold-solid-default-color` to `var(--ion-toolbar-background, var(--ion-background-color, #fff))` on those buttons. 8. The `md` button follows Material Design 2 for its spacing, outline, elevation and disabled state. [8](#version-10x-button-md-material-design-2) 9. The `ios` button follows iOS 17 for its font, icons and disabled state. [9](#version-10x-button-ios-17) -10. CSS variables have been replaced. [10](#version-10x-button-replaced-css-variables) -11. `--padding-*` CSS variables are no longer part of the documented public API (but remain functional). [11](#version-10x-button-padding-variables) -12. The fill, size, shape and expand classes have been renamed. [12](#version-10x-button-renamed-classes) -13. The `default` size has been deprecated. [13](#version-10x-button-deprecated-default-size) -14. Theme classes (`ion-button.md`, `ion-button.ios`) are no longer supported. [14](#version-10x-button-theme-classes) +10. 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`. +11. CSS variables have been replaced. [11](#version-10x-button-replaced-css-variables) +12. `--padding-*` CSS variables are no longer part of the documented public API (but remain functional). [12](#version-10x-button-padding-variables) +13. The fill, size, shape and expand classes have been renamed. [13](#version-10x-button-renamed-classes) +14. The `default` size has been deprecated. [14](#version-10x-button-deprecated-default-size) +15. Theme classes (`ion-button.md`, `ion-button.ios`) are no longer supported. [15](#version-10x-button-theme-classes)
Material Design 2 in md
diff --git a/core/api.txt b/core/api.txt index f40ad119410..ba25217d16d 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..510f1952576 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, added to the negative margin that cancels the button's top padding + * @prop --ion-button-size-small-badge-margin-end: Margin on the side away from the label 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, added to the negative margin that cancels the button's bottom padding + * @prop --ion-button-size-small-badge-margin-start: Gap between the label and 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, added to the negative margin that cancels the button's top padding + * @prop --ion-button-size-medium-badge-margin-end: Margin on the side away from the label 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, added to the negative margin that cancels the button's bottom padding + * @prop --ion-button-size-medium-badge-margin-start: Gap between the label and 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, added to the negative margin that cancels the button's top padding + * @prop --ion-button-size-large-badge-margin-end: Margin on the side away from the label 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, added to the negative margin that cancels the button's bottom padding + * @prop --ion-button-size-large-badge-margin-start: Gap between the label and 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 242374306cc..8f661678e82 100644 --- a/core/src/components/button/button.interface.ts +++ b/core/src/components/button/button.interface.ts @@ -238,6 +238,16 @@ type IonButtonSizeDefinition = { icon?: IonButtonIconDefinition; iconOnly?: IonButtonIconOnlyDefinition; spinner?: IonButtonSpinnerDefinition; + + /** A badge without a `vertical` position, next to the label of a text button */ + badge?: { + /** + * `start` is the gap on the label's side and `end` is the margin on the + * other side. `top` and `bottom` add to the negative margins that cancel + * the button's vertical padding. + */ + margin?: IonMargin; + }; }; type IonButtonShapeDefinition = { diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss index 88340e05960..cb3ae8e8e64 100644 --- a/core/src/components/button/button.scss +++ b/core/src/components/button/button.scss @@ -473,6 +473,42 @@ $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 { overflow: visible; } + +@each $size in $sizes { + // The badge overlaps the vertical padding, so a badge taller than the label doesn't make the button taller than its min height. + // The block margins fall back to 0px because no theme sets them, and calc() needs a unit. + :host(.button-size-#{$size}:not(.button-has-icon-only)) ::slotted(ion-badge:not([vertical])) { + @include mixins.margin( + calc( + var(--ion-button-size-#{$size}-badge-margin-top, 0px) - + var(--padding-top, var(--ion-button-size-#{$size}-padding-top, 0px)) + ), + var(--ion-button-size-#{$size}-badge-margin-end), + calc( + var(--ion-button-size-#{$size}-badge-margin-bottom, 0px) - + var(--padding-bottom, var(--ion-button-size-#{$size}-padding-bottom, 0px)) + ), + var(--ion-button-size-#{$size}-badge-margin-start) + ); + } + + // A badge before the label keeps the gap on the label's side + :host(.button-size-#{$size}:not(.button-has-icon-only)) ::slotted(ion-badge[slot="start"]:not([vertical])) { + @include mixins.margin( + null, + var(--ion-button-size-#{$size}-badge-margin-start), + null, + var(--ion-button-size-#{$size}-badge-margin-end) + ); + } +} diff --git a/core/src/components/button/test/badge/button.e2e.ts b/core/src/components/button/test/badge/button.e2e.ts index 4dfb739d1e8..7288617409f 100644 --- a/core/src/components/button/test/badge/button.e2e.ts +++ b/core/src/components/button/test/badge/button.e2e.ts @@ -83,5 +83,120 @@ 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 buttons = (buttonSize: string, slot = '') => + contents + .flatMap((html) => + ION_BADGE_SIZES.map( + (badgeSize) => ` + Button + ${html} + ` + ) + ) + .join('\n'); + + const rows = ION_BUTTON_SIZES.map( + (buttonSize) => ` +
${buttons(buttonSize)}
+
${buttons(buttonSize, 'slot="start"')}
+ ` + ).join('\n'); + + // A label that wraps keeps the button's vertical padding + const wrapped = ION_BUTTON_SIZES.map( + (buttonSize) => `
+ + Wrapped label + 1 + +
` + ).join('\n'); + + await page.setContent( + ` + + +
+ ${rows} +
${wrapped}
+
+ `, + 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..45ac1d57d2a 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..e4a265b2e7f 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..683dc4b223c 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..49f79328777 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..b924b8e7be8 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..ddc333e844e 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..a861d6f7da4 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..00221dfbd25 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..50264d1e0b5 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..c54c7fd46e1 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..918ac76d9ff 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..0327add32e0 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..6ced68e3cc7 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..63f8cd27124 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..b17cae12dc3 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..888e73df754 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..6897cb7652b 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..9fd5849378a 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 2fd517291c7..f2d789219db 100644 --- a/core/src/themes/ionic/default.tokens.ts +++ b/core/src/themes/ionic/default.tokens.ts @@ -641,6 +641,13 @@ export const defaultTheme: DefaultTheme = { }, }, }, + + badge: { + margin: { + end: 'var(--ion-spacing-0)', + start: 'var(--ion-spacing-sm)', + }, + }, }, medium: { @@ -746,6 +753,13 @@ export const defaultTheme: DefaultTheme = { }, }, }, + + badge: { + margin: { + end: 'var(--ion-spacing-0)', + start: 'var(--ion-spacing-250)', + }, + }, }, large: { @@ -851,6 +865,13 @@ export const defaultTheme: DefaultTheme = { }, }, }, + + badge: { + margin: { + end: '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 961d445d488..4792abebb22 100644 --- a/core/src/themes/ios/default.tokens.ts +++ b/core/src/themes/ios/default.tokens.ts @@ -585,18 +585,18 @@ export const defaultTheme: DefaultTheme = { leading: { margin: { - top: '0', + top: 'var(--ion-spacing-0)', end: '0.2222em', - bottom: '0', - start: '0', + bottom: 'var(--ion-spacing-0)', + start: 'var(--ion-spacing-0)', }, }, trailing: { margin: { - top: '0', - end: '0', - bottom: '0', + top: 'var(--ion-spacing-0)', + end: 'var(--ion-spacing-0)', + bottom: 'var(--ion-spacing-0)', start: '0.2222em', }, }, @@ -650,6 +650,13 @@ export const defaultTheme: DefaultTheme = { }, }, }, + + badge: { + margin: { + end: 'var(--ion-spacing-0)', + start: 'var(--ion-spacing-xxs)', + }, + }, }, medium: { @@ -675,18 +682,18 @@ export const defaultTheme: DefaultTheme = { leading: { margin: { - top: '0', + top: 'var(--ion-spacing-0)', end: '0.2222em', - bottom: '0', - start: '0', + bottom: 'var(--ion-spacing-0)', + start: 'var(--ion-spacing-0)', }, }, trailing: { margin: { - top: '0', - end: '0', - bottom: '0', + top: 'var(--ion-spacing-0)', + end: 'var(--ion-spacing-0)', + bottom: 'var(--ion-spacing-0)', start: '0.2222em', }, }, @@ -740,6 +747,13 @@ export const defaultTheme: DefaultTheme = { }, }, }, + + badge: { + margin: { + end: 'var(--ion-spacing-0)', + start: 'var(--ion-spacing-xxs)', + }, + }, }, large: { @@ -765,18 +779,18 @@ export const defaultTheme: DefaultTheme = { leading: { margin: { - top: '0', + top: 'var(--ion-spacing-0)', end: '0.2222em', - bottom: '0', - start: '0', + bottom: 'var(--ion-spacing-0)', + start: 'var(--ion-spacing-0)', }, }, trailing: { margin: { - top: '0', - end: '0', - bottom: '0', + top: 'var(--ion-spacing-0)', + end: 'var(--ion-spacing-0)', + bottom: 'var(--ion-spacing-0)', start: '0.2222em', }, }, @@ -830,6 +844,13 @@ export const defaultTheme: DefaultTheme = { }, }, }, + + badge: { + margin: { + end: 'var(--ion-spacing-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 8d76df5cb71..acc7e997dd6 100644 --- a/core/src/themes/md/default.tokens.ts +++ b/core/src/themes/md/default.tokens.ts @@ -607,18 +607,18 @@ export const defaultTheme: DefaultTheme = { // The negative margin moves the icon closer to the edge than a label would be leading: { margin: { - top: '0', + top: 'var(--ion-spacing-0)', end: '0.4444em', - bottom: '0', + bottom: 'var(--ion-spacing-0)', start: '-0.2222em', }, }, trailing: { margin: { - top: '0', + top: 'var(--ion-spacing-0)', end: '-0.2222em', - bottom: '0', + bottom: 'var(--ion-spacing-0)', start: '0.4444em', }, }, @@ -669,6 +669,13 @@ export const defaultTheme: DefaultTheme = { }, }, }, + + badge: { + margin: { + end: 'var(--ion-spacing-0)', + start: 'var(--ion-spacing-sm)', + }, + }, }, medium: { @@ -696,18 +703,18 @@ export const defaultTheme: DefaultTheme = { // The negative margin moves the icon closer to the edge than a label would be leading: { margin: { - top: '0', + top: 'var(--ion-spacing-0)', end: '0.4444em', - bottom: '0', + bottom: 'var(--ion-spacing-0)', start: '-0.2222em', }, }, trailing: { margin: { - top: '0', + top: 'var(--ion-spacing-0)', end: '-0.2222em', - bottom: '0', + bottom: 'var(--ion-spacing-0)', start: '0.4444em', }, }, @@ -761,6 +768,13 @@ export const defaultTheme: DefaultTheme = { }, }, }, + + badge: { + margin: { + end: 'var(--ion-spacing-0)', + start: 'var(--ion-spacing-sm)', + }, + }, }, large: { @@ -787,18 +801,18 @@ export const defaultTheme: DefaultTheme = { // The negative margin moves the icon closer to the edge than a label would be leading: { margin: { - top: '0', + top: 'var(--ion-spacing-0)', end: '0.4444em', - bottom: '0', + bottom: 'var(--ion-spacing-0)', start: '-0.2222em', }, }, trailing: { margin: { - top: '0', + top: 'var(--ion-spacing-0)', end: '-0.2222em', - bottom: '0', + bottom: 'var(--ion-spacing-0)', start: '0.4444em', }, }, @@ -849,6 +863,13 @@ export const defaultTheme: DefaultTheme = { }, }, }, + + badge: { + margin: { + end: 'var(--ion-spacing-0)', + start: 'var(--ion-spacing-md)', + }, + }, }, },