feat(Flash): remove support for sx

[joshblack]

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

[changeset-bot]

🦋 Changeset detected

Latest commit: b25c42a

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

[Copilot]

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

[Copilot]

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]

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";

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

[github-actions]

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% 🔽)

[siddharthkp]

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

[joshblack]

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

[primer-integration]

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

[primer-integration]

🟢 ci completed with status success.

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!