Remove BoxWithFallback usage and sx prop from InputLabel and UnstyledTextInput

.changeset/better-steaks-dress.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Removes `sx` prop from internal helper components which results in `sx` no longer being available on the TextInput.Label component

packages/react/src/FormControl/FormControlLabel.tsx

@@ -11,43 +11,51 @@ export type Props = {
   requiredIndicator?: boolean
   id?: string
   className?: string
+  as?: 'label' | 'legend' | 'span'
 }
 
-const FormControlLabel: React.FC<
-  React.PropsWithChildren<{htmlFor?: string} & React.ComponentProps<typeof InputLabel> & Props>
-> = ({as, children, htmlFor, id, visuallyHidden, requiredIndicator = true, requiredText, className, ...props}) => {
+type FormControlLabelProps = React.PropsWithChildren<{htmlFor?: string} & Props>
+
+const FormControlLabel: React.FC<FormControlLabelProps> = ({
+  as,
+  children,
+  htmlFor,
+  id,
+  visuallyHidden,
+  requiredIndicator = true,
+  requiredText,
+  className,
+  ...props
+}) => {
   const {disabled, id: formControlId, required} = useFormControlContext()
 
-  /**
-   * Ensure we can pass through props correctly, since legend/span accept no defined 'htmlFor'
-   */
-  const labelProps: React.ComponentProps<typeof InputLabel> =
-    as === 'legend' || as === 'span'
-      ? {
-          as,
-          id,
-          className,
-          visuallyHidden,
-          required,
-          requiredText,
-          requiredIndicator,
-          disabled,
-          ...props,
-        }
-      : {
-          as,
-          id,
-          className,
-          visuallyHidden,
-          htmlFor: htmlFor || formControlId,
-          required,
-          requiredText,
-          requiredIndicator,
-          disabled,
-          ...props,
-        }
+  // Base props that are common to all element types
+  const baseProps = {
+    id,
+    className,
+    visuallyHidden,
+    required,
+    requiredText,
+    requiredIndicator,
+    disabled,
+    ...props,
+  }
+
+  // For legend and span elements, don't pass htmlFor
+  if (as === 'legend' || as === 'span') {
+    return (
+      <InputLabel as={as} {...baseProps}>
+        {children}
+      </InputLabel>
+    )
+  }
 
-  return <InputLabel {...labelProps}>{children}</InputLabel>
+  // For label elements (default), include htmlFor
+  return (
+    <InputLabel as={as} htmlFor={htmlFor || formControlId} {...baseProps}>
+      {children}
+    </InputLabel>
+  )
 }
 
 export default FormControlLabel

packages/react/src/internal/components/InputLabel.tsx

@@ -1,32 +1,26 @@
 import {clsx} from 'clsx'
 import type React from 'react'
-import {type SxProp} from '../../sx'
+import type {ElementType} from 'react'
 import classes from './InputLabel.module.css'
-import {BoxWithFallback} from './BoxWithFallback'
+import type {PolymorphicProps} from '../../utils/modern-polymorphic'
 
-type BaseProps = SxProp & {
-  disabled?: boolean
-  required?: boolean
-  requiredText?: string
-  requiredIndicator?: boolean
-  visuallyHidden?: boolean
-  id?: string
-  className?: string
-}
-
-export type LabelProps = BaseProps & {
-  htmlFor?: string
-  as?: 'label'
-}
-
-export type LegendOrSpanProps = BaseProps & {
-  as: 'legend' | 'span'
-  htmlFor?: undefined
-}
+type InputLabelProps<As extends ElementType = 'label'> = PolymorphicProps<
+  As,
+  'label',
+  {
+    disabled?: boolean
+    required?: boolean
+    requiredText?: string
+    requiredIndicator?: boolean
+    visuallyHidden?: boolean
+  }
+> &
+  React.PropsWithChildren
 
-type Props = React.PropsWithChildren<LabelProps | LegendOrSpanProps>
+export type LabelProps = InputLabelProps<'label'>
+export type LegendOrSpanProps = InputLabelProps<'legend' | 'span'>
 
-function InputLabel({
+function InputLabel<As extends ElementType = 'label'>({
   children,
   disabled,
   htmlFor,
@@ -35,16 +29,13 @@ function InputLabel({
   requiredText,
   requiredIndicator,
   visuallyHidden,
-  sx,
-  as = 'label',
+  as,
   className,
   ...props
-}: Props) {
+}: InputLabelProps<As>) {
+  const Component = as || 'label'
   return (
-    // @ts-ignore weird typing issue with union for `as` prop
-    <BoxWithFallback
-      as={as}
-      sx={sx}
+    <Component
       data-control-disabled={disabled ? '' : undefined}
       data-visually-hidden={visuallyHidden ? '' : undefined}
       htmlFor={htmlFor}
@@ -60,7 +51,7 @@ function InputLabel({
       ) : (
         children
       )}
-    </BoxWithFallback>
+    </Component>
   )
 }
 

packages/react/src/internal/components/UnstyledTextInput.tsx

@@ -1,17 +1,15 @@
-import {type SxProp} from '../../sx'
 import React from 'react'
 
 import styles from './UnstyledTextInput.module.css'
 import {clsx} from 'clsx'
-import {BoxWithFallback} from './BoxWithFallback'
 
-type ToggledUnstyledTextInputProps = React.ComponentPropsWithoutRef<'input'> & SxProp
+type ToggledUnstyledTextInputProps = React.ComponentPropsWithoutRef<'input'>
 
 const UnstyledTextInput = React.forwardRef<HTMLInputElement, ToggledUnstyledTextInputProps>(function UnstyledTextInput(
   {className, ...rest},
   forwardRef,
 ) {
-  return <BoxWithFallback as="input" ref={forwardRef} {...rest} className={clsx(className, styles.Input)} />
+  return <input ref={forwardRef} {...rest} className={clsx(className, styles.Input)} />
 })
 UnstyledTextInput.displayName = 'UnstyledTextInput'