Skip to content

Deprecate TextInputWithTokens #6713

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Sep 5, 2025
Merged

Deprecate TextInputWithTokens #6713

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
04a12b4
Initial plan
Copilot Sep 3, 2025
1165a9d
Deprecate TextInputWithTokens component
Copilot Sep 3, 2025
c92ec20
Remove @primer/styled-react from changeset as requested
Copilot Sep 4, 2025
73b1cc8
Revert TextInputWithTokens to main export as requested
Copilot Sep 4, 2025
184bfbf
Add back to `styled-react`
TylerJDev Sep 4, 2025
d2307ca
Fix CI
TylerJDev Sep 4, 2025
c9e6305
Add `@deprecated`
TylerJDev Sep 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/deprecate-textinputwithtokens.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@primer/react': major
'@primer/styled-react': minor
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can re remove this line, as we only want to bump @primer/react, @copilot.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed the @primer/styled-react line from the changeset. Now it only bumps @primer/react as requested. (c92ec20)

---

Deprecate TextInputWithTokens component. The component has been moved to the deprecated entrypoint due to low usage and accessibility implications. Import from `@primer/react/deprecated` instead of `@primer/react`.
14 changes: 7 additions & 7 deletions e2e/components/TextInputWithTokens.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,31 +4,31 @@ import {themes} from '../test-helpers/themes'

const stories = [
{
id: 'components-textinputwithtokens--default',
id: 'deprecated-components-textinputwithtokens--default',
title: 'Default',
},
{
id: 'components-textinputwithtokens-features--with-leading-visual',
id: 'deprecated-components-textinputwithtokens-features--with-leading-visual',
title: 'With Leading Visual',
},
{
id: 'components-textinputwithtokens-features--with-trailing-visual',
id: 'deprecated-components-textinputwithtokens-features--with-trailing-visual',
title: 'With Trailing Visual',
},
{
id: 'components-textinputwithtokens-features--max-height',
id: 'deprecated-components-textinputwithtokens-features--max-height',
title: 'Max Height',
},
{
id: 'components-textinputwithtokens-features--prevent-tokens-from-wrapping',
id: 'deprecated-components-textinputwithtokens-features--prevent-tokens-from-wrapping',
title: 'Prevent Tokens From Wrapping',
},
{
id: 'components-textinputwithtokens-features--size',
id: 'deprecated-components-textinputwithtokens-features--size',
title: 'Size',
},
{
id: 'components-textinputwithtokens-features--truncated',
id: 'deprecated-components-textinputwithtokens-features--truncated',
title: 'Truncated',
},
] as const
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/FormControl/FormControl.features.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@ import {
SelectPanel,
Text,
TextInput,
TextInputWithTokens,
Textarea,
ThemeProvider,
theme,
} from '..'
import {TextInputWithTokens} from '../deprecated'
import {MarkGithubIcon, TriangleDownIcon} from '@primer/octicons-react'
import type {ItemInput} from '../SelectPanel'
import {Stack} from '../Stack'
Expand Down
3 changes: 2 additions & 1 deletion packages/react/src/FormControl/FormControl.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {useState} from 'react'
import type {Meta} from '@storybook/react-vite'
import {Checkbox, FormControl, TextInput, TextInputWithTokens} from '..'
import {Checkbox, FormControl, TextInput} from '..'
import {TextInputWithTokens} from '../deprecated'
import type {FormValidationStatus} from '../utils/types/FormValidationStatus'

export default {
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/TextInputWithTokens/TextInputWithTokens.docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"id": "text_input_with_tokens",
"name": "TextInputWithTokens",
"status": "alpha",
"status": "deprecated",
"a11yReviewed": "2025-01-08",
"stories": [
{
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/TextInputWithTokens/TextInputWithTokens.features.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import classes from './TextInputWithTokens.features.stories.module.css'
const excludedControls = ['tokens', 'onTokenRemove', 'tokenComponent', ...textInputExcludedControlKeys]

export default {
title: 'Components/TextInputWithTokens/Features',
title: 'Deprecated/Components/TextInputWithTokens/Features',
}

const mockTokens = [
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/TextInputWithTokens/TextInputWithTokens.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import classes from './TextInputWithTokens.stories.module.css'
const excludedControls = ['tokens', 'onTokenRemove', 'tokenComponent', ...textInputExcludedControlKeys]

export default {
title: 'Components/TextInputWithTokens',
title: 'Deprecated/Components/TextInputWithTokens',
component: TextInputWithTokens,
parameters: {controls: {exclude: excludedControls}},
} as Meta
Expand Down
5 changes: 5 additions & 0 deletions packages/react/src/deprecated/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,3 +42,8 @@ export type {TabNavProps, TabNavLinkProps} from '../TabNav'
export {default as Tooltip} from '../Tooltip/Tooltip'
export type {TooltipProps} from '../Tooltip/Tooltip'
// end of v37.0.0

// Deprecated in v38.0.0
export {default as TextInputWithTokens} from '../TextInputWithTokens'
export type {TextInputWithTokensProps} from '../TextInputWithTokens'
// end of v38.0.0
3 changes: 1 addition & 2 deletions packages/react/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,8 +153,7 @@ export type {SubNavProps, SubNavLinkProps, SubNavLinksProps} from './SubNav'
export {default as ToggleSwitch} from './ToggleSwitch'
export {default as TextInput} from './TextInput'
export type {TextInputProps} from './TextInput'
export {default as TextInputWithTokens} from './TextInputWithTokens'
export type {TextInputWithTokensProps} from './TextInputWithTokens'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot can we add this back, and remove it from the deprecated entry point (i.e. packages/react/src/deprecated/index.ts)? This will make it easier for the upcoming release. We might need to update the snap tests.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done! I've added TextInputWithTokens back to the main export in packages/react/src/index.ts and removed it from the deprecated export point in packages/react/src/deprecated/index.ts. I also updated the FormControl stories that were importing from the deprecated path to use the main path instead. All tests pass and the build succeeds. (73b1cc8)


export {default as Text} from './Text'
export type {TextProps} from './Text'
export {default as Timeline} from './Timeline'
Expand Down
1 change: 0 additions & 1 deletion packages/styled-react/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ export {
Text,
Textarea,
TextInput,
TextInputWithTokens,
Timeline,
Token,
Tooltip,
Expand Down
Loading