bd8ced1b60
There are nearly a dozen independent implementations of the same modal
spread throughout the admin panel and various plugins. These modals are
used to confirm or cancel an action, such as deleting a document, bulk
publishing, etc. Each of these instances is nearly identical, leading to
unnecessary development efforts when creating them, inconsistent UI, and
duplicative stylesheets.
Everything is now standardized behind a new `ConfirmationModal`
component. This modal comes with a standard API that is flexible enough
to replace nearly every instance. This component has also been exported
for reuse.
Here is a basic example of how to use it:
```tsx
'use client'
import { ConfirmationModal, useModal } from '@payloadcms/ui'
import React, { Fragment } from 'react'
const modalSlug = 'my-confirmation-modal'
export function MyComponent() {
const { openModal } = useModal()
return (
<Fragment>
<button
onClick={() => {
openModal(modalSlug)
}}
type="button"
>
Do something
</button>
<ConfirmationModal
heading="Are you sure?"
body="Confirm or cancel before proceeding."
modalSlug={modalSlug}
onConfirm={({ closeConfirmationModal, setConfirming }) => {
// do something
setConfirming(false)
closeConfirmationModal()
}}
/>
</Fragment>
)
}
```
41 lines
641 B
SCSS
41 lines
641 B
SCSS
@import '../../scss/styles.scss';
|
|
|
|
@layer payload-default {
|
|
.confirmation-modal {
|
|
@include blur-bg;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
|
|
&__wrapper {
|
|
z-index: 1;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: base(0.8);
|
|
padding: base(2);
|
|
max-width: base(36);
|
|
}
|
|
|
|
&__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: base(0.4);
|
|
|
|
> * {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
&__controls {
|
|
display: flex;
|
|
gap: base(0.4);
|
|
|
|
.btn {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|