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.
-
-
+
+