Remove sx from the SegmentedControl component (#6741)

liuliu-dev · web-flow · commit 4896ef1b541e · 2025-09-11T21:26:04.000Z
diff --git a/.changeset/witty-chicken-leave.md b/.changeset/witty-chicken-leave.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Remove sx prop support from the SegmentedControl component.
diff --git a/e2e/components/SegmentedControl.test.ts b/e2e/components/SegmentedControl.test.ts
@@ -60,14 +60,6 @@ const stories = [
     title: 'Dev: With Css',
     id: 'components-segmentedcontrol-dev--with-css',
   },
-  {
-    title: 'Dev: With Sx',
-    id: 'components-segmentedcontrol-dev--with-sx',
-  },
-  {
-    title: 'Dev: With Sx And Css',
-    id: 'components-segmentedcontrol-dev--with-sx-and-css',
-  },
 ] as const
 
 test.describe('SegmentedControl', () => {
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx b/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx
@@ -31,47 +31,3 @@ export const WithCss = () => (
     </SegmentedControl.Button>
   </SegmentedControl>
 )
-
-export const WithSx = () => (
-  <SegmentedControl aria-label="File view" sx={{fontFamily: 'monospace'}}>
-    <SegmentedControl.Button defaultSelected aria-label={'Preview'} leadingIcon={EyeIcon} sx={{color: 'success.fg'}}>
-      Preview
-    </SegmentedControl.Button>
-    <SegmentedControl.Button aria-label={'Raw'} leadingIcon={FileCodeIcon} sx={{color: 'success.fg'}}>
-      Raw
-    </SegmentedControl.Button>
-    <SegmentedControl.Button aria-label={'Blame'} leadingIcon={PeopleIcon} sx={{color: 'success.fg'}}>
-      Blame
-    </SegmentedControl.Button>
-  </SegmentedControl>
-)
-
-export const WithSxAndCss = () => (
-  <SegmentedControl aria-label="File view" sx={{fontFamily: 'monospace'}} className="testCustomClassnameMono">
-    <SegmentedControl.Button
-      defaultSelected
-      aria-label={'Preview'}
-      leadingIcon={EyeIcon}
-      sx={{color: 'success.fg'}}
-      className="testCustomClassnameColor"
-    >
-      Preview
-    </SegmentedControl.Button>
-    <SegmentedControl.Button
-      aria-label={'Raw'}
-      leadingIcon={FileCodeIcon}
-      sx={{color: 'success.fg'}}
-      className="testCustomClassnameColor"
-    >
-      Raw
-    </SegmentedControl.Button>
-    <SegmentedControl.Button
-      aria-label={'Blame'}
-      leadingIcon={PeopleIcon}
-      sx={{color: 'success.fg'}}
-      className="testCustomClassnameColor"
-    >
-      Blame
-    </SegmentedControl.Button>
-  </SegmentedControl>
-)
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.docs.json b/packages/react/src/SegmentedControl/SegmentedControl.docs.json
@@ -78,12 +78,7 @@
       "type": "'small' | 'medium'",
       "description": "The size of the buttons",
       "defaultValue": ""
-    },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
-    },
+    }, 
     {
       "name": "ref",
       "type": "React.RefObject<HTMLDivElement>"
@@ -110,12 +105,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": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
+        }, 
         {
           "name": "ref",
           "type": "React.RefObject<HTMLButtonElement>"
@@ -156,12 +146,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": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
+        }, 
         {
           "name": "ref",
           "type": "React.RefObject<HTMLButtonElement>"
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.tsx b/packages/react/src/SegmentedControl/SegmentedControl.tsx
@@ -6,18 +6,14 @@ import SegmentedControlIconButton from './SegmentedControlIconButton'
 import {ActionList} from '../ActionList'
 import {ActionMenu} from '../ActionMenu'
 import {useTheme} from '../ThemeProvider'
-import type {SxProp} from '../sx'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
 import {useResponsiveValue} from '../hooks/useResponsiveValue'
 import type {WidthOnlyViewportRangeKeys} from '../utils/types/ViewportRangeKeys'
 import {isElement} from 'react-is'
-
 import classes from './SegmentedControl.module.css'
-
 import {clsx} from 'clsx'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
-type SegmentedControlProps = {
+export type SegmentedControlProps = {
   'aria-label'?: string
   'aria-labelledby'?: string
   'aria-describedby'?: string
@@ -30,7 +26,7 @@ type SegmentedControlProps = {
   /** Configure alternative ways to render the control when it gets rendered in tight spaces */
   variant?: 'default' | Partial<Record<WidthOnlyViewportRangeKeys, 'hideLabels' | 'dropdown' | 'default'>>
   className?: string
-} & SxProp
+}
 
 const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
   'aria-label': ariaLabel,
@@ -39,7 +35,6 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
   fullWidth,
   onChange,
   size,
-  sx: sxProp,
   variant = 'default',
   className,
   ...rest
@@ -153,9 +148,7 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
     </>
   ) : (
     // Render a segmented control
-    <BoxWithFallback
-      as="ul"
-      sx={sxProp}
+    <ul
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledby}
       ref={segmentedControlContainerRef}
@@ -186,7 +179,6 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
               index === selectedIndex || index === selectedIndex - 1 ? 'transparent' : theme?.colors.border.default,
             ...child.props.style,
           },
-          sx: child.props.sx,
         }
 
         // Render the 'hideLabels' variant of the SegmentedControlButton
@@ -201,7 +193,6 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
             children: childPropsChildren,
             ...restChildProps
           } = child.props
-          const {sx: sharedSxProp, ...restSharedChildProps} = sharedChildProps
           if (!leadingIcon) {
             // eslint-disable-next-line no-console
             console.warn('A `leadingIcon` prop is required when hiding visible labels')
@@ -210,14 +201,9 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
               <SegmentedControlIconButton
                 aria-label={childAriaLabel || childPropsChildren}
                 icon={leadingIcon}
-                sx={
-                  {
-                    ...sharedSxProp,
-                    // setting width here avoids having to pass `isFullWidth` directly to child components
-                    width: !isFullWidth ? '32px' : '100%', // TODO: use primitive `control.medium.size` when it is available instead of '32px'
-                  } as React.CSSProperties
-                }
-                {...restSharedChildProps}
+                // Width is now handled by CSS: 32px default, 100% when data-full-width is set on parent
+                className={classes.IconButton}
+                {...sharedChildProps}
                 {...restChildProps}
               />
             )
@@ -227,7 +213,7 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
         // Render the children as-is and add the shared child props
         return React.cloneElement(child, sharedChildProps)
       })}
-    </BoxWithFallback>
+    </ul>
   )
 }
 
diff --git a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
@@ -1,12 +1,10 @@
 import type {ButtonHTMLAttributes} from 'react'
 import type React from 'react'
 import type {IconProps} from '@primer/octicons-react'
-import type {SxProp} from '../sx'
 import {isElement} from 'react-is'
 
 import classes from './SegmentedControl.module.css'
 import {clsx} from 'clsx'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 export type SegmentedControlButtonProps = {
   /** The visible label rendered in the button */
@@ -17,28 +15,20 @@ export type SegmentedControlButtonProps = {
   defaultSelected?: boolean
   /** The leading icon comes before item label */
   leadingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement
-} & SxProp &
-  ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>
+} & ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>
 
 const SegmentedControlButton: React.FC<React.PropsWithChildren<SegmentedControlButtonProps>> = ({
   children,
   leadingIcon: LeadingIcon,
   selected,
-  sx: sxProp,
   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,
   ...rest
 }) => {
   return (
-    <BoxWithFallback as="li" sx={sxProp} className={clsx(classes.Item)} data-selected={selected ? '' : undefined}>
-      <BoxWithFallback
-        as="button"
-        aria-current={selected}
-        className={clsx(classes.Button, className)}
-        type="button"
-        {...rest}
-      >
+    <li className={clsx(classes.Item)} data-selected={selected ? '' : undefined}>
+      <button aria-current={selected} className={clsx(classes.Button, className)} type="button" {...rest}>
         <span className={clsx(classes.Content, 'segmentedControl-content')}>
           {LeadingIcon && (
             <div className={classes.LeadingIcon}>{isElement(LeadingIcon) ? LeadingIcon : <LeadingIcon />}</div>
@@ -47,8 +37,8 @@ const SegmentedControlButton: React.FC<React.PropsWithChildren<SegmentedControlB
             {children}
           </div>
         </span>
-      </BoxWithFallback>
-    </BoxWithFallback>
+      </button>
+    </li>
   )
 }
 
diff --git a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
@@ -1,14 +1,12 @@
 import type {ButtonHTMLAttributes} from 'react'
 import type React from 'react'
 import type {IconProps} from '@primer/octicons-react'
-import type {SxProp} from '../sx'
 import {isElement} from 'react-is'
 import {useFeatureFlag} from '../FeatureFlags'
 import type {TooltipDirection} from '../TooltipV2'
 import classes from './SegmentedControl.module.css'
 import {clsx} from 'clsx'
 import {Tooltip} from '../TooltipV2'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 export type SegmentedControlIconButtonProps = {
   'aria-label': string
@@ -22,14 +20,12 @@ export type SegmentedControlIconButtonProps = {
   description?: string
   /** The direction for the tooltip.*/
   tooltipDirection?: TooltipDirection
-} & SxProp &
-  ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>
+} & ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>
 
 export const SegmentedControlIconButton: React.FC<React.PropsWithChildren<SegmentedControlIconButtonProps>> = ({
   'aria-label': ariaLabel,
   icon: Icon,
   selected,
-  sx: sxProp,
   className,
   description,
   tooltipDirection,
@@ -38,19 +34,14 @@ export const SegmentedControlIconButton: React.FC<React.PropsWithChildren<Segmen
   const tooltipFlagEnabled = useFeatureFlag('primer_react_segmented_control_tooltip')
   if (tooltipFlagEnabled) {
     return (
-      <BoxWithFallback
-        as="li"
-        sx={sxProp}
-        className={clsx(classes.Item, className)}
-        data-selected={selected || undefined}
-      >
+      <li className={clsx(classes.Item, className)} data-selected={selected || undefined}>
         <Tooltip
           type={description ? undefined : 'label'}
           text={description ? description : ariaLabel}
           direction={tooltipDirection}
         >
-          <BoxWithFallback
-            as="button"
+          <button
+            type="button"
             aria-current={selected}
             // If description is provided, we will use the tooltip to describe the button, so we need to keep the aria-label to label the button.
             aria-label={description ? ariaLabel : undefined}
@@ -60,29 +51,24 @@ export const SegmentedControlIconButton: React.FC<React.PropsWithChildren<Segmen
             <span className={clsx(classes.Content, 'segmentedControl-content')}>
               {isElement(Icon) ? Icon : <Icon />}
             </span>
-          </BoxWithFallback>
+          </button>
         </Tooltip>
-      </BoxWithFallback>
+      </li>
     )
   } else {
     // This can be removed when primer_react_segmented_control_tooltip feature flag is GA-ed.
     return (
-      <BoxWithFallback
-        as="li"
-        sx={sxProp}
-        className={clsx(classes.Item, className)}
-        data-selected={selected || undefined}
-      >
-        <BoxWithFallback
-          as="button"
+      <li className={clsx(classes.Item, className)} data-selected={selected || undefined}>
+        <button
+          type="button"
           aria-label={ariaLabel}
           aria-current={selected}
           className={clsx(classes.Button, classes.IconButton)}
           {...rest}
         >
           <span className={clsx(classes.Content, 'segmentedControl-content')}>{isElement(Icon) ? Icon : <Icon />}</span>
-        </BoxWithFallback>
-      </BoxWithFallback>
+        </button>
+      </li>
     )
   }
 }
diff --git a/packages/react/src/SegmentedControl/index.ts b/packages/react/src/SegmentedControl/index.ts
@@ -1 +1,5 @@
 export * from './SegmentedControl'
+
+export type {SegmentedControlProps} from './SegmentedControl'
+export type {SegmentedControlButtonProps} from './SegmentedControlButton'
+export type {SegmentedControlIconButtonProps} from './SegmentedControlIconButton'
diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -130,6 +130,9 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "type RelativeTimeProps",
   "ResponsiveValue",
   "SegmentedControl",
+  "type SegmentedControlButtonProps",
+  "type SegmentedControlIconButtonProps",
+  "type SegmentedControlProps",
   "Select",
   "SelectPanel",
   "type SelectPanelGroupedListProps",
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
@@ -134,6 +134,11 @@ export {default as RadioGroup} from './RadioGroup'
 export type {RelativeTimeProps} from './RelativeTime'
 export {default as RelativeTime} from './RelativeTime'
 export {SegmentedControl} from './SegmentedControl'
+export type {
+  SegmentedControlProps,
+  SegmentedControlButtonProps,
+  SegmentedControlIconButtonProps,
+} from './SegmentedControl'
 // Curently there is a duplicate Select component at the root of the dir, so need to be explicit about exporting from the src/Select dir
 export {default as Select} from './Select'
 export type {SelectProps} from './Select'
diff --git a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@primer/react': major
 +---
++
 +Remove sx prop support from the SegmentedControl component.