SegmentedControl: add subtle variant and action slot

.changeset/segmented-control-subtle-add-view.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+SegmentedControl: Add a subtle visual variant with group dividers and an optional trailing action child.

e2e/components/SegmentedControl.test.ts

@@ -28,10 +28,18 @@ const stories = [
     title: 'Variant Narrow Action Menu',
     id: 'components-segmentedcontrol-features--variant-narrow-action-menu',
   },
+  {
+    title: 'Variant Narrow Action Menu With Action',
+    id: 'components-segmentedcontrol-features--variant-narrow-action-menu-with-action',
+  },
   {
     title: 'Variant Narrow Hide Labels',
     id: 'components-segmentedcontrol-features--variant-narrow-hide-labels',
   },
+  {
+    title: 'Variant Subtle',
+    id: 'components-segmentedcontrol-features--variant-subtle',
+  },
   {
     title: 'Controlled',
     id: 'components-segmentedcontrol-features--controlled',
@@ -102,6 +110,12 @@ test.describe('SegmentedControl', () => {
               await page.keyboard.press('Shift+Tab')
               await expect(page).toHaveScreenshot(`SegmentedControl.${story.title}.${theme}.middle.selected.focus.png`)
             }
+
+            if (story.title === 'Variant Narrow Action Menu With Action') {
+              await page.setViewportSize({width: viewports['primer.breakpoint.xs'], height: 768})
+              await page.locator('[data-component="ActionMenu.Button"]').click()
+              await expect(page).toHaveScreenshot(`SegmentedControl.${story.title}.${theme}.menu.png`)
+            }
           })
         })
       }

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

@@ -19,6 +19,9 @@
     {
       "id": "components-segmentedcontrol-features--variant-narrow-action-menu"
     },
+    {
+      "id": "components-segmentedcontrol-features--variant-narrow-action-menu-with-action"
+    },
     {
       "id": "components-segmentedcontrol-features--fullwidth-narrow"
     },
@@ -33,6 +36,9 @@
     },
     {
       "id": "components-segmentedcontrol-features--associated-with-a-label-and-caption"
+    },
+    {
+      "id": "components-segmentedcontrol-features--variant-subtle"
     }
   ],
   "importPath": "@primer/react",
@@ -69,9 +75,9 @@
     },
     {
       "name": "variant",
-      "type": "| 'default' | { narrow?: 'hideLabels' | 'dropdown' | 'default' regular?: 'hideLabels' | 'dropdown' | 'default' wide?: 'hideLabels' | 'dropdown' | 'default' }",
+      "type": "| 'default' | 'subtle' | { narrow?: 'hideLabels' | 'dropdown' | 'default' | 'subtle' regular?: 'hideLabels' | 'dropdown' | 'default' | 'subtle' wide?: 'hideLabels' | 'dropdown' | 'default' | 'subtle' }",
       "defaultValue": "'default'",
-      "description": "Configure alternative ways to render the control when it gets rendered in tight spaces"
+      "description": "Configure the control's visual treatment or responsive behavior in tight spaces."
     },
     {
       "name": "size",
@@ -177,6 +183,53 @@
           "defaultValue": ""
         }
       ]
+    },
+    {
+      "name": "SegmentedControl.Divider",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "style",
+          "type": "React.CSSProperties",
+          "required": false
+        }
+      ]
+    },
+    {
+      "name": "SegmentedControl.Action",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "required": true,
+          "description": "Accessible label for the action icon button."
+        },
+        {
+          "name": "icon",
+          "type": "Component",
+          "required": true,
+          "description": "The icon rendered by the action button."
+        },
+        {
+          "name": "onClick",
+          "type": "() => void",
+          "description": "The handler that gets called when the action button is clicked."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "description": "Whether the action is disabled."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "description": "Whether the action is in a loading state."
+        }
+      ]
     }
   ]
-}
+}

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

@@ -4,6 +4,10 @@
   gap: var(--base-size-4);
 }
 
+.ResetButton {
+  margin-top: var(--base-size-24);
+}
+
 @media screen and (min-width: 768px) {
   .LabelAndCaptionContainer {
     flex-direction: row;

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

@@ -1,7 +1,8 @@
 import {useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
+import {PlusIcon, EyeIcon, FileCodeIcon, PeopleIcon} from '@primer/octicons-react'
 import {SegmentedControl} from '.'
-import {EyeIcon, FileCodeIcon, PeopleIcon} from '@primer/octicons-react'
+import {Button} from '../Button'
 import Text from '../Text'
 import classes from './SegmentedControl.features.stories.module.css'
 
@@ -34,6 +35,20 @@ export const WithCounterLabels = () => (
   </SegmentedControl>
 )
 
+export const VariantSubtle = () => (
+  <SegmentedControl aria-label="View" variant="subtle">
+    <SegmentedControl.Button defaultSelected count={5}>
+      All
+    </SegmentedControl.Button>
+    <SegmentedControl.Divider />
+    <SegmentedControl.Button count={3}>Active</SegmentedControl.Button>
+    <SegmentedControl.Button count={10}>Review requests</SegmentedControl.Button>
+    <SegmentedControl.Divider />
+    <SegmentedControl.Button count={2}>Done</SegmentedControl.Button>
+  </SegmentedControl>
+)
+VariantSubtle.storyName = '[variant: subtle] Low emphasis'
+
 export const Controlled = () => {
   const [selectedIndex, setSelectedIndex] = useState(0)
   const handleChange = (i: number) => {
@@ -78,6 +93,56 @@ export const VariantNarrowActionMenu = () => (
 )
 VariantNarrowActionMenu.storyName = '[variant: narrow] Action menu'
 
+export const VariantNarrowActionMenuWithAction = () => {
+  const initialViews = [
+    {id: 'all', label: 'All'},
+    {id: 'active', label: 'Active'},
+    {id: 'review-requests', label: 'Review requests'},
+    {id: 'done', label: 'Done'},
+  ]
+  const [views, setViews] = useState(initialViews)
+  const [selectedViewId, setSelectedViewId] = useState(initialViews[0].id)
+
+  const handleAddView = () => {
+    setViews(currentViews => {
+      const viewNumber = currentViews.length - 3
+      return [...currentViews, {id: `new-view-${viewNumber}`, label: `New view ${viewNumber}`}]
+    })
+  }
+
+  const handleChange = (index: number) => {
+    const nextSelectedViewId = views.at(index)?.id
+    if (nextSelectedViewId) setSelectedViewId(nextSelectedViewId)
+  }
+
+  const handleReset = () => {
+    setViews(initialViews)
+    setSelectedViewId(initialViews[0].id)
+  }
+
+  return (
+    <>
+      <SegmentedControl
+        aria-label="View"
+        onChange={handleChange}
+        variant={{narrow: 'dropdown', regular: 'subtle', wide: 'subtle'}}
+      >
+        {views.flatMap(view => [
+          ...(view.label === 'Active' ? [<SegmentedControl.Divider key={`${view.label}-divider`} />] : []),
+          <SegmentedControl.Button key={view.id} selected={view.id === selectedViewId}>
+            {view.label}
+          </SegmentedControl.Button>,
+        ])}
+        <SegmentedControl.Action label="Add view" icon={PlusIcon} onClick={handleAddView} />
+      </SegmentedControl>
+      <Button className={classes.ResetButton} size="small" onClick={handleReset}>
+        Reset views
+      </Button>
+    </>
+  )
+}
+VariantNarrowActionMenuWithAction.storyName = '[variant: narrow] Action menu with trailing action'
+
 export const FullwidthNarrow = () => (
   <SegmentedControl aria-label="File view" fullWidth={{narrow: true, regular: false, wide: false}}>
     <SegmentedControl.Button defaultSelected aria-label={'Preview'} leadingVisual={EyeIcon}>