From 91f2129ed2fef3eb47c48cce2a5af1a38844f280 Mon Sep 17 00:00:00 2001 From: Sascha Eggenberger Date: Wed, 22 Feb 2023 12:01:02 +0100 Subject: [PATCH] feat(GlBadge): One size fits all BREAKING CHANGE: The `size` prop has been removed from `GlBadge`. This might affect test which check that the prop was provided, but more importantly this could affect layout for badges which were set small or large. --- cypress/e2e/badge.cy.js | 7 --- .../avatar_labeled/avatar_labeled.stories.js | 4 +- src/components/base/badge/badge.scss | 30 +++++------ src/components/base/badge/badge.spec.js | 6 --- src/components/base/badge/badge.stories.js | 48 +++--------------- src/components/base/badge/badge.vue | 25 +++------ src/components/base/button/button.stories.js | 4 +- src/components/base/label/label.scss | 12 +++-- .../disclosure/disclosure_dropdown.stories.js | 8 +-- .../new_dropdowns/listbox/listbox.stories.js | 6 +-- src/components/base/tabs/tabs/tabs.stories.js | 2 +- .../experiment_badge/experiment_badge.spec.js | 2 - .../experiment_badge/experiment_badge.vue | 2 +- src/tokens/tokens_table.vue | 2 +- ...base-avatar-labeled-with-badges-1-snap.png | Bin 18566 -> 18753 bytes ...toryshots-base-badge-badge-icon-1-snap.png | Bin 13668 -> 20205 bytes ...storyshots-base-badge-icon-only-1-snap.png | Bin 11141 -> 10319 bytes ...age-storyshots-base-badge-sizes-1-snap.png | Bin 12089 -> 0 bytes ...-storyshots-base-badge-variants-1-snap.png | Bin 19544 -> 18581 bytes ...-button-badge-with-sr-only-text-1-snap.png | Bin 13718 -> 13720 bytes ...e-storyshots-base-button-badges-1-snap.png | Bin 32705 -> 32686 bytes ...listbox-custom-groups-and-items-1-snap.png | Bin 23221 -> 23422 bytes ...ble-listbox-group-without-label-1-snap.png | Bin 35279 -> 35300 bytes ...ropdown-custom-groups-and-items-1-snap.png | Bin 23409 -> 23643 bytes ...-custom-groups-items-and-toggle-1-snap.png | Bin 34003 -> 34087 bytes ...osure-dropdown-custom-list-item-1-snap.png | Bin 22938 -> 23094 bytes ...s-base-tabs-with-counter-badges-1-snap.png | Bin 21726 -> 22454 bytes ...ental-duo-chat-duo-chat-default-1-snap.png | Bin 56745 -> 56645 bytes ...l-duo-chat-duo-chat-interactive-1-snap.png | Bin 60535 -> 60459 bytes ...imental-duo-chat-duo-chat-slots-1-snap.png | Bin 70670 -> 70543 bytes ...-tokens-color-transparency-gray-1-snap.png | Bin 48156 -> 47915 bytes ...tokens-color-transparency-white-1-snap.png | Bin 50744 -> 49310 bytes ...age-storyshots-tokens-text-dark-1-snap.png | Bin 66532 -> 66113 bytes ...-storyshots-tokens-text-default-1-snap.png | Bin 66519 -> 66179 bytes 34 files changed, 48 insertions(+), 110 deletions(-) delete mode 100644 tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-sizes-1-snap.png diff --git a/cypress/e2e/badge.cy.js b/cypress/e2e/badge.cy.js index 309c39ad8d..364ada1960 100644 --- a/cypress/e2e/badge.cy.js +++ b/cypress/e2e/badge.cy.js @@ -9,12 +9,6 @@ describe('GlBadge', () => { }); } - function checkA11yTextOnlyState() { - cy.visitStory('base/badge', { - story: 'sizes', - }); - } - function checkA11yBadgeHoverState() { cy.visitStory('base/badge', { story: 'actionable', @@ -41,7 +35,6 @@ describe('GlBadge', () => { cy.glRunA11yTests({ checkA11YDefaultState, checkA11yIconOnlyState, - checkA11yTextOnlyState, checkA11yBadgeHoverState, checkA11yBadgeSelectedState, checkA11yIconWithTextState, diff --git a/src/components/base/avatar_labeled/avatar_labeled.stories.js b/src/components/base/avatar_labeled/avatar_labeled.stories.js index 1cf39264c2..3b6b321d19 100644 --- a/src/components/base/avatar_labeled/avatar_labeled.stories.js +++ b/src/components/base/avatar_labeled/avatar_labeled.stories.js @@ -102,10 +102,10 @@ export const WithBadges = (args, { argTypes }) => ({ > diff --git a/src/components/base/badge/badge.scss b/src/components/base/badge/badge.scss index 823365894e..fb97dc46cd 100644 --- a/src/components/base/badge/badge.scss +++ b/src/components/base/badge/badge.scss @@ -1,3 +1,6 @@ +$badge-padding-horizontal: 0.75 * $grid-size; +$badge-min-width: 2.5 * $grid-size; + @mixin gl-badge-variant( $variant, $color, @@ -15,7 +18,6 @@ color: $color; .gl-badge-icon { - color: $icon-color; transition: inherit; } } @@ -66,29 +68,18 @@ .gl-badge { @include gl-display-inline-flex; @include gl-align-items-center; + @include gl-justify-content-center; @include gl-font-sm; @include gl-font-weight-normal; @include gl-line-height-normal; - @include gl-py-2; - @include gl-px-3; + gap: $gl-spacing-scale-2; + padding: $gl-spacing-scale-1 $badge-padding-horizontal; + min-width: $badge-min-width; @media (forced-colors: active) { border: 1px solid; } - &.sm { - @include gl-py-0; - } - - &.md { - @include gl-py-2; - } - - &.lg { - @include gl-py-3; - @include gl-font-base; - } - .gl-badge-icon { @include gl-h-5; @include gl-w-5; @@ -193,4 +184,11 @@ // overriding Bootstap's `.btn .badge {top: -1px}` as the badge is not vertically centered otherwise .gl-button .gl-badge { top: 0; + @include gl-py-0; + @include gl-px-2; +} + +.gl-new-dropdown-contents .gl-badge, +.gl-tab-nav-item .gl-badge { + @include gl-my-n1; } diff --git a/src/components/base/badge/badge.spec.js b/src/components/base/badge/badge.spec.js index 1bc7f06c99..670c0b5cbf 100644 --- a/src/components/base/badge/badge.spec.js +++ b/src/components/base/badge/badge.spec.js @@ -40,12 +40,6 @@ describe('badge', () => { expect(icon.props('name')).toBe(iconName); }); - it('with correct class', () => { - const icon = findIcon(); - - expect(icon.classes('gl-mr-2')).toBe(hasSlot); - }); - it('with correct size', () => { expect(findIcon().props('size')).toBe(expectedIconSize); }); diff --git a/src/components/base/badge/badge.stories.js b/src/components/base/badge/badge.stories.js index 4187954fbe..bc80545a1c 100644 --- a/src/components/base/badge/badge.stories.js +++ b/src/components/base/badge/badge.stories.js @@ -1,9 +1,5 @@ import iconSpriteInfo from '@gitlab/svgs/dist/icons.json'; -import { - badgeSizeOptions, - badgeVariantOptions, - badgeIconSizeOptions, -} from '../../../utils/constants'; +import { badgeVariantOptions, badgeIconSizeOptions } from '../../../utils/constants'; import { disableControls } from '../../../utils/stories_utils'; import GlBadge from './badge.vue'; import readme from './badge.md'; @@ -12,9 +8,8 @@ const template = ` {{ content }} `; @@ -22,14 +17,12 @@ const defaultValue = (prop) => GlBadge.props[prop].default; const generateProps = ({ variant = defaultValue('variant'), - size = defaultValue('size'), href = '', content = 'TestBadge', icon = '', iconSize = defaultValue('iconSize'), } = {}) => ({ variant, - size, href, content, icon, @@ -56,7 +49,6 @@ export const Variants = (args, { argTypes }) => ({ :key="variant" :href="href" :variant="variant" - :size="size" :icon="icon" :iconSize="iconSize" class="gl-mr-3" @@ -80,7 +72,6 @@ export const Actionable = (args, { argTypes }) => ({ :key="variant" :href="href" :variant="variant" - :size="size" :icon="icon" :iconSize="iconSize" class="gl-mr-3" @@ -96,37 +87,15 @@ Actionable.args = generateProps({ Actionable.tags = ['skip-visual-test']; Actionable.argTypes = disableControls(['content', 'variant']); -export const Sizes = (args, { argTypes }) => ({ - components: { GlBadge }, - props: Object.keys(argTypes), - template: ` -
- {{ size }} -
- `, - badgeSizeOptions, -}); -Sizes.args = generateProps({ - variant: badgeVariantOptions.danger, -}); -Sizes.argTypes = disableControls(['content', 'size']); - export const BadgeIcon = (args, { argTypes }) => ({ components: { GlBadge }, props: Object.keys(argTypes), template: `
- 16px icon - 12px icon + With icon + With status open + With status closed + With sm icon
`, }); @@ -140,7 +109,6 @@ export const IconOnly = (args, { argTypes }) => ({ @@ -168,10 +136,6 @@ export default { options: Object.keys(badgeVariantOptions), control: 'select', }, - size: { - options: Object.keys(badgeSizeOptions), - control: 'select', - }, icon: { options: ['', ...iconSpriteInfo.icons], control: 'select', diff --git a/src/components/base/badge/badge.vue b/src/components/base/badge/badge.vue index 2b886a6a89..650e53eab8 100644 --- a/src/components/base/badge/badge.vue +++ b/src/components/base/badge/badge.vue @@ -1,11 +1,7 @@