Skip to content
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

Components: Add experimental ConfirmDialog #34153

Merged
merged 92 commits into from
Nov 25, 2021
Merged

Components: Add experimental ConfirmDialog #34153

Changes from 1 commit
Commits
Show all changes
92 commits
Select commit Hold shift + click to select a range
72cd96b
Proof of Concept
fullofcaffeine Aug 19, 2021
335053a
Improve UX to more closely resembles a native confirm
fullofcaffeine Aug 20, 2021
f4a3396
Remove unused import and outdated comment
fullofcaffeine Aug 20, 2021
1b2f104
Improve the story
fullofcaffeine Aug 20, 2021
d5e8d73
Spelling fix
fullofcaffeine Aug 20, 2021
f7250b6
Remove debug code
fullofcaffeine Aug 20, 2021
6062648
Fix invalid props warning
fullofcaffeine Aug 21, 2021
a01225f
Empty dependency array to avoid listener from being re-added at each …
fullofcaffeine Aug 24, 2021
a4d2453
Remove unused style
fullofcaffeine Aug 24, 2021
18e0231
wip
fullofcaffeine Aug 25, 2021
2391e35
Address code review suggestions partially, and refactor to use the ex…
fullofcaffeine Aug 25, 2021
a878802
Improve component by allowing it to be used without the `confirm` hel…
fullofcaffeine Aug 25, 2021
b09651b
Update README
fullofcaffeine Aug 26, 2021
c221e9d
Update confirm call in post-visibility
fullofcaffeine Aug 26, 2021
cac2732
Remove role prop as it is not explicitely used at the moment
fullofcaffeine Aug 26, 2021
0942707
Add basic tests
fullofcaffeine Aug 26, 2021
7d629b8
Test that the Confirm closes when clicking the overlay
fullofcaffeine Aug 27, 2021
12f0b18
Test that the Confirm closes when pressing Escape
fullofcaffeine Aug 27, 2021
f99c357
Merge branch 'trunk' into replace/confirm-et-al
fullofcaffeine Sep 9, 2021
f746119
Fix types and forwardRef, and adapt to the new functional Modal compo…
fullofcaffeine Sep 9, 2021
5fd979f
Merge branch 'trunk' into replace/confirm-et-al
fullofcaffeine Sep 9, 2021
13bf86a
Fix tests
fullofcaffeine Sep 9, 2021
d68508f
Simple naive inline declarative usage without a Context
fullofcaffeine Sep 9, 2021
56ea610
Fix z-index to show it above all elements, and forwardRef to Modal's …
fullofcaffeine Sep 9, 2021
6245385
Improve callback handler name
fullofcaffeine Sep 10, 2021
814fc6f
Make `onCancel` optional
fullofcaffeine Sep 10, 2021
2b47a46
Add styles.ts
fullofcaffeine Sep 10, 2021
bf9c062
Add more tests
fullofcaffeine Sep 11, 2021
37befa2
Handle confirm on enter and add corresponding test
fullofcaffeine Sep 11, 2021
31b88e2
Rename to `ConfirmDialog`
fullofcaffeine Sep 13, 2021
2cd86e9
Redo stories, improve types and `selfClose` handling
fullofcaffeine Sep 14, 2021
21600b0
Fix tests after renaming to `ConfirmDialog`
fullofcaffeine Sep 14, 2021
b21c175
Update the post-visibility example after renaming to `ConfirmDialog`
fullofcaffeine Sep 14, 2021
922c103
Forward all other props to the underlying `Modal`
fullofcaffeine Sep 14, 2021
9c931c6
Refactor tests to test controlled and uncontrolled scenarios
fullofcaffeine Sep 15, 2021
5494585
Mark it as experimental, linter autofixes and snapshot updates
fullofcaffeine Sep 15, 2021
2c43770
Add a proper README
fullofcaffeine Sep 15, 2021
fdab69f
Fix typo
fullofcaffeine Sep 15, 2021
835c2e6
Fix grammar and add section about multiple instances to the README
fullofcaffeine Sep 15, 2021
61f7c1a
Fix stories
fullofcaffeine Sep 15, 2021
c1cf65a
Add message text knob to stories
fullofcaffeine Sep 16, 2021
20e2d23
Reset components/package.json
fullofcaffeine Sep 16, 2021
33e97e1
Merge branch 'trunk' into replace/confirm-et-al
fullofcaffeine Sep 16, 2021
566fe18
Misc changes after code review
fullofcaffeine Sep 24, 2021
d1be655
Abstract polymorphic event
fullofcaffeine Sep 24, 2021
81d9e76
Simplify tests to not use snapshots and be more explicit
fullofcaffeine Sep 24, 2021
8665ad6
Update README.md to reflect the new polymorphic event type
fullofcaffeine Sep 24, 2021
29c8c3a
Make the `Cancel` button a `tertiary` and DRY and improve types
fullofcaffeine Oct 7, 2021
f59553d
Make the title optional and adjust some styles
fullofcaffeine Oct 7, 2021
55ac46a
Fix typo
fullofcaffeine Oct 8, 2021
c96f575
Update packages/components/src/confirm-dialog/README.md
fullofcaffeine Oct 13, 2021
3abfc81
Update packages/components/src/confirm-dialog/README.md
fullofcaffeine Oct 13, 2021
605c2ae
Update packages/components/src/confirm-dialog/README.md
fullofcaffeine Oct 13, 2021
6a60f92
Remove unused imported `MouseEvent`
fullofcaffeine Oct 13, 2021
995f45f
Type `handleEvent`'s `callback` argument as optional
fullofcaffeine Oct 13, 2021
40cb594
Update packages/components/src/confirm-dialog/README.md
fullofcaffeine Oct 13, 2021
ceabb07
Update packages/components/src/confirm-dialog/README.md
fullofcaffeine Oct 13, 2021
aa7025d
Remove portion about the singleton wrapper component as it will not b…
fullofcaffeine Oct 13, 2021
d130ed1
Improve component types
fullofcaffeine Oct 13, 2021
054caae
Use `props.children` to pass the dialog message contents
fullofcaffeine Oct 13, 2021
85e9510
Add DOM structure tests
fullofcaffeine Oct 13, 2021
c20f85d
Convert all findBy* to getBy*
fullofcaffeine Oct 13, 2021
e9ee813
Update README to reflect the new API
fullofcaffeine Oct 13, 2021
316afc5
Improve title and xCloseButton tests
fullofcaffeine Oct 13, 2021
5b2b026
Add better and more concise description for the `title` prop in the R…
fullofcaffeine Oct 13, 2021
4e5abed
Try stacked margin
fullofcaffeine Oct 14, 2021
9bf6f88
Update packages/components/tsconfig.json
fullofcaffeine Oct 14, 2021
64c2816
Update packages/components/src/modal/index.js
fullofcaffeine Oct 14, 2021
414ab15
Destructure props in the function body in `Modal` to prevent TS error…
fullofcaffeine Oct 14, 2021
49eaa0e
Merge branch 'trunk' into replace/confirm-et-al
fullofcaffeine Oct 21, 2021
9f62ad3
Use VStack for a stacked margin approach and remove ability to set a …
fullofcaffeine Oct 21, 2021
af340b2
Update snapshots for the `preferences-modal` unit tests
fullofcaffeine Oct 22, 2021
710932d
Update snapshots for the `keyboard-shortcut-help-modal` unit tests
fullofcaffeine Oct 23, 2021
5e24ff0
Merge branch 'trunk' into replace/confirm-et-al
fullofcaffeine Oct 25, 2021
7d5860c
Merge branch 'trunk' into replace/confirm-et-al
fullofcaffeine Nov 20, 2021
febda4a
Revert post-visibility sample changes
fullofcaffeine Nov 20, 2021
8bed797
Keep modal's default behavior of showing the title div and remove an …
fullofcaffeine Nov 20, 2021
16ce455
Fix wrong message string in one of the stories
fullofcaffeine Nov 20, 2021
2ddbabc
Remove unnecessary explanation about unset props
ciampo Nov 24, 2021
bd6eb33
Rename selfClose to shouldSelfClose
ciampo Nov 24, 2021
94f8b47
Memoize callbacks
ciampo Nov 24, 2021
4d35f84
Extract `confirm` and `cancel` labels
ciampo Nov 24, 2021
74c5293
Improve stories: use `Heading`, better status sentence
ciampo Nov 24, 2021
f69a973
Temporarily enable knobs
ciampo Nov 24, 2021
541490c
Fix typo in test name
ciampo Nov 24, 2021
8eeb0c7
More descriptive storybook sentende, take 2
ciampo Nov 24, 2021
3c3f49a
Sort export alphabetically
ciampo Nov 24, 2021
173f2d4
Undo changes to `Modal` component (to be carried out in a separate PR)
ciampo Nov 24, 2021
4a81ba6
Undo changes to `Modal`-related snapshots (to be carried out in a sep…
ciampo Nov 24, 2021
e2ce3ef
Merge branch 'trunk' into replace/confirm-et-al
ciampo Nov 25, 2021
c2a9adb
Refactor `showTitle` prop on the Modal to `__experimentalHideHeader`
ciampo Nov 25, 2021
a320d85
CHANGELOG
ciampo Nov 25, 2021
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
9 changes: 6 additions & 3 deletions packages/components/src/confirm-dialog/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,13 +73,16 @@ function ConfirmDialog(
[ handleEvent, onConfirm ]
);

const cancelLabel = __( 'Cancel' );
const confirmLabel = __( 'OK' );
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍🏻


return (
<>
{ isOpen && (
<Modal
onRequestClose={ handleEvent( onCancel ) }
onKeyDown={ handleEnter }
closeButtonLabel={ __( 'Cancel' ) }
closeButtonLabel={ cancelLabel }
isDismissible={ true }
ref={ forwardedRef }
showTitle={ false }
Expand All @@ -92,13 +95,13 @@ function ConfirmDialog(
variant="tertiary"
onClick={ handleEvent( onCancel ) }
>
{ __( 'Cancel' ) }
{ cancelLabel }
</Button>
<Button
variant="primary"
onClick={ handleEvent( onConfirm ) }
>
{ __( 'OK' ) }
{ confirmLabel }
</Button>
</Flex>
</VStack>
Expand Down