Revert "[Dialog] Replace deprecated Button for current one (#3084)" (#3527)

This reverts commit ded74d8.

Author: siddharthkp

.changeset/cool-schools-cheer.md

@@ -1,6 +1,6 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react'
 import styled from 'styled-components'
-import {Button, ButtonProps} from '../Button'
+import Button, {ButtonPrimary, ButtonDanger, ButtonProps} from '../deprecated/Button'
 import Box from '../Box'
 import {get} from '../constants'
 import {useOnEscapePress, useProvidedRefOrCreate} from '../hooks'
@@ -20,11 +20,11 @@ const ANIMATION_DURATION = '200ms'
  * Props that characterize a button to be rendered into the footer of
  * a Dialog.
  */
-export type DialogButtonProps = Omit<ButtonProps, 'children'> & {
+export type DialogButtonProps = ButtonProps & {
   /**
    * The type of Button element to use
    */
-  buttonType?: 'default' | 'primary' | 'danger' | 'normal'
+  buttonType?: 'normal' | 'primary' | 'danger'
 
   /**
    * The Button's inner text
@@ -366,6 +366,11 @@ 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
@@ -382,16 +387,17 @@ const Buttons: React.FC<React.PropsWithChildren<{buttons: DialogButtonProps[]}>>
   return (
     <>
       {buttons.map((dialogButtonProps, index) => {
-        const {content, buttonType = 'default', autoFocus = false, ...buttonProps} = dialogButtonProps
+        const {content, buttonType = 'normal', autoFocus = false, ...buttonProps} = dialogButtonProps
+        const ButtonElement = buttonTypes[buttonType]
         return (
-          <Button
+          <ButtonElement
             key={index}
             {...buttonProps}
-            variant={buttonType === 'normal' ? 'default' : buttonType}
+            variant={buttonType}
             ref={autoFocus && autoFocusCount === 0 ? (autoFocusCount++, autoFocusRef) : null}
           >
             {content}
-          </Button>
+          </ButtonElement>
         )
       })}
     </>

src/Dialog/Dialog.tsx

@@ -7,10 +7,6 @@ exports[`SelectPanel renders consistently 1`] = `
   color: #1F2328;
 }
 
-.c2 {
-  margin-left: 4px;
-}
-
 .c1 {
   position: relative;
   display: inline-block;
@@ -75,6 +71,10 @@ exports[`SelectPanel renders consistently 1`] = `
   border-color: rgba(31,35,40,0.15);
 }
 
+.c2 {
+  margin-left: 4px;
+}
+
 <div
   className="c0"
   color="fg.default"

src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap

@@ -2,11 +2,10 @@ import {render as HTMLRender, fireEvent} from '@testing-library/react'
 import {axe} from 'jest-axe'
 import React, {useCallback, useRef, useState} from 'react'
 
-import {ActionMenu} from '../ActionMenu'
-import {ActionList} from '../ActionList'
+import {ActionMenu} from '../deprecated/ActionMenu'
 import BaseStyles from '../BaseStyles'
 import Box from '../Box'
-import {Button} from '../Button'
+import Button from '../deprecated/Button/Button'
 import {ConfirmationDialog, useConfirm} from '../Dialog/ConfirmationDialog'
 import theme from '../theme'
 import {ThemeProvider} from '../ThemeProvider'
@@ -63,14 +62,10 @@ const ShorthandHookFromActionMenu = () => {
       <SSRProvider>
         <BaseStyles>
           <Box display="flex" flexDirection="column" alignItems="flex-start">
-            <ActionMenu>
-              <ActionMenu.Button>{text}</ActionMenu.Button>
-              <ActionMenu.Overlay>
-                <ActionList>
-                  <ActionList.Item onSelect={onButtonClick}>Show dialog</ActionList.Item>
-                </ActionList>
-              </ActionMenu.Overlay>
-            </ActionMenu>
+            <ActionMenu
+              renderAnchor={props => <Button {...props}>{text}</Button>}
+              items={[{text: 'Show dialog', onAction: onButtonClick}]}
+            />
           </Box>
         </BaseStyles>
       </SSRProvider>
@@ -100,36 +95,36 @@ describe('ConfirmationDialog', () => {
   })
 
   it('focuses the primary action when opened and the confirmButtonType is not set', async () => {
-    const {getByText, getByRole} = HTMLRender(<Basic />)
+    const {getByText} = HTMLRender(<Basic />)
     fireEvent.click(getByText('Show dialog'))
-    expect(getByRole('button', {name: 'Primary'})).toEqual(document.activeElement)
+    expect(getByText('Primary')).toEqual(document.activeElement)
     expect(getByText('Secondary')).not.toEqual(document.activeElement)
   })
 
   it('focuses the primary action when opened and the confirmButtonType is not danger', async () => {
-    const {getByText, getByRole} = HTMLRender(<Basic confirmButtonType="primary" />)
+    const {getByText} = HTMLRender(<Basic confirmButtonType="primary" />)
     fireEvent.click(getByText('Show dialog'))
-    expect(getByRole('button', {name: 'Primary'})).toEqual(document.activeElement)
+    expect(getByText('Primary')).toEqual(document.activeElement)
     expect(getByText('Secondary')).not.toEqual(document.activeElement)
   })
 
   it('focuses the secondary action when opened and the confirmButtonType is danger', async () => {
-    const {getByText, getByRole} = HTMLRender(<Basic confirmButtonType="danger" />)
+    const {getByText} = HTMLRender(<Basic confirmButtonType="danger" />)
     fireEvent.click(getByText('Show dialog'))
-    expect(getByRole('button', {name: 'Primary'})).not.toEqual(document.activeElement)
-    expect(getByRole('button', {name: 'Secondary'})).toEqual(document.activeElement)
+    expect(getByText('Primary')).not.toEqual(document.activeElement)
+    expect(getByText('Secondary')).toEqual(document.activeElement)
   })
 
   it('supports nested `focusTrap`s', async () => {
     const spy = jest.spyOn(console, 'error').mockImplementationOnce(() => {})
 
-    const {getByText, getByRole} = HTMLRender(<ShorthandHookFromActionMenu />)
+    const {getByText} = HTMLRender(<ShorthandHookFromActionMenu />)
 
     fireEvent.click(getByText('Show menu'))
     fireEvent.click(getByText('Show dialog'))
 
-    expect(getByRole('button', {name: 'Primary'})).toEqual(document.activeElement)
-    expect(getByRole('button', {name: 'Secondary'})).not.toEqual(document.activeElement)
+    expect(getByText('Primary')).toEqual(document.activeElement)
+    expect(getByText('Secondary')).not.toEqual(document.activeElement)
 
     // REACT_VERSION_LATEST should be treated as a constant for the test
     // environment

src/__tests__/ConfirmationDialog.test.tsx

@@ -100,25 +100,6 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
   color: #1F2328;
 }
 
-.c2 {
-  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;
-  max-width: 640px;
-  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);
-}
-
-.c2:focus {
-  outline: none;
-}
-
 .c1 {
   position: relative;
   display: inline-block;
@@ -183,6 +164,25 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
   border-color: rgba(31,35,40,0.15);
 }
 
+.c2 {
+  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;
+  max-width: 640px;
+  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);
+}
+
+.c2:focus {
+  outline: none;
+}
+
 @media (forced-colors:active) {
   .c2 {
     outline: solid 1px transparent;