Use default slot for popover content

WordPress · Nov 11, 2021 · 596a214 · 596a214
1 parent 04f4e3c
commit 596a214
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 13 deletions.
diff --git a/src/components/VPopover/VPopover.vue b/src/components/VPopover/VPopover.vue
@@ -29,7 +29,7 @@
       :aria-labelledby="labelledBy"
     >
       <!-- @slot The content of the popover -->
-      <slot name="content" />
+      <slot name="default" />
     </VPopoverContent>
   </div>
 </template>

diff --git a/src/components/VPopover/meta/VPopover.stories.js b/src/components/VPopover/meta/VPopover.stories.js
@@ -31,9 +31,7 @@ const SinglePopoverStory = (args, { argTypes }) => ({
         <template #trigger="{ visible, a11yProps }">
           <VButton :pressed="visible" v-bind="a11yProps">{{ visible ? 'Close' : 'Open' }}</VButton>
         </template>
-        <template #content>
-          <div>Code is Poetry</div>
-        </template>
+        <div>Code is Poetry</div>
       </VPopover>
     </div>
   `,
@@ -57,18 +55,14 @@ const TwoPopoverStory = (args, { argTypes }) => ({
         <template #trigger="{ visible, a11yProps }">
           <VButton :pressed="visible" v-bind="a11yProps">{{ visible ? 'First popover open' : 'First popover closed' }}</VButton>
         </template>
-        <template #content>
-          <div>First popover content</div>
-        </template>
+        <div>First popover content</div>
       </VPopover>
       <div class="h-5">Some content</div>
       <VPopover label="Second popover" v-bind="$props">
         <template #trigger="{ visible, a11yProps }">
           <VButton :pressed="visible" v-bind="a11yProps">{{ visible ? 'Second popover open' : 'Second popover closed' }}</VButton>
         </template>
-        <template #content>
-          <div>Second popover content</div>
-        </template>
+        <div>Second popover content</div>
       </VPopover>
     </div>
   `,

diff --git a/test/unit/specs/components/v-popover.spec.js b/test/unit/specs/components/v-popover.spec.js
@@ -30,9 +30,7 @@ const TestWrapper = Vue.component('TestWrapper', {
         <template #trigger="{ visible, a11yProps }">
           <VButton :pressed="visible" v-bind="a11yProps">{{ visible ? 'Close' : 'Open' }}</VButton>
         </template>
-        <template #content>
-          <div :tabindex="popoverContentTabIndex">Code is Poetry</div>
-        </template>
+        <div :tabindex="popoverContentTabIndex">Code is Poetry</div>
       </VPopover>
     </div>
   `,