Add count to SegmentedControlButton

.changeset/unlucky-hotels-shake.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Add count to SegmentedControlButton

e2e/components/SegmentedControl.test.ts

@@ -48,6 +48,10 @@ const stories = [
     title: 'With Icons',
     id: 'components-segmentedcontrol-features--with-icons',
   },
+  {
+    title: 'With Counter Labels',
+    id: 'components-segmentedcontrol-features--with-counter-labels',
+  },
   {
     title: 'SegmentedControlButton Playground',
     id: 'components-segmentedcontrol-segmentedcontrol-button--playground',

packages/react/src/SegmentedControl/SegmentedControl.docs.json

@@ -78,7 +78,7 @@
       "type": "'small' | 'medium'",
       "description": "The size of the buttons",
       "defaultValue": ""
-    }, 
+    },
     {
       "name": "ref",
       "type": "React.RefObject<HTMLDivElement>"
@@ -105,7 +105,13 @@
           "type": "boolean",
           "defaultValue": "",
           "description": "Whether the segment is selected. This is used for uncontrolled SegmentedControls to pick one SegmentedControlButton that is selected on the initial render."
-        }, 
+        },
+        {
+          "name": "count",
+          "type": "number | string",
+          "defaultValue": "",
+          "description": "The number to display in the counter label."
+        },
         {
           "name": "ref",
           "type": "React.RefObject<HTMLButtonElement>"
@@ -146,7 +152,7 @@
           "type": "boolean",
           "defaultValue": "",
           "description": "Whether the segment is selected. This is used for uncontrolled SegmentedControls to pick one SegmentedControlButton that is selected on the initial render."
-        }, 
+        },
         {
           "name": "ref",
           "type": "React.RefObject<HTMLButtonElement>"

packages/react/src/SegmentedControl/SegmentedControl.features.stories.tsx

@@ -24,6 +24,20 @@ export const WithIcons = () => (
   </SegmentedControl>
 )
 
+export const WithCounterLabels = () => (
+  <SegmentedControl aria-label="Issues by label">
+    <SegmentedControl.Button defaultSelected aria-label="Feature" count={5}>
+      Feature
+    </SegmentedControl.Button>
+    <SegmentedControl.Button aria-label="Bug" count={3}>
+      Bug
+    </SegmentedControl.Button>
+    <SegmentedControl.Button aria-label="Good first issue" count={10}>
+      Good first issue
+    </SegmentedControl.Button>
+  </SegmentedControl>
+)
+
 export const Controlled = () => {
   const [selectedIndex, setSelectedIndex] = useState(0)
   const handleChange = (i: number) => {

packages/react/src/SegmentedControl/SegmentedControl.module.css

@@ -65,6 +65,12 @@
     /* stylelint-disable-next-line primer/spacing */
     margin-right: -1px;
   }
+
+  .Counter {
+    margin-inline-start: var(--base-size-8);
+    display: flex;
+    align-items: center;
+  }
 }
 
 .Button {

packages/react/src/SegmentedControl/SegmentedControlButton.stories.tsx

@@ -43,4 +43,7 @@ Playground.argTypes = {
   defaultSelected: {
     type: 'boolean',
   },
+  count: {
+    type: 'number',
+  },
 }

packages/react/src/SegmentedControl/SegmentedControlButton.tsx

@@ -5,6 +5,7 @@ import {isElement} from 'react-is'
 
 import classes from './SegmentedControl.module.css'
 import {clsx} from 'clsx'
+import CounterLabel from '../CounterLabel'
 
 export type SegmentedControlButtonProps = {
   /** The visible label rendered in the button */
@@ -15,6 +16,8 @@ export type SegmentedControlButtonProps = {
   defaultSelected?: boolean
   /** The leading icon comes before item label */
   leadingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement
+  /** Optional counter to display on the right side of the button */
+  count?: number | string
 } & ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>
 
 const SegmentedControlButton: React.FC<React.PropsWithChildren<SegmentedControlButtonProps>> = ({
@@ -24,6 +27,7 @@ const SegmentedControlButton: React.FC<React.PropsWithChildren<SegmentedControlB
   className,
   // Note: this value is read in the `SegmentedControl` component to determine which button is selected but we do not need to apply it to an underlying element
   defaultSelected: _defaultSelected,
+  count,
   ...rest
 }) => {
   return (
@@ -36,6 +40,11 @@ const SegmentedControlButton: React.FC<React.PropsWithChildren<SegmentedControlB
           <div className={clsx(classes.Text, 'segmentedControl-text')} data-text={children}>
             {children}
           </div>
+          {count !== undefined && (
+            <span className={classes.Counter}>
+              <CounterLabel>{count}</CounterLabel>
+            </span>
+          )}
         </span>
       </button>
     </li>