Remove BoxWithFallback usage from VisuallyHidden (#6928)

Author: mperrotti

.changeset/tricky-boats-visit.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Removes `sx` prop from VisuallyHidden component, and as a result also removes `sx` prop from CheckboxGroup.Label and RadioGroup.Label

packages/react/src/CheckboxGroup/CheckboxGroup.tsx

@@ -10,7 +10,7 @@ import FormControl from '../FormControl'
 import Checkbox from '../Checkbox/Checkbox'
 import {CheckboxGroupContext} from './CheckboxGroupContext'
 
-type CheckboxGroupProps = {
+export type CheckboxGroupProps = {
   /**
    * An onChange handler that gets called when any of the checkboxes change
    */

packages/react/src/CheckboxGroup/index.ts

@@ -1 +1 @@
-export {default, CheckboxGroupContext} from './CheckboxGroup'
+export {default, CheckboxGroupContext, type CheckboxGroupProps} from './CheckboxGroup'

packages/react/src/RadioGroup/RadioGroup.docs.json

@@ -84,11 +84,6 @@
           "type": "boolean",
           "defaultValue": "false",
           "description": "If true, the fieldset legend will be visually hidden"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ]
     },
@@ -132,4 +127,4 @@
       ]
     }
   ]
-}
+}

packages/react/src/_VisuallyHidden.tsx

@@ -1,18 +1,28 @@
 import classes from './_VisuallyHidden.module.css'
 import {clsx} from 'clsx'
-import {BoxWithFallback} from './internal/components/BoxWithFallback'
-import type {SxProp} from './sx'
+import type {PolymorphicProps} from './utils/modern-polymorphic'
+import type {ElementType} from 'react'
 
-interface Props extends React.ComponentPropsWithoutRef<'span'> {
-  isVisible?: boolean
-  as?: React.ElementType
-}
+type VisuallyHiddenProps<As extends ElementType = 'span'> = PolymorphicProps<
+  As,
+  'span',
+  {
+    isVisible?: boolean
+  }
+>
 
-function VisuallyHidden({isVisible, children, as = 'span', className, ...rest}: Props & SxProp) {
+function VisuallyHidden<As extends ElementType = 'span'>({
+  isVisible,
+  children,
+  as,
+  className,
+  ...rest
+}: VisuallyHiddenProps<As>) {
+  const Component = as || 'span'
   return (
-    <BoxWithFallback as={as} className={clsx(className, {[classes.InternalVisuallyHidden]: !isVisible})} {...rest}>
+    <Component className={clsx(className, {[classes.InternalVisuallyHidden]: !isVisible})} {...rest}>
       {children}
-    </BoxWithFallback>
+    </Component>
   )
 }
 

packages/react/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -51,6 +51,7 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "type ButtonProps",
   "Checkbox",
   "CheckboxGroup",
+  "type CheckboxGroupProps",
   "type CheckboxProps",
   "CircleBadge",
   "type CircleBadgeIconProps",

packages/react/src/index.ts

@@ -85,6 +85,7 @@ export {default as ButtonGroup} from './ButtonGroup'
 export type {ButtonGroupProps} from './ButtonGroup'
 export type {CircleBadgeProps, CircleBadgeIconProps} from './CircleBadge'
 export {default as CheckboxGroup} from './CheckboxGroup'
+export type {CheckboxGroupProps} from './CheckboxGroup'
 export {default as CircleBadge} from './CircleBadge'
 export {default as CounterLabel} from './CounterLabel'
 export type {CounterLabelProps} from './CounterLabel'

packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import VisuallyHidden from '../../../_VisuallyHidden'
-import type {SxProp} from '../../../sx'
 import CheckboxOrRadioGroupContext from './CheckboxOrRadioGroupContext'
 import classes from './CheckboxOrRadioGroup.module.css'
 import {Stack} from '../../../Stack'
@@ -13,13 +12,12 @@ export type CheckboxOrRadioGroupLabelProps = {
    * Whether to visually hide the fieldset legend
    */
   visuallyHidden?: boolean
-} & SxProp
+}
 
 const CheckboxOrRadioGroupLabel: React.FC<React.PropsWithChildren<CheckboxOrRadioGroupLabelProps>> = ({
   children,
   className,
   visuallyHidden = false,
-  sx,
 }) => {
   const {required, disabled} = React.useContext(CheckboxOrRadioGroupContext)
 
@@ -29,7 +27,6 @@ const CheckboxOrRadioGroupLabel: React.FC<React.PropsWithChildren<CheckboxOrRadi
       isVisible={!visuallyHidden}
       title={required ? 'required field' : undefined}
       data-label-disabled={disabled ? '' : undefined}
-      sx={sx}
     >
       {required ? (
         <Stack direction="horizontal" gap="none">

packages/styled-react/src/__tests__/primer-react.browser.test.tsx

@@ -143,6 +143,11 @@ describe('@primer/react', () => {
     )
   })
 
+  test('CheckboxGroup.Label supports `sx` prop', () => {
+    const {container} = render(<CheckboxGroup.Label data-testid="component" sx={{background: 'red'}} />)
+    expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
+  })
+
   test('CircleBadge supports `sx` prop', () => {
     render(<CircleBadge data-testid="component" sx={{background: 'red'}} />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')

packages/styled-react/src/components/CheckboxGroup.tsx

@@ -0,0 +1,49 @@
+import {
+  Box,
+  CheckboxGroup as PrimerCheckboxGroup,
+  type CheckboxGroupProps as PrimerCheckboxGroupProps,
+} from '@primer/react'
+import React, {type PropsWithChildren} from 'react'
+import type {SxProp} from '../sx'
+
+export type CheckboxGroupProps = PropsWithChildren<PrimerCheckboxGroupProps> & SxProp
+
+const CheckboxGroupImpl = (props: CheckboxGroupProps) => {
+  return <Box as={PrimerCheckboxGroup} {...props} />
+}
+
+// Define local types based on the internal component props
+type CheckboxOrRadioGroupLabelProps = PropsWithChildren<
+  {
+    className?: string
+    visuallyHidden?: boolean
+  } & SxProp
+>
+const CheckboxOrRadioGroupLabel = (props: CheckboxOrRadioGroupLabelProps) => {
+  return <Box as={PrimerCheckboxGroup.Label} {...props} />
+}
+
+type CheckboxOrRadioGroupCaptionProps = PropsWithChildren<
+  {
+    className?: string
+  } & SxProp
+>
+const CheckboxOrRadioGroupCaption = (props: CheckboxOrRadioGroupCaptionProps) => {
+  return <Box as={PrimerCheckboxGroup.Caption} {...props} />
+}
+
+type CheckboxOrRadioGroupValidationProps = PropsWithChildren<
+  {
+    className?: string
+    variant: 'error' | 'success'
+  } & SxProp
+>
+const CheckboxOrRadioGroupValidation = (props: CheckboxOrRadioGroupValidationProps) => {
+  return <Box as={PrimerCheckboxGroup.Validation} {...props} />
+}
+
+export const CheckboxGroup = Object.assign(CheckboxGroupImpl, {
+  Label: CheckboxOrRadioGroupLabel,
+  Caption: CheckboxOrRadioGroupCaption,
+  Validation: CheckboxOrRadioGroupValidation,
+})