From 78e262218b48ea9f87418b48e1f2ee7935816cec Mon Sep 17 00:00:00 2001 From: AnnMarieW Date: Tue, 21 Feb 2023 06:08:42 -0700 Subject: [PATCH 01/13] added support for components in labels --- src/components/input/Checkbox.js | 2 +- src/components/input/Checklist.js | 3 +-- src/components/input/RadioButton.js | 2 +- src/components/input/RadioItems.js | 3 +-- src/components/input/Switch.js | 2 +- 5 files changed, 5 insertions(+), 7 deletions(-) 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 From 0b669c938df0fb970535c5a4c1088dbef2296afe Mon Sep 17 00:00:00 2001 From: AnnMarieW Date: Tue, 21 Feb 2023 08:10:49 -0700 Subject: [PATCH 02/13] added test and updated docs --- docs/components_page/components/input.md | 7 ++++ .../components/input/components_in_labels.py | 31 ++++++++++++++ tests/test_components_as_props | 40 +++++++++++++++++++ 3 files changed, 78 insertions(+) create mode 100644 docs/components_page/components/input/components_in_labels.py create mode 100644 tests/test_components_as_props 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..545f52432 --- /dev/null +++ b/docs/components_page/components/input/components_in_labels.py @@ -0,0 +1,31 @@ +from dash import Dash, html +import dash_bootstrap_components as dbc + +flights = html.Div([html.Div(className="fa fa-plane pe-1"), "Flights"]) +car = html.Div([html.Div(className="fa fa-car pe-1"), "Rental Car"]) +hotel = html.Div([html.Div(className="fa fa-hotel 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/tests/test_components_as_props b/tests/test_components_as_props new file mode 100644 index 000000000..a07961818 --- /dev/null +++ b/tests/test_components_as_props @@ -0,0 +1,40 @@ +from dash import Dash, dcc, html +from dash_bootstrap_components import Checklist, Checkbox, RadioButton, RadioItems, Switch + + +def test_mdcap001_components_as_props(dash_dcc): + 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_dcc.start_server(app) + + dash_dcc.wait_for_text_to_equal("#checklist h2", "H2 label") + dash_dcc.wait_for_text_to_equal("#checklist a", "Link in checklist") + + dash_dcc.wait_for_text_to_equal("#radio-items h3", "on") + dash_dcc.wait_for_text_to_equal("#radio-items p", "off") + + dash_dcc.wait_for_text_to_equal("#checkbox h4", "h4") + dash_dcc.wait_for_text_to_equal("#radiobutton h6", "h6") + dash_dcc.wait_for_text_to_equal(#switch h5", "h5") \ No newline at end of file From bb319a45df9280bad4f062e6cab7ef9499760b32 Mon Sep 17 00:00:00 2001 From: Ann Marie Ward <72614349+AnnMarieW@users.noreply.github.com> Date: Tue, 21 Feb 2023 11:10:48 -0700 Subject: [PATCH 03/13] Update tests/test_components_as_props Co-authored-by: Tom Begley --- tests/test_components_as_props | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/test_components_as_props b/tests/test_components_as_props index a07961818..9b4bda342 100644 --- a/tests/test_components_as_props +++ b/tests/test_components_as_props @@ -1,5 +1,5 @@ from dash import Dash, dcc, html -from dash_bootstrap_components import Checklist, Checkbox, RadioButton, RadioItems, Switch +import dash_bootstrap_components as dbc def test_mdcap001_components_as_props(dash_dcc): From e56baafaed88f1e49ec316d9315715773265ffbe Mon Sep 17 00:00:00 2001 From: Ann Marie Ward <72614349+AnnMarieW@users.noreply.github.com> Date: Tue, 21 Feb 2023 11:11:03 -0700 Subject: [PATCH 04/13] Update tests/test_components_as_props Co-authored-by: Tom Begley --- tests/test_components_as_props | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/test_components_as_props b/tests/test_components_as_props index 9b4bda342..3e29ec38b 100644 --- a/tests/test_components_as_props +++ b/tests/test_components_as_props @@ -23,7 +23,7 @@ def test_mdcap001_components_as_props(dash_dcc): ), 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) + dbc.Switch(label=html.H5("h5"), value="h5", id="switch") ] ) From a53550433c4463171c0db1c981b216f7b565c8f5 Mon Sep 17 00:00:00 2001 From: Ann Marie Ward <72614349+AnnMarieW@users.noreply.github.com> Date: Tue, 21 Feb 2023 11:11:15 -0700 Subject: [PATCH 05/13] Update tests/test_components_as_props Co-authored-by: Tom Begley --- tests/test_components_as_props | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/test_components_as_props b/tests/test_components_as_props index 3e29ec38b..8d15442e2 100644 --- a/tests/test_components_as_props +++ b/tests/test_components_as_props @@ -22,7 +22,7 @@ def test_mdcap001_components_as_props(dash_dcc): id="radio-items", ), dbc.Checkbox(label= html.H4("h4"), value= "h4", id="checkbox"), - dbc.RadioButton(label=html.H6("h6"), value="h6", id="radiobutton), + dbc.RadioButton(label=html.H6("h6"), value="h6", id="radiobutton"), dbc.Switch(label=html.H5("h5"), value="h5", id="switch") ] ) From bb1afce1d70d248a2d967adffc218e33cbc55c6b Mon Sep 17 00:00:00 2001 From: Ann Marie Ward <72614349+AnnMarieW@users.noreply.github.com> Date: Tue, 21 Feb 2023 11:12:00 -0700 Subject: [PATCH 06/13] Update tests/test_components_as_props Co-authored-by: Tom Begley --- tests/test_components_as_props | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/test_components_as_props b/tests/test_components_as_props index 8d15442e2..eb3d0fe37 100644 --- a/tests/test_components_as_props +++ b/tests/test_components_as_props @@ -37,4 +37,4 @@ def test_mdcap001_components_as_props(dash_dcc): dash_dcc.wait_for_text_to_equal("#checkbox h4", "h4") dash_dcc.wait_for_text_to_equal("#radiobutton h6", "h6") - dash_dcc.wait_for_text_to_equal(#switch h5", "h5") \ No newline at end of file + dash_dcc.wait_for_text_to_equal("#switch+label", "h5") From a5fa1219e11b3e48020c0612d91dd90aab766279 Mon Sep 17 00:00:00 2001 From: Ann Marie Ward <72614349+AnnMarieW@users.noreply.github.com> Date: Tue, 21 Feb 2023 11:12:09 -0700 Subject: [PATCH 07/13] Update tests/test_components_as_props Co-authored-by: Tom Begley --- tests/test_components_as_props | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/test_components_as_props b/tests/test_components_as_props index eb3d0fe37..767363861 100644 --- a/tests/test_components_as_props +++ b/tests/test_components_as_props @@ -35,6 +35,6 @@ def test_mdcap001_components_as_props(dash_dcc): dash_dcc.wait_for_text_to_equal("#radio-items h3", "on") dash_dcc.wait_for_text_to_equal("#radio-items p", "off") - dash_dcc.wait_for_text_to_equal("#checkbox h4", "h4") + dash_dcc.wait_for_text_to_equal("#checkbox+label", "h4") dash_dcc.wait_for_text_to_equal("#radiobutton h6", "h6") dash_dcc.wait_for_text_to_equal("#switch+label", "h5") From a1b27ea5789d3a13f704a9f7e4cb7aad61c28d0d Mon Sep 17 00:00:00 2001 From: Ann Marie Ward <72614349+AnnMarieW@users.noreply.github.com> Date: Tue, 21 Feb 2023 11:12:35 -0700 Subject: [PATCH 08/13] Update tests/test_components_as_props Co-authored-by: Tom Begley --- tests/test_components_as_props | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/test_components_as_props b/tests/test_components_as_props index 767363861..f2cf430af 100644 --- a/tests/test_components_as_props +++ b/tests/test_components_as_props @@ -36,5 +36,5 @@ def test_mdcap001_components_as_props(dash_dcc): dash_dcc.wait_for_text_to_equal("#radio-items p", "off") dash_dcc.wait_for_text_to_equal("#checkbox+label", "h4") - dash_dcc.wait_for_text_to_equal("#radiobutton h6", "h6") + dash_dcc.wait_for_text_to_equal("#radiobutton+label", "h6") dash_dcc.wait_for_text_to_equal("#switch+label", "h5") From f55c79d5492a9a8ba109738941ca8c635f215359 Mon Sep 17 00:00:00 2001 From: AnnMarieW Date: Tue, 21 Feb 2023 12:02:49 -0700 Subject: [PATCH 09/13] update after review updated example to use Bootstrap icons updated icons versions. --- dash_bootstrap_components/icons.py | 4 ++-- .../components/input/components_in_labels.py | 7 ++++--- ...s_as_props => test_components_as_props.py} | 20 +++++++++---------- 3 files changed, 16 insertions(+), 15 deletions(-) rename tests/{test_components_as_props => test_components_as_props.py} (61%) 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/components_in_labels.py b/docs/components_page/components/input/components_in_labels.py index 545f52432..5ceb00c98 100644 --- a/docs/components_page/components/input/components_in_labels.py +++ b/docs/components_page/components/input/components_in_labels.py @@ -1,9 +1,10 @@ from dash import Dash, html import dash_bootstrap_components as dbc -flights = html.Div([html.Div(className="fa fa-plane pe-1"), "Flights"]) -car = html.Div([html.Div(className="fa fa-car pe-1"), "Rental Car"]) -hotel = html.Div([html.Div(className="fa fa-hotel pe-1"), "Hotel"]) + +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( [ diff --git a/tests/test_components_as_props b/tests/test_components_as_props.py similarity index 61% rename from tests/test_components_as_props rename to tests/test_components_as_props.py index f2cf430af..ec4ef918d 100644 --- a/tests/test_components_as_props +++ b/tests/test_components_as_props.py @@ -1,8 +1,8 @@ -from dash import Dash, dcc, html +from dash import Dash, html import dash_bootstrap_components as dbc -def test_mdcap001_components_as_props(dash_dcc): +def test_mdcap001_components_as_props(dash_duo): app = Dash(__name__) app.layout = html.Div( @@ -27,14 +27,14 @@ def test_mdcap001_components_as_props(dash_dcc): ] ) - dash_dcc.start_server(app) + dash_duo.start_server(app) - dash_dcc.wait_for_text_to_equal("#checklist h2", "H2 label") - dash_dcc.wait_for_text_to_equal("#checklist a", "Link in checklist") + dash_duo.wait_for_text_to_equal("#checklist h2", "H2 label") + dash_duo.wait_for_text_to_equal("#checklist a", "Link in checklist") - dash_dcc.wait_for_text_to_equal("#radio-items h3", "on") - dash_dcc.wait_for_text_to_equal("#radio-items p", "off") + dash_duo.wait_for_text_to_equal("#radio-items h3", "on") + dash_duo.wait_for_text_to_equal("#radio-items p", "off") - dash_dcc.wait_for_text_to_equal("#checkbox+label", "h4") - dash_dcc.wait_for_text_to_equal("#radiobutton+label", "h6") - dash_dcc.wait_for_text_to_equal("#switch+label", "h5") + 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") From 5fc729c237d16aae423b949798baad5a806708cf Mon Sep 17 00:00:00 2001 From: tcbegley Date: Wed, 22 Feb 2023 17:56:39 +0000 Subject: [PATCH 10/13] Update Bootstrap icons css --- docs/templates/partials/head.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 @@ /> From ea479ea918c81d2f65fbea98d125b9897b28f136 Mon Sep 17 00:00:00 2001 From: tcbegley Date: Wed, 22 Feb 2023 17:56:54 +0000 Subject: [PATCH 11/13] Add tests to nox sources --- noxfile.py | 1 + 1 file changed, 1 insertion(+) 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", ] From 8fae7f00b120ef7167b3349237e36c2717cd92f3 Mon Sep 17 00:00:00 2001 From: tcbegley Date: Wed, 22 Feb 2023 17:57:06 +0000 Subject: [PATCH 12/13] Format --- .../components/input/components_in_labels.py | 3 +-- tests/test_components_as_props.py | 11 +++++++---- tests/test_navlink.py | 5 ++--- tests/test_popover.py | 2 +- 4 files changed, 11 insertions(+), 10 deletions(-) diff --git a/docs/components_page/components/input/components_in_labels.py b/docs/components_page/components/input/components_in_labels.py index 5ceb00c98..46ed339d7 100644 --- a/docs/components_page/components/input/components_in_labels.py +++ b/docs/components_page/components/input/components_in_labels.py @@ -1,6 +1,5 @@ -from dash import Dash, html import dash_bootstrap_components as dbc - +from dash import Dash, 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"]) diff --git a/tests/test_components_as_props.py b/tests/test_components_as_props.py index ec4ef918d..3ac2802e4 100644 --- a/tests/test_components_as_props.py +++ b/tests/test_components_as_props.py @@ -1,5 +1,5 @@ -from dash import Dash, html import dash_bootstrap_components as dbc +from dash import Dash, html def test_mdcap001_components_as_props(dash_duo): @@ -10,7 +10,10 @@ def test_mdcap001_components_as_props(dash_duo): dbc.Checklist( [ {"label": html.H2("H2 label"), "value": "h2"}, - {"label": html.A("Link in checklist", href="#"), "value": "a"}, + { + "label": html.A("Link in checklist", href="#"), + "value": "a", + }, ], id="checklist", ), @@ -21,9 +24,9 @@ def test_mdcap001_components_as_props(dash_duo): ], id="radio-items", ), - dbc.Checkbox(label= html.H4("h4"), value= "h4", id="checkbox"), + 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") + dbc.Switch(label=html.H5("h5"), value="h5", id="switch"), ] ) 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 From f2fd71431267d7a26a367b05a9ea66155ed6f24a Mon Sep 17 00:00:00 2001 From: tcbegley Date: Wed, 22 Feb 2023 18:25:42 +0000 Subject: [PATCH 13/13] Unused import --- docs/components_page/components/input/components_in_labels.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components_page/components/input/components_in_labels.py b/docs/components_page/components/input/components_in_labels.py index 46ed339d7..09afd71ef 100644 --- a/docs/components_page/components/input/components_in_labels.py +++ b/docs/components_page/components/input/components_in_labels.py @@ -1,5 +1,5 @@ import dash_bootstrap_components as dbc -from dash import Dash, html +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"])