Repository navigation
feat: Support labelTag for inline Token - #5090
NathanZlion wants to merge 11 commits into
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #5090 +/- ##
=======================================
Coverage 97.70% 97.70%
=======================================
Files 990 990
Lines 31818 31821 +3
Branches 11752 11754 +2
=======================================
+ Hits 31089 31092 +3
Misses 722 722
Partials 7 7 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
NathanZlion
changed the title
| @@ -124,6 +124,7 @@ function InternalToken({ | |||
| return { | |||
| ...labelObject, | |||
| disabled, | |||
| labelTag, | |||
There was a problem hiding this comment.
There is no visual distinction between the "main" label and the label tag (other than being aligned on opposite ends). Is this the intended design?
There was a problem hiding this comment.
confirmed this with design, this is expected. if there's a need for visual difference like a font size difference or text color difference is needed and the need arises from customers we can follow up with it. Our current usecase:
| @@ -39,7 +39,7 @@ export interface TokenProps extends BaseComponentProps { | |||
| /** | |||
| * Specifies the token's visual style and functionality. | |||
| * | |||
| * For `inline` only label, icon and dismiss button are displayed. | |||
| * For `inline` only label, label tag, icon and dismiss button are displayed. | |||
There was a problem hiding this comment.
At this point, looks like the props that are displayed are more than those that aren't. Also, I think this text could be written a bit more clearly. What do you think about something like this:
When
variant="inline", only label, label tag, icon and dismiss button are displayed. Description and tags are not.
("variant="inline"" is consistent with the comment for the icon prop)
There was a problem hiding this comment.
("variant="inline"" is consistent with the comment for the icon prop)
Although this is the doc for the variant prop itself, so no need to be so verbose in this part. What about something like
When set to
inline, only label, label tag, icon and dismiss button are displayed. Description and tags are not.
There was a problem hiding this comment.
makes sense, updated it.
Add a prefix slot before the label (for example a category color dot) and a secondaryText value after it. Includes a Token additions dev page demoing both, plus popover composition in the label slot.
Color dots are a custom icon, so they go through the existing icon slot instead of a new prefix prop. The dev page now passes the dot as icon.
95941af to
6ea5117
Compare
This branch was successfully deployed
2 participants
Description
Inline tokens now render
labelTag. Normal tokens already showed it through the sharedOptionlayout, but the inline variant dropped it. This lets teams show a trailing value such as a coverage percentage (labelTag="17%") in both variants without a new prop.No new props are added.
How to test
#/light/token/permutations.label-tag, combined with icon, dismiss, read-only and disabled.How has this been tested?
gulp buildpasses locallylabelTagtests for the normal and inline variantsvariantdescriptionReview checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md.CONTRIBUTING.md.Security
checkSafeUrlfunction.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.