fix(textbadge)!: remove outer horizontal margin — BREAKING: badges now need a gapped parent (CUI-51) by eve-ci-cd[bot] · Pull Request #1254 · scality/core-ui

eve-ci-cd · 2026-10-08T07:20:46Z

TL;DR — TextBadge no longer carries an outer horizontal margin, so a badge lines up with its container's edge and every wrapped line of a long label starts at the same x. Tabs keep their original spacing through a gap on TabItem instead of a per-child margin.

📷 Screenshots

Context / Why

On an inline span, a horizontal margin only applies to the first and last line fragments. A badge placed first in a column sat 4px off the edge, and wrapped lines started at different x positions (CUI-51).

🧩 Approach

TextBadge.component.tsx — drop margin: 0 ${spacing.r4} 0 ${spacing.r4} from StyledTextBadge.
StyledTabs.ts / Tabsv2.component.tsx — TabItem gets gap: r4, and TabIcon trims ButtonIcon's own padding-right from r8 to r4 so it does not stack with that gap. An icon with no label gets no padding, matching ButtonIcon.
stories/textbadge.stories.tsx — adjacent badges take their spacing from a parent Stack gap="r8". The narrow-container story renders the long badge directly in the 160px block, so it stays display: inline and actually splits into line fragments.

 // StyledTabs.ts › TabItem
+  gap: ${spacing.r4};

 // Tabsv2.component.tsx › TabIcon
+  padding-right: ${(props) => (props.$label ? spacing.r4 : '0')};

Measured

Root font-size is 14px here, so r4 = 3.5px and r8 = 7px.

Components/Navigation/Tabs › WithQueryParams, against the pre-PR build:

	before	after
icon → label	7px	7px
label → badge	3.5px	3.5px
badge box (left / right)	149.18 / 177.77	149.18 / 177.77

Adding the gap without trimming TabIcon would have pushed icon → label to 10.5px.

Components/TextBadge › Long Label In Narrow Container: the badge spans 2 line fragments, both starting at the container's content edge (84 / 84). Re-adding margin: 0 r4 turns it into 3 fragments starting at 87.5 / 84 / 84 — the CUI-51 symptom. The previous Stack version rendered the badge as a single block box and could not show this at all.

🔍 Review focus

🔴 TextBadge.component.tsx › StyledTextBadge — this is the breaking change CUI-51 asks for, not an incidental one. The ticket states it:

Impact — Breaking change. Anywhere two badges follow each other today, they will touch until the container provides the spacing, so the consumers need a pass.

Adjacent badges, or a label next to a badge, lose 4px until the parent supplies a gap. Consumers are not updated here — the consumer pass is tracked by AIX-1236. Migration for downstream: wrap badges in a gapped parent (<Stack gap="r4">).
Tabsv2.component.tsx › TabIcon — the r8 → r4 trim is what keeps icon-to-label unchanged; it depends on TabItem's gap supplying the other r4.

🔗 References

CUI-51 — wrapped TextBadge labels are misaligned by the outer margin.
AIX-1236 — Guardian-side symptom; the downstream consumer pass.
scality/agent-task#614

Issue: CUI-51

Part of the implementation plan from scality/agent-task#614. Issue: CUI-51

…I-51) Part of the implementation plan from scality/agent-task#614. Issue: CUI-51

…d narrow-column story (CUI-51) Part of the implementation plan from scality/agent-task#614. Issue: CUI-51

eve-ci-cd · 2026-10-08T07:20:48Z

/approve

bert-e · 2026-10-08T07:20:51Z

Hello eve-ci-cd[bot],

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	⭐
`/bypass_source_branch_lineage`	Bypass the cross-branch contamination check	⭐
`/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.
`/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 · 2026-10-08T07:20:58Z

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:

The following options are set: approve

bert-e · 2026-10-12T13:53:54Z

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:

The following options are set: approve

bert-e · 2026-10-12T14:38:00Z

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:

The following options are set: approve

… margin (CUI-51) Removing TextBadge's outer margin reintroduced one on a TabBadge wrapper. Use a flex gap on TabItem instead, and trim ButtonIcon's own r8 padding to r4 so it does not stack with that gap. Measured in Storybook on Components/Navigation/Tabs: icon-to-label stays at r8 and label-to-badge at r4, matching the pre-PR build pixel for pixel. Issue: CUI-51

claude · 2026-10-21T15:02:05Z

      border-radius: 4px;
      font-size: 0.9rem;
      font-weight: ${fontWeight.bold};
-      margin: 0 ${spacing.r4} 0 ${spacing.r4};


Removing this margin changes the stable TextBadge exported from index.ts. Every external consumer with adjacent badges, or a label next to a badge, loses 4px of spacing without any warning. CLAUDE.md says to ship this kind of change behind a major release or as a new version in next.ts. Either do that, or make sure the release gets a breaking-change bump and a migration note ("wrap badges in a gapped parent").

eve-scality · 2026-10-21T15:04:00Z

🔴 Request changes

Why the tests need changes

The test exercises code without verifying any outcome

This review is advisory and does not block the merge.

Full review

The test exercises code without verifying any outcome

src/lib/components/textbadge/TextBadge.component.test.tsx:44-55
Test named 'renders with custom colors' asserts only that text 'env:prod' is in the document — true of any render — and never touches the customColor prop's effect.
Assert on the outcome, or explain why the call alone is the test.

…-51) The gap compensation was unconditional, so an icon-only tab gained r4 of trailing space that ButtonIcon never adds. Mirror ButtonIcon's own condition. Verified in Storybook: with a label the icon keeps padding-right r4 and sits r8 from the label; with an empty label the padding resolves to 0. Issue: CUI-51

bert-e · 2026-10-21T15:09:34Z

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:

The following options are set: approve

… the bug (CUI-51) The story put the long badge inside a vertical Stack, and StackBox is display: flex, so the badge was blockified into a single box. Wrapped lines lined up with or without the old margin, which is the regression the story exists to cover. Rendering it directly in the 160px block keeps it display: inline. Measured in Storybook: the badge now spans 2 line fragments, both starting at the container's content edge; re-adding margin: 0 r4 splits them to 3 fragments starting at 87.5 / 84 / 84, reproducing CUI-51. Issue: CUI-51

bert-e · 2026-10-28T14:18:27Z

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:

The following options are set: approve

Cerebro added 3 commits October 8, 2026 07:16

fix(textbadge): remove outer horizontal margin from TextBadge (CUI-51)

52d481a

Part of the implementation plan from scality/agent-task#614. Issue: CUI-51

fix(tabsv2): restore label-to-badge spacing in the tab badge slot (CU…

18a5ddd

…I-51) Part of the implementation plan from scality/agent-task#614. Issue: CUI-51

docs(textbadge): space adjacent badges with a parent Stack gap and ad…

831d7b9

…d narrow-column story (CUI-51) Part of the implementation plan from scality/agent-task#614. Issue: CUI-51

JBWatenbergScality reviewed Oct 9, 2026

View reviewed changes

Comment thread src/lib/components/tabsv2/Tabsv2.component.tsx Outdated

claude Bot reviewed Oct 21, 2026

View reviewed changes

Comment thread src/lib/components/tabsv2/Tabsv2.component.tsx Outdated

claude Bot reviewed Oct 21, 2026

View reviewed changes

Comment thread stories/textbadge.stories.tsx Outdated

ZiyangLinScality changed the title ~~fix(textbadge): remove outer horizontal margin so wrapped badges align to the container edge~~ fix(textbadge)!: remove outer horizontal margin — BREAKING: badges now need a gapped parent (CUI-51) Oct 28, 2026

Navigation Menu

Repository navigation

fix(textbadge)!: remove outer horizontal margin — BREAKING: badges now need a gapped parent (CUI-51) - #1254

fix(textbadge)!: remove outer horizontal margin — BREAKING: badges now need a gapped parent (CUI-51)#1254
eve-ci-cd[bot] wants to merge 6 commits into
development/1.0from
feature/CUI-51-implement

eve-ci-cd Bot commented Oct 8, 2026 •

edited by atlassian Bot

Loading

Uh oh!

eve-ci-cd Bot commented Oct 8, 2026

Uh oh!

bert-e commented Oct 8, 2026

Uh oh!

bert-e commented Oct 8, 2026

Uh oh!

Uh oh!

bert-e commented Oct 12, 2026

Uh oh!

bert-e commented Oct 12, 2026

Uh oh!

Uh oh!

claude Bot Oct 21, 2026

Uh oh!

eve-scality commented Oct 21, 2026 •

edited

Loading

The test exercises code without verifying any outcome

Uh oh!

Uh oh!

bert-e commented Oct 21, 2026

Uh oh!

bert-e commented Oct 28, 2026

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

eve-ci-cd Bot commented Oct 8, 2026 • edited by atlassian Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📷 Screenshots

Context / Why

🧩 Approach

Measured

🔍 Review focus

🔗 References

Uh oh!

eve-ci-cd Bot commented Oct 8, 2026

Uh oh!

bert-e commented Oct 8, 2026

Hello eve-ci-cd[bot],

Uh oh!

bert-e commented Oct 8, 2026

Waiting for approval

Uh oh!

Uh oh!

bert-e commented Oct 12, 2026

Waiting for approval

Uh oh!

bert-e commented Oct 12, 2026

Waiting for approval

Uh oh!

Uh oh!

claude Bot Oct 21, 2026

Choose a reason for hiding this comment

Uh oh!

eve-scality commented Oct 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔴 Request changes

The test exercises code without verifying any outcome

Uh oh!

Uh oh!

bert-e commented Oct 21, 2026

Waiting for approval

Uh oh!

bert-e commented Oct 28, 2026

Waiting for approval

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

eve-ci-cd Bot commented Oct 8, 2026 •

edited by atlassian Bot

Loading

eve-scality commented Oct 21, 2026 •

edited

Loading