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/__snapshots__/TextInput.test.tsx.snap

@@ -294,7 +294,7 @@ exports[`TextInput > renders trailingAction icon button 1`] = `
       <button
         aria-describedby=":r23:-loading-announcement"
         aria-labelledby=":r22:"
-        class="sc-gEvEer dEeFcy prc-Button-ButtonBase-Eb8-K prc-components-Invisible-6q42n prc-Button-IconButton-GE6m6"
+        class="prc-Button-ButtonBase-Eb8-K prc-components-Invisible-6q42n prc-Button-IconButton-GE6m6"
         data-component="IconButton"
         data-loading="false"
         data-no-visuals="true"
@@ -352,15 +352,16 @@ exports[`TextInput > renders trailingAction text button 1`] = `
     >
       <button
         aria-describedby=":r1p:-loading-announcement"
-        class="sc-gEvEer dEeFcy prc-Button-ButtonBase-Eb8-K prc-components-Invisible-6q42n"
+        class="prc-Button-ButtonBase-Eb8-K prc-components-Invisible-6q42n"
         data-loading="false"
         data-no-visuals="true"
         data-size="medium"
         data-variant="invisible"
         type="button"
       >
         <span
-          class="sc-gEvEer bLWYQi prc-Button-ButtonContent-KZ5Bz"
+          class="prc-Button-ButtonContent-KZ5Bz"
+          data-align="center"
           data-component="buttonContent"
         >
           <span
@@ -395,15 +396,16 @@ exports[`TextInput > renders trailingAction text button with a tooltip 1`] = `
     >
       <button
         aria-describedby=":r1u:-loading-announcement :r1t:"
-        class="sc-gEvEer dEeFcy prc-Button-ButtonBase-Eb8-K prc-components-Invisible-6q42n"
+        class="prc-Button-ButtonBase-Eb8-K prc-components-Invisible-6q42n"
         data-loading="false"
         data-no-visuals="true"
         data-size="medium"
         data-variant="invisible"
         type="button"
       >
         <span
-          class="sc-gEvEer bLWYQi prc-Button-ButtonContent-KZ5Bz"
+          class="prc-Button-ButtonContent-KZ5Bz"
+          data-align="center"
           data-component="buttonContent"
         >
           <span

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

@@ -84,7 +84,6 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     className,
     block,
     disabled,
-    sx: sxProp,
     tokens,
     onTokenRemove,
     tokenComponent: TokenComponent = Token,
@@ -273,7 +272,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

@@ -2,7 +2,6 @@ import type {TextareaHTMLAttributes, ReactElement} from 'react'
 import React from 'react'
 import {TextInputBaseWrapper} from '../internal/components/TextInputWrapper'
 import type {FormValidationStatus} from '../utils/types/FormValidationStatus'
-import type {SxProp} from '../sx'
 import classes from './TextArea.module.css'
 import type {WithSlotMarker} from '../utils/types'
 
@@ -47,8 +46,7 @@ export type TextareaProps = {
    * CSS styles to apply to the Textarea
    */
   style?: React.CSSProperties
-} & TextareaHTMLAttributes<HTMLTextAreaElement> &
-  SxProp
+} & TextareaHTMLAttributes<HTMLTextAreaElement>
 
 /**
  * An accessible, native textarea component that supports validation states.
@@ -59,7 +57,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     {
       value,
       disabled,
-      sx: sxProp,
       required,
       validationStatus,
       rows = DEFAULT_TEXTAREA_ROWS,
@@ -77,7 +74,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

@@ -180,6 +180,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

@@ -170,7 +170,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

@@ -4,12 +4,11 @@ import type {IconProps} from '@primer/octicons-react'
 import {Button, IconButton} from '../../Button'
 import {Tooltip} from '../../TooltipV2'
 import type {ButtonProps} from '../../Button'
-import type {SxProp} from '../../sx'
 import {clsx} from 'clsx'
 
 import styles from './TextInputInnerAction.module.css'
 
-type TextInputActionProps = Omit<
+export type TextInputActionProps = Omit<
   React.ButtonHTMLAttributes<HTMLButtonElement>,
   'aria-label' | 'size' | 'tooltipDirection'
 > & {
@@ -26,7 +25,7 @@ type TextInputActionProps = Omit<
    * Determine's the styles on a button one of 'default' | 'primary' | 'invisible' | 'danger'
    */
   variant?: ButtonProps['variant']
-} & SxProp
+}
 
 const ConditionalTooltip: React.FC<
   React.PropsWithChildren<{
@@ -54,14 +53,13 @@ const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>(
       tooltipDirection,
       children,
       icon,
-      sx: sxProp,
       className,
       variant = 'invisible',
       ...rest
     },
     forwardedRef,
   ) => {
-    const styleProps = {className: clsx(variant === 'invisible' && styles.Invisible, className), sx: sxProp || {}}
+    const styleProps = {className: clsx(variant === 'invisible' && styles.Invisible, className)}
 
     if ((icon && !ariaLabel) || (!children && !ariaLabel)) {
       // eslint-disable-next-line no-console

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

@@ -1,10 +1,8 @@
 import React, {type ComponentProps} from 'react'
-import type {SxProp} from '../../sx'
 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'
 
@@ -29,7 +27,7 @@ type StyledTextInputBaseWrapperProps = {
   minWidth?: string | number
   /** @deprecated Update `max-width` using CSS modules or style. */
   maxWidth?: string | number
-} & SxProp
+}
 
 type StyledTextInputWrapperProps = {
   hasLeadingVisual?: boolean
@@ -57,9 +55,17 @@ export const TextInputBaseWrapper = React.forwardRef<HTMLElement, StyledTextInpu
     },
     forwardRef,
   ) {
+    const memoizedStyle = React.useMemo(() => {
+      return {
+        ...(width ? {width} : {}),
+        ...(minWidth ? {minWidth} : {}),
+        ...(maxWidth ? {maxWidth} : {}),
+        ...style,
+      }
+    }, [width, minWidth, maxWidth, style])
+
     return (
-      <BoxWithFallback
-        as="span"
+      <span
         ref={forwardRef}
         className={clsx(className, styles.TextInputBaseWrapper)}
         data-block={block || undefined}
@@ -71,7 +77,7 @@ export const TextInputBaseWrapper = React.forwardRef<HTMLElement, StyledTextInpu
         data-trailing-action={hasTrailingAction || undefined}
         data-validation={validationStatus || undefined}
         data-variant={variant || undefined}
-        style={width || minWidth || maxWidth ? {width, maxWidth, minWidth, ...style} : style}
+        style={memoizedStyle}
         {...restProps}
       />
     )

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

@@ -411,7 +411,7 @@ describe('@primer/react', () => {
     expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
   })
 
-  test.skip('Select supports `sx` prop', () => {
+  test('Select supports `sx` prop', () => {
     render(<Select as="select" data-testid="component" sx={{background: 'red'}} required />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
     expect(screen.getByTestId('component')).toHaveAttribute('required')

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

@@ -1,6 +1,7 @@
 import {
   Autocomplete as PrimerAutocomplete,
   type AutocompleteOverlayProps as PrimerAutocompleteOverlayProps,
+  type AutocompleteInputProps as PrimerAutocompleteInputProps,
   type SlotMarker,
 } from '@primer/react'
 import {sx, type SxProp} from '../sx'
@@ -17,17 +18,25 @@ const AutocompleteOverlay: React.ComponentType<AutocompleteOverlayProps> & SlotM
   ${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/Select.tsx

@@ -0,0 +1,17 @@
+import {Select as PrimerSelect, type SelectProps as PrimerSelectProps} from '@primer/react'
+import {sx, type SxProp} from '../sx'
+import type {ForwardRefComponent} from '../polymorphic'
+import styled from 'styled-components'
+
+type SelectProps = PrimerSelectProps & SxProp & {as?: React.ElementType}
+
+const StyledSelect: ForwardRefComponent<'select', SelectProps> = styled(PrimerSelect).withConfig({
+  shouldForwardProp: prop => (prop as keyof SelectProps) !== 'sx',
+})<SelectProps>`
+  ${sx}
+`
+const Select = ({as, ...props}: SelectProps) => {
+  return <StyledSelect {...props} {...(as ? {forwardedAs: as as React.ElementType} : {})} />
+}
+
+export {Select, type SelectProps}