docs: BToast invalid docs (#1809)

Co-authored-by: Ángel Roldán Martínez <Angel.RoldanMartinez@Clarivate.com>
bootstrap-vue-next · Mar 10, 2024 · 26dda49 · 26dda49
1 parent d259701
commit 26dda49
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 30 deletions.
diff --git a/apps/docs/src/data/components/toast.data.ts b/apps/docs/src/data/components/toast.data.ts
@@ -5,100 +5,114 @@ export default {
     {
       component: 'BToast',
       props: [
-        {
-          prop: 'delay',
-          type: 'string | number',
-          default: 5000,
-        },
         {
           prop: 'bodyClass',
           type: 'ClassValue',
           default: undefined,
+          description: 'CSS class (or classes) to add to the toast body element',
         },
         {
           prop: 'body',
           type: 'string',
           default: undefined,
+          description: 'The text content of the body',
         },
         {
           prop: 'headerClass',
           type: 'ClassValue',
           default: undefined,
+          description: 'CSS class (or classes) to add to the toast header element',
         },
         {
           prop: 'headerTag',
           type: 'string',
           default: 'div',
-        },
-        {
-          prop: 'animation',
-          type: 'boolean',
-          default: true,
+          description: 'Specify the HTML tag to render instead of the default tag for the footer',
         },
         {
           prop: 'id',
           type: 'string',
           default: undefined,
+          description:
+            'Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed',
         },
         {
           prop: 'isStatus',
           type: 'boolean',
           default: false,
+          description:
+            "When set to 'true', makes the toast have attributes aria-live=polite and role=status. When 'false' aria-live will be 'assertive' and role will be 'alert'",
         },
         {
           prop: 'autoHide',
           type: 'boolean',
           default: true,
+          description: 'Used to set if the toast will be dismissed automatically',
         },
         {
           prop: 'noCloseButton',
           type: 'boolean',
           default: false,
+          description: 'When set, hides the close button in the toast header',
         },
         {
           prop: 'noFade',
           type: 'boolean',
           default: false,
+          description:
+            'When set to `true`, disables the fade animation/transition on the component',
         },
         {
           prop: 'noHoverPause',
           type: 'boolean',
           default: false,
+          description:
+            'When set, disables the pausing of the auto hide delay when the mouse hovers the toast',
         },
         {
           prop: 'solid',
           type: 'boolean',
           default: false,
+          description:
+            'When set, renders the toast with a solid background rather than translucent',
         },
         {
           prop: 'title',
           type: 'string',
           default: undefined,
+          description: "The toast's title text",
         },
         {
           prop: 'modelValue',
           type: 'boolean | number',
           default: false,
+          description:
+            'Sets if the toast is visible or the number of milliseconds that the toast will be dismissed',
         },
         {
           prop: 'toastClass',
           type: 'ClassValue',
           default: undefined,
+          description: 'CSS class (or classes) to add to the toast wrapper element',
         },
         {
           prop: 'showOnPause',
           type: 'boolean',
           default: true,
+          description: "When set, keeps the toast visible when it's paused",
         },
         {
           prop: 'interval',
           type: 'number | string',
           default: '1000',
+          description: 'The interval of which the countdown timer will refresh itself',
         },
         {
           prop: 'progressProps',
           type: "Omit<BProgressBarProps, 'label' | 'labelHtml' | 'max' | 'value'>",
           default: undefined,
+          description:
+            'The properties to define the progress bar in the toast. No toast will be shown if left undefined',
         },
       ],
       slots: [],

diff --git a/apps/docs/src/docs/components/toast.md b/apps/docs/src/docs/components/toast.md
@@ -150,15 +150,18 @@ As you may have noticed, `BToast` counts down similarly to `BAlert` it uses the
 <HighlightCard>
   <BButton
     @click="
-      show?.('Watch me!', {
-        title: 'Counting down!',
-        variant: 'info',
-        pos: 'middle-center',
-        value: 10000,
-        interval: 100,
-        progressProps: {
-          variant: 'danger',
-        },
+      show?.({
+        props: {
+          title: 'Counting down!',
+          variant: 'info',
+          pos: 'middle-center',
+          value: 10000,
+          interval: 100,
+          progressProps: {
+            variant: 'danger',
+          },
+          body: 'Watch me!'
+        }
       })
     "
   >
@@ -170,14 +173,17 @@ As you may have noticed, `BToast` counts down similarly to `BAlert` it uses the
 <template>
   <BButton
     @click="
-      show?.('Watch me!', {
-        title: 'Counting down!',
-        variant: 'info',
-        pos: 'middle-center',
-        value: 10000,
-        interval: 100,
-        progressProps: {
-          variant: 'danger',
+      show?.({
+        props: {
+          title: 'Counting down!',
+          variant: 'info',
+          pos: 'middle-center',
+          value: 10000,
+          interval: 100,
+          progressProps: {
+            variant: 'danger',
+          },
+          body: 'Watch me!',
         },
       })
     "
@@ -204,14 +210,18 @@ As you may have noticed in that example, there was a built-in progress bar. This
 `Toast` can accept `BLink` props which will modify its behavior
 
 <HighlightCard>
-  <BButton @click="show?.('I am a BLink', {href: 'https://getbootstrap.com/', target: '_blank'})">
+  <BButton @click="show?.({ props: {href: 'https://getbootstrap.com/', target: '_blank', body: 'I am a BLink'}})">
     Show
   </BButton>
   <template #html>
 
 ```vue
 <template>
-  <BButton @click="show?.('I am a BLink', {href: 'https://getbootstrap.com/', target: '_blank'})">
+  <BButton
+    @click="
+      show?.({props: {href: 'https://getbootstrap.com/', target: '_blank', body: 'I am a BLink'}})
+    "
+  >
     Show
   </BButton>
 </template>
@@ -266,7 +276,11 @@ let showValue: undefined | symbol
 
 const showMe = () => {
   if (typeof showValue === 'symbol') return
-  showValue = show?.('Showing', {value: true, variant: 'success', pos: 'bottom-center'})
+  showValue = show?.({
+    props: {
+      value: true, variant: 'success', pos: 'bottom-center', body: 'Showing'
+    }
+  })
 }
 
 const hideMe = () => {