Skip to content

Commit

Permalink
feat(alert-dialog): update alert dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
Andrés Alvarez authored and Andrés Alvarez committed Nov 9, 2023
1 parent 48e0b61 commit 968066e
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 207 deletions.
28 changes: 1 addition & 27 deletions packages/components/alert-dialog/src/AlertDialog.doc.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,38 +92,12 @@ import { AlertDialog } from '@spark-ui/alert-dialog'

<Canvas of={stories.Usage} />

### Uncontrolled

Use `defaultOpen` prop to set the default state of the dialog. Optionally `onOpenChange` prop can be used to know when the state of the dialog changes.

<Canvas of={stories.Uncontrolled} />

### Controlled

Use `open` and `onOpenChange` props to control the state of the dialog.
Use `open` and `onOpenChange` props to control the state of the dialog. This is specially useful to close the dialog after an async operation has completed.

<Canvas of={stories.Controlled} />

## Advanced usage

### Escape

Use `onEscapeKeyDown` prop to listen to when the escape key is pressed. Optionally, the dialog could be prevented from closing by calling `event.preventDefault`.

<Canvas of={stories.Escape} />

### Focus open

Use `onOpenAutoFocus` prop to listen to when focus moves to the less destructive action after opening. Optionally, the autofocus behavior could be prevented by calling `event.preventDefault`.

<Canvas of={stories.OpenFocus} />

### Focus close

Use `onCloseAutoFocus` prop to listen to when focus moves to the trigger after closing. Optionally, the autofocus behavior could be prevented by calling `event.preventDefault`.

<Canvas of={stories.CloseFocus} />

## Accessibility

Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog).
Expand Down
183 changes: 5 additions & 178 deletions packages/components/alert-dialog/src/AlertDialog.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,58 +49,16 @@ export const Usage: StoryFn = _args => {
)
}

export const Uncontrolled: StoryFn = () => {
return (
<AlertDialog defaultOpen={false}>
<AlertDialog.Trigger asChild>
<Button intent="danger">Delete</Button>
</AlertDialog.Trigger>

<AlertDialog.Portal>
<AlertDialog.Overlay />

<AlertDialog.Content>
<AlertDialog.Header>
<AlertDialog.Title>Delete account</AlertDialog.Title>
</AlertDialog.Header>

<AlertDialog.Body>
<AlertDialog.Description>
Are you sure? You can not undo this action afterwards.
</AlertDialog.Description>
</AlertDialog.Body>

<AlertDialog.Footer className="flex justify-end gap-md">
<AlertDialog.Cancel asChild>
<Button intent="neutral" design="ghost">
Cancel
</Button>
</AlertDialog.Cancel>

<AlertDialog.Action asChild>
<Button intent="danger">Delete</Button>
</AlertDialog.Action>
</AlertDialog.Footer>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog>
)
}

export const Controlled: StoryFn = () => {
const [isOpen, setIsOpen] = useState(false)

const handleClick = () => {
setIsOpen(true)
}

return (
<>
<Button intent="danger" onClick={handleClick}>
Delete
</Button>

<AlertDialog open={isOpen} onOpenChange={setIsOpen}>
<AlertDialog.Trigger asChild>
<Button intent="danger">Delete</Button>
</AlertDialog.Trigger>

<AlertDialog.Portal>
<AlertDialog.Overlay />

Expand All @@ -110,9 +68,7 @@ export const Controlled: StoryFn = () => {
</AlertDialog.Header>

<AlertDialog.Body>
<AlertDialog.Description>
Are you sure? You can not undo this action afterwards.
</AlertDialog.Description>
Are you sure? You can not undo this action afterwards.
</AlertDialog.Body>

<AlertDialog.Footer className="flex justify-end gap-md">
Expand All @@ -132,132 +88,3 @@ export const Controlled: StoryFn = () => {
</>
)
}

export const Escape: StoryFn = () => {
const handleEscapeKeyDown = (event: KeyboardEvent) => {
// optional
event.preventDefault()
}

return (
<AlertDialog>
<AlertDialog.Trigger asChild>
<Button intent="danger">Delete</Button>
</AlertDialog.Trigger>

<AlertDialog.Portal>
<AlertDialog.Overlay />

<AlertDialog.Content onEscapeKeyDown={handleEscapeKeyDown}>
<AlertDialog.Header>
<AlertDialog.Title>Delete account</AlertDialog.Title>
</AlertDialog.Header>

<AlertDialog.Body>
<AlertDialog.Description>
Are you sure? You can not undo this action afterwards.
</AlertDialog.Description>
</AlertDialog.Body>

<AlertDialog.Footer className="flex justify-end gap-md">
<AlertDialog.Cancel asChild>
<Button intent="neutral" design="ghost">
Cancel
</Button>
</AlertDialog.Cancel>

<AlertDialog.Action asChild>
<Button intent="danger">Delete</Button>
</AlertDialog.Action>
</AlertDialog.Footer>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog>
)
}

export const OpenFocus: StoryFn = () => {
const handleOpenAutoFocus = (event: Event) => {
// optional
event.preventDefault()
}

return (
<AlertDialog>
<AlertDialog.Trigger asChild>
<Button intent="danger">Delete</Button>
</AlertDialog.Trigger>

<AlertDialog.Portal>
<AlertDialog.Overlay />

<AlertDialog.Content onOpenAutoFocus={handleOpenAutoFocus}>
<AlertDialog.Header>
<AlertDialog.Title>Delete account</AlertDialog.Title>
</AlertDialog.Header>

<AlertDialog.Body>
<AlertDialog.Description>
Are you sure? You can not undo this action afterwards.
</AlertDialog.Description>
</AlertDialog.Body>

<AlertDialog.Footer className="flex justify-end gap-md">
<AlertDialog.Cancel asChild>
<Button intent="neutral" design="ghost">
Cancel
</Button>
</AlertDialog.Cancel>

<AlertDialog.Action asChild>
<Button intent="danger">Delete</Button>
</AlertDialog.Action>
</AlertDialog.Footer>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog>
)
}

export const CloseFocus: StoryFn = () => {
const handleCloseAutoFocus = (event: Event) => {
// optional
event.preventDefault()
}

return (
<AlertDialog>
<AlertDialog.Trigger asChild>
<Button intent="danger">Delete</Button>
</AlertDialog.Trigger>

<AlertDialog.Portal>
<AlertDialog.Overlay />

<AlertDialog.Content onCloseAutoFocus={handleCloseAutoFocus}>
<AlertDialog.Header>
<AlertDialog.Title>Delete account</AlertDialog.Title>
</AlertDialog.Header>

<AlertDialog.Body>
<AlertDialog.Description>
Are you sure? You can not undo this action afterwards.
</AlertDialog.Description>
</AlertDialog.Body>

<AlertDialog.Footer className="flex justify-end gap-md">
<AlertDialog.Cancel asChild>
<Button intent="neutral" design="ghost">
Cancel
</Button>
</AlertDialog.Cancel>

<AlertDialog.Action asChild>
<Button intent="danger">Delete</Button>
</AlertDialog.Action>
</AlertDialog.Footer>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog>
)
}
5 changes: 3 additions & 2 deletions packages/components/alert-dialog/src/AlertDialogContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { AlertDialogContext } from './AlertDialogContext'
export type AlertDialogContentElement = ElementRef<typeof Dialog.Content>
export type AlertDialogContentProps = Omit<
DialogContentProps,
'size' | 'onPointerDownOutside' | 'onInteractOutside'
'size' | 'isNarrow' | 'onPointerDownOutside' | 'onInteractOutside'
>

export const AlertDialogContent = forwardRef<AlertDialogContentElement, AlertDialogContentProps>(
Expand Down Expand Up @@ -38,12 +38,13 @@ export const AlertDialogContent = forwardRef<AlertDialogContentElement, AlertDia
ref={ref}
data-spark-component="alert-dialog-content"
{...others}
className={cx(className, '!w-auto min-w-sz-288')}
className={cx(className, 'min-w-sz-288')}
role="alertdialog"
size="md"
onOpenAutoFocus={composeEventHandlers(onOpenAutoFocus, handleOpenAutoFocus)}
onPointerDownOutside={handlePointerDownOutside}
onInteractOutside={handleInteractOutside}
isNarrow
/>
</AlertDialogContext.Provider>
)
Expand Down

0 comments on commit 968066e

Please sign in to comment.