fix(tag): define default tag style (#5677)

This change defines the default tag style (color) as specified in #5506. Fixes #5506.
carbon-design-system · Mar 23, 2020 · ffba29a · ffba29a
1 parent fd12e21
commit ffba29a
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 7 deletions.
diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
@@ -18,6 +18,7 @@
   .#{$prefix}--tag {
     @include button-reset($width: false);
     @include type-style('label-01');
+    @include tag-theme($ibm-color__gray-20, $ibm-color__gray-100);
 
     display: inline-flex;
     align-items: center;

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -4786,7 +4786,6 @@ Map {
             "warm-gray",
           ],
         ],
-        "isRequired": true,
         "type": "oneOf",
       },
     },

diff --git a/packages/react/src/components/Tag/Tag-story.js b/packages/react/src/components/Tag/Tag-story.js
@@ -21,9 +21,10 @@ const props = {
           ...acc,
           [`${type} (${type})`]: type,
         }),
-        {}
-      ),
-      'red'
+        {
+          Default: undefined,
+        }
+      )
     ),
     disabled: boolean('Disabled (disabled)', false),
     title: 'Clear Filter',

diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
@@ -39,10 +39,10 @@ const Tag = ({
   ...other
 }) => {
   const tagId = id || `tag-${getInstanceId()}`;
-  const tagClass = `${prefix}--tag--${type}`;
-  const tagClasses = classNames(`${prefix}--tag`, tagClass, className, {
+  const tagClasses = classNames(`${prefix}--tag`, className, {
     [`${prefix}--tag--disabled`]: disabled,
     [`${prefix}--tag--filter`]: filter,
+    [`${prefix}--tag--${type}`]: type,
   });
   const handleClose = event => {
     event.stopPropagation();
@@ -90,7 +90,7 @@ Tag.propTypes = {
   /**
    * Specify the type of the <Tag>
    */
-  type: PropTypes.oneOf(Object.keys(TYPES)).isRequired,
+  type: PropTypes.oneOf(Object.keys(TYPES)),
 
   /**
    * Specify if the <Tag> is disabled