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

RocketChat · Apr 22, 2020 · d8a5ed2 · d8a5ed2
1 parent ca620a0
commit d8a5ed2
Show file tree

Hide file tree

Showing 27 changed files with 33 additions and 15 deletions.
diff --git a/...ome_iphone7_Tags_Badges_Badges_Danger.png → ...ome_iphone7_Data_Display_Badge_Danger.png b/...ome_iphone7_Tags_Badges_Badges_Danger.png → ...ome_iphone7_Data_Display_Badge_Danger.png
diff --git a/...me_iphone7_Tags_Badges_Badges_Default.png → ...me_iphone7_Data_Display_Badge_Default.png b/...me_iphone7_Tags_Badges_Badges_Default.png → ...me_iphone7_Data_Display_Badge_Default.png
diff --git a/...e_iphone7_Tags_Badges_Badges_Disabled.png → ...e_iphone7_Data_Display_Badge_Disabled.png b/...e_iphone7_Tags_Badges_Badges_Disabled.png → ...e_iphone7_Data_Display_Badge_Disabled.png
diff --git a/...me_iphone7_Tags_Badges_Badges_Primary.png → ...me_iphone7_Data_Display_Badge_Primary.png b/...me_iphone7_Tags_Badges_Badges_Primary.png → ...me_iphone7_Data_Display_Badge_Primary.png
diff --git a/...hrome_iphone7_Tags_Badges_Tags_Danger.png → ...hrome_iphone7_Data_Display_Tag_Danger.png b/...hrome_iphone7_Tags_Badges_Tags_Danger.png → ...hrome_iphone7_Data_Display_Tag_Danger.png
diff --git a/...rome_iphone7_Tags_Badges_Tags_Default.png → ...rome_iphone7_Data_Display_Tag_Default.png b/...rome_iphone7_Tags_Badges_Tags_Default.png → ...rome_iphone7_Data_Display_Tag_Default.png
diff --git a/...ome_iphone7_Tags_Badges_Tags_Disabled.png → ...ome_iphone7_Data_Display_Tag_Disabled.png b/...ome_iphone7_Tags_Badges_Tags_Disabled.png → ...ome_iphone7_Data_Display_Tag_Disabled.png
diff --git a/...chrome_iphone7_Tags_Badges_Tags_Ghost.png → ...chrome_iphone7_Data_Display_Tag_Ghost.png b/...chrome_iphone7_Tags_Badges_Tags_Ghost.png → ...chrome_iphone7_Data_Display_Tag_Ghost.png
diff --git a/...rome_iphone7_Tags_Badges_Tags_Pointer.png → ...rome_iphone7_Data_Display_Tag_Pointer.png b/...rome_iphone7_Tags_Badges_Tags_Pointer.png → ...rome_iphone7_Data_Display_Tag_Pointer.png
diff --git a/...rome_iphone7_Tags_Badges_Tags_Primary.png → ...rome_iphone7_Data_Display_Tag_Primary.png b/...rome_iphone7_Tags_Badges_Tags_Primary.png → ...rome_iphone7_Data_Display_Tag_Primary.png
diff --git a/...rome_laptop_Tags_Badges_Badges_Danger.png → ...rome_laptop_Data_Display_Badge_Danger.png b/...rome_laptop_Tags_Badges_Badges_Danger.png → ...rome_laptop_Data_Display_Badge_Danger.png
diff --git a/...ome_laptop_Tags_Badges_Badges_Default.png → ...ome_laptop_Data_Display_Badge_Default.png b/...ome_laptop_Tags_Badges_Badges_Default.png → ...ome_laptop_Data_Display_Badge_Default.png
diff --git a/...me_laptop_Tags_Badges_Badges_Disabled.png → ...me_laptop_Data_Display_Badge_Disabled.png b/...me_laptop_Tags_Badges_Badges_Disabled.png → ...me_laptop_Data_Display_Badge_Disabled.png
diff --git a/...ome_laptop_Tags_Badges_Badges_Primary.png → ...ome_laptop_Data_Display_Badge_Primary.png b/...ome_laptop_Tags_Badges_Badges_Primary.png → ...ome_laptop_Data_Display_Badge_Primary.png
diff --git a/...chrome_laptop_Tags_Badges_Tags_Danger.png → ...chrome_laptop_Data_Display_Tag_Danger.png b/...chrome_laptop_Tags_Badges_Tags_Danger.png → ...chrome_laptop_Data_Display_Tag_Danger.png
diff --git a/...hrome_laptop_Tags_Badges_Tags_Default.png → ...hrome_laptop_Data_Display_Tag_Default.png b/...hrome_laptop_Tags_Badges_Tags_Default.png → ...hrome_laptop_Data_Display_Tag_Default.png
diff --git a/...rome_laptop_Tags_Badges_Tags_Disabled.png → ...rome_laptop_Data_Display_Tag_Disabled.png b/...rome_laptop_Tags_Badges_Tags_Disabled.png → ...rome_laptop_Data_Display_Tag_Disabled.png
diff --git a/.../chrome_laptop_Tags_Badges_Tags_Ghost.png → .../chrome_laptop_Data_Display_Tag_Ghost.png b/.../chrome_laptop_Tags_Badges_Tags_Ghost.png → .../chrome_laptop_Data_Display_Tag_Ghost.png
diff --git a/...hrome_laptop_Tags_Badges_Tags_Pointer.png → ...hrome_laptop_Data_Display_Tag_Pointer.png b/...hrome_laptop_Tags_Badges_Tags_Pointer.png → ...hrome_laptop_Data_Display_Tag_Pointer.png
diff --git a/...hrome_laptop_Tags_Badges_Tags_Primary.png → ...hrome_laptop_Data_Display_Tag_Primary.png b/...hrome_laptop_Tags_Badges_Tags_Primary.png → ...hrome_laptop_Data_Display_Tag_Primary.png
diff --git a/packages/fuselage/src/components/Badge/index.js b/packages/fuselage/src/components/Badge/index.js
@@ -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']),
 };
diff --git a/packages/fuselage/src/components/Badge/spec.js b/packages/fuselage/src/components/Badge/spec.js
@@ -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);
+});
diff --git a/packages/fuselage/src/components/Badge/stories.mdx b/packages/fuselage/src/components/Badge/stories.mdx
@@ -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'>

diff --git a/packages/fuselage/src/components/Tag/index.js b/packages/fuselage/src/components/Tag/index.js
@@ -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']),
 };
diff --git a/packages/fuselage/src/components/Tag/spec.js b/packages/fuselage/src/components/Tag/spec.js
@@ -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);
+});
diff --git a/packages/fuselage/src/components/Tag/stories.mdx b/packages/fuselage/src/components/Tag/stories.mdx
@@ -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
 

diff --git a/packages/fuselage/src/components/Tag/styles.scss b/packages/fuselage/src/components/Tag/styles.scss
@@ -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;