Skip to content

Use the IconButton for the close button on Dialog #5066

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jonrohan merged 5 commits into from
Oct 4, 2024
Merged

Use the IconButton for the close button on Dialog #5066

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
674ac19
Use the IconButton for the close button on Dialog
jonrohan Oct 4, 2024
1527680
Create tidy-impalas-remain.md
jonrohan Oct 4, 2024
e730a94
Remove Octicon import
jonrohan Oct 4, 2024
33da8c2
Update snapshots
jonrohan Oct 4, 2024
38d89ff
test(vrt): update snapshots
jonrohan Oct 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/tidy-impalas-remain.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": patch
---

Use the IconButton for the close button on Dialog
20 changes: 4 additions & 16 deletions packages/react/src/Dialog/Dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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" />
)
}

Expand Down