Components as props in labels (#940)

dash_bootstrap_components/icons.py

@@ -1,5 +1,5 @@
 BOOTSTRAP = (
-    "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/"
+    "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/"
     "font/bootstrap-icons.css"
 )
-FONT_AWESOME = "https://use.fontawesome.com/releases/v6.1.1/css/all.css"
+FONT_AWESOME = "https://use.fontawesome.com/releases/v6.3.0/css/all.css"

docs/components_page/components/input.md

@@ -108,6 +108,13 @@ If you need more granular control over checkboxes and radio buttons, you can als
 
 {{example:components/input/radio_check_standalone.py:standalone_radio_check}}
 
+## Components in labels
+
+You can include components in labels for `Checklist`, `RadioItems`, `Checkbox`, `RadioButton`, and  `Switch`.
+
+{{example:components/input/components_in_labels.py:components_in_labels}}
+
+
 ## Color picker
 
 When using `Input` with `type="color"`, the user may specify a color, either by using a visual color picker or by entering the color in a text field in #rrggbb format.

docs/components_page/components/input/components_in_labels.py

@@ -0,0 +1,31 @@
+import dash_bootstrap_components as dbc
+from dash import html
+
+flights = html.Div([html.I(className="bi bi-airplane pe-1"), "Flights"])
+car = html.Div([html.I(className="bi bi-car-front pe-1"), "Rental Car"])
+hotel = html.Div([html.I(className="bi bi-house pe-1"), "Hotel"])
+
+radioitems = html.Div(
+    [
+        dbc.Label("Booking"),
+        dbc.RadioItems(
+            options=[
+                {"label": flights, "value": 1},
+                {"label": car, "value": 2},
+                {"label": hotel, "value": 3},
+            ],
+            value=1,
+            id="radioitems-input",
+        ),
+    ]
+)
+
+checkbox = dbc.Checkbox(
+    id="standalone-checkbox",
+    label=html.Div(
+        ["I agree to the ", html.A("Terms and Conditions", href="#")]
+    ),
+    value=False,
+)
+
+components_in_labels = html.Div([radioitems, html.Hr(), checkbox])

docs/templates/partials/head.html

@@ -17,5 +17,5 @@
 />
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
+  href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css"
 />

noxfile.py

@@ -6,6 +6,7 @@
     "dash_bootstrap_components",
     "docs",
     "examples",
+    "tests",
     "noxfile.py",
     "tasks.py",
 ]

src/components/input/Checkbox.js

@@ -125,7 +125,7 @@ Checkbox.propTypes = {
   /**
    * The label of the <input> element
    */
-  label: PropTypes.string,
+  label: PropTypes.node,
 
   /**
    * The id of the label

src/components/input/Checklist.js

@@ -190,8 +190,7 @@ Checklist.propTypes = {
         /**
          * The checkbox's label
          */
-        label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-          .isRequired,
+        label: PropTypes.node.isRequired,
 
         /**
          * The value of the checkbox. This value corresponds to the items

src/components/input/RadioButton.js

@@ -126,7 +126,7 @@ RadioButton.propTypes = {
   /**
    * The label of the <input> element
    */
-  label: PropTypes.string,
+  label: PropTypes.node,
 
   /**
    * The id of the label

src/components/input/RadioItems.js

@@ -184,8 +184,7 @@ RadioItems.propTypes = {
         /**
          * The radio item's label
          */
-        label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-          .isRequired,
+        label: PropTypes.node.isRequired,
 
         /**
          * The value of the radio item. This value corresponds to the items

src/components/input/Switch.js

@@ -125,7 +125,7 @@ Switch.propTypes = {
   /**
    * The label of the <input> element
    */
-  label: PropTypes.string,
+  label: PropTypes.node,
 
   /**
    * The id of the label

tests/test_components_as_props.py

@@ -0,0 +1,43 @@
+import dash_bootstrap_components as dbc
+from dash import Dash, html
+
+
+def test_mdcap001_components_as_props(dash_duo):
+    app = Dash(__name__)
+
+    app.layout = html.Div(
+        [
+            dbc.Checklist(
+                [
+                    {"label": html.H2("H2 label"), "value": "h2"},
+                    {
+                        "label": html.A("Link in checklist", href="#"),
+                        "value": "a",
+                    },
+                ],
+                id="checklist",
+            ),
+            dbc.RadioItems(
+                [
+                    {"label": html.H3("on"), "value": "on"},
+                    {"label": html.P("off"), "value": "off"},
+                ],
+                id="radio-items",
+            ),
+            dbc.Checkbox(label=html.H4("h4"), value="h4", id="checkbox"),
+            dbc.RadioButton(label=html.H6("h6"), value="h6", id="radiobutton"),
+            dbc.Switch(label=html.H5("h5"), value="h5", id="switch"),
+        ]
+    )
+
+    dash_duo.start_server(app)
+
+    dash_duo.wait_for_text_to_equal("#checklist h2", "H2 label")
+    dash_duo.wait_for_text_to_equal("#checklist a", "Link in checklist")
+
+    dash_duo.wait_for_text_to_equal("#radio-items h3", "on")
+    dash_duo.wait_for_text_to_equal("#radio-items p", "off")
+
+    dash_duo.wait_for_text_to_equal("#checkbox+label", "h4")
+    dash_duo.wait_for_text_to_equal("#radiobutton+label", "h6")
+    dash_duo.wait_for_text_to_equal("#switch+label", "h5")

tests/test_navlink.py

@@ -1,9 +1,8 @@
-from dash import Dash
+from dash import Dash, dcc, html
 from dash.dependencies import Input, Output
 from dash_bootstrap_components import NavLink
-from dash import dcc, html
-from selenium.webdriver.support.wait import WebDriverWait
 from selenium.webdriver.common.by import By
+from selenium.webdriver.support.wait import WebDriverWait
 
 
 def test_dbnl001_auto_active(dash_duo):

tests/test_popover.py

@@ -1,11 +1,11 @@
+import dash.testing.wait as wait
 from dash import Dash, html
 from dash_bootstrap_components import (
     Popover,
     PopoverBody,
     PopoverHeader,
     themes,
 )
-import dash.testing.wait as wait
 from selenium.webdriver.common.action_chains import ActionChains