Allow reactivity in popovers and tooltips (#1748)

Currently, popovers and tooltips are implemented using bootstrap-vue directives. Such an implementation is not reactive which limits the content that can be used in a popover/tooltip. Reactivity is important for future enhancements like supporting the src attribute (#59). Furthermore, it is incompatible with SSR, resulting in hydration problems that have arisen in #1615. Using Vue components for tooltips and popovers, and Portals for triggers, allows us to avoid the issues with reactivity and SSR. Let's use components instead of bootstrap-vue directives to implement popovers and tooltips. This gives better support of reactivity while avoiding SSR issues.
MarkBind · Feb 13, 2022 · 6251e14 · 6251e14
1 parent b191292
commit 6251e14
Show file tree

Hide file tree

Showing 24 changed files with 229 additions and 217 deletions.
diff --git a/docs/userGuide/syntax/popovers.mbdf b/docs/userGuide/syntax/popovers.mbdf
@@ -79,8 +79,8 @@ This is the same <trigger for="pop:trigger_id">trigger</trigger> as last one.
 Name | Type | Default | Description
 ---- | ---- | ------- | ------
 trigger | `String` |	`hover`	| How the Popover is triggered.<br>Supports: `click`, `focus`, `hover`.
-header{{slot_icon_trigger}} | `String` | `''` | Popover header, supports inline markdown text.
-content{{slot_icon_trigger}} | `String` | `''` | Popover content, supports inline markdown text.
+header{{slot_info_trigger}} | `String` | `''` | Popover header, supports MarkDown text.
+content{{slot_info_trigger}} | `String` | `''` | Popover content, supports MarkDown text.
 placement | `String` | `top` | How to position the Popover.<br>Supports: `top`, `left`, `right`, `bottom`.
 
 

diff --git a/packages/cli/test/functional/test_site/expected/index.html b/packages/cli/test/functional/test_site/expected/index.html
@@ -364,7 +364,7 @@ <h4 id="user-surveys"><span id="user-surveys" class="anchor"></span>User surveys
               any current system or a new innovation.</p>
             <h4 id="focus-groups"><span id="focus-groups" class="anchor"></span>Focus groups<a class="fa fa-anchor" href="#focus-groups" onclick="event.stopPropagation()"></a></h4>
             <p>Focus groups are a kind of informal interview within an interactive group setting.
-              A <span data-mb-component-type="tooltip" v-b-tooltip.hover.top.html="tooltipInnerContentGetter" class="trigger"><span data-mb-slot-name="_content">e.g. potential users, beta testers</span>group of people</span>
+              A <tooltip><template #content>e.g. potential users, beta testers</template>group of people</tooltip>
               are asked about their understanding of a specific issue or a process.
               Focus groups can bring out undiscovered conflicts and misunderstandings among stakeholder interests which can then be
               resolved or clarified as necessary.</p>
@@ -704,32 +704,34 @@ <h6 class="always-index" id="level-6-header-outside-headingsearchindex-with-alwa
         <hr class="footnotes-sep">
         <section class="footnotes">
           <ol class="footnotes-list">
-            <span id="pop:footnotefn-1-1" data-mb-component-type="popover" v-b-popover.hover.top.html="popoverInnerGetters" class="trigger">
-              <span data-mb-slot-name="content">
+            <popover id="pop:footnotefn-1-1">
+              <template #content>
                 <div>
                   <p>Here is the footnote. Footnotes will appear at the bottom of the page.</p>
 
                 </div>
-              </span>
-            </span><span id="pop:footnotefn-1-2" data-mb-component-type="popover" v-b-popover.hover.top.html="popoverInnerGetters" class="trigger">
-              <span data-mb-slot-name="content">
+              </template>
+            </popover>
+            <popover id="pop:footnotefn-1-2">
+              <template #content>
                 <div>
                   <p>Here's one with multiple blocks.</p>
                   <p>Subsequent paragraphs are indented to show that they
                     belong to the previous footnote.</p>
 
                 </div>
-              </span>
-            </span><span id="pop:footnotefn-1-3" data-mb-component-type="popover" v-b-popover.hover.top.html="popoverInnerGetters" class="trigger">
-              <span data-mb-slot-name="content">
+              </template>
+            </popover>
+            <popover id="pop:footnotefn-1-3">
+              <template #content>
                 <div>
                   <p>Inlines notes are easier to write, since
                     you don't have to pick an identifier and move down to type the
                     note.</p>
 
                 </div>
-              </span>
-            </span>
+              </template>
+            </popover>
 
             <li id="fn-1-1" class="footnote-item">
               <p>Here is the footnote. Footnotes will appear at the bottom of the page.</p>

diff --git a/packages/cli/test/functional/test_site/expected/index.page-vue-render.js b/packages/cli/test/functional/test_site/expected/index.page-vue-render.js
diff --git a/packages/cli/test/functional/test_site/expected/testIncludeBoilerplate.html b/packages/cli/test/functional/test_site/expected/testIncludeBoilerplate.html
@@ -275,21 +275,22 @@ <h1 id="hello"><span id="hello" class="anchor"></span>hello<a class="fa fa-ancho
         <hr class="footnotes-sep">
         <section class="footnotes">
           <ol class="footnotes-list">
-            <span id="pop:footnotefn-1-1" data-mb-component-type="popover" v-b-popover.hover.top.html="popoverInnerGetters" class="trigger">
-              <span data-mb-slot-name="content">
+            <popover id="pop:footnotefn-1-1">
+              <template #content>
                 <div>
                   <p>Here is the footnote. Footnotes will appear at the bottom of the page.</p>
 
                 </div>
-              </span>
-            </span><span id="pop:footnotefn-1-2" data-mb-component-type="popover" v-b-popover.hover.top.html="popoverInnerGetters" class="trigger">
-              <span data-mb-slot-name="content">
+              </template>
+            </popover>
+            <popover id="pop:footnotefn-1-2">
+              <template #content>
                 <div>
                   <p>Here's one with multiple blocks.</p>
 
                 </div>
-              </span>
-            </span>
+              </template>
+            </popover>
 
             <li id="fn-1-1" class="footnote-item">
               <p>Here is the footnote. Footnotes will appear at the bottom of the page.</p>

diff --git a/packages/cli/test/functional/test_site/expected/testIncludeBoilerplate.page-vue-render.js b/packages/cli/test/functional/test_site/expected/testIncludeBoilerplate.page-vue-render.js
diff --git a/packages/cli/test/functional/test_site/expected/testPopoverTrigger.html b/packages/cli/test/functional/test_site/expected/testPopoverTrigger.html
@@ -208,13 +208,14 @@ <h3 id="testing-site-nav"><span id="testing-site-nav" class="anchor"></span>Test
       </overlay-source>
       <div id="content-wrapper" class="fixed-header-padding">
         <p><strong>Popover initiated by trigger should honor trigger attribute</strong></p>
-        <span id="pop:xp-user-stories" trigger="click" data-mb-component-type="popover" v-b-popover.click.top.html="popoverInnerGetters" class="trigger-click">
+        <popover id="pop:xp-user-stories" trigger="click">
           popover
-          <span data-mb-slot-name="content">
+          <template #content>
             <div>
               User stories
             </div>
-          </span></span>
+          </template>
+        </popover>
         <i class="fa fa-arrow-circle-up fa-lg d-print-none" id="scroll-top-button" onclick="handleScrollTop()" aria-hidden="true"></i>
       </div>
       <overlay-source id="page-nav" class="fixed-header-padding" tag-name="nav" to="page-nav">

diff --git a/packages/cli/test/functional/test_site/expected/testPopoverTrigger.page-vue-render.js b/packages/cli/test/functional/test_site/expected/testPopoverTrigger.page-vue-render.js
diff --git a/packages/cli/test/functional/test_site/expected/testTooltipSpacing.html b/packages/cli/test/functional/test_site/expected/testTooltipSpacing.html
@@ -212,7 +212,9 @@ <h1 id="569-stray-space-after-tooltip"><span id="569-stray-space-after-tooltip"
 </span><span>
 </span><span>&lt;trigger&gt;trigger&lt;/trigger&gt;, test
 </span></code></pre>
-        <p><span data-mb-component-type="tooltip" v-b-tooltip.hover.top.html="tooltipInnerContentGetter" class="trigger">tooltip</span>, test</p>
+        <p>
+          <tooltip>tooltip</tooltip>, test
+        </p>
         <p>
           <trigger>trigger</trigger>, test
         </p>

diff --git a/packages/cli/test/functional/test_site/expected/testTooltipSpacing.page-vue-render.js b/packages/cli/test/functional/test_site/expected/testTooltipSpacing.page-vue-render.js
diff --git a/packages/cli/test/functional/test_site_algolia_plugin/expected/index.html b/packages/cli/test/functional/test_site_algolia_plugin/expected/index.html
@@ -53,16 +53,19 @@
       Content
     </panel>
     <p><strong>Popover content should have algolia-no-index class</strong></p>
-    <span effect="fade" placement="top" data-mb-component-type="popover" v-b-popover.hover.top.html="popoverInnerGetters" class="trigger"><span data-mb-slot-name="header" class="algolia-no-index">Title</span>
-      <span data-mb-slot-name="content" class="algolia-no-index">
+    <popover effect="fade" placement="top"><template #header>Title</template>
+      <template #content>
         <div>Content should have `algolia-no-index` class</div>
-      </span>
-      <button class="btn btn-secondary">Trigger should not have `algolia-no-index` class</button></span>
-    <span effect="fade" placement="top" data-mb-component-type="popover" v-b-popover.hover.top.html="popoverInnerGetters" class="trigger"><span data-mb-slot-name="header" class="algolia-no-index">Title</span><span data-mb-slot-name="content" class="algolia-no-index">Content should have <code class="hljs inline no-lang" v-pre>algolia-no-index</code> class</span>
-      <button class="btn btn-secondary">Trigger should not have `algolia-no-index` class</button></span>
+      </template>
+      <button class="btn btn-secondary">Trigger should not have `algolia-no-index` class</button>
+    </popover>
+    <popover effect="fade" placement="top"><template #header>Title</template><template #content>Content should have <code class="hljs inline no-lang" v-pre>algolia-no-index</code> class</template>
+      <button class="btn btn-secondary">Trigger should not have `algolia-no-index` class</button>
+    </popover>
     <p><strong>Tooltip content should have algolia-no-index class</strong></p>
-    <span placement="top" data-mb-component-type="tooltip" v-b-tooltip.hover.top.html="tooltipInnerContentGetter" class="trigger"><span data-mb-slot-name="_content" class="algolia-no-index">Content should have <code class="hljs inline no-lang" v-pre>algolia-no-index</code> class</span>
-      <button class="btn btn-secondary">Trigger should not have `algolia-no-index` class</button></span>
+    <tooltip placement="top"><template #content>Content should have <code class="hljs inline no-lang" v-pre>algolia-no-index</code> class</template>
+      <button class="btn btn-secondary">Trigger should not have `algolia-no-index` class</button>
+    </tooltip>
     <p><strong>Question hint and answer should have algolia-no-index class</strong></p>
     <question>
       Question should not have `algolia-no-index` class