chore(TextInput): remove sx

.changeset/spicy-items-watch.md

@@ -0,0 +1,6 @@
+---
+"@primer/react": patch
+"@primer/styled-react": patch
+---
+
+chore(TextInput): remove sx

e2e/components/TextInput.test.ts

@@ -219,24 +219,6 @@ test.describe('TextInput', () => {
     }
   })
 
-  test.describe('Dev: With Sx', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-textinput-dev--with-sx',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`TextInput.Dev.WithSx.${theme}.png`)
-        })
-      })
-    }
-  })
-
   test.describe('Dev: With CSS', () => {
     for (const theme of themes) {
       test.describe(theme, () => {
@@ -254,22 +236,4 @@ test.describe('TextInput', () => {
       })
     }
   })
-
-  test.describe('Dev: With Sx and CSS', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-textinput-dev--with-sx-and-css',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`TextInput.Dev.WithSxAndCSS.${theme}.png`)
-        })
-      })
-    }
-  })
 })

packages/react/src/TextInput/TextInput.dev.stories.tsx

@@ -18,21 +18,3 @@ export const WithCSS = () => (
     </FormControl>
   </form>
 )
-
-export const WithSx = () => (
-  <form>
-    <FormControl>
-      <FormControl.Label>Default label</FormControl.Label>
-      <TextInput sx={{borderColor: 'red'}} />
-    </FormControl>
-  </form>
-)
-
-export const WithSxAndCSS = () => (
-  <form>
-    <FormControl>
-      <FormControl.Label>Default label</FormControl.Label>
-      <TextInput sx={{borderColor: 'red'}} className="testCustomClassnameBorderColor" />
-    </FormControl>
-  </form>
-)

packages/react/src/TextInput/TextInput.tsx

@@ -46,7 +46,6 @@ export type TextInputNonPassthroughProps = {
     | 'contrast'
     | 'disabled'
     | 'monospace'
-    | 'sx'
     | 'width'
     | 'maxWidth'
     | 'minWidth'
@@ -75,7 +74,6 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       loaderText = 'Loading',
       monospace,
       validationStatus,
-      sx: sxProp,
       size: sizeProp,
       onFocus,
       onBlur,
@@ -137,7 +135,6 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
         contrast={contrast}
         disabled={disabled}
         monospace={monospace}
-        sx={sxProp}
         size={sizeProp}
         width={widthProp}
         minWidth={minWidthProp}

packages/react/src/TextInput/index.ts

@@ -1,2 +1,3 @@
 export {default} from './TextInput'
 export type {TextInputProps, TextInputNonPassthroughProps} from './TextInput'
+export type {TextInputActionProps} from '../internal/components/TextInputInnerAction'

packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx

@@ -83,7 +83,6 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     className,
     block,
     disabled,
-    sx: sxProp,
     tokens,
     onTokenRemove,
     tokenComponent: TokenComponent = Token,
@@ -272,7 +271,6 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       data-token-wrapping={Boolean(preventTokenWrapping || maxHeight) || undefined}
       className={clsx(className, styles.TextInputWrapper)}
       style={maxHeight ? {maxHeight, ...style} : style}
-      sx={sxProp}
     >
       {IconComponent && !LeadingVisual && <IconComponent className="TextInput-icon" />}
       <TextInputInnerVisualSlot

packages/react/src/Textarea/Textarea.tsx

@@ -58,7 +58,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     {
       value,
       disabled,
-      sx: sxProp,
       required,
       validationStatus,
       rows = DEFAULT_TEXTAREA_ROWS,
@@ -76,7 +75,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ): ReactElement => {
     return (
       <TextInputBaseWrapper
-        sx={sxProp}
         validationStatus={validationStatus}
         disabled={disabled}
         block={block}

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

@@ -179,6 +179,7 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "Textarea",
   "type TextareaProps",
   "TextInput",
+  "type TextInputActionProps",
   "type TextInputProps",
   "TextInputWithTokens",
   "type TextInputWithTokensProps",

packages/react/src/index.ts

@@ -167,7 +167,7 @@ export type {SubNavProps, SubNavLinkProps, SubNavLinksProps} from './SubNav'
 export {default as ToggleSwitch} from './ToggleSwitch'
 export type {ToggleSwitchProps} from './ToggleSwitch'
 export {default as TextInput} from './TextInput'
-export type {TextInputProps} from './TextInput'
+export type {TextInputProps, TextInputActionProps} from './TextInput'
 export {default as TextInputWithTokens} from './TextInputWithTokens'
 export type {TextInputWithTokensProps} from './TextInputWithTokens'
 export {default as Text} from './Text'

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

@@ -9,7 +9,7 @@ import {clsx} from 'clsx'
 
 import styles from './TextInputInnerAction.module.css'
 
-type TextInputActionProps = Omit<
+export type TextInputActionProps = Omit<
   React.ButtonHTMLAttributes<HTMLButtonElement>,
   'aria-label' | 'size' | 'tooltipDirection'
 > & {

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

@@ -5,7 +5,6 @@ import type {FormValidationStatus} from '../../utils/types/FormValidationStatus'
 import {clsx} from 'clsx'
 
 import styles from './TextInputWrapper.module.css'
-import {BoxWithFallback} from './BoxWithFallback'
 
 export type TextInputSizes = 'small' | 'medium' | 'large'
 
@@ -59,8 +58,7 @@ export const TextInputBaseWrapper = React.forwardRef<HTMLElement, StyledTextInpu
     forwardRef,
   ) {
     return (
-      <BoxWithFallback
-        as="span"
+      <span
         ref={forwardRef}
         className={clsx(className, styles.TextInputBaseWrapper)}
         data-block={block || undefined}
@@ -72,11 +70,12 @@ export const TextInputBaseWrapper = React.forwardRef<HTMLElement, StyledTextInpu
         data-trailing-action={hasTrailingAction || undefined}
         data-validation={validationStatus || undefined}
         data-variant={variant || undefined}
-        style={
-          typeof width === 'string' || typeof minWidth === 'string' || typeof maxWidth === 'string'
-            ? {width, maxWidth, minWidth, ...style}
-            : style
-        }
+        style={{
+          ...(typeof width === 'string' || typeof width === 'number' ? {width} : {}),
+          ...(typeof minWidth === 'string' || typeof minWidth === 'number' ? {minWidth} : {}),
+          ...(typeof maxWidth === 'string' || typeof maxWidth === 'number' ? {maxWidth} : {}),
+          ...style,
+        }}
         {...restProps}
       />
     )

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

@@ -1,6 +1,7 @@
 import {
   Autocomplete as PrimerAutocomplete,
   type AutocompleteOverlayProps as PrimerAutocompleteOverlayProps,
+  type AutocompleteInputProps as PrimerAutocompleteInputProps,
 } from '@primer/react'
 import {sx, type SxProp} from '../sx'
 import styled from 'styled-components'
@@ -16,17 +17,25 @@ const AutocompleteOverlay: React.ComponentType<AutocompleteOverlayProps> = style
   ${sx}
 `
 
+export type AutocompleteInputProps = PrimerAutocompleteInputProps & SxProp
+
+const AutocompleteInput: React.ComponentType<AutocompleteInputProps> = styled(PrimerAutocomplete.Input).withConfig({
+  shouldForwardProp: prop => (prop as keyof AutocompleteInputProps) !== 'sx',
+})<AutocompleteInputProps>`
+  ${sx}
+`
+
 interface AutocompleteExport {
   (props: ComponentProps<typeof PrimerAutocomplete>): React.ReactNode
   Context: typeof PrimerAutocomplete.Context
-  Input: typeof PrimerAutocomplete.Input
+  Input: typeof AutocompleteInput
   Menu: typeof PrimerAutocomplete.Menu
   Overlay: typeof AutocompleteOverlay
 }
 
 const Autocomplete: AutocompleteExport = Object.assign(PrimerAutocomplete, {
   Context: PrimerAutocomplete.Context,
-  Input: PrimerAutocomplete.Input,
+  Input: AutocompleteInput,
   Menu: PrimerAutocomplete.Menu,
   Overlay: AutocompleteOverlay,
 })

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

@@ -0,0 +1,35 @@
+import {
+  TextInput as PrimerTextInput,
+  type TextInputProps as PrimerTextInputProps,
+  type TextInputActionProps as PrimerTextInputActionProps,
+} from '@primer/react'
+import {forwardRef} from 'react'
+import {Box} from './Box'
+import type {SxProp} from '../sx'
+import type {ForwardRefExoticComponent, RefAttributes} from 'react'
+
+export type TextInputProps = PrimerTextInputProps & SxProp & {as?: React.ElementType}
+export type TextInputActionProps = PrimerTextInputActionProps & SxProp
+
+const StyledTextInput = forwardRef<HTMLInputElement, TextInputProps>((props, ref) => {
+  return <Box as={PrimerTextInput} ref={ref} {...props} />
+})
+
+const TextInputImpl = forwardRef<HTMLInputElement, TextInputProps>(({as, ...props}, ref) => {
+  return <StyledTextInput ref={ref} {...props} {...(as ? {forwardedAs: as} : {})} />
+})
+
+const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>((props, ref) => {
+  return <Box as={PrimerTextInput.Action} ref={ref} {...props} />
+})
+
+type TextInputComposite = ForwardRefExoticComponent<TextInputProps & RefAttributes<HTMLInputElement>> & {
+  Action: typeof TextInputAction
+}
+
+export const TextInput: TextInputComposite = Object.assign(TextInputImpl, {
+  Action: TextInputAction,
+})
+
+TextInputAction.displayName = 'TextInputAction'
+TextInputImpl.displayName = 'TextInput'

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

@@ -0,0 +1,19 @@
+import {Textarea as PrimerTextarea, type TextareaProps as PrimerTextareaProps} from '@primer/react'
+import styled from 'styled-components'
+import {sx, type SxProp} from '../sx'
+import type {ForwardRefComponent} from '../polymorphic'
+import {forwardRef} from 'react'
+
+type TextareaProps = PrimerTextareaProps & SxProp & {as?: React.ElementType}
+
+const StyledTextarea = styled(PrimerTextarea).withConfig<TextareaProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+` as ForwardRefComponent<'textarea', TextareaProps>
+
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(({as, ...props}, ref) => {
+  return <StyledTextarea {...props} {...(as ? {forwardedAs: as} : {})} ref={ref} />
+}) as ForwardRefComponent<'textarea', TextareaProps>
+
+export {Textarea, type TextareaProps}

packages/styled-react/src/index.tsx

@@ -5,9 +5,6 @@ export {Details} from '@primer/react'
 export {IconButton} from '@primer/react'
 export {ProgressBar} from '@primer/react'
 export {Select} from '@primer/react'
-export {Textarea} from '@primer/react'
-export {TextInput} from '@primer/react'
-export {type TextInputProps} from '@primer/react'
 
 // theming depends on styled-components
 export {ThemeProvider} from '@primer/react'
@@ -54,6 +51,8 @@ export {Spinner, type SpinnerProps} from './components/Spinner'
 export {StateLabel, type StateLabelProps} from './components/StateLabel'
 export {SubNav, type SubNavProps, type SubNavLinkProps} from './components/SubNav'
 export {Text, type TextProps} from './components/Text'
+export {Textarea, type TextareaProps} from './components/Textarea'
+export {TextInput, type TextInputProps, type TextInputActionProps} from './components/TextInput'
 export {
   Timeline,
   type TimelineProps,