feat(tag): introducing custom icon (#7262)

* feat(tag): introducing custom icon * feat(tag): add test * feat(tag): fixed variable name * feat(tag): improving design based on feedback * feat(tag): removed unecessary icon import * feat(tag): added custom icon knob to story * feat(tag): fixed spacing on imports * feat(tag): removed redundant boolean * Update packages/react/src/components/Tag/Tag-test.js Co-authored-by: TJ Egan <tw15egan@gmail.com> * Update packages/react/src/components/Tag/Tag.js Co-authored-by: TJ Egan <tw15egan@gmail.com> * chore(snapshot): update snapshots, run prettier * feat(tag): refactored nested ternary * feat(tag): reformatted conditionals * feat(tag): refactored icon rendering code * feat(tag): ran formatter * feat(tag): removed inner span's ...other options Co-authored-by: TJ Egan <tw15egan@gmail.com> Co-authored-by: Josh Black <josh@josh.black>
carbon-design-system · Jan 20, 2021 · 31e19ca · 31e19ca
1 parent 83ecc8d
commit 31e19ca
Show file tree

Hide file tree

Showing 7 changed files with 152 additions and 46 deletions.
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -5989,6 +5989,7 @@ $spacing-02: $carbon--spacing-02;
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
   - [modal [mixin]](#modal-mixin)
+  - [tags [mixin]](#tags-mixin)
 
 ### ✅spacing-03 [variable]
 
@@ -27532,6 +27533,22 @@ Tag styles
     }
   }
 
+  .#{$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;
   }
@@ -27586,6 +27603,7 @@ Tag styles
   - [inverse-hover-ui [variable]](#inverse-hover-ui-variable)
   - [disabled-01 [variable]](#disabled-01-variable)
   - [disabled-02 [variable]](#disabled-02-variable)
+  - [spacing-02 [variable]](#spacing-02-variable)
   - [focus [variable]](#focus-variable)
   - [inverse-focus-ui [variable]](#inverse-focus-ui-variable)
   - [ui-03 [variable]](#ui-03-variable)

diff --git a/packages/components/src/components/tag/_tag.scss b/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;
   }

diff --git a/packages/components/src/components/tag/_tokens.scss b/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,
       ),
     ),
   ),

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5168,6 +5168,19 @@ Map {
       "onClose": Object {
         "type": "func",
       },
+      "renderIcon": Object {
+        "args": Array [
+          Array [
+            Object {
+              "type": "func",
+            },
+            Object {
+              "type": "object",
+            },
+          ],
+        ],
+        "type": "oneOfType",
+      },
       "title": Object {
         "type": "string",
       },