-
Notifications
You must be signed in to change notification settings - Fork 130
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.
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
feat(components): update Badge design #633
Conversation
According to the new design specs: https://www.figma.com/file/aORNKPp6e3xbpkYrkfoVhW/WIP-Circuit-UI-Mobile?node-id=2168%3A5419 feature/badge-design
Badges are not meant to be interactive and should only communicate the status of an element. feature/badge-design
It conflicts with the color of the primary Button variant. Use the "neutral" variant instead. feature/badge-design
This makes the prop consistent with the Button and List components BREAKING CHANGE: The **Badge** component's `color` prop has been renamed to `variant` (🤖 _badge-variant-enum_) feature/badge-design
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/sumup-oss/circuit-ui/jvny00h7z |
102a5c4
to
0d223cd
Compare
This prevents the content from overflowing the background. feature/badge-design feature/badge-design feature/badge-design
0d223cd
to
febc275
Compare
Codecov Report
@@ Coverage Diff @@
## beta #633 +/- ##
==========================================
+ Coverage 93.67% 93.70% +0.03%
==========================================
Files 133 133
Lines 2197 2208 +11
Branches 606 611 +5
==========================================
+ Hits 2058 2069 +11
Misses 117 117
Partials 22 22
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 👍 💯
Just left a couple of questions 🙂
🎉 This PR is included in version 2.0.0-beta.14 🎉 The release is available on: Your semantic-release bot 📦🚀 |
🎉 This PR is included in version 2.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Purpose
The badges received a design refresh on mobile to make them more accessible and refine their purpose. This PR applies the same changes to the web.
Approach and changes
Before
After
Before
After
onClick
prop: Badges are not meant to be interactive and should only communicate the status of an element. Use the Tag component instead.primary
Badge color: It conflicts with the color of the primary Button variant. Use the "neutral" variant instead.color
prop tovariant
: This makes the prop consistent with the Button and List components.BREAKING CHANGE:
The Badge component's
color
prop has been renamed tovariant
(🤖 badge-variant-enum)Definition of done