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

.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)
 

packages/react/src/ButtonGroup/ButtonGroup.tsx

@@ -5,8 +5,7 @@ import {clsx} from 'clsx'
 import {FocusKeys, useFocusZone} from '../hooks/useFocusZone'
 import {useProvidedRefOrCreate} from '../hooks'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
-import Box from '../Box'
-import {defaultSxProp} from '../utils/defaultSxProp'
+import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 export type ButtonGroupProps = {
   /** The role of the group */
@@ -17,7 +16,7 @@ export type ButtonGroupProps = {
   SxProp
 
 const ButtonGroup = React.forwardRef<HTMLElement, ButtonGroupProps>(function ButtonGroup(
-  {children, className, role, sx, ...rest},
+  {children, className, role, ...rest},
   forwardRef,
 ) {
   const buttons = React.Children.map(children, (child, index) => <div key={index}>{child}</div>)
@@ -30,18 +29,10 @@ const ButtonGroup = React.forwardRef<HTMLElement, ButtonGroupProps>(function But
     focusOutBehavior: 'wrap',
   })
 
-  if (sx !== defaultSxProp) {
-    return (
-      <Box as="div" className={clsx(className, classes.ButtonGroup)} role={role} {...rest} sx={sx} ref={buttonRef}>
-        {buttons}
-      </Box>
-    )
-  }
-
   return (
-    <div ref={buttonRef} className={clsx(className, classes.ButtonGroup)} role={role} {...rest}>
+    <BoxWithFallback ref={buttonRef} className={clsx(className, classes.ButtonGroup)} role={role} {...rest}>
       {buttons}
-    </div>
+    </BoxWithFallback>
   )
 }) as PolymorphicForwardRefComponent<'div', ButtonGroupProps>
 

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

@@ -2,19 +2,19 @@
 
 exports[`CircleBadge > respects the inline prop 1`] = `
 <div
-  class="sc-dAbbOL onCTt"
+  class="sc-ikkxIA jhJVVm"
 />
 `;
 
 exports[`CircleBadge > respects the variant prop 1`] = `
 <div
-  class="sc-dAbbOL gIOBDF"
+  class="sc-ikkxIA eMrppW"
 />
 `;
 
 exports[`CircleBadge > uses the size prop to override the variant prop 1`] = `
 <div
-  class="sc-dAbbOL EOzpx"
+  class="sc-ikkxIA dkwGym"
   size="20"
 />
 `;

packages/react/src/CounterLabel/CounterLabel.tsx

@@ -4,9 +4,8 @@ import type React from 'react'
 import {forwardRef} from 'react'
 import type {SxProp} from '../sx'
 import {VisuallyHidden} from '../VisuallyHidden'
-import {defaultSxProp} from '../utils/defaultSxProp'
-import Box from '../Box'
 import classes from './CounterLabel.module.css'
+import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 export type CounterLabelProps = React.PropsWithChildren<
   HTMLAttributes<HTMLSpanElement> & {
@@ -16,7 +15,7 @@ export type CounterLabelProps = React.PropsWithChildren<
 >
 
 const CounterLabel = forwardRef<HTMLSpanElement, CounterLabelProps>(
-  ({scheme = 'secondary', sx = defaultSxProp, className, children, ...rest}, forwardedRef) => {
+  ({scheme = 'secondary', className, children, ...rest}, forwardedRef) => {
     const label = <VisuallyHidden>&nbsp;({children})</VisuallyHidden>
     const counterProps = {
       ref: forwardedRef,
@@ -25,21 +24,11 @@ const CounterLabel = forwardRef<HTMLSpanElement, CounterLabelProps>(
       ...rest,
     }
 
-    if (sx !== defaultSxProp) {
-      return (
-        <>
-          <Box as="span" {...counterProps} className={clsx(className, classes.CounterLabel)} sx={sx}>
-            {children}
-          </Box>
-          {label}
-        </>
-      )
-    }
     return (
       <>
-        <span {...counterProps} className={clsx(className, classes.CounterLabel)}>
+        <BoxWithFallback as="span" {...counterProps} className={clsx(className, classes.CounterLabel)}>
           {children}
-        </span>
+        </BoxWithFallback>
         {label}
       </>
     )

packages/react/src/DataTable/Table.tsx

@@ -12,7 +12,6 @@ import {SkeletonText} from '../experimental/Skeleton/SkeletonText'
 import {ScrollableRegion} from '../ScrollableRegion'
 import {Button} from '../internal/components/ButtonReset'
 import classes from './Table.module.css'
-import {defaultSxProp} from '../utils/defaultSxProp'
 import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 // ----------------------------------------------------------------------------
@@ -236,9 +235,9 @@ function TableCellPlaceholder({children}: TableCellPlaceholderProps) {
 // ----------------------------------------------------------------------------
 export type TableContainerProps = React.PropsWithChildren<SxProp & React.HTMLAttributes<HTMLDivElement>>
 
-function TableContainer({children, className, sx: sxProp = defaultSxProp, ...rest}: TableContainerProps) {
+function TableContainer({children, className, ...rest}: TableContainerProps) {
   return (
-    <BoxWithFallback {...rest} className={clsx(className, classes.TableContainer)} sx={sxProp}>
+    <BoxWithFallback {...rest} className={clsx(className, classes.TableContainer)}>
       {children}
     </BoxWithFallback>
   )