From 3e7a787d662e6850c423e62e3e285f657ebda4bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ciar=C3=A1n=20Ainsworth?= <sporiff@funkwhale.audio> Date: Mon, 27 Nov 2023 13:20:21 +0000 Subject: [PATCH] docs: add section descriptions Part-of: <https://dev.funkwhale.audio/funkwhale/ui/-/merge_requests/93> --- docs/components/alert/index.md | 4 ++-- docs/components/modal/index.md | 10 ++++++++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/docs/components/alert/index.md b/docs/components/alert/index.md index b3b8de9..c9962fc 100644 --- a/docs/components/alert/index.md +++ b/docs/components/alert/index.md @@ -3,13 +3,13 @@ | Prop | Data type | Required? | Default | Description | | ------------- | -------------------------------------------------- | --------- | ----------- | ----------------------- | -| `color` | `blue` \| `red` \| `purple` \| `green` \| `yellow` | No | `secondary` | Renders a colored alert | +| `color` | `blue` \| `red` \| `purple` \| `green` \| `yellow` | No | `secondary` | The color of the alert container | ## Alert colors -Funkwhale alert support a range of pastel colors to create visually appealing interfaces. +Funkwhale alerts support a range of pastel colors for visual appeal. ::: details Colors diff --git a/docs/components/modal/index.md b/docs/components/modal/index.md index 314125f..6fe12ae 100644 --- a/docs/components/modal/index.md +++ b/docs/components/modal/index.md @@ -22,8 +22,8 @@ const open5 = ref(false) | Prop | Data type | Required? | Default | Description | | ------------- | ----------------- | --------- | ------- | ------------------------ | -| `title` | `string` | Yes | | Modal title | -| `v-model` | `true` \| `false` | Yes | | Should the modal be open | +| `title` | `string` | Yes | | The modal title | +| `v-model` | `true` \| `false` | Yes | | Whether the modal is open or not | @@ -49,6 +49,8 @@ const open5 = ref(false) ## Modal actions +Use the `#actions` slot to add actions to a modal. Actions typically take the form of [buttons](/components/button/basic). + ```vue-html <fw-modal v-model="open" title="My modal"> Modal content @@ -86,6 +88,8 @@ const open5 = ref(false) ## Nested modals +You can nest modals to allow users to open a modal from inside another modal. This can be useful when creating a multi-step workflow. + ```vue-html <fw-modal v-model="open" title="My modal"> <fw-modal v-model="openNested" title="My modal"> @@ -116,6 +120,8 @@ const open5 = ref(false) ## Alert inside modal +You can nest [Funkwhale alerts](/components/alert/) to visually highlight content within the modal. + ```vue-html <fw-modal v-model="open" title="My modal"> Modal content -- GitLab