diff --git a/.changeset/fancy-rats-laugh.md b/.changeset/fancy-rats-laugh.md new file mode 100644 index 00000000000..b62fec35d49 --- /dev/null +++ b/.changeset/fancy-rats-laugh.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Remove sx prop support from the TextInput component. 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 index cbc6d20555c..8f3d7e203b2 100644 --- a/packages/react/src/Overlay/Overlay.features.stories.module.css +++ b/packages/react/src/Overlay/Overlay.features.stories.module.css @@ -118,3 +118,26 @@ right: var(--base-size-4); top: var(--base-size-4); } + +.FormInput { + margin-bottom: var(--base-size-8); +} + +.FormTextarea { + margin-bottom: var(--base-size-8); +} + +.FormTextarea textarea { + padding: var(--base-size-8); +} + +.EditableTitle { + width: 100%; + padding-top: var(--base-size-4); + padding-bottom: var(--base-size-4); + padding-left: var(--base-size-2); + padding-right: var(--base-size-2); + text-align: left; + font-weight: var(--base-text-weight-semibold); + font-size: var(--text-title-size-large); +} diff --git a/packages/react/src/Overlay/Overlay.features.stories.tsx b/packages/react/src/Overlay/Overlay.features.stories.tsx index a7d2bb11a09..10d82f2d4d3 100644 --- a/packages/react/src/Overlay/Overlay.features.stories.tsx +++ b/packages/react/src/Overlay/Overlay.features.stories.tsx @@ -386,8 +386,8 @@ export const NestedOverlays = ({role, open}: Args) => { Create a list to organize your starred repositories. - - + +