Remove sx from the TextInput component

.changeset/fancy-rats-laugh.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Remove sx prop support from the TextInput component.

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/Overlay/Overlay.features.stories.module.css

@@ -118,3 +118,26 @@
   right: var(--base-size-4);
   top: var(--base-size-4);
 }
+
+.FormInput {
+  margin-bottom: var(--base-size-8);
+}
+
+.FormTextarea {
+  margin-bottom: var(--base-size-8);
+}
+
+.FormTextarea textarea {
+  padding: var(--base-size-8);
+}
+
+.EditableTitle {
+  width: 100%;
+  padding-top: var(--base-size-4);
+  padding-bottom: var(--base-size-4);
+  padding-left: var(--base-size-2);
+  padding-right: var(--base-size-2);
+  text-align: left;
+  font-weight: var(--base-text-weight-semibold);
+  font-size: var(--text-title-size-large);
+}

packages/react/src/Overlay/Overlay.features.stories.tsx

@@ -386,8 +386,8 @@ export const NestedOverlays = ({role, open}: Args) => {
                 <Text color="fg.muted" sx={{fontSize: 1, mb: 3}}>
                   Create a list to organize your starred repositories.
                 </Text>
-                <TextInput placeholder="Name this list" sx={{mb: 2}} />
-                <TextInput as="textarea" placeholder="Write a description" rows={3} sx={{mb: 2, textarea: {p: 2}}} />
+                <TextInput placeholder="Name this list" className={classes.FormInput} />
+                <TextInput as="textarea" placeholder="Write a description" rows={3} className={classes.FormTextarea} />
 
                 <Button variant="primary" onClick={() => setCreateListOverlayOpen(!createListOverlayOpen)}>
                   Create
@@ -481,14 +481,7 @@ export const MemexIssueOverlay = ({role, open}: Args) => {
                   }
                 }}
                 ref={inputRef}
-                sx={{
-                  width: '100%',
-                  py: '2px',
-                  px: '7px',
-                  textAlign: 'left',
-                  color: 'fg.default',
-                  input: {fontWeight: 'bold', fontSize: 4, px: 0},
-                }}
+                className={classes.EditableTitle}
               />
             ) : (
               <Button

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.docs.json

@@ -145,21 +145,21 @@
       "type": "string | number | Array<string | number>",
       "defaultValue": "",
       "deprecated": true,
-      "description": "(Use sx prop) Set the width of the input"
+      "description": "(Deprecated) Set the width of the input - use CSS modules or custom styling instead"
     },
     {
       "name": "maxWidth",
       "type": "string | number | Array<string | number>",
       "defaultValue": "",
       "deprecated": true,
-      "description": "(Use sx prop) Set the maximum width of the input"
+      "description": "(Deprecated) Set the maximum width of the input - use CSS modules or custom styling instead"
     },
     {
       "name": "minWidth",
       "type": "string | number | Array<string | number>",
       "defaultValue": "",
       "deprecated": true,
-      "description": "(Use sx prop) Set the minimum width of the input"
+      "description": "(Deprecated) Set the minimum width of the input - use CSS modules or custom styling instead"
     },
     {
       "name": "icon",
@@ -168,11 +168,6 @@
       "deprecated": true,
       "description": "(Use leadingVisual or trailingVisual) An Octicon React component. To be used inside of input. Positioned on the left edge."
     },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
-    },
     {
       "name": "ref",
       "type": "React.RefObject<HTMLInputElement>"
@@ -215,11 +210,6 @@
           "name": "as",
           "type": "React.ElementType",
           "defaultValue": "\"button\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "passthrough": {

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/__tests__/__snapshots__/exports.test.ts.snap

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

@@ -155,7 +155,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/styled-react/src/__tests__/primer-react.browser.test.tsx

@@ -76,13 +76,14 @@
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
   })
 
-  test('Autocomplete.Input supports `sx` prop', () => {
+  // TODO: Add Autocomplete styled wrapper
+  test.todo('Autocomplete.Input supports `sx` prop', () => {
     const {container} = render(
       <Autocomplete>
-        <Autocomplete.Input data-testid="component" sx={{background: 'red'}} />
+        <Autocomplete.Input data-testid="component" />
       </Autocomplete>,
     )
-    expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
+    // expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
   })
 
   test('Autocomplete.Overlay supports `sx` prop', async () => {

packages/styled-react/src/index.tsx

@@ -8,6 +8,9 @@ import {
   SubNav as PrimerSubNav,
   type SubNavProps as PrimerSubNavProps,
   type SubNavLinkProps as PrimerSubNavLinkProps,
+  TextInput as PrimerTextInput,
+  type TextInputProps as PrimerTextInputProps,
+  type TextInputActionProps as PrimerTextInputActionProps,
   ToggleSwitch as PrimerToggleSwitch,
   type ToggleSwitchProps as PrimerToggleSwitchProps,
 } from '@primer/react'
@@ -59,13 +62,31 @@ const SubNav = Object.assign(SubNavImpl, {
   Link: SubNavLink,
 })
 
+type TextInputProps = PrimerTextInputProps & SxProp
+type TextInputActionProps = PrimerTextInputActionProps & SxProp
+
+const TextInputBase = forwardRef<HTMLInputElement, TextInputProps>(function TextInput(props, ref) {
+  // @ts-expect-error: Box as accepts the compound component
+  return <Box as={PrimerTextInput} ref={ref} {...props} />
+}) as React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>
+
+const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>(function TextInputAction(props, ref) {
+  return <Box as={PrimerTextInput.Action} ref={ref} {...props} />
+})
+
+const TextInput: typeof TextInputBase & {
+  Action: typeof TextInputAction
+} = Object.assign(TextInputBase, {
+  Action: TextInputAction,
+})
+
 type ToggleSwitchProps = PrimerToggleSwitchProps & Omit<StyledProps, keyof PrimerToggleSwitchProps>
 
 const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleSwitchProps>(function ToggleSwitch(props, ref) {
   return <Box as={PrimerToggleSwitch} ref={ref} {...props} />
 })
 
-export {StateLabel, SubNav, ToggleSwitch}
+export {StateLabel, SubNav, TextInput, ToggleSwitch}
 
 export {
   ActionList,
@@ -101,7 +122,6 @@ export {
   Spinner,
   Text,
   Textarea,
-  TextInput,
   Timeline,
   Token,
   Tooltip,