Skip to content

feat(TextBadge): support custom colors and a removable variant#1137

Merged
bert-e merged 2 commits into
development/1.0from
feature/text-badge-custom-color-removable
Jun 19, 2026
Merged

feat(TextBadge): support custom colors and a removable variant#1137
bert-e merged 2 commits into
development/1.0from
feature/text-badge-custom-color-removable

Conversation

@damiengillesscality

@damiengillesscality damiengillesscality commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

Why

In artesca-maestro#650 the deployment-card label chips are a custom component because TextBadge couldn't express what they need:

  • a per-label color computed at runtime (custom text/background/border), not one of the six fixed theme variants — and TextBadge renders no border at all;
  • a clickable "✕" to remove the label.

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.

image

Changes

Two optional, fully backwards-compatible props on TextBadge:

  • customColor{ text, backgroundColor, borderColor? }. When set, overrides the variant colors and adds a 1px border (borderColor falls back to text). Variant badges are unchanged and stay border-less.
  • onRemove — when provided, a trailing "✕" button is rendered and called on click. removeAriaLabel labels 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-ui and replace its custom LabelChip with TextBadge.

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>
@bert-e

bert-e commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

Hello damiengillesscality,

My role is to assist you with the merge of this
pull request. Please type @bert-e help to get information
on this process, or consult the user documentation.

Available options
name description privileged authored
/after_pull_request Wait for the given pull request id to be merged before continuing with the current one.
/bypass_author_approval Bypass the pull request author's approval
/bypass_build_status Bypass the build and test status
/bypass_commit_size Bypass the check on the size of the changeset TBA
/bypass_incompatible_branch Bypass the check on the source branch prefix
/bypass_jira_check Bypass the Jira issue check
/bypass_peer_approval Bypass the pull request peers' approval
/bypass_leader_approval Bypass the pull request leaders' approval
/approve Instruct Bert-E that the author has approved the pull request. ✍️
/create_pull_requests Allow the creation of integration pull requests.
/create_integration_branches Allow the creation of integration branches.
/no_octopus Prevent Wall-E from doing any octopus merge and use multiple consecutive merge instead
/unanimity Change review acceptance criteria from one reviewer at least to all reviewers
/wait Instruct Bert-E not to run until further notice.
Available commands
name description privileged
/help Print Bert-E's manual in the pull request.
/status Print Bert-E's current status in the pull request TBA
/clear Remove all comments from Bert-E from the history TBA
/retry Re-start a fresh build TBA
/build Re-start a fresh build TBA
/force_reset Delete integration branches & pull requests, and restart merge process from the beginning.
/reset Try to remove integration branches unless there are commits on them which do not appear on the source branch.

Status report is not available.

@bert-e

bert-e commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

Waiting for approval

The following approvals are needed before I can proceed with the merge:

  • the author

  • one peer

Peer approvals must include at least 1 approval from the following list:

Comment thread src/lib/components/textbadge/TextBadge.component.tsx
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>
@damiengillesscality

Copy link
Copy Markdown
Contributor Author

/approve

@bert-e

bert-e commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

In the queue

The changeset has received all authorizations and has been added to the
relevant queue(s). The queue(s) will be merged in the target development
branch(es) as soon as builds have passed.

The changeset will be merged in:

  • ✔️ development/1.0

There is no action required on your side. You will be notified here once
the changeset has been merged. In the unlikely event that the changeset
fails permanently on the queue, a member of the admin team will
contact you to help resolve the matter.

IMPORTANT

Please do not attempt to modify this pull request.

  • Any commit you add on the source branch will trigger a new cycle after the
    current queue is merged.
  • Any commit you add on one of the integration branches will be lost.

If you need this pull request to be removed from the queue, please contact a
member of the admin team now.

The following options are set: approve

@bert-e

bert-e commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

I have successfully merged the changeset of this pull request
into targetted development branches:

  • ✔️ development/1.0

Please check the status of the associated issue None.

Goodbye damiengillesscality.

@bert-e bert-e merged commit 27db9f2 into development/1.0 Jun 19, 2026
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants