Merged main into generate-package-lock

packages/terra-action-header/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## Unreleased
 
+## 2.85.0 - (October 23, 2023)
+
+* Changed
+  * Minor dependency version bump
+
 ## 2.84.0 - (October 3, 2023)
 
 * Changed

packages/terra-action-header/package.json

@@ -1,7 +1,7 @@
 {
   "name": "terra-action-header",
   "main": "lib/ActionHeader.js",
-  "version": "2.84.0",
+  "version": "2.85.0",
   "description": "The terra-action-header component is a header bar containing a title and optional actionable items such as links and buttons.",
   "repository": {
     "type": "git",
@@ -31,7 +31,7 @@
     "classnames": "^2.2.5",
     "lodash.uniqueid": "^4.0.1",
     "prop-types": "^15.5.8",
-    "terra-button": "^3.68.2",
+    "terra-button": "^3.69.0",
     "terra-mixins": "^1.40.0",
     "terra-theme-context": "^1.0.0",
     "terra-visually-hidden-text": "2.36.0"

packages/terra-alert/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## Unreleased
 
+## 4.84.0 - (October 23, 2023)
+
+* Changed
+  * Minor dependency version bump
+
 ## 4.83.0 - (October 16, 2023)
 
 * Updated

packages/terra-alert/package.json

@@ -1,7 +1,7 @@
 {
   "name": "terra-alert",
   "main": "lib/Alert.js",
-  "version": "4.83.0",
+  "version": "4.84.0",
   "description": "The Terra Alert component is a notification banner that can be rendered in your application when there is information that you want to bring to the user's attention. The Alert component supports a number of built-in notification types that render with pre-defined colors and icons that help the user understand the severity and meaning of the notification. A custom notification type is also supported that allows your application to customize an alert that may not fit into the pre-defined types.",
   "repository": {
     "type": "git",
@@ -29,7 +29,7 @@
   "dependencies": {
     "classnames": "^2.2.5",
     "prop-types": "^15.5.8",
-    "terra-button": "^3.68.2",
+    "terra-button": "^3.69.0",
     "terra-icon": "^3.58.0",
     "terra-responsive-element": "^5.37.0",
     "terra-theme-context": "^1.0.0",

packages/terra-arrange/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## Unreleased
 
+## 3.54.0 - (October 23, 2023)
+
+* Fixed
+ * Fixed reflow issue when the viewport is resized to 320x256 px.
+
 ## 3.53.0 - (August 23, 2023)
 
 * Removed

packages/terra-arrange/package.json

@@ -1,7 +1,7 @@
 {
   "name": "terra-arrange",
   "main": "lib/Arrange.js",
-  "version": "3.53.0",
+  "version": "3.54.0",
   "description": "The arrange component is used for horizontally arranging and vertically aligning a single row of container elements.",
   "repository": {
     "type": "git",

packages/terra-arrange/src/Arrange.module.scss

@@ -38,4 +38,10 @@
   .default {
     align-self: flex-start;
   }
+
+  @media (max-width: 320px), (max-height: 256px) {
+    .fit {
+      flex: 0 0;
+    }
+  }
 }

packages/terra-button-group/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## Unreleased
 
+## 3.71.0 - (October 23, 2023)
+
+* Changed
+  * Minor dependency version bump
+
 ## 3.70.0 - (October 3, 2023)
 
 * Changed

packages/terra-button-group/package.json

@@ -1,7 +1,7 @@
 {
   "name": "terra-button-group",
   "main": "lib/ButtonGroup.js",
-  "version": "3.70.0",
+  "version": "3.71.0",
   "description": "The Terra Button Group component groups buttons and can maintain a toggle selection state.",
   "repository": {
     "type": "git",
@@ -29,7 +29,7 @@
     "classnames": "^2.2.5",
     "keycode-js": "^3.1.0",
     "prop-types": "^15.5.8",
-    "terra-button": "^3.68.2",
+    "terra-button": "^3.69.0",
     "terra-theme-context": "^1.0.0"
   },
   "scripts": {

packages/terra-button/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## Unreleased
 
+## 3.69.0 - (October 23, 2023)
+
+* Changed
+  * Added support of selection state for Fusion-Button
+
 ## 3.68.2 - (October 3, 2023)
 
 * Fixed

packages/terra-button/package.json

@@ -1,7 +1,7 @@
 {
   "name": "terra-button",
   "main": "lib/Button.js",
-  "version": "3.68.2",
+  "version": "3.69.0",
   "description": "The terra-button component provides users a way to trigger actions in the UI.",
   "repository": {
     "type": "git",

packages/terra-button/src/Button.jsx

@@ -118,7 +118,7 @@ const defaultProps = {
 class Button extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { active: false, focused: false };
+    this.state = { active: false, focused: false, isSelected: false };
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleKeyUp = this.handleKeyUp.bind(this);
     this.handleOnBlur = this.handleOnBlur.bind(this);
@@ -144,7 +144,7 @@ class Button extends React.Component {
     }
   }
 
-  handleClick(event) {
+  handleClick(event, isSelectable) {
     // 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.
     // This will put focus on the button when clicked if it is not currently the active element.
@@ -155,11 +155,15 @@ class Button extends React.Component {
     }
 
     if (this.props.onClick) {
-      this.props.onClick(event);
+      if (isSelectable) {
+        this.props.onClick(event, this.state.isSelected);
+      } else {
+        this.props.onClick(event);
+      }
     }
   }
 
-  handleKeyDown(event) {
+  handleKeyDown(event, isSelectable) {
     // Add active state to FF browsers
     if (event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
       this.setState({ active: true });
@@ -175,6 +179,9 @@ class Button extends React.Component {
     // Add focus styles for keyboard navigation
     if (event.nativeEvent.keyCode === KeyCode.KEY_SPACE || event.nativeEvent.keyCode === KeyCode.KEY_RETURN) {
       this.setState({ focused: true });
+      if (isSelectable) {
+        this.setState(prevState => ({ isSelected: !prevState.isSelected }));
+      }
     }
 
     if (this.props.onKeyDown) {
@@ -208,10 +215,13 @@ class Button extends React.Component {
     }
   }
 
-  handleMouseDown(event) {
+  handleMouseDown(event, isSelectable) {
     if (this.props.onMouseDown) {
       this.props.onMouseDown(event);
     }
+    if (isSelectable) {
+      this.setState(prevState => ({ isSelected: !prevState.isSelected }));
+    }
 
     // See https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus#Notes
     // If you call HTMLElement.focus() from a mousedown event handler, you must call event.preventDefault() to keep the focus from leaving the HTMLElement.
@@ -246,6 +256,9 @@ class Button extends React.Component {
     const isMac = () => navigator.userAgent.indexOf('Mac') !== -1;
     const buttonLabelCx = isMac() ? 'button-label-mac' : 'button-label-win';
 
+    // TODO: `isSelectable` prop is used for fusion pass through passivity and should be removed after Fusion Phase2 release.
+    const { isSelectable } = customProps;
+
     const buttonClasses = classNames(
       cx([
         'button',
@@ -255,6 +268,7 @@ class Button extends React.Component {
         { compact: isCompact },
         { 'is-active': this.state.active && !isDisabled },
         { 'is-focused': this.state.focused && !isDisabled },
+        { 'is-selected': isSelectable && this.state.isSelected && !isDisabled },
         theme.className,
       ]),
       customProps.className,
@@ -302,6 +316,10 @@ class Button extends React.Component {
       ariaLabel = (icon && icon.props.a11yLabel) ? icon.props.a11yLabel : ariaLabel || text;
     }
 
+    if (isSelectable) {
+      customProps['aria-pressed'] = this.state.isSelected;
+    }
+
     let ComponentType = 'button';
     if (href) {
       ComponentType = 'a';
@@ -317,12 +335,12 @@ class Button extends React.Component {
         tabIndex={isDisabled ? '-1' : customProps.tabIndex}
         aria-disabled={isDisabled}
         aria-label={ariaLabel}
-        onKeyDown={this.handleKeyDown}
+        onKeyDown={(event) => { this.handleKeyDown(event, isSelectable); }}
         onKeyUp={this.handleKeyUp}
         onBlur={this.handleOnBlur}
         title={buttonTitle}
-        onClick={this.handleClick}
-        onMouseDown={this.handleMouseDown}
+        onClick={(event) => { this.handleClick(event, isSelectable); }}
+        onMouseDown={(event) => { this.handleMouseDown(event, isSelectable); }}
         onFocus={this.handleFocus}
         href={href}
         ref={refCallback}

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

@@ -78,6 +78,34 @@
       opacity: var(--terra-button-disabled-opacity, 0.3);
       pointer-events: none; // prevent pointer interaction for anchor elements
     }
+
+    &.is-selected.is-focused {
+      background-color: var(--terra-button-selected-and-focus-background-color, #52585b);
+      border-color: var(--terra-button-selected-and-focus-border-color, #52585b);
+      box-shadow: var(--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));
+      color: var(--terra-button-selected-and-focus-color, #fff);
+    }
+
+    &.is-selected {
+      background-color: var(--terra-button-selected-background-color, #52585b);
+      border-color: var(--terra-button-selected-border-color, #52585b);
+      box-shadow: var(--terra-button-selected-box-shadow);
+      color: var(--terra-button-selected-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);
+    }
+
+    &.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);
+      color: var(--terra-button-selected-and-hover-color, #fff);
+    }
   }
 
   .button-label-mac {

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

@@ -190,5 +190,26 @@
     --terra-button-hover-background-color-utility: transparent;
     --terra-button-hover-border-color-utility: transparent;
     --terra-button-hover-color-utility: #b2b5b6;
+
+    // isSelected button
+    --terra-button-selected-background-color: #1a2023;
+    --terra-button-selected-border-color: #181b1d;
+    --terra-button-selected-box-shadow: none;
+    --terra-button-selected-color: #9b9b9b;
+
+    --terra-button-selected-and-focus-background-color: #1a2023;
+    --terra-button-selected-and-focus-border-color: #181b1d;
+    --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-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;
+    --terra-button-selected-and-hover-box-shadow: none;
+    --terra-button-selected-and-hover-color: #9b9b9b;
   }
 }

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

@@ -190,5 +190,26 @@
     --terra-button-hover-background-color-utility: transparent;
     --terra-button-hover-border-color-utility: transparent;
     --terra-button-hover-color-utility: #004c76;
+
+    // isSelected button
+    --terra-button-selected-and-hover-background-color: #52585b;
+    --terra-button-selected-and-hover-border-color: #6f7477;
+    --terra-button-selected-and-hover-box-shadow: none;
+    --terra-button-selected-and-hover-color: #fff;
+
+    --terra-button-selected-and-focus-background-color: #52585b;
+    --terra-button-selected-and-focus-border-color: #6f7477;
+    --terra-button-selected-and-focus-box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.65), 0 0 2px 3px rgba(76, 178, 233, 0.5), 0 0 6px 4px rgba(76, 178, 233, 0.3);
+    --terra-button-selected-and-focus-color: #fff;
+
+    --terra-button-selected-background-color: #52585b;
+    --terra-button-selected-border-color: #6f7477;
+    --terra-button-selected-box-shadow: inset 0 3rem 1.5rem -2rem #434a4d;
+    --terra-button-selected-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

@@ -2,11 +2,27 @@
 
 ## Unreleased
 
+## 1.47.0 - (October 26, 2023)
+
+* Changed
+  * Minor dependency version bump
+
+## 1.46.0 - (October 23, 2023)
+
 * Updated
+  * Updated `terra-arrange` examples to use `terra-form-radio`.
+  * Updated `terra-paginator` custom page label and count example to display correct page count.
+  * Updated `terra-list` examples to include `isTabFocusDisabled` prop.
   * 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
+  * Added aria-label attribute for `terra-dropdown-split-button` examples.
+
 * Added
   * Added a visual error note for invalid example in `terra-form-single-select`.
   * Added example for `terra-badge` with `terra-html-table`.