feat: add createStyledComponent helper to styled-react package

[joshblack]

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

Add a utility function, createStyledComponent, that helps to create variants of components that work with Box-style props (as, sx, styled-system props, etc). This is

Changelog

New

• Add createStyledComponent utility to @primer/styled-react to create Box-compatible components during migration

Changed

• Add support for browser tests to styled-react

Removed

[changeset-bot]

⚠️ No Changeset found

Latest commit: 6cefe22

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]

Pull Request Overview

This PR adds a new createStyledComponent utility function to the @primer/styled-react package that enables creating Box-compatible styled component variants during migration from components that no longer support sx or styled-system props.

• Adds createStyledComponent utility function with full styled-system and sx prop support
• Introduces browser test configuration to support DOM-based testing for the styled-react package
• Sets up comprehensive test coverage for the new utility function

Reviewed Changes

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

Show a summary per file

File	Description
packages/styled-react/src/utils/createStyledComponent.ts	Main utility function implementation with styled-system integration
packages/styled-react/src/utils/tests/createStyledComponent.browser.test.tsx	Browser tests for sx prop, as prop, and component prop support
packages/styled-react/vitest.config.browser.ts	New browser test configuration with Playwright setup
packages/styled-react/vitest.config.ts	Updated to exclude browser tests from node environment
packages/styled-react/config/vitest/browser/setup.ts	Test setup file for browser environment
packages/styled-react/package.json	Added @vitejs/plugin-react dependency for browser tests
packages/styled-react/tsconfig.json	Updated to include vitest config directory

[Copilot]

The comment contains an escaped forward slash that makes the example code invalid. Remove the backslash to show the correct usage: /*#__PURE__*/

[Copilot]

[nitpick] The conditional can be simplified to headless: process.env.DEBUG_BROWSER_TESTS !== 'true' for better readability.

Suggested change

	headless: process.env.DEBUG_BROWSER_TESTS === 'true' ? false : true,
	headless: process.env.DEBUG_BROWSER_TESTS !== 'true',

[github-actions]

size-limit report 📦

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