diff --git a/dash_bootstrap_components/icons.py b/dash_bootstrap_components/icons.py index 3390eff15..6d58149bc 100644 --- a/dash_bootstrap_components/icons.py +++ b/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" diff --git a/docs/components_page/components/input.md b/docs/components_page/components/input.md index e598e660c..0fbd2e812 100644 --- a/docs/components_page/components/input.md +++ b/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. diff --git a/docs/components_page/components/input/components_in_labels.py b/docs/components_page/components/input/components_in_labels.py new file mode 100644 index 000000000..09afd71ef --- /dev/null +++ b/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]) diff --git a/docs/templates/partials/head.html b/docs/templates/partials/head.html index 3c88c7298..feec95145 100644 --- a/docs/templates/partials/head.html +++ b/docs/templates/partials/head.html @@ -17,5 +17,5 @@ /> diff --git a/noxfile.py b/noxfile.py index aef71f26d..8c3b0a442 100644 --- a/noxfile.py +++ b/noxfile.py @@ -6,6 +6,7 @@ "dash_bootstrap_components", "docs", "examples", + "tests", "noxfile.py", "tasks.py", ] diff --git a/src/components/input/Checkbox.js b/src/components/input/Checkbox.js index 2f603a47a..55994e067 100644 --- a/src/components/input/Checkbox.js +++ b/src/components/input/Checkbox.js @@ -125,7 +125,7 @@ Checkbox.propTypes = { /** * The label of the element */ - label: PropTypes.string, + label: PropTypes.node, /** * The id of the label diff --git a/src/components/input/Checklist.js b/src/components/input/Checklist.js index 269e53233..e147dc053 100644 --- a/src/components/input/Checklist.js +++ b/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 diff --git a/src/components/input/RadioButton.js b/src/components/input/RadioButton.js index 0c1d1efad..6db699765 100644 --- a/src/components/input/RadioButton.js +++ b/src/components/input/RadioButton.js @@ -126,7 +126,7 @@ RadioButton.propTypes = { /** * The label of the element */ - label: PropTypes.string, + label: PropTypes.node, /** * The id of the label diff --git a/src/components/input/RadioItems.js b/src/components/input/RadioItems.js index fb1f8c390..549405939 100644 --- a/src/components/input/RadioItems.js +++ b/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 diff --git a/src/components/input/Switch.js b/src/components/input/Switch.js index 9c9f3eeae..040108cf4 100644 --- a/src/components/input/Switch.js +++ b/src/components/input/Switch.js @@ -125,7 +125,7 @@ Switch.propTypes = { /** * The label of the element */ - label: PropTypes.string, + label: PropTypes.node, /** * The id of the label diff --git a/tests/test_components_as_props.py b/tests/test_components_as_props.py new file mode 100644 index 000000000..3ac2802e4 --- /dev/null +++ b/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") diff --git a/tests/test_navlink.py b/tests/test_navlink.py index 3118cda61..0a1c10f93 100644 --- a/tests/test_navlink.py +++ b/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): diff --git a/tests/test_popover.py b/tests/test_popover.py index 81e565121..5a8bcdda8 100644 --- a/tests/test_popover.py +++ b/tests/test_popover.py @@ -1,3 +1,4 @@ +import dash.testing.wait as wait from dash import Dash, html from dash_bootstrap_components import ( Popover, @@ -5,7 +6,6 @@ PopoverHeader, themes, ) -import dash.testing.wait as wait from selenium.webdriver.common.action_chains import ActionChains