From 7e74223bd2c3a2a0af1e84232858ff90813639a1 Mon Sep 17 00:00:00 2001 From: Hussam Ghazzi Date: Fri, 8 Nov 2024 20:03:33 +0000 Subject: [PATCH 1/6] feat(TextInput): Remove width props from TextInput --- .changeset/clean-ligers-approve.md | 5 +++++ .../src/internal/components/TextInputWrapper.tsx | 14 +++++--------- 2 files changed, 10 insertions(+), 9 deletions(-) create mode 100644 .changeset/clean-ligers-approve.md diff --git a/.changeset/clean-ligers-approve.md b/.changeset/clean-ligers-approve.md new file mode 100644 index 00000000000..ee42748b015 --- /dev/null +++ b/.changeset/clean-ligers-approve.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Remove width props from TextInput diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx index 56557456493..cd78ccd6d0e 100644 --- a/packages/react/src/internal/components/TextInputWrapper.tsx +++ b/packages/react/src/internal/components/TextInputWrapper.tsx @@ -1,7 +1,5 @@ import React from 'react' import styled from 'styled-components' -import type {MaxWidthProps, MinWidthProps, WidthProps} from 'styled-system' -import {maxWidth, minWidth, width} from 'styled-system' import type {SxProp} from '../../sx' import sx from '../../sx' import type {FormValidationStatus} from '../../utils/types/FormValidationStatus' @@ -19,10 +17,8 @@ export type StyledBaseWrapperProps = { /** @deprecated Use `size` prop instead */ variant?: TextInputSizes size?: TextInputSizes -} & WidthProps & - MinWidthProps & - MaxWidthProps & - SxProp & + width?: string +} & SxProp & React.ComponentPropsWithoutRef<'span'> export type StyledWrapperProps = { @@ -165,9 +161,6 @@ export const StyledTextInputBaseWrapper = styled.span` } & { - ${width} - ${minWidth} - ${maxWidth} ${sx} } ` @@ -183,6 +176,8 @@ export function TextInputBaseWrapper(props: React.PropsWithChildren ) From 19581849e73b1209456f7af4d3a65c356f51581a Mon Sep 17 00:00:00 2001 From: Hussam Ghazzi Date: Fri, 8 Nov 2024 20:09:43 +0000 Subject: [PATCH 2/6] type fixes --- packages/react/src/TextInput/TextInput.tsx | 16 +--------------- .../TextInputWithTokens/TextInputWithTokens.tsx | 4 ---- 2 files changed, 1 insertion(+), 19 deletions(-) diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx index e272f04887f..acf5a581e4d 100644 --- a/packages/react/src/TextInput/TextInput.tsx +++ b/packages/react/src/TextInput/TextInput.tsx @@ -41,17 +41,7 @@ export type TextInputNonPassthroughProps = { trailingAction?: React.ReactElement> } & Pick< StyledWrapperProps, - | 'block' - | 'contrast' - | 'disabled' - | 'monospace' - | 'sx' - | 'width' - | 'maxWidth' - | 'minWidth' - | 'variant' - | 'size' - | 'validationStatus' + 'block' | 'contrast' | 'disabled' | 'monospace' | 'sx' | 'width' | 'variant' | 'size' | 'validationStatus' > export type TextInputProps = Merge, TextInputNonPassthroughProps> @@ -79,8 +69,6 @@ const TextInput = React.forwardRef( onBlur, // start deprecated props width: widthProp, - minWidth: minWidthProp, - maxWidth: maxWidthProp, variant: variantProp, // end deprecated props type = 'text', @@ -138,8 +126,6 @@ const TextInput = React.forwardRef( sx={sxProp} size={sizeProp} width={widthProp} - minWidth={minWidthProp} - maxWidth={maxWidthProp} variant={variantProp} hasLeadingVisual={Boolean(LeadingVisual || showLeadingLoadingIndicator)} hasTrailingVisual={Boolean(TrailingVisual || showTrailingLoadingIndicator)} diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx index fa03c61a48e..9567de7b341 100644 --- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx +++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx @@ -88,8 +88,6 @@ function TextInputWithTokensInnerComponent Date: Fri, 8 Nov 2024 22:40:53 +0000 Subject: [PATCH 3/6] lint fix --- .../react/src/internal/components/TextInputWrapper.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx index 99deaa43b4e..36da1e9360e 100644 --- a/packages/react/src/internal/components/TextInputWrapper.tsx +++ b/packages/react/src/internal/components/TextInputWrapper.tsx @@ -176,17 +176,17 @@ export const TextInputBaseWrapper = styled.span` align-self: stretch; `} - // 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')}; - } - ${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')}; + } + ${sizeDeprecatedVariants} ${sizeVariants} ${sx}; From f64022b43fb5e4dba235b6ff00225cf46f29b176 Mon Sep 17 00:00:00 2001 From: Hussam Ghazzi Date: Fri, 8 Nov 2024 22:49:02 +0000 Subject: [PATCH 4/6] remove unused imports --- packages/react/src/internal/components/TextInputWrapper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx index 36da1e9360e..32b09a7b3e1 100644 --- a/packages/react/src/internal/components/TextInputWrapper.tsx +++ b/packages/react/src/internal/components/TextInputWrapper.tsx @@ -1,5 +1,5 @@ import styled, {css} from 'styled-components' -import {maxWidth, minWidth, variant, width} from 'styled-system' +import {variant} from 'styled-system' import {get} from '../../constants' import type {SxProp} from '../../sx' import sx from '../../sx' From 7a9493b285fde87595d48d15a619cfb46a27e13c Mon Sep 17 00:00:00 2001 From: Hussam Ghazzi Date: Wed, 13 Nov 2024 17:42:13 +0000 Subject: [PATCH 5/6] Update to deprecate props --- .changeset/clean-ligers-approve.md | 2 +- packages/react/src/TextInput/TextInput.tsx | 16 +++++++++++++++- .../TextInputWithTokens.tsx | 4 ++++ .../internal/components/TextInputWrapper.tsx | 18 +++++++++--------- 4 files changed, 29 insertions(+), 11 deletions(-) diff --git a/.changeset/clean-ligers-approve.md b/.changeset/clean-ligers-approve.md index ee42748b015..dbabb00e1f1 100644 --- a/.changeset/clean-ligers-approve.md +++ b/.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 diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx index acf5a581e4d..e272f04887f 100644 --- a/packages/react/src/TextInput/TextInput.tsx +++ b/packages/react/src/TextInput/TextInput.tsx @@ -41,7 +41,17 @@ export type TextInputNonPassthroughProps = { trailingAction?: React.ReactElement> } & 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, TextInputNonPassthroughProps> @@ -69,6 +79,8 @@ const TextInput = React.forwardRef( 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( sx={sxProp} size={sizeProp} width={widthProp} + minWidth={minWidthProp} + maxWidth={maxWidthProp} variant={variantProp} hasLeadingVisual={Boolean(LeadingVisual || showLeadingLoadingIndicator)} hasTrailingVisual={Boolean(TrailingVisual || showTrailingLoadingIndicator)} diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx index 11a9736a538..c81fb0d9b99 100644 --- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx +++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx @@ -91,6 +91,8 @@ function TextInputWithTokensInnerComponent` 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}; From d7deba02365295bb9eb8279427a3869759a1e0a6 Mon Sep 17 00:00:00 2001 From: Hussam Ghazzi Date: Wed, 13 Nov 2024 20:18:49 +0000 Subject: [PATCH 6/6] Properly mark props as deprecated --- .../src/internal/components/TextInputWrapper.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx index 8be7e438269..146c1c637b3 100644 --- a/packages/react/src/internal/components/TextInputWrapper.tsx +++ b/packages/react/src/internal/components/TextInputWrapper.tsx @@ -1,5 +1,5 @@ import styled, {css} from 'styled-components' -import type {MaxWidthProps, MinWidthProps, WidthProps} from 'styled-system' +import type {ResponsiveValue} from 'styled-system' import {maxWidth, minWidth, variant, width} from 'styled-system' import {get} from '../../constants' import type {SxProp} from '../../sx' @@ -56,10 +56,13 @@ export type StyledBaseWrapperProps = { isInputFocused?: boolean monospace?: boolean validationStatus?: FormValidationStatus -} & /** @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 + /** @deprecated Update `width` using CSS modules or style. */ + width?: string | number | ResponsiveValue + /** @deprecated Update `min-width` using CSS modules or style. */ + minWidth?: string | number | ResponsiveValue + /** @deprecated Update `max-width` using CSS modules or style. */ + maxWidth?: string | number | ResponsiveValue +} & SxProp export type StyledWrapperProps = { hasLeadingVisual?: boolean