diff --git a/.changeset/eight-pillows-pump.md b/.changeset/eight-pillows-pump.md
new file mode 100644
index 00000000000..e5051aa0c94
--- /dev/null
+++ b/.changeset/eight-pillows-pump.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Replaces deprecated `Button` component in `Dialog` with newest version
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-colorblind-linux.png
index 4ade13d1164..391e8ddda0e 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-dimmed-linux.png
index 9145e1d4d00..fcc5a9376f2 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-dimmed-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-high-contrast-linux.png
index 8da4b5d1a10..be4b5d69bee 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-linux.png
index 0a21cb90295..783b1daaa88 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-tritanopia-linux.png
index d38cfd9ec4a..0fe3894fb61 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-colorblind-linux.png
index 8a91df84971..4a350f021be 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-high-contrast-linux.png
index 9944f0684e6..04bf671a934 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-linux.png
index dcd8a43c24c..9cece02c62e 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-tritanopia-linux.png
index 01863d37c89..c3510b18660 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-colorblind-linux.png
index df5c8ca4157..304040711a8 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-dimmed-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-dimmed-linux.png
index d80273a6153..f72ac7b90bb 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-dimmed-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-high-contrast-linux.png
index fd1c0eb1171..f748f336d71 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-linux.png
index 49d7d9d048e..95832458825 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-tritanopia-linux.png
index a94fd6f73ee..e345db8a985 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-colorblind-linux.png
index 99b276f4e6a..9451f77c8b8 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-high-contrast-linux.png
index 51e087edc6d..d76e58cc8e8 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-linux.png
index 22f2387bc05..260a68b1361 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-tritanopia-linux.png
index c9b7b4dc628..c09b6919eda 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-colorblind-linux.png
index 788b8879f86..ca50e1e1c1a 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-dimmed-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-dimmed-linux.png
index 44e4755718a..f2a27d6486a 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-dimmed-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-high-contrast-linux.png
index 6572a74c19a..f8d6c5a27cc 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-linux.png
index bd38664f3ca..d1134be3719 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-tritanopia-linux.png
index 3440426eec0..d90d3360b40 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-colorblind-linux.png
index 94168902683..76f93cb515f 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-high-contrast-linux.png
index 380af28d9dc..e9dba1a061b 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-linux.png
index f7cb338eb12..f2a7e6f4563 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-tritanopia-linux.png
index 8e9e05cfac5..b3c5ecde99c 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Dialogv1.test.ts-snapshots/Dialogv1-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Dialogv1.test.ts-snapshots/Dialogv1-Default-dark-high-contrast-linux.png
index 382d869458a..4d470f42cd5 100644
Binary files a/.playwright/snapshots/components/Dialogv1.test.ts-snapshots/Dialogv1-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Dialogv1.test.ts-snapshots/Dialogv1-Default-dark-high-contrast-linux.png differ
diff --git a/src/ConfirmationDialog/ConfirmationDialog.test.tsx b/src/ConfirmationDialog/ConfirmationDialog.test.tsx
index e429931caca..37792d8153c 100644
--- a/src/ConfirmationDialog/ConfirmationDialog.test.tsx
+++ b/src/ConfirmationDialog/ConfirmationDialog.test.tsx
@@ -93,33 +93,33 @@ describe('ConfirmationDialog', () => {
})
it('focuses the primary action when opened and the confirmButtonType is not set', async () => {
- const {getByText} = HTMLRender()
+ const {getByText, getByRole} = HTMLRender()
fireEvent.click(getByText('Show dialog'))
- expect(getByText('Primary')).toEqual(document.activeElement)
- expect(getByText('Secondary')).not.toEqual(document.activeElement)
+ expect(getByRole('button', {name: 'Primary'})).toEqual(document.activeElement)
+ expect(getByRole('button', {name: 'Secondary'})).not.toEqual(document.activeElement)
})
it('focuses the primary action when opened and the confirmButtonType is not danger', async () => {
- const {getByText} = HTMLRender()
+ const {getByText, getByRole} = HTMLRender()
fireEvent.click(getByText('Show dialog'))
- expect(getByText('Primary')).toEqual(document.activeElement)
- expect(getByText('Secondary')).not.toEqual(document.activeElement)
+ expect(getByRole('button', {name: 'Primary'})).toEqual(document.activeElement)
+ expect(getByRole('button', {name: 'Secondary'})).not.toEqual(document.activeElement)
})
it('focuses the secondary action when opened and the confirmButtonType is danger', async () => {
- const {getByText} = HTMLRender()
+ const {getByText, getByRole} = HTMLRender()
fireEvent.click(getByText('Show dialog'))
- expect(getByText('Primary')).not.toEqual(document.activeElement)
- expect(getByText('Secondary')).toEqual(document.activeElement)
+ expect(getByRole('button', {name: 'Primary'})).not.toEqual(document.activeElement)
+ expect(getByRole('button', {name: 'Secondary'})).toEqual(document.activeElement)
})
it('supports nested `focusTrap`s', async () => {
- const {getByText} = HTMLRender()
+ const {getByText, getByRole} = HTMLRender()
fireEvent.click(getByText('Show menu'))
fireEvent.click(getByText('Show dialog'))
- expect(getByText('Primary')).toEqual(document.activeElement)
- expect(getByText('Secondary')).not.toEqual(document.activeElement)
+ expect(getByRole('button', {name: 'Primary'})).toEqual(document.activeElement)
+ expect(getByRole('button', {name: 'Secondary'})).not.toEqual(document.activeElement)
})
})
diff --git a/src/Dialog/Dialog.stories.tsx b/src/Dialog/Dialog.stories.tsx
index 99a9d77f891..34863febfad 100644
--- a/src/Dialog/Dialog.stories.tsx
+++ b/src/Dialog/Dialog.stories.tsx
@@ -89,7 +89,7 @@ export const Default = () => {
title="My Dialog"
onClose={onDialogClose}
footerButtons={[
- {buttonType: 'normal', content: 'Open Second Dialog', onClick: openSecondDialog},
+ {buttonType: 'default', content: 'Open Second Dialog', onClick: openSecondDialog},
{buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose},
{buttonType: 'primary', content: 'Proceed', onClick: openSecondDialog, autoFocus: true},
]}
@@ -126,7 +126,7 @@ export const Playground = ({width, height, subtitle}: DialogStoryProps) => {
width={width}
height={height}
footerButtons={[
- {buttonType: 'normal', content: 'Open Second Dialog', onClick: openSecondDialog},
+ {buttonType: 'default', content: 'Open Second Dialog', onClick: openSecondDialog},
{buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose},
{buttonType: 'primary', content: 'Proceed', onClick: openSecondDialog, autoFocus: true},
]}
diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx
index dbd1190e2e8..aa00fed479f 100644
--- a/src/Dialog/Dialog.tsx
+++ b/src/Dialog/Dialog.tsx
@@ -1,6 +1,6 @@
import React, {useCallback, useEffect, useRef, useState} from 'react'
import styled from 'styled-components'
-import Button, {ButtonPrimary, ButtonDanger, ButtonProps} from '../deprecated/Button'
+import {Button, ButtonProps} from '../Button'
import Box from '../Box'
import {get} from '../constants'
import {useOnEscapePress, useProvidedRefOrCreate} from '../hooks'
@@ -27,7 +27,7 @@ export type DialogButtonProps = Omit & {
/**
* The type of Button element to use
*/
- buttonType?: 'normal' | 'primary' | 'danger'
+ buttonType?: 'default' | 'primary' | 'danger' | 'normal'
/**
* The Button's inner text
@@ -381,11 +381,6 @@ const Footer = styled.div`
${sx};
`
-const buttonTypes = {
- normal: Button,
- primary: ButtonPrimary,
- danger: ButtonDanger,
-}
const Buttons: React.FC> = ({buttons}) => {
const autoFocusRef = useProvidedRefOrCreate(buttons.find(button => button.autoFocus)?.ref)
let autoFocusCount = 0
@@ -402,17 +397,17 @@ const Buttons: React.FC>
return (
<>
{buttons.map((dialogButtonProps, index) => {
- const {content, buttonType = 'normal', autoFocus = false, ...buttonProps} = dialogButtonProps
- const ButtonElement = buttonTypes[buttonType]
+ const {content, buttonType = 'default', autoFocus = false, ...buttonProps} = dialogButtonProps
return (
-
{content}
-
+
)
})}
>
diff --git a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
index 39e09045a50..09be4a32c49 100644
--- a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
+++ b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
@@ -103,6 +103,24 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
color: #1F2328;
}
+.c3 {
+ background-color: #ffffff;
+ box-shadow: 0 1px 3px rgba(31,35,40,0.12),0 8px 24px rgba(66,74,83,0.12);
+ position: absolute;
+ min-width: 192px;
+ height: auto;
+ width: auto;
+ border-radius: 12px;
+ overflow: hidden;
+ -webkit-animation: overlay-appear 200ms cubic-bezier(0.33,1,0.68,1);
+ animation: overlay-appear 200ms cubic-bezier(0.33,1,0.68,1);
+ visibility: var(--styled-overlay-visibility);
+}
+
+.c3:focus {
+ outline: none;
+}
+
.c1 {
position: relative;
display: inline-block;
@@ -170,24 +188,6 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
border-color: rgba(31,35,40,0.15);
}
-.c3 {
- background-color: #ffffff;
- box-shadow: 0 1px 3px rgba(31,35,40,0.12),0 8px 24px rgba(66,74,83,0.12);
- position: absolute;
- min-width: 192px;
- height: auto;
- width: auto;
- border-radius: 12px;
- overflow: hidden;
- -webkit-animation: overlay-appear 200ms cubic-bezier(0.33,1,0.68,1);
- animation: overlay-appear 200ms cubic-bezier(0.33,1,0.68,1);
- visibility: var(--styled-overlay-visibility);
-}
-
-.c3:focus {
- outline: none;
-}
-
@media (forced-colors:active) {
.c3 {
outline: solid 1px transparent;