chore(ActionList): Remove the CSS modules feature flag from the ActionList.Divider component (#6022)

Co-authored-by: primer[bot] <119360173+primer[bot]@users.noreply.github.com>

Author: jonrohan

.changeset/curvy-lions-buy.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Remove the CSS modules feature flag from the ActionList.Divider component

packages/react/src/ActionList/Divider.tsx

@@ -1,14 +1,9 @@
 import React from 'react'
-import Box from '../Box'
-import {get} from '../constants'
-import type {Theme} from '../ThemeProvider'
 import type {SxProp} from '../sx'
-import {merge} from '../sx'
 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 ActionListDividerProps = SxProp & {
   className?: string
@@ -18,38 +13,13 @@ export type ActionListDividerProps = SxProp & {
  * Visually separates `Item`s or `Group`s in an `ActionList`.
  */
 export const Divider: React.FC<React.PropsWithChildren<ActionListDividerProps>> = ({sx = defaultSxProp, className}) => {
-  const enabled = useFeatureFlag(actionListCssModulesFlag)
-  if (enabled) {
-    if (sx !== defaultSxProp) {
-      return (
-        <Box
-          className={clsx(className, classes.Divider)}
-          as="li"
-          aria-hidden="true"
-          sx={sx}
-          data-component="ActionList.Divider"
-        />
-      )
-    }
-    return <li className={clsx(className, classes.Divider)} aria-hidden="true" data-component="ActionList.Divider" />
-  }
   return (
-    <Box
+    <BoxWithFallback
+      className={clsx(className, classes.Divider)}
       as="li"
       aria-hidden="true"
-      sx={merge(
-        {
-          height: 1,
-          backgroundColor: 'actionListItem.inlineDivider',
-          marginTop: (theme: Theme) => `calc(${get('space.2')(theme)} - 1px)`,
-          marginBottom: 2,
-          listStyle: 'none', // hide the ::marker inserted by browser's stylesheet
-        },
-        sx as SxProp,
-      )}
-      className={className}
+      sx={sx}
       data-component="ActionList.Divider"
     />
   )
 }
-Divider.displayName = 'ActionList.Divider'

packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap

@@ -445,14 +445,6 @@ exports[`NavList renders a simple list 1`] = `
 `;
 
 exports[`NavList renders with groups 1`] = `
-.c1 {
-  height: 1px;
-  background-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
-  margin-top: calc(8px - 1px);
-  margin-bottom: 8px;
-  list-style: none;
-}
-
 .c1:first-child {
   display: none;
 }
@@ -831,7 +823,7 @@ exports[`NavList renders with groups 1`] = `
     >
       <li
         aria-hidden="true"
-        class="c1"
+        class="c1 Divider"
         data-component="ActionList.Divider"
       />
       <li
@@ -886,7 +878,7 @@ exports[`NavList renders with groups 1`] = `
       </li>
       <li
         aria-hidden="true"
-        class="c1"
+        class="c1 Divider"
         data-component="ActionList.Divider"
       />
       <li