chore(Dialog): allow direct children

[francinelucca]

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

The Dialog component is coded to render its own Default subcomponents if render* functions aren't provided. Because the Dialog is not looking at its children to determine wether Dialog.Body, Dialog.Header, Dialog.Footer are present, it can 'cause a Dialog.Body to be wrapped inside the DefaultDialogBody, causing duplication of classes/padding. This PR adds useSlots to prefer rendering direct children over default wrappers.

Changelog

New

• Adds _SLOT_ symbols to Dialog and subcomponents in @primer/react and @primer/styled-react
• Adds Dialog story using direct children

Changed

• use slots in Dialog to detect direct children and avoid double wrappers

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 (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 47e492e

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	Patch
@primer/styled-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]

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

[francinelucca]

I'm not in love with the idea of adding more slots to the codebase so open to suggestions here...

[Copilot]

Pull Request Overview

This PR fixes a bug in the Dialog component where direct children (Dialog.Header, Dialog.Body, Dialog.Footer) would be wrapped inside default wrappers, causing duplicate classes and padding. The solution implements a slot-based system using useSlots to detect and prefer direct children over default renderers.

Key Changes:

• Introduces __SLOT__ symbols to Dialog and its subcomponents for identification
• Implements useSlots hook to detect direct children and prioritize them over default wrappers
• Adds a new Storybook story demonstrating direct children usage

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/react/src/Dialog/Dialog.tsx	Implements slot detection logic and adds slot symbols to Dialog components
packages/styled-react/src/components/Dialog.tsx	Propagates slot symbols from primer/react to styled-react wrapper components
packages/react/src/Dialog/Dialog.features.stories.tsx	Adds story demonstrating direct subcomponent usage
e2e/components/Dialog.test.ts	Adds e2e test coverage for the new direct subcomponents story
.changeset/loud-trainers-drop.md	Documents the change as a patch release

[primer-integration]

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

[langermank]

🚀

[hectahertz]

🚀

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

[primer-integration]

🟢 ci completed with status success.