feat: Add warning tone for Badge

Doist / reactist

Open source React components made with ❤️ by Doist

http://doist.github.io/reactist

MIT License

247 stars 21 forks source link

feat: Add warning tone for Badge #826

Closed nats12 closed 2 months ago

nats12 commented 2 months ago

Short description

Adds a new warning variant for the Badge component's tone option.

PR Checklist

[x] Added tests for bugs / new features
[x] Updated docs (storybooks, readme)
[x] Executed npm run validate and made sure no errors / warnings were shown
[x] Described changes in CHANGELOG.md
[x] Bumped version in package.json and package-lock.json (npm --no-git-tag-version version <major|minor|patch>) ref
[x] Reviewed and approved Chromatic visual regression tests in CI

Versioning

Minor

engfragui commented 2 months ago

@nats12 The code change looks sane to me 👌 The only thing I noticed is that the colors are the same for both light and dark mode versions, which I find unusual...

I'm assuming this new Badge tone has been requested by Design team? 🤔

nats12 commented 2 months ago

I'm assuming this new Badge tone has been requested by Design team? 🤔

@engfragui indeed, see convo here about the latest token style, and adding it to this component.

The only thing I noticed is that the colors are the same for both light and dark mode versions, which I find unusual...

I believe dark mode isn't supported for these components, so those aren't the actual dark mode styles that would be applied. That screenshot illustrates an example from the docs on how to style them differently. It seems most are inverted, with a slightly darker tint than in light mode, I'll do the same for warning:

Thanks for raising! 🙌🏼