Popover fixes (#757)

* Fix issue related to legacy trigger

* Fix support for hide_arrow

* Add in support for offset

* Improve tests

* Bump react-bootstrap version

* Format

* Add additional popover examples

* Change default body behaviour

* Add legacy integration test

* Improve popover doc examples

* Format

* Update dependencies

* Remove redundant Jest config

* Set rootClose to false if legacy trigger removed

* Remove rogue comma

* Fix popover tests

Co-authored-by: tcbegley <[email protected]>

Author: glsdown

docs/components_page/components/popover.md

@@ -5,7 +5,13 @@ lead: Use the Popover component to add Bootstrap popovers to any component in yo
 
 ## Examples
 
-To use `Popover`, add it to your layout, and set the `target` argument to the `id` of the component you would like to attach the popover to. The easiest way to trigger the popover is to specify the `trigger` property. This should be a string containing any of the following 4 values (space separated)
+To use `Popover`, add it to your layout, and set the `target` argument to the `id` of the component you would like to attach the popover to. You can add content to the popover quickly by specifying `body=True`, or make use of the `PopoverBody` (see below for more details).
+
+{{example:components/popover/simple.py:popovers}}
+
+## Trigger Types
+
+The easiest way to trigger the popover is to specify the `trigger` property. This should be a string containing any of the following 4 values (space separated)
 
 *  `"click"`: toggles the popover when the target is clicked.
 *  `"focus"`: toggles the popover when the target receives focus
@@ -14,6 +20,12 @@ To use `Popover`, add it to your layout, and set the `target` argument to the `i
 
 {{example:components/popover/popover.py:popovers}}
 
+## Popover components
+
+You can build a styled `Popover` by making use of the `PopoverHeader` and `PopoverBody`.
+
+{{example:components/popover/popover_components.py:popovers}}
+
 ## Toggling the Popover with callbacks
 
 Alternatively, you can manually control the appearance of the popover using callbacks by setting the `is_open` property of the `Popover`. This can be useful for example when you want to make the popover appear after the user interacts with something other than the target component as demonstrated in the below example.
@@ -26,6 +38,13 @@ Use the `placement` argument to control the placement of the `Popover`. The basi
 
 {{example:components/popover/direction.py:popovers}}
 
+## Styling
+
+You can use `hide_arrow` to remove the arrow, and the `offset` property to offset the popover in relation to the target.
+
+{{example:components/popover/styling.py:popovers}}
+
+
 {{apidoc:src/components/popover/Popover.js}}
 
 {{apidoc:src/components/popover/PopoverHeader.js}}

docs/components_page/components/popover/popover.R

@@ -1,9 +1,6 @@
 library(dashBootstrapComponents)
 
-popover_children <- list(
-  dbcPopoverHeader("Popover header"),
-  dbcPopoverBody("And here's some amazing content. Cool!")
-)
+popover_children <- "I am a popover!"
 
 popovers <- div(
   list(
@@ -14,8 +11,8 @@ popovers <- div(
     ),
     dbcPopover(
       popover_children,
-      id = "click",
       target = "click-target",
+      body = TRUE,
       trigger = "click"
     ),
     dbcButton(
@@ -25,8 +22,8 @@ popovers <- div(
     ),
     dbcPopover(
       popover_children,
-      id = "focus",
       target = "focus-target",
+      body = TRUE,
       trigger = "focus"
     ),
     dbcButton(
@@ -36,18 +33,18 @@ popovers <- div(
     ),
     dbcPopover(
       popover_children,
-      id = "hover",
       target = "hover-target",
-      trigger = "hover",
+      body = TRUE,
+      trigger = "hover"
     ),
     dbcButton("Legacy",
       id = "legacy-target", n_clicks = 0,
       color = "danger"
     ),
     dbcPopover(
       popover_children,
-      id = "legacy",
       target = "legacy-target",
+      body = TRUE,
       trigger = "legacy"
     )
   )

docs/components_page/components/popover/popover.jl

@@ -1,9 +1,6 @@
 using DashBootstrapComponents, DashHtmlComponents
 
-popover_children = [
-    dbc_popoverheader("Popover header"),
-    dbc_popoverbody("And here's some amazing content. Cool!"),
-];
+popover_children = "I am a popover!";
 
 popovers = html_div([
     dbc_button(
@@ -13,28 +10,28 @@ popovers = html_div([
         className = "me-1",
         n_clicks = 0,
     ),
-    dbc_popover(popover_children, id = "click", target = "click-target", trigger = "click"),
+    dbc_popover(popover_children, target = "click-target", body = true, trigger = "click"),
     dbc_button(
         "Focus",
         id = "focus-target",
         color = "danger",
         className = "me-1",
         n_clicks = 0,
     ),
-    dbc_popover(popover_children, id = "focus", target = "focus-target", trigger = "focus"),
+    dbc_popover(popover_children, target = "focus-target", body = true, trigger = "focus"),
     dbc_button(
         "Hover",
         id = "hover-target",
         color = "danger",
         className = "me-1",
         n_clicks = 0,
     ),
-    dbc_popover(popover_children, id = "hover", target = "hover-target", trigger = "hover"),
+    dbc_popover(popover_children, target = "hover-target", body = true, trigger = "hover"),
     dbc_button("Legacy", id = "legacy-target", color = "danger", n_clicks = 0),
     dbc_popover(
         popover_children,
-        id = "legacy",
         target = "legacy-target",
+        body = true,
         trigger = "legacy",
     ),
 ]);

docs/components_page/components/popover/popover.py

@@ -1,10 +1,7 @@
 import dash_bootstrap_components as dbc
 from dash import html
 
-popover_children = [
-    dbc.PopoverHeader("Popover header"),
-    dbc.PopoverBody("And here's some amazing content. Cool!"),
-]
+popover_children = "I am a popover!"
 
 popovers = html.Div(
     [
@@ -17,8 +14,8 @@
         ),
         dbc.Popover(
             popover_children,
-            id="click",
             target="click-target",
+            body=True,
             trigger="click",
         ),
         dbc.Button(
@@ -30,8 +27,8 @@
         ),
         dbc.Popover(
             popover_children,
-            id="focus",
             target="focus-target",
+            body=True,
             trigger="focus",
         ),
         dbc.Button(
@@ -43,15 +40,15 @@
         ),
         dbc.Popover(
             popover_children,
-            id="hover",
             target="hover-target",
+            body=True,
             trigger="hover",
         ),
         dbc.Button("Legacy", id="legacy-target", color="danger", n_clicks=0),
         dbc.Popover(
             popover_children,
-            id="legacy",
             target="legacy-target",
+            body=True,
             trigger="legacy",
         ),
     ]

docs/components_page/components/popover/popover_components.R

@@ -0,0 +1,18 @@
+library(dashBootstrapComponents)
+
+popovers <- div(
+  list(
+    dbcButton(
+      "Click Me",
+      id = "component-target", n_clicks = 0
+    ),
+    dbcPopover(
+      list(
+        dbcPopoverHeader("Popover header"),
+        dbcPopoverBody("And here's some amazing content. Cool!")
+      ),
+      target = "component-target",
+      trigger = "click"
+    )
+  )
+)

docs/components_page/components/popover/popover_components.jl

@@ -0,0 +1,13 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+popovers = html_div([
+    dbc_button("Click Me", id = "component-target", n_clicks = 0),
+    dbc_popover(
+        [
+            dbc_popoverheader("Popover header"),
+            dbc_popoverbody("And here's some amazing content. Cool!"),
+        ],
+        target = "component-target",
+        trigger = "click",
+    ),
+]);

docs/components_page/components/popover/popover_components.py

@@ -0,0 +1,20 @@
+import dash_bootstrap_components as dbc
+from dash import html
+
+popovers = html.Div(
+    [
+        dbc.Button(
+            "Click Me",
+            id="component-target",
+            n_clicks=0,
+        ),
+        dbc.Popover(
+            [
+                dbc.PopoverHeader("Popover header"),
+                dbc.PopoverBody("And here's some amazing content. Cool!"),
+            ],
+            target="component-target",
+            trigger="click",
+        ),
+    ]
+)

docs/components_page/components/popover/simple.R

@@ -0,0 +1,29 @@
+library(dashBootstrapComponents)
+
+popovers <- div(
+  list(
+    # First example - using dbcPopoverBody
+    dbcButton(
+      "popover-target",
+      id = "popover-target",
+      className = "me-1"
+    ),
+    dbcPopover(
+      dbcPopoverBody("My `target` is `popover-target`."),
+      target = "popover-target",
+      trigger = "click"
+    ),
+    # Second example - using body=TRUE
+    dbcButton(
+      "popover-alt-target",
+      id = "popover-alt-target",
+      className = "me-1"
+    ),
+    dbcPopover(
+      "My `target` is `popover-alt-target`.",
+      body = TRUE,
+      target = "popover-alt-target",
+      trigger = "click"
+    )
+  )
+)

docs/components_page/components/popover/simple.jl

@@ -0,0 +1,19 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+popovers = html_div([
+    # First example - using dbc_popoverbody
+    dbc_button("popover-target", id = "popover-target", className = "me-1"),
+    dbc_popover(
+        dbc_popoverbody("My `target` is `popover-target`."),
+        target = "popover-target",
+        trigger = "click",
+    ),
+    # Second example - using body=true
+    dbc_button("popover-alt-target", id = "popover-alt-target", className = "me-1"),
+    dbc_popover(
+        "My `target` is `popover-alt-target`.",
+        body = true,
+        target = "popover-alt-target",
+        trigger = "click",
+    ),
+])

docs/components_page/components/popover/simple.py

@@ -0,0 +1,30 @@
+import dash_bootstrap_components as dbc
+from dash import html
+
+popovers = html.Div(
+    [
+        # First example - using dbc.PopoverBody
+        dbc.Button(
+            "popover-target",
+            id="popover-target",
+            className="me-1",
+        ),
+        dbc.Popover(
+            dbc.PopoverBody("My `target` is `popover-target`."),
+            target="popover-target",
+            trigger="click",
+        ),
+        # Second example - using body=True
+        dbc.Button(
+            "popover-alt-target",
+            id="popover-alt-target",
+            className="me-1",
+        ),
+        dbc.Popover(
+            "My `target` is `popover-alt-target`.",
+            body=True,
+            target="popover-alt-target",
+            trigger="click",
+        ),
+    ]
+)