Update SelectPanel.playground.stories.tsx to no longer use styled-components #6525

Copilot · 2025-08-08T10:47:51Z

This PR migrates the SelectPanel.playground.stories.tsx story from using Box with the sx prop to CSS modules, removing the dependency on styled-components for this story.

Changes Made

Removed Box import and usage with sx prop for color indicators
Created SelectPanel.playground.stories.module.css with CSS layer and static styles
Replaced Box component with a div using the CSS module class ColorIndicator
Updated imports to use named import for clsx and added CSS module import
Preserved dynamic backgroundColor as inline style for label-specific colors

Technical Details

The color indicator that was previously implemented as:

<Box
  sx={{width: 14, height: 14, borderRadius: '100%'}}
  style={{backgroundColor: `#${label.color}`}}
/>

Is now implemented as:

<div
  className={clsx(classes.ColorIndicator)}
  style={{backgroundColor: `#${label.color}`}}
/>

With corresponding CSS module:

@layer primer.components.select-panel-playground {
  .ColorIndicator {
    width: 14px;
    height: 14px;
    border-radius: 100%;
  }
}

Visual Verification

The story maintains identical visual appearance and functionality. All color indicators render correctly as circular elements with the appropriate label colors.

Fixes #6523.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

changeset-bot · 2025-08-08T10:47:54Z

⚠️ No Changeset found

Latest commit: 3847f59

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

…ories.tsx Co-authored-by: hectahertz <[email protected]>

github-actions · 2025-08-22T13:16:37Z

👋 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 SelectPanel playground story from styled-components to CSS modules by replacing the Box component with sx prop usage with a standard div element and CSS module styles.

Key Changes:

Replaced Box component with div element for color indicators
Created CSS module file with static styles for the color indicator
Maintained inline styles for dynamic background colors

Reviewed Changes

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

File	Description
SelectPanel.playground.stories.tsx	Removed Box import, added CSS module import and clsx, replaced Box with div using CSS class
SelectPanel.playground.stories.module.css	New CSS module file containing ColorIndicator styles

Copilot · 2025-08-22T13:16:38Z

packages/react/src/experimental/SelectPanel2/SelectPanel.playground.stories.module.css

+  width: 14px;
+  height: 14px;
+  border-radius: 100%;
+}


The CSS module should be wrapped in a CSS layer as mentioned in the PR description. Add @layer primer.components.select-panel-playground wrapper around the styles to follow the project's CSS layering convention.

Copilot · 2025-08-22T13:16:39Z

packages/react/src/experimental/SelectPanel2/SelectPanel.playground.stories.tsx

-                    sx={{width: 14, height: 14, borderRadius: '100%'}}
-                    style={{backgroundColor: `#${label.color}`}}
-                  />
+                  <div className={clsx(classes.ColorIndicator)} style={{backgroundColor: `#${label.color}`}} />


The clsx call is unnecessary here since you're only passing a single class name. You can simplify this to className={classes.ColorIndicator}.

Suggested change

<div className={clsx(classes.ColorIndicator)} style={{backgroundColor: `#${label.color}`}} />

<div className={classes.ColorIndicator} style={{backgroundColor: `#${label.color}`}} />

github-actions · 2025-08-22T13:20:25Z

size-limit report 📦

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

llastflowers · 2025-08-22T16:41:03Z

...ts/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-forced-colors-dark-linux.png

Looks like this needs to be reverted since we don't want to add the snapshot with the cursor

llastflowers · 2025-08-22T16:43:01Z

packages/react/src/experimental/SelectPanel2/SelectPanel.playground.stories.tsx

-                    sx={{width: 14, height: 14, borderRadius: '100%'}}
-                    style={{backgroundColor: `#${label.color}`}}
-                  />
+                  <div className={clsx(classes.ColorIndicator)} style={{backgroundColor: `#${label.color}`}} />


Agree that we don't need clsx here, and so we can probably remove the import as well

llastflowers · 2025-08-22T16:50:21Z

packages/react/src/experimental/SelectPanel2/SelectPanel.playground.stories.module.css

+.ColorIndicator {
+  width: 14px;
+  height: 14px;
+  border-radius: 100%;


I think we can use var(--borderRadius-full) here for consistency with other files, but maybe not a strictly necessary change

Initial plan

bca82a4

Copilot AI assigned Copilot and hectahertz Aug 8, 2025

Copilot started work on behalf of hectahertz August 8, 2025 10:47 View session

Replace Box with sx prop with CSS module in SelectPanel.playground.st…

fb3118e

…ories.tsx Co-authored-by: hectahertz <[email protected]>

Copilot AI changed the title ~~[WIP] Update SelectPanel.playground.stories.tsx to no longer use styled-components~~ Update SelectPanel.playground.stories.tsx to no longer use styled-components Aug 8, 2025

Copilot AI requested a review from hectahertz August 8, 2025 11:05

Copilot finished work on behalf of hectahertz August 8, 2025 11:06

hectahertz added skip changeset This change does not need a changelog update snapshots 🤖 Command that updates VRT snapshots on the pull request labels Aug 22, 2025

Cleanup

7070992

hectahertz marked this pull request as ready for review August 22, 2025 13:16

Copilot AI review requested due to automatic review settings August 22, 2025 13:16

hectahertz requested a review from a team as a code owner August 22, 2025 13:16

Merge branch 'main' into copilot/fix-6523

60f197a

hectahertz enabled auto-merge August 22, 2025 13:16

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 Aug 22, 2025

Copilot AI reviewed Aug 22, 2025

View reviewed changes

github-actions bot requested a deployment to storybook-preview-6525 August 22, 2025 13:19 Abandoned

test(vrt): update snapshots

3847f59

primer bot requested a review from a team as a code owner August 22, 2025 13:24

primer bot requested a review from langermank August 22, 2025 13:25

github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Aug 22, 2025

github-actions bot temporarily deployed to storybook-preview-6525 August 22, 2025 13:30 Inactive

primer bot deployed to github-pages August 22, 2025 13:39 View deployment

github-actions bot deployed to storybook-preview-6525 August 22, 2025 13:39 View deployment

hectahertz requested a review from llastflowers August 22, 2025 13:58

llastflowers reviewed Aug 22, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Update SelectPanel.playground.stories.tsx to no longer use styled-components #6525

Update SelectPanel.playground.stories.tsx to no longer use styled-components #6525

Uh oh!

Copilot AI commented Aug 8, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Aug 8, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Aug 22, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Aug 22, 2025

Uh oh!

Copilot AI Aug 22, 2025

Uh oh!

github-actions bot commented Aug 22, 2025 •

edited

Loading

Uh oh!

llastflowers Aug 22, 2025

Uh oh!

llastflowers Aug 22, 2025

Uh oh!

llastflowers Aug 22, 2025

Uh oh!

Uh oh!

	<div className={clsx(classes.ColorIndicator)} style={{backgroundColor: `#${label.color}`}} />
	<div className={classes.ColorIndicator} style={{backgroundColor: `#${label.color}`}} />

Update SelectPanel.playground.stories.tsx to no longer use styled-components #6525

Are you sure you want to change the base?

Update SelectPanel.playground.stories.tsx to no longer use styled-components #6525

Uh oh!

Conversation

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

Uh oh!

Changes Made

Technical Details

Visual Verification

Uh oh!

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

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions bot commented Aug 22, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Key Changes:

Reviewed Changes

Uh oh!

Copilot AI Aug 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 22, 2025

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

size-limit report 📦

Uh oh!

llastflowers Aug 22, 2025

Choose a reason for hiding this comment

Uh oh!

llastflowers Aug 22, 2025

Choose a reason for hiding this comment

Uh oh!

llastflowers Aug 22, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI commented Aug 8, 2025 •

edited

Loading

changeset-bot bot commented Aug 8, 2025 •

edited

Loading

github-actions bot commented Aug 22, 2025 •

edited

Loading