Dialog: Support custom width values

[liuliu-dev]

Closeshttps://github.com/github/core-ux/issues/2489

Changelog

The Dialog width prop currently only accepts named sizes (small, medium, large, xlarge). This forces consumers who need non-standard widths to use !important CSS overrides .

This PR extends the width prop to also accept any valid CSS width value (string or number).

Before:

// Only named sizes allowed<Dialogwidth="small"className="myDialog"/>// Consumers forced to use !important.myDialog{ width: 400px!important;}

After:

// Custom values now supported<Dialogwidth="400px"/><Dialogwidth="80rem"/>

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github-ui (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: af7ff49

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

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

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]

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

To publish a canary release for integration testing, apply the Canary Release label to this PR.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[Copilot]

Pull request overview

Extends @primer/react’s Dialogwidth prop beyond the existing named sizes so consumers can provide custom CSS width values without relying on !important overrides.

Changes:

• Updated DialogWidth typing and runtime behavior to support custom widths via a --dialog-width CSS custom property.
• Updated Dialog styles to use width: var(--dialog-width, 640px) as the baseline.
• Added tests, Storybook control updates, a new feature story, docs updates, and a minor changeset.

Show a summary per file

File	Description
packages/react/src/Dialog/Dialog.tsx	Expands width typing and sets data-width only for named sizes; injects --dialog-width for custom widths.
packages/react/src/Dialog/Dialog.module.css	Switches default width to a CSS variable with a fallback, enabling custom width injection.
packages/react/src/Dialog/Dialog.test.tsx	Adds coverage for named-size data-width behavior and custom-string width via --dialog-width.
packages/react/src/Dialog/Dialog.stories.tsx	Updates Storybook control for width to text and describes custom width usage.
packages/react/src/Dialog/Dialog.features.stories.tsx	Adds a “CustomWidth” feature story demonstrating a custom width value.
packages/react/src/Dialog/Dialog.docs.json	Updates generated prop docs to reflect custom width support.
.changeset/tall-impalas-wash.md	Declares a minor release for the new Dialog width capability.

Copilot's findings

• Files reviewed: 7/7 changed files
• Comments generated: 3

[primer-integration]

Integration test results from github/github-ui:

CI Passed
VRT Passed
Projects Passed

All checks passed!

[llastflowers]

Nice! ✨

[primer-integration]

⚠️ Hi from github/github-ui! The integration workflow could not find a canary version for the latest commit on this PR.

A successful canary CI run (i.e., a valid canary version published via the release.yml workflow) must exist for the latest commit before integration checks will succeed.

Next steps:

1. Make sure the Canary Release label is applied to the PR — the release.yml workflow requires this label to publish a canary version.
2. Wait for the release.yml canary CI run to complete successfully for the latest commit on this PR.
3. Once a valid canary version exists, re-trigger the integration workflow by visiting the primer-react-pr-test workflow page, clicking Run workflow, and pasting this PR's URL.

For more details, see this workflow run.

[liuliu-dev]

integration tests are passed but PR status not updated, skip manually.