Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

Copilot
Copy link
Contributor

@Copilot Copilot AI commented Aug 8, 2025

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.

Screenshot showing SelectPanel with color indicators

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.

Copy link

changeset-bot bot commented Aug 8, 2025

⚠️ No Changeset found

Latest commit: fb3118e

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

@Copilot 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 Copilot AI requested a review from hectahertz August 8, 2025 11:05
Copilot finished work on behalf of hectahertz August 8, 2025 11:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Update SelectPanel.playground.stories.tsx to no longer use styled-components
2 participants