Remove styled-system usage - TextInputWrapper and related (#6666)

Author: mperrotti

.changeset/gold-dingos-sneeze.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Removes styled-system usage from TextInputWrapper and related components and Storybook stories.

e2e/components/TextInput.test.ts

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

@@ -0,0 +1,10 @@
+.EditableTextInput {
+  min-width: 120px;
+  max-width: 180px;
+  font-size: inherit;
+  border: var(--borderWidth-thin) dashed var(--borderColor-muted);
+}
+
+.EditableTextInput:focus {
+  border: var(--borderWidth-thin) solid var(--borderColor-accent-emphasis);
+}

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

@@ -1,6 +1,7 @@
 import {useState} from 'react'
 import Breadcrumbs from '.'
 import TextInput from '../TextInput'
+import classes from './Breadcrumbs.dev.stories.module.css'
 
 export default {
   title: 'Components/Breadcrumbs/Dev',
@@ -146,15 +147,7 @@ export const WithEditableNameInput = () => (
       <TextInput
         defaultValue="Untitled Document"
         size="small"
-        sx={{
-          minWidth: '120px',
-          maxWidth: '180px',
-          fontSize: 'inherit',
-          border: '1px dashed var(--borderColor-muted)',
-          '&:focus': {
-            border: '1px solid var(--borderColor-accent-emphasis)',
-          },
-        }}
+        className={classes.EditableTextInput}
         aria-label="Edit document name"
       />
     </Breadcrumbs.Item>

packages/react/src/Overlay/Overlay.features.stories.module.css

@@ -58,6 +58,24 @@
   padding: var(--base-size-12);
 }
 
+.TextInputWithMargin {
+  margin-bottom: var(--base-size-8);
+}
+
+.IssueTitleInput {
+  width: 100%;
+  padding: var(--base-size-2) var(--base-size-8);
+  text-align: left;
+  color: var(--fgColor-default);
+}
+
+.IssueTitleInput input {
+  font-weight: var(--base-text-weight-semibold);
+  font-size: var(--text-title-size-medium);
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .IssueEditorContainer {
   padding: var(--base-size-24);
   height: 100vh;

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

@@ -16,6 +16,7 @@ import {
   ActionList,
   ActionMenu,
   useFocusTrap,
+  Textarea,
 } from '..'
 import {Tooltip} from '../TooltipV2'
 import classes from './Overlay.features.stories.module.css'
@@ -386,8 +387,8 @@ export const NestedOverlays = ({role, open}: Args) => {
                 <Text color="fg.muted" sx={{fontSize: 1, mb: 3}}>
                   Create a list to organize your starred repositories.
                 </Text>
-                <TextInput placeholder="Name this list" sx={{mb: 2}} />
-                <TextInput as="textarea" placeholder="Write a description" rows={3} sx={{mb: 2, textarea: {p: 2}}} />
+                <TextInput placeholder="Name this list" className={classes.TextInputWithMargin} />
+                <Textarea placeholder="Write a description" rows={3} className={classes.TextInputWithMargin} />
 
                 <Button variant="primary" onClick={() => setCreateListOverlayOpen(!createListOverlayOpen)}>
                   Create
@@ -481,14 +482,7 @@ export const MemexIssueOverlay = ({role, open}: Args) => {
                   }
                 }}
                 ref={inputRef}
-                sx={{
-                  width: '100%',
-                  py: '2px',
-                  px: '7px',
-                  textAlign: 'left',
-                  color: 'fg.default',
-                  input: {fontWeight: 'bold', fontSize: 4, px: 0},
-                }}
+                className={classes.IssueTitleInput}
               />
             ) : (
               <Button

packages/react/src/SelectPanel/SelectPanel.module.css

@@ -52,6 +52,11 @@
   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);
@@ -230,7 +235,3 @@
   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.TextInput,
+      className: classes.FilterInputWrapper,
       contrast: true,
       leadingVisual: SearchIcon,
       'aria-label': inputLabel,

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

@@ -18,21 +18,3 @@ 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,27 +140,6 @@
       "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",
@@ -228,4 +207,4 @@
       }
     }
   ]
-}
+}