fix(components): improve coherence of StatusLabel "critical" variant [JOB-98327]

chris-at-jobber commented 2 months ago

Motivations

The label for StatusLabel's "critical" uses the critical color for its' text, whereas all other variants use the {status}--onSurface color. This leads to a more vibrant label with lower contrast against its' container than the others, which is particularly notable in mixed-status views like a Datalist.

Changes

Added

new CSS var in the StatusLabel component for text color

Changed

extended the status-specific classes to manipulate the new text color variable

Removed

usage of the textColor prop from the Typography instance in StatusLabel

Fixed

improves the coherence of the text/background contrast across StatusLabels

Testing

Test in Storybook and via pre-release

Changes can be tested via Pre-release

In Atlantis we use Github's built in pull request reviews.

Random photo of Atlantis

github-actions[bot] commented 2 months ago

Published Pre-release for 8e8823c3aaccdb32aa0c41c05847cd94beb38218 with versions:

  - @jobber/components@5.23.2-use-correc.1+8e8823c3

To install the new version(s) for Web run:

npm install @jobber/components@5.23.2-use-correc.1+8e8823c3

chris-at-jobber commented 2 months ago

Example usage in light and dark modes:

cloudflare-workers-and-pages[bot] commented 2 months ago

Deploying atlantis with Cloudflare Pages

Latest commit:	`815f6a1`
Status:	✅ Deploy successful!
Preview URL:	https://69ddfa37.atlantis.pages.dev
Branch Preview URL:	https://use-correct-text-color-in-st.atlantis.pages.dev

View logs

chris-at-jobber commented 2 months ago

@nad182 definitely! This is web only so in JO, Quote/Client/Job/Invoice index views are great places to test multiple statuses in a single view

GetJobber / atlantis