diff --git a/.changeset/remove-ghost-badge-variant.md b/.changeset/remove-ghost-badge-variant.md new file mode 100644 index 0000000000..a25679a2c7 --- /dev/null +++ b/.changeset/remove-ghost-badge-variant.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/fuselage': minor +--- + +feat(fuselage)!: Remove the `ghost` variant and the `disabled` prop from `Badge` diff --git a/packages/fuselage/fuselage.api.md b/packages/fuselage/fuselage.api.md index 687d0159ea..f946cc6d59 100644 --- a/packages/fuselage/fuselage.api.md +++ b/packages/fuselage/fuselage.api.md @@ -200,9 +200,8 @@ export function Badge(input: BadgeProps): JSX.Element; // @public (undocumented) export type BadgeProps = { is?: ElementType>; - variant?: 'secondary' | 'primary' | 'danger' | 'warning' | 'ghost'; + variant?: 'secondary' | 'primary' | 'danger' | 'warning'; small?: boolean; - disabled?: boolean; className?: string; children?: ReactNode; title?: string; diff --git a/packages/fuselage/src/components/Badge/Badge.spec.tsx b/packages/fuselage/src/components/Badge/Badge.spec.tsx index 26901e195a..45b5b66f0d 100644 --- a/packages/fuselage/src/components/Badge/Badge.spec.tsx +++ b/packages/fuselage/src/components/Badge/Badge.spec.tsx @@ -6,7 +6,7 @@ import { render } from '../../testing'; import Badge from './Badge'; import * as stories from './Badge.stories'; -const { Default, Primary, Secondary, Danger, Warning, Disabled } = +const { Default, Primary, Secondary, Danger, Warning } = composeStories(stories); describe('[Badge Component]', () => { @@ -26,9 +26,6 @@ describe('[Badge Component]', () => { it('Warning', () => { render(); }); - it('Disabled', () => { - render(); - }); }); it('should display children', () => { @@ -51,9 +48,4 @@ describe('[Badge Component]', () => { const badgeTitle = container.querySelector('span'); expect(badgeTitle?.getAttribute('title')).toEqual('test-title'); }); - - it('should have disabled class if it has the disabled property', () => { - const { container } = render(); - expect(container.querySelector('.rcx-badge--disabled')).toBeInTheDocument(); - }); }); diff --git a/packages/fuselage/src/components/Badge/Badge.stories.tsx b/packages/fuselage/src/components/Badge/Badge.stories.tsx index 0a86710fd0..43344dff2a 100644 --- a/packages/fuselage/src/components/Badge/Badge.stories.tsx +++ b/packages/fuselage/src/components/Badge/Badge.stories.tsx @@ -32,7 +32,7 @@ export default { }, variant: { control: 'select', - options: ['secondary', 'primary', 'danger', 'warning', 'ghost'], + options: ['secondary', 'primary', 'danger', 'warning'], description: 'Color kind of the badge.', table: { category: 'Kind', defaultValue: { summary: 'secondary' } }, }, @@ -41,11 +41,6 @@ export default { description: 'Renders the badge in a smaller size.', table: { category: 'Size' }, }, - disabled: { - control: 'boolean', - description: 'Applies the disabled visual style.', - table: { category: 'State' }, - }, is: { control: false, description: 'Underlying element or component rendered.', @@ -87,12 +82,6 @@ export const Warning: Story = { }, }; -export const Disabled: Story = { - args: { - disabled: true, - }, -}; - export const WithValue: Story = { args: { children: '99', diff --git a/packages/fuselage/src/components/Badge/Badge.styles.scss b/packages/fuselage/src/components/Badge/Badge.styles.scss index 6a4fd9cd2a..10c91715a0 100644 --- a/packages/fuselage/src/components/Badge/Badge.styles.scss +++ b/packages/fuselage/src/components/Badge/Badge.styles.scss @@ -39,23 +39,6 @@ $badge-colors-danger-background-color: theme( colors.badge(level-4) ); -$badge-colors-ghost-color: theme( - 'badge-colors-ghost-color', - colors.font(pure-white) -); -$badge-colors-ghost-background-color: theme( - 'badge-colors-ghost-background-color', - colors.stroke(dark) -); - -$badge-colors-disabled-color: theme( - 'badge-colors-disabled-color', - colors.font(secondary-info) -); -$badge-colors-disabled-background-color: theme( - 'badge-colors-disabled-background-color', - colors.surface(neutral) -); $badge-border-radius: theme('badge-border-radius', lengths.border-radius(full)); .rcx-badge { @@ -102,16 +85,6 @@ $badge-border-radius: theme('badge-border-radius', lengths.border-radius(full)); background-color: $badge-colors-danger-background-color; } - &--ghost { - color: $badge-colors-ghost-color; - background-color: $badge-colors-ghost-background-color; - } - - &--disabled { - color: $badge-colors-disabled-color; - background-color: $badge-colors-disabled-background-color; - } - &--small { min-width: lengths.size(8); min-height: lengths.size(8); diff --git a/packages/fuselage/src/components/Badge/Badge.tsx b/packages/fuselage/src/components/Badge/Badge.tsx index 44cefcea84..aac16a60f9 100644 --- a/packages/fuselage/src/components/Badge/Badge.tsx +++ b/packages/fuselage/src/components/Badge/Badge.tsx @@ -4,9 +4,8 @@ import { prependClassName } from '../../helpers/prependClassName'; export type BadgeProps = { is?: ElementType>; - variant?: 'secondary' | 'primary' | 'danger' | 'warning' | 'ghost'; + variant?: 'secondary' | 'primary' | 'danger' | 'warning'; small?: boolean; - disabled?: boolean; className?: string; children?: ReactNode; title?: string; @@ -20,10 +19,9 @@ function Badge({ variant = 'secondary', small, className, - disabled, ...props }: BadgeProps) { - const modifiers = [variant, small && 'small', disabled && 'disabled'] + const modifiers = [variant, small && 'small'] .filter(Boolean) .map((modifier) => `rcx-badge--${modifier}`) .join(' '); diff --git a/packages/fuselage/test/snapshots/data-display-badge--disabled-desktop.png b/packages/fuselage/test/snapshots/data-display-badge--disabled-desktop.png deleted file mode 100644 index f96d5b9d69..0000000000 Binary files a/packages/fuselage/test/snapshots/data-display-badge--disabled-desktop.png and /dev/null differ