Bugfix: Honor sx on draft Dialog.Header

[pablonete]

sx was supported but it wasn't applied on top of standard Header styles.

<Dialog.Header sx={{borderBottomWidth: 0}}>

This does nothing because sx is listed on the props but it's ignored on the component. It's the only component missing it (see Title, Subtitle, Body, and Footer).

Our use case is dropping the section borders in the dialog for a design where the dialog content has its own border, so we don't want separators on Header or Footer.
Based on this, I'm also leaving the feedback that removing section borders requires repeating the header/footer template, which is risky (we had to duplicate even the focusZone in the Footer) as it will get out of sync of future improvements in the dialog. Quickly thinking, I'd suggest something like headerSx or footerSx in the Dialog to prevent this duplication: we're using renderHeader only to modify the style, not to fully replace the template. Any feedback here is welcome.

Changelog

No API changes.

New

Changed

Removed

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

When using renderHeader, we couldn't use Dialog.Header to change the style, so we had to use a Box and copy & change the styles from the Dialog.Header definition.

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: 4b9648a

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	Patch

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]

size-limit report 📦

Path	Size
dist/browser.esm.js	113.23 KB (-0.01% 🔽)
dist/browser.umd.js	113.88 KB (-0.01% 🔽)

[broccolinisoup]

Hello @pablonete 👋🏻 Thanks so much for raising this PR. It looks good to me! 👍🏻

We appreciate the feedback as well. I'll share it with the team, it is a super reasonable point 🙏🏻

[siddharthkp]

@pablonete That's very good feedback, thanks! renderHeader is not a great API because it recommends ejecting out of future updates :(

re: headerSx, there is another way to do that already which might work for you. You can target the header from an sx on the Dialog like this:

<Dialog 
  sx={{
    [Dialog.Header]: {boxShadow: 'none'},
}}/>