feat(tag): add outline variant (#9792)

janhassel · web-flow · commit d02a8e55ccfb · 2021-10-04T14:52:31.000Z
* feat(tag): add outline variant

* chore: run prettier
diff --git a/packages/carbon-react/src/components/Tag/Tag.stories.js b/packages/carbon-react/src/components/Tag/Tag.stories.js
@@ -42,6 +42,30 @@ export const Default = () => {
       <Tag className="some-class" type="gray" size="sm" title="Clear Filter">
         {'Tag content'}
       </Tag>
+      <Tag
+        className="some-class"
+        type="cool-gray"
+        size="sm"
+        title="Clear Filter">
+        {'Tag content'}
+      </Tag>
+      <Tag
+        className="some-class"
+        type="warm-gray"
+        size="sm"
+        title="Clear Filter">
+        {'Tag content'}
+      </Tag>
+      <Tag
+        className="some-class"
+        type="high-contrast"
+        size="sm"
+        title="Clear Filter">
+        {'Tag content'}
+      </Tag>
+      <Tag className="some-class" type="outline" size="sm" title="Clear Filter">
+        {'Tag content'}
+      </Tag>
     </>
   );
 };
diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
@@ -130,6 +130,12 @@
     @include tag-theme($inverse-02, $inverse-01, $inverse-hover-ui);
   }
 
+  .#{$prefix}--tag--outline {
+    @include tag-theme($background, $text-01, $hover-ui);
+
+    box-shadow: inset 0 0 0 1px $inverse-02;
+  }
+
   .#{$prefix}--tag--disabled,
   .#{$prefix}--tag--filter.#{$prefix}--tag--disabled,
   .#{$prefix}--tag--interactive.#{$prefix}--tag--disabled {
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -6040,6 +6040,7 @@ Map {
             "cool-gray",
             "warm-gray",
             "high-contrast",
+            "outline",
           ],
         ],
         "type": "oneOf",
diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
@@ -25,6 +25,7 @@ const TYPES = {
   'cool-gray': 'Cool-Gray',
   'warm-gray': 'Warm-Gray',
   'high-contrast': 'High-Contrast',
+  outline: 'Outline',
 };
 
 const Tag = ({
diff --git a/packages/styles/scss/components/tag/_tag.scss b/packages/styles/scss/components/tag/_tag.scss
@@ -114,6 +114,12 @@
     );
   }
 
+  .#{$prefix}--tag--outline {
+    @include tag-theme($background, $text-primary, $layer-hover);
+
+    box-shadow: inset 0 0 0 1px $background-inverse;
+  }
+
   .#{$prefix}--tag--disabled,
   .#{$prefix}--tag--filter.#{$prefix}--tag--disabled,
   .#{$prefix}--tag--interactive.#{$prefix}--tag--disabled {
