Use the IconButton for the close button on Dialog (#5066)

* Use the IconButton for the close button on Dialog

* Create tidy-impalas-remain.md

* Remove Octicon import

* Update snapshots

* test(vrt): update snapshots

---------

Co-authored-by: jonrohan <jonrohan@users.noreply.github.com>

.changeset/tidy-impalas-remain.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Use the IconButton for the close button on Dialog

packages/react/src/Dialog/Dialog.tsx

@@ -1,14 +1,13 @@
 import React, {useCallback, useEffect, useRef, useState, type SyntheticEvent} from 'react'
 import styled from 'styled-components'
 import type {ButtonProps} from '../Button'
-import {Button} from '../Button'
+import {Button, IconButton} from '../Button'
 import Box from '../Box'
 import {get} from '../constants'
 import {useOnEscapePress, useProvidedRefOrCreate} from '../hooks'
 import {useFocusTrap} from '../hooks/useFocusTrap'
 import type {SxProp} from '../sx'
 import sx from '../sx'
-import Octicon from '../Octicon'
 import {XIcon} from '@primer/octicons-react'
 import {useFocusZone} from '../hooks/useFocusZone'
 import {FocusKeys} from '@primer/behaviors'
@@ -590,22 +589,11 @@ const Buttons: React.FC<React.PropsWithChildren<{buttons: DialogButtonProps[]}>>
     </>
   )
 }
-const DialogCloseButton = styled(Button)`
-  border-radius: 4px;
-  background: transparent;
-  border: 0;
-  vertical-align: middle;
-  color: ${get('colors.fg.muted')};
-  padding: ${get('space.2')};
-  align-self: flex-start;
-  line-height: normal;
-  box-shadow: none;
-`
+
 const CloseButton: React.FC<React.PropsWithChildren<{onClose: () => void}>> = ({onClose}) => {
   return (
-    <DialogCloseButton aria-label="Close" onClick={onClose}>
-      <Octicon icon={XIcon} />
-    </DialogCloseButton>
+    // eslint-disable-next-line primer-react/a11y-remove-disable-tooltip
+    <IconButton unsafeDisableTooltip={true} icon={XIcon} aria-label="Close" onClick={onClose} variant="invisible" />
   )
 }
 

packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap

@@ -1029,12 +1029,6 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   display: block;
 }
 
-.c9 {
-  -webkit-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-}
-
 .c0 {
   margin: 0;
   padding-inline-start: 0;
@@ -1313,6 +1307,12 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   text-decoration: none;
 }
 
+.c9 {
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
 @media (forced-colors:active) {
 
 }
@@ -1534,12 +1534,6 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   word-break: break-word;
 }
 
-.c9 {
-  -webkit-transform: rotate(0deg);
-  -ms-transform: rotate(0deg);
-  transform: rotate(0deg);
-}
-
 .c0 {
   margin: 0;
   padding-inline-start: 0;
@@ -1839,6 +1833,12 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   text-decoration: none;
 }
 
+.c9 {
+  -webkit-transform: rotate(0deg);
+  -ms-transform: rotate(0deg);
+  transform: rotate(0deg);
+}
+
 @media (forced-colors:active) {
 
 }