Fix issues with Navbar examples (#667)

glsdown · tcbegley · tcbegley · commit 1b87258ea514 · 2021-09-05T08:32:28.000+01:00
* Add inner container to navbar example

* Remove extra div in Collapse/Fade layout

* Adjust navbar examples

* Docs example + formatting

Co-authored-by: tcbegley &lt;tomcbegley@gmail.com&gt;
diff --git 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
@@ -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.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
@@ -14,41 +14,37 @@ 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"
 )
 
 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"
+      dbcNavbarToggler(id = "navbar-toggler", n_clicks = 0),
+      dbcCollapse(
+        search_bar,
+        id = "navbar-collapse",
+        is_open = FALSE,
+        navbar = TRUE
+      )
     )
   ),
   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
@@ -10,12 +10,12 @@ 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",
 );
 
 navbar = dbc_navbar(
-    [
+    dbc_container([
         html_a(
             # Use row and col to control vertical alignment of logo / brand
             dbc_row(
@@ -29,22 +29,11 @@ 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,
-    class_name = "py-2 px-3",
 )
 
 
diff --git a/docs/components_page/components/navbar/navbar.py b/docs/components_page/components/navbar/navbar.py
@@ -15,41 +15,37 @@
             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",
 )
 
 navbar = dbc.Navbar(
-    [
-        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.NavbarToggler(id="navbar-toggler", n_clicks=0),
-                dbc.Collapse(
-                    search_bar,
-                    id="navbar-collapse",
-                    is_open=False,
-                    navbar=True,
+    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",
                 ),
-            ],
-            class_name="ms-auto",
-        ),
-    ],
+                href="https://plotly.com",
+                style={"textDecoration": "none"},
+            ),
+            dbc.NavbarToggler(id="navbar-toggler", n_clicks=0),
+            dbc.Collapse(
+                search_bar,
+                id="navbar-collapse",
+                is_open=False,
+                navbar=True,
+            ),
+        ]
+    ),
     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
@@ -64,37 +64,36 @@
 
 # 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.Col(html.Img(src=PLOTLY_LOGO, height="30px")),
-                    dbc.Col(dbc.NavbarBrand("Logo", class_name="ms-2")),
-                ],
-                align="center",
-                class_name="g-0",
+    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"},
             ),
-            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",
+            dbc.NavbarToggler(id="navbar-toggler2", n_clicks=0),
+            dbc.Collapse(
+                dbc.Nav(
+                    [nav_item, dropdown],
+                    class_name="ms-auto",
                     navbar=True,
                 ),
-            ],
-            className="ms-auto",
-        ),
-    ],
+                id="navbar-collapse2",
+                navbar=True,
+            ),
+        ],
+    ),
     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 +135,21 @@
 
 # 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.Container(dbc.NavItem(dbc.NavLink("Sign out"))),
+                    navbar=True,
+                ),
+                width="auto",
+            ),
+        ],
+    ),
     color="dark",
     dark=True,
-    class_name="py-2 px-3",
 )
 
 app.layout = html.Div(
diff --git 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 (
-    <Component
+    <RBCollapse
       in={is_open}
       as={tag}
       className={class_name || className}
@@ -33,10 +30,12 @@ const Collapse = props => {
         (loading_state && loading_state.is_loading) || undefined
       }
     >
-      <div>{children}</div>
-    </Component>
+      <div ref={ref} className={navbar && 'navbar-collapse'}>
+        {children}
+      </div>
+    </RBCollapse>
   );
-};
+});
 
 Collapse.propTypes = {
   /**
diff --git 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
       }
     >
-      <div>{children}</div>
+      <div ref={ref}>{children}</div>
     </RBFade>
   );
-};
+});
 
 Fade.propTypes = {
   /**
