feat: Remove Box dependence from Tag and Badge components (#315)

packages/fuselage/src/components/Badge/Badge.stories.mdx

 import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs/blocks';
 
-import { Badge } from '../..';
+import { Badge, Box } from '../..';
 
 <Meta title='Data Display/Badge' parameters={{ jest: ['Badge/spec'] }} />
 
@@ -10,7 +10,7 @@ Shows a count.
 
 <Canvas>
   <Story name='Default'>
-    <Badge>99</Badge>
+    <Box display='inline-flex'><Badge>99</Badge></Box>
   </Story>
 </Canvas>
 
@@ -20,7 +20,7 @@ Shows a count.
 
 <Canvas>
   <Story name='Primary'>
-    <Badge variant='primary'>99</Badge>
+    <Box display='inline-flex'><Badge variant='primary'>99</Badge></Box>
   </Story>
 </Canvas>
 
@@ -28,7 +28,7 @@ Shows a count.
 
 <Canvas>
   <Story name='Danger'>
-    <Badge variant='danger'>99</Badge>
+    <Box display='inline-flex'><Badge variant='danger'>99</Badge></Box>
   </Story>
 </Canvas>
 
@@ -36,7 +36,7 @@ Shows a count.
 
 <Canvas>
   <Story name='Warning'>
-    <Badge variant='warning'>99</Badge>
+    <Box display='inline-flex'><Badge variant='warning'>99</Badge></Box>
   </Story>
 </Canvas>
 
@@ -44,6 +44,6 @@ Shows a count.
 
 <Canvas>
   <Story name='Disabled'>
-    <Badge disabled>99</Badge>
+    <Box display='inline-flex'><Badge disabled>99</Badge></Box>
   </Story>
 </Canvas>

packages/fuselage/src/components/Badge/index.js

 import PropTypes from 'prop-types';
 import React from 'react';
 
-import { Tag } from '../Tag';
+import { prependClassName } from '../../helpers/prependClassName';
 
-export function Badge(props) {
-  return <Tag {...props} round />;
+export function Badge({
+  is: Tag = 'span',
+  variant = 'secondary',
+  className,
+  disabled,
+  ...props
+}) {
+  return (
+    <Tag
+      className={
+        prependClassName(
+          className,
+          `rcx-box rcx-box--full rcx-badge ${ disabled ? 'rcx-badge--disabled' : '' } rcx-badge--${ variant }`,
+        )
+      }
+      {...props}
+    />
+  );
 }
 
 Badge.propTypes = {

packages/fuselage/src/components/Badge/styles.scss

+@use '../../styles/colors.scss';
+@use '../../styles/lengths.scss';
+@use '../../styles/typography.scss';
+
+$badge-colors-secondary-color: theme('badge-colors-secondary-color', colors.foreground(primary));
+$badge-colors-secondary-background-color: theme('badge-colors-secondary-background-color', colors.primary(100));
+
+$badge-colors-primary-color: theme('badge-colors-primary-color', colors.foreground(alternative));
+$badge-colors-primary-background-color: theme('badge-colors-primary-background-color', colors.primary(500));
+
+$badge-colors-danger-color: theme('badge-colors-danger-color', colors.foreground(alternative));
+$badge-colors-danger-background-color: theme('badge-colors-danger-background-color', colors.danger(500));
+
+$badge-colors-ghost-color: theme('badge-colors-ghost-color', colors.foreground(alternative));
+$badge-colors-ghost-background-color: theme('badge-colors-ghost-background-color', colors.neutral(700));
+
+$badge-colors-warning-color: theme('badge-colors-warning-color', colors.foreground(alternative));
+$badge-colors-warning-background-color: theme('badge-colors-warning-background-color', colors.warning-alternative(500));
+
+$badge-colors-disabled-color: theme('badge-colors-disabled-color', colors.foreground(hint));
+$badge-colors-disabled-background-color: theme('badge-colors-disabled-background-color', colors.neutral(400));
+
+.rcx-badge {
+  display: flex;
+  overflow: hidden;
+
+  width: fit-content;
+  min-width: lengths.size(16);
+
+  padding:
+    lengths.padding(2)
+    lengths.padding(4);
+
+  text-align: center;
+
+  white-space: nowrap;
+
+  text-decoration: none;
+  text-overflow: ellipsis;
+
+  word-break: keep-all;
+
+  border-radius: lengths.border-radius(full);
+
+  @include typography.use-font-scale(micro);
+
+  &--secondary {
+    color: $badge-colors-secondary-color;
+    background-color: $badge-colors-secondary-background-color;
+  }
+
+  &--primary {
+    color: $badge-colors-primary-color;
+    background-color: $badge-colors-primary-background-color;
+  }
+
+  &--danger {
+    color: $badge-colors-danger-color;
+    background-color: $badge-colors-danger-background-color;
+  }
+
+  &--warning {
+    color: $badge-colors-warning-color;
+    background-color: $badge-colors-warning-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;
+  }
+}

packages/fuselage/src/components/Tag/Tag.stories.mdx

 import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs/blocks';
 
-import { Tag } from '../..';
+import { Tag, Box } from '../..';
 
 <Meta title='Data Display/Tag' parameters={{ jest: ['Tag/spec'] }} />
 
@@ -10,7 +10,7 @@ Used for mentions.
 
 <Canvas>
   <Story name='Default'>
-    <Tag>john.doe</Tag>
+    <Box display='inline-flex'><Tag>john.doe</Tag></Box>
   </Story>
 </Canvas>
 
@@ -20,7 +20,7 @@ Used for mentions.
 
 <Canvas>
   <Story name='Pointer'>
-    <Tag onClick={() => {}}>john.doe</Tag>
+    <Box display='inline-flex'><Tag onClick={() => {}}>john.doe</Tag></Box>
   </Story>
 </Canvas>
 
@@ -28,7 +28,7 @@ Used for mentions.
 
 <Canvas>
   <Story name='Primary'>
-    <Tag variant='primary'>john.doe</Tag>
+    <Box display='inline-flex'><Tag variant='primary'>john.doe</Tag></Box>
   </Story>
 </Canvas>
 
@@ -36,7 +36,7 @@ Used for mentions.
 
 <Canvas>
   <Story name='Danger'>
-    <Tag variant='danger'>john.doe</Tag>
+    <Box display='inline-flex'><Tag variant='danger'>john.doe</Tag></Box>
   </Story>
 </Canvas>
 
@@ -44,7 +44,7 @@ Used for mentions.
 
 <Canvas>
   <Story name='Warning'>
-    <Tag variant='warning'>john.doe</Tag>
+    <Box display='inline-flex'><Tag variant='warning'>john.doe</Tag></Box>
   </Story>
 </Canvas>
 
@@ -52,7 +52,7 @@ Used for mentions.
 
 <Canvas>
   <Story name='Ghost'>
-    <Tag variant='ghost'>john.doe</Tag>
+    <Box display='inline-flex'><Tag variant='ghost'>john.doe</Tag></Box>
   </Story>
 </Canvas>
 
@@ -60,6 +60,6 @@ Used for mentions.
 
 <Canvas>
   <Story name='Disabled'>
-    <Tag disabled>john.doe</Tag>
+    <Box display='inline-flex'><Tag disabled>john.doe</Tag></Box>
   </Story>
 </Canvas>

packages/fuselage/src/components/Tag/index.js

+
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import { Box } from '../..';
+import { prependClassName } from '../../helpers/prependClassName';
 
 export function Tag({
+  is: TagName = 'span',
+  small,
+  medium,
+  className,
   disabled,
-  round,
-  variant = 'secondary',
   onClick,
+  variant = 'secondary',
   ...props
 }) {
-  return <Box
-    is='span'
-    rcx-tag
-    rcx-tag--warning={variant === 'warning'}
-    rcx-tag--secondary={variant === 'secondary'}
-    rcx-tag--primary={variant === 'primary'}
-    rcx-tag--danger={variant === 'danger'}
-    rcx-tag--ghost={variant === 'ghost'}
-    rcx-tag--disabled={!!disabled}
-    rcx-tag--round={!!round}
-    rcx-tag--clickable={!!onClick}
-    onClick={onClick}
-    {...props}
-  />;
+  const modifiers = [
+    variant,
+    small && 'small',
+    medium && 'medium',
+    disabled && 'disabled',
+    onClick && 'clickable',
+  ]
+    .map((modifier) => `rcx-tag--${ modifier }`)
+    .filter(Boolean)
+    .join(' ');
+
+  return <TagName className={prependClassName(className, `rcx-tag ${ modifiers }`)} {...props} />;
 }
 
 Tag.propTypes = {
+  small: PropTypes.bool,
+  medium: PropTypes.bool,
   disabled: PropTypes.bool,
-  round: PropTypes.bool,
+  onClick: PropTypes.func,
   variant: PropTypes.oneOf(['secondary', 'primary', 'danger', 'warning', 'ghost']),
 };

packages/fuselage/src/components/Tag/styles.scss

@@ -71,15 +71,13 @@ $tag-colors-disabled-background-color: theme('tag-colors-disabled-background-col
     background-color: $tag-colors-disabled-background-color;
   }
 
-  &--round {
-    overflow: hidden;
-
-    text-align: center;
-
-    border-radius: lengths.border-radius(full);
+  &--small {
+    @include typography.use-font-scale(c2);
   }
 
-  &--clickable {
-    @include clickable();
+  @include clickable();
+
+  &--medium {
+    @include typography.use-font-scale(p2);
   }
 }

packages/fuselage/src/components/index.scss

 @import './Accordion/styles.scss';
 @import './AutoComplete/styles.scss';
 @import './Avatar/styles.scss';
+@import './Badge/styles.scss';
 @import './Box/styles.scss';
 @import './Button/styles.scss';
 @import './ButtonGroup/styles.scss';