feat(ActionList + ActionList.Divider) Convert to CSS Modules

.changeset/twenty-dogs-sparkle.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert ActionList (wrapper) and ActionList.Divider to CSS Modules

packages/react/src/ActionList/ActionList.dev.stories.tsx

@@ -117,6 +117,21 @@ export const GroupHeadingCustomClassname = () => (
   </ActionList>
 )
 
+export const ListCustomClassname = () => (
+  <ActionList className="testCustomClassnameBorder">
+    <ActionList.Item>Copy link</ActionList.Item>
+    <ActionList.Item>Quote reply</ActionList.Item>
+  </ActionList>
+)
+
+export const DividerCustomClassname = () => (
+  <ActionList>
+    <ActionList.Item>Edit comment</ActionList.Item>
+    <ActionList.Divider className="testCustomClassnameBgColor" />
+    <ActionList.Item>Quote reply</ActionList.Item>
+  </ActionList>
+)
+
 export const HeadingCustomClassname = () => (
   <ActionList>
     <ActionList.Heading className="testCustomClassnameColor" as="h2">

packages/react/src/ActionList/ActionList.module.css

@@ -0,0 +1,79 @@
+/* stylelint-disable selector-max-specificity, selector-max-compound-selectors */
+
+.ActionList {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  &:where([data-variant='inset']) {
+    /* change to padding (all) when Item is converted */
+    padding-block: var(--base-size-8);
+  }
+
+  &:where([data-dividers='true']) {
+    /* place dividers on the wrapper that excludes leading visuals/actions */
+    & .ActionListSubContent::before {
+      position: absolute;
+      /* stylelint-disable-next-line primer/spacing */
+      top: calc(-1 * var(--control-medium-paddingBlock));
+      display: block;
+      width: 100%;
+      height: 1px;
+      content: '';
+      /* stylelint-disable-next-line primer/colors */
+      background: var(--borderColor-muted);
+    }
+
+    /* if inline description, move pseudo divider to description wrapper */
+    & [data-description-variant='inline'] {
+      &::before {
+        position: absolute;
+        /* stylelint-disable-next-line primer/spacing */
+        top: calc(-1 * var(--control-medium-paddingBlock));
+        display: block;
+        width: 100%;
+        height: var(--borderWidth-thin);
+        content: '';
+        /* stylelint-disable-next-line primer/colors */
+        background: var(--borderColor-muted);
+      }
+
+      /* remove the default divider */
+      & .ActionListSubContent::before {
+        content: unset;
+      }
+    }
+
+    /* hide if item is first of type with label::before, or is the first item after a sectionDivider */
+    .ActionListItem:first-of-type .ActionListSubContent::before,
+    .Divider + .ActionListItem .ActionListSubContent::before {
+      visibility: hidden;
+    }
+
+    /* hide if item is first of type with label::before, or is the first item after a sectionDivider */
+    .ActionListItem:first-of-type [data-description-variant='inline']::before,
+    .Divider + .ActionListItem [data-description-variant='inline']::before {
+      visibility: hidden;
+    }
+  }
+}
+
+.Divider {
+  display: block;
+  height: var(--borderWidth-thin);
+  padding: 0;
+  /* stylelint-disable-next-line primer/spacing */
+  margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));
+  margin-block-end: var(--base-size-8);
+  margin-inline: calc(-1 * var(--base-size-8));
+  list-style: none;
+  /* stylelint-disable-next-line primer/colors */
+  background: var(--borderColor-muted);
+  border: 0;
+}

packages/react/src/ActionList/ActionList.test.tsx

@@ -650,4 +650,57 @@ describe('ActionList', () => {
       expect(description.parentElement).toHaveAttribute('data-component', 'ActionList.Item--DividerContainer')
     })
   })
+
+  it('should support a custom `className` on the outermost element', () => {
+    const Element = () => {
+      return (
+        <ActionList className="test-class-name">
+          <ActionList.Item>Item</ActionList.Item>
+        </ActionList>
+      )
+    }
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(HTMLRender(<FeatureFlagElement />).container.querySelector('ul')).toHaveClass('test-class-name')
+    expect(HTMLRender(<Element />).container.querySelector('ul')).toHaveClass('test-class-name')
+  })
+
+  it('divider should support a custom `className`', () => {
+    const Element = () => {
+      return (
+        <ActionList>
+          <ActionList.Item>Item</ActionList.Item>
+          <ActionList.Divider className="test-class-name" />
+        </ActionList>
+      )
+    }
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(HTMLRender(<FeatureFlagElement />).container.querySelector('li[aria-hidden="true"]')).toHaveClass(
+      'test-class-name',
+    )
+    expect(HTMLRender(<Element />).container.querySelector('li[aria-hidden="true"]')).toHaveClass('test-class-name')
+  })
 })

packages/react/src/ActionList/Divider.tsx

@@ -4,13 +4,34 @@ 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'
 
-export type ActionListDividerProps = SxProp
+export type ActionListDividerProps = SxProp & {
+  className?: string
+}
 
 /**
  * Visually separates `Item`s or `Group`s in an `ActionList`.
  */
-export const Divider: React.FC<React.PropsWithChildren<ActionListDividerProps>> = ({sx = {}}) => {
+export const Divider: React.FC<React.PropsWithChildren<ActionListDividerProps>> = ({sx = defaultSxProp, className}) => {
+  const enabled = useFeatureFlag('primer_react_css_modules_team')
+  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
       as="li"
@@ -22,11 +43,12 @@ export const Divider: React.FC<React.PropsWithChildren<ActionListDividerProps>>
           marginTop: (theme: Theme) => `calc(${get('space.2')(theme)} - 1px)`,
           marginBottom: 2,
           listStyle: 'none', // hide the ::marker inserted by browser's stylesheet
-          marginRight: 'calc(-1 * var(--base-size-8, 8px))',
-          marginLeft: 'calc(-1 * var(--base-size-8, 8px))',
+          marginRight: 'calc(-1 * var(--base-size-8))',
+          marginLeft: 'calc(-1 * var(--base-size-8))',
         },
         sx as SxProp,
       )}
+      className={className}
       data-component="ActionList.Divider"
     />
   )

packages/react/src/ActionList/List.tsx

@@ -11,12 +11,15 @@ import {useId} from '../hooks/useId'
 import {ListContext, type ActionListProps} from './shared'
 import {useProvidedRefOrCreate} from '../hooks'
 import {FocusKeys, useFocusZone} from '../hooks/useFocusZone'
+import {clsx} from 'clsx'
+import {useFeatureFlag} from '../FeatureFlags'
+import classes from './ActionList.module.css'
 
 const ListBox = styled.ul<SxProp>(sx)
 
 export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
   (
-    {variant = 'inset', selectionVariant, showDividers = false, role, sx: sxProp = defaultSxProp, ...props},
+    {variant = 'inset', selectionVariant, showDividers = false, role, sx: sxProp = defaultSxProp, className, ...props},
     forwardedRef,
   ): JSX.Element => {
     const styles = {
@@ -54,6 +57,8 @@ export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
       focusOutBehavior: listRole === 'menu' ? 'wrap' : undefined,
     })
 
+    const enabled = useFeatureFlag('primer_react_css_modules_team')
+
     return (
       <ListContext.Provider
         value={{
@@ -65,15 +70,45 @@ export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
         }}
       >
         {slots.heading}
-        <ListBox
-          sx={merge(styles, sxProp as SxProp)}
-          role={listRole}
-          aria-labelledby={ariaLabelledBy}
-          {...props}
-          ref={listRef}
-        >
-          {childrenWithoutSlots}
-        </ListBox>
+        {enabled ? (
+          sxProp !== defaultSxProp ? (
+            <ListBox
+              sx={merge(styles, sxProp as SxProp)}
+              className={clsx(classes.ActionList, className)}
+              role={listRole}
+              aria-labelledby={ariaLabelledBy}
+              ref={listRef}
+              data-dividers={showDividers}
+              data-variant={variant}
+              {...props}
+            >
+              {childrenWithoutSlots}
+            </ListBox>
+          ) : (
+            <ul
+              className={clsx(classes.ActionList, className)}
+              role={listRole}
+              aria-labelledby={ariaLabelledBy}
+              ref={listRef}
+              data-dividers={showDividers}
+              data-variant={variant}
+              {...props}
+            >
+              {childrenWithoutSlots}
+            </ul>
+          )
+        ) : (
+          <ListBox
+            sx={merge(styles, sxProp as SxProp)}
+            role={listRole}
+            aria-labelledby={ariaLabelledBy}
+            {...props}
+            ref={listRef}
+            className={className}
+          >
+            {childrenWithoutSlots}
+          </ListBox>
+        )}
       </ListContext.Provider>
     )
   },

packages/react/src/ActionList/shared.ts

@@ -131,6 +131,7 @@ export type ActionListProps = React.PropsWithChildren<{
    * The ARIA role describing the function of `List` component. `listbox` or `menu` are a common values.
    */
   role?: AriaRole
+  className?: string
 }> &
   SxProp
 

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

@@ -432,8 +432,8 @@ exports[`NavList renders with groups 1`] = `
   margin-top: calc(8px - 1px);
   margin-bottom: 8px;
   list-style: none;
-  margin-right: calc(-1 * var(--base-size-8,8px));
-  margin-left: calc(-1 * var(--base-size-8,8px));
+  margin-right: calc(-1 * var(--base-size-8));
+  margin-left: calc(-1 * var(--base-size-8));
 }
 
 .c1:first-child {