feat(TextBadge): support custom colors and a removable variant#1137
Conversation
TextBadge previously offered only six fixed theme `variant`s, with no
border and no way to remove it. Consumers that need a per-item color
(e.g. deployment label chips, whose color is computed at runtime) and a
clickable "✕" had to roll their own component.
Add two optional, backwards-compatible props:
- `customColor` ({ text, backgroundColor, borderColor? }) overrides the
variant colors and adds a 1px border (variant badges stay border-less).
- `onRemove` renders a trailing "✕" button and is called on click.
`removeAriaLabel` labels it for a11y. The badge tracks no in-flight
state; the handler should guard against repeated calls if needed.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Hello damiengillesscality,My role is to assist you with the merge of this Available options
Available commands
Status report is not available. |
Waiting for approvalThe following approvals are needed before I can proceed with the merge:
Peer approvals must include at least 1 approval from the following list: |
So consumers can `import { TextBadgeCustomColor } from '@scality/core-ui'`
instead of a fragile deep import into dist/.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
/approve |
In the queueThe changeset has received all authorizations and has been added to the The changeset will be merged in:
There is no action required on your side. You will be notified here once IMPORTANT Please do not attempt to modify this pull request.
If you need this pull request to be removed from the queue, please contact a The following options are set: approve |
|
I have successfully merged the changeset of this pull request
Please check the status of the associated issue None. Goodbye damiengillesscality. |
Why
In artesca-maestro#650 the deployment-card label chips are a custom component because
TextBadgecouldn't express what they need:variants — andTextBadgerenders no border at all;Rather than keep a bespoke chip in the app, this teaches
TextBadge(the shared "badge") to do both, so the app can drop its custom component.Changes
Two optional, fully backwards-compatible props on
TextBadge:customColor—{ text, backgroundColor, borderColor? }. When set, overrides thevariantcolors and adds a1pxborder (borderColorfalls back totext). Variant badges are unchanged and stay border-less.onRemove— when provided, a trailing "✕" button is rendered and called on click.removeAriaLabellabels it (defaults to"Remove"). The badge intentionally tracks no in-flight state — the handler should guard against repeated calls if needed.The flex layout / gap is only applied in the removable case, so text-only and variant badges render exactly as before.
Added a Storybook story (
CustomColorAndRemovable) and unit tests.Follow-up
Once released, artesca-maestro#650 can bump
@scality/core-uiand replace its customLabelChipwithTextBadge.