From 401d177d39d95a9569d0aad107469d2d03eeb444 Mon Sep 17 00:00:00 2001 From: Sugan G Date: Fri, 12 Jan 2024 18:54:58 +0530 Subject: [PATCH 01/22] flowsheet-col-highlight --- .../ColumnHighlight.test.jsx | 74 +++++++++++++++++++ packages/terra-table/src/Table.jsx | 14 ++++ .../clinical-lowlight-theme/Cell.module.scss | 4 + .../terra-table/src/subcomponents/Cell.jsx | 13 ++++ .../src/subcomponents/Cell.module.scss | 15 ++++ .../terra-table/src/subcomponents/Row.jsx | 25 +++++++ .../terra-table/src/subcomponents/Section.jsx | 15 ++++ 7 files changed, 160 insertions(+) create mode 100644 packages/terra-framework-docs/src/terra-dev-site/test/data-grid/flowsheet-data-grid/ColumnHighlight.test.jsx diff --git a/packages/terra-framework-docs/src/terra-dev-site/test/data-grid/flowsheet-data-grid/ColumnHighlight.test.jsx b/packages/terra-framework-docs/src/terra-dev-site/test/data-grid/flowsheet-data-grid/ColumnHighlight.test.jsx new file mode 100644 index 00000000000..14aa149cf78 --- /dev/null +++ b/packages/terra-framework-docs/src/terra-dev-site/test/data-grid/flowsheet-data-grid/ColumnHighlight.test.jsx @@ -0,0 +1,74 @@ +import React from 'react'; +import { FlowsheetDataGrid } from 'terra-data-grid'; + +const ColumnHighlight = () => { + const gridDataJSON = { + cols: [ + { id: 'Column-0', displayName: 'Vitals' }, + { id: 'Column-1', displayName: 'March 16' }, + { id: 'Column-2', displayName: 'March 17' }, + { id: 'Column-3', displayName: 'March 18' }, + ], + rows: [ + { + id: '1', + cells: [ + { content: 'Heart Rate Monitored (bpm)' }, + { content: '68' }, + { content: '66' }, + { content: '67' }, + ], + }, + { + id: '2', + cells: [ + { content: 'Temperature Oral (degC)' }, + { content: '36.7' }, + { content: '36.9' }, + { content: '37' }, + ], + }, + { + id: '3', + cells: [ + { content: 'Cardiac Index (L/min/m2)' }, + { content: '2.25' }, + { content: '2.28' }, + { content: '2.8' }, + ], + }, + { + id: '4', + cells: [ + { content: 'ICP (mmHg)' }, + { content: '11' }, + { content: '11' }, + { content: '12' }, + ], + }, + { + id: '5', + cells: [ + { content: 'CPP (mmHg)' }, + { content: '63' }, + { content: '47' }, + { content: '48' }, + ], + }, + ], + }; + + const { cols, rows } = gridDataJSON; + + return ( + + ); +}; + +export default ColumnHighlight; diff --git a/packages/terra-table/src/Table.jsx b/packages/terra-table/src/Table.jsx index 7987515f5ce..ede0816dcae 100644 --- a/packages/terra-table/src/Table.jsx +++ b/packages/terra-table/src/Table.jsx @@ -579,6 +579,18 @@ function Table(props) { const tableStyle = { marginRight: hasResizableCol ? `${TableConstants.TABLE_MARGIN_RIGHT}px` : '0', }; + + // Set first and last row Ids + let firstRowId; + let lastRowId; + + if (rows && rows.length) { + firstRowId = rows[0].id; + lastRowId = rows[rows.length - 1].id; + } else if (sections && sections.length && sections[0].rows && sections[0].rows.length) { + firstRowId = sections[0].rows[0].id; + lastRowId = sections[sections.length - 1].rows[sections[sections.length - 1].rows.length - 1].id; + } // ------------------------------------- @@ -648,6 +660,8 @@ function Table(props) { onSectionSelect={onSectionSelect} rowMinimumHeight={rowMinimumHeight} boundingRef={boundingRef} + firstRowId={firstRowId} + lastRowId={lastRowId} /> ))} diff --git a/packages/terra-table/src/clinical-lowlight-theme/Cell.module.scss b/packages/terra-table/src/clinical-lowlight-theme/Cell.module.scss index 87484e91adf..c85c8047ec7 100644 --- a/packages/terra-table/src/clinical-lowlight-theme/Cell.module.scss +++ b/packages/terra-table/src/clinical-lowlight-theme/Cell.module.scss @@ -5,11 +5,15 @@ --terra-table-cell-border-right: 1px solid #181b1d; --terra-table-cell-focus-outline: 3px dashed #fff; --terra-table-cell-selected-background-color: #1e3a49; + --terra-table-cell-highlighted-not-hover-background-color: #1e3a49; --terra-table-last-pinned-cell-border-right: 2px solid #181b1d; --terra-table-mask-background: repeating-linear-gradient(-45deg, #434647, #434647 3px, transparent 3px, transparent 6px); --terra-table-highlight-mask-background: repeating-linear-gradient(-45deg, #434647, #434647 3px, transparent 3px, transparent 6px); --terra-table-odd-row-hover-background-color: #25282a; --terra-table-even-row-hover-background-color: #1d2225; --terra-table-pinned-columns-cell-border: 1px solid #181b1d; + --terra-table-cell-highlighted-not-hover-box-shadow: inset 1px 0 0 0 #004c76, inset -1px 0 0 0 #004c76; + --terra-table-cell-highlighted-not-hover-first-box-shadow: inset 1px 0 0 0 #004c76, inset -1px 0 0 0 #004c76, inset 0 1px 0 0 #004c76; + --terra-table-cell-highlighted-not-hover-last-box-shadow: inset 1px 0 0 0 #004c76, inset -1px 0 0 0 #004c76, inset 0 -1px 0 0 #004c76; } } diff --git a/packages/terra-table/src/subcomponents/Cell.jsx b/packages/terra-table/src/subcomponents/Cell.jsx index 4525cf4ff42..df4c66462ce 100644 --- a/packages/terra-table/src/subcomponents/Cell.jsx +++ b/packages/terra-table/src/subcomponents/Cell.jsx @@ -118,6 +118,17 @@ const propTypes = { * The intl object containing translations. This is retrieved from the context automatically by injectIntl. */ intl: PropTypes.shape({ formatMessage: PropTypes.func }).isRequired, + /** + * @private + * Id of the first row in table + */ + firstRowId: PropTypes.string, + + /** + * @private + * Id of the last row in table + */ + lastRowId: PropTypes.string, }; const defaultProps = { @@ -148,6 +159,8 @@ function Cell(props) { rowMinimumHeight, sectionId, tableId, + firstRowId, + lastRowId, } = props; const cellRef = useRef(); diff --git a/packages/terra-table/src/subcomponents/Cell.module.scss b/packages/terra-table/src/subcomponents/Cell.module.scss index 5abb1a8b588..fa078aa6914 100644 --- a/packages/terra-table/src/subcomponents/Cell.module.scss +++ b/packages/terra-table/src/subcomponents/Cell.module.scss @@ -36,6 +36,21 @@ background: var(--terra-table-highlight-mask-background, repeating-linear-gradient(-45deg, #cfd2d3, #cfd2d3 3px, #cbe7fa 3px, #cbe7fa 6px)); } + .column-highlight:not(:hover) { + background-color: var(--terra-table-cell-highlighted-not-hover-background-color, #cbe7fa); + box-shadow: var(--terra-table-cell-highlighted-not-hover-box-shadow, inset 1px 0 0 0 #0092e0, inset -1px 0 0 0 #0092e0); + } + + .first-highlight:not(:hover) { + background-color: var(--terra-table-cell-highlighted-not-hover-background-color, #cbe7fa); + box-shadow: var(--terra-table-cell-highlighted-not-hover-first-box-shadow, inset 1px 0 0 0 #0092e0, inset -1px 0 0 0 #0092e0, inset 0 1px 0 0 #0092e0); + } + + .last-highlight:not(:hover) { + background-color: var(--terra-table-cell-highlighted-not-hover-background-color, #cbe7fa); + box-shadow: var(--terra-table-cell-highlighted-not-hover-last-box-shadow, inset 1px 0 0 0 #0092e0, inset -1px 0 0 0 #0092e0, inset 0 -1px 0 0 #0092e0); + } + .cell-content { overflow: hidden; overflow-wrap: break-word; diff --git a/packages/terra-table/src/subcomponents/Row.jsx b/packages/terra-table/src/subcomponents/Row.jsx index 150684a4c74..797bba72dfe 100644 --- a/packages/terra-table/src/subcomponents/Row.jsx +++ b/packages/terra-table/src/subcomponents/Row.jsx @@ -88,6 +88,27 @@ const propTypes = { * Index can be set to -1 if row headers are not required. */ rowHeaderIndex: PropTypes.number, + + /** + * A Unique Identifier of the [column](/components/components/cerner-terra-framework-docs/table/about#column). + * If provided, column with specified identifier will be highlighted in data-grid. + * + * ![IMPORTANT](https://badgen.net/badge/UX/Design-Standards/blue) The column highlight feature should be limited specifically to + * time and timeline concepts only, best used with special instruction and guidance from User Experience to ensure proper standards. + */ + columnHighlightId: PropTypes.string, + + /** + * @private + * Id of the first row in table + */ + firstRowId: PropTypes.string, + + /** + * @private + * Id of the last row in table + */ + lastRowId: PropTypes.string, }; const defaultProps = { @@ -111,6 +132,8 @@ function Row(props) { rowHeaderIndex, onCellSelect, rowMinimumHeight, + firstRowId, + lastRowId, } = props; const theme = useContext(ThemeContext); @@ -178,6 +201,8 @@ function Row(props) { height={height} rowMinimumHeight={rowMinimumHeight} rowHeaderIndex={rowHeaderIndex} + firstRowId={firstRowId} + lastRowId={lastRowId} > {cellData.content} diff --git a/packages/terra-table/src/subcomponents/Section.jsx b/packages/terra-table/src/subcomponents/Section.jsx index b47ab277fb7..92c9c2bc760 100644 --- a/packages/terra-table/src/subcomponents/Section.jsx +++ b/packages/terra-table/src/subcomponents/Section.jsx @@ -106,6 +106,17 @@ const propTypes = { * Bounding container for the table, will use window if no value provided. */ boundingRef: PropTypes.func, + /** + * @private + * Id of the first row in table + */ + firstRowId: PropTypes.string, + + /** + * @private + * Id of the last row in table + */ + lastRowId: PropTypes.string, }; const defaultProps = { @@ -134,6 +145,8 @@ function Section(props) { onSectionSelect, rowMinimumHeight, boundingRef, + firstRowId, + lastRowId, } = props; const theme = useContext(ThemeContext); @@ -203,6 +216,8 @@ function Section(props) { isSelected={row.isSelected} isTableStriped={isTableStriped} rowMinimumHeight={rowMinimumHeight} + firstRowId={firstRowId} + lastRowId={lastRowId} /> ))} From a85f212511fe6de92f9da61bd9dc0cd043e69866 Mon Sep 17 00:00:00 2001 From: Sugan G Date: Tue, 30 Jan 2024 14:19:08 +0530 Subject: [PATCH 02/22] orange and green highlighting --- .../terra-data-grid/src/FlowsheetDataGrid.jsx | 1 + .../FlowsheetDataGrid.4/About.5.doc.mdx | 4 +- .../Examples.6/ColumnHighlight.6.doc.mdx | 9 +++ .../Examples.6/ColumnHighlight.jsx | 74 ++++++++++++++++++ .../Examples.6/ColumnHighlightGreen.7.doc.mdx | 9 +++ .../Examples.6/ColumnHighlightGreen.jsx | 75 +++++++++++++++++++ .../ColumnHighlightGreen.test.jsx | 75 +++++++++++++++++++ .../clinical-lowlight-theme/Cell.module.scss | 8 +- .../terra-table/src/subcomponents/Cell.jsx | 6 ++ .../src/subcomponents/Cell.module.scss | 27 +++++-- .../terra-table/src/subcomponents/Row.jsx | 7 ++ .../terra-table/src/subcomponents/Section.jsx | 2 + 12 files changed, 286 insertions(+), 11 deletions(-) create mode 100644 packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlight.6.doc.mdx create mode 100644 packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlight.jsx create mode 100644 packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlightGreen.7.doc.mdx create mode 100644 packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlightGreen.jsx create mode 100644 packages/terra-framework-docs/src/terra-dev-site/test/data-grid/flowsheet-data-grid/ColumnHighlightGreen.test.jsx diff --git a/packages/terra-data-grid/src/FlowsheetDataGrid.jsx b/packages/terra-data-grid/src/FlowsheetDataGrid.jsx index 52aaf10617c..989a259a863 100644 --- a/packages/terra-data-grid/src/FlowsheetDataGrid.jsx +++ b/packages/terra-data-grid/src/FlowsheetDataGrid.jsx @@ -120,6 +120,7 @@ const defaultProps = { rows: [], columns: [], hasVisibleColumnHeaders: true, + colorHighlightColor: 'orange', }; function FlowsheetDataGrid(props) { diff --git a/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/About.5.doc.mdx b/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/About.5.doc.mdx index 88253f31fc8..712d23fb2a4 100644 --- a/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/About.5.doc.mdx +++ b/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/About.5.doc.mdx @@ -44,6 +44,8 @@ See [keyboard interactions](/components/cerner-terra-framework-docs/data-grid/fl |[ColumnHeadersHidden](/components/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/examples/column-headers-hidden)|An example containing visually hidden column headers.| |[RowSelection](/components/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/examples/row-selection)|An example demonstrating the ability to select a row of cells.| |[Flowsheet Data Grid with Sections](/components/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/examples/flowsheet-with-sections)|An example demonstrating how to create a Flowsheet Data Grid with sections.| +|[ColumnHighlight](/components/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/examples/column-highlight)|An example of the Flowsheet Data Grid with column highlighting.| +|[ColumnHighlightGreen](/components/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/examples/column-highlight-green)|An example of the Flowsheet Data Grid with green column highlighting.| ## Accessibility ### Keyboard Interactions @@ -105,7 +107,7 @@ import { FlowsheetDataGrid } from 'terra-data-grid'; ## Properties -When making changes to the columns, section, rows, or cells, the Flowsheet Data Grid component requires you to pass new objects so that React can detect the changes. +When making changes to the columns, section, rows, or cells, the Flowsheet Data Grid component requires you to pass new objects so that React can detect the changes. In addition, ensure that you memoize callback functions using methods such as the useCallback hook to prevent unnecessary rerenders of components. diff --git a/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlight.6.doc.mdx b/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlight.6.doc.mdx new file mode 100644 index 00000000000..0f4f744b05f --- /dev/null +++ b/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlight.6.doc.mdx @@ -0,0 +1,9 @@ +import ColumnHighlight from "./ColumnHighlight"; + +# Flowsheet Data Grid with column highlighting + +### Description + +This example demonstrates a basic [Flowsheet Data Grid](/components/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/about) with column highlighting. + + diff --git a/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlight.jsx b/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlight.jsx new file mode 100644 index 00000000000..14aa149cf78 --- /dev/null +++ b/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlight.jsx @@ -0,0 +1,74 @@ +import React from 'react'; +import { FlowsheetDataGrid } from 'terra-data-grid'; + +const ColumnHighlight = () => { + const gridDataJSON = { + cols: [ + { id: 'Column-0', displayName: 'Vitals' }, + { id: 'Column-1', displayName: 'March 16' }, + { id: 'Column-2', displayName: 'March 17' }, + { id: 'Column-3', displayName: 'March 18' }, + ], + rows: [ + { + id: '1', + cells: [ + { content: 'Heart Rate Monitored (bpm)' }, + { content: '68' }, + { content: '66' }, + { content: '67' }, + ], + }, + { + id: '2', + cells: [ + { content: 'Temperature Oral (degC)' }, + { content: '36.7' }, + { content: '36.9' }, + { content: '37' }, + ], + }, + { + id: '3', + cells: [ + { content: 'Cardiac Index (L/min/m2)' }, + { content: '2.25' }, + { content: '2.28' }, + { content: '2.8' }, + ], + }, + { + id: '4', + cells: [ + { content: 'ICP (mmHg)' }, + { content: '11' }, + { content: '11' }, + { content: '12' }, + ], + }, + { + id: '5', + cells: [ + { content: 'CPP (mmHg)' }, + { content: '63' }, + { content: '47' }, + { content: '48' }, + ], + }, + ], + }; + + const { cols, rows } = gridDataJSON; + + return ( + + ); +}; + +export default ColumnHighlight; diff --git a/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlightGreen.7.doc.mdx b/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlightGreen.7.doc.mdx new file mode 100644 index 00000000000..4bd5bef25c0 --- /dev/null +++ b/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlightGreen.7.doc.mdx @@ -0,0 +1,9 @@ +import ColumnHighlightGreen from "./ColumnHighlightGreen"; + +# Flowsheet Data Grid with green column highlighting + +### Description + +This example demonstrates a basic [Flowsheet Data Grid](/components/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/about) with green column highlighting. + + diff --git a/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlightGreen.jsx b/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlightGreen.jsx new file mode 100644 index 00000000000..6c44968b99d --- /dev/null +++ b/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlightGreen.jsx @@ -0,0 +1,75 @@ +import React from 'react'; +import { FlowsheetDataGrid } from 'terra-data-grid'; + +const ColumnHighlightGreen = () => { + const gridDataJSON = { + cols: [ + { id: 'Column-0', displayName: 'Vitals' }, + { id: 'Column-1', displayName: 'March 16' }, + { id: 'Column-2', displayName: 'March 17' }, + { id: 'Column-3', displayName: 'March 18' }, + ], + rows: [ + { + id: '1', + cells: [ + { content: 'Heart Rate Monitored (bpm)' }, + { content: '68' }, + { content: '66' }, + { content: '67' }, + ], + }, + { + id: '2', + cells: [ + { content: 'Temperature Oral (degC)' }, + { content: '36.7' }, + { content: '36.9' }, + { content: '37' }, + ], + }, + { + id: '3', + cells: [ + { content: 'Cardiac Index (L/min/m2)' }, + { content: '2.25' }, + { content: '2.28' }, + { content: '2.8' }, + ], + }, + { + id: '4', + cells: [ + { content: 'ICP (mmHg)' }, + { content: '11' }, + { content: '11' }, + { content: '12' }, + ], + }, + { + id: '5', + cells: [ + { content: 'CPP (mmHg)' }, + { content: '63' }, + { content: '47' }, + { content: '48' }, + ], + }, + ], + }; + + const { cols, rows } = gridDataJSON; + + return ( + + ); +}; + +export default ColumnHighlightGreen; diff --git a/packages/terra-framework-docs/src/terra-dev-site/test/data-grid/flowsheet-data-grid/ColumnHighlightGreen.test.jsx b/packages/terra-framework-docs/src/terra-dev-site/test/data-grid/flowsheet-data-grid/ColumnHighlightGreen.test.jsx new file mode 100644 index 00000000000..6c44968b99d --- /dev/null +++ b/packages/terra-framework-docs/src/terra-dev-site/test/data-grid/flowsheet-data-grid/ColumnHighlightGreen.test.jsx @@ -0,0 +1,75 @@ +import React from 'react'; +import { FlowsheetDataGrid } from 'terra-data-grid'; + +const ColumnHighlightGreen = () => { + const gridDataJSON = { + cols: [ + { id: 'Column-0', displayName: 'Vitals' }, + { id: 'Column-1', displayName: 'March 16' }, + { id: 'Column-2', displayName: 'March 17' }, + { id: 'Column-3', displayName: 'March 18' }, + ], + rows: [ + { + id: '1', + cells: [ + { content: 'Heart Rate Monitored (bpm)' }, + { content: '68' }, + { content: '66' }, + { content: '67' }, + ], + }, + { + id: '2', + cells: [ + { content: 'Temperature Oral (degC)' }, + { content: '36.7' }, + { content: '36.9' }, + { content: '37' }, + ], + }, + { + id: '3', + cells: [ + { content: 'Cardiac Index (L/min/m2)' }, + { content: '2.25' }, + { content: '2.28' }, + { content: '2.8' }, + ], + }, + { + id: '4', + cells: [ + { content: 'ICP (mmHg)' }, + { content: '11' }, + { content: '11' }, + { content: '12' }, + ], + }, + { + id: '5', + cells: [ + { content: 'CPP (mmHg)' }, + { content: '63' }, + { content: '47' }, + { content: '48' }, + ], + }, + ], + }; + + const { cols, rows } = gridDataJSON; + + return ( + + ); +}; + +export default ColumnHighlightGreen; diff --git a/packages/terra-table/src/clinical-lowlight-theme/Cell.module.scss b/packages/terra-table/src/clinical-lowlight-theme/Cell.module.scss index c85c8047ec7..30ca4cea72d 100644 --- a/packages/terra-table/src/clinical-lowlight-theme/Cell.module.scss +++ b/packages/terra-table/src/clinical-lowlight-theme/Cell.module.scss @@ -5,15 +5,15 @@ --terra-table-cell-border-right: 1px solid #181b1d; --terra-table-cell-focus-outline: 3px dashed #fff; --terra-table-cell-selected-background-color: #1e3a49; - --terra-table-cell-highlighted-not-hover-background-color: #1e3a49; + --terra-table-cell-highlighted-not-hover-background-color: rgba(255, 177, 102, 0.1); --terra-table-last-pinned-cell-border-right: 2px solid #181b1d; --terra-table-mask-background: repeating-linear-gradient(-45deg, #434647, #434647 3px, transparent 3px, transparent 6px); --terra-table-highlight-mask-background: repeating-linear-gradient(-45deg, #434647, #434647 3px, transparent 3px, transparent 6px); --terra-table-odd-row-hover-background-color: #25282a; --terra-table-even-row-hover-background-color: #1d2225; --terra-table-pinned-columns-cell-border: 1px solid #181b1d; - --terra-table-cell-highlighted-not-hover-box-shadow: inset 1px 0 0 0 #004c76, inset -1px 0 0 0 #004c76; - --terra-table-cell-highlighted-not-hover-first-box-shadow: inset 1px 0 0 0 #004c76, inset -1px 0 0 0 #004c76, inset 0 1px 0 0 #004c76; - --terra-table-cell-highlighted-not-hover-last-box-shadow: inset 1px 0 0 0 #004c76, inset -1px 0 0 0 #004c76, inset 0 -1px 0 0 #004c76; + --terra-table-cell-highlighted-not-hover-box-shadow: inset 1px 0 0 0 #ffb166, inset -1px 0 0 0 #ffb166; + --terra-table-cell-highlighted-not-hover-first-box-shadow: inset 1px 0 0 0 #ffb166, inset -1px 0 0 0 #ffb166, inset 0 1px 0 0 #ffb166; + --terra-table-cell-highlighted-not-hover-last-box-shadow: inset 1px 0 0 0 #ffb166, inset -1px 0 0 0 #ffb166, inset 0 -1px 0 0 #ffb166; } } diff --git a/packages/terra-table/src/subcomponents/Cell.jsx b/packages/terra-table/src/subcomponents/Cell.jsx index df4c66462ce..bbc2f2d0ad6 100644 --- a/packages/terra-table/src/subcomponents/Cell.jsx +++ b/packages/terra-table/src/subcomponents/Cell.jsx @@ -129,6 +129,11 @@ const propTypes = { * Id of the last row in table */ lastRowId: PropTypes.string, + + /** + * The color to be used for highlighting a column. + */ + colorHighlightColor: PropTypes.oneOf(['orange', 'green']), }; const defaultProps = { @@ -161,6 +166,7 @@ function Cell(props) { tableId, firstRowId, lastRowId, + colorHighlightColor, } = props; const cellRef = useRef(); diff --git a/packages/terra-table/src/subcomponents/Cell.module.scss b/packages/terra-table/src/subcomponents/Cell.module.scss index fa078aa6914..7b3022698f9 100644 --- a/packages/terra-table/src/subcomponents/Cell.module.scss +++ b/packages/terra-table/src/subcomponents/Cell.module.scss @@ -37,18 +37,33 @@ } .column-highlight:not(:hover) { - background-color: var(--terra-table-cell-highlighted-not-hover-background-color, #cbe7fa); - box-shadow: var(--terra-table-cell-highlighted-not-hover-box-shadow, inset 1px 0 0 0 #0092e0, inset -1px 0 0 0 #0092e0); + background-color: var(--terra-table-cell-highlighted-not-hover-background-color, rgba(250, 203, 170, 0.38)); + box-shadow: var(--terra-table-cell-highlighted-not-hover-box-shadow, inset 1px 0 0 0 #c97318, inset -1px 0 0 0 #c97318); + } + + .column-highlight-green:not(:hover) { + background-color: var(--terra-table-cell-highlighted-green-not-hover-background-color, rgba(87, 146, 47, 0.15)); + box-shadow: var(--terra-table-cell-highlighted-green-not-hover-box-shadow, inset 1px 0 0 0 #57922f, inset -1px 0 0 0 #57922f); } .first-highlight:not(:hover) { - background-color: var(--terra-table-cell-highlighted-not-hover-background-color, #cbe7fa); - box-shadow: var(--terra-table-cell-highlighted-not-hover-first-box-shadow, inset 1px 0 0 0 #0092e0, inset -1px 0 0 0 #0092e0, inset 0 1px 0 0 #0092e0); + background-color: var(--terra-table-cell-highlighted-not-hover-background-color, rgba(250, 203, 170, 0.38)); + box-shadow: var(--terra-table-cell-highlighted-not-hover-first-box-shadow, inset 1px 0 0 0 #c97318, inset -1px 0 0 0 #c97318, inset 0 1px 0 0 #c97318); + } + + .first-highlight-green:not(:hover) { + background-color: var(--terra-table-cell-highlighted-green-not-hover-background-color, rgba(87, 146, 47, 0.15)); + box-shadow: var(--terra-table-cell-highlighted-green-not-hover-first-box-shadow, inset 1px 0 0 0 #57922f, inset -1px 0 0 0 #57922f, inset 0 1px 0 0 #57922f); } .last-highlight:not(:hover) { - background-color: var(--terra-table-cell-highlighted-not-hover-background-color, #cbe7fa); - box-shadow: var(--terra-table-cell-highlighted-not-hover-last-box-shadow, inset 1px 0 0 0 #0092e0, inset -1px 0 0 0 #0092e0, inset 0 -1px 0 0 #0092e0); + background-color: var(--terra-table-cell-highlighted-not-hover-background-color, rgba(250, 203, 170, 0.38)); + box-shadow: var(--terra-table-cell-highlighted-not-hover-last-box-shadow, inset 1px 0 0 0 #c97318, inset -1px 0 0 0 #c97318, inset 0 -1px 0 0 #c97318); + } + + .last-highlight-green:not(:hover) { + background-color: var(--terra-table-cell-highlighted-green-not-hover-background-color, rgba(87, 146, 47, 0.15)); + box-shadow: var(--terra-table-cell-highlighted-green-not-hover-last-box-shadow, inset 1px 0 0 0 #57922f, inset -1px 0 0 0 #57922f, inset 0 -1px 0 0 #57922f); } .cell-content { diff --git a/packages/terra-table/src/subcomponents/Row.jsx b/packages/terra-table/src/subcomponents/Row.jsx index 797bba72dfe..19c1cc21500 100644 --- a/packages/terra-table/src/subcomponents/Row.jsx +++ b/packages/terra-table/src/subcomponents/Row.jsx @@ -109,6 +109,11 @@ const propTypes = { * Id of the last row in table */ lastRowId: PropTypes.string, + + /** + * The color to be used for highlighting a column. + */ + colorHighlightColor: PropTypes.oneOf(['orange', 'green']), }; const defaultProps = { @@ -134,6 +139,7 @@ function Row(props) { rowMinimumHeight, firstRowId, lastRowId, + colorHighlightColor, } = props; const theme = useContext(ThemeContext); @@ -203,6 +209,7 @@ function Row(props) { rowHeaderIndex={rowHeaderIndex} firstRowId={firstRowId} lastRowId={lastRowId} + colorHighlightColor={colorHighlightColor} > {cellData.content} diff --git a/packages/terra-table/src/subcomponents/Section.jsx b/packages/terra-table/src/subcomponents/Section.jsx index 92c9c2bc760..d00cee3c5d3 100644 --- a/packages/terra-table/src/subcomponents/Section.jsx +++ b/packages/terra-table/src/subcomponents/Section.jsx @@ -147,6 +147,7 @@ function Section(props) { boundingRef, firstRowId, lastRowId, + colorHighlightColor, } = props; const theme = useContext(ThemeContext); @@ -218,6 +219,7 @@ function Section(props) { rowMinimumHeight={rowMinimumHeight} firstRowId={firstRowId} lastRowId={lastRowId} + colorHighlightColor={colorHighlightColor} /> ))} From 139e7e7f3f0438a172027b9fb91b0429e2c1be3c Mon Sep 17 00:00:00 2001 From: Sugan G Date: Tue, 30 Jan 2024 18:58:47 +0530 Subject: [PATCH 03/22] added wdio test, changelog --- .../tests/wdio/flowsheet-data-grid-spec.js | 18 +++++++++++++++++- .../Examples.6/ColumnHighlight.jsx | 2 +- .../Examples.6/ColumnHighlightGreen.jsx | 2 +- .../ColumnHighlight.test.jsx | 2 +- .../ColumnHighlightGreen.test.jsx | 2 +- packages/terra-table/CHANGELOG.md | 3 +++ 6 files changed, 24 insertions(+), 5 deletions(-) diff --git a/packages/terra-data-grid/tests/wdio/flowsheet-data-grid-spec.js b/packages/terra-data-grid/tests/wdio/flowsheet-data-grid-spec.js index 7261cf48257..78b78506947 100644 --- a/packages/terra-data-grid/tests/wdio/flowsheet-data-grid-spec.js +++ b/packages/terra-data-grid/tests/wdio/flowsheet-data-grid-spec.js @@ -81,7 +81,23 @@ Terra.describeViewports('FlowsheetDataGrid', ['medium', 'large'], () => { expect(browser.$('//*[@id="terra-flowsheet-data-grid-no-column-headers-table-rowheader-1"]').isFocused()).toBe(true); }); }); - }); + + // describe('flowsheet data grid with column highlight', () => { + // it('renders a flowsheet with default column highlight', () => { + // browser.url('/raw/tests/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/column-highlight'); + // browser.keys(['Tab']); // Cell 0,0 gets focus + // expect(browser.$('tr.column-header-row th:nth-child(1)').isFocused()).toBe(true); + // Terra.validates.element('flowsheet-data-grid-column-highlight', { selector: '#terra-flowsheet-data-grid-column-highlight' }); + // }); + // + // it('renders a flowsheet data grid with green column highlight', () => { + // browser.url('/raw/tests/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/column-highlight-green'); + // browser.keys(['Tab']); // Cell 0,0 gets focus + // expect(browser.$('tr.column-header-row th:nth-child(1)').isFocused()).toBe(true); + // Terra.validates.element('flowsheet-data-grid-column-highlight-green', { selector: '#terra-flowsheet-data-grid-column-highlight-green' }); + // }); + // }); + // }); describe('Cell selection', () => { const cellSelectionSelector = '#terra-flowsheet-data-grid-cell-selection-table'; diff --git a/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlight.jsx b/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlight.jsx index 14aa149cf78..8484898d6d9 100644 --- a/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlight.jsx +++ b/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlight.jsx @@ -62,7 +62,7 @@ const ColumnHighlight = () => { return ( { return ( { return ( { return ( Date: Tue, 30 Jan 2024 19:00:54 +0530 Subject: [PATCH 04/22] syntax fix --- packages/terra-data-grid/tests/wdio/flowsheet-data-grid-spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/terra-data-grid/tests/wdio/flowsheet-data-grid-spec.js b/packages/terra-data-grid/tests/wdio/flowsheet-data-grid-spec.js index 78b78506947..6a6a750f77e 100644 --- a/packages/terra-data-grid/tests/wdio/flowsheet-data-grid-spec.js +++ b/packages/terra-data-grid/tests/wdio/flowsheet-data-grid-spec.js @@ -97,7 +97,7 @@ Terra.describeViewports('FlowsheetDataGrid', ['medium', 'large'], () => { // Terra.validates.element('flowsheet-data-grid-column-highlight-green', { selector: '#terra-flowsheet-data-grid-column-highlight-green' }); // }); // }); - // }); + }); describe('Cell selection', () => { const cellSelectionSelector = '#terra-flowsheet-data-grid-cell-selection-table'; From 3955482c590e39f97d3024de1e794cef193be146 Mon Sep 17 00:00:00 2001 From: Sugan G Date: Wed, 31 Jan 2024 15:23:08 +0530 Subject: [PATCH 05/22] renamed prop, marked private --- .../terra-data-grid/src/FlowsheetDataGrid.jsx | 2 +- .../jest/__snapshots__/DataGrid.test.jsx.snap | 150 +++ .../FlowsheetDataGrid.test.jsx.snap | 2 + .../WorklistDataGrid.test.jsx.snap | 1102 +++++++++++++++++ .../Examples.6/ColumnHighlightGreen.jsx | 2 +- .../ColumnHighlightGreen.test.jsx | 2 +- .../terra-table/src/subcomponents/Cell.jsx | 5 +- .../terra-table/src/subcomponents/Row.jsx | 8 +- .../terra-table/src/subcomponents/Section.jsx | 4 +- .../jest/__snapshots__/Table.test.jsx.snap | 30 + 10 files changed, 1297 insertions(+), 10 deletions(-) diff --git a/packages/terra-data-grid/src/FlowsheetDataGrid.jsx b/packages/terra-data-grid/src/FlowsheetDataGrid.jsx index 989a259a863..f29c7b7d6a2 100644 --- a/packages/terra-data-grid/src/FlowsheetDataGrid.jsx +++ b/packages/terra-data-grid/src/FlowsheetDataGrid.jsx @@ -120,7 +120,7 @@ const defaultProps = { rows: [], columns: [], hasVisibleColumnHeaders: true, - colorHighlightColor: 'orange', + columnHighlightColor: 'orange', }; function FlowsheetDataGrid(props) { diff --git a/packages/terra-data-grid/tests/jest/__snapshots__/DataGrid.test.jsx.snap b/packages/terra-data-grid/tests/jest/__snapshots__/DataGrid.test.jsx.snap index 148efe2595c..9999479b95d 100644 --- a/packages/terra-data-grid/tests/jest/__snapshots__/DataGrid.test.jsx.snap +++ b/packages/terra-data-grid/tests/jest/__snapshots__/DataGrid.test.jsx.snap @@ -1183,10 +1183,12 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres }, ] } + firstRowId="1" id="00000000-0000-0000-0000-000000000000" isHidden={true} isTableStriped={true} key="00000000-0000-0000-0000-000000000000" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowMinimumHeight="auto" @@ -1316,6 +1318,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres id="1" isTableStriped={true} key="1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowIndex={2} @@ -1339,6 +1342,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isRowHeader={true} isSelectable={false} key="1_Column-0" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -1380,6 +1384,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isMasked={false} isRowHeader={true} isSelectable={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -1437,6 +1442,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isRowHeader={false} isSelectable={true} key="1_Column-1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -1478,6 +1484,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isMasked={false} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -1537,6 +1544,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isRowHeader={false} isSelectable={true} key="1_Column-2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -1578,6 +1586,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isMasked={true} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -1674,6 +1683,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres id="2" isTableStriped={true} key="2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowIndex={3} @@ -1697,6 +1707,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isRowHeader={true} isSelectable={true} key="2_Column-0" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -1738,6 +1749,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isMasked={false} isRowHeader={true} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -1795,6 +1807,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isRowHeader={false} isSelectable={true} key="2_Column-1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -1836,6 +1849,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isMasked={false} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -1891,6 +1905,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isRowHeader={false} isSelectable={true} key="2_Column-2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -1932,6 +1947,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isMasked={true} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -2028,6 +2044,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres id="3" isTableStriped={true} key="3" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowIndex={4} @@ -2051,6 +2068,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isRowHeader={true} isSelectable={true} key="3_Column-0" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -2092,6 +2110,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isMasked={false} isRowHeader={true} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -2149,6 +2168,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isRowHeader={false} isSelectable={true} key="3_Column-1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -2190,6 +2210,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isMasked={false} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -2245,6 +2266,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isRowHeader={false} isSelectable={true} key="3_Column-2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -2286,6 +2308,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isMasked={true} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -2382,6 +2405,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isSelected={true} isTableStriped={true} key="4" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowIndex={5} @@ -2405,6 +2429,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isRowHeader={true} isSelectable={true} key="4_Column-0" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -2446,6 +2471,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isMasked={false} isRowHeader={true} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -2503,6 +2529,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isRowHeader={false} isSelectable={true} key="4_Column-1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -2544,6 +2571,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isMasked={false} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -2598,6 +2626,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isRowHeader={false} isSelectable={true} key="4_Column-2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -2639,6 +2668,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isMasked={false} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -3926,10 +3956,12 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres }, ] } + firstRowId="1" id="00000000-0000-0000-0000-000000000000" isHidden={true} isTableStriped={true} key="00000000-0000-0000-0000-000000000000" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowMinimumHeight="auto" @@ -4059,6 +4091,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres id="1" isTableStriped={true} key="1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowIndex={2} @@ -4082,6 +4115,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isRowHeader={true} isSelectable={false} key="1_Column-0" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -4123,6 +4157,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isMasked={false} isRowHeader={true} isSelectable={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -4180,6 +4215,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isRowHeader={false} isSelectable={true} key="1_Column-1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -4221,6 +4257,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isMasked={false} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -4280,6 +4317,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isRowHeader={false} isSelectable={true} key="1_Column-2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -4321,6 +4359,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isMasked={true} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -4417,6 +4456,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres id="2" isTableStriped={true} key="2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowIndex={3} @@ -4440,6 +4480,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isRowHeader={true} isSelectable={true} key="2_Column-0" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -4481,6 +4522,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isMasked={false} isRowHeader={true} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -4538,6 +4580,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isRowHeader={false} isSelectable={true} key="2_Column-1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -4579,6 +4622,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isMasked={false} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -4634,6 +4678,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isRowHeader={false} isSelectable={true} key="2_Column-2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -4675,6 +4720,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isMasked={true} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -4771,6 +4817,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres id="3" isTableStriped={true} key="3" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowIndex={4} @@ -4794,6 +4841,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isRowHeader={true} isSelectable={true} key="3_Column-0" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -4835,6 +4883,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isMasked={false} isRowHeader={true} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -4892,6 +4941,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isRowHeader={false} isSelectable={true} key="3_Column-1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -4933,6 +4983,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isMasked={false} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -4988,6 +5039,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isRowHeader={false} isSelectable={true} key="3_Column-2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -5029,6 +5081,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isMasked={true} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -5125,6 +5178,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isSelected={true} isTableStriped={true} key="4" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowIndex={5} @@ -5148,6 +5202,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isRowHeader={true} isSelectable={true} key="4_Column-0" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -5189,6 +5244,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isMasked={false} isRowHeader={true} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -5246,6 +5302,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isRowHeader={false} isSelectable={true} key="4_Column-1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -5287,6 +5344,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isMasked={false} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -5341,6 +5399,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isRowHeader={false} isSelectable={true} key="4_Column-2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -5382,6 +5441,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres isMasked={false} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -6781,10 +6841,12 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` }, ] } + firstRowId="1" id="00000000-0000-0000-0000-000000000000" isHidden={true} isTableStriped={true} key="00000000-0000-0000-0000-000000000000" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowMinimumHeight="auto" @@ -6923,6 +6985,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` id="1" isTableStriped={true} key="1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowIndex={2} @@ -7095,6 +7158,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` isSelectable={false} isSelected={false} key="1_Column-0" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -7137,6 +7201,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` isRowHeader={true} isSelectable={false} isSelected={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -7195,6 +7260,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` isSelectable={true} isSelected={false} key="1_Column-1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -7237,6 +7303,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` isRowHeader={false} isSelectable={true} isSelected={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -7297,6 +7364,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` isSelectable={true} isSelected={false} key="1_Column-2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -7339,6 +7407,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` isRowHeader={false} isSelectable={true} isSelected={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -7443,6 +7512,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` id="2" isTableStriped={true} key="2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowIndex={3} @@ -7615,6 +7685,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` isSelectable={true} isSelected={false} key="2_Column-0" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -7657,6 +7728,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` isRowHeader={true} isSelectable={true} isSelected={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -7715,6 +7787,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` isSelectable={true} isSelected={false} key="2_Column-1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -7757,6 +7830,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` isRowHeader={false} isSelectable={true} isSelected={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -7813,6 +7887,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` isSelectable={true} isSelected={false} key="2_Column-2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -7855,6 +7930,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` isRowHeader={false} isSelectable={true} isSelected={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -7959,6 +8035,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` id="3" isTableStriped={true} key="3" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowIndex={4} @@ -8131,6 +8208,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` isSelectable={true} isSelected={false} key="3_Column-0" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -8173,6 +8251,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` isRowHeader={true} isSelectable={true} isSelected={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -8231,6 +8310,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` isSelectable={true} isSelected={false} key="3_Column-1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -8273,6 +8353,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` isRowHeader={false} isSelectable={true} isSelected={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -8329,6 +8410,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` isSelectable={true} isSelected={false} key="3_Column-2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -8371,6 +8453,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` isRowHeader={false} isSelectable={true} isSelected={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -8475,6 +8558,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` isSelected={true} isTableStriped={true} key="4" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowIndex={5} @@ -8647,6 +8731,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` isSelectable={true} isSelected={false} key="4_Column-0" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -8689,6 +8774,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` isRowHeader={true} isSelectable={true} isSelected={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -8747,6 +8833,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` isSelectable={true} isSelected={false} key="4_Column-1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -8789,6 +8876,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` isRowHeader={false} isSelectable={true} isSelected={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -8844,6 +8932,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` isSelectable={true} isSelected={false} key="4_Column-2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -8886,6 +8975,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` isRowHeader={false} isSelectable={true} isSelected={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -10101,10 +10191,12 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and }, ] } + firstRowId="1" id="00000000-0000-0000-0000-000000000000" isHidden={true} isTableStriped={true} key="00000000-0000-0000-0000-000000000000" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowMinimumHeight="auto" @@ -10234,6 +10326,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and id="1" isTableStriped={true} key="1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowIndex={2} @@ -10257,6 +10350,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and isRowHeader={true} isSelectable={false} key="1_Column-0" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -10298,6 +10392,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and isMasked={false} isRowHeader={true} isSelectable={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -10355,6 +10450,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and isRowHeader={false} isSelectable={true} key="1_Column-1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -10396,6 +10492,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and isMasked={false} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -10455,6 +10552,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and isRowHeader={false} isSelectable={true} key="1_Column-2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -10496,6 +10594,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and isMasked={true} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -10592,6 +10691,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and id="2" isTableStriped={true} key="2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowIndex={3} @@ -10615,6 +10715,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and isRowHeader={true} isSelectable={true} key="2_Column-0" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -10656,6 +10757,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and isMasked={false} isRowHeader={true} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -10713,6 +10815,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and isRowHeader={false} isSelectable={true} key="2_Column-1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -10754,6 +10857,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and isMasked={false} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -10809,6 +10913,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and isRowHeader={false} isSelectable={true} key="2_Column-2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -10850,6 +10955,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and isMasked={true} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -10946,6 +11052,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and id="3" isTableStriped={true} key="3" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowIndex={4} @@ -10969,6 +11076,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and isRowHeader={true} isSelectable={true} key="3_Column-0" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -11010,6 +11118,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and isMasked={false} isRowHeader={true} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -11067,6 +11176,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and isRowHeader={false} isSelectable={true} key="3_Column-1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -11108,6 +11218,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and isMasked={false} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -11163,6 +11274,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and isRowHeader={false} isSelectable={true} key="3_Column-2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -11204,6 +11316,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and isMasked={true} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -11300,6 +11413,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and isSelected={true} isTableStriped={true} key="4" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowIndex={5} @@ -11323,6 +11437,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and isRowHeader={true} isSelectable={true} key="4_Column-0" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -11364,6 +11479,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and isMasked={false} isRowHeader={true} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -11421,6 +11537,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and isRowHeader={false} isSelectable={true} key="4_Column-1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -11462,6 +11579,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and isMasked={false} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -11516,6 +11634,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and isRowHeader={false} isSelectable={true} key="4_Column-2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -11557,6 +11676,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and isMasked={false} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -12763,10 +12883,12 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` }, ] } + firstRowId="1" id="00000000-0000-0000-0000-000000000000" isHidden={true} isTableStriped={true} key="00000000-0000-0000-0000-000000000000" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowMinimumHeight="auto" @@ -12896,6 +13018,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` id="1" isTableStriped={true} key="1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowIndex={2} @@ -12919,6 +13042,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` isRowHeader={true} isSelectable={false} key="1_Column-0" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -12960,6 +13084,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` isMasked={false} isRowHeader={true} isSelectable={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -13017,6 +13142,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` isRowHeader={false} isSelectable={true} key="1_Column-1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -13058,6 +13184,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` isMasked={false} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -13117,6 +13244,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` isRowHeader={false} isSelectable={true} key="1_Column-2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -13158,6 +13286,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` isMasked={true} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -13254,6 +13383,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` id="2" isTableStriped={true} key="2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowIndex={3} @@ -13277,6 +13407,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` isRowHeader={true} isSelectable={true} key="2_Column-0" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -13318,6 +13449,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` isMasked={false} isRowHeader={true} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -13375,6 +13507,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` isRowHeader={false} isSelectable={true} key="2_Column-1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -13416,6 +13549,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` isMasked={false} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -13471,6 +13605,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` isRowHeader={false} isSelectable={true} key="2_Column-2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -13512,6 +13647,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` isMasked={true} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -13608,6 +13744,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` id="3" isTableStriped={true} key="3" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowIndex={4} @@ -13631,6 +13768,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` isRowHeader={true} isSelectable={true} key="3_Column-0" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -13672,6 +13810,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` isMasked={false} isRowHeader={true} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -13729,6 +13868,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` isRowHeader={false} isSelectable={true} key="3_Column-1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -13770,6 +13910,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` isMasked={false} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -13825,6 +13966,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` isRowHeader={false} isSelectable={true} key="3_Column-2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -13866,6 +14008,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` isMasked={true} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -13962,6 +14105,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` isSelected={true} isTableStriped={true} key="4" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowIndex={5} @@ -13985,6 +14129,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` isRowHeader={true} isSelectable={true} key="4_Column-0" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -14026,6 +14171,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` isMasked={false} isRowHeader={true} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -14083,6 +14229,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` isRowHeader={false} isSelectable={true} key="4_Column-1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -14124,6 +14271,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` isMasked={false} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -14178,6 +14326,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` isRowHeader={false} isSelectable={true} key="4_Column-2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -14219,6 +14368,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = ` isMasked={false} isRowHeader={false} isSelectable={true} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" diff --git a/packages/terra-data-grid/tests/jest/__snapshots__/FlowsheetDataGrid.test.jsx.snap b/packages/terra-data-grid/tests/jest/__snapshots__/FlowsheetDataGrid.test.jsx.snap index cbefd48a567..e3048331ac5 100644 --- a/packages/terra-data-grid/tests/jest/__snapshots__/FlowsheetDataGrid.test.jsx.snap +++ b/packages/terra-data-grid/tests/jest/__snapshots__/FlowsheetDataGrid.test.jsx.snap @@ -8,6 +8,7 @@ exports[`FlowsheetDataGrid renders the row header column as pinned and remaining { rows={rows} ariaLabel="Flowsheet Data Grid" columnHighlightId="Column-2" - colorHighlightColor="green" + columnHighlightColor="green" /> ); }; diff --git a/packages/terra-framework-docs/src/terra-dev-site/test/data-grid/flowsheet-data-grid/ColumnHighlightGreen.test.jsx b/packages/terra-framework-docs/src/terra-dev-site/test/data-grid/flowsheet-data-grid/ColumnHighlightGreen.test.jsx index 1dc99afaec5..c210c2d4bc1 100644 --- a/packages/terra-framework-docs/src/terra-dev-site/test/data-grid/flowsheet-data-grid/ColumnHighlightGreen.test.jsx +++ b/packages/terra-framework-docs/src/terra-dev-site/test/data-grid/flowsheet-data-grid/ColumnHighlightGreen.test.jsx @@ -67,7 +67,7 @@ const ColumnHighlightGreen = () => { rows={rows} ariaLabel="Flowsheet Data Grid" columnHighlightId="Column-2" - colorHighlightColor="green" + columnHighlightColor="green" /> ); }; diff --git a/packages/terra-table/src/subcomponents/Cell.jsx b/packages/terra-table/src/subcomponents/Cell.jsx index bbc2f2d0ad6..9d1fe2e4389 100644 --- a/packages/terra-table/src/subcomponents/Cell.jsx +++ b/packages/terra-table/src/subcomponents/Cell.jsx @@ -131,9 +131,10 @@ const propTypes = { lastRowId: PropTypes.string, /** + * @private * The color to be used for highlighting a column. */ - colorHighlightColor: PropTypes.oneOf(['orange', 'green']), + columnHighlightColor: PropTypes.oneOf(['orange', 'green']), }; const defaultProps = { @@ -166,7 +167,7 @@ function Cell(props) { tableId, firstRowId, lastRowId, - colorHighlightColor, + columnHighlightColor, } = props; const cellRef = useRef(); diff --git a/packages/terra-table/src/subcomponents/Row.jsx b/packages/terra-table/src/subcomponents/Row.jsx index 19c1cc21500..c8e675404ee 100644 --- a/packages/terra-table/src/subcomponents/Row.jsx +++ b/packages/terra-table/src/subcomponents/Row.jsx @@ -90,6 +90,7 @@ const propTypes = { rowHeaderIndex: PropTypes.number, /** + * @private * A Unique Identifier of the [column](/components/components/cerner-terra-framework-docs/table/about#column). * If provided, column with specified identifier will be highlighted in data-grid. * @@ -111,9 +112,10 @@ const propTypes = { lastRowId: PropTypes.string, /** + * @private * The color to be used for highlighting a column. */ - colorHighlightColor: PropTypes.oneOf(['orange', 'green']), + columnHighlightColor: PropTypes.oneOf(['orange', 'green']), }; const defaultProps = { @@ -139,7 +141,7 @@ function Row(props) { rowMinimumHeight, firstRowId, lastRowId, - colorHighlightColor, + columnHighlightColor, } = props; const theme = useContext(ThemeContext); @@ -209,7 +211,7 @@ function Row(props) { rowHeaderIndex={rowHeaderIndex} firstRowId={firstRowId} lastRowId={lastRowId} - colorHighlightColor={colorHighlightColor} + columnHighlightColor={columnHighlightColor} > {cellData.content} diff --git a/packages/terra-table/src/subcomponents/Section.jsx b/packages/terra-table/src/subcomponents/Section.jsx index d00cee3c5d3..103998b7db7 100644 --- a/packages/terra-table/src/subcomponents/Section.jsx +++ b/packages/terra-table/src/subcomponents/Section.jsx @@ -147,7 +147,7 @@ function Section(props) { boundingRef, firstRowId, lastRowId, - colorHighlightColor, + columnHighlightColor, } = props; const theme = useContext(ThemeContext); @@ -219,7 +219,7 @@ function Section(props) { rowMinimumHeight={rowMinimumHeight} firstRowId={firstRowId} lastRowId={lastRowId} - colorHighlightColor={colorHighlightColor} + columnHighlightColor={columnHighlightColor} /> ))} diff --git a/packages/terra-table/tests/jest/__snapshots__/Table.test.jsx.snap b/packages/terra-table/tests/jest/__snapshots__/Table.test.jsx.snap index edf402e82fa..d955ee7dec7 100644 --- a/packages/terra-table/tests/jest/__snapshots__/Table.test.jsx.snap +++ b/packages/terra-table/tests/jest/__snapshots__/Table.test.jsx.snap @@ -814,9 +814,11 @@ exports[`Table verifies row selection column header selection 1`] = ` }, ] } + firstRowId="1" id="00000000-0000-0000-0000-000000000000" isHidden={true} key="00000000-0000-0000-0000-000000000000" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowMinimumHeight="auto" @@ -937,6 +939,7 @@ exports[`Table verifies row selection column header selection 1`] = ` } id="1" key="1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowIndex={2} @@ -1094,6 +1097,7 @@ exports[`Table verifies row selection column header selection 1`] = ` isSelectable={false} isSelected={false} key="1_Column-0" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -1136,6 +1140,7 @@ exports[`Table verifies row selection column header selection 1`] = ` isRowHeader={true} isSelectable={false} isSelected={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -1178,6 +1183,7 @@ exports[`Table verifies row selection column header selection 1`] = ` isRowHeader={false} isSelected={false} key="1_Column-1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -1220,6 +1226,7 @@ exports[`Table verifies row selection column header selection 1`] = ` isRowHeader={false} isSelectable={false} isSelected={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -1264,6 +1271,7 @@ exports[`Table verifies row selection column header selection 1`] = ` isRowHeader={false} isSelected={false} key="1_Column-2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -1306,6 +1314,7 @@ exports[`Table verifies row selection column header selection 1`] = ` isRowHeader={false} isSelectable={false} isSelected={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="1" @@ -1387,6 +1396,7 @@ exports[`Table verifies row selection column header selection 1`] = ` } id="2" key="2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowIndex={3} @@ -1543,6 +1553,7 @@ exports[`Table verifies row selection column header selection 1`] = ` isRowHeader={true} isSelected={false} key="2_Column-0" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -1585,6 +1596,7 @@ exports[`Table verifies row selection column header selection 1`] = ` isRowHeader={true} isSelectable={false} isSelected={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -1627,6 +1639,7 @@ exports[`Table verifies row selection column header selection 1`] = ` isRowHeader={false} isSelected={false} key="2_Column-1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -1669,6 +1682,7 @@ exports[`Table verifies row selection column header selection 1`] = ` isRowHeader={false} isSelectable={false} isSelected={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -1709,6 +1723,7 @@ exports[`Table verifies row selection column header selection 1`] = ` isRowHeader={false} isSelected={false} key="2_Column-2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -1751,6 +1766,7 @@ exports[`Table verifies row selection column header selection 1`] = ` isRowHeader={false} isSelectable={false} isSelected={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="2" @@ -1832,6 +1848,7 @@ exports[`Table verifies row selection column header selection 1`] = ` } id="3" key="3" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowIndex={4} @@ -1988,6 +2005,7 @@ exports[`Table verifies row selection column header selection 1`] = ` isRowHeader={true} isSelected={false} key="3_Column-0" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -2030,6 +2048,7 @@ exports[`Table verifies row selection column header selection 1`] = ` isRowHeader={true} isSelectable={false} isSelected={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -2072,6 +2091,7 @@ exports[`Table verifies row selection column header selection 1`] = ` isRowHeader={false} isSelected={false} key="3_Column-1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -2114,6 +2134,7 @@ exports[`Table verifies row selection column header selection 1`] = ` isRowHeader={false} isSelectable={false} isSelected={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -2154,6 +2175,7 @@ exports[`Table verifies row selection column header selection 1`] = ` isRowHeader={false} isSelected={false} key="3_Column-2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -2196,6 +2218,7 @@ exports[`Table verifies row selection column header selection 1`] = ` isRowHeader={false} isSelectable={false} isSelected={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="3" @@ -2277,6 +2300,7 @@ exports[`Table verifies row selection column header selection 1`] = ` id="4" isSelected={true} key="4" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowIndex={5} @@ -2433,6 +2457,7 @@ exports[`Table verifies row selection column header selection 1`] = ` isRowHeader={true} isSelected={false} key="4_Column-0" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -2475,6 +2500,7 @@ exports[`Table verifies row selection column header selection 1`] = ` isRowHeader={true} isSelectable={false} isSelected={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -2517,6 +2543,7 @@ exports[`Table verifies row selection column header selection 1`] = ` isRowHeader={false} isSelected={false} key="4_Column-1" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -2559,6 +2586,7 @@ exports[`Table verifies row selection column header selection 1`] = ` isRowHeader={false} isSelectable={false} isSelected={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -2598,6 +2626,7 @@ exports[`Table verifies row selection column header selection 1`] = ` isRowHeader={false} isSelected={false} key="4_Column-2" + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" @@ -2640,6 +2669,7 @@ exports[`Table verifies row selection column header selection 1`] = ` isRowHeader={false} isSelectable={false} isSelected={false} + lastRowId="4" onCellSelect={[Function]} rowHeaderIndex={0} rowId="4" From 2f2970135d99bbe82d9037a0ba1d30ee9fc49a50 Mon Sep 17 00:00:00 2001 From: Sugan G Date: Wed, 31 Jan 2024 15:41:09 +0530 Subject: [PATCH 06/22] updated changelog --- packages/terra-framework-docs/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/terra-framework-docs/CHANGELOG.md b/packages/terra-framework-docs/CHANGELOG.md index fc6791609b9..e7d7113f011 100644 --- a/packages/terra-framework-docs/CHANGELOG.md +++ b/packages/terra-framework-docs/CHANGELOG.md @@ -70,6 +70,7 @@ * Added * Added the 'aria-label' attribute to announce the information for the 'Flowsheet-Data Grid'. + * Added column highlighting examples for `flowsheet-data-grid` * Changed * Updated `terra-folder-tree` test example. From 5c01b01437fbd8c74adcfb39521faf78f8fae108 Mon Sep 17 00:00:00 2001 From: Sugan G Date: Fri, 2 Feb 2024 12:02:41 +0530 Subject: [PATCH 07/22] multicolumn highlight, hover-border --- packages/terra-data-grid/CHANGELOG.md | 3 + .../terra-data-grid/src/FlowsheetDataGrid.jsx | 1 - .../FlowsheetDataGrid.test.jsx.snap | 2 - .../FlowsheetDataGrid.4/About.5.doc.mdx | 5 +- .../Examples.6/ColumnHighlight.6.doc.mdx | 9 --- .../Examples.6/ColumnHighlightGreen.7.doc.mdx | 2 +- .../Examples.6/ColumnHighlightGreen.jsx | 4 +- .../ColumnHighlightOrange.6.doc.mdx | 9 +++ ...ighlight.jsx => ColumnHighlightOrange.jsx} | 8 +- .../Examples.6/MultiColumnHighlight.8.doc.mdx | 9 +++ .../Examples.6/MultiColumnHighlight.jsx | 77 +++++++++++++++++++ .../ColumnHighlightGreen.test.jsx | 4 +- ...est.jsx => ColumnHighlightOrange.test.jsx} | 10 ++- .../MultiColumnHighlight.test.jsx | 77 +++++++++++++++++++ .../clinical-lowlight-theme/Cell.module.scss | 7 +- .../terra-table/src/subcomponents/Cell.jsx | 7 ++ .../src/subcomponents/Cell.module.scss | 36 ++++----- .../terra-table/src/subcomponents/Row.jsx | 20 +---- .../terra-table/src/subcomponents/Section.jsx | 6 +- 19 files changed, 230 insertions(+), 66 deletions(-) delete mode 100644 packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlight.6.doc.mdx create mode 100644 packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlightOrange.6.doc.mdx rename packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/{ColumnHighlight.jsx => ColumnHighlightOrange.jsx} (88%) create mode 100644 packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/MultiColumnHighlight.8.doc.mdx create mode 100644 packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/MultiColumnHighlight.jsx rename packages/terra-framework-docs/src/terra-dev-site/test/data-grid/flowsheet-data-grid/{ColumnHighlight.test.jsx => ColumnHighlightOrange.test.jsx} (86%) create mode 100644 packages/terra-framework-docs/src/terra-dev-site/test/data-grid/flowsheet-data-grid/MultiColumnHighlight.test.jsx diff --git a/packages/terra-data-grid/CHANGELOG.md b/packages/terra-data-grid/CHANGELOG.md index da97e340cca..2efd8cfdf67 100644 --- a/packages/terra-data-grid/CHANGELOG.md +++ b/packages/terra-data-grid/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Added + * Added support for orange and green column highlighting. + ## 1.18.0 - (March 5, 2024) * Changed diff --git a/packages/terra-data-grid/src/FlowsheetDataGrid.jsx b/packages/terra-data-grid/src/FlowsheetDataGrid.jsx index f29c7b7d6a2..52aaf10617c 100644 --- a/packages/terra-data-grid/src/FlowsheetDataGrid.jsx +++ b/packages/terra-data-grid/src/FlowsheetDataGrid.jsx @@ -120,7 +120,6 @@ const defaultProps = { rows: [], columns: [], hasVisibleColumnHeaders: true, - columnHighlightColor: 'orange', }; function FlowsheetDataGrid(props) { diff --git a/packages/terra-data-grid/tests/jest/__snapshots__/FlowsheetDataGrid.test.jsx.snap b/packages/terra-data-grid/tests/jest/__snapshots__/FlowsheetDataGrid.test.jsx.snap index e3048331ac5..cbefd48a567 100644 --- a/packages/terra-data-grid/tests/jest/__snapshots__/FlowsheetDataGrid.test.jsx.snap +++ b/packages/terra-data-grid/tests/jest/__snapshots__/FlowsheetDataGrid.test.jsx.snap @@ -8,7 +8,6 @@ exports[`FlowsheetDataGrid renders the row header column as pinned and remaining