chore: Refactor components to use BoxWithFallback instead of custom Box if statements and remove defaultSxProp references (#6278)

Co-authored-by: Josh Black <joshblack@github.com>

Author: jonrohan

.changeset/thick-rules-shout.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+chore: Refactor components to use BoxWithFallback instead of custom Box if statements and remove defaultSxProp references

packages/react/src/ActionList/Description.tsx

@@ -3,7 +3,6 @@ import Truncate from '../Truncate'
 import type {SxProp} from '../sx'
 import {ItemContext} from './shared'
 import classes from './ActionList.module.css'
-import {defaultSxProp} from '../utils/defaultSxProp'
 import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 import {clsx} from 'clsx'
 
@@ -25,7 +24,7 @@ export type ActionListDescriptionProps = {
 
 export const Description: React.FC<React.PropsWithChildren<ActionListDescriptionProps>> = ({
   variant = 'inline',
-  sx = defaultSxProp,
+  sx,
   className,
   truncate,
   ...props

packages/react/src/ActionList/Divider.tsx

@@ -2,7 +2,6 @@ import type React from 'react'
 import type {SxProp} from '../sx'
 import {clsx} from 'clsx'
 import classes from './ActionList.module.css'
-import {defaultSxProp} from '../utils/defaultSxProp'
 import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 export type ActionListDividerProps = SxProp & {
@@ -12,7 +11,7 @@ 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}) => {
+export const Divider: React.FC<React.PropsWithChildren<ActionListDividerProps>> = ({sx, className}) => {
   return (
     <BoxWithFallback
       className={clsx(className, classes.Divider)}

packages/react/src/ActionList/Group.tsx

@@ -4,7 +4,6 @@ import type {SxProp} from '../sx'
 import {ListContext, type ActionListProps} from './shared'
 import type {ActionListHeadingProps} from './Heading'
 import {useSlots} from '../hooks/useSlots'
-import {defaultSxProp} from '../utils/defaultSxProp'
 import {invariant} from '../utils/invariant'
 import {clsx} from 'clsx'
 import classes from './ActionList.module.css'
@@ -22,13 +21,12 @@ const Heading: React.FC<HeadingProps & React.HTMLAttributes<HTMLHeadingElement>>
   as: Component = 'h3',
   className,
   children,
-  sx = defaultSxProp,
   id,
   ...rest
 }) => {
   return (
     // Box is temporary to support lingering sx usage
-    <BoxWithFallback as={Component} className={className} sx={sx} id={id} {...rest}>
+    <BoxWithFallback as={Component} className={className} id={id} {...rest}>
       {children}
     </BoxWithFallback>
   )
@@ -81,7 +79,6 @@ export const Group: React.FC<React.PropsWithChildren<ActionListGroupProps>> = ({
   role,
   className,
   'aria-label': ariaLabel,
-  sx = defaultSxProp,
   ...props
 }) => {
   const id = useId()
@@ -108,7 +105,6 @@ export const Group: React.FC<React.PropsWithChildren<ActionListGroupProps>> = ({
       as="li"
       className={clsx(className, groupClasses.Group)}
       role={listRole ? 'none' : undefined}
-      sx={sx}
       {...props}
     >
       <GroupContext.Provider value={{selectionVariant, groupHeadingId}}>
@@ -160,7 +156,7 @@ export const GroupHeading: React.FC<React.PropsWithChildren<ActionListGroupHeadi
   auxiliaryText,
   children,
   className,
-  sx = defaultSxProp,
+  sx,
   headingWrapElement = 'div',
   ...props
 }) => {

packages/react/src/ActionList/Item.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 
 import {useId} from '../hooks/useId'
 import {useSlots} from '../hooks/useSlots'
-import {defaultSxProp} from '../utils/defaultSxProp'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {ActionListContainerContext} from './ActionListContainerContext'
 import {Description} from './Description'
@@ -54,7 +53,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
       selected = undefined,
       active = false,
       onSelect: onSelectUser,
-      sx: sxProp = defaultSxProp,
+      sx: sxProp,
       id,
       role,
       loading,

packages/react/src/ActionList/LinkItem.tsx

@@ -3,7 +3,6 @@ import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../uti
 import Link from '../Link'
 import {Item} from './Item'
 import type {ActionListItemProps} from './shared'
-import {defaultSxProp} from '../utils/defaultSxProp'
 
 // adopted from React.AnchorHTMLAttributes
 type LinkProps = {
@@ -27,7 +26,7 @@ export type ActionListLinkItemProps = Pick<
   LinkProps
 
 export const LinkItem = React.forwardRef(
-  ({sx = defaultSxProp, active, inactiveText, variant, as: Component, className, ...props}, forwardedRef) => {
+  ({sx, active, inactiveText, variant, as: Component, className, ...props}, forwardedRef) => {
     return (
       <Item
         className={className}

packages/react/src/ActionList/List.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {ActionListContainerContext} from './ActionListContainerContext'
-import {defaultSxProp} from '../utils/defaultSxProp'
 import {useSlots} from '../hooks/useSlots'
 import {Heading} from './Heading'
 import {useId} from '../hooks/useId'
@@ -14,16 +13,7 @@ import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
   (
-    {
-      variant = 'inset',
-      selectionVariant,
-      showDividers = false,
-      role,
-      sx: sxProp = defaultSxProp,
-      disableFocusZone = false,
-      className,
-      ...props
-    },
+    {variant = 'inset', selectionVariant, showDividers = false, role, disableFocusZone = false, className, ...props},
     forwardedRef,
   ): JSX.Element => {
     const [slots, childrenWithoutSlots] = useSlots(props.children, {
@@ -68,7 +58,6 @@ export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
         {slots.heading}
         <BoxWithFallback
           as="ul"
-          sx={sxProp}
           className={clsx(classes.ActionList, className)}
           role={listRole}
           aria-labelledby={ariaLabelledBy}

packages/react/src/ActionList/Visuals.tsx

@@ -6,41 +6,28 @@ import {ItemContext} from './shared'
 import {Tooltip, type TooltipProps} from '../TooltipV2'
 import {clsx} from 'clsx'
 import classes from './ActionList.module.css'
-import {defaultSxProp} from '../utils/defaultSxProp'
 import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 export type VisualProps = SxProp & React.HTMLAttributes<HTMLSpanElement>
 
-export const VisualContainer: React.FC<React.PropsWithChildren<VisualProps>> = ({
-  sx = defaultSxProp,
-  className,
-  ...props
-}) => {
-  return <BoxWithFallback as="span" className={clsx(className, classes.VisualWrap)} sx={sx} {...props} />
+export const VisualContainer: React.FC<React.PropsWithChildren<VisualProps>> = ({className, ...props}) => {
+  return <BoxWithFallback as="span" className={clsx(className, classes.VisualWrap)} {...props} />
 }
 
 export type ActionListLeadingVisualProps = VisualProps
-export const LeadingVisual: React.FC<React.PropsWithChildren<VisualProps>> = ({
-  sx = defaultSxProp,
-  className,
-  ...props
-}) => {
+export const LeadingVisual: React.FC<React.PropsWithChildren<VisualProps>> = ({className, ...props}) => {
   return (
-    <VisualContainer className={clsx(className, classes.LeadingVisual)} sx={sx} {...props}>
+    <VisualContainer className={clsx(className, classes.LeadingVisual)} {...props}>
       {props.children}
     </VisualContainer>
   )
 }
 
 export type ActionListTrailingVisualProps = VisualProps
-export const TrailingVisual: React.FC<React.PropsWithChildren<VisualProps>> = ({
-  sx = defaultSxProp,
-  className,
-  ...props
-}) => {
+export const TrailingVisual: React.FC<React.PropsWithChildren<VisualProps>> = ({className, ...props}) => {
   const {trailingVisualId} = React.useContext(ItemContext)
   return (
-    <VisualContainer className={clsx(className, classes.TrailingVisual)} sx={sx} id={trailingVisualId} {...props}>
+    <VisualContainer className={clsx(className, classes.TrailingVisual)} id={trailingVisualId} {...props}>
       {props.children}
     </VisualContainer>
   )

packages/react/src/Avatar/Avatar.tsx

@@ -3,7 +3,6 @@ import React from 'react'
 import type {SxProp} from '../sx'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
 import {isResponsiveValue} from '../hooks/useResponsiveValue'
-import {defaultSxProp} from '../utils/defaultSxProp'
 import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 import classes from './Avatar.module.css'
 
@@ -24,7 +23,7 @@ export type AvatarProps = {
   React.ComponentPropsWithoutRef<'img'>
 
 const Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(function Avatar(
-  {alt = '', size = DEFAULT_AVATAR_SIZE, square = false, sx: sxProp = defaultSxProp, className, style, ...rest},
+  {alt = '', size = DEFAULT_AVATAR_SIZE, square = false, sx: sxProp, className, style, ...rest},
   ref,
 ) {
   const isResponsive = isResponsiveValue(size)

packages/react/src/AvatarStack/AvatarStack.tsx

@@ -5,7 +5,6 @@ import type {AvatarProps} from '../Avatar/Avatar'
 import {DEFAULT_AVATAR_SIZE} from '../Avatar/Avatar'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
 import {isResponsiveValue} from '../hooks/useResponsiveValue'
-import {defaultSxProp} from '../utils/defaultSxProp'
 import type {WidthOnlyViewportRangeKeys} from '../utils/types/ViewportRangeKeys'
 import classes from './AvatarStack.module.css'
 import {hasInteractiveNodes} from '../internal/utils/hasInteractiveNodes'
@@ -58,15 +57,7 @@ const AvatarStackBody = ({
   )
 }
 
-const AvatarStack = ({
-  children,
-  alignRight,
-  disableExpand,
-  size,
-  className,
-  style,
-  sx: sxProp = defaultSxProp,
-}: AvatarStackProps) => {
+const AvatarStack = ({children, alignRight, disableExpand, size, className, style, sx: sxProp}: AvatarStackProps) => {
   const [hasInteractiveChildren, setHasInteractiveChildren] = useState<boolean | undefined>(false)
   const stackContainer = useRef<HTMLDivElement>(null)