review updates, wdio

packages/terra-button/src/Button.jsx

@@ -125,7 +125,6 @@ class Button extends React.Component {
     this.handleFocus = this.handleFocus.bind(this);
     this.handleMouseDown = this.handleMouseDown.bind(this);
     this.handleClick = this.handleClick.bind(this);
-    this.handleOnChange = this.handleOnChange.bind(this);
 
     this.shouldShowFocus = true;
     // eslint-disable-next-line react/prop-types
@@ -149,12 +148,6 @@ class Button extends React.Component {
     }
   }
 
-  handleOnChange(event) {
-    if (this.onChange) {
-      this.onChange(event, this.state.isSelected);
-    }
-  }
-
   handleClick(event) {
     // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Button#Clicking_and_focus
     // Button on Firefox, Safari and IE running on OS X does not receive focus when clicked.
@@ -165,12 +158,12 @@ class Button extends React.Component {
       this.shouldShowFocus = true;
     }
 
-    if (this.isSelectable) {
-      this.handleOnChange(event);
-    }
-
     if (this.props.onClick) {
-      this.props.onClick(event);
+      if (this.isSelectable) {
+        this.props.onClick(event, this.state.isSelected);
+      } else {
+        this.props.onClick(event);
+      }
     }
   }
 
@@ -267,7 +260,7 @@ class Button extends React.Component {
     const isMac = () => navigator.userAgent.indexOf('Mac') !== -1;
     const buttonLabelCx = isMac() ? 'button-label-mac' : 'button-label-win';
 
-    // TODO: Custom prop `isSelectable` is used for fusion pass through passivity and should be removed after Fusion Phase2 release.
+    // TODO: `isSelectable` prop is used for fusion pass through passivity and should be removed after Fusion Phase2 release.
 
     const buttonClasses = classNames(
       cx([

packages/terra-button/src/Button.module.scss

@@ -93,15 +93,14 @@
       color: var(--terra-button-selected-color, #fff);
     }
 
-    &:active.is-selected,
-    &:active {
-      background-color: var(--terra-button-active-background-color, #52585b);
-      border-color: var(--terra-button-active-border-color, #52585b);
-      box-shadow: var(--terra-button-active-box-shadow);
-      color: var(--terra-button-active-color, #fff);
+    &.is-selected:active {
+      background-color: var(--terra-button-selected-and-active-background-color, #52585b);
+      border-color: var(--terra-button-selected-and-active-border-color, #52585b);
+      box-shadow: var(--terra-button-selected-and-active-box-shadow);
+      color: var(--terra-button-selected-and-active-color, #fff);
     }
 
-    &:hover.is-selected {
+    &.is-selected:hover {
       background-color: var(--terra-button-selected-and-hover-background-color, #40474a);
       border-color: var(--terra-button-selected-and-hover-border-color, #40474a);
       box-shadow: var(--terra-button-selected-and-hover-box-shadow);

packages/terra-button/src/clinical-lowlight-theme/Button.module.scss

@@ -202,10 +202,10 @@
     --terra-button-selected-and-focus-box-shadow: 0 0 1px 3px rgba(76, 178, 233, 0.5), 0 0 7px 4px rgba(76, 178, 233, 0.35);
     --terra-button-selected-and-focus-color: #9b9b9b;
 
-    --terra-button-active-background-color: #1a2023;
-    --terra-button-active-border-color: #181b1d;
-    --terra-button-active-box-shadow: none;
-    --terra-button-active-color: #9b9b9b;
+    --terra-button-selected-and-active-background-color: #1a2023;
+    --terra-button-selected-and-active-border-color: #181b1d;
+    --terra-button-selected-and-active-box-shadow: none;
+    --terra-button-selected-and-active-color: #9b9b9b;
 
     --terra-button-selected-and-hover-background-color: #121517;
     --terra-button-selected-and-hover-border-color: #181b1d;

packages/terra-button/src/orion-fusion-theme/Button.module.scss

@@ -207,9 +207,9 @@
     --terra-button-selected-box-shadow: inset 0 3rem 1.5rem -2rem #434a4d;
     --terra-button-selected-color: #fff;
 
-    --terra-button-active-background-color: #52585b;
-    --terra-button-active-border-color: #6f7477;
-    --terra-button-active-box-shadow: inset 0 3rem 1.5rem -2rem #434a4d;
-    --terra-button-active-color: #fff;
+    --terra-button-selected-and-active-background-color: #52585b;
+    --terra-button-selected-and-active-border-color: #6f7477;
+    --terra-button-selected-and-active-box-shadow: inset 0 3rem 1.5rem -2rem #434a4d;
+    --terra-button-selected-and-active-and-color: #fff;
   }
 }

packages/terra-button/tests/wdio/button-spec.js

@@ -255,4 +255,12 @@ Terra.describeViewports('Button', ['tiny'], () => {
       Terra.validates.element('programmatic re-enabled -Enabled Button is not focused', { selector: '#root' });
     });
   });
+
+  describe('Selectable button', () => {
+    it('displays selected button', () => {
+      browser.url('/raw/tests/cerner-terra-core-docs/button/selectable-button');
+      $('<button>').click();
+      Terra.validates.element('selected-button');
+    });
+  });
 });

packages/terra-core-docs/CHANGELOG.md

@@ -7,6 +7,9 @@
 * Updated
   * Removed `terra-table` as a dependency as the docs have now moved to `terra-framework-docs`.
 
+* Added
+  *  Added example for selection state of Fusion-Button in `terra-button`.
+
 ## 1.45.0 - (October 16, 2023)
 
 * Added

packages/terra-core-docs/src/terra-dev-site/test/button/SelectableButton.test.jsx

@@ -23,7 +23,7 @@ const SelectableButton = () => {
         {' '}
         {text}
       </p>
-      <Button text="Click Me" className={cx('button')} isSelectable onChange={handleSelection} />
+      <Button text="Click Me" className={cx('button')} isSelectable onClick={handleSelection} />
     </div>
   );
 };