Skip to content

Adjust ConfirmationDialog heading styling #6954

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Oct 6, 2025
Merged

Adjust ConfirmationDialog heading styling #6954

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a82d6b1
adjust sizing
langermank Oct 6, 2025
da9788b
Create rare-otters-deliver.md
langermank Oct 6, 2025
e4a0426
test(vrt): update snapshots
langermank Oct 6, 2025
68cf909
fix
langermank Oct 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/rare-otters-deliver.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": patch
---

Adjust ConfirmationDialog heading styling
Binary file modified ...ialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-colorblind-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ionDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-dimmed-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...og.test.ts-snapshots/ConfirmationDialog-Playground-dark-high-contrast-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...nfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-tritanopia-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-colorblind-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...log.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-dimmed-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...t.ts-snapshots/ConfirmationDialog-Playground-focus-dark-high-contrast-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...tionDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-tritanopia-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...est.ts-snapshots/ConfirmationDialog-Playground-focus-light-colorblind-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ....ts-snapshots/ConfirmationDialog-Playground-focus-light-high-contrast-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ionDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...est.ts-snapshots/ConfirmationDialog-Playground-focus-light-tritanopia-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...alog.test.ts-snapshots/ConfirmationDialog-Playground-light-colorblind-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...g.test.ts-snapshots/ConfirmationDialog-Playground-light-high-contrast-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...firmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...alog.test.ts-snapshots/ConfirmationDialog-Playground-light-tritanopia-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 0 additions & 5 deletions packages/react/src/ConfirmationDialog/ConfirmationDialog.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,6 @@

> h1 {
Copy link
Preview

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The CSS selector > h1 may not match the new Heading component structure. Consider updating the selector to target the actual rendered element or use a more generic approach to ensure the padding and flex-grow styles are properly applied.

Suggested change
> h1 {
> * {

Copilot uses AI. Check for mistakes.

padding: var(--base-size-6) var(--base-size-8);

/* override default margin */
margin: 0;
font-size: var(--text-title-size-medium);
font-weight: var(--text-title-weight-medium);
flex-grow: 1;
}
}
Expand Down
5 changes: 4 additions & 1 deletion packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {Dialog} from '../Dialog/Dialog'
import {useFocusZone} from '../hooks/useFocusZone'
import BaseStyles from '../BaseStyles'
import classes from './ConfirmationDialog.module.css'
import Heading from '../Heading'

/**
* Props to customize the ConfirmationDialog.
Expand Down Expand Up @@ -89,7 +90,9 @@ const ConfirmationHeader: React.FC<React.PropsWithChildren<DialogHeaderProps>> =

return (
<div className={classes.ConfirmationHeader}>
<h1 id={dialogLabelId}>{title}</h1>
<Heading id={dialogLabelId} as="h1" variant="small">
{title}
</Heading>
<Dialog.CloseButton onClose={onCloseClick} />
</div>
)
Expand Down
Loading