Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
multicolumn highlight, hover-border
Browse files Browse the repository at this point in the history
Sugan G authored and Sugan G committed Feb 2, 2024
1 parent 2c68e0d commit 2234831
Showing 21 changed files with 226 additions and 150 deletions.
2 changes: 1 addition & 1 deletion packages/terra-data-grid/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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)

20 changes: 0 additions & 20 deletions packages/terra-data-grid/src/DataGrid.jsx
Original file line number Diff line number Diff line change
@@ -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.
*
* ![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
* 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}
/>
</GridContext.Provider>
<VisuallyHiddenText aria-live="polite" aria-atomic="true" text={cellAriaLiveMessage} />
19 changes: 0 additions & 19 deletions packages/terra-data-grid/src/FlowsheetDataGrid.jsx
Original file line number Diff line number Diff line change
@@ -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.
*
* ![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,

/**
* 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}
/>
<VisuallyHiddenText aria-live="polite" text={cellSelectionAriaLiveMessage} />
</div>
Original file line number Diff line number Diff line change
@@ -8,7 +8,6 @@ exports[`FlowsheetDataGrid renders the row header column as pinned and remaining
<ForwardRef
ariaLabel="Test Flowsheet Data Grid"
columnHeaderHeight="2.5rem"
columnHighlightColor="orange"
defaultColumnWidth={200}
hasVisibleColumnHeaders={true}
id="test-terra-flowsheet-data-grid"
@@ -131,7 +130,6 @@ exports[`FlowsheetDataGrid replaces non-header empty, null, or "--" cell content
<ForwardRef
ariaLabel="Test Flowsheet Data Grid"
columnHeaderHeight="2.5rem"
columnHighlightColor="orange"
defaultColumnWidth={200}
hasVisibleColumnHeaders={true}
id="test-terra-flowsheet-data-grid"
Original file line number Diff line number Diff line change
@@ -44,8 +44,9 @@ 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.|
|[ColumnHighlightOrange](/components/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/examples/column-highlight-orange)|An example of the Flowsheet Data Grid with orange 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.|
|[MultiColumnHighlight](/components/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/examples/multi-column-highlight)|An example of the Flowsheet Data Grid with orange and green column highlighting.|

## Accessibility
### Keyboard Interactions
@@ -123,6 +124,8 @@ A column specifies the data to render a cell in the header row of the Flowsheet
|**displayName**|string|optional|none|String of text to render in the column header cell.|
|**hasError**|bool|optional|none|Boolean value indicating whether the column has an error in the data.|
|**width**|number|optional|none|A number (in px) specifying the width of the column. If not provided, the Data Grid's default column width is used.|
|**isColumnHighlighted**|bool|optional|none|Boolean value indicating whether the column needs to be highlighted.|
|**columnHighlightColor**|string|optional|orange|The color to be used for highlighting a column.|

### Rows
Rows define the cells rendered in the row and the row's selection properties.

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import ColumnHighlightGreen from "./ColumnHighlightGreen";
import ColumnHighlightGreen from "./ColumnHighlightGreen?dev-site-example";

# Flowsheet Data Grid with green column highlighting

Original file line number Diff line number Diff line change
@@ -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: [
Original file line number Diff line number Diff line change
@@ -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.

<ColumnHighlightOrange title='Flowsheet Data Grid with orange column highlight' />
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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.

<MultiColumnHighlight title='Flowsheet Data Grid with orange and green column highlight' />
Original file line number Diff line number Diff line change
@@ -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 (
<FlowsheetDataGrid
id="terra-flowsheet-data-grid-column-highlight"
columns={cols}
rows={rows}
ariaLabel="Flowsheet Data Grid"
/>
);
};

export default MultiColumnHighlight;
Original file line number Diff line number Diff line change
@@ -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: [
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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 (
<FlowsheetDataGrid
id="terra-flowsheet-data-grid-column-highlight"
columns={cols}
rows={rows}
ariaLabel="Flowsheet Data Grid"
/>
);
};

export default MultiColumnHighlight;
Loading

0 comments on commit 2234831

Please sign in to comment.