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 <devfabris@gmail.com>
Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>

Author: 3 people

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,
+};

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

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}
     />