fix(button): update icon only ghost button colors (#5313)

* fix(button): update icon only ghost button colors * fix(ghost-button): update disabled state behavior * fix(button): remove background when disabled
carbon-design-system · Feb 17, 2020 · 8adc849 · 8adc849
1 parent 61d1373
commit 8adc849
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
@@ -206,6 +206,31 @@
  }
  }
 
+ .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only
+ .#{$prefix}--btn__icon
+ path,
+ .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only .#{$prefix}--btn__icon {
+ fill: $icon-01;
+ }
+
+ .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled]
+ .#{$prefix}--btn__icon
+ path,
+ .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled]
+ .#{$prefix}--btn__icon {
+ fill: $disabled-02;
+ }
+
+ .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled] {
+ cursor: not-allowed;
+ }
+
+ .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled]
+ .#{$prefix}--assistive-text,
+ .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled]::before {
+ display: none;
+ }
+
  .#{$prefix}--btn--icon-only.#{$prefix}--btn--tertiary {
  padding-left: rem(15px);
  padding-right: rem(15px);

diff --git a/packages/react/src/components/Button/Button-story.js b/packages/react/src/components/Button/Button-story.js
@@ -71,6 +71,7 @@ const props = {
  'Primary button (primary)': 'primary',
  'Secondary button (secondary)': 'secondary',
  'Tertiary button (tertiary)': 'tertiary',
+ 'Ghost button (ghost)': 'ghost',
  },
  'primary'
  ),