feat: enhance Tag component with icon support and custom nodes#421
feat: enhance Tag component with icon support and custom nodes#421
Conversation
🟡 Heimdall Review Status
🟡
|
| Code Owner | Status | Calculation | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ui-systems-eng-team |
🟡
0/1
|
Denominator calculation
|
- Added support for start and end icons in the Tag component. - Introduced props for custom start and end nodes. - Updated stories to demonstrate new icon and custom node functionality. - Added tests to verify rendering of icons and custom nodes.
sverg-cb
force-pushed
the
sverg/tag-icons
branch
from
bd2f1cb to
ff89d8f
Compare
| background="bg" | ||
| borderRadius={tagBorderRadiusMap[intent]} | ||
| dangerouslySetBackground={backgroundColor} | ||
| flexDirection="row" |
There was a problem hiding this comment.
nit: are we able to move 'row' to be inside of the props destructuring, like we have alignItems and justifyContent?
| active={startIconActive} | ||
| dangerouslySetColor={color} | ||
| name={startIcon} | ||
| paddingEnd={0.5} |
There was a problem hiding this comment.
Should we have this as 'gap' on Box instead? I could see that benefiting customers who use start instead of startIcon.
There was a problem hiding this comment.
Good catch, we likely should switch it as well on Button, but would want to be careful to see if there was any reason.
Button is more complex since we have the block format where the icons stay on the edges while the label is in the middle
We can look at it separately, but would want to test it out in a few spots. We could maybe have a ticket to fix it in the v9 branch, I know v9 already has some changes in place to button to allow height customization.
3 participants
What changed? Why?
Note
The goal is for the implementation to be consistent with those in the Button files.
Root cause (required for bugfixes)UI changes
Testing
How has it been tested?
Testing instructions
Illustrations/Icons Checklist
Required if this PR changes files under
packages/illustrations/**orpackages/icons/**Change management
type=routine
risk=low
impact=sev5
automerge=false