From dccf79565de90cc307eb432a521e7a7e8e8a0c37 Mon Sep 17 00:00:00 2001
From: Jan Hassel <jan.hassel@ibm.com>
Date: Mon, 4 Oct 2021 09:41:04 +0200
Subject: [PATCH] feat(tag): add outline variant

---
 .../carbon-react/src/components/Tag/Tag.stories.js   | 12 ++++++++++++
 packages/components/src/components/tag/_tag.scss     |  6 ++++++
 .../__tests__/__snapshots__/PublicAPI-test.js.snap   |  1 +
 packages/react/src/components/Tag/Tag.js             |  1 +
 packages/styles/scss/components/tag/_tag.scss        |  6 ++++++
 5 files changed, 26 insertions(+)

diff --git a/packages/carbon-react/src/components/Tag/Tag.stories.js b/packages/carbon-react/src/components/Tag/Tag.stories.js
index 210cb6c976b6..40083bcdb984 100644
--- a/packages/carbon-react/src/components/Tag/Tag.stories.js
+++ b/packages/carbon-react/src/components/Tag/Tag.stories.js
@@ -42,6 +42,18 @@ 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
index aebc18cc0c7e..d3e37e74e4d1 100644
--- 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
index 41704553c0ba..3b5291ca8ca5 100644
--- 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
index a9bb8b5ff47e..bba6f9ae81f7 100644
--- 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
index afae0067527d..cc599c9c91ab 100644
--- 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 {