chore(SegmentedControl): Remove the CSS modules feature flag from the SegmentedControl component (#5933)

jonrohan · joshblack · web-flow · commit ed6e947e5718 · 2025-05-09T21:36:22.000Z
Co-authored-by: Josh Black &lt;joshblack@github.com&gt;
diff --git a/.changeset/chilled-camels-obey.md b/.changeset/chilled-camels-obey.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Remove the CSS modules feature flag from the SegmentedControl component
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.module.css b/packages/react/src/SegmentedControl/SegmentedControl.module.css
@@ -151,9 +151,9 @@
   border-style: solid;
   border-width: var(--borderWidth-thin);
 
-  /* 
-    innerRadius = outerRadius - distance/2 
-    https://stackoverflow.com/questions/2932146/math-problem-determine-the-corner-radius-of-an-inner-border-based-on-outer-corn 
+  /*
+    innerRadius = outerRadius - distance/2
+    https://stackoverflow.com/questions/2932146/math-problem-determine-the-corner-radius-of-an-inner-border-based-on-outer-corn
   */
   /* stylelint-disable-next-line primer/borders */
   border-radius: calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset) / 2);
@@ -197,3 +197,7 @@
   content: attr(data-text);
   user-select: none;
 }
+
+.LeadingIcon {
+  margin-right: var(--base-size-4);
+}
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.tsx b/packages/react/src/SegmentedControl/SegmentedControl.tsx
@@ -7,29 +7,16 @@ import {ActionList} from '../ActionList'
 import {ActionMenu} from '../ActionMenu'
 import {useTheme} from '../ThemeProvider'
 import type {SxProp} from '../sx'
-import sx, {merge} from '../sx'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
 import {useResponsiveValue} from '../hooks/useResponsiveValue'
 import type {WidthOnlyViewportRangeKeys} from '../utils/types/ViewportRangeKeys'
-import styled from 'styled-components'
 import {defaultSxProp} from '../utils/defaultSxProp'
 import {isElement} from 'react-is'
 
 import classes from './SegmentedControl.module.css'
 
-import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
-import {useFeatureFlag} from '../FeatureFlags'
 import {clsx} from 'clsx'
-import {SEGMENTED_CONTROL_CSS_MODULES_FEATURE_FLAG} from './getSegmentedControlStyles'
-
-// Needed because passing a ref to `Box` causes a type error
-const SegmentedControlList = toggleStyledComponent(
-  SEGMENTED_CONTROL_CSS_MODULES_FEATURE_FLAG,
-  'ul',
-  styled.ul`
-    ${sx};
-  `,
-)
+import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 type SegmentedControlProps = {
   'aria-label'?: string
@@ -46,19 +33,6 @@ type SegmentedControlProps = {
   className?: string
 } & SxProp
 
-const getSegmentedControlStyles = (props: {isFullWidth?: boolean; size?: SegmentedControlProps['size']}) => ({
-  backgroundColor: 'segmentedControl.bg',
-  borderRadius: 2,
-  border: '1px solid',
-  borderColor: 'var(--controlTrack-borderColor-rest, transparent)',
-  display: props.isFullWidth ? 'flex' : 'inline-flex',
-  fontSize: props.size === 'small' ? 0 : 1,
-  height: props.size === 'small' ? '28px' : '32px', // TODO: use primitive `control.{small|medium}.size` when it is available
-  margin: 0,
-  padding: 0,
-  width: props.isFullWidth ? '100%' : undefined,
-})
-
 const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledby,
@@ -130,9 +104,6 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
     return React.isValidElement<SegmentedControlIconButtonProps>(childArg) ? childArg.props['aria-label'] : null
   }
 
-  const enabled = useFeatureFlag(SEGMENTED_CONTROL_CSS_MODULES_FEATURE_FLAG)
-  const listSx = enabled ? sxProp : merge(getSegmentedControlStyles({isFullWidth, size}), sxProp as SxProp)
-
   if (!ariaLabel && !ariaLabelledby) {
     // eslint-disable-next-line no-console
     console.warn(
@@ -183,12 +154,13 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
     </>
   ) : (
     // Render a segmented control
-    <SegmentedControlList
-      sx={listSx}
+    <BoxWithFallback
+      as="ul"
+      sx={sxProp}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledby}
       ref={segmentedControlContainerRef}
-      className={clsx(enabled && classes.SegmentedControl, className)}
+      className={clsx(classes.SegmentedControl, className)}
       data-full-width={isFullWidth || undefined}
       data-size={size}
       {...rest}
@@ -210,11 +182,12 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
                 isUncontrolled && setSelectedIndexInternalState(index)
               },
           selected: index === selectedIndex,
-          sx: {
+          style: {
             '--separator-color':
               index === selectedIndex || index === selectedIndex - 1 ? 'transparent' : theme?.colors.border.default,
-            ...child.props.sx,
+            ...child.props.style,
           },
+          sx: child.props.sx,
         }
 
         // Render the 'hideLabels' variant of the SegmentedControlButton
@@ -255,7 +228,7 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
         // Render the children as-is and add the shared child props
         return React.cloneElement(child, sharedChildProps)
       })}
-    </SegmentedControlList>
+    </BoxWithFallback>
   )
 }
 
diff --git a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
@@ -1,23 +1,13 @@
 import type {ButtonHTMLAttributes} from 'react'
 import React from 'react'
 import type {IconProps} from '@primer/octicons-react'
-import styled from 'styled-components'
-import Box from '../Box'
 import type {SxProp} from '../sx'
-import sx, {merge} from '../sx'
-import {
-  getSegmentedControlButtonStyles,
-  getSegmentedControlListItemStyles,
-  SEGMENTED_CONTROL_CSS_MODULES_FEATURE_FLAG,
-} from './getSegmentedControlStyles'
 import {defaultSxProp} from '../utils/defaultSxProp'
 import {isElement} from 'react-is'
-import getGlobalFocusStyles from '../internal/utils/getGlobalFocusStyles'
-import {useFeatureFlag} from '../FeatureFlags'
 
 import classes from './SegmentedControl.module.css'
 import {clsx} from 'clsx'
-import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
+import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 export type SegmentedControlButtonProps = {
   /** The visible label rendered in the button */
@@ -31,43 +21,35 @@ export type SegmentedControlButtonProps = {
 } & SxProp &
   ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>
 
-const SegmentedControlButtonStyled = toggleStyledComponent(
-  SEGMENTED_CONTROL_CSS_MODULES_FEATURE_FLAG,
-  'button',
-  styled.button`
-    ${getGlobalFocusStyles('-1px')};
-    ${sx};
-  `,
-)
-
 const SegmentedControlButton: React.FC<React.PropsWithChildren<SegmentedControlButtonProps>> = ({
   children,
   leadingIcon: LeadingIcon,
   selected,
   sx: sxProp = defaultSxProp,
   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
 }) => {
-  const enabled = useFeatureFlag(SEGMENTED_CONTROL_CSS_MODULES_FEATURE_FLAG)
-  const mergedSx = enabled ? sxProp : merge(getSegmentedControlListItemStyles(), sxProp as SxProp)
-
   return (
-    <Box as="li" sx={mergedSx} className={clsx(enabled && classes.Item)} data-selected={selected || undefined}>
-      <SegmentedControlButtonStyled
+    <BoxWithFallback as="li" sx={sxProp} className={clsx(classes.Item)} data-selected={selected ? '' : undefined}>
+      <BoxWithFallback
+        as="button"
         aria-current={selected}
-        sx={enabled ? undefined : getSegmentedControlButtonStyles({selected, children})}
-        className={clsx(enabled && classes.Button, className)}
+        className={clsx(classes.Button, className)}
         type="button"
         {...rest}
       >
-        <span className={clsx(enabled ? classes.Content : 'segmentedControl-content')}>
-          {LeadingIcon && <Box mr={1}>{isElement(LeadingIcon) ? LeadingIcon : <LeadingIcon />}</Box>}
-          <Box className={clsx(enabled ? classes.Text : 'segmentedControl-text')} data-text={children}>
+        <span className={clsx(classes.Content, 'segmentedControl-content')}>
+          {LeadingIcon && (
+            <div className={classes.LeadingIcon}>{isElement(LeadingIcon) ? LeadingIcon : <LeadingIcon />}</div>
+          )}
+          <div className={clsx(classes.Text, 'segmentedControl-text')} data-text={children}>
             {children}
-          </Box>
+          </div>
         </span>
-      </SegmentedControlButtonStyled>
-    </Box>
+      </BoxWithFallback>
+    </BoxWithFallback>
   )
 }
 
diff --git a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
@@ -1,24 +1,15 @@
 import type {ButtonHTMLAttributes} from 'react'
 import React from 'react'
 import type {IconProps} from '@primer/octicons-react'
-import styled from 'styled-components'
 import type {SxProp} from '../sx'
-import sx, {merge} from '../sx'
-import {
-  getSegmentedControlButtonStyles,
-  getSegmentedControlListItemStyles,
-  SEGMENTED_CONTROL_CSS_MODULES_FEATURE_FLAG,
-} from './getSegmentedControlStyles'
-import Box from '../Box'
 import {defaultSxProp} from '../utils/defaultSxProp'
 import {isElement} from 'react-is'
-import getGlobalFocusStyles from '../internal/utils/getGlobalFocusStyles'
 import {useFeatureFlag} from '../FeatureFlags'
 import type {TooltipDirection} from '../TooltipV2'
 import classes from './SegmentedControl.module.css'
 import {clsx} from 'clsx'
-import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
 import {Tooltip} from '../TooltipV2'
+import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 export type SegmentedControlIconButtonProps = {
   'aria-label': string
@@ -35,15 +26,6 @@ export type SegmentedControlIconButtonProps = {
 } & SxProp &
   ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>
 
-const SegmentedControlIconButtonStyled = toggleStyledComponent(
-  SEGMENTED_CONTROL_CSS_MODULES_FEATURE_FLAG,
-  'button',
-  styled.button`
-    ${getGlobalFocusStyles('-1px')};
-    ${sx};
-  `,
-)
-
 export const SegmentedControlIconButton: React.FC<React.PropsWithChildren<SegmentedControlIconButtonProps>> = ({
   'aria-label': ariaLabel,
   icon: Icon,
@@ -54,67 +36,54 @@ export const SegmentedControlIconButton: React.FC<React.PropsWithChildren<Segmen
   tooltipDirection,
   ...rest
 }) => {
-  const enabled = useFeatureFlag(SEGMENTED_CONTROL_CSS_MODULES_FEATURE_FLAG)
-  const mergedSx = enabled
-    ? sxProp
-    : merge(
-        {
-          width: '32px', // TODO: use primitive `control.medium.size` when it is available
-          ...getSegmentedControlListItemStyles(),
-        },
-        sxProp as SxProp,
-      )
-
   const tooltipFlagEnabled = useFeatureFlag('primer_react_segmented_control_tooltip')
   if (tooltipFlagEnabled) {
     return (
-      <Box
+      <BoxWithFallback
         as="li"
-        sx={mergedSx}
-        className={clsx(enabled && classes.Item, className)}
+        sx={sxProp}
+        className={clsx(classes.Item, className)}
         data-selected={selected || undefined}
       >
         <Tooltip
           type={description ? undefined : 'label'}
           text={description ? description : ariaLabel}
           direction={tooltipDirection}
         >
-          <SegmentedControlIconButtonStyled
+          <BoxWithFallback
+            as="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}
-            sx={enabled ? undefined : getSegmentedControlButtonStyles({selected})}
-            className={clsx(enabled && classes.Button, enabled && classes.IconButton)}
+            className={clsx(classes.Button, classes.IconButton)}
             {...rest}
           >
-            <span className={clsx(enabled ? classes.Content : 'segmentedControl-content')}>
+            <span className={clsx(classes.Content, 'segmentedControl-content')}>
               {isElement(Icon) ? Icon : <Icon />}
             </span>
-          </SegmentedControlIconButtonStyled>
+          </BoxWithFallback>
         </Tooltip>
-      </Box>
+      </BoxWithFallback>
     )
   } else {
     // This can be removed when primer_react_segmented_control_tooltip feature flag is GA-ed.
     return (
-      <Box
+      <BoxWithFallback
         as="li"
-        sx={mergedSx}
-        className={clsx(enabled && classes.Item, className)}
+        sx={sxProp}
+        className={clsx(classes.Item, className)}
         data-selected={selected || undefined}
       >
-        <SegmentedControlIconButtonStyled
+        <BoxWithFallback
+          as="button"
           aria-label={ariaLabel}
           aria-current={selected}
-          sx={enabled ? undefined : getSegmentedControlButtonStyles({selected})}
-          className={clsx(enabled && classes.Button, enabled && classes.IconButton)}
+          className={clsx(classes.Button, classes.IconButton)}
           {...rest}
         >
-          <span className={clsx(enabled ? classes.Content : 'segmentedControl-content')}>
-            {isElement(Icon) ? Icon : <Icon />}
-          </span>
-        </SegmentedControlIconButtonStyled>
-      </Box>
+          <span className={clsx(classes.Content, 'segmentedControl-content')}>{isElement(Icon) ? Icon : <Icon />}</span>
+        </BoxWithFallback>
+      </BoxWithFallback>
     )
   }
 }
diff --git a/packages/react/src/SegmentedControl/getSegmentedControlStyles.ts b/packages/react/src/SegmentedControl/getSegmentedControlStyles.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@primer/react": minor
 +---
++
 +Remove the CSS modules feature flag from the SegmentedControl component