Remove the CSS modules feature flag from the ActionList.LeadingVisual and ActionList.TrailingVisual components

Author: jonrohan

.changeset/modern-words-tan.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Remove the CSS modules feature flag from the ActionList.LeadingVisual and ActionList.TrailingVisual components

packages/react/src/ActionList/Visuals.tsx

@@ -4,13 +4,12 @@ import Box from '../Box'
 import Spinner from '../Spinner'
 import type {SxProp} from '../sx'
 import {merge} from '../sx'
-import {ItemContext, getVariantStyles} from './shared'
+import {ItemContext} from './shared'
 import {Tooltip, type TooltipProps} from '../TooltipV2'
 import {clsx} from 'clsx'
-import {useFeatureFlag} from '../FeatureFlags'
 import classes from './ActionList.module.css'
 import {defaultSxProp} from '../utils/defaultSxProp'
-import {actionListCssModulesFlag} from './featureflag'
+import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 export type VisualProps = SxProp & React.HTMLAttributes<HTMLSpanElement>
 
@@ -19,10 +18,7 @@ export const VisualContainer: React.FC<React.PropsWithChildren<VisualProps>> = (
   className,
   ...props
 }) => {
-  if (sx !== defaultSxProp) {
-    return <Box as="span" className={clsx(className, classes.VisualWrap)} sx={sx} {...props} />
-  }
-  return <span className={clsx(className, classes.VisualWrap)} {...props} />
+  return <BoxWithFallback as="span" className={clsx(className, classes.VisualWrap)} sx={sx} {...props} />
 }
 
 // remove when primer_react_css_modules_X is shipped
@@ -52,89 +48,21 @@ export const LeadingVisualContainer: React.FC<React.PropsWithChildren<VisualProp
 }
 
 export type ActionListLeadingVisualProps = VisualProps
-export const LeadingVisual: React.FC<React.PropsWithChildren<VisualProps>> = ({
-  sx = defaultSxProp,
-  className,
-  ...props
-}) => {
-  const {variant, disabled, inactive} = React.useContext(ItemContext)
-
-  const enabled = useFeatureFlag(actionListCssModulesFlag)
-
-  if (enabled) {
-    return (
-      <VisualContainer className={clsx(className, classes.LeadingVisual)} sx={sx} {...props}>
-        {props.children}
-      </VisualContainer>
-    )
-  }
+export const LeadingVisual: React.FC<React.PropsWithChildren<VisualProps>> = ({sx, className, ...props}) => {
   return (
-    <LeadingVisualContainer
-      className={className}
-      sx={merge(
-        {
-          color: getVariantStyles(variant, disabled, inactive).iconColor,
-          svg: {fontSize: 0},
-          '[data-variant="danger"]:not([aria-disabled]):not([data-inactive]):hover &, [data-variant="danger"]:active &':
-            {
-              color: getVariantStyles(variant, disabled, inactive).hoverColor,
-            },
-        },
-        sx as SxProp,
-      )}
-      {...props}
-    >
+    <VisualContainer className={clsx(className, classes.LeadingVisual)} sx={sx} {...props}>
       {props.children}
-    </LeadingVisualContainer>
+    </VisualContainer>
   )
 }
 
 export type ActionListTrailingVisualProps = VisualProps
-export const TrailingVisual: React.FC<React.PropsWithChildren<VisualProps>> = ({
-  sx = defaultSxProp,
-  className,
-  ...props
-}) => {
-  const {variant, disabled, inactive, trailingVisualId} = React.useContext(ItemContext)
-  const enabled = useFeatureFlag(actionListCssModulesFlag)
-  if (enabled) {
-    if (sx !== defaultSxProp) {
-      return (
-        <VisualContainer className={clsx(className, classes.TrailingVisual)} sx={sx} id={trailingVisualId} {...props}>
-          {props.children}
-        </VisualContainer>
-      )
-    }
-    return (
-      <VisualContainer className={clsx(className, classes.TrailingVisual)} id={trailingVisualId} {...props}>
-        {props.children}
-      </VisualContainer>
-    )
-  }
+export const TrailingVisual: React.FC<React.PropsWithChildren<VisualProps>> = ({sx, className, ...props}) => {
+  const {trailingVisualId} = React.useContext(ItemContext)
   return (
-    <Box
-      id={trailingVisualId}
-      as="span"
-      className={className}
-      sx={merge(
-        {
-          height: '20px', // match height of text row
-          flexShrink: 0,
-          color: getVariantStyles(variant, disabled, inactive).annotationColor,
-          marginLeft: 2,
-          fontWeight: 'initial',
-          display: 'grid',
-          alignContent: 'center',
-          '[data-variant="danger"]:hover &, [data-variant="danger"]:active &': {
-            color: getVariantStyles(variant, disabled, inactive).hoverColor,
-          },
-        },
-        sx as SxProp,
-      )}
-      {...props}
-    >
+    <VisualContainer sx={sx} className={clsx(className, classes.TrailingVisual)} id={trailingVisualId} {...props}>
       {props.children}
-    </Box>
+    </VisualContainer>
   )
 }
 
@@ -170,7 +98,7 @@ export const VisualOrIndicator: React.FC<
     <span className={classes.InactiveButtonWrap}>
       <Tooltip text={inactiveText} type="description">
         <button type="button" className={classes.InactiveButtonReset} aria-labelledby={labelId}>
-          <VisualComponent>
+          <VisualComponent className={className}>
             <AlertIcon />
           </VisualComponent>
         </button>