diff --git a/.changeset/rare-otters-deliver.md b/.changeset/rare-otters-deliver.md new file mode 100644 index 00000000000..06187f96a42 --- /dev/null +++ b/.changeset/rare-otters-deliver.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Adjust ConfirmationDialog heading styling diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-colorblind-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-colorblind-linux.png index 4f07fdd21f0..2ce16b95950 100644 Binary files a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-colorblind-linux.png and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-dimmed-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-dimmed-linux.png index 0dd714251b6..660644002eb 100644 Binary files a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-dimmed-linux.png and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-high-contrast-linux.png index 9b83f879f19..752eb94b778 100644 Binary files a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-linux.png index 2aeed9dd30a..4240d5b9a10 100644 Binary files a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-linux.png and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-linux.png differ diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-tritanopia-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-tritanopia-linux.png index 2aeed9dd30a..4240d5b9a10 100644 Binary files a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-colorblind-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-colorblind-linux.png index f5b6e25b789..a605120f364 100644 Binary files a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-colorblind-linux.png and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-dimmed-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-dimmed-linux.png index 27fb2039ac6..60c4195f0a1 100644 Binary files a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-dimmed-linux.png and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-high-contrast-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-high-contrast-linux.png index 9dad7bbe0e9..7ca9c401ad3 100644 Binary files a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-linux.png index eee1463cda1..e3228856d2e 100644 Binary files a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-linux.png and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-linux.png differ diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-tritanopia-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-tritanopia-linux.png index eee1463cda1..e3228856d2e 100644 Binary files a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-colorblind-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-colorblind-linux.png index fba366ef6c2..4166b99af49 100644 Binary files a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-colorblind-linux.png and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-high-contrast-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-high-contrast-linux.png index a3e5deff406..9b63924e9e3 100644 Binary files a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-high-contrast-linux.png and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-linux.png index 8221f3c69f8..e86288853e7 100644 Binary files a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-linux.png and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-linux.png differ diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-tritanopia-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-tritanopia-linux.png index 8221f3c69f8..e86288853e7 100644 Binary files a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-tritanopia-linux.png and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-focus-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-colorblind-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-colorblind-linux.png index 7d1668550b9..1c9fb90deec 100644 Binary files a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-colorblind-linux.png and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-high-contrast-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-high-contrast-linux.png index 8f3ed25d857..d043033ea2b 100644 Binary files a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-high-contrast-linux.png and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-linux.png index c9acf5d9f9b..b8c4d83844a 100644 Binary files a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-linux.png and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-linux.png differ diff --git a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-tritanopia-linux.png b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-tritanopia-linux.png index c9acf5d9f9b..b8c4d83844a 100644 Binary files a/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-tritanopia-linux.png and b/.playwright/snapshots/components/ConfirmationDialog.test.ts-snapshots/ConfirmationDialog-Playground-light-tritanopia-linux.png differ diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.module.css b/packages/react/src/ConfirmationDialog/ConfirmationDialog.module.css index 12fac66ad61..952a6439d2f 100644 --- a/packages/react/src/ConfirmationDialog/ConfirmationDialog.module.css +++ b/packages/react/src/ConfirmationDialog/ConfirmationDialog.module.css @@ -5,11 +5,6 @@ > h1 { 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; } } diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx b/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx index 19152d10254..86c2093a89b 100644 --- a/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx +++ b/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx @@ -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. @@ -89,7 +90,9 @@ const ConfirmationHeader: React.FC> = return (
-

{title}

+ + {title} +
)