feat(Tag): adds condensed mode.

8base · Oct 23, 2019 · 436b147 · 436b147
1 parent 874696f
commit 436b147
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 2 deletions.
diff --git a/e2e/__tests__/__image_snapshots__/tag-test-js-components-tag-condensed-1-snap.png b/e2e/__tests__/__image_snapshots__/tag-test-js-components-tag-condensed-1-snap.png
diff --git a/e2e/__tests__/tag.test.js b/e2e/__tests__/tag.test.js
@@ -4,6 +4,7 @@ import { baisy } from '../setup/TestSuiter';
 const SUITES = [
   baisy.suite('Components/Tag', 'common'),
   baisy.suite('Components/Tag', 'with large content'),
+  baisy.suite('Components/Tag', 'condensed'),
 ];
 
 

diff --git a/src/components/Tag/Tag.js b/src/components/Tag/Tag.js
@@ -9,10 +9,11 @@ type TagProps = {
   children?: React$Node,
   /** tag background color */
   color?: string,
+  condensed?: boolean,
 };
 
-const Tag = ({ children, ...rest }: TagProps) => (
-  <TagOuter { ...rest } tagName="span">
+const Tag = ({ children, condensed = false, ...rest }: TagProps) => (
+  <TagOuter condensed={ condensed } { ...rest } tagName="span">
     <TagInner tagName="span">{ children }</TagInner>
   </TagOuter>
 );

diff --git a/src/components/Tag/Tag.stories.js b/src/components/Tag/Tag.stories.js
@@ -38,3 +38,22 @@ export const withLargeContent = () => (
 withLargeContent.story = {
   name: 'with large content',
 };
+
+export const condensed = () => (
+  <Column>
+    <Tag condensed>Content</Tag>
+    <Tag condensed color="GRAY_50">Content</Tag>
+    <Tag condensed color="GRAY_40">Content</Tag>
+    <Tag condensed color="YELLOW_30">Content</Tag>
+    <Tag condensed color="PURPLE_10">Content</Tag>
+    <Tag condensed color="BLUE_10">Content</Tag>
+    <Tag condensed color="BLUE_20">Content</Tag>
+    <Tag condensed color="BLUE_30">Content</Tag>
+    <Tag condensed color="BLUE_40">Content</Tag>
+    <Tag condensed color="GREEN_40">Content</Tag>
+  </Column>
+);
+
+condensed.story = {
+  name: 'condensed tag',
+};
diff --git a/src/components/Tag/Tag.theme.js b/src/components/Tag/Tag.theme.js
@@ -28,6 +28,10 @@ const [TagOuter, themeOuter] = createThemeTag(name, ({ COLORS, FONTS }: *): * =>
         color,
       } : null)
       , COLORS),
+    condensed: {
+      borderRadius: '5px',
+      minHeight: '16px',
+    },
   },
 }));