Uh oh!
There was an error while loading. Please reload this page.
Add count to SegmentedControlButton - #6721
Conversation
Modeled after the counter in packages/react/src/UnderlineNav/UnderlineNavItem.tsx and how it's rendered in packages/react/src/internal/components/UnderlineTabbedInterface.tsx.
🦋 Changeset detectedLatest commit: 175a276 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks! |
size-limit report 📦
|
👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/1723 |
There was a problem hiding this comment.
Pull Request Overview
This PR adds a new counter prop to SegmentedControl.Button to display count labels on the right side of buttons, following the same pattern as UnderlineNav.Item. This feature enables displaying numeric counts alongside segment labels, useful for scenarios like showing issue counts by label type.
- Adds
counterprop accepting number or string values toSegmentedControlButton - Implements counter rendering using the existing
CounterLabelcomponent with proper spacing - Updates Storybook stories and documentation to showcase the new functionality
Reviewed Changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| SegmentedControlButton.tsx | Adds counter prop type definition and conditional rendering logic |
| SegmentedControlButton.stories.tsx | Updates Playground story to include counter control |
| SegmentedControl.module.css | Adds CSS styling for counter positioning and alignment |
| SegmentedControl.features.stories.tsx | Adds new "With Counter Labels" feature story |
| SegmentedControl.docs.json | Documents the new counter prop in component metadata |
joshblack
left a comment
There was a problem hiding this comment.
Thanks so much for taking the time to submit a PR! Appreciate it a ton 🙏
Just left a couple of comments/suggestions, hope they make sense. I also tagged in @langermank on the design side to review 🔍
Uh oh!
There was an error while loading. Please reload this page.
| "description": "Whether the segment is selected. This is used for uncontrolled SegmentedControls to pick one SegmentedControlButton that is selected on the initial render." | ||
| }, | ||
| { | ||
| "name": "counter", |
There was a problem hiding this comment.
Random question for you @langermank, do you know why for Button we call this count. but for UnderlineNav.Item it's counter? 🤔
There was a problem hiding this comment.
I don't think there's any logical reason other than they were probably added at different times and by different people, and it would be nice if they matched 😄
There was a problem hiding this comment.
@langermank do you have a preference for count or counter? Mine would be count, I think
Uh oh!
There was an error while loading. Please reload this page.
https: //github.com//pull/6721#discussion_r2322729732 Co-Authored-By: Josh Black <3901764+joshblack@users.noreply.github.com>
https: //github.com//pull/6721#discussion_r2322722420 Co-Authored-By: Josh Black <3901764+joshblack@users.noreply.github.com>
langermank
left a comment
There was a problem hiding this comment.
Some squishyness happening, I haven't taken a closer look to find a solution but happy to if needed!
@cheshire137 if you wouldn't mind, could you add the new feature story you added to this file so it will create a VRT snapshot? No worries if not, we can add it in a followup!
| "description": "Whether the segment is selected. This is used for uncontrolled SegmentedControls to pick one SegmentedControlButton that is selected on the initial render." | ||
| }, | ||
| { | ||
| "name": "counter", |
There was a problem hiding this comment.
I don't think there's any logical reason other than they were probably added at different times and by different people, and it would be nice if they matched 😄
https: //github.com//pull/6721/files#r2330801548 Co-Authored-By: Katie Langerman <18661030+langermank@users.noreply.github.com> Co-Authored-By: Josh Black <3901764+joshblack@users.noreply.github.com>
count to SegmentedControlButtonlangermank
left a comment
There was a problem hiding this comment.
I'm going to open a followup PR to fix the overflow problem 👍
cheshire137
commented
Sep 10, 2025
Oh heck, I forgot all about that comment, sorry about that and thank you @langermank! If you'd prefer, we could get it fixed in this branch. |
langermank
commented
Sep 10, 2025
@cheshire137 no worries at all. I dug into it and its not really tied to the count addition, it's pre-existing. So I think it's probably better to fix it in a separate PR anyway! |
cheshire137
commented
Sep 15, 2025
I'll get conflicts resolved. |
Uh oh!
There was an error while loading. Please reload this page.
This adds a new
countprop toSegmentedControl.Button, modeled after thecounterthatUnderlineNav.Itemhas and thecountthatButtonhas.cc @francinelucca with whom I talked about adding such a prop
Changelog
New
Adds the
countprop toSegmentedControl.Buttonto allow displaying a count label on the right side of the button.Changed
Removed
Rollout strategy
Testing & Reviewing
The SegmentedControl > Features > With Counter Labels story and SegmentedControl > SegmentedControl.Button > Playground story have been updated to show off the new prop.
Merge checklist