feat(fuselage)!: Remove the ghost variant and the disabled prop from Badge

.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`

packages/fuselage/fuselage.api.md

@@ -200,9 +200,8 @@ export function Badge(input: BadgeProps): JSX.Element;
 // @public (undocumented)
 export type BadgeProps = {
     is?: ElementType<HTMLAttributes<HTMLSpanElement>>;
-    variant?: 'secondary' | 'primary' | 'danger' | 'warning' | 'ghost';
+    variant?: 'secondary' | 'primary' | 'danger' | 'warning';
     small?: boolean;
-    disabled?: boolean;
     className?: string;
     children?: ReactNode;
     title?: string;

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(<Warning />);
     });
-    it('Disabled', () => {
-      render(<Disabled />);
-    });
   });
 
   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(<Badge disabled />);
-    expect(container.querySelector('.rcx-badge--disabled')).toBeInTheDocument();
-  });
 });

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',

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);

packages/fuselage/src/components/Badge/Badge.tsx

@@ -4,9 +4,8 @@ import { prependClassName } from '../../helpers/prependClassName';
 
 export type BadgeProps = {
   is?: ElementType<HTMLAttributes<HTMLSpanElement>>;
-  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(' ');