feat(fuselage): Empty Badge and small variants (#876)

* feat: ✨ Create badge small variant Created a smaller variant for the Badge component that will, initially, be used in the Rocket Chat marketplace. * Introduce separate small prop * fix: review * fix review Co-authored-by: dougfabris <[email protected]> Co-authored-by: Tasso Evangelista <[email protected]>
RocketChat · Oct 27, 2022 · 16bff6d · 16bff6d
1 parent a16a786
commit 16bff6d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git a/packages/fuselage/src/components/Badge/Badge.stories.tsx b/packages/fuselage/src/components/Badge/Badge.stories.tsx
@@ -36,7 +36,7 @@ export default {
 
 const Template: ComponentStory<typeof Badge> = (args) => (
   <Box display='inline-flex'>
-    <Badge {...args}>99</Badge>
+    <Badge {...args} />
   </Box>
 );
 
@@ -66,3 +66,16 @@ export const Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,
 };
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+  children: '99',
+  variant: 'primary',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  children: '',
+  variant: 'primary',
+  small: true,
+};
diff --git a/packages/fuselage/src/components/Badge/Badge.styles.scss b/packages/fuselage/src/components/Badge/Badge.styles.scss
@@ -63,6 +63,7 @@ $badge-colors-disabled-background-color: theme(
 
   width: fit-content;
   min-width: lengths.size(16);
+  min-height: lengths.size(16);
 
   padding: lengths.padding(2) lengths.padding(4);
 
@@ -108,4 +109,9 @@ $badge-colors-disabled-background-color: theme(
     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
@@ -6,6 +6,7 @@ import { prependClassName } from '../../helpers/prependClassName';
 export type BadgeProps = {
   is?: ElementType;
   variant?: 'secondary' | 'primary' | 'danger' | 'warning' | 'ghost';
+  small?: boolean;
   disabled?: boolean;
   className?: string;
   children?: any;
@@ -15,17 +16,21 @@ export type BadgeProps = {
 export function Badge({
   is: Tag = 'span',
   variant = 'secondary',
+  small,
   className,
   disabled,
   ...props
 }: BadgeProps) {
+  const modifiers = [variant, small && 'small', disabled && 'disabled']
+    .filter(Boolean)
+    .map((modifier) => `rcx-badge--${modifier}`)
+    .join(' ');
+
   return (
     <Tag
       className={prependClassName(
         className,
-        `rcx-box rcx-box--full rcx-badge ${
-          disabled ? 'rcx-badge--disabled' : ''
-        } rcx-badge--${variant}`
+        `rcx-box rcx-box--full rcx-badge ${modifiers}`
       )}
       {...props}
     />