Skip to content

feat(Flash): remove support for sx #6834

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.

Sign up for GitHub

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

Jump to bottom
Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat(Flash): remove support for sx #6834

wants to merge 4 commits into from

Conversation

joshblack
Copy link
Member

Closes https://github.com/github/primer/issues/4824

Changelog

New

Changed

  • Update Flash to support sx in @primer/styled-react
  • Update instances of Octicon in stories

Removed

  • Remove support for sx from Flash

Rollout strategy

  • Major release; if selected, include a written rollout or migration plan

sx usage downstream will pull from @primer/styled-react. We will make sure usage is updated before merging

@Copilot Copilot AI review requested due to automatic review settings September 10, 2025 21:57
@joshblack joshblack requested a review from a team as a code owner September 10, 2025 21:57
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Sep 10, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: 9c1a2b1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@primer/react Major
@primer/styled-react Major

Not sure what this means? Click here to learn what changesets are.

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

@github-actions github-actions bot added the staff Author is a staff member label Sep 10, 2025
Copilot
Copilot AI reviewed Sep 10, 2025
View reviewed changes
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR removes sx prop support from the Flash component in @primer/react and adds a styled version to @primer/styled-react to maintain backward compatibility during migration.

  • Remove sx prop from Flash component and replace with standard CSS styling approaches
  • Migrate Flash component to use CSS modules instead of sx styling system
  • Update Storybook stories to use standard React style prop and CSS classes instead of sx

Reviewed Changes

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

Show a summary per file
File Description
packages/styled-react/src/index.tsx Adds Flash component with sx support to styled-react package for backward compatibility
packages/react/src/Flash/Flash.tsx Removes sx prop and BoxWithFallback dependency, simplifies component to use standard HTML div
packages/react/src/Flash/Flash.stories.module.css Adds CSS class for WithIconActionDismiss story layout
packages/react/src/Flash/Flash.features.stories.tsx Updates stories to use style prop and CSS classes instead of sx, removes Octicon wrapper
packages/react/src/Flash/Flash.features.stories.module.css Adds CSS styling for icon color and WithIconActionDismiss layout
.changeset/metal-deer-refuse.md Documents breaking change for major version release

packages/react/src/Flash/Flash.stories.module.css Outdated
Comment on lines 2 to 10
display: 'grid';
grid-template-columns: 'min-content 1fr minmax(0, auto)';
grid-template-rows: 'min-content';
grid-template-areas: 'visual message actions close';

@media screen and (max-width: 543.98px) {
grid-template-columns: 'min-content 1fr';
grid-template-rows: 'min-content min-content';
grid-template-areas: 'visual message close' '. actions actions';
Copy link
Preview

Copilot AI Sep 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CSS property values should not be wrapped in quotes. Remove the quotes around 'grid', 'min-content 1fr minmax(0, auto)', 'min-content', and 'visual message actions close'.

Suggested change
display: 'grid';
grid-template-columns: 'min-content 1fr minmax(0, auto)';
grid-template-rows: 'min-content';
grid-template-areas: 'visual message actions close';
@media screen and (max-width: 543.98px) {
grid-template-columns: 'min-content 1fr';
grid-template-rows: 'min-content min-content';
grid-template-areas: 'visual message close' '. actions actions';
display: grid;
grid-template-columns: min-content 1fr minmax(0, auto);
grid-template-rows: min-content;
grid-template-areas: "visual message actions close";
@media screen and (max-width: 543.98px) {
grid-template-columns: min-content 1fr;
grid-template-rows: min-content min-content;
grid-template-areas: "visual message close" ". actions actions";

Copilot uses AI. Check for mistakes.

packages/react/src/Flash/Flash.stories.module.css Outdated
Comment on lines 2 to 10
display: 'grid';
grid-template-columns: 'min-content 1fr minmax(0, auto)';
grid-template-rows: 'min-content';
grid-template-areas: 'visual message actions close';

@media screen and (max-width: 543.98px) {
grid-template-columns: 'min-content 1fr';
grid-template-rows: 'min-content min-content';
grid-template-areas: 'visual message close' '. actions actions';
Copy link
Preview

Copilot AI Sep 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CSS property values should not be wrapped in quotes. Remove the quotes around 'min-content 1fr', 'min-content min-content', and 'visual message close' '. actions actions'.

Suggested change
display: 'grid';
grid-template-columns: 'min-content 1fr minmax(0, auto)';
grid-template-rows: 'min-content';
grid-template-areas: 'visual message actions close';
@media screen and (max-width: 543.98px) {
grid-template-columns: 'min-content 1fr';
grid-template-rows: 'min-content min-content';
grid-template-areas: 'visual message close' '. actions actions';
display: grid;
grid-template-columns: min-content 1fr minmax(0, auto);
grid-template-rows: min-content;
grid-template-areas: "visual message actions close";
@media screen and (max-width: 543.98px) {
grid-template-columns: min-content 1fr;
grid-template-rows: min-content min-content;
grid-template-areas: "visual message close" ". actions actions";

Copilot uses AI. Check for mistakes.

@github-actions 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 Sep 10, 2025
@github-actions GitHub Actions
Copy link
Contributor

👋 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 GitHub Actions
Copy link
Contributor

github-actions bot commented Sep 10, 2025 •
edited
Loading

size-limit report 📦

Path Size
packages/react/dist/browser.esm.js 88.6 KB (-0.05% 🔽)
packages/react/dist/browser.umd.js 88.69 KB (-0.04% 🔽)

@github-actions github-actions bot temporarily deployed to storybook-preview-6834 September 10, 2025 22:08 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-6834 September 10, 2025 22:17 Inactive
siddharthkp
siddharthkp approved these changes Sep 15, 2025
View reviewed changes
Copy link
Member

@siddharthkp siddharthkp left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! There's a failing type-check but approved in advance

@github-actions github-actions bot added integration-tests: failing Changes in this PR cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Sep 17, 2025
@joshblack
Copy link
Member Author

Waiting on: https://github.com/github/github-ui/pull/2732 to merge

@primer-integration
Copy link

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/2820

@primer-integration
Copy link

🟢 ci completed with status success.

@github-actions github-actions bot added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: failing Changes in this PR cause breaking changes in gh/gh labels Sep 18, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

Copilot code review Copilot Copilot left review comments

@siddharthkp siddharthkp siddharthkp approved these changes

Assignees
No one assigned
Labels
integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh staff Author is a staff member
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@joshblack @siddharthkp