From 7fcc550e5920021ed90b4434e8622f88518ff37e Mon Sep 17 00:00:00 2001 From: Gemma Down Date: Tue, 31 Aug 2021 19:53:35 +0100 Subject: [PATCH 1/4] Add inner container to navbar example --- docs/components_page/components/navbar.md | 3 +- .../components/navbar/navbar.R | 51 ++++++------- .../components/navbar/navbar.jl | 5 +- .../components/navbar/navbar.py | 51 ++++++------- .../advanced-component-usage/navbars.py | 75 ++++++++++--------- 5 files changed, 95 insertions(+), 90 deletions(-) diff --git a/docs/components_page/components/navbar.md b/docs/components_page/components/navbar.md index 2f3f89981..665a0907c 100644 --- a/docs/components_page/components/navbar.md +++ b/docs/components_page/components/navbar.md @@ -17,7 +17,7 @@ The `NavbarSimple` will collapse on smaller screens, and add a toggle for reveal ## Navbar -If you want to have more control over the layout of your navbar you can use the `Navbar` component. This gives you full control over the children, but you will have to write your own callbacks to achieve things like the toggle behaviour on small screens. We recommend using a `Nav` component to wrap the navigation items, check the [docs here](/docs/components/nav). +If you want to have more control over the layout of your navbar you can use the `Navbar` component. This gives you full control over the children, but you will have to write your own callbacks to achieve things like the toggle behaviour on small screens. From Bootstrap 5, all elements inside the `NavBar` should be contained within a [`Container`](/docs/components/layout). We also recommend using a `Nav` component to wrap the navigation items, check the [docs here](/docs/components/nav). Here is an example of a custom navbar, see the `examples/` folder in the [GitHub repo](https://github.com/facultyai/dash-bootstrap-components/blob/main/examples/python/advanced-component-usage/navbars.py) for more. @@ -30,4 +30,3 @@ Here is an example of a custom navbar, see the `examples/` folder in the [GitHub {{apidoc:src/components/nav/NavbarBrand.js}} {{apidoc:src/components/nav/NavbarToggler.js}} - diff --git a/docs/components_page/components/navbar/navbar.R b/docs/components_page/components/navbar/navbar.R index 06aea7b00..bcc9bf1d3 100644 --- a/docs/components_page/components/navbar/navbar.R +++ b/docs/components_page/components/navbar/navbar.R @@ -19,36 +19,37 @@ search_bar <- dbcRow( ) navbar <- dbcNavbar( - list( - htmlA( - # Use row and col to control vertical alignment of logo / brand - dbcRow( - list( - dbcCol(htmlImg(src = PLOTLY_LOGO, height = "30px")), - dbcCol(dbcNavbarBrand("Navbar", class_name = "ms-2")) + dbcContainer( + list( + htmlA( + # Use row and col to control vertical alignment of logo / brand + dbcRow( + list( + dbcCol(htmlImg(src = PLOTLY_LOGO, height = "30px")), + dbcCol(dbcNavbarBrand("Navbar", class_name = "ms-2")) + ), + align = "center", + class_name = "g-0" ), - align = "center", - class_name = "g-0" - ), - href = "https://plotly.com", - style = list("textDecoration" = "none") - ), - htmlDiv( - list( - dbcNavbarToggler(id = "navbar-toggler", n_clicks = 0), - dbcCollapse( - search_bar, - id = "navbar-collapse", - is_open = FALSE, - navbar = TRUE - ) + href = "https://plotly.com", + style = list("textDecoration" = "none") ), - class_name = "ms-auto" + htmlDiv( + list( + dbcNavbarToggler(id = "navbar-toggler", n_clicks = 0), + dbcCollapse( + search_bar, + id = "navbar-collapse", + is_open = FALSE, + navbar = TRUE + ) + ), + class_name = "ms-auto" + ) ) ), color = "dark", - dark = TRUE, - class_name = "py-2 px-3" + dark = TRUE ) diff --git a/docs/components_page/components/navbar/navbar.jl b/docs/components_page/components/navbar/navbar.jl index e72b1ec70..22af54f0a 100644 --- a/docs/components_page/components/navbar/navbar.jl +++ b/docs/components_page/components/navbar/navbar.jl @@ -15,7 +15,7 @@ search_bar = dbc_row( ); navbar = dbc_navbar( - [ + dbc_container([ html_a( # Use row and col to control vertical alignment of logo / brand dbc_row( @@ -41,10 +41,9 @@ navbar = dbc_navbar( ], class_name = "ms-auto", ), - ], + ]), color = "dark", dark = true, - class_name = "py-2 px-3", ) diff --git a/docs/components_page/components/navbar/navbar.py b/docs/components_page/components/navbar/navbar.py index 1bc12acfd..8717cc8c9 100644 --- a/docs/components_page/components/navbar/navbar.py +++ b/docs/components_page/components/navbar/navbar.py @@ -20,36 +20,37 @@ ) navbar = dbc.Navbar( - [ - html.A( - # Use row and col to control vertical alignment of logo / brand - dbc.Row( + dbc.Container( + [ + html.A( + # Use row and col to control vertical alignment of logo / brand + dbc.Row( + [ + dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")), + dbc.Col(dbc.NavbarBrand("Navbar", class_name="ms-2")), + ], + align="center", + class_name="g-0", + ), + href="https://plotly.com", + style={"textDecoration": "none"}, + ), + html.Div( [ - dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")), - dbc.Col(dbc.NavbarBrand("Navbar", class_name="ms-2")), + dbc.NavbarToggler(id="navbar-toggler", n_clicks=0), + dbc.Collapse( + search_bar, + id="navbar-collapse", + is_open=False, + navbar=True, + ), ], - align="center", - class_name="g-0", + class_name="ms-auto", ), - href="https://plotly.com", - style={"textDecoration": "none"}, - ), - html.Div( - [ - dbc.NavbarToggler(id="navbar-toggler", n_clicks=0), - dbc.Collapse( - search_bar, - id="navbar-collapse", - is_open=False, - navbar=True, - ), - ], - class_name="ms-auto", - ), - ], + ] + ), color="dark", dark=True, - class_name="py-2 px-3", ) diff --git a/examples/python/advanced-component-usage/navbars.py b/examples/python/advanced-component-usage/navbars.py index 2f9549693..9c0f7053d 100644 --- a/examples/python/advanced-component-usage/navbars.py +++ b/examples/python/advanced-component-usage/navbars.py @@ -64,37 +64,41 @@ # this example that adds a logo to the navbar brand logo = dbc.Navbar( - [ - html.A( - # Use row and col to control vertical alignment of logo / brand - dbc.Row( + dbc.Container( + [ + html.A( + # Use row and col to control vertical alignment of logo / brand + dbc.Row( + [ + dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")), + dbc.Col(dbc.NavbarBrand("Logo", class_name="ms-2")), + ], + align="center", + class_name="g-0", + ), + href="https://plotly.com", + style={"textDecoration": "none"}, + ), + html.Div( [ - dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")), - dbc.Col(dbc.NavbarBrand("Logo", class_name="ms-2")), + dbc.NavbarToggler(id="navbar-toggler2", n_clicks=0), + dbc.Collapse( + dbc.Nav( + [nav_item, dropdown], + class_name="ms-auto", + navbar=True, + ), + id="navbar-collapse2", + navbar=True, + ), ], - align="center", - class_name="g-0", + className="ms-auto", ), - href="https://plotly.com", - style={"textDecoration": "none"}, - ), - html.Div( - [ - dbc.NavbarToggler(id="navbar-toggler2", n_clicks=0), - dbc.Collapse( - dbc.Nav( - [nav_item, dropdown], class_name="ms-auto", navbar=True - ), - id="navbar-collapse2", - navbar=True, - ), - ], - className="ms-auto", - ), - ], + ], + ), color="dark", dark=True, - class_name="py-2 px-3 mb-5", + class_name="mb-5", ) # this example has a search bar and button instead of navitems / dropdowns @@ -136,17 +140,18 @@ # custom navbar based on https://getbootstrap.com/docs/4.1/examples/dashboard/ dashboard = dbc.Navbar( - [ - dbc.Col(dbc.NavbarBrand("Dashboard", href="#"), sm=3, md=2), - dbc.Col(dbc.Input(type="search", placeholder="Search here")), - dbc.Col( - dbc.Nav(dbc.NavItem(dbc.NavLink("Sign out")), navbar=True), - width="auto", - ), - ], + dbc.Container( + [ + dbc.Col(dbc.NavbarBrand("Dashboard", href="#"), sm=3, md=2), + dbc.Col(dbc.Input(type="search", placeholder="Search here")), + dbc.Col( + dbc.Nav(dbc.NavItem(dbc.NavLink("Sign out")), navbar=True), + width="auto", + ), + ], + ), color="dark", dark=True, - class_name="py-2 px-3", ) app.layout = html.Div( From 515c7d5aefe5e42acfdcca62bcdbe684186bdfe7 Mon Sep 17 00:00:00 2001 From: tcbegley Date: Fri, 3 Sep 2021 08:20:58 +0100 Subject: [PATCH 2/4] Remove extra div in Collapse/Fade layout --- src/components/collapse/Collapse.js | 15 +++++++-------- src/components/fade/Fade.js | 6 +++--- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/components/collapse/Collapse.js b/src/components/collapse/Collapse.js index 10f733714..12d6f4251 100644 --- a/src/components/collapse/Collapse.js +++ b/src/components/collapse/Collapse.js @@ -2,14 +2,13 @@ import React from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; import RBCollapse from 'react-bootstrap/Collapse'; -import RBNavbarCollapse from 'react-bootstrap/NavbarCollapse'; /** * Hide or show content with a vertical collapsing animation. Visibility of the * children is controlled by the `is_open` prop which can be targetted by * callbacks. */ -const Collapse = props => { +const Collapse = React.forwardRef((props, ref) => { const { children, is_open, @@ -21,10 +20,8 @@ const Collapse = props => { ...otherProps } = props; - const Component = navbar ? RBNavbarCollapse : RBCollapse; - return ( - { (loading_state && loading_state.is_loading) || undefined } > -
{children}
- +
+ {children} +
+ ); -}; +}); Collapse.propTypes = { /** diff --git a/src/components/fade/Fade.js b/src/components/fade/Fade.js index e831cac82..4d2d0d5ee 100644 --- a/src/components/fade/Fade.js +++ b/src/components/fade/Fade.js @@ -7,7 +7,7 @@ import RBFade from 'react-bootstrap/Fade'; * Hide or show content with a fading animation. Visibility of the children is * controlled by the `is_open` prop which can be targetted by callbacks. */ -const Fade = props => { +const Fade = React.forwardRef((props, ref) => { const { children, is_in, @@ -35,10 +35,10 @@ const Fade = props => { (loading_state && loading_state.is_loading) || undefined } > -
{children}
+
{children}
); -}; +}); Fade.propTypes = { /** From 16ea5b977fcd44d6050f50cae53ac23d85a016b8 Mon Sep 17 00:00:00 2001 From: tcbegley Date: Fri, 3 Sep 2021 08:26:23 +0100 Subject: [PATCH 3/4] Adjust navbar examples --- .../advanced-component-usage/navbars.py | 28 +++++++++---------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/examples/python/advanced-component-usage/navbars.py b/examples/python/advanced-component-usage/navbars.py index 9c0f7053d..e4cfb1ff5 100644 --- a/examples/python/advanced-component-usage/navbars.py +++ b/examples/python/advanced-component-usage/navbars.py @@ -79,20 +79,15 @@ href="https://plotly.com", style={"textDecoration": "none"}, ), - html.Div( - [ - dbc.NavbarToggler(id="navbar-toggler2", n_clicks=0), - dbc.Collapse( - dbc.Nav( - [nav_item, dropdown], - class_name="ms-auto", - navbar=True, - ), - id="navbar-collapse2", - navbar=True, - ), - ], - className="ms-auto", + dbc.NavbarToggler(id="navbar-toggler2", n_clicks=0), + dbc.Collapse( + dbc.Nav( + [nav_item, dropdown], + class_name="ms-auto", + navbar=True, + ), + id="navbar-collapse2", + navbar=True, ), ], ), @@ -145,7 +140,10 @@ dbc.Col(dbc.NavbarBrand("Dashboard", href="#"), sm=3, md=2), dbc.Col(dbc.Input(type="search", placeholder="Search here")), dbc.Col( - dbc.Nav(dbc.NavItem(dbc.NavLink("Sign out")), navbar=True), + dbc.Nav( + dbc.Container(dbc.NavItem(dbc.NavLink("Sign out"))), + navbar=True, + ), width="auto", ), ], From 7413d6f642fd2b167e94d9148326bd9db5dc0643 Mon Sep 17 00:00:00 2001 From: tcbegley Date: Fri, 3 Sep 2021 08:31:13 +0100 Subject: [PATCH 4/4] Docs example + formatting --- .../components/button_group/radios.R | 2 +- .../components/input/selected_styles.R | 14 +++++++------- .../components/navbar/navbar.R | 19 +++++++------------ .../components/navbar/navbar.jl | 16 +++------------- .../components/navbar/navbar.py | 19 +++++++------------ 5 files changed, 25 insertions(+), 45 deletions(-) diff --git a/docs/components_page/components/button_group/radios.R b/docs/components_page/components/button_group/radios.R index fb43bd65f..bb38526e7 100644 --- a/docs/components_page/components/button_group/radios.R +++ b/docs/components_page/components/button_group/radios.R @@ -6,7 +6,7 @@ button_group <- htmlDiv( dbcRadioItems( id = "radios", class_name = "btn-group", - input_class_name="btn-check", + input_class_name = "btn-check", label_class_name = "btn btn-outline-primary", label_checked_class_name = "active", options = list( diff --git a/docs/components_page/components/input/selected_styles.R b/docs/components_page/components/input/selected_styles.R index a65cbcdef..82d20a8e6 100644 --- a/docs/components_page/components/input/selected_styles.R +++ b/docs/components_page/components/input/selected_styles.R @@ -10,22 +10,22 @@ checklist <- htmlDiv( list(label = "Option 2", value = 2), list(label = "Option 3", value = 3) ), - label_checked_style=list("color" = "red"), - input_checked_style=list( - "backgroundColor" = "#fa7268", - "borderColor" = "#ea6258" + label_checked_style = list("color" = "red"), + input_checked_style = list( + "backgroundColor" = "#fa7268", + "borderColor" = "#ea6258" ) ), htmlHr(), dbcRadioItems( - id="radio-selected-style", + id = "radio-selected-style", options = list( list(label = "Option 1", value = 1), list(label = "Option 2", value = 2), list(label = "Option 3", value = 3) ), - label_checked_class_name="text-success", - input_checked_class_name="border border-success bg-success" + label_checked_class_name = "text-success", + input_checked_class_name = "border border-success bg-success" ) ) ) diff --git a/docs/components_page/components/navbar/navbar.R b/docs/components_page/components/navbar/navbar.R index bcc9bf1d3..c23fee51d 100644 --- a/docs/components_page/components/navbar/navbar.R +++ b/docs/components_page/components/navbar/navbar.R @@ -14,7 +14,7 @@ search_bar <- dbcRow( width = "auto" ) ), - class_name = "ms-auto flex-nowrap mt-3 mt-md-0 g-0", + class_name = "g-0 ms-auto flex-nowrap mt-3 mt-md-0", align = "center" ) @@ -34,17 +34,12 @@ navbar <- dbcNavbar( href = "https://plotly.com", style = list("textDecoration" = "none") ), - htmlDiv( - list( - dbcNavbarToggler(id = "navbar-toggler", n_clicks = 0), - dbcCollapse( - search_bar, - id = "navbar-collapse", - is_open = FALSE, - navbar = TRUE - ) - ), - class_name = "ms-auto" + dbcNavbarToggler(id = "navbar-toggler", n_clicks = 0), + dbcCollapse( + search_bar, + id = "navbar-collapse", + is_open = FALSE, + navbar = TRUE ) ) ), diff --git a/docs/components_page/components/navbar/navbar.jl b/docs/components_page/components/navbar/navbar.jl index 22af54f0a..427b48498 100644 --- a/docs/components_page/components/navbar/navbar.jl +++ b/docs/components_page/components/navbar/navbar.jl @@ -10,7 +10,7 @@ search_bar = dbc_row( width = "auto", ), ], - class_name = "ms-auto flex-nowrap mt-3 mt-md-0 g-0", + class_name = "g-0 ms-auto flex-nowrap mt-3 mt-md-0", align = "center", ); @@ -29,18 +29,8 @@ navbar = dbc_navbar( href = "https://plotly.com", style = Dict("textDecoration" => "none"), ), - html_div( - [ - dbc_navbartoggler(id = "navbar-toggler", n_clicks = 0), - dbc_collapse( - search_bar, - id = "navbar-collapse", - is_open = false, - navbar = true, - ), - ], - class_name = "ms-auto", - ), + dbc_navbartoggler(id = "navbar-toggler", n_clicks = 0), + dbc_collapse(search_bar, id = "navbar-collapse", is_open = false, navbar = true), ]), color = "dark", dark = true, diff --git a/docs/components_page/components/navbar/navbar.py b/docs/components_page/components/navbar/navbar.py index 8717cc8c9..699623f97 100644 --- a/docs/components_page/components/navbar/navbar.py +++ b/docs/components_page/components/navbar/navbar.py @@ -15,7 +15,7 @@ width="auto", ), ], - class_name="ms-auto flex-nowrap mt-3 mt-md-0 g-0", + class_name="g-0 ms-auto flex-nowrap mt-3 mt-md-0", align="center", ) @@ -35,17 +35,12 @@ href="https://plotly.com", style={"textDecoration": "none"}, ), - html.Div( - [ - dbc.NavbarToggler(id="navbar-toggler", n_clicks=0), - dbc.Collapse( - search_bar, - id="navbar-collapse", - is_open=False, - navbar=True, - ), - ], - class_name="ms-auto", + dbc.NavbarToggler(id="navbar-toggler", n_clicks=0), + dbc.Collapse( + search_bar, + id="navbar-collapse", + is_open=False, + navbar=True, ), ] ),