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

[terra-flowsheet-data-grid] Added column highlighting for flowsheet grids #1985

Merged
merged 22 commits into from
Mar 7, 2024

Conversation

sugan2416
Copy link
Contributor

@sugan2416 sugan2416 commented Jan 17, 2024

Summary

What was changed:

  • Added column highlighting (green and orange) for flowsheet grids.
  • Updated terra-table lowlight light zebra strap colour to dark grey.

Why it was changed:

  • Column highlighting feature request from clinical charting.
  • Updated terra-table lowlight light zebra strap colour to dark grey to improve colour contrast.

Testing

This change was tested using:

  • WDIO
  • Jest
  • Visual testing (please attach a screenshot or recording)
  • Other (please describe below)
  • No tests are needed

Reviews

In addition to engineering reviews, this PR needs:

  • UX review
  • Accessibility review
  • Functional review

Additional Details

This PR resolves:

UXPLATFORM-9542


Thank you for contributing to Terra.
@cerner/terra

image image image image

@saket2403
Copy link
Contributor

The new props should only be visible on doc site for flowsheet-data-grid and everywhere else it should be private right?

@sugan2416
Copy link
Contributor Author

sugan2416 commented Jan 31, 2024

The new props should only be visible on doc site for flowsheet-data-grid and everywhere else it should be private right?

Yes. Changed in f316f91

Copy link
Contributor

@eawww eawww left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Commented on the API changes as well as a few other things.

Additionally, there's a few a11y requirements that need to be met:

  • Column header cell also needs its visually hidden text to include indication that the column is highlighted. Consumer should be able to provide a string label to append a meaningful indication like "most recent time" or "selected time". I believe that's what these are intended to represent. Clarification should be sought on this so the examples can be show real-world applications.

  • Column header needs a visual indication other than color to show the column's highlight and differentiate the colors from each other. Stella timeline uses a circle and a square icon. I know that's not ideal so design should be consulted on this.

@eawww
Copy link
Contributor

eawww commented Jan 31, 2024

Also hover and select states of cells in highlighted columns should still have the border
image

@sugan2416 sugan2416 force-pushed the flowsheet-col-highlight branch from 2234831 to e58239a Compare February 2, 2024 07:15
@sugan2416
Copy link
Contributor Author

Also hover and select states of cells in highlighted columns should still have the border image

Fixed in d16d6e9

@github-actions github-actions bot temporarily deployed to preview-pr-1985 March 5, 2024 12:49 Destroyed
@sugan2416 sugan2416 added ⭐ UX Reviewed UX Reviewed and approved. and removed UX Review Required labels Mar 6, 2024
@sugan2416 sugan2416 force-pushed the flowsheet-col-highlight branch from e51d7d6 to 4cda8e2 Compare March 7, 2024 10:32
@github-actions github-actions bot temporarily deployed to preview-pr-1985 March 7, 2024 10:32 Destroyed
@sugan2416 sugan2416 merged commit cc19543 into main Mar 7, 2024
22 checks passed
@sugan2416 sugan2416 deleted the flowsheet-col-highlight branch March 7, 2024 11:05
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants