fix(button): ignore fill="none" paths on icon svgs (#8585)

* fix(button): ignore fill="none" paths on icon svgs * docs(Button): add temporary icon test Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · May 7, 2021 · dc447cb · dc447cb
1 parent 56a7430
commit dc447cb
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
@@ -282,7 +282,7 @@
 
   .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only
     .#{$prefix}--btn__icon
-    path:not([data-icon-path]),
+    path:not([data-icon-path]):not([fill='none']),
   .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only .#{$prefix}--btn__icon {
     fill: $icon-primary;
   }

diff --git a/packages/components/src/components/button/_mixins.scss b/packages/components/src/components/button/_mixins.scss
@@ -89,7 +89,7 @@
   }
 
   .#{$prefix}--btn__icon,
-  .#{$prefix}--btn__icon path:not([data-icon-path]) {
+  .#{$prefix}--btn__icon path:not([data-icon-path]):not([fill='none']) {
     fill: $icon-color;
   }
 }

diff --git a/packages/react/src/components/Button/Button-story.js b/packages/react/src/components/Button/Button-story.js
@@ -9,7 +9,13 @@ import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
 import { iconAddSolid, iconSearch } from 'carbon-icons';
-import { Add16, AddFilled16, Search16 } from '@carbon/icons-react';
+import {
+  Add16,
+  AddFilled16,
+  Search16,
+  PlayOutlineFilled32,
+  PlayOutlineFilled16,
+} from '@carbon/icons-react';
 import Button from '../Button';
 import ButtonSkeleton from '../Button/Button.Skeleton';
 import ButtonSet from '../ButtonSet';
@@ -20,6 +26,10 @@ const icons = {
   'Add (Add16 from `@carbon/icons-react`)': 'Add16',
   'Add (Filled) (AddFilled16 from `@carbon/icons-react`)': 'AddFilled16',
   'Search (Search16 from `@carbon/icons-react`)': 'Search16',
+  'PlayOutlineFilled16 (PlayOutlineFilled16 from `@carbon/icons-react`)':
+    'PlayOutlineFilled16',
+  'PlayOutlineFilled32 (PlayOutlineFilled32 from `@carbon/icons-react`)':
+    'PlayOutlineFilled32',
 };
 
 const iconMap = {
@@ -28,6 +38,8 @@ const iconMap = {
   Add16,
   AddFilled16,
   Search16,
+  PlayOutlineFilled16,
+  PlayOutlineFilled32,
 };
 
 const kinds = {