chore(TextInput): Add dev stories and vrt tests (#5224)

* chore(TextInput): Add dev stories and vrt tests

* update custom class

* test(vrt): update snapshots

---------

Co-authored-by: hussam-i-am <hussam-i-am@users.noreply.github.com>

e2e/components/TextInput.test.ts

@@ -338,4 +338,58 @@ 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, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-textinput-dev--with-css',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`TextInput.Dev.WithCSS.${theme}.png`)
+        })
+      })
+    }
+  })
+
+  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/TextInput/TextInput.dev.stories.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import {Box, FormControl} from '..'
+import TextInput from '.'
+import {textInputExcludedControlKeys} from '../utils/story-helpers'
+import {FeatureFlags} from '../FeatureFlags'
+
+export default {
+  title: 'Components/TextInput/Dev',
+  component: TextInput,
+  parameters: {controls: {exclude: textInputExcludedControlKeys}},
+} as Meta<React.ComponentProps<typeof TextInput>>
+
+export const WithCSS = () => (
+  <FeatureFlags
+    flags={{
+      primer_react_css_modules_team: true,
+      primer_react_css_modules_staff: true,
+      primer_react_css_modules_ga: true,
+    }}
+  >
+    <Box as="form">
+      <FormControl>
+        <FormControl.Label>Default label</FormControl.Label>
+        <TextInput className="testCustomClassnameBorderColor" />
+      </FormControl>
+    </Box>
+  </FeatureFlags>
+)
+
+export const WithSx = () => (
+  <Box as="form">
+    <FormControl>
+      <FormControl.Label>Default label</FormControl.Label>
+      <TextInput sx={{borderColor: 'red'}} />
+    </FormControl>
+  </Box>
+)
+
+export const WithSxAndCSS = () => (
+  <FeatureFlags
+    flags={{
+      primer_react_css_modules_team: true,
+      primer_react_css_modules_staff: true,
+      primer_react_css_modules_ga: true,
+    }}
+  >
+    <Box as="form">
+      <FormControl>
+        <FormControl.Label>Default label</FormControl.Label>
+        <TextInput sx={{borderColor: 'red'}} className="testCustomClassnameBorderColor" />
+      </FormControl>
+    </Box>
+  </FeatureFlags>
+)