feat(tag): introducing custom icon

packages/components/src/components/tag/_tag.scss

@@ -172,6 +172,22 @@
     }
   }
 
+  .#{$prefix}--tag__custom-icon {
+    flex-shrink: 0;
+    width: rem(16px);
+    height: rem(16px);
+    margin-right: $spacing-02;
+    padding: 0;
+    color: currentColor;
+    background-color: transparent;
+    border: 0;
+    outline: none;
+
+    svg {
+      fill: currentColor;
+    }
+  }
+
   .#{$prefix}--tag--disabled .#{$prefix}--tag__close-icon {
     cursor: not-allowed;
   }

packages/components/src/components/tag/_tokens.scss

@@ -38,15 +38,15 @@ $tag-colors: (
     ),
   ),
   'tag-color-red': (
-    fallback: $carbon__red-70,
+    fallback: $carbon__red-80,
     values: (
       (
         theme: $carbon--theme--white,
-        value: $carbon__red-70,
+        value: $carbon__red-80,
       ),
       (
         theme: $carbon--theme--g10,
-        value: $carbon__red-70,
+        value: $carbon__red-80,
       ),
       (
         theme: $carbon--theme--g90,
@@ -58,7 +58,7 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--v9,
-        value: $carbon__red-70,
+        value: $carbon__red-80,
       ),
     ),
   ),
@@ -115,15 +115,15 @@ $tag-colors: (
     ),
   ),
   'tag-color-magenta': (
-    fallback: $carbon__magenta-70,
+    fallback: $carbon__magenta-80,
     values: (
       (
         theme: $carbon--theme--white,
-        value: $carbon__magenta-70,
+        value: $carbon__magenta-80,
       ),
       (
         theme: $carbon--theme--g10,
-        value: $carbon__magenta-70,
+        value: $carbon__magenta-80,
       ),
       (
         theme: $carbon--theme--g90,
@@ -135,7 +135,7 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--v9,
-        value: $carbon__magenta-70,
+        value: $carbon__magenta-80,
       ),
     ),
   ),
@@ -192,15 +192,15 @@ $tag-colors: (
     ),
   ),
   'tag-color-purple': (
-    fallback: $carbon__purple-70,
+    fallback: $carbon__purple-80,
     values: (
       (
         theme: $carbon--theme--white,
-        value: $carbon__purple-70,
+        value: $carbon__purple-80,
       ),
       (
         theme: $carbon--theme--g10,
-        value: $carbon__purple-70,
+        value: $carbon__purple-80,
       ),
       (
         theme: $carbon--theme--g90,
@@ -212,7 +212,7 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--v9,
-        value: $carbon__purple-70,
+        value: $carbon__purple-80,
       ),
     ),
   ),
@@ -269,15 +269,15 @@ $tag-colors: (
     ),
   ),
   'tag-color-blue': (
-    fallback: $carbon__blue-70,
+    fallback: $carbon__blue-80,
     values: (
       (
         theme: $carbon--theme--white,
-        value: $carbon__blue-70,
+        value: $carbon__blue-80,
       ),
       (
         theme: $carbon--theme--g10,
-        value: $carbon__blue-70,
+        value: $carbon__blue-80,
       ),
       (
         theme: $carbon--theme--g90,
@@ -289,7 +289,7 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--v9,
-        value: $carbon__blue-70,
+        value: $carbon__blue-80,
       ),
     ),
   ),
@@ -346,15 +346,15 @@ $tag-colors: (
     ),
   ),
   'tag-color-cyan': (
-    fallback: $carbon__cyan-70,
+    fallback: $carbon__cyan-80,
     values: (
       (
         theme: $carbon--theme--white,
-        value: $carbon__cyan-70,
+        value: $carbon__cyan-80,
       ),
       (
         theme: $carbon--theme--g10,
-        value: $carbon__cyan-70,
+        value: $carbon__cyan-80,
       ),
       (
         theme: $carbon--theme--g90,
@@ -366,7 +366,7 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--v9,
-        value: $carbon__cyan-70,
+        value: $carbon__cyan-80,
       ),
     ),
   ),
@@ -423,15 +423,15 @@ $tag-colors: (
     ),
   ),
   'tag-color-teal': (
-    fallback: $carbon__teal-70,
+    fallback: $carbon__teal-80,
     values: (
       (
         theme: $carbon--theme--white,
-        value: $carbon__teal-70,
+        value: $carbon__teal-80,
       ),
       (
         theme: $carbon--theme--g10,
-        value: $carbon__teal-70,
+        value: $carbon__teal-80,
       ),
       (
         theme: $carbon--theme--g90,
@@ -443,7 +443,7 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--v9,
-        value: $carbon__teal-70,
+        value: $carbon__teal-80,
       ),
     ),
   ),
@@ -500,15 +500,15 @@ $tag-colors: (
     ),
   ),
   'tag-color-green': (
-    fallback: $carbon__green-70,
+    fallback: $carbon__green-80,
     values: (
       (
         theme: $carbon--theme--white,
-        value: $carbon__green-70,
+        value: $carbon__green-80,
       ),
       (
         theme: $carbon--theme--g10,
-        value: $carbon__green-70,
+        value: $carbon__green-80,
       ),
       (
         theme: $carbon--theme--g90,
@@ -520,7 +520,7 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--v9,
-        value: $carbon__green-70,
+        value: $carbon__green-80,
       ),
     ),
   ),
@@ -577,15 +577,15 @@ $tag-colors: (
     ),
   ),
   'tag-color-gray': (
-    fallback: $carbon__gray-70,
+    fallback: $carbon__gray-80,
     values: (
       (
         theme: $carbon--theme--white,
-        value: $carbon__gray-70,
+        value: $carbon__gray-80,
       ),
       (
         theme: $carbon--theme--g10,
-        value: $carbon__gray-70,
+        value: $carbon__gray-80,
       ),
       (
         theme: $carbon--theme--g90,
@@ -597,7 +597,7 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--v9,
-        value: $carbon__gray-70,
+        value: $carbon__gray-80,
       ),
     ),
   ),
@@ -654,15 +654,15 @@ $tag-colors: (
     ),
   ),
   'tag-color-cool-gray': (
-    fallback: $carbon__cool-gray-70,
+    fallback: $carbon__cool-gray-80,
     values: (
       (
         theme: $carbon--theme--white,
-        value: $carbon__cool-gray-70,
+        value: $carbon__cool-gray-80,
       ),
       (
         theme: $carbon--theme--g10,
-        value: $carbon__cool-gray-70,
+        value: $carbon__cool-gray-80,
       ),
       (
         theme: $carbon--theme--g90,
@@ -674,7 +674,7 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--v9,
-        value: $carbon__cool-gray-70,
+        value: $carbon__cool-gray-80,
       ),
     ),
   ),
@@ -731,15 +731,15 @@ $tag-colors: (
     ),
   ),
   'tag-color-warm-gray': (
-    fallback: $carbon__warm-gray-70,
+    fallback: $carbon__warm-gray-80,
     values: (
       (
         theme: $carbon--theme--white,
-        value: $carbon__warm-gray-70,
+        value: $carbon__warm-gray-80,
       ),
       (
         theme: $carbon--theme--g10,
-        value: $carbon__warm-gray-70,
+        value: $carbon__warm-gray-80,
       ),
       (
         theme: $carbon--theme--g90,
@@ -751,7 +751,7 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--v9,
-        value: $carbon__warm-gray-70,
+        value: $carbon__warm-gray-80,
       ),
     ),
   ),

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -5125,6 +5125,19 @@ Map {
       "onClose": Object {
         "type": "func",
       },
+      "renderIcon": Object {
+        "args": Array [
+          Array [
+            Object {
+              "type": "func",
+            },
+            Object {
+              "type": "object",
+            },
+          ],
+        ],
+        "type": "oneOfType",
+      },
       "title": Object {
         "type": "string",
       },

packages/react/src/components/Tag/Tag-story.js

@@ -7,11 +7,24 @@
 
 import React from 'react';
 import { withKnobs, select, text, boolean } from '@storybook/addon-knobs';
+import { Carbon16, Compass16, Tag16 } from '@carbon/icons-react';
 import Tag, { types as typesList } from '../Tag';
 import TagSkeleton from '../Tag/Tag.Skeleton';
 import { action } from '@storybook/addon-actions/dist/preview';
 import mdx from './Tag.mdx';
 
+const icons = {
+  'Carbon (Carbon16 from `@carbon/icons-react`)': 'Carbon16',
+  'Compass (Compass16 from `@carbon/icons-react`)': 'Compass16',
+  'Tag (Tag16 from `@carbon/icons-react`)': 'Tag16',
+};
+
+const iconMap = {
+  Carbon16,
+  Compass16,
+  Tag16,
+};
+
 const props = {
   regular: () => ({
     type: select(
@@ -36,6 +49,14 @@ const props = {
       onClose: action('onClose'),
     };
   },
+  icon() {
+    return {
+      ...this.regular(),
+      onClick: action('onClick'),
+      onClose: action('onClose'),
+      renderIcon: iconMap[select('Icon (icon)', icons, 'Tag16')],
+    };
+  },
 };
 
 export default {
@@ -85,6 +106,22 @@ Filter.parameters = {
   },
 };
 
+export const CustomIcon = () => (
+  <Tag className="some-class" {...props.icon()}>
+    {text('Content (children)', 'This is a tag')}
+  </Tag>
+);
+
+CustomIcon.parameters = {
+  info: {
+    text: `
+        Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them.
+        The example below shows how the Tag component can be used. Each type has a default message describing the type,
+        but a custom message can also be applied.
+      `,
+  },
+};
+
 export const Skeleton = () => (
   <div>
     <TagSkeleton />