Remove system props from TextInput & fix prop types (#1414)

.changeset/cuddly-rice-march.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Removed system props support from `<TextInput>` and fixed its type definition.

docs/content/TextInput.md

@@ -11,21 +11,11 @@ TextInput is a form component to add default styling to the native text input.
 ```jsx live
 <TextInput aria-label="Zipcode" name="zipcode" placeholder="Zipcode" autoComplete="postal-code" />
 
-<TextInput  sx={{ml: 4}} aria-label="City" name="city" placeholder="City" contrast />
+<TextInput sx={{ml: 4}} aria-label="City" name="city" placeholder="City" contrast />
 
 <TextInput sx={{ml: 4}} icon={SearchIcon} aria-label="Zipcode" name="zipcode" placeholder="Find user" autoComplete="postal-code" />
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-TextInput components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
 Native `<input>` attributes are forwarded to the underlying React `input` component and are not listed below.

src/TextInput.tsx

@@ -1,9 +1,8 @@
-import {omit, pick} from '@styled-system/props'
 import classnames from 'classnames'
 import React from 'react'
 import styled, {css} from 'styled-components'
 import {maxWidth, MaxWidthProps, minWidth, MinWidthProps, variant, width, WidthProps} from 'styled-system'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
@@ -43,8 +42,7 @@ type StyledWrapperProps = {
   block?: boolean
   contrast?: boolean
   variant?: 'small' | 'large'
-} & SystemCommonProps &
-  WidthProps &
+} & WidthProps &
   MinWidthProps &
   MaxWidthProps &
   SxProp
@@ -113,38 +111,60 @@ const Wrapper = styled.span<StyledWrapperProps>`
   @media (min-width: ${get('breakpoints.1')}) {
     font-size: ${get('fontSizes.1')};
   }
-  ${COMMON}
   ${width}
   ${minWidth}
   ${maxWidth}
   ${sizeVariants}
   ${sx};
 `
 
-type TextInputInternalProps = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  as?: any // This is a band-aid fix until we have better type support for the `as` prop
+// Props that are not passed through to Input:
+type NonPassthroughProps = {
+  className?: string
   icon?: React.ComponentType<{className?: string}>
-} & ComponentProps<typeof Wrapper> &
-  ComponentProps<typeof Input>
+} & Pick<
+  ComponentProps<typeof Wrapper>,
+  'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant'
+>
+
+type TextInputInternalProps = NonPassthroughProps &
+  // Note: using ComponentProps instead of ComponentPropsWithoutRef here would cause a type issue where `css` is a required prop.
+  Omit<React.ComponentPropsWithoutRef<typeof Input>, keyof NonPassthroughProps>
 
 // using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input
 const TextInput = React.forwardRef<HTMLInputElement, TextInputInternalProps>(
-  ({icon: IconComponent, contrast, className, block, disabled, theme, sx: sxProp, ...rest}, ref) => {
+  (
+    {
+      icon: IconComponent,
+      block,
+      className,
+      contrast,
+      disabled,
+      sx: sxProp,
+      theme,
+      width: widthProp,
+      minWidth: minWidthProp,
+      maxWidth: maxWidthProp,
+      variant: variantProp,
+      ...inputProps
+    },
+    ref
+  ) => {
     // this class is necessary to style FilterSearch, plz no touchy!
     const wrapperClasses = classnames(className, 'TextInput-wrapper')
-    const wrapperProps = pick(rest)
-    const inputProps = omit(rest)
     return (
       <Wrapper
-        className={wrapperClasses}
-        hasIcon={!!IconComponent}
         block={block}
-        theme={theme}
-        disabled={disabled}
+        className={wrapperClasses}
         contrast={contrast}
+        disabled={disabled}
+        hasIcon={!!IconComponent}
         sx={sxProp}
-        {...wrapperProps}
+        theme={theme}
+        width={widthProp}
+        minWidth={minWidthProp}
+        maxWidth={maxWidthProp}
+        variant={variantProp}
       >
         {IconComponent && <IconComponent className="TextInput-icon" />}
         <Input ref={ref} disabled={disabled} {...inputProps} />

src/stories/DropdownMenu.stories.tsx

@@ -36,7 +36,7 @@ export function FavoriteColorStory(): JSX.Element {
   return (
     <>
       <h1>Favorite Color</h1>
-      <TextInput placeholder="Input for focus testing" mb={2} />
+      <TextInput placeholder="Input for focus testing" sx={{mb: 2}} />
       <div id="favorite-color-label">Please select your favorite color:</div>
       <DropdownMenu
         renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (