Deprecate TextInputWithTokens

.changeset/deprecate-textinputwithtokens.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+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`.

e2e/components/TextInputWithTokens.test.ts

@@ -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

packages/react/src/TextInputWithTokens/TextInputWithTokens.docs.json

@@ -1,38 +1,38 @@
 {
   "id": "text_input_with_tokens",
   "name": "TextInputWithTokens",
-  "status": "alpha",
+  "status": "deprecated",
   "a11yReviewed": "2025-01-08",
   "stories": [
     {
-      "id": "components-textinputwithtokens--default"
+      "id": "deprecated-components-textinputwithtokens--default"
     },
     {
-      "id": "components-textinputwithtokens-features--with-leading-visual"
+      "id": "deprecated-components-textinputwithtokens-features--with-leading-visual"
     },
     {
-      "id": "components-textinputwithtokens-features--with-trailing-visual"
+      "id": "deprecated-components-textinputwithtokens-features--with-trailing-visual"
     },
     {
-      "id": "components-textinputwithtokens-features--with-loading-indicator"
+      "id": "deprecated-components-textinputwithtokens-features--with-loading-indicator"
     },
     {
-      "id": "components-textinputwithtokens-features--using-issue-label-tokens"
+      "id": "deprecated-components-textinputwithtokens-features--using-issue-label-tokens"
     },
     {
-      "id": "components-textinputwithtokens-features--unstyled"
+      "id": "deprecated-components-textinputwithtokens-features--unstyled"
     },
     {
-      "id": "components-textinputwithtokens-features--prevent-tokens-from-wrapping"
+      "id": "deprecated-components-textinputwithtokens-features--prevent-tokens-from-wrapping"
     },
     {
-      "id": "components-textinputwithtokens-features--max-height"
+      "id": "deprecated-components-textinputwithtokens-features--max-height"
     },
     {
-      "id": "components-textinputwithtokens-features--size"
+      "id": "deprecated-components-textinputwithtokens-features--size"
     },
     {
-      "id": "components-textinputwithtokens-features--truncated"
+      "id": "deprecated-components-textinputwithtokens-features--truncated"
     }
   ],
   "importPath": "@primer/react",

packages/react/src/TextInputWithTokens/TextInputWithTokens.features.stories.tsx

@@ -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 = [

packages/react/src/TextInputWithTokens/TextInputWithTokens.stories.tsx

@@ -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

packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx

@@ -23,6 +23,9 @@ type AnyReactComponent = React.ComponentType<React.PropsWithChildren<any>>
 
 // NOTE: if these props or their JSDoc comments are updated, be sure to also update
 // the prop table in docs/content/TextInputTokens.mdx
+/**
+ * @deprecated
+ */
 export type TextInputWithTokensProps<TokenComponentType extends AnyReactComponent = typeof Token> = {
   /**
    * The array of tokens to render
@@ -336,4 +339,7 @@ const TextInputWithTokens = React.forwardRef(TextInputWithTokensInnerComponent)
 
 TextInputWithTokens.displayName = 'TextInputWithTokens'
 
+/**
+ * @deprecated
+ */
 export default TextInputWithTokens