Remove support for sx from ActionList component and sub-components (#6921)

Co-authored-by: Marie Lucca <[email protected]>
Co-authored-by: Liu Liu <[email protected]>

Author: 3 people

.changeset/eleven-cameras-hammer.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": major
+---
+
+Update ActionList component and related components to no longer support sx/styled-components

packages/react/src/ActionList/ActionList.docs.json

@@ -36,11 +36,6 @@
       "type": "AriaRole",
       "defaultValue": "",
       "description": "ARIA role describing the function of the list. `listbox` and `menu` are a common values."
-    },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
     }
   ],
   "subcomponents": [
@@ -113,11 +108,6 @@
           "required": false,
           "description": "id to attach to the root element of the Item",
           "defaultValue": ""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ]
     },
@@ -144,11 +134,6 @@
           "required": false,
           "description": "",
           "defaultValue": ""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ]
     },
@@ -183,11 +168,6 @@
           "required": false,
           "description": "Text describing why the item is inactive. This may be used when an item's usual functionality\nis unavailable due to a system error such as a database outage.",
           "defaultValue": ""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "passthrough": {
@@ -204,11 +184,6 @@
           "defaultValue": "",
           "required": true,
           "description": "Icon (or similar) positioned before item text."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ]
     },
@@ -221,11 +196,6 @@
           "defaultValue": "",
           "required": true,
           "description": "Visual positioned after item text."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ]
     },
@@ -282,11 +252,6 @@
           "defaultValue": "'inline'",
           "description": "`inline` descriptions are positioned beside primary text. `block` descriptions are positioned below primary text."
         },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "className",
           "type": "string | undefined",
@@ -337,11 +302,6 @@
           "defaultValue": "h3",
           "required": false,
           "description": "The level of the heading and it is only required (enforce by runtime warning) for lists. (i.e. not required for ActionMenu or listbox roles)"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ]
     },
@@ -385,22 +345,6 @@
           "type": "AriaRole",
           "defaultValue": "",
           "description": "ARIA role describing the function of the list inside the group. `listbox` and `menu` are a common values."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        }
-      ]
-    },
-    {
-      "filePath": "/Users/mperrotti/work-dir/react/packages/react/src/ActionList/Divider.tsx",
-      "name": "ActionList.Divider",
-      "props": [
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ]
     }

packages/react/src/ActionList/Description.tsx

@@ -1,9 +1,7 @@
 import React from 'react'
 import Truncate from '../Truncate'
-import type {SxProp} from '../sx'
 import {ItemContext} from './shared'
 import classes from './ActionList.module.css'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 import {clsx} from 'clsx'
 
 export type ActionListDescriptionProps = {
@@ -16,17 +14,18 @@ export type ActionListDescriptionProps = {
   variant?: 'inline' | 'block'
 
   className?: string
+  style?: React.CSSProperties
   /**
    * Whether the inline description should truncate the text on overflow.
    */
   truncate?: boolean
-} & SxProp
+}
 
 export const Description: React.FC<React.PropsWithChildren<ActionListDescriptionProps>> = ({
   variant = 'inline',
-  sx,
   className,
   truncate,
+  style,
   ...props
 }) => {
   const {blockDescriptionId, inlineDescriptionId} = React.useContext(ItemContext)
@@ -45,22 +44,22 @@ export const Description: React.FC<React.PropsWithChildren<ActionListDescription
 
   if (variant === 'block' || !truncate) {
     return (
-      <BoxWithFallback
-        as="span"
-        sx={sx}
+      <span
         id={variant === 'block' ? blockDescriptionId : inlineDescriptionId}
         className={clsx(className, classes.Description)}
+        style={style}
         data-component="ActionList.Description"
       >
         {props.children}
-      </BoxWithFallback>
+      </span>
     )
   } else {
     return (
       <Truncate
         ref={containerRef}
         id={inlineDescriptionId}
         className={clsx(className, classes.Description)}
+        style={style}
         title={effectiveTitle}
         inline={true}
         maxWidth="100%"

packages/react/src/ActionList/Divider.tsx

@@ -1,23 +1,21 @@
 import type React from 'react'
-import type {SxProp} from '../sx'
 import {clsx} from 'clsx'
 import classes from './ActionList.module.css'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
-export type ActionListDividerProps = SxProp & {
+export type ActionListDividerProps = {
   className?: string
+  style?: React.CSSProperties
 }
 
 /**
- * Visually separates `Item`s or `Group`s in an `ActionList`.
+ * Visually separates `Items` or `Groups` in an `ActionList`.
  */
-export const Divider: React.FC<React.PropsWithChildren<ActionListDividerProps>> = ({sx, className}) => {
+export const Divider: React.FC<React.PropsWithChildren<ActionListDividerProps>> = ({className, style}) => {
   return (
-    <BoxWithFallback
+    <li
       className={clsx(className, classes.Divider)}
-      as="li"
+      style={style}
       aria-hidden="true"
-      sx={sx}
       data-component="ActionList.Divider"
     />
   )

packages/react/src/ActionList/Group.tsx

@@ -1,21 +1,19 @@
 import React from 'react'
 import {useId} from '../hooks/useId'
-import type {SxProp} from '../sx'
 import {ListContext, type ActionListProps} from './shared'
 import type {ActionListHeadingProps} from './Heading'
 import {useSlots} from '../hooks/useSlots'
 import {invariant} from '../utils/invariant'
 import {clsx} from 'clsx'
 import classes from './ActionList.module.css'
 import groupClasses from './Group.module.css'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 type HeadingProps = {
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
   className?: string
   children: React.ReactNode
   id?: string
-} & SxProp
+}
 
 const Heading: React.FC<HeadingProps & React.HTMLAttributes<HTMLHeadingElement>> = ({
   as: Component = 'h3',
@@ -25,10 +23,9 @@ const Heading: React.FC<HeadingProps & React.HTMLAttributes<HTMLHeadingElement>>
   ...rest
 }) => {
   return (
-    // Box is temporary to support lingering sx usage
-    <BoxWithFallback as={Component} className={className} id={id} {...rest}>
+    <Component className={className} id={id} {...rest}>
       {children}
-    </BoxWithFallback>
+    </Component>
   )
 }
 
@@ -58,12 +55,11 @@ export type ActionListGroupProps = React.HTMLAttributes<HTMLLIElement> & {
    * Secondary text which provides additional information about a `Group`.
    */
   auxiliaryText?: string
-} & SxProp & {
-    /**
-     * Whether multiple Items or a single Item can be selected in the Group. Overrides value on ActionList root.
-     */
-    selectionVariant?: ActionListProps['selectionVariant'] | false
-  }
+  /**
+   * Whether multiple Items or a single Item can be selected in the Group. Overrides value on ActionList root.
+   */
+  selectionVariant?: ActionListProps['selectionVariant'] | false
+}
 
 type ContextProps = Pick<ActionListGroupProps, 'selectionVariant'> & {groupHeadingId: string | undefined}
 export const GroupContext = React.createContext<ContextProps>({
@@ -101,12 +97,7 @@ export const Group: React.FC<React.PropsWithChildren<ActionListGroupProps>> = ({
   }
 
   return (
-    <BoxWithFallback
-      as="li"
-      className={clsx(className, groupClasses.Group)}
-      role={listRole ? 'none' : undefined}
-      {...props}
-    >
+    <li className={clsx(className, groupClasses.Group)} role={listRole ? 'none' : undefined} {...props}>
       <GroupContext.Provider value={{selectionVariant, groupHeadingId}}>
         {title && !slots.groupHeading ? (
           // Escape hatch: supports old API <ActionList.Group title="group title"> in a non breaking way
@@ -126,13 +117,12 @@ export const Group: React.FC<React.PropsWithChildren<ActionListGroupProps>> = ({
           {slots.groupHeading ? childrenWithoutSlots : props.children}
         </ul>
       </GroupContext.Provider>
-    </BoxWithFallback>
+    </li>
   )
 }
 
 export type ActionListGroupHeadingProps = Pick<ActionListGroupProps, 'variant' | 'auxiliaryText'> &
   Omit<ActionListHeadingProps, 'as'> &
-  SxProp &
   React.HTMLAttributes<HTMLElement> & {
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
     headingWrapElement?: 'div' | 'li'
@@ -156,7 +146,6 @@ export const GroupHeading: React.FC<React.PropsWithChildren<ActionListGroupHeadi
   auxiliaryText,
   children,
   className,
-  sx,
   headingWrapElement = 'div',
   ...props
 }) => {
@@ -208,7 +197,6 @@ export const GroupHeading: React.FC<React.PropsWithChildren<ActionListGroupHeadi
             className={clsx(className, groupClasses.GroupHeading)}
             as={as || 'h3'}
             id={groupHeadingId}
-            sx={sx}
             {...props}
           >
             {_internalBackwardCompatibleTitle ?? children}

packages/react/src/ActionList/Heading.tsx

@@ -1,5 +1,4 @@
 import React, {forwardRef} from 'react'
-import type {SxProp} from '../sx'
 import {useRefObjectAsForwardedRef} from '../hooks'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {default as HeadingComponent} from '../Heading'
@@ -17,7 +16,8 @@ export type ActionListHeadingProps = {
   size?: HeadingVariants
   visuallyHidden?: boolean
   className?: string
-} & SxProp
+  style?: React.CSSProperties
+}
 
 export const Heading = forwardRef(({as, size, children, visuallyHidden = false, className, ...props}, forwardedRef) => {
   const innerRef = React.useRef<HTMLHeadingElement>(null)

packages/react/src/ActionList/Item.tsx

@@ -15,7 +15,6 @@ import {invariant} from '../utils/invariant'
 import VisuallyHidden from '../_VisuallyHidden'
 import classes from './ActionList.module.css'
 import {clsx} from 'clsx'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 import {fixedForwardRef} from '../utils/modern-polymorphic'
 
 type ActionListSubItemProps = {
@@ -57,7 +56,6 @@ const UnwrappedItem = <As extends React.ElementType = 'li'>(
     selected = undefined,
     active = false,
     onSelect: onSelectUser,
-    sx: sxProp,
     id,
     role,
     loading,
@@ -246,10 +244,8 @@ const UnwrappedItem = <As extends React.ElementType = 'li'>(
         trailingVisualId,
       }}
     >
-      <BoxWithFallback
+      <li
         {...containerProps}
-        as="li"
-        sx={sxProp}
         ref={listSemantics ? forwardedRef : null}
         data-variant={variant === 'danger' ? variant : undefined}
         data-active={active ? true : undefined}
@@ -313,7 +309,7 @@ const UnwrappedItem = <As extends React.ElementType = 'li'>(
         </ItemWrapper>
         {!inactive && !loading && !menuContext && Boolean(slots.trailingAction) && slots.trailingAction}
         {slots.subItem}
-      </BoxWithFallback>
+      </li>
     </ItemContext.Provider>
   )
 }

packages/react/src/ActionList/LinkItem.tsx

@@ -21,12 +21,12 @@ type LinkProps = {
 // LinkItem does not support selected, loading, variants, etc.
 export type ActionListLinkItemProps = Pick<
   ActionListItemProps,
-  'active' | 'children' | 'sx' | 'inactiveText' | 'variant' | 'size'
+  'active' | 'children' | 'inactiveText' | 'variant' | 'size'
 > &
   LinkProps
 
 export const LinkItem = React.forwardRef(
-  ({sx, active, inactiveText, variant, size, as: Component, className, ...props}, forwardedRef) => {
+  ({active, inactiveText, variant, size, as: Component, className, ...props}, forwardedRef) => {
     return (
       <Item
         className={className}
@@ -35,7 +35,6 @@ export const LinkItem = React.forwardRef(
         data-inactive={inactiveText ? true : undefined}
         variant={variant}
         size={size}
-        sx={sx}
         _PrivateItemWrapper={({children, onClick, ...rest}) => {
           const clickHandler = (event: React.MouseEvent<HTMLElement>) => {
             onClick && onClick(event)