Wrap bare value box value in p tag (#668)

Author: schloerke

CHANGELOG.md

@@ -14,6 +14,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+Fixes #646: Wrap bare value box value in `<p />` tags. (#668)
+
 ### Other changes
 
 

e2e/controls.py

@@ -2445,7 +2445,6 @@ def expect_full_screen(
 
 class ValueBox(
     _WidthLocM,
-    _CardBodyM,
     _CardFullScreenM,
     _InputWithContainer,
 ):
@@ -2469,14 +2468,14 @@ def __init__(self, page: Page, id: str) -> None:
             loc="> div > .value-box-grid",
         )
         value_box_grid = self.loc
-        self.loc = value_box_grid.locator(
-            "> div > .value-box-area > :not(:first-child)"
-        )
         self.loc_showcase = value_box_grid.locator("> div > .value-box-showcase")
         self.loc_title = value_box_grid.locator(
-            "> div > .value-box-area > :first-child"
+            "> div > .value-box-area > :nth-child(1)"
+        )
+        self.loc = value_box_grid.locator("> div > .value-box-area > :nth-child(2)")
+        self.loc_body = value_box_grid.locator(
+            "> div > .value-box-area > :not(:nth-child(1), :nth-child(2))"
         )
-        self.loc_body = self.loc
         self._loc_fullscreen = self.loc_container.locator(
             "> bslib-tooltip > .bslib-full-screen-enter"
         )
@@ -2505,6 +2504,29 @@ def expect_title(
             timeout=timeout,
         )
 
+    def expect_value(
+        self,
+        text: PatternOrStr,
+        *,
+        timeout: Timeout = None,
+    ) -> None:
+        playwright_expect(self.loc).to_have_text(
+            text,
+            timeout=timeout,
+        )
+
+    def expect_body(
+        self,
+        text: PatternOrStr | list[PatternOrStr],
+        *,
+        timeout: Timeout = None,
+    ) -> None:
+        """Note: If testing against multiple elements, text should be an array"""
+        playwright_expect(self.loc_body).to_have_text(
+            text,
+            timeout=timeout,
+        )
+
     # hard to test since it can be customized by user
     # def expect_showcase_layout(self, layout, *, timeout: Timeout = None) -> None:
     #     raise NotImplementedError()

e2e/experimental/value_box/app.py

@@ -22,9 +22,10 @@
         id="valuebox1",
     ),
     x.ui.value_box(
-        "KPI Title",
-        ui.h1(ui.HTML("$1 <i>Billion</i> Dollars")),
-        ui.span(arrow_up, " 30% VS PREVIOUS 30 DAYS"),
+        "title",
+        "value",
+        ui.p("content"),
+        ui.p("more body"),
         showcase=piggy_bank,
         class_="bg-success",
         full_screen=True,

e2e/experimental/value_box/test_valuebox.py

@@ -8,12 +8,27 @@
 def test_valuebox(page: Page, local_app: ShinyAppProc, value_box_id: str) -> None:
     page.goto(local_app.url)
 
-    value_box = ValueBox(page, value_box_id)
-    value_box.expect_height(None)
-    value_box.expect_title("KPI Title")
-    value_box.expect_full_screen(False)
-    value_box.open_full_screen()
-    value_box.expect_full_screen(True)
-    value_box.expect_body(["$1 Billion Dollars", "30% VS PREVIOUS 30 DAYS"])
-    value_box.close_full_screen()
-    value_box.expect_full_screen(False)
+    value_box1 = ValueBox(page, "valuebox1")
+    value_box1.expect_height(None)
+    value_box1.expect_title("KPI Title")
+    value_box1.expect_value("$1 Billion Dollars")
+    value_box1.expect_full_screen(False)
+    value_box1.open_full_screen()
+    value_box1.expect_full_screen(True)
+    value_box1.expect_body(["30% VS PREVIOUS 30 DAYS"])
+    value_box1.close_full_screen()
+    value_box1.expect_full_screen(False)
+
+    value_box2 = ValueBox(page, "valuebox2")
+    value_box2.expect_height(None)
+    value_box2.expect_title("title")
+    value_box2.expect_value("value")
+    value_box2.expect_full_screen(False)
+    value_box2.open_full_screen()
+    value_box2.expect_full_screen(True)
+    value_box2.expect_body(["content", "more body"])
+    value_box2.close_full_screen()
+    value_box2.expect_full_screen(False)
+
+    title_tag_name = value_box2.loc_title.evaluate("el => el.tagName.toLowerCase()")
+    assert title_tag_name == "p"

shiny/experimental/ui/_valuebox.py

@@ -96,7 +96,7 @@ def value_box(
         showcase_layout = showcase_left_center()
     if isinstance(title, (str, int, float)):
         title = tags.p(str(title), class_="h6 mb-1")
-    if isinstance(title, (str, int, float)):
+    if isinstance(value, (str, int, float)):
         value = tags.p(str(value), class_="h2 mb-2")
 
     contents = div(