Replace deprecated Button in Dialog

.changeset/eight-pillows-pump.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Replaces deprecated `Button` component in `Dialog` with newest version

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(<Basic />)
+    const {getByText, getByRole} = HTMLRender(<Basic />)
     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(<Basic confirmButtonType="primary" />)
+    const {getByText, getByRole} = HTMLRender(<Basic confirmButtonType="primary" />)
     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(<Basic confirmButtonType="danger" />)
+    const {getByText, getByRole} = HTMLRender(<Basic confirmButtonType="danger" />)
     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(<ShorthandHookFromActionMenu />)
+    const {getByText, getByRole} = HTMLRender(<ShorthandHookFromActionMenu />)
 
     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)
   })
 })

src/Dialog.stories.tsx

@@ -127,7 +127,7 @@ export const Default = ({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},
           ]}

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},
           ]}

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'
@@ -26,7 +26,7 @@ export type DialogButtonProps = Omit<ButtonProps, 'content'> & {
   /**
    * The type of Button element to use
    */
-  buttonType?: 'normal' | 'primary' | 'danger'
+  buttonType?: 'default' | 'primary' | 'danger' | 'normal'
 
   /**
    * The Button's inner text
@@ -378,11 +378,6 @@ const Footer = styled.div<SxProp>`
   ${sx};
 `
 
-const buttonTypes = {
-  normal: Button,
-  primary: ButtonPrimary,
-  danger: ButtonDanger,
-}
 const Buttons: React.FC<React.PropsWithChildren<{buttons: DialogButtonProps[]}>> = ({buttons}) => {
   const autoFocusRef = useProvidedRefOrCreate<HTMLButtonElement>(buttons.find(button => button.autoFocus)?.ref)
   let autoFocusCount = 0
@@ -399,17 +394,17 @@ const Buttons: React.FC<React.PropsWithChildren<{buttons: DialogButtonProps[]}>>
   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 (
-          <ButtonElement
+          <Button
             key={index}
             {...buttonProps}
-            variant={buttonType}
+            // 'normal' value is equivalent to 'default', this is used for backwards compatibility
+            variant={buttonType === 'normal' ? 'default' : buttonType}
             ref={autoFocus && autoFocusCount === 0 ? (autoFocusCount++, autoFocusRef) : null}
           >
             {content}
-          </ButtonElement>
+          </Button>
         )
       })}
     </>

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;