diff --git a/packages/carbon-react/src/components/Tag/Tag.stories.js b/packages/carbon-react/src/components/Tag/Tag.stories.js index 210cb6c976b6..276852248d96 100644 --- 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 content'} + + {'Tag content'} + + + {'Tag content'} + + + {'Tag content'} + + + {'Tag content'} + ); }; 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 {