Remove deprecated Button component (#4807)

* fire * Create strong-tables-rest.md * fix import * Update .changeset/strong-tables-rest.md Co-authored-by: Josh Black <[email protected]> * fix test * remove test * fix * snaps * fix tests --------- Co-authored-by: Josh Black <[email protected]>
primer · Sep 26, 2024 · 055c9a7 · 055c9a7
1 parent 21c3fce
commit 055c9a7
Show file tree

Hide file tree

Showing 23 changed files with 324 additions and 1,061 deletions.
diff --git a/.changeset/strong-tables-rest.md b/.changeset/strong-tables-rest.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": major
+---
+
+Remove deprecated `Button` component
diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.test.tsx b/packages/react/src/ConfirmationDialog/ConfirmationDialog.test.tsx
@@ -5,7 +5,7 @@ import React, {useCallback, useRef, useState} from 'react'
 import {ActionMenu} from '../deprecated/ActionMenu'
 import BaseStyles from '../BaseStyles'
 import Box from '../Box'
-import Button from '../deprecated/Button/Button'
+import {Button} from '../Button'
 import {ConfirmationDialog, useConfirm} from './ConfirmationDialog'
 import theme from '../theme'
 import {ThemeProvider} from '../ThemeProvider'

diff --git a/packages/react/src/Details/__tests__/Details.test.tsx b/packages/react/src/Details/__tests__/Details.test.tsx
@@ -1,9 +1,8 @@
 import {render} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
-import {Details, useDetails, Box} from '../..'
-import {Button, ButtonPrimary} from '../../deprecated'
-import type {ButtonProps} from '../../deprecated/Button/Button'
+import {Details, useDetails, Box, Button} from '../..'
+import type {ButtonProps} from '../../Button'
 import {behavesAsComponent, checkExports} from '../../utils/testing'
 import axe from 'axe-core'
 
@@ -42,9 +41,7 @@ describe('Details', () => {
       const {getDetailsProps, open} = useDetails({closeOnOutsideClick: true})
       return (
         <Details {...getDetailsProps()} data-testid="details">
-          <Button as="summary" data-testid="summary">
-            {open ? 'Open' : 'Closed'}
-          </Button>
+          <summary data-testid="summary">{open ? 'Open' : 'Closed'}</summary>
         </Details>
       )
     }
@@ -64,9 +61,7 @@ describe('Details', () => {
       const {getDetailsProps, setOpen, open} = useDetails({closeOnOutsideClick: true, defaultOpen: true})
       return (
         <Details {...getDetailsProps()} data-testid="details">
-          <Button as="summary" data-testid="summary">
-            {open ? 'Open' : 'Closed'}
-          </Button>
+          <summary data-testid="summary">{open ? 'Open' : 'Closed'}</summary>
           <CloseButton onClick={() => setOpen(false)}>Close</CloseButton>
         </Details>
       )
@@ -86,11 +81,9 @@ describe('Details', () => {
       const {getDetailsProps, open} = useDetails({closeOnOutsideClick: true, defaultOpen: true})
       return (
         <Details {...getDetailsProps()}>
-          <Button as="summary" data-testid="summary">
-            {open ? 'Open' : 'Closed'}
-          </Button>
+          <summary data-testid="summary">{open ? 'Open' : 'Closed'}</summary>
           <Box>
-            <ButtonPrimary>test</ButtonPrimary>
+            <Button variant="primary">test</Button>
           </Box>
         </Details>
       )

diff --git a/packages/react/src/Overlay/Overlay.test.tsx b/packages/react/src/Overlay/Overlay.test.tsx
@@ -1,6 +1,5 @@
 import React, {useRef, useState} from 'react'
-import {Overlay, Box, Text} from '..'
-import {ButtonDanger, Button} from '../deprecated'
+import {Overlay, Box, Text, Button} from '..'
 import {render, waitFor, fireEvent} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import axe from 'axe-core'
@@ -43,7 +42,9 @@ const TestComponent = ({initialFocus, callback}: TestComponentSettings) => {
             >
               <Box display="flex" flexDirection="column" p={2}>
                 <Text>Are you sure?</Text>
-                <ButtonDanger onClick={closeOverlay}>Cancel</ButtonDanger>
+                <Button variant="danger" onClick={closeOverlay}>
+                  Cancel
+                </Button>
                 <Button onClick={closeOverlay} ref={confirmButtonRef}>
                   Confirm
                 </Button>
@@ -65,19 +66,19 @@ describe('Overlay', () => {
 
   it('should focus element passed into function', async () => {
     const user = userEvent.setup()
-    const {getByText} = render(<TestComponent initialFocus="button" />)
-    await user.click(getByText('open overlay'))
-    await waitFor(() => getByText('Confirm'))
-    const confirmButton = getByText('Confirm')
+    const {getByRole} = render(<TestComponent initialFocus="button" />)
+    await user.click(getByRole('button', {name: 'open overlay'}))
+    await waitFor(() => getByRole('button', {name: 'Confirm'}))
+    const confirmButton = getByRole('button', {name: 'Confirm'})
     expect(document.activeElement).toEqual(confirmButton)
   })
 
   it('should focus first element when nothing is passed', async () => {
     const user = userEvent.setup()
-    const {getByText} = render(<TestComponent />)
-    await user.click(getByText('open overlay'))
-    await waitFor(() => getByText('Cancel'))
-    const cancelButton = getByText('Cancel')
+    const {getByRole} = render(<TestComponent />)
+    await user.click(getByRole('button', {name: 'open overlay'}))
+    await waitFor(() => getByRole('button', {name: 'Cancel'}))
+    const cancelButton = getByRole('button', {name: 'Cancel'})
     expect(document.activeElement).toEqual(cancelButton)
   })
 

diff --git a/packages/react/src/__tests__/AnchoredOverlay.test.tsx b/packages/react/src/__tests__/AnchoredOverlay.test.tsx
@@ -3,7 +3,7 @@ import {AnchoredOverlay} from '../AnchoredOverlay'
 import {behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender, fireEvent} from '@testing-library/react'
 import axe from 'axe-core'
-import {Button} from '../deprecated'
+import {Button} from '../Button'
 import theme from '../theme'
 import BaseStyles from '../BaseStyles'
 import {ThemeProvider} from '../ThemeProvider'