Remove support for sx from the ActionList component in @primer/react/deprecated (#6944)

Co-authored-by: Marie Lucca <[email protected]>
Co-authored-by: Marie Lucca <[email protected]>
Co-authored-by: llastflowers <[email protected]>
Co-authored-by: Brittany L. Houtz <[email protected]>

Author: 3 people

.changeset/afraid-teams-throw.md

@@ -0,0 +1,6 @@
+---
+'@primer/react': major
+'@primer/styled-react': minor
+---
+
+Remove sx from deprecated ActionList component.

packages/react/src/FilteredActionList/FilteredActionList.module.css

@@ -4,6 +4,12 @@
   overflow: hidden;
 }
 
+.Header {
+  /* stylelint-disable-next-line primer/box-shadow */
+  box-shadow: 0 1px 0 var(--borderColor-default);
+  z-index: 1;
+}
+
 .Container {
   display: flex;
   height: 100%;

packages/react/src/FilteredActionList/FilteredActionList.tsx

@@ -3,10 +3,8 @@ import {scrollIntoView, FocusKeys} from '@primer/behaviors'
 import type {KeyboardEventHandler} from 'react'
 import type React from 'react'
 import {useCallback, useEffect, useRef, useState} from 'react'
-import styled from 'styled-components'
 import type {TextInputProps} from '../TextInput'
 import TextInput from '../TextInput'
-import {get} from '../constants'
 import {ActionList} from '../ActionList'
 import type {GroupedListProps, ListPropsBase, ItemInput, RenderItemFn} from './'
 import {useFocusZone} from '../hooks/useFocusZone'
@@ -49,11 +47,6 @@ export interface FilteredActionListProps extends Partial<Omit<GroupedListProps,
   onSelectAllChange?: (checked: boolean) => void
 }
 
-const StyledHeader = styled.div`
-  box-shadow: 0 1px 0 ${get('colors.border.default')};
-  z-index: 1;
-`
-
 export function FilteredActionList({
   loading = false,
   placeholderText,
@@ -346,7 +339,7 @@ export function FilteredActionList({
 
   return (
     <div ref={inputAndListContainerRef} className={clsx(className, classes.Root)} data-testid="filtered-action-list">
-      <StyledHeader>
+      <div className={classes.Header}>
         <TextInput
           ref={inputRef}
           block
@@ -368,7 +361,7 @@ export function FilteredActionList({
           className={clsx(textInputClassName, {[classes.FullScreenTextInput]: fullScreenOnNarrow})}
           {...restTextInputProps}
         />
-      </StyledHeader>
+      </div>
       <VisuallyHidden id={inputDescriptionTextId}>Items will be filtered as you type</VisuallyHidden>
       {onSelectAllChange !== undefined && (
         <div className={classes.SelectAllContainer}>

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

@@ -0,0 +1,8 @@
+.Divider {
+  height: var(--borderWidth-thin);
+  /* stylelint-disable-next-line primer/colors */
+  background: var(--borderColor-muted);
+  /* stylelint-disable-next-line primer/spacing */
+  margin-top: calc(var(--base-size-8) - 1px);
+  margin-bottom: var(--base-size-8);
+}

packages/react/src/deprecated/ActionList/Divider.tsx

@@ -1,18 +1,10 @@
-import styled from 'styled-components'
-import {get} from '../../constants'
-
-export const StyledDivider = styled.div`
-  height: 1px;
-  background: ${get('colors.border.muted')};
-  margin-top: calc(${get('space.2')} - 1px);
-  margin-bottom: ${get('space.2')};
-`
+import classes from './Divider.module.css'
 
 /**
- * Visually separates `Item`s or `Group`s in an `ActionList`.
+ * Visually separates `Items or `Groups in an `ActionList`.
  */
 export function Divider(): JSX.Element {
-  return <StyledDivider />
+  return <div data-component="ActionList.Divider" className={classes.Divider} />
 }
 
 /**

packages/react/src/deprecated/ActionList/Group.tsx

@@ -1,14 +1,11 @@
 import type React from 'react'
-import styled from 'styled-components'
-import type {SxProp} from '../../sx'
-import sx from '../../sx'
 import type {HeaderProps} from './Header'
 import {Header} from './Header'
 
 /**
  * Contract for props passed to the `Group` component.
  */
-export interface GroupProps extends React.ComponentPropsWithoutRef<'div'>, SxProp {
+export interface GroupProps extends React.ComponentPropsWithoutRef<'div'> {
   /**
    * Props for a `Header` to render in the `Group`.
    */
@@ -30,18 +27,14 @@ export interface GroupProps extends React.ComponentPropsWithoutRef<'div'>, SxPro
   showItemDividers?: boolean
 }
 
-const StyledGroup = styled.div`
-  ${sx}
-`
-
 /**
  * Collects related `Items` in an `ActionList`.
  */
 export function Group({header, items, ...props}: GroupProps): JSX.Element {
   return (
-    <StyledGroup {...props}>
+    <div {...props}>
       {header && <Header {...header} />}
       {items}
-    </StyledGroup>
+    </div>
   )
 }

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

@@ -0,0 +1,25 @@
+.Header {
+  /* 6px vertical padding + 20px line height = 32px total height
+   *
+   * TODO: When rem-based spacing on a 4px scale lands, replace
+   * hardcoded '6px' with 'calc((${get('space.s32')} - ${get('space.20')}) / 2)'.
+   */
+  /* stylelint-disable-next-line primer/spacing */
+  padding: 6px var(--base-size-16);
+  font-size: var(--text-body-size-small);
+  font-weight: var(--text-title-weight-large);
+  color: var(--fgColor-muted);
+
+  &:where([data-filled]) {
+    background: var(--bgColor-muted);
+    margin: var(--base-size-8) 0;
+    /* stylelint-disable-next-line primer/colors */
+    border-top: var(--borderWidth-thin) solid var(--bgColor-neutral-muted);
+    /* stylelint-disable-next-line primer/colors */
+    border-bottom: var(--borderWidth-thin) solid var(--bgColor-neutral-muted);
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+}

packages/react/src/deprecated/ActionList/Header.tsx

@@ -1,13 +1,11 @@
 import type React from 'react'
-import styled, {css} from 'styled-components'
-import {get} from '../../constants'
-import type {SxProp} from '../../sx'
-import sx from '../../sx'
+import {clsx} from 'clsx'
+import classes from './Header.module.css'
 
 /**
  * Contract for props passed to the `Header` component.
  */
-export interface HeaderProps extends React.ComponentPropsWithoutRef<'div'>, SxProp {
+export interface HeaderProps extends React.ComponentPropsWithoutRef<'div'> {
   /**
    * Style variations. Usage is discretionary.
    *
@@ -27,35 +25,6 @@ export interface HeaderProps extends React.ComponentPropsWithoutRef<'div'>, SxPr
   auxiliaryText?: string
 }
 
-export const StyledHeader = styled.div<{variant: HeaderProps['variant']} & SxProp>`
-   {
-    /* 6px vertical padding + 20px line height = 32px total height
-     *
-     * TODO: When rem-based spacing on a 4px scale lands, replace
-     * hardcoded '6px' with 'calc((${get('space.s32')} - ${get('space.20')}) / 2)'.
-     */
-  }
-  padding: 6px ${get('space.3')};
-  font-size: ${get('fontSizes.0')};
-  font-weight: ${get('fontWeights.bold')};
-  color: ${get('colors.fg.muted')};
-
-  ${({variant}) =>
-    variant === 'filled' &&
-    css`
-      background: ${get('colors.canvas.subtle')};
-      margin: ${get('space.2')} 0;
-      border-top: 1px solid ${get('colors.neutral.muted')};
-      border-bottom: 1px solid ${get('colors.neutral.muted')};
-
-      &:first-child {
-        margin-top: 0;
-      }
-    `}
-
-  ${sx}
-`
-
 /**
  * Displays the name and description of a `Group`.
  */
@@ -64,12 +33,19 @@ export function Header({
   title,
   auxiliaryText,
   children: _children,
+  className,
   ...props
 }: HeaderProps): JSX.Element {
   return (
-    <StyledHeader role="heading" variant={variant} {...props}>
+    <div
+      role="heading"
+      className={clsx(className, classes.Header)}
+      data-filled={variant === 'filled' ? '' : undefined}
+      data-component="ActionList.Header"
+      {...props}
+    >
       {title}
       {auxiliaryText && <span>{auxiliaryText}</span>}
-    </StyledHeader>
+    </div>
   )
 }