From e4bb1013770f9c04e8ed05a3747f247b9ad9708c Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 23 Feb 2021 09:02:53 -0800
Subject: [PATCH] feat(button): add selected state to icon only ghost button
 (#7784)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 packages/components/src/components/button/_button.scss     | 4 ++++
 .../react/__tests__/__snapshots__/PublicAPI-test.js.snap   | 3 +++
 packages/react/src/components/Button/Button-story.js       | 1 +
 packages/react/src/components/Button/Button.js             | 7 +++++++
 4 files changed, 15 insertions(+)

diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
index 4052b6e2cc8f..5ed90d6e1db8 100644
--- 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
index 1259cd02a4ef..f51b85e27c69 100644
--- 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
index 0e6b0d2d7e16..2701ebaf194f 100644
--- 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
index 0733d61c7366..00dfc24f5908 100644
--- 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
    */