[AlertDialog] Explicit modality #758
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
andy-hook
commented
Jul 1, 2021
| @@ -14,8 +14,10 @@ import type * as Polymorphic from '@radix-ui/react-polymorphic'; | |||
|
|
|||
| const ROOT_NAME = 'AlertDialog'; | |||
|
|
|||
| const AlertDialog: React.FC<React.ComponentProps<typeof DialogPrimitive.Root>> = (props) => ( | |||
| <DialogPrimitive.Root {...props} /> | |||
| type AlertDialogProps = Omit<React.ComponentProps<typeof DialogPrimitive.Root>, 'modal'>; | |||
There was a problem hiding this comment.
Do I have this right? we want to enforce this opinion on consumers?
| @@ -14,8 +14,10 @@ import type * as Polymorphic from '@radix-ui/react-polymorphic'; | |||
|
|
|||
| const ROOT_NAME = 'AlertDialog'; | |||
|
|
|||
| const AlertDialog: React.FC<React.ComponentProps<typeof DialogPrimitive.Root>> = (props) => ( | |||
| <DialogPrimitive.Root {...props} /> | |||
| type AlertDialogProps = Omit<React.ComponentProps<typeof DialogPrimitive.Root>, 'modal'>; | |||
| @@ -62,6 +64,9 @@ const AlertDialogContent = React.forwardRef((props, forwardedRef) => { | |||
| event.preventDefault(); | |||
| cancelRef.current?.focus({ preventScroll: true }); | |||
| })} | |||
| onPointerDownOutside={composeEventHandlers(contentProps.onPointerDownOutside, (event) => | |||
There was a problem hiding this comment.
I think we also need to prevent the escape keydown one.
There was a problem hiding this comment.
May be worth rejigging what's exposed from Dialog to facilitate the changes here also.
There was a problem hiding this comment.
I wondered about this too but the w3 example does allow the escape close
https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/alertdialog.html
There was a problem hiding this comment.
Ha cool, good to know. I suppose that's still a meaningful user action, as opposed to clicking outside by mistake potentially.
There was a problem hiding this comment.
We probably should just hardcode it then and remove it from the types.
There was a problem hiding this comment.
We probably should just hardcode it then and remove it from the types.
That's fine with me, are we sure consumers won't need access to the handler for a different purpose?
andy-hook
pushed a commit
that referenced
this pull request
Jul 5, 2021
andy-hook
pushed a commit
that referenced
this pull request
Jul 8, 2021
andy-hook
pushed a commit
that referenced
this pull request
Jul 12, 2021
andy-hook
pushed a commit
that referenced
this pull request
Jul 14, 2021
andy-hook
pushed a commit
that referenced
this pull request
Jul 29, 2021
andy-hook
pushed a commit
that referenced
this pull request
Aug 2, 2021
) * [FocusScope] Update API for modality changes (#698) * [FocusScope] Update API for modality changes * Address PR feedback * PR feedback * [Dialog] Add support for non-modal dialogs (#699) * [Dialog] Add support for non-modal dialogs * PR feedback * [Dialog] Fix non modal toggle on close (#757) * [AlertDialog] Explicit modality, prevent pointer dismiss (#758) * [AlertDialog] Don't compose onPointerDownOutside (#759) * [AlertDialog] Don't compose onPointerDownOutside * Code style * [Popover] Add support for modality (#751) * [Popover] Add support for modality * Modality scroll behaviour, default to non modal * Adjust for focus close in chromatic stories * Fix toggle when closing non modal * [Dialog][Popover] Update interact description * [Popover] Restore `checkForDefaultPrevented` (#764) * [DropdownMenu][ContextMenu] Add modality support (#768) * [Menu] Support modality * [DropdownMenu] Expose modality * [ContextMenu] Expose modality * [DropdownMenu] `mouseDown` -> `pointerDown` * [Menu] disableOutsidePointerEvents only when open * [DropdownMenu][Popover][Dialog] Apply explicit trigger auto focus (#771) * Explicit trigger focus * Simplify handling where possible * Code style, remove redundant check * [Popover] Revert `onEscapeKeyDown` default check * Versions * [Dialog][Popover][DropdownMenu][ContextMenu] Adjust non-modal auto focus behaviour (#799) * Adjust non-modal auto focus behaviour * Code style * Explicitly handle ref clearing * Refine ref clearing * Simplify handler composition in non-modal * Feedback * Revert auto focus cancellation * Improve focus handling readability * [ContextMenu] Adjust non-modal focus handling * [ContextMenu][Dialog][DropdownMenu][ContextMenu] Adjust ref naming (#805) * Adjust ref naming * [ContextMenu] Move modal condition Co-authored-by: Andy Hook <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Force
Modalmode onAlertDialogand prevent dismiss on click outside.