fix: Badge and Tag rendering a span (#208)

Author: tassoevan

packages/fuselage/.loki/reference/chrome_iphone7_Tags_Badges_Badges_Danger.png packages/fuselage/.loki/reference/chrome_iphone7_Data_Display_Badge_Danger.png

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Tag } from '../..';
+import { Tag } from '../Tag';
 
 export function Badge(props) {
-  return <Tag round {...props} />;
+  return <Tag {...props} round />;
 }
 
 Badge.propTypes = {
-  variant: PropTypes.oneOf(['secondary', 'primary', 'danger']),
   disabled: PropTypes.bool,
+  variant: PropTypes.oneOf(['secondary', 'primary', 'danger']),
 };

packages/fuselage/.loki/reference/chrome_iphone7_Tags_Badges_Badges_Default.png packages/fuselage/.loki/reference/chrome_iphone7_Data_Display_Badge_Default.png

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Badge } from '.';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Badge />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

packages/fuselage/.loki/reference/chrome_iphone7_Tags_Badges_Badges_Disabled.png packages/fuselage/.loki/reference/chrome_iphone7_Data_Display_Badge_Disabled.png

@@ -2,11 +2,11 @@ import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
 
 import { Badge } from '../..';
 
-<Meta title='Tags & Badges/Badges' parameters={{ jest: ['Button/spec'] }} />
+<Meta title='Data Display/Badge' parameters={{ jest: ['Badge/spec'] }} />
 
 # Badge
 
-Used for mentions.
+Shows a count.
 
 <Preview>
   <Story name='Default'>

packages/fuselage/.loki/reference/chrome_iphone7_Tags_Badges_Badges_Primary.png packages/fuselage/.loki/reference/chrome_iphone7_Data_Display_Badge_Primary.png

@@ -4,17 +4,15 @@ import PropTypes from 'prop-types';
 import { Box } from '../..';
 
 export function Tag({
-  variant = 'secondary',
   disabled,
-  textStyle = 'micro',
   round,
+  variant = 'secondary',
   onClick,
   ...props
 }) {
   return <Box
-    is='div'
-    textStyle={textStyle}
     componentClassName='rcx-tag'
+    is='span'
     mod-secondary={variant === 'secondary'}
     mod-primary={variant === 'primary'}
     mod-danger={variant === 'danger'}
@@ -28,10 +26,7 @@ export function Tag({
 }
 
 Tag.propTypes = {
-  textStyle: PropTypes.oneOf([
-    'h1', 's1', 's2', 'p1', 'p2', 'c1', 'c2', 'micro',
-  ]),
-  variant: PropTypes.oneOf(['secondary', 'primary', 'danger']),
-  round: PropTypes.bool,
   disabled: PropTypes.bool,
+  round: PropTypes.bool,
+  variant: PropTypes.oneOf(['secondary', 'primary', 'danger']),
 };

packages/fuselage/.loki/reference/chrome_iphone7_Tags_Badges_Tags_Danger.png packages/fuselage/.loki/reference/chrome_iphone7_Data_Display_Tag_Danger.png

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Tag } from '.';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Tag />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

packages/fuselage/.loki/reference/chrome_iphone7_Tags_Badges_Tags_Default.png packages/fuselage/.loki/reference/chrome_iphone7_Data_Display_Tag_Default.png

@@ -2,7 +2,7 @@ import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
 
 import { Tag } from '../..';
 
-<Meta title='Tags & Badges/Tags' parameters={{ jest: ['Button/spec'] }} />
+<Meta title='Data Display/Tag' parameters={{ jest: ['Tag/spec'] }} />
 
 # Tag
 

packages/fuselage/.loki/reference/chrome_iphone7_Tags_Badges_Tags_Disabled.png packages/fuselage/.loki/reference/chrome_iphone7_Data_Display_Tag_Disabled.png

@@ -1,5 +1,6 @@
 @use '../../styles/colors.scss';
 @use '../../styles/lengths.scss';
+@use '../../styles/typography.scss';
 
 $tag-colors-secondary-color: theme('tag-colors-secondary-color', colors.foreground(primary));
 $tag-colors-secondary-background-color: theme('tag-colors-secondary-background-color', colors.primary(100));
@@ -31,6 +32,8 @@ $tag-colors-disabled-background-color: theme('tag-colors-disabled-background-col
 
   border-radius: lengths.border-radius(4);
 
+  @include typography.use-font-scale(micro);
+
   &--secondary {
     color: $tag-colors-secondary-color;
     background-color: $tag-colors-secondary-background-color;