[6.x] Modals and Stacks

content/collections/pages/confirmation-modals.md

@@ -0,0 +1,45 @@
+---
+title: Confirmation Modals
+id: 88bf3f66-4b80-42c9-8b65-bef712b8f413
+---
+
+Statamic ships with a [`<Modal>` UI component](https://ui.statamic.dev/?path=/docs/overlays-modal--docs) you can use to build custom modals. 
+
+However, if all you need is a confirmation prompt, you can use the `ConfirmationModal` component instead. You should use `v-if` to make it appear.
+
+``` html
+<confirmation-modal
+    v-if="confirming"
+    title="Do the thing"
+    @confirm="doTheThing"
+    @cancel="confirming = false"
+/>
+```
+
+## Props
+
+| Prop | Description |
+|------|-------------|
+| `title` | Header text |
+| `bodyText` | Provide a simple string as a content of the modal. Defaults to `Are you sure?`. |
+| `buttonText` | Text for the confirmation button label. Defaults to `Confirm`. |
+| `danger` | Boolean for making the modal red. Useful for when you're doing something scary like deletions. |
+
+## Events
+
+| Event | Description |
+|-------|-------------|
+| `confirm` | When the user clicks the confirm button. |
+| `cancel` | When the user clicks the cancel button. |
+
+## Slots
+
+The default slot replaces the `bodyText` prop. Useful when you need something more complicated than a single paragraph.
+
+``` html
+<confirmation-modal ...>
+    <p>More complicated</p>
+    <p>stuff here.</p>
+</confirmation-modal>
+```
+

content/collections/pages/vue-2-to-3.md

@@ -578,7 +578,7 @@ import { Input, Textarea, Combobox, Switch } from '@statamic/cms/ui'; // [tl! ++
 
 ## Modals and Stacks
 
-Previously, you had to use `v-if` to control the "open state" of Modals and Stacks. You should now `v-model` the open state instead:
+Previously, you had to use `v-if` to control the "open state" of Modals and Stacks. You should now use `v-model` to control the open state instead:
 
 ```vue
 <!-- Using v-model -->

content/trees/collections/pages.yaml

@@ -334,8 +334,6 @@ tree:
         entry: 88bf3f66-4b80-42c9-8b65-bef712b8f413
       -
         entry: 28068f9a-f269-4646-87e4-881e5477558d
-      -
-        entry: c21a18cc-b9a9-4b1a-b1f7-97473f7d82f1
   -
     entry: 2d6381b8-dc0a-4a5d-b750-1a9dd7c0bb14
     children:

content/trees/navigation/extending_docs.yaml

@@ -110,9 +110,6 @@ tree:
       -
         id: dbea0d9e-6a6a-42fd-83bf-d0d2eae539b6
         entry: d84613d5-2b2b-465d-8f02-c71b6d2aadf1
-      -
-        id: 6a3e2a46-90fa-420b-b48b-79ba5ad0ac20
-        entry: c21a18cc-b9a9-4b1a-b1f7-97473f7d82f1
       -
         id: 912c7cdd-8c3f-4824-8af5-95ad81f45fb5
         entry: b80820bb-c2e8-475f-98bd-8ea0ef9f5339

routes/redirects.php

@@ -23,7 +23,7 @@
 Route::permanentRedirect('extending/keyboard-shortcuts', '/control-panel/keyboard-shortcuts');
 Route::permanentRedirect('extending/lifecycle', '/advanced-topics/lifecycle');
 Route::permanentRedirect('extending/markdown', '/frontend/markdown');
-Route::permanentRedirect('extending/modals', '/vue-components/modals');
+Route::permanentRedirect('extending/modals', 'https://ui.statamic.dev/?path=/docs/overlays-modal--docs');
 Route::permanentRedirect('extending/modifiers', '/modifiers/modifiers');
 Route::permanentRedirect('extending/permissions', '/control-panel/permissions');
 Route::permanentRedirect('extending/progress', '/vue-components/progress');
@@ -34,7 +34,7 @@
 Route::permanentRedirect('extending/repositories', '/backend-apis/repositories');
 Route::permanentRedirect('extending/search', '/frontend/search#digging-deeper');
 Route::permanentRedirect('extending/slugs', '/vue-components/slugs');
-Route::permanentRedirect('extending/stacks', '/vue-components/stacks');
+Route::permanentRedirect('extending/stacks', 'https://ui.statamic.dev/?path=/docs/overlays-stack--docs');
 Route::permanentRedirect('extending/tags', '/tags/building-a-tag');
 Route::permanentRedirect('extending/testing-in-addons', '/addons/testing');
 Route::permanentRedirect('extending/toast-notifications', '/control-panel/toast-notifications');