UI: Add ConfirmDialog primitive#76841
Closed
ciampo wants to merge 5 commits into
Closed
Conversation
The ConfirmDialog was authored against an older Dialog version that had
a `title` prop on `Dialog.Root` and a `Dialog.Heading` subcomponent.
The current Dialog uses `Dialog.Title` (with children) and has no
`title` prop on Root.
- Thread `title` through `ConfirmDialogContext` instead of passing it
to `Dialog.Root`.
- Replace `<Dialog.Heading />` with `<Dialog.Title>{ title }</Dialog.Title>`.
- Define `title` directly on `RootProps` instead of picking it from
`DialogRootProps`.
- Fix invalid `wpds` i18n text domain.
Made-with: Cursor
- Swap runtime `react` imports for `@wordpress/element`. - Sort imports (externals, then @wordpress/*, then internal). - Use `import type` for type-only imports. - Move Storybook file to `stories/index.story.tsx`. - Update story title to `Design System/Components/ConfirmDialog`. - Fix `waitFor` blocks to use single assertions (lint rule). - Add JSDoc to Trigger component. - Export `ConfirmDialog` namespace from the package index. Made-with: Cursor
Made-with: Cursor
Made-with: Cursor
|
Size Change: 0 B Total Size: 7.69 MB ℹ️ View Unchanged
|
|
Flaky tests detected in 6868f36. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/23602582965
|
Member
|
Is this the same as #76847? The new PR already has reviews. |
Contributor
Author
Now this is weird. I must have branched out while trying an alternative approach and then forgot to "branch in" after. Good catch, going to close it |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
What?
Add a
ConfirmDialogprimitive to the@wordpress/uipackage.Why?
Confirmation dialogs are a common pattern in the editor.
ConfirmDialogprovides a higher-level API on top ofDialogfor the standard confirm/cancel flow, reducing boilerplate and enforcing consistent behavior (e.g. blocking backdrop dismissal for irreversible actions).How?
ConfirmDialogwrapsDialogwith a focused API: atitle, anintent('default'or'irreversible'), and aPopupthat renders confirm/cancel action buttons automatically.Implementation details
Component structure
ConfirmDialog.Root— Acceptstitle,intent,open/onOpenChange/defaultOpen. Provides context for the title and intent, and delegates toDialog.Root.ConfirmDialog.Trigger— Thin wrapper aroundDialog.Trigger.ConfirmDialog.Popup— RendersDialog.Popupwith a fixed layout:Dialog.Header+Dialog.Title(from context), children as the body message, and aDialog.Footerwith cancel and confirmDialog.Actionbuttons. AcceptsonConfirm,confirmButtonText, andcancelButtonText.Intent behavior
default: Standard confirmation. The dialog can be dismissed via backdrop click, Escape key, cancel, or confirm button.irreversible: For destructive actions. Backdrop click is blocked (viacancel()inonOpenChange). The confirm button gets error/danger styling through CSS custom properties.Compatibility with current Dialog
The component was originally authored against an older Dialog API. Two incompatibilities were fixed:
Dialog.Heading→Dialog.Title: The old Dialog had aHeadingsubcomponent; the current one usesTitlewith children.titleprop onDialog.Root: The old Dialog acceptedtitleon Root; the current one doesn't. Fixed by threadingtitlethroughConfirmDialogContext.Testing Instructions
npm run storybook:dev.Testing Instructions for Keyboard
Use of AI Tools
AI tooling (Cursor with Claude) was used to assist with adapting the component to package conventions (import sorting, lint fixes, test refactoring). All generated code was reviewed.
Made with Cursor