feat(button): add selected state to icon only ghost button (#7784)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Feb 23, 2021 · e4bb101 · e4bb101
1 parent 1551b04
commit e4bb101
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 0 deletions.
diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
@@ -212,6 +212,10 @@
     }
   }
 
+  .#{$prefix}--btn--icon-only.#{$prefix}--btn--selected {
+    background: $selected-ui;
+  }
+
   .#{$prefix}--btn path[data-icon-path='inner-path'] {
     fill: none;
   }

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -188,6 +188,9 @@ Map {
         "type": "string",
       },
       "iconDescription": [Function],
+      "isSelected": Object {
+        "type": "bool",
+      },
       "kind": Object {
         "args": Array [
           Array [

diff --git a/packages/react/src/components/Button/Button-story.js b/packages/react/src/components/Button/Button-story.js
@@ -77,6 +77,7 @@ const props = {
       className: 'some-class',
       kind: select('Button kind (kind)', kinds, 'primary'),
       disabled: boolean('Disabled (disabled)', false),
+      isSelected: boolean('Selected (isSelected)', false),
       size: select('Button size (size)', sizes, 'default'),
       renderIcon: !iconToUse || iconToUse.svgData ? undefined : iconToUse,
       iconDescription: text(

diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js
@@ -23,6 +23,7 @@ const Button = React.forwardRef(function Button(
     size,
     kind,
     href,
+    isSelected,
     tabIndex,
     type,
     renderIcon: ButtonImageElement,
@@ -43,6 +44,7 @@ const Button = React.forwardRef(function Button(
     [`${prefix}--btn--${kind}`]: kind,
     [`${prefix}--btn--disabled`]: disabled,
     [`${prefix}--btn--icon-only`]: hasIconOnly,
+    [`${prefix}--btn--selected`]: hasIconOnly && isSelected && kind === 'ghost',
     [`${prefix}--tooltip__trigger`]: hasIconOnly,
     [`${prefix}--tooltip--a11y`]: hasIconOnly,
     [`${prefix}--tooltip--${tooltipPosition}`]: hasIconOnly && tooltipPosition,
@@ -148,6 +150,11 @@ Button.propTypes = {
     return undefined;
   },
 
+  /**
+   * Specify whether the Button is currently selected
+   */
+  isSelected: PropTypes.bool,
+
   /**
    * Specify the kind of Button you want to create
    */