Revert TextInputWithWrapper changes to remove sx and styled-system

.changeset/silly-parks-give.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Adds `sx` prop back to TextInput

e2e/components/TextInput.test.ts

@@ -219,6 +219,24 @@ 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, () => {
@@ -236,4 +254,22 @@ 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/SelectPanel/SelectPanel.module.css

@@ -52,11 +52,6 @@
  color: var(--fgColor-muted);
 }
 
-.FilterInputWrapper {
- margin: var(--base-size-8);
- width: auto;
-}
-
 .Notice {
  margin-top: var(--base-size-4);
  margin-right: var(--base-size-8);
@@ -235,3 +230,7 @@
  inset: 0;
  background-color: var(--overlay-backdrop-bgColor);
 }
+
+.TextInput {
+ margin: var(--base-size-8);
+}

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -648,7 +648,7 @@ function Panel({
 
  const extendedTextInputProps: Partial<TextInputProps> = useMemo(() => {
  return {
- className: classes.FilterInputWrapper,
+ className: classes.TextInput,
  contrast: true,
  leadingVisual: SearchIcon,
  'aria-label': inputLabel,

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

@@ -18,3 +18,21 @@ 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

@@ -140,6 +140,27 @@
  "deprecated": true,
  "description": "(Use size) Creates a smaller or larger input than the default."
  },
+ {
+ "name": "width",
+ "type": "string | number | Array<string | number>",
+ "defaultValue": "",
+ "deprecated": true,
+ "description": "(Use sx prop) Set the width of the input"
+ },
+ {
+ "name": "maxWidth",
+ "type": "string | number | Array<string | number>",
+ "defaultValue": "",
+ "deprecated": true,
+ "description": "(Use sx prop) Set the maximum width of the input"
+ },
+ {
+ "name": "minWidth",
+ "type": "string | number | Array<string | number>",
+ "defaultValue": "",
+ "deprecated": true,
+ "description": "(Use sx prop) Set the minimum width of the input"
+ },
  {
  "name": "icon",
  "type": "React.ComponentType",

packages/react/src/TextInput/TextInput.tsx

@@ -40,7 +40,20 @@ export type TextInputNonPassthroughProps = {
  */
  trailingAction?: React.ReactElement<React.HTMLProps<HTMLButtonElement>>
 } & Partial<
- Pick<StyledWrapperProps, 'block' | 'contrast' | 'disabled' | 'monospace' | 'variant' | 'size' | 'validationStatus'>
+ Pick<
+ StyledWrapperProps,
+ | 'block'
+ | 'contrast'
+ | 'disabled'
+ | 'monospace'
+ | 'sx'
+ | 'width'
+ | 'maxWidth'
+ | 'minWidth'
+ | 'variant'
+ | 'size'
+ | 'validationStatus'
+ >
 >
 
 export type TextInputProps = Merge<React.ComponentPropsWithoutRef<'input'>, TextInputNonPassthroughProps>
@@ -62,10 +75,14 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
  loaderText = 'Loading',
  monospace,
  validationStatus,
+ sx: sxProp,
  size: sizeProp,
  onFocus,
  onBlur,
  // start deprecated props
+ width: widthProp,
+ minWidth: minWidthProp,
+ maxWidth: maxWidthProp,
  variant: variantProp,
  // end deprecated props
  type = 'text',
@@ -120,7 +137,11 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
  contrast={contrast}
  disabled={disabled}
  monospace={monospace}
+ sx={sxProp}
  size={sizeProp}
+ width={widthProp}
+ minWidth={minWidthProp}
+ maxWidth={maxWidthProp}
  variant={variantProp}
  hasLeadingVisual={Boolean(LeadingVisual || showLeadingLoadingIndicator)}
  hasTrailingVisual={Boolean(TrailingVisual || showTrailingLoadingIndicator)}

packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx

@@ -83,13 +83,17 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
  className,
  block,
  disabled,
+ sx: sxProp,
  tokens,
  onTokenRemove,
  tokenComponent: TokenComponent = Token,
  preventTokenWrapping = false,
  size = 'xlarge',
  hideTokenRemoveButtons = false,
  maxHeight,
+ width: widthProp,
+ minWidth: minWidthProp,
+ maxWidth: maxWidthProp,
  validationStatus,
  variant: variantProp, // deprecated. use `size` instead
  visibleTokenCount,
@@ -258,13 +262,17 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
  disabled={disabled}
  hasLeadingVisual={Boolean(LeadingVisual || showLeadingLoadingIndicator)}
  hasTrailingVisual={Boolean(TrailingVisual || showTrailingLoadingIndicator)}
+ width={widthProp}
+ minWidth={minWidthProp}
+ maxWidth={maxWidthProp}
  size={inputSizeMap[size]}
  validationStatus={validationStatus}
  variant={variantProp} // deprecated. use `size` prop instead
  onClick={focusInput}
  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,6 +2,7 @@ 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'
 
 export const DEFAULT_TEXTAREA_ROWS = 7
@@ -45,7 +46,8 @@ export type TextareaProps = {
  * CSS styles to apply to the Textarea
  */
  style?: React.CSSProperties
-} & TextareaHTMLAttributes<HTMLTextAreaElement>
+} & TextareaHTMLAttributes<HTMLTextAreaElement> &
+ SxProp
 
 /**
  * An accessible, native textarea component that supports validation states.
@@ -56,6 +58,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  {
  value,
  disabled,
+ sx: sxProp,
  required,
  validationStatus,
  rows = DEFAULT_TEXTAREA_ROWS,
@@ -73,6 +76,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ): ReactElement => {
  return (
  <TextInputBaseWrapper
+ sx={sxProp}
  validationStatus={validationStatus}
  disabled={disabled}
  block={block}

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

@@ -1,4 +1,6 @@
 import React, {type ComponentProps} from 'react'
+import {type ResponsiveValue} from 'styled-system'
+import type {SxProp} from '../../sx'
 import type {FormValidationStatus} from '../../utils/types/FormValidationStatus'
 import {clsx} from 'clsx'
 
@@ -22,7 +24,13 @@ type StyledTextInputBaseWrapperProps = {
  style?: React.CSSProperties
  onClick?: React.MouseEventHandler
  children?: React.ReactNode
-}
+ /** @deprecated Update `width` using CSS modules or style. */
+ width?: string | number | ResponsiveValue<string | number>
+ /** @deprecated Update `min-width` using CSS modules or style. */
+ minWidth?: string | number | ResponsiveValue<string | number>
+ /** @deprecated Update `max-width` using CSS modules or style. */
+ maxWidth?: string | number | ResponsiveValue<string | number>
+} & SxProp
 
 type StyledTextInputWrapperProps = {
  hasLeadingVisual?: boolean
@@ -33,6 +41,7 @@ export const TextInputBaseWrapper = React.forwardRef<HTMLElement, StyledTextInpu
  function TextInputBaseWrapper(
  {
  className,
+ style,
  variant,
  size,
  isInputFocused,
@@ -42,6 +51,9 @@ export const TextInputBaseWrapper = React.forwardRef<HTMLElement, StyledTextInpu
  contrast,
  monospace,
  block,
+ width,
+ minWidth,
+ maxWidth,
  ...restProps
  },
  forwardRef,
@@ -60,6 +72,11 @@ 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
+ }
  {...restProps}
  />
  )