fix(tag): set vertical alignment (#7927)

* fix(tag): set vertical alignment * docs(Tag): add test story Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 2, 2021 · c376cff · c376cff
1 parent 69d79ef
commit c376cff
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
@@ -36,6 +36,7 @@
     min-height: rem(24px);
     margin: $carbon--spacing-02;
     padding: $carbon--spacing-02 $carbon--spacing-03;
+    vertical-align: middle;
     word-break: break-word;
     border-radius: rem(15px);
     cursor: default;

diff --git a/packages/react/src/components/Tag/Tag-story.js b/packages/react/src/components/Tag/Tag-story.js
@@ -94,6 +94,19 @@ _Default.parameters = {
   },
 };
 
+export const VerticalAlignment = () => (
+  <>
+    <Tag type="gray">Tag 1</Tag>
+    <Tag type="gray" renderIcon={Compass16}>
+      Tag 2
+    </Tag>
+    <Tag type="gray" filter>
+      Tag 3
+    </Tag>
+    <Tag type="gray">Tag 3</Tag>
+  </>
+);
+
 export const Filter = () => (
   <Tag className="some-class" {...props.filter()} filter>
     {text('Content (children)', 'This is a tag')}