feat: badge component#43
Conversation
Olaf (olaf-k)
force-pushed
the
olaf/badge
branch
2 times, most recently
from
2fbe48f to
6c2dd9a
Compare
Signed-off-by: Olaf Kappes <okappes@qti.qualcomm.com>
Signed-off-by: Olaf Kappes <okappes@qti.qualcomm.com>
Olaf (olaf-k)
force-pushed
the
olaf/badge
branch
from
7ea78df to
a97b4b2
Compare
Signed-off-by: Olaf Kappes <okappes@qti.qualcomm.com>
Signed-off-by: Olaf Kappes <okappes@qti.qualcomm.com>
Signed-off-by: Olaf Kappes <okappes@qti.qualcomm.com>
Signed-off-by: Olaf Kappes <okappes@qti.qualcomm.com>
Signed-off-by: Olaf Kappes <okappes@qti.qualcomm.com>
|
This pull request sets up GitHub code scanning for this repository. Once the scans have completed and the checks have passed, the analysis results for this pull request branch will appear on this overview. Once you merge this pull request, the 'Security' tab will show more code scanning analysis results (for example, for the default branch). Depending on your configuration and choice of analysis tool, future pull requests will be annotated with code scanning analysis results. For more information about GitHub code scanning, check out the documentation. |
Signed-off-by: Olaf Kappes <okappes@qti.qualcomm.com>
Signed-off-by: Olaf Kappes <okappes@qti.qualcomm.com>
Signed-off-by: Ryan Bower <rbower@qti.qualcomm.com>
Ryan Bower (R-Bower)
left a comment
Ryan Bower (R-Bower)
left a comment
There was a problem hiding this comment.
My main concerns with this component are the styles.
Size overrides
If you find yourself overriding the defaults in most of your variants, then that's probably an indicator that you should keep the styles isolated for each variant. Right now the sizes are tightly coupled to a single class with no clear benefit:
- Base size rules assume text-badge behavior (padding, border-radius, font)
- Icon/status/number badges use custom properties from base but override layout
- Icon badge needs
--icon-radiusand--icon-size - Status badge needs
--status-size - Number badge needs
--count-size
Isolated colors
Interesting that you chose to couple the styles but not the colors :)
There's some color overlap between variants:
- icon/text = identical ramp
- status/number = similar ramp (number has persistent black/white, but the rest looks the same)
There's a lot of potential for reuse here.
I took a stab at this, give this a once-over and lmk what you think:
#61
| export type QdsNumberBadgeVariant = | ||
| | "neutral" | ||
| | "neutral-outline" | ||
| | "brand" | ||
| | "brand-outline" | ||
| | "info" | ||
| | "success" | ||
| | "warning" | ||
| | "danger" | ||
| | "persistent-black" | ||
| | "persistent-white" |
There was a problem hiding this comment.
In the other badges, we are using emphasis for color. The design system uses emphasis for color as well. This is also true for other components. Let's keep it consistent.
There was a problem hiding this comment.
the number badge mixes emphasis and variant styles, I don't mind one name or the other.
good point! thanks for the followup PR. |
Signed-off-by: Olaf Kappes <okappes@qti.qualcomm.com>
feature/badge-style-rework
Signed-off-by: Ryan Bower <rbower@qti.qualcomm.com>
Signed-off-by: Ryan Bower <rbower@qti.qualcomm.com>
Signed-off-by: Ryan Bower <rbower@qti.qualcomm.com>
feat: badge component Signed-off-by: Dustin Pham <dustinpham95@gmail.com>
3 participants
Continuation of #37 - migrated from fork branch