Merge branch 'main' into update-section-header-examples

package.json

@@ -108,7 +108,7 @@
     "wdio:lowlight": "terra wdio --themes clinical-lowlight-theme",
     "wdio:fusion": "terra wdio --themes orion-fusion-theme",
     "wdio:redwood": "terra wdio --themes redwood-theme",
-    "wdio": "terra wdio --themes terra-default-theme clinical-lowlight-theme orion-fusion-theme redwood-theme",
+    "wdio": "terra wdio --themes terra-default-theme clinical-lowlight-theme orion-fusion-theme",
     "wdio:docker": "terra wdio --disable-selenium-service=true --themes terra-default-theme clinical-lowlight-theme orion-fusion-theme"
   }
 }

packages/terra-action-header/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 ## Unreleased
 
+## 2.93.0 - (April 4, 2024)
+
+* Changed
+  * Minor dependency version bump.
+
+## 2.92.0 - (March 20, 2024)
+
+* Changed
+  * Minor dependency version bump.
+
 ## 2.91.0 - (February 27, 2024)
 
 * Changed

packages/terra-action-header/package.json

@@ -1,6 +1,6 @@
 {
   "name": "terra-action-header",
-  "version": "2.91.0",
+  "version": "2.93.0",
   "description": "The terra-action-header component is a header bar containing a title and optional actionable items such as links and buttons.",
   "author": "Cerner Corporation",
   "repository": {
@@ -26,7 +26,7 @@
     "classnames": "^2.2.5",
     "lodash.uniqueid": "^4.0.1",
     "prop-types": "^15.5.8",
-    "terra-button": "^3.75.0",
+    "terra-button": "^3.77.0",
     "terra-mixins": "^1.41.0",
     "terra-theme-context": "^1.0.0",
     "terra-visually-hidden-text": "^2.38.0"

packages/terra-alert/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 ## Unreleased
 
+## 4.95.0 - (April 4, 2024)
+
+* Changed
+  * Minor dependency version bump.
+
+## 4.94.0 - (March 20, 2024)
+
+* Changed
+  * Minor dependency version bump.
+
 ## 4.93.0 - (March 15, 2024)
 
 * Added

packages/terra-alert/package.json

@@ -1,6 +1,6 @@
 {
   "name": "terra-alert",
-  "version": "4.93.0",
+  "version": "4.95.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.",
   "author": "Cerner Corporation",
   "repository": {
@@ -33,7 +33,7 @@
   "dependencies": {
     "classnames": "^2.2.5",
     "prop-types": "^15.5.8",
-    "terra-button": "^3.75.0",
+    "terra-button": "^3.77.0",
     "terra-icon": "^3.60.0",
     "terra-responsive-element": "^5.41.0",
     "terra-theme-context": "^1.0.0",

packages/terra-button-group/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 ## Unreleased
 
+## 3.79.0 - (April 4, 2024)
+
+* Changed
+  * Minor dependency version bump.
+
+## 3.78.0 - (March 20, 2024)
+
+* Changed
+  * Minor dependency version bump.
+
 ## 3.77.0 - (February 27, 2024)
 
 * Changed

packages/terra-button-group/package.json

@@ -1,6 +1,6 @@
 {
   "name": "terra-button-group",
-  "version": "3.77.0",
+  "version": "3.79.0",
   "description": "The Terra Button Group component groups buttons and can maintain a toggle selection state.",
   "author": "Cerner Corporation",
   "repository": {
@@ -25,7 +25,7 @@
     "classnames": "^2.2.5",
     "keycode-js": "^3.1.0",
     "prop-types": "^15.5.8",
-    "terra-button": "^3.75.0",
+    "terra-button": "^3.77.0",
     "terra-theme-context": "^1.0.0"
   },
   "peerDependencies": {

packages/terra-button/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ## Unreleased
 
+## 3.77.0 - (April 4, 2024)
+
+* Changed
+  * Updated styles to ensure span content is left aligned when wrapping.
+
+## 3.76.0 - (March 20, 2024)
+
 * Added
   * Added isLeftAligned property to allow consumers to left align button content.
 

packages/terra-button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "terra-button",
-  "version": "3.75.0",
+  "version": "3.77.0",
   "description": "The terra-button component provides users a way to trigger actions in the UI.",
   "author": "Cerner Corporation",
   "repository": {

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

@@ -105,6 +105,7 @@
 
     &.is-left-aligned {
       justify-content: start;
+      text-align: start;
     }
   }
 

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

@@ -131,6 +131,7 @@ Terra.describeViewports('Button', ['tiny'], () => {
     $('#root').moveTo();
 
     Terra.validates.element('long text', { selector: '#long-text' });
+    Terra.validates.element('long text left aligned', { selector: '#long-text-left-block' });
   });
 
   it('displays Button with left aligned text', () => {

packages/terra-core-docs/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 ## Unreleased
 
+* Added
+  * Added examples and tests for `terra-dropdown-button` `SplitButton` with icons.
+
+## 1.70.0 - (April 4, 2024)
+
+* Changed
+  * Updated documentation for `terra-signature`.
+  * Updated long text example for `terra-button` to show left alignment for wrapping button text.
+
+## 1.69.0 - (March 27, 2024)
+
+* Added
+  * Added an example for `terra-hyperlink` to demonstrate text ellipses when its content should overflow.
+* Changed
+  * Fixed typos and imports in `terra-list` docs.
+  * Updated `terra-signature` example to include text and image signature.
+
+## 1.68.0 - (March 20, 2024)
+
 * Added
   * Added an example for `terra-button` to demonstrate isLeftAligned property.
   * Added a test for `terra-form-checkbox` to cover a checkbox without an id property passed.

packages/terra-core-docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerner/terra-core-docs",
-  "version": "1.67.0",
+  "version": "1.70.0",
   "description": "Contains documentation for packages in the terra-core monorepo",
   "author": "Cerner Corporation",
   "repository": {
@@ -37,34 +37,34 @@
     "@cerner/terra-docs": "^1.11.0",
     "moment": "^2.29.4",
     "terra-action-footer": "^2.68.0",
-    "terra-action-header": "^2.91.0",
-    "terra-alert": "^4.93.0",
+    "terra-action-header": "^2.93.0",
+    "terra-alert": "^4.95.0",
     "terra-arrange": "^3.56.0",
     "terra-avatar": "^3.20.0",
     "terra-badge": "^3.61.0",
     "terra-base": "^5.53.0",
     "terra-breakpoints": "^2.40.0",
-    "terra-button": "^3.75.0",
-    "terra-button-group": "^3.77.0",
+    "terra-button": "^3.77.0",
+    "terra-button-group": "^3.79.0",
     "terra-card": "^3.48.0",
     "terra-cell-grid": "^1.15.0",
     "terra-content-container": "^3.42.0",
     "terra-demographics-banner": "^3.67.0",
-    "terra-dialog": "^2.88.0",
+    "terra-dialog": "^2.90.0",
     "terra-divider": "^3.41.0",
     "terra-dropdown-button": "^1.40.0",
     "terra-dynamic-grid": "^3.36.0",
-    "terra-form-checkbox": "^4.25.0",
+    "terra-form-checkbox": "^4.26.0",
     "terra-form-field": "^4.33.0",
     "terra-form-fieldset": "^2.81.0",
     "terra-form-input": "^4.32.0",
-    "terra-form-radio": "^4.52.0",
-    "terra-form-select": "^6.59.0",
+    "terra-form-radio": "^4.54.0",
+    "terra-form-select": "^6.61.0",
     "terra-form-textarea": "^5.33.0",
     "terra-grid": "^6.36.0",
     "terra-heading": "^4.55.0",
     "terra-html-table": "^1.18.0",
-    "terra-hyperlink": "^2.67.1",
+    "terra-hyperlink": "^2.69.0",
     "terra-i18n": "^4.42.0",
     "terra-icon": "^3.60.0",
     "terra-image": "^3.41.0",
@@ -75,22 +75,23 @@
     "terra-progress-bar": "^4.37.0",
     "terra-responsive-element": "^5.41.0",
     "terra-scroll": "^2.37.0",
-    "terra-search-field": "^3.100.1",
+    "terra-search-field": "^3.102.0",
     "terra-section-header": "^2.67.1",
     "terra-show-hide": "^2.68.0",
     "terra-signature": "^2.42.0",
     "terra-slide-panel": "^3.46.0",
     "terra-spacer": "^3.64.0",
     "terra-status": "^4.63.0",
-    "terra-status-view": "^4.74.0",
+    "terra-status-view": "^4.76.0",
     "terra-switch": "^1.14.0",
-    "terra-tag": "^2.67.0",
+    "terra-tabs": "^7.21.0",
+    "terra-tag": "^2.69.0",
     "terra-text": "^4.56.0",
     "terra-theme-context": "^1.0.0",
     "terra-toggle": "^3.62.0",
-    "terra-toggle-button": "^3.85.0",
+    "terra-toggle-button": "^3.87.0",
     "terra-toggle-section-header": "^2.78.0",
-    "terra-toolbar": "^1.45.0",
+    "terra-toolbar": "^1.47.0",
     "terra-visually-hidden-text": "^2.38.0"
   },
   "scripts": {

packages/terra-core-docs/src/terra-dev-site/doc/dropdown-button/SplitButton.2.doc.mdx

@@ -4,6 +4,7 @@ import DefaultSplitButton from './example/DefaultSplitButton?dev-site-example';
 import GhostSplitButton from './example/GhostSplitButton?dev-site-example';
 import DisabledSplitButton from './example/DisabledSplitButton?dev-site-example';
 import BlockSplitButton from './example/BlockSplitButton?dev-site-example';
+import IconSplitButton from './example/IconSplitButton?dev-site-example';
 
 import SplitButtonPropsTable from 'terra-dropdown-button/lib/SplitButton?dev-site-props-table';
 import ItemPropsTable from 'terra-dropdown-button/lib/Item?dev-site-props-table';
@@ -46,6 +47,7 @@ import { Item, SplitButton } from 'terra-dropdown-button';
 <GhostSplitButton />
 <DisabledSplitButton />
 <BlockSplitButton />
+<IconSplitButton />
 
 ## Split Button Props
 <SplitButtonPropsTable />

packages/terra-core-docs/src/terra-dev-site/doc/dropdown-button/example/IconSplitButton.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Item, SplitButton } from 'terra-dropdown-button';
+import { IconReply } from 'terra-icon';
+
+import classNames from 'classnames/bind';
+import styles from './IconSplitButton.module.scss';
+
+const cx = classNames.bind(styles);
+
+const Example = () => (
+  <>
+    <SplitButton
+      primaryOptionLabel="Reply"
+      icon={<IconReply />}
+      onSelect={() => {}}
+      buttonAttrs={{
+        'aria-label': 'icon split',
+      }}
+      className={cx('icon-button')}
+    >
+      <Item label="Reply All" onSelect={() => {}} />
+      <Item label="Forward" onSelect={() => {}} />
+      <Item label="Reply in 10 minutes" onSelect={() => {}} />
+      <Item label="Selective Reply" onSelect={() => {}} />
+    </SplitButton>
+    <SplitButton
+      primaryOptionLabel="Reply"
+      icon={<IconReply />}
+      isReversed
+      onSelect={() => {}}
+      buttonAttrs={{
+        'aria-label': 'reverse icon split',
+      }}
+      className={cx('icon-button')}
+    >
+      <Item label="Reply All" onSelect={() => {}} />
+      <Item label="Forward" onSelect={() => {}} />
+      <Item label="Reply in 10 minutes" onSelect={() => {}} />
+      <Item label="Selective Reply" onSelect={() => {}} />
+    </SplitButton>
+    <SplitButton
+      primaryOptionLabel="Reply"
+      icon={<IconReply />}
+      isIconOnly
+      onSelect={() => {}}
+      buttonAttrs={{
+        'aria-label': 'icon only split',
+      }}
+      className={cx('icon-button')}
+    >
+      <Item label="Reply All" onSelect={() => {}} />
+      <Item label="Forward" onSelect={() => {}} />
+      <Item label="Reply in 10 minutes" onSelect={() => {}} />
+      <Item label="Selective Reply" onSelect={() => {}} />
+    </SplitButton>
+  </>
+);
+
+export default Example;

packages/terra-core-docs/src/terra-dev-site/doc/dropdown-button/example/IconSplitButton.module.scss

@@ -0,0 +1,5 @@
+:local {
+  .icon-button {
+    margin: 5px;
+  }
+}

packages/terra-core-docs/src/terra-dev-site/doc/list/About.1.doc.mdx

@@ -18,9 +18,10 @@ import ListPropsTable from 'terra-list/lib/List?dev-site-props-table';
 
 The Terra List is a structural component to vertically arrange content within list/list items.
 
-If a list implementation contains selectable list options the role prop should be set to "listbox" for accesibility.
+If a list implementation contains selectable list options the role prop should be set to "listbox" for accessibility.
 
-Two padding variants are provide for list item content, standard and compact. If different padding is desired use the defaulted style of 'none' and set the padding on the list item's child content with your own css values, preferrably themeable variables.
+Two padding variants are provided for list item content, standard and compact.
+If different padding is desired, use the default style of 'none' and set the padding on the list item's child content with the custom css values, preferrably themeable variables.
 
 ## Getting Started
 

packages/terra-core-docs/src/terra-dev-site/doc/list/ListItem.2.doc.mdx

@@ -10,12 +10,15 @@ import ListItemPropsTable from 'terra-list/lib/ListItem?dev-site-props-table';
 
 # List Item
 
-The list item provides a pattern for selection/selectability for li surrounded child content. Whenever, the list item has a prop `isSelectable=true` then `aria-label` must be provided to List for accessibility.  The onSelect event is the primary means for interaction, as it yields the associated metaData when valid selection occurs, though individual onClick and onKeyDown events can be applied through the use of customProps if greater granularity is required.
+The list item provides a pattern for selection/selectability for `<li>`-encapsulated child content.
+When the list item has `isSelectable=true`, then `aria-label` must be provided to List for accessibility.
+The onSelect event is the primary means for interaction, as it yields the associated metaData when valid selection occurs,
+though individual onClick and onKeyDown events can be applied through the use of customProps if greater granularity is required.
 
 ## Usage
 
 ```jsx
-import List, { Item } from 'terra-list/lib/List';
+import List, { Item } from 'terra-list';
 ```
 
 ## Examples

packages/terra-core-docs/src/terra-dev-site/doc/list/ListSection.3.doc.mdx

@@ -13,7 +13,7 @@ The list section component creates a section header and layouts it out with the
 ## Usage
 
 ```jsx
-import List, { Item, Section } from 'terra-list/lib/List';
+import List, { Item, Section } from 'terra-list';
 ```
 
 ## Examples

packages/terra-core-docs/src/terra-dev-site/doc/list/ListSectionHeader.5.doc.mdx

@@ -15,7 +15,7 @@ When consumed by itself as an individual list item avoid enabling the collapsibl
 ## Usage
 
 ```jsx
-import List, { SectionHeader } from 'terra-list/lib/List';
+import List, { SectionHeader } from 'terra-list';
 ```
 
 ## Examples

packages/terra-core-docs/src/terra-dev-site/doc/list/ListSubsection.4.doc.mdx

@@ -13,7 +13,7 @@ The list subsection component creates a subsection header and layouts it out wit
 ## Usage
 
 ```jsx
-import List, { Item, Subsection } from 'terra-list/lib/List';\
+import List, { Item, Subsection } from 'terra-list';
 ```
 
 ## Examples