diff --git a/packages/terra-data-grid/CHANGELOG.md b/packages/terra-data-grid/CHANGELOG.md
index da69334a63c..080eebed7f0 100644
--- a/packages/terra-data-grid/CHANGELOG.md
+++ b/packages/terra-data-grid/CHANGELOG.md
@@ -4,7 +4,7 @@
* Added
* Added `columnHighlightId` to allow column highlighting.
- * Added `colorHighlightColor` to choose column highlighting colour.
+ * Added `columnHighlightColor` to choose column highlighting colour.
## 1.11.0 - (January 12, 2024)
diff --git a/packages/terra-data-grid/src/DataGrid.jsx b/packages/terra-data-grid/src/DataGrid.jsx
index ae7c6841162..e61fb730aa7 100644
--- a/packages/terra-data-grid/src/DataGrid.jsx
+++ b/packages/terra-data-grid/src/DataGrid.jsx
@@ -139,22 +139,6 @@ const propTypes = {
* Boolean indicating whether or not the DataGrid should hide the column headers.
*/
hasVisibleColumnHeaders: PropTypes.bool,
-
- /**
- * @private
- * A Unique Identifier of the [column](/components/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/about#column).
- * If provided, column with specified identifier will be highlighted in data-grid.
- *
- *  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
- * The color to be used for highlighting a column.
- */
- columnHighlightColor: PropTypes.oneOf(['orange', 'green']),
};
const defaultProps = {
@@ -192,8 +176,6 @@ const DataGrid = forwardRef((props, ref) => {
rowHeight,
rows,
sections,
- columnHighlightId,
- columnHighlightColor,
} = props;
const displayedColumns = (hasSelectableRows ? [WorklistDataGridUtils.ROW_SELECTION_COLUMN] : []).concat(pinnedColumns).concat(overflowColumns);
@@ -597,8 +579,6 @@ const DataGrid = forwardRef((props, ref) => {
rowSelectionMode={hasSelectableRows ? 'multiple' : undefined}
hasVisibleColumnHeaders={hasVisibleColumnHeaders}
isStriped
- columnHighlightId={columnHighlightId}
- columnHighlightColor={columnHighlightColor}
/>
diff --git a/packages/terra-data-grid/src/FlowsheetDataGrid.jsx b/packages/terra-data-grid/src/FlowsheetDataGrid.jsx
index 5873c9335b1..c25116fa0bb 100644
--- a/packages/terra-data-grid/src/FlowsheetDataGrid.jsx
+++ b/packages/terra-data-grid/src/FlowsheetDataGrid.jsx
@@ -102,20 +102,6 @@ const propTypes = {
* Boolean to show/hide column headers. By default, it is set to `true` and column headers are visible.
*/
hasVisibleColumnHeaders: PropTypes.bool,
-
- /**
- * A Unique Identifier of the [column](/components/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/about#column).
- * If provided, column with specified identifier will be highlighted in data-grid.
- *
- *  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,
-
- /**
- * The color to be used for highlighting a column.
- */
- columnHighlightColor: PropTypes.oneOf(['orange', 'green']),
};
const defaultProps = {
@@ -125,7 +111,6 @@ const defaultProps = {
rows: [],
columns: [],
hasVisibleColumnHeaders: true,
- columnHighlightColor: 'orange',
};
function FlowsheetDataGrid(props) {
@@ -146,8 +131,6 @@ function FlowsheetDataGrid(props) {
onRowSelect,
intl,
hasVisibleColumnHeaders,
- columnHighlightId,
- columnHighlightColor,
} = props;
const anchorCell = useRef(null);
@@ -433,8 +416,6 @@ function FlowsheetDataGrid(props) {
onCellRangeSelect={handleCellRangeSelection}
hasVisibleColumnHeaders={hasVisibleColumnHeaders}
ref={dataGridFuncRef}
- columnHighlightId={columnHighlightId}
- columnHighlightColor={columnHighlightColor}
/>
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 de3a11e2b06..b5c69f2ded2 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
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
index 4bd5bef25c0..765f77f1c3c 100644
--- 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
@@ -1,4 +1,4 @@
-import ColumnHighlightGreen from "./ColumnHighlightGreen";
+import ColumnHighlightGreen from "./ColumnHighlightGreen?dev-site-example";
# Flowsheet Data Grid 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
index c210c2d4bc1..766950d39de 100644
--- 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
@@ -6,7 +6,9 @@ const ColumnHighlightGreen = () => {
cols: [
{ id: 'Column-0', displayName: 'Vitals' },
{ id: 'Column-1', displayName: 'March 16' },
- { id: 'Column-2', displayName: 'March 17' },
+ {
+ id: 'Column-2', displayName: 'March 17', isColumnHighlighted: true, columnHighlightColor: 'green',
+ },
{ id: 'Column-3', displayName: 'March 18' },
],
rows: [
diff --git a/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlightOrange.6.doc.mdx b/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlightOrange.6.doc.mdx
new file mode 100644
index 00000000000..0371bbc7ce2
--- /dev/null
+++ b/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlightOrange.6.doc.mdx
@@ -0,0 +1,9 @@
+import ColumnHighlightOrange from "./ColumnHighlightOrange?dev-site-example";
+
+# Flowsheet Data Grid with orange column highlighting
+
+### Description
+
+This example demonstrates a basic [Flowsheet Data Grid](/components/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/about) with orange 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/ColumnHighlightOrange.jsx
similarity index 88%
rename from packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlight.jsx
rename to packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/ColumnHighlightOrange.jsx
index 8484898d6d9..6f9b5d0c4a5 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/ColumnHighlightOrange.jsx
@@ -1,12 +1,14 @@
import React from 'react';
import { FlowsheetDataGrid } from 'terra-data-grid';
-const ColumnHighlight = () => {
+const ColumnHighlightOrange = () => {
const gridDataJSON = {
cols: [
{ id: 'Column-0', displayName: 'Vitals' },
{ id: 'Column-1', displayName: 'March 16' },
- { id: 'Column-2', displayName: 'March 17' },
+ {
+ id: 'Column-2', displayName: 'March 17', isColumnHighlighted: true, columnHighlightColor: 'orange',
+ },
{ id: 'Column-3', displayName: 'March 18' },
],
rows: [
@@ -71,4 +73,4 @@ const ColumnHighlight = () => {
);
};
-export default ColumnHighlight;
+export default ColumnHighlightOrange;
diff --git a/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/MultiColumnHighlight.8.doc.mdx b/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/MultiColumnHighlight.8.doc.mdx
new file mode 100644
index 00000000000..3cca9225579
--- /dev/null
+++ b/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/MultiColumnHighlight.8.doc.mdx
@@ -0,0 +1,9 @@
+import MultiColumnHighlight from "./MultiColumnHighlight?dev-site-example";
+
+# Flowsheet Data Grid with orange and green column highlighting
+
+### Description
+
+This example demonstrates a basic [Flowsheet Data Grid](/components/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/about) with orange and green column highlighting.
+
+
diff --git a/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/MultiColumnHighlight.jsx b/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/MultiColumnHighlight.jsx
new file mode 100644
index 00000000000..7ec622bc5f2
--- /dev/null
+++ b/packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/MultiColumnHighlight.jsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { FlowsheetDataGrid } from 'terra-data-grid';
+
+const MultiColumnHighlight = () => {
+ const gridDataJSON = {
+ cols: [
+ { id: 'Column-0', displayName: 'Vitals' },
+ { id: 'Column-1', displayName: 'March 16' },
+ {
+ id: 'Column-2', displayName: 'March 17', isColumnHighlighted: true, columnHighlightColor: 'orange',
+ },
+ {
+ id: 'Column-3', displayName: 'March 18', isColumnHighlighted: true, columnHighlightColor: 'green',
+ },
+ ],
+ 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 MultiColumnHighlight;
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 c210c2d4bc1..766950d39de 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
@@ -6,7 +6,9 @@ const ColumnHighlightGreen = () => {
cols: [
{ id: 'Column-0', displayName: 'Vitals' },
{ id: 'Column-1', displayName: 'March 16' },
- { id: 'Column-2', displayName: 'March 17' },
+ {
+ id: 'Column-2', displayName: 'March 17', isColumnHighlighted: true, columnHighlightColor: 'green',
+ },
{ id: 'Column-3', displayName: 'March 18' },
],
rows: [
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/ColumnHighlightOrange.test.jsx
similarity index 86%
rename from packages/terra-framework-docs/src/terra-dev-site/test/data-grid/flowsheet-data-grid/ColumnHighlight.test.jsx
rename to packages/terra-framework-docs/src/terra-dev-site/test/data-grid/flowsheet-data-grid/ColumnHighlightOrange.test.jsx
index 8484898d6d9..132e17a6b93 100644
--- 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/ColumnHighlightOrange.test.jsx
@@ -1,12 +1,14 @@
import React from 'react';
import { FlowsheetDataGrid } from 'terra-data-grid';
-const ColumnHighlight = () => {
+const ColumnHighlightOrange = () => {
const gridDataJSON = {
cols: [
{ id: 'Column-0', displayName: 'Vitals' },
{ id: 'Column-1', displayName: 'March 16' },
- { id: 'Column-2', displayName: 'March 17' },
+ {
+ id: 'Column-2', displayName: 'March 17', isColumnHighlighted: true, columnHighlightColor: 'orange',
+ },
{ id: 'Column-3', displayName: 'March 18' },
],
rows: [
@@ -66,9 +68,9 @@ const ColumnHighlight = () => {
columns={cols}
rows={rows}
ariaLabel="Flowsheet Data Grid"
- columnHighlightId="Column-2"
+ // columnHighlightId="Column-2"
/>
);
};
-export default ColumnHighlight;
+export default ColumnHighlightOrange;
diff --git a/packages/terra-framework-docs/src/terra-dev-site/test/data-grid/flowsheet-data-grid/MultiColumnHighlight.test.jsx b/packages/terra-framework-docs/src/terra-dev-site/test/data-grid/flowsheet-data-grid/MultiColumnHighlight.test.jsx
new file mode 100644
index 00000000000..7ec622bc5f2
--- /dev/null
+++ b/packages/terra-framework-docs/src/terra-dev-site/test/data-grid/flowsheet-data-grid/MultiColumnHighlight.test.jsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { FlowsheetDataGrid } from 'terra-data-grid';
+
+const MultiColumnHighlight = () => {
+ const gridDataJSON = {
+ cols: [
+ { id: 'Column-0', displayName: 'Vitals' },
+ { id: 'Column-1', displayName: 'March 16' },
+ {
+ id: 'Column-2', displayName: 'March 17', isColumnHighlighted: true, columnHighlightColor: 'orange',
+ },
+ {
+ id: 'Column-3', displayName: 'March 18', isColumnHighlighted: true, columnHighlightColor: 'green',
+ },
+ ],
+ 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 MultiColumnHighlight;
diff --git a/packages/terra-table/src/Table.jsx b/packages/terra-table/src/Table.jsx
index 7b515653c16..b3eda3ca126 100644
--- a/packages/terra-table/src/Table.jsx
+++ b/packages/terra-table/src/Table.jsx
@@ -169,22 +169,6 @@ const propTypes = {
* The intl object containing translations. This is retrieved from the context automatically by injectIntl.
*/
intl: PropTypes.shape({ formatMessage: PropTypes.func }).isRequired,
-
- /**
- * @private
- * A Unique Identifier of the [column](/components/cerner-terra-framework-docs/table/about#column).
- * If provided, column with specified identifier will be highlighted in data-grid.
- *
- *  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
- * The color to be used for highlighting a column.
- */
- columnHighlightColor: PropTypes.oneOf(['orange', 'green']),
};
const defaultProps = {
@@ -227,8 +211,6 @@ function Table(props) {
isStriped,
rowHeaderIndex,
intl,
- columnHighlightId,
- columnHighlightColor,
} = props;
// Manage column resize
@@ -625,8 +607,6 @@ function Table(props) {
rowHeaderIndex={rowHeaderIndex}
onCellSelect={isGridContext || rowSelectionMode ? handleCellSelection : undefined}
onSectionSelect={onSectionSelect}
- columnHighlightId={columnHighlightId}
- columnHighlightColor={columnHighlightColor}
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 30ca4cea72d..9cbf735f50a 100644
--- a/packages/terra-table/src/clinical-lowlight-theme/Cell.module.scss
+++ b/packages/terra-table/src/clinical-lowlight-theme/Cell.module.scss
@@ -12,8 +12,9 @@
--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 #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;
+ --terra-table-cell-highlighted-orange-background-color: rgba(250, 203, 170, 0.38);
+ --terra-table-cell-highlighted-orange-box-shadow: inset 1px 0 0 0 #ffb166, inset -1px 0 0 0 #ffb166;
+ --terra-table-cell-highlighted-orange-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-orange-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 58744ad0799..6d4bfc48d07 100644
--- a/packages/terra-table/src/subcomponents/Cell.jsx
+++ b/packages/terra-table/src/subcomponents/Cell.jsx
@@ -121,15 +121,15 @@ const propTypes = {
/**
* @private
- * Id of the column to be highlighted in table
+ * The color to be used for highlighting a column.
*/
- columnHighlightId: PropTypes.string,
+ columnHighlightColor: PropTypes.oneOf(['orange', 'green']),
/**
* @private
- * The color to be used for highlighting a column.
+ * Boolean value indicating whether the column needs to be highlighted.
*/
- columnHighlightColor: PropTypes.oneOf(['orange', 'green']),
+ isColumnHighlighted: PropTypes.string,
};
const defaultProps = {
@@ -160,8 +160,8 @@ function Cell(props) {
intl,
firstRowId,
lastRowId,
- columnHighlightId,
columnHighlightColor,
+ isColumnHighlighted,
} = props;
const cellRef = useRef();
@@ -295,7 +295,7 @@ function Cell(props) {
}
let columnHighlight = {};
- if (columnHighlightId && isHighlighted) {
+ if (isColumnHighlighted) {
if (columnHighlightColor === 'green') {
columnHighlight = {
'column-highlight-green': true,
diff --git a/packages/terra-table/src/subcomponents/Cell.module.scss b/packages/terra-table/src/subcomponents/Cell.module.scss
index 7b3022698f9..841afc1f2c0 100644
--- a/packages/terra-table/src/subcomponents/Cell.module.scss
+++ b/packages/terra-table/src/subcomponents/Cell.module.scss
@@ -36,34 +36,34 @@
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, 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 {
+ background-color: var(--terra-table-cell-highlighted-orange-background-color, rgba(250, 203, 170, 0.38));
+ box-shadow: var(--terra-table-cell-highlighted-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);
+ .column-highlight-green {
+ background-color: var(--terra-table-cell-highlighted-green-background-color, rgba(87, 146, 47, 0.15));
+ box-shadow: var(--terra-table-cell-highlighted-green-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, 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 {
+ background-color: var(--terra-table-cell-highlighted-orange-background-color, rgba(250, 203, 170, 0.38));
+ box-shadow: var(--terra-table-cell-highlighted-orange-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);
+ .first-highlight-green {
+ background-color: var(--terra-table-cell-highlighted-green-background-color, rgba(87, 146, 47, 0.15));
+ box-shadow: var(--terra-table-cell-highlighted-green-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, 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 {
+ background-color: var(--terra-table-cell-highlighted-orange-background-color, rgba(250, 203, 170, 0.38));
+ box-shadow: var(--terra-table-cell-highlighted-orange-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);
+ .last-highlight-green {
+ background-color: var(--terra-table-cell-highlighted-green-background-color, rgba(87, 146, 47, 0.15));
+ box-shadow: var(--terra-table-cell-highlighted-green-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 e2e7bfe0b1c..693058e0616 100644
--- a/packages/terra-table/src/subcomponents/Row.jsx
+++ b/packages/terra-table/src/subcomponents/Row.jsx
@@ -82,16 +82,6 @@ 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.
- *
- *  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
@@ -103,12 +93,6 @@ const propTypes = {
* Id of the last row in table
*/
lastRowId: PropTypes.string,
-
- /**
- * @private
- * The color to be used for highlighting a column.
- */
- columnHighlightColor: PropTypes.oneOf(['orange', 'green']),
};
const defaultProps = {
@@ -131,10 +115,8 @@ function Row(props) {
displayedColumns,
rowHeaderIndex,
onCellSelect,
- columnHighlightId,
firstRowId,
lastRowId,
- columnHighlightColor,
} = props;
const theme = useContext(ThemeContext);
@@ -192,13 +174,13 @@ function Row(props) {
maskedLabel={cellData.maskedLabel}
isSelectable={cellData.isSelectable}
isRowHeader={cellColumnIndex === (rowHeaderIndex + columnIndexOffSet)}
- isHighlighted={isHovered || isSelected || (columnId === columnHighlightId)}
+ isHighlighted={isHovered || isSelected}
onCellSelect={onCellSelect}
height={height}
firstRowId={firstRowId}
lastRowId={lastRowId}
- columnHighlightId={columnHighlightId}
- columnHighlightColor={columnHighlightColor}
+ columnHighlightColor={displayedColumns[cellColumnIndex].columnHighlightColor}
+ isColumnHighlighted={displayedColumns[cellColumnIndex].isColumnHighlighted}
>
{cellData.content}
diff --git a/packages/terra-table/src/subcomponents/Section.jsx b/packages/terra-table/src/subcomponents/Section.jsx
index 89e893346d3..5622affe216 100644
--- a/packages/terra-table/src/subcomponents/Section.jsx
+++ b/packages/terra-table/src/subcomponents/Section.jsx
@@ -96,16 +96,6 @@ const propTypes = {
*/
onSectionSelect: PropTypes.func,
- /**
- * @private
- * A Unique Identifier of the [column](/components/cerner-terra-framework-docs/table/about#column).
- * If provided, column with specified identifier will be highlighted in data-grid.
- *
- *  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
@@ -117,12 +107,6 @@ const propTypes = {
* Id of the last row in table
*/
lastRowId: PropTypes.string,
-
- /**
- * @private
- * The color to be used for highlighting a column.
- */
- columnHighlightColor: PropTypes.oneOf(['orange', 'green']),
};
const defaultProps = {
@@ -149,10 +133,8 @@ function Section(props) {
rowHeaderIndex,
rows,
onSectionSelect,
- columnHighlightId,
firstRowId,
lastRowId,
- columnHighlightColor,
} = props;
const theme = useContext(ThemeContext);
@@ -218,10 +200,8 @@ function Section(props) {
onCellSelect={onCellSelect}
isSelected={row.isSelected}
isTableStriped={isTableStriped}
- columnHighlightId={columnHighlightId}
firstRowId={firstRowId}
lastRowId={lastRowId}
- columnHighlightColor={columnHighlightColor}
/>
))}