Update to deprecate props

Author: hussam-i-am

.changeset/clean-ligers-approve.md

@@ -2,4 +2,4 @@
 "@primer/react": minor
 ---
 
-Remove width props from TextInput
+Deprecate width, minWidth and maxWidth props from TextInput

packages/react/src/TextInput/TextInput.tsx

@@ -41,7 +41,17 @@ export type TextInputNonPassthroughProps = {
   trailingAction?: React.ReactElement<React.HTMLProps<HTMLButtonElement>>
 } & Pick<
   StyledWrapperProps,
-  'block' | 'contrast' | 'disabled' | 'monospace' | 'sx' | 'width' | 'variant' | 'size' | 'validationStatus'
+  | 'block'
+  | 'contrast'
+  | 'disabled'
+  | 'monospace'
+  | 'sx'
+  | 'width'
+  | 'maxWidth'
+  | 'minWidth'
+  | 'variant'
+  | 'size'
+  | 'validationStatus'
 >
 
 export type TextInputProps = Merge<React.ComponentPropsWithoutRef<'input'>, TextInputNonPassthroughProps>
@@ -69,6 +79,8 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       onBlur,
       // start deprecated props
       width: widthProp,
+      minWidth: minWidthProp,
+      maxWidth: maxWidthProp,
       variant: variantProp,
       // end deprecated props
       type = 'text',
@@ -126,6 +138,8 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
         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

@@ -91,6 +91,8 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     hideTokenRemoveButtons = false,
     maxHeight,
     width: widthProp,
+    minWidth: minWidthProp,
+    maxWidth: maxWidthProp,
     validationStatus,
     variant: variantProp, // deprecated. use `size` instead
     visibleTokenCount,
@@ -262,6 +264,8 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       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

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

@@ -1,5 +1,6 @@
 import styled, {css} from 'styled-components'
-import {variant} from 'styled-system'
+import type {MaxWidthProps, MinWidthProps, WidthProps} from 'styled-system'
+import {maxWidth, minWidth, variant, width} from 'styled-system'
 import {get} from '../../constants'
 import type {SxProp} from '../../sx'
 import sx from '../../sx'
@@ -55,8 +56,10 @@ export type StyledBaseWrapperProps = {
   isInputFocused?: boolean
   monospace?: boolean
   validationStatus?: FormValidationStatus
-  width?: string
-} & SxProp
+} & /** @deprecated Update `width` using CSS modules or style. */ WidthProps &
+  /** @deprecated Update `min-width` using CSS modules or style. */ MinWidthProps &
+  /** @deprecated Update `max-width` using CSS modules or style. */ MaxWidthProps &
+  SxProp
 
 export type StyledWrapperProps = {
   hasLeadingVisual?: boolean
@@ -176,17 +179,14 @@ export const TextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
       align-self: stretch;
     `}
 
-  ${props =>
-    props.width &&
-    css`
-      width: ${props.width};
-    `}
-
   // Ensures inputs don' t zoom on mobile but are body-font size on desktop
   @media (min-width: ${get('breakpoints.1')}) {
     font-size: ${get('fontSizes.1')};
   }
 
+  ${width}
+  ${minWidth}
+  ${maxWidth}
   ${sizeDeprecatedVariants}
   ${sizeVariants}
   ${sx};