feat(F0Button): show a counter on buttons, styled right - #5225
Conversation
🔍 Review policy: FeatureThe PR title starts with Required approvals
How this was decided
Policy source: |
✅ No New Circular DependenciesNo new circular dependencies detected. Current count: 0 |
🔍 Visual review for your branch is published 🔍Here are the links to: |
📦 Alpha Package Version PublishedUse Use |
✅ No breaking public API changesNo public exports were removed, renamed, or had existing props/types changed in a breaking way compared to Comparing
|
♿ Accessibility (axe) — components changed in this PR✅ No a11y issues in the stories this PR changed. Scope: only stories in the files/component folders this PR changed. It can't yet flag downstream ripple from shared-code/token changes, or diff against |
Coverage Report for packages/react
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||
The button's counter was the "selected" (teal) type, which reads as a toggled state rather than a plain count. A count next to a label is neutral information, so it now uses the default grey counter, with no way to pick the louder selected or bold types. Note: this also restyles the OneFilterPicker applied-filters counter, the only other caller, from teal to grey.
The margin wrapper was a block line-box taller than the counter, so the pill sat about a pixel below center. Shrinking the wrapper to the counter with inline-flex lets the button's items-center place it exactly.
The default (primary) button is a solid dark-red field where the light grey counter washes out. Scoping the dark theme to just the counter on that variant gives it a dark pill with light text, for contrast, regardless of the app's current theme.
b62d99b to
ff1f2fd
Compare
AngelMsaa
changed the title
AngelMsaa
changed the title
sauldom102
left a comment
sauldom102
left a comment
There was a problem hiding this comment.
Doesn't look a bit wrong in sm? 🤔
Per the Figma "ButtonCounter" spec, a button with a trailing counter drops 4px of right padding at every size (sm 8→4, md 12→8, lg 16→12); the left padding is unchanged, and buttons without a counter keep their symmetric padding.
✅ No untranslated copy addedEvery user-visible string in this PR comes from the i18n layer. Codebase total unchanged at 133. |
✅ Storybook docs — no pages lostEvery page reachable on ✏️ 10 updated ✏️ Updated — 10 page(s)/story/stories across 2 file(s)The source file behind each of these changed. Detection is per file, so editing one story flags its siblings too.
🔇 Added but not in the sidebar — 1Expected for snapshot-only and internal stories (
Links point at this PR's Storybook build — browse the full Storybook. Snapshot of the Storybook index (docs pages + stories) compared against |
Fixed: 
|
…riants - The counter now tracks the button height: 20px on md/lg, 16px on sm. - A count of 0 (or no value) renders nothing — no stray "0", no pill, and the right-padding tightening no longer fires for an absent counter. - The dark pill now covers every solid colour field (default, critical, promote), so the counter stays legible on critical, not just primary. - Documents the counter behaviour in a Storybook story.
- The counter darkens only where a light pill would wash out: always on the primary field, on critical only while hovered. Promote and the other variants keep the neutral counter. - The docs page gains a Counter section under Sizes — a preview of every variant with a counter, and guidance on what it is for and how it adapts.
3 participants
What
Makes the button's counter pill look right: a neutral grey count next to the label, spaced and centered, and dark on the primary variant so it doesn't wash out.
selectedteal — it reads as a count, not a toggled state. No prop to pick another type.Note
Touches the shared
F0Button, so it also restyles the OneFilterPicker applied-filters counter (the only other caller) from teal to grey.Letting a
OneDataCollectionsecondary action actually request a counter is the paired PR #5249.