Update Overlay.stories.tsx to no longer use styled-components

[Copilot]

This PR removes all usage of styled-components from packages/react/src/Overlay/Overlay.stories.tsx as part of the ongoing migration away from the library.

Changes Made

Removed styled-components usage:

• Removed Box component imports and usage (4 instances)
• Removed all sx prop usage on components (4 instances)
• Created Overlay.stories.module.css to replace inline styles with CSS modules

CSS Module Implementation:

• Added PascalCase class names following project standards
• Implemented responsive design matching original width: ['350px', '500px'] behavior:
  • Default width: 350px
  • At 544px breakpoint: 500px (using correct Primer theme breakpoint)
• Used CSS design tokens (var(--base-size-4)) for consistent spacing
• Maintained exact same visual styling and behavior as the original implementation

Files Modified:

• packages/react/src/Overlay/Overlay.stories.tsx - Migrated from Box components to div elements with CSS classes
• packages/react/src/Overlay/Overlay.stories.module.css - New CSS module containing story-specific styles

Technical Details

The migration preserves all existing functionality while removing dependencies on styled-components:

1. Container elements: Replaced <Box ref={anchorRef}> with <div ref={anchorRef} className={classes.OverlayContainer}>
2. Full-height content: Converted complex sx props to .FullHeightContent CSS class
3. Close button positioning: Migrated absolute positioning from sx to .CloseButtonOverlay class
4. Responsive widths: Replaced responsive array syntax width: ['350px', '500px'] with CSS media queries that correctly implement the mobile-first responsive behavior

All tests pass and Storybook builds successfully with these changes.

Fixes #6493.

---

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

[changeset-bot]

⚠️ No Changeset found

Latest commit: 552cb63

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

[github-actions]

👋 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!

[Copilot]

Pull Request Overview

This PR migrates the Overlay stories from styled-components to CSS modules, removing all Box component usage and sx prop styling as part of the project's ongoing migration away from styled-components.

• Replaced Box components with div elements using CSS module classes
• Created CSS module file with equivalent styling using design tokens and media queries
• Maintained all existing visual styling and behavior while removing styled-components dependencies

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
packages/react/src/Overlay/Overlay.stories.tsx	Replaced Box components and sx props with div elements and CSS module classes
packages/react/src/Overlay/Overlay.stories.module.css	New CSS module containing story-specific styles with design tokens and responsive breakpoints

[github-actions]

size-limit report 📦

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