Merge pull request #422 from mashmatrix/fix-icon-inverse-button

Fix button icon color in type="icon-inverse"

Author: stomita

src/scripts/Icon.tsx

@@ -193,7 +193,7 @@ const SvgIcon = forwardRef(
       size = '',
       align,
       container,
-      textColor,
+      textColor = 'default',
       style,
       ...rprops
     } = props;
@@ -204,8 +204,7 @@ const SvgIcon = forwardRef(
         'slds-icon': !/slds-button__icon/.test(className),
         [`slds-icon_${size}`]: /^(x-small|small|medium|large)$/.test(size),
         [`slds-icon-text-${textColor ?? 'default'}`]:
-          /^(default|warning|error)$/.test(textColor ?? 'default') &&
-          !iconColor,
+          /^(default|warning|error)$/.test(textColor ?? '') && !iconColor,
         [`slds-icon-${iconColor ?? ''}`]: !container && iconColor,
         'slds-m-left_x-small': align === 'right',
         'slds-m-right_x-small': align === 'left',

stories/Button.stories.tsx

@@ -286,18 +286,16 @@ export const ButtonIconInverse: ComponentStoryObj<typeof Button> = {
 /**
  *
  */
-export const ButtonIconInverseInDarkBackground: ComponentStoryObj<
-  typeof Button
-> = {
-  name: 'Button Icon Inverse in dark background',
+export const ButtonIconInverseDisabled: ComponentStoryObj<typeof Button> = {
+  name: 'Button Icon Inverse - Disabled',
   args: {
     type: 'icon-inverse',
     icon: 'close',
     disabled: true,
   },
   parameters: {
     docs: {
-      storyDescription: 'Button with icon in dark background',
+      storyDescription: 'Button with icon in dark background, disabled',
     },
   },
 };