Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Data table dark mode #2811

Merged
merged 4 commits into from
Nov 27, 2024
Merged

Data table dark mode #2811

merged 4 commits into from
Nov 27, 2024

Conversation

GCHQ-Developer-741
Copy link
Contributor

@GCHQ-Developer-741 GCHQ-Developer-741 commented Nov 21, 2024 •
edited
Loading

Summary of the changes

  • Added theme prop and css dark mode tokens for ic-data-table & ic-data-table-title-bar
  • Added visual regression tests for color-related data-table features
  • Removed appearance option from the loadingOptions & updatingOptions props in ic-data-table, to ensure they follow dark mode color schemes. monochrome still exists which fulfills the original intention of the prop.
  • Removed some tests whilst fixes are worked on for New element added to ic-data-table when sorting a truncated column #2819 and whilst Select dark theme #2794 is in review

Related issue

#1214

Checklist

General

  • Changes to docs package checked and committed.
  • All acceptance criteria reviewed and met.

Testing

  • Relevant unit tests and visual regression tests added.
  • Visual testing against Figma component specification completed.
  • Playground stories in React Storybook up to date, with any prop changes and additions addressed.
  • Compare performance of modified components against develop using Performance addon in React Storybook.

Accessibility

  • Accessibility Insights FastPass performed.
  • A11y unit test added and yields no issues.
  • A11y plug-in on Storybook yields no issues.
  • Manual screen reader testing performed using NVDA and VoiceOver.
  • Manual keyboard testing for keyboard controls and logical focus order.
  • Correct roles used and ARIA attributes used correctly where required.
  • Logical heading structure is maintained, and the HTML elements used for headings can be changed to fit within the wider page structure.

Resize/zoom behaviour

  • Page can be zoomed to 400% with no loss of content.
  • Screen magnifier used with no issues.
  • Text resized to 200% with no loss of content.
  • Text spacing increased as per the WCAG 1.4.12 success criterion with no loss of content.

System modes

  • Browser setting 'prefers reduced motion' tested. No animations or motion visible whilst this setting is on.
  • Windows High Contrast mode tested with no loss of content.
  • System light and dark mode tested with no loss of content.
  • Browser support tested (Chrome, Safari, Firefox and Edge).

Testing content extremes

  • Min/max content examples tested with no loss of content or overflow.
  • All prop combinations work without issue.
  • Tested for FOUC (Flash of Unstyled Content) in both SSR (Server-Side Rendering) and SSG (Static Site Generation) settings.
  • Controlled and uncontrolled input components tested.
  • Props/slots can be updated after initial render.

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Nov 21, 2024 •
edited by GCHQ-Developer-299
Loading

View your branch deployment here: https://mi6.github.io/ic-ui-kit/branches/data-table-dark-mode/canary-web-components
View your React branch deployment here: https://mi6.github.io/ic-ui-kit/branches/data-table-dark-mode/canary-react

@GCHQ-Developer-741 GCHQ-Developer-741 force-pushed the data-table-dark-mode branch 16 times, most recently from df94627 to 72deb33 Compare November 25, 2024 13:06
@GCHQ-Developer-741
feat(canary-web-components): added theme prop to ic-data-table
ff78f19 
added theme prop to ic-data-table, added dark mode style tokens to that and the title-bar, removed
appearance from loading/updatingOptions & theme from paginationOptions to keep them inline with dark mode

BREAKING CHANGE: removed appearance option from loadingOptions and updatingOptions
@GCHQ-Developer-741 GCHQ-Developer-741 force-pushed the data-table-dark-mode branch 5 times, most recently from 78d29b0 to 64f6fd5 Compare November 25, 2024 15:48
@GCHQ-Developer-741 GCHQ-Developer-741 marked this pull request as ready for review November 25, 2024 15:48
@GCHQ-Developer-741
feat(web-components): added ic-data-table color tokens to color-mode.css
3d47a89 
added data table & title-bar color tokens to color css files
@mi6 mi6 deleted a comment from github-actions bot Nov 26, 2024
@GCHQ-Developer-741 GCHQ-Developer-741 force-pushed the data-table-dark-mode branch 3 times, most recently from b06ca8e to ff2f288 Compare November 26, 2024 12:23
@mi6 mi6 deleted a comment from github-actions bot Nov 26, 2024
@GCHQ-Developer-741
feat(canary-react): added dark mode features, stories & tests to data…
018ea76 
…-table

added dark mode colours, tests and stories

BREAKING CHANGE: removed appearance option from updatingOptions, loadingOptions & paginationOptions
@GCHQ-Developer-741 GCHQ-Developer-741 merged commit 57d0b3a into v3.0.0/develop Nov 27, 2024
7 checks passed
@GCHQ-Developer-741 GCHQ-Developer-741 deleted the data-table-dark-mode branch November 27, 2024 11:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ad9242 ad9242 ad9242 approved these changes

@GCHQ-Developer-299 GCHQ-Developer-299 GCHQ-Developer-299 approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@GCHQ-Developer-741 @GCHQ-Developer-299 @ad9242