Merge pull request #375 from primer/fix-popover-with-html-body

Fix popover with HTML body

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## main
 
+* Fix `Popover` bug where body was only returning the last line of the HTML.
+
+    *Manuel Puyol, Blake Williams*
+
 ## 0.0.30
 
 * Make `color:`, `bg:` and `border_color:` accept string values.

app/components/primer/popover_component.rb

@@ -54,7 +54,7 @@ class PopoverComponent < Primer::Component
 
       # This is a hack to allow the parent to set the slot's content
       @body_arguments = system_arguments
-      block&.call
+      view_context.capture { block&.call }
     }
 
     # @example Default
@@ -83,7 +83,24 @@ class PopoverComponent < Primer::Component
     #       Activity feed
     #     <% end %>
     #     <% component.body(caret: :left) do %>
-    #       This is the large Popover body.
+    #       This is the Popover body.
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example With HTML body
+    #   <%= render Primer::PopoverComponent.new do |component| %>
+    #     <% component.heading do %>
+    #       Activity feed
+    #     <% end %>
+    #     <% component.body(caret: :left) do %>
+    #       <p> This is the Popover body.</p>
+    #       <div>
+    #         This is using HTML.
+    #         <ul>
+    #           <li>Thing #1</li>
+    #           <li>Thing #2</li>
+    #         </ul>
+    #       </div>
     #     <% end %>
     #   <% end %>
     #

docs/content/components/popover.md

@@ -47,15 +47,37 @@ By default, the popover renders with absolute positioning, meaning it should usu
 
 ### Caret position
 
-<Example src="<div class='Popover position-relative right-0 left-0'>  <div class='Popover-message Box Popover-message--left p-4 mt-2 mx-auto text-left color-shadow-large'>    <h4 class='mb-2'>    Activity feed</h4>        This is the large Popover body.</div></div>" />
+<Example src="<div class='Popover position-relative right-0 left-0'>  <div class='Popover-message Box Popover-message--left p-4 mt-2 mx-auto text-left color-shadow-large'>    <h4 class='mb-2'>    Activity feed</h4>        This is the Popover body.</div></div>" />
 
 ```erb
 <%= render Primer::PopoverComponent.new do |component| %>
   <% component.heading do %>
     Activity feed
   <% end %>
   <% component.body(caret: :left) do %>
-    This is the large Popover body.
+    This is the Popover body.
+  <% end %>
+<% end %>
+```
+
+### With HTML body
+
+<Example src="<div class='Popover position-relative right-0 left-0'>  <div class='Popover-message Box Popover-message--left p-4 mt-2 mx-auto text-left color-shadow-large'>    <h4 class='mb-2'>    Activity feed</h4>        <p> This is the Popover body.</p>    <div>      This is using HTML.      <ul>        <li>Thing #1</li>        <li>Thing #2</li>      </ul>    </div></div></div>" />
+
+```erb
+<%= render Primer::PopoverComponent.new do |component| %>
+  <% component.heading do %>
+    Activity feed
+  <% end %>
+  <% component.body(caret: :left) do %>
+    <p> This is the Popover body.</p>
+    <div>
+      This is using HTML.
+      <ul>
+        <li>Thing #1</li>
+        <li>Thing #2</li>
+      </ul>
+    </div>
   <% end %>
 <% end %>
 ```