Merge branch 'main' into UXPLATFORM-10099-Flickering-issue

packages/terra-compact-interactive-list/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Fixed
+  * Cell does not call `onCellSelect` method if corresponding column `isSelectable` prop set to `false`.
+
 ## 1.0.0 - (January 2, 2024)
 
 * Changed

packages/terra-compact-interactive-list/src/clinical-lowlight-theme/Cell.module.scss

@@ -2,10 +2,8 @@
   .clinical-lowlight-theme {
     --terra-compact-interactive-list-hover-background-color: #25282a;
     --terra-compact-interactive-list-cell-selected-background-color: #1e3a49;
-
-    &.cell:focus {
-      --terra-compact-interactive-list-cell-focus-outline: 3px dashed #fff;
-      --terra-compact-interactive-list-cell-focus-outline-offset: -4px;
-    }
+    --terra-compact-interactive-list-cell-focus-outline: 3px dashed #fff;
+    --terra-compact-interactive-list-cell-focus-outline-offset: -4px;
+    --terra-compact-interactive-list-cell-focus-box-shadow: none;
   }
 }

packages/terra-compact-interactive-list/src/orion-fusion-theme/Cell.module.scss

@@ -2,10 +2,7 @@
   .orion-fusion-theme {
     --terra-compact-interactive-list-hover-background-color: #e0f2fb;
     --terra-compact-interactive-list-cell-selected-background-color: #cbe7fa;
-
-    &.cell:focus {
-      --terra-compact-interactive-list-cell-focus-outline: none;
-      box-shadow: inset 0 0 1px 3px rgba(76, 178, 233, 0.5), inset 0 0 7px 4px rgba(76, 178, 233, 0.35);
-    }
+    --terra-compact-interactive-list-cell-focus-outline: none;
+    --terra-compact-interactive-list-cell-focus-box-shadow: inset 0 0 1px 3px rgba(76, 178, 233, 0.5), inset 0 0 7px 4px rgba(76, 178, 233, 0.35);
   }
 }

packages/terra-compact-interactive-list/src/subcomponents/Cell.jsx

@@ -84,7 +84,13 @@ const Cell = (props) => {
   const theme = useContext(ThemeContext);
   const cellRef = React.useRef();
   const [isSelectableCell, setIsSelectableCell] = useState(false);
-  const selectable = column.isSelectable && isSelectableCell;
+  /**
+   *  The cell is not selectable if one of the following applies:
+   *  - there is no onCellSelect method passed,
+   *  - the corresponding column isSelectable prop set to false,
+   *  - there are focusable elements inside the cell
+   */
+  const selectable = onCellSelect && column.isSelectable !== false && isSelectableCell;
   const className = cx('cell', theme.className, {
     selected: selectable && isSelected,
     selectable,
@@ -116,7 +122,7 @@ const Cell = (props) => {
     const key = event.keyCode;
     if (key === KeyCode.KEY_SPACE && isSelectableCell) {
       event.preventDefault(); // prevents scroll on empty cells
-      if (onCellSelect) {
+      if (onCellSelect && column.isSelectable !== false) {
         onCellSelect({ rowId, columnId: id });
       }
     }
@@ -125,7 +131,7 @@ const Cell = (props) => {
   const handleMouseDown = (event) => {
     setFocusedCell({ rowId, columnId: id });
     if (isSelectableCell) {
-      if (onCellSelect) {
+      if (onCellSelect && column.isSelectable !== false) {
         onCellSelect({ rowId, columnId: id });
       }
     } else {

packages/terra-compact-interactive-list/src/subcomponents/Cell.module.scss

@@ -11,6 +11,7 @@
     position: relative;
 
     &:focus {
+      box-shadow: var(--terra-compact-interactive-list-cell-focus-box-shadow, none);
       outline: var(--terra-compact-interactive-list-cell-focus-outline, 3px dashed #000);
       outline-offset: var(--terra-compact-interactive-list-cell-focus-outline-offset, -4px);
     }

packages/terra-compact-interactive-list/tests/jest/CompactInteractiveList.test.jsx

@@ -950,7 +950,7 @@ describe('Compact Interactive List', () => {
     });
   });
 
-  describe('Whitespace keydown on cell', () => {
+  describe('onCellSelect method', () => {
     const cols = [
       {
         id: 'Column-0',
@@ -989,7 +989,7 @@ describe('Compact Interactive List', () => {
       });
     });
 
-    it('should call onCellSelect method if cell is selactable', () => {
+    it('should call onCellSelect method per mouse click or Space key down if cell is selectable', () => {
       const mockOnCellSelect = jest.fn();
       const testList = (
         <CompactInteractiveList
@@ -1014,16 +1014,19 @@ describe('Compact Interactive List', () => {
 
       // Testing SPACE
       cellElements.at(0).simulate('keyDown', spaceKeyProps);
-      expect(mockOnCellSelect).toHaveBeenCalledTimes(1);
+      expect(mockOnCellSelect).toHaveBeenCalledWith({ columnId: 'Column-0', rowId: 'row_1' });
+      // Testing mouse down
+      cellElements.at(1).simulate('mouseDown');
+      expect(mockOnCellSelect).toHaveBeenCalledWith({ columnId: 'Column-1', rowId: 'row_1' });
     });
 
-    it('Should cnot all onCellSelect method if cell is not selactable', () => {
+    it('Should not call onCellSelect method per mouse click or Space key down if cell is not selactable', () => {
       const buttonCell = <button type="button" aria-label="Learn more button" onClick={jest.fn()}>Learn more</button>;
       const newRows = [
         {
           id: 'row_1',
           cells: [
-            { content: buttonCell },
+            { content: buttonCell }, // interactive element makes the cell unselactable
             { content: 'Discern Care Set (1)' },
             { content: 'Row 1 Cell 3 mock content' },
           ],
@@ -1037,13 +1040,31 @@ describe('Compact Interactive List', () => {
           ],
         },
       ];
+      const newCols = [
+        {
+          id: 'Column-0',
+          displayName: 'Col_1',
+          width: '100px',
+        },
+        {
+          id: 'unselectable-column-1',
+          displayName: 'Col_2',
+          width: '200px',
+          isSelectable: false, // make column non-selactable
+        },
+        {
+          id: 'Column-2',
+          displayName: 'Col_3',
+          width: '100px',
+        },
+      ];
       const mockOnCellSelect = jest.fn();
 
       const wrapper = mountWithIntl(
         <CompactInteractiveList
           id="compact-interactive-list-space-key-on-cell"
           rows={newRows}
-          columns={cols}
+          columns={newCols}
           numberOfColumns={2}
           onCellSelect={mockOnCellSelect}
         />, {
@@ -1059,8 +1080,12 @@ describe('Compact Interactive List', () => {
       // As first cell contains interactive element (button), the focus should go to the button
       expect(document.activeElement).toBe(button.instance());
 
-      // Testing SPACE on interactive cell
+      // SPACE or MOUSE CLICK should not select the cell with interactible element in it.
       cellElements.at(0).simulate('keyDown', spaceKeyProps);
+      cellElements.at(0).simulate('mouseDown');
+      // SPACE or MOUSE CLICK should not select the cell if corresponding column isSelectable prop set to false.
+      cellElements.at(1).simulate('keyDown', spaceKeyProps);
+      cellElements.at(1).simulate('mouseDown');
       expect(mockOnCellSelect).not.toHaveBeenCalled();
     });
   });

packages/terra-compact-interactive-list/tests/wdio/compact-interactive-list-spec.js

@@ -68,4 +68,20 @@ Terra.describeViewports('CompactInteractiveList', ['medium', 'large'], () => {
       Terra.validates.element('inconsistent width units');
     });
   });
+
+  describe('cell focus and select styling', () => {
+    beforeEach(() => {
+      browser.url('/raw/tests/cerner-terra-framework-docs/compact-interactive-list/cell-content');
+    });
+
+    it('should apply focus and selection styling to cells', () => {
+      browser.keys(['Tab', 'Space', 'ArrowRight']);
+      Terra.validates.element('selected-and-focused-cells', { selector: '#compact-interactive-list-cell-content' });
+    });
+
+    it('should apply focus styling to the interactive element in the cell', () => {
+      browser.keys(['Tab', 'ArrowRight', 'ArrowRight']);
+      Terra.validates.element('focused-button-in-cell', { selector: '#compact-interactive-list-cell-content' });
+    });
+  });
 });

packages/terra-framework-docs/CHANGELOG.md

@@ -4,10 +4,14 @@
 
 * Added
   * Added test example for `terra-file-path`.
+  * Added `terra-compact-interactive-list` cell content example.
 
 * Changed
   * Updated `terra-date-input-field` example to have visual label and contextual error messages. 
 
+* Added
+  * Added upgrade guide for Terra Table.
+
 ## 1.54.0 - (January 2, 2024)
 
 * Changed

packages/terra-framework-docs/src/terra-dev-site/doc/compact-interactive-list/Examples.2/CellContent.6.doc.mdx

@@ -21,7 +21,7 @@ and all interactive elements keep their native arrow key interactions. If you pl
 The example below demonstrates a [Compact Interactive List](/components/cerner-terra-framework-docs/compact-interactive-list/about) component that supports cell selection. 
 
 * You can click a cell or press the **SPACERBAR** on the active cell to select it. 
-* A cell is selectable unless it contains an interactive element, in which case the interactive element default controls apply.
+* A cell is selectable unless it contains an interactive element, in which case the interactive element default controls apply, or **[isSelectable](/components/cerner-terra-framework-docs/compact-interactive-list/about#column) prop** is set to `false` for the corresponding column.
 
 #### Required Properties
 

packages/terra-framework-docs/src/terra-dev-site/doc/table/UpgradeGuide.1.doc.mdx

@@ -6,4 +6,51 @@ import { Badge } from "terra-table/package.json?dev-site-package";
 
 ## Changes from 4.x to 5.0
 
-Terra table will no longer support grid-like (focus, keyboard navigation, etc) functionality and now behaves more like a native, accessible table. See the Docs for new functionality.
+The latest changes in the Table component reflects the Terra Accessibility initiative. The new version reflects an implementation to make components more accessible.
+
+## New Props
+
+* Added `id`
+* Added `rows`
+* Added `sections`
+* Added `ariaLabelledBy`
+* Added `ariaLabel`
+* Added `columnResizeIncrement`
+* Added `pinnedColumns`
+* Added `overflowColumns`
+* Added `defaultColumnWidth`
+* Added `columnHeaderHeight`
+* Added `rowHeight`
+* Added `rowHeaderIndex`
+* Added `onColumnResize`
+* Added `onRowSelect`
+* Added `onColumnSelect`
+* Added `onSectionSelect`
+* Added `onRowSelectionHeaderSelect`
+* Added `rowSelectionMode`
+* Added `hasVisibleColumnHeaders`
+* Added `isStriped`
+* Added [Column API](/components/cerner-terra-framework-docs/table/about#column)
+* Added [Section API](/components/cerner-terra-framework-docs/table/about#section)
+* Added [Row API](/components/cerner-terra-framework-docs/table/about#row)
+* Added [Cell API](/components/cerner-terra-framework-docs/table/about#cell)
+* Added [Table Constants](/components/cerner-terra-framework-docs/table/about#table-constants)
+
+## Removed Props
+* Removed `bodyData`
+* Removed `checkStyle`
+* Removed `dividerStyle`
+* Removed `columnWidths`
+* Removed `hasChevrons`
+* Removed `headerData`
+* Removed `headerNode`
+* Removed `fill`
+* Removed `footerNode`
+* Removed `numberOfColumns`
+* Removed `numberOfRows`
+* Removed `cellPaddingStyle`
+* Removed `rowStyle`
+* Removed `scrollRefCallback`
+* Removed `showSimpleFooter`
+* Removed `summary`
+* Removed `summaryId`

packages/terra-framework-docs/src/terra-dev-site/doc/table/Version 4 Docs/About.1.doc.mdx

@@ -0,0 +1,67 @@
+import { Badge } from 'legacy-terra-table/package.json?dev-site-package';
+import { Notice } from "@cerner/terra-docs";
+
+import DefaultTable from './example/DefaultTable?dev-site-example';
+import CompactPaddingTable from './example/CompactPaddingTable?dev-site-example';
+import StripedTable from './example/StripedTable?dev-site-example';
+
+import PropsTable from 'legacy-terra-table/lib/Table?dev-site-props-table';
+
+<Badge />
+
+[![Deprecated](https://badgen.net/badge/status/Deprecated/grey)](/components/cerner-terra-framework-docs/table/version-4-docs/about)
+
+# Terra Table
+
+<Notice variant="deprecation">
+
+`terra-table@4` is no longer supported. If you are using `terra-table@4`, please upgrade to [v5](/components/cerner-terra-framework-docs/table/about).
+
+</Notice>
+
+Terra Table is a structural component used to create data tables. Table provides means to handle row selection and hooks for sortable columns.
+
+## Getting Started
+
+- Install with [npmjs](https://www.npmjs.com):
+  - `npm install terra-table@4`
+
+<!-- AUTO-GENERATED-CONTENT:START Peer Dependencies -->
+## Peer Dependencies
+
+This component requires the following peer dependencies be installed in your app for the component to properly function.
+
+| Peer Dependency | Version |
+|-|-|
+| react | ^16.8.5 |
+| react-dom | ^16.8.5 |
+| react-intl | ^2.8.0 |
+
+<!-- AUTO-GENERATED-CONTENT:END -->
+
+## Usage
+
+```jsx
+import Table from 'terra-table@4';
+```
+
+## Component Features
+
+ * [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)
+ * [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
+ * [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)
+ * [LTR/RTL Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#ltr--rtl)
+
+# Examples
+
+<DefaultTable />
+
+<StandardPaddingTable />
+
+<CompactPaddingTable />
+
+<StripedTable title="Striped Table, No Padding Table" description="(Note: the no padding style table is intended for tables with custom cell content that includes it's own internal spacing)" />
+
+## Table Props
+
+<PropsTable />