From 2d805762f7b3536aa08f761d74eb9e59c6ac624f Mon Sep 17 00:00:00 2001 From: Duncan McClean Date: Tue, 16 Dec 2025 11:19:30 +0000 Subject: [PATCH 1/4] Delete Stacks page in favour of Storybook docs --- content/collections/pages/stacks.md | 67 -------------------- content/trees/collections/pages.yaml | 2 - content/trees/navigation/extending_docs.yaml | 3 - routes/redirects.php | 2 +- 4 files changed, 1 insertion(+), 73 deletions(-) delete mode 100644 content/collections/pages/stacks.md diff --git a/content/collections/pages/stacks.md b/content/collections/pages/stacks.md deleted file mode 100644 index 3b19f8891..000000000 --- a/content/collections/pages/stacks.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Stacks -intro: | - A Stack is a way to add a layer of UX to the Control Panel. -id: c21a18cc-b9a9-4b1a-b1f7-97473f7d82f1 ---- -## Stacks -For example, when editing a related entry while you're already editing another entry would open a second publish form over the top. Once you're done, the layer would close and return you to your original task, without you losing any progress, or needing to navigate away. - -To create a Stack, wrap a block of content with a `` component. - -``` html - - Your stack's content. - -``` - -## Narrow stacks - -To make a stack narrow, add a prop. - -``` html -... -``` - -## Opening a Stack - -When a Stack is rendered in the DOM, it will be automatically opened. So, to control whether or not it's open, you should add a `v-if` to it. - -## Closing a Stack - -You can close a Stack by clicking on a lower stack (or the original layer). Any higher Stacks will also attempt to close. You can also change your `v-if` back to a falsey value. - -When closed, the modal will emit a `closed` event. It's recommended to use this event to perform your closing logic. This will let the Stack nicely animate out instead of abruptly disappearing. The `close` function is available to you in the slot scope. - -``` html - -
- - - - - - - -
- -``` - -## Preventing Stacks from closing - -Before a Stack is closed, you have the opportunity to cancel it. For instance, if your Stack contains a form, you may want to give a warning about unsaved changes when the user tries to close it. To prevent closing of a Stack, you should pass in a function that returns `false` to stop closing and `true` to allow it. - -``` html - ... -``` -``` js -shouldClose() { - if (confirm('Are you sure?')) { - return true; // let it close - } else { - return false; // prevent it from closing - } -} -``` - -If you prevent your stack from closing, any subsequent Stacks closures will also be prevented. diff --git a/content/trees/collections/pages.yaml b/content/trees/collections/pages.yaml index 169259d0c..19e4ae195 100644 --- a/content/trees/collections/pages.yaml +++ b/content/trees/collections/pages.yaml @@ -341,8 +341,6 @@ tree: entry: 28068f9a-f269-4646-87e4-881e5477558d - entry: e2577828-504b-490b-a8b6-10991ae8a0b6 - - - entry: c21a18cc-b9a9-4b1a-b1f7-97473f7d82f1 - entry: 2d6381b8-dc0a-4a5d-b750-1a9dd7c0bb14 children: diff --git a/content/trees/navigation/extending_docs.yaml b/content/trees/navigation/extending_docs.yaml index 03c8e8191..920714644 100644 --- a/content/trees/navigation/extending_docs.yaml +++ b/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 diff --git a/routes/redirects.php b/routes/redirects.php index 9f4f8bd51..9f348a1bc 100644 --- a/routes/redirects.php +++ b/routes/redirects.php @@ -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/components-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'); From 5648b24ab4cf14d4a043244dc652bbc436058e02 Mon Sep 17 00:00:00 2001 From: Duncan McClean Date: Tue, 16 Dec 2025 11:21:42 +0000 Subject: [PATCH 2/4] add stack component to list of ui components --- .../collections/pages/all-ui-components.md | 43 ++++++++++--------- 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/content/collections/pages/all-ui-components.md b/content/collections/pages/all-ui-components.md index 0c25d08b7..a0e68d808 100644 --- a/content/collections/pages/all-ui-components.md +++ b/content/collections/pages/all-ui-components.md @@ -3,25 +3,26 @@ id: f3c9d186-14a6-416d-89e7-28569adb2cfe blueprint: page title: 'All UI Components' --- -| Type | Description | -|-----------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| [Badge](/ui-components/badge) | Highlight contextual information, like status, count, or related data. You can pass text through a text prop or use it like an HTML tag pair. | -| [Button](/ui-components/button) | Buttons are used to trigger actions. They come in many sizes and flavors. | -| [Calendar](/ui-components/calendar) | We'll give you 3 guesses what this is for. | +| Type | Description | +|-----------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------| +| [Badge](/ui-components/badge) | Highlight contextual information, like status, count, or related data. You can pass text through a text prop or use it like an HTML tag pair. | +| [Button](/ui-components/button) | Buttons are used to trigger actions. They come in many sizes and flavors. | +| [Calendar](/ui-components/calendar) | We'll give you 3 guesses what this is for. | | [Card](/ui-components/card) | The ubiquitous container of all elements! The div of any component system. Cards can contain anything you want – content, widgets, settings, forms, you name it. | -| [Checkbox](/ui-components/checkbox) | Checkboxes are used to select multiple options from a list of options. | -| [Datepicker](/ui-components/datepicker) | Pick some dates! Also, times, if you want. | -| [Dropdown](/ui-components/dropdown) | Displays a menu to the user—such as a set of actions or functions—triggered by a button, with full keyboard navigation support. | -| [Heading](/ui-components/heading) | Clean and consistent headings and subheadings. | -| [Icon](/ui-components/icon) | You may use many icons from the streamline icon set. | -| [Input](/ui-components/input) | The classic form text input. | -| [Modal](/ui-components/modal) | Display content in a layer above the main page. Ideal for confirmations, alerts, and forms. | -| [Popover](/ui-components/popover) | Display rich content in a portal, triggered by a button. | -| [Radio](/ui-components/radio) | Radio buttons are used to select a single option from a list of options. | -| [Select](/ui-components/select) | Displays a list of options for the user to pick from—triggered by an input style button. | -| [Separator](/ui-components/separator) | Clean and consistent visual separators for content sections. | -| [Splitter](/ui-components/splitter) | Splitter is a component that allows you to split content into multiple, resizable panes. | -| [Switch](/ui-components/switch) | Toggle a setting on or off. Suitable for binary options like enabling or disabling features. | -| [Table](/ui-components/table) | A responsive table component for displaying structured data in rows and columns. | -| [Tabs](/ui-components/tabs) | Tabs are a way to organize content into different sections. | -| [Textarea](/ui-components/textarea) | Simple multi-line text input. | +| [Checkbox](/ui-components/checkbox) | Checkboxes are used to select multiple options from a list of options. | +| [Datepicker](/ui-components/datepicker) | Pick some dates! Also, times, if you want. | +| [Dropdown](/ui-components/dropdown) | Displays a menu to the user—such as a set of actions or functions—triggered by a button, with full keyboard navigation support. | +| [Heading](/ui-components/heading) | Clean and consistent headings and subheadings. | +| [Icon](/ui-components/icon) | You may use many icons from the streamline icon set. | +| [Input](/ui-components/input) | The classic form text input. | +| [Modal](/ui-components/modal) | Display content in a layer above the main page. Ideal for confirmations, alerts, and forms. | +| [Popover](/ui-components/popover) | Display rich content in a portal, triggered by a button. | +| [Radio](/ui-components/radio) | Radio buttons are used to select a single option from a list of options. | +| [Select](/ui-components/select) | Displays a list of options for the user to pick from—triggered by an input style button. | +| [Separator](/ui-components/separator) | Clean and consistent visual separators for content sections. | +| [Splitter](/ui-components/splitter) | Splitter is a component that allows you to split content into multiple, resizable panes. | +| [Stack](/ui-components/stack) | Stacks are a good way of adding a layer of UX to the Control Panel. Ideal for short forms or editing related content. | +| [Switch](/ui-components/switch) | Toggle a setting on or off. Suitable for binary options like enabling or disabling features. | +| [Table](/ui-components/table) | A responsive table component for displaying structured data in rows and columns. | +| [Tabs](/ui-components/tabs) | Tabs are a way to organize content into different sections. | +| [Textarea](/ui-components/textarea) | Simple multi-line text input. | From 7d9ed0a268d657daafc3ed8117aeb42189807fbd Mon Sep 17 00:00:00 2001 From: Duncan McClean Date: Tue, 16 Dec 2025 11:23:34 +0000 Subject: [PATCH 3/4] point towards modal page on storybook docs site --- content/collections/pages/modals.md | 39 ++++++----------------------- 1 file changed, 8 insertions(+), 31 deletions(-) diff --git a/content/collections/pages/modals.md b/content/collections/pages/modals.md index d13805f21..f8963daa6 100644 --- a/content/collections/pages/modals.md +++ b/content/collections/pages/modals.md @@ -2,35 +2,12 @@ title: Modals id: 88bf3f66-4b80-42c9-8b65-bef712b8f413 --- -## Modals -You can create modals using the `` component. - -``` html - -
- Your modal's content. - -
- -``` - -When a modal is rendered in the DOM, it will be automatically opened. So, to control whether or not it's open, you should add a `v-if` to it. - -When closed, the modal will emit a `closed` event. You should use this event to change the 'open' condition back to `false`. - -You should also add a button somewhere inside your modal to be able to close it. To close it, emit a `closed` event. +You can learn more about our `` component on the [UI Component docs](https://ui.statamic.dev/?path=/docs/components-modal--docs). ## Confirmation Modals -There is a prebuilt modal component available to you if you don't need something completely custom. - -Similar to the regular modal, you should use a `v-if` to make it appear. +There is a prebuilt modal component available to you if you don't need something completely custom. You should use `v-if` to make it appear. ``` html -

More complicated

-

stuff here.

- - ``` +``` html + +

More complicated

+

stuff here.

+ +``` From d9dfe9ba6db3ece6878454c0768b3c3ca49db582 Mon Sep 17 00:00:00 2001 From: Duncan McClean Date: Tue, 16 Dec 2025 11:25:36 +0000 Subject: [PATCH 4/4] wip --- content/collections/pages/vue-2-to-3.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/collections/pages/vue-2-to-3.md b/content/collections/pages/vue-2-to-3.md index 330310b28..962253800 100644 --- a/content/collections/pages/vue-2-to-3.md +++ b/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