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;