diff --git a/.changeset/gold-dingos-sneeze.md b/.changeset/gold-dingos-sneeze.md new file mode 100644 index 00000000000..a2aa897240c --- /dev/null +++ b/.changeset/gold-dingos-sneeze.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Removes styled-system usage from TextInputWrapper and related components and Storybook stories. diff --git a/e2e/components/TextInput.test.ts b/e2e/components/TextInput.test.ts index fceb98ca879..114854866b2 100644 --- a/e2e/components/TextInput.test.ts +++ b/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`) - }) - }) - } - }) }) diff --git a/packages/react/src/Overlay/Overlay.features.stories.module.css b/packages/react/src/Overlay/Overlay.features.stories.module.css new file mode 100644 index 00000000000..3e57053e674 --- /dev/null +++ b/packages/react/src/Overlay/Overlay.features.stories.module.css @@ -0,0 +1,12 @@ +.MemexOverlayIssueTitleInput { + padding-block: var(--base-size-2); + padding-inline: var(--base-size-8); + text-align: left; + color: var(--fgColor-default); +} + +.MemexOverlayIssueTitleInput input { + font-weight: var(--base-text-weight-semibold); + font-size: var(--text-title-size-medium); + padding-inline: 0; +} diff --git a/packages/react/src/Overlay/Overlay.features.stories.tsx b/packages/react/src/Overlay/Overlay.features.stories.tsx index d28150add28..2ef19a17af0 100644 --- a/packages/react/src/Overlay/Overlay.features.stories.tsx +++ b/packages/react/src/Overlay/Overlay.features.stories.tsx @@ -17,8 +17,11 @@ import { ActionList, ActionMenu, useFocusTrap, + Stack, + Textarea, } from '..' import {Tooltip} from '../TooltipV2' +import classes from './Overlay.features.stories.module.css' export default { title: 'Private/Components/Overlay/Features', @@ -387,17 +390,17 @@ export const NestedOverlays = ({role, open}: Args) => { aria-label={role === 'dialog' ? 'Create a list' : undefined} ref={secondaryContainer} > - - + + Create a list to organize your starred repositories. - - + +