Cleanup styled-components in *.stories.tsx files and convert to CSS modules #6197

Copilot · 2025-06-11T19:28:59Z

This PR removes all styled-components imports from story files and converts them to use CSS modules, following the established pattern in the codebase as outlined in ADR-016.

Changes Made

Files Updated

8 story files migrated from styled-components to CSS modules
7 new CSS module files created following established patterns

Specific Conversions

ActionList/ActionMenu Stories:

Replaced ErsatzOverlay styled div with CSS module class
Replaced StyledDiv components that used sx prop with Box component + CSS classes

LabelGroup Stories:

Replaced ResizableContainer styled div with CSS module class

Hook Stories (useFocusZone, useFocusTrap, useAnchoredPosition, ThemeProvider):

Replaced MarginButton styled Button components with CSS module classes
Converted createGlobalStyle usage to inline <style> components for demo purposes
Replaced complex styled components (Float, Anchor, Nav, Main) with CSS module classes

CSS Module Pattern

All new CSS modules follow the established conventions:

Use @layer primer.stories.<story-name> for proper CSS layering
Utilize CSS custom properties for theming (e.g., var(--bgColor-default))
Maintain original styling behavior while eliminating runtime style generation

Benefits

Performance improvement: No runtime CSS-in-JS generation for story components
Consistency: Aligns with the migration strategy outlined in ADR-016
Maintainability: Explicit CSS dependencies and standard CSS authoring

Verification

✅ All linting passes
✅ Build completes successfully
✅ Storybook starts without errors
✅ No styled-components imports remain in any *.stories.tsx files

Fixes #6196.

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

changeset-bot · 2025-06-11T19:29:03Z

⚠️ No Changeset found

Latest commit: 6f34a4b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

… and LabelGroup stories Co-authored-by: jonrohan <54012+jonrohan@users.noreply.github.com>

Co-authored-by: jonrohan <54012+jonrohan@users.noreply.github.com>

jonrohan · 2025-06-11T19:57:53Z

packages/react/src/LabelGroup/LabelGroupStories.module.css

@@ -0,0 +1,9 @@
+@layer primer.stories.label-group {


Remove the CSS layers from these changes

Removed CSS layers from all story CSS module files (5412c12)

jonrohan · 2025-06-11T19:59:11Z

packages/react/src/stories/deprecated/ActionList.stories.tsx

@@ -172,9 +172,9 @@ export function ComplexListInsetVariantStory(): JSX.Element {
                <ActionList.Item
                  {...props}
                  leadingVisual={() => (
-                    <StyledDiv sx={{'&>svg': {fill: 'white'}}}>
+                    <Box className={classes.StyledDivWithWhiteFill}>


Anytime we have a Box component without any sx prop or as prop, use a div instead

Replaced Box components without sx/as props with div elements and removed unused Box import (5412c12)

- Removed @layer declarations from all story CSS module files - Replaced Box components without sx/as props with div elements in ActionList.stories.tsx - Removed unused Box import from ActionList.stories.tsx Co-authored-by: jonrohan <54012+jonrohan@users.noreply.github.com>

github-actions · 2025-06-11T20:14:43Z

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

github-actions · 2025-06-11T20:18:13Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	92.28 KB (0%)
packages/react/dist/browser.umd.js	92.39 KB (0%)

francinelucca · 2025-06-13T23:25:24Z

packages/react/src/stories/deprecated/ActionList.stories.tsx

-`
+const ErsatzOverlay = ({maxWidth, children, ...props}: {maxWidth?: string; children: React.ReactNode}) => (
+  <div
+    className={clsx(classes.ErsatzOverlay, maxWidth && classes.ErsatzOverlay)}


this doesn't look right

Fixed the duplicate className issue - removed the incorrect conditional duplicate class assignment (420f132)

francinelucca · 2025-06-13T23:26:35Z

packages/react/src/stories/deprecated/ActionMenuStories.module.css

+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.12),
+    0 8px 24px rgba(149, 157, 165, 0.2);
+  overflow: hidden;


I don't see this one in the original

Suggested change

overflow: hidden;

Removed the incorrect overflow: hidden property that wasn't in the original ActionMenu styled component (420f132)

francinelucca · 2025-06-13T23:34:44Z

packages/react/src/stories/FocusTrapStories.module.css

+/* Helper styles for focus trap visual aids */
+.HelperGlobalStyling {
+  /* These styles need to be applied globally for the demo */
+}


Suggested change

/* Helper styles for focus trap visual aids */

.HelperGlobalStyling {

/* These styles need to be applied globally for the demo */

}

/* Helper styles for focus trap visual aids */

Applied the suggested comment simplification (420f132)

jonrohan · 2025-06-16T18:22:53Z

@copilot can you revert the commit f05f7d9

Co-authored-by: jonrohan <54012+jonrohan@users.noreply.github.com>

Copilot · 2025-06-16T18:30:52Z

@copilot can you revert the commit f05f7d9

Reverted commit f05f7d9 - restored the conditional CSS custom property setting where the style prop is only set when maxWidth exists (ccdd42d)

joshblack

LGTM! Just had a question around one migration

joshblack · 2025-06-16T20:50:12Z

packages/react/src/stories/ThemeProvider.stories.tsx

-        background-color: ${themeGet('colors.bg.canvas')};
-    }
-`
+const GlobalStyle = () => (


This migration seems a little odd 🤔 Would this be a :global in the corresponding CSS Modules file?

You're absolutely right! I've converted the inline <style> component to a proper CSS Modules file using :global(body) syntax. This is the correct approach for targeting global elements like body when using CSS Modules. (901eb8b)

Co-authored-by: joshblack <3901764+joshblack@users.noreply.github.com>

francinelucca · 2025-06-17T13:32:00Z

@copilot run 'npm format' and commit the result

Co-authored-by: francinelucca <40550942+francinelucca@users.noreply.github.com>

Copilot · 2025-06-17T13:36:45Z

@copilot run 'npm format' and commit the result

Ran npm format and committed the formatting fix (6f34a4b)

Initial plan for issue

38833a7

Copilot AI assigned Copilot and jonrohan Jun 11, 2025

Copilot started work on behalf of jonrohan June 11, 2025 19:29 View session

Copilot AI and others added 2 commits June 11, 2025 19:45

Replace styled-components with CSS modules in ActionList, ActionMenu,…

9097ef3

… and LabelGroup stories Co-authored-by: jonrohan <54012+jonrohan@users.noreply.github.com>

Complete styled-components cleanup in all remaining story files

8332b24

Co-authored-by: jonrohan <54012+jonrohan@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Cleanup styled-components in *.stories.tsx files~~ Cleanup styled-components in *.stories.tsx files and convert to CSS modules Jun 11, 2025

Copilot AI requested a review from jonrohan June 11, 2025 19:56

Copilot finished work on behalf of jonrohan June 11, 2025 19:56

jonrohan reviewed Jun 11, 2025

View reviewed changes

Copilot started work on behalf of jonrohan June 11, 2025 20:01 View session

Copilot finished work on behalf of jonrohan June 11, 2025 20:14

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Jun 11, 2025

Copilot AI deployed to github-pages June 11, 2025 20:27 View deployment

github-actions bot temporarily deployed to storybook-preview-6197 June 11, 2025 20:28 Inactive

Refactor CSS styles for consistency and clarity across components

87a0c94

jonrohan added the skip changeset This change does not need a changelog label Jun 11, 2025

jonrohan marked this pull request as ready for review June 11, 2025 22:11

jonrohan requested a review from a team as a code owner June 11, 2025 22:11

jonrohan self-requested a review June 11, 2025 22:11

jonrohan deployed to github-pages June 11, 2025 22:15 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6197 June 11, 2025 22:15 Inactive

jonrohan approved these changes Jun 11, 2025

View reviewed changes

jonrohan requested a review from francinelucca June 11, 2025 22:18

jonrohan enabled auto-merge June 11, 2025 22:19

francinelucca requested changes Jun 13, 2025

View reviewed changes

Copilot finished work on behalf of jonrohan June 16, 2025 18:22

Copilot started work on behalf of jonrohan June 16, 2025 18:22 View session

Revert commit f05f7d9 - restore conditional CSS custom property setting

ccdd42d

Co-authored-by: jonrohan <54012+jonrohan@users.noreply.github.com>

Copilot finished work on behalf of jonrohan June 16, 2025 18:31

jonrohan requested a review from francinelucca June 16, 2025 18:31

jonrohan enabled auto-merge June 16, 2025 18:40

Copilot AI deployed to github-pages June 16, 2025 18:54 View deployment

github-actions bot temporarily deployed to storybook-preview-6197 June 16, 2025 18:55 Inactive

joshblack approved these changes Jun 16, 2025

View reviewed changes

Copilot started work on behalf of joshblack June 16, 2025 20:50 View session

Convert ThemeProvider inline style to CSS modules with :global syntax

901eb8b

Co-authored-by: joshblack <3901764+joshblack@users.noreply.github.com>

auto-merge was automatically disabled June 16, 2025 21:03
Head branch was pushed to by a user without write access

Copilot finished work on behalf of joshblack June 16, 2025 21:04

Copilot AI deployed to github-pages June 16, 2025 22:59 View deployment

github-actions bot temporarily deployed to storybook-preview-6197 June 16, 2025 22:59 Inactive

Copilot started work on behalf of francinelucca June 17, 2025 13:32 View session

Run npm format to fix formatting issues

6f34a4b

Co-authored-by: francinelucca <40550942+francinelucca@users.noreply.github.com>

Copilot finished work on behalf of francinelucca June 17, 2025 13:37

francinelucca approved these changes Jun 17, 2025

View reviewed changes

francinelucca enabled auto-merge June 17, 2025 14:01

francinelucca added this pull request to the merge queue Jun 17, 2025

Copilot AI deployed to github-pages June 17, 2025 14:04 View deployment

github-actions bot deployed to storybook-preview-6197 June 17, 2025 14:04 View deployment

Merged via the queue into main with commit c9a11eb Jun 17, 2025
35 checks passed

francinelucca deleted the copilot/fix-6196 branch June 17, 2025 14:15

Cleanup styled-components in *.stories.tsx files and convert to CSS modules #6197

Cleanup styled-components in *.stories.tsx files and convert to CSS modules #6197

Uh oh!

Conversation

Copilot AI commented Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes Made

Files Updated

Specific Conversions

CSS Module Pattern

Benefits

Verification

Uh oh!

changeset-bot bot commented Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

jonrohan Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

jonrohan Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jun 11, 2025

Uh oh!

github-actions bot commented Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

francinelucca Jun 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jun 13, 2025

Choose a reason for hiding this comment

Uh oh!

francinelucca Jun 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jun 13, 2025

Choose a reason for hiding this comment

Uh oh!

francinelucca Jun 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jun 13, 2025

Choose a reason for hiding this comment

Uh oh!

jonrohan commented Jun 16, 2025

Uh oh!

Copilot AI commented Jun 16, 2025

Uh oh!

joshblack left a comment

Choose a reason for hiding this comment

Uh oh!

joshblack Jun 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jun 16, 2025

Choose a reason for hiding this comment

Uh oh!

francinelucca commented Jun 17, 2025

Uh oh!

Copilot AI commented Jun 17, 2025

Uh oh!

Uh oh!

Uh oh!

Copilot AI commented Jun 11, 2025 •

edited

Loading

changeset-bot bot commented Jun 11, 2025 •

edited

Loading

github-actions bot commented Jun 11, 2025 •

edited

Loading