[Tidy] Improve semantics of NavBar and Accordion

vizro-core/src/vizro/models/_dashboard.py

@@ -32,8 +32,11 @@
 
 
 def _all_hidden(components: List[Component]):
-    """Returns True if all `components` are either None and/or have hidden=True."""
-    return all(component is None or getattr(component, "hidden", False) for component in components)
+    """Returns True if all `components` are either None and/or have hidden=True and/or className contains `d-none`."""
+    return all(
+        component is None or getattr(component, "hidden", False) or "d-none" in getattr(component, "className", "d-inline")
+        for component in components
+    )
 
 
 # This is just used for type checking. Ideally it would inherit from some dash.development.base_component.Component

vizro-core/src/vizro/models/_navigation/accordion.py

@@ -3,7 +3,7 @@
 from typing import Dict, List, Literal
 
 import dash_bootstrap_components as dbc
-from dash import get_relative_path, html
+from dash import get_relative_path
 
 try:
     from pydantic.v1 import Field, validator
@@ -17,8 +17,6 @@
 from vizro.models._navigation._navigation_utils import _validate_pages
 
 
-# TODO: if and when made public, consider naming as NavAccordion to be consistent with other
-#  navigation models.
 class Accordion(VizroBaseModel):
     """Accordion to be used as nav_selector in [`Navigation`][vizro.models.Navigation].
 
@@ -44,7 +42,7 @@ def build(self, *, active_page_id=None):
         # Note build does not return _NavBuildType but just a single html.Div with id="nav-panel".
         # Hide navigation panel if there is only one page
         if len(list(itertools.chain(*self.pages.values()))) == 1:
-            return html.Div(hidden=True, id="nav-panel")
+            return dbc.Nav(id="nav-panel", className="d-none invisible")
 
         accordion_items = []
         for page_group, page_members in self.pages.items():
@@ -62,7 +60,7 @@ def build(self, *, active_page_id=None):
             (page_group for page_group, page_members in self.pages.items() if active_page_id in page_members), None
         )
 
-        return html.Div(
+        return dbc.Nav(
             children=[
                 dbc.Accordion(
                     id=self.id,

vizro-core/src/vizro/models/_navigation/nav_bar.py

@@ -73,6 +73,6 @@ def build(self, *, active_page_id=None) -> _NavBuildType:
             nav_panel = built_items["nav-panel"]
         else:
             # Active page is not in navigation at all, so hide navigation panel.
-            nav_panel = dbc.Nav(hidden=True, id="nav-panel")
+            nav_panel = dbc.Nav(id="nav-panel", className="d-none invisible")
 
         return html.Div([dbc.Navbar(nav_links, id="nav-bar"), nav_panel])

vizro-core/src/vizro/models/_navigation/navigation.py

@@ -49,6 +49,6 @@ def build(self, *, active_page_id=None) -> _NavBuildType:
             # e.g. nav_selector is Accordion and nav_selector.build returns single html.Div with id="nav-panel".
             # This will make it match the case e.g. nav_selector is NavBar and nav_selector.build returns html.Div
             # containing children with id="nav-bar" and id="nav-panel"
-            nav_selector = html.Div([dbc.Navbar(hidden=True, id="nav-bar"), nav_selector])
+            nav_selector = html.Div([dbc.Navbar(className="d-none invisible", id="nav-bar"), nav_selector])
 
         return nav_selector

vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py

@@ -5,7 +5,6 @@
 import dash_bootstrap_components as dbc
 import pytest
 from asserts import assert_component_equal
-from dash import html
 
 try:
     from pydantic.v1 import ValidationError
@@ -122,4 +121,4 @@ def test_accordion(self, pages, expected):
 
     def test_accordion_one_page(self):
         accordion = vm.Accordion(pages={"Group": ["Page 1"]}).build(active_page_id="Page 1")
-        assert_component_equal(accordion, html.Div(hidden=True, id="nav-panel"))
+        assert_component_equal(accordion, dbc.Nav(className="d-none invisible", id="nav-panel"))

vizro-core/tests/unit/vizro/models/_navigation/test_nav_bar.py

@@ -138,7 +138,7 @@ def test_nav_bar_active_pages_as_list(self, pages_as_list):
             ]
         )
         assert_component_equal(built_nav_bar["nav-bar"], expected_nav_bar, keys_to_strip={"id", "className"})
-        assert_component_equal(built_nav_bar["nav-panel"], dbc.Nav(id="nav-panel", hidden=True))
+        assert_component_equal(built_nav_bar["nav-panel"], dbc.Nav(id="nav-panel", className="d-none invisible"))
 
     def test_nav_bar_not_active_pages_as_dict(self, pages_as_dict):
         nav_bar = vm.NavBar(pages=pages_as_dict)
@@ -162,7 +162,7 @@ def test_nav_bar_not_active_pages_as_dict(self, pages_as_dict):
             ]
         )
         assert_component_equal(built_nav_bar["nav-bar"], expected_nav_bar, keys_to_strip={"id", "className"})
-        assert_component_equal(built_nav_bar["nav-panel"], dbc.Nav(hidden=True, id="nav-panel"))
+        assert_component_equal(built_nav_bar["nav-panel"], dbc.Nav(className="d-none invisible", id="nav-panel"))
 
     def test_nav_bar_not_active_pages_as_list(self, pages_as_list):
         nav_bar = vm.NavBar(pages=pages_as_list)
@@ -199,4 +199,4 @@ def test_nav_bar_not_active_pages_as_list(self, pages_as_list):
             ]
         )
         assert_component_equal(built_nav_bar["nav-bar"], expected_nav_bar, keys_to_strip={"id", "className"})
-        assert_component_equal(built_nav_bar["nav-panel"], dbc.Nav(id="nav-panel", hidden=True))
+        assert_component_equal(built_nav_bar["nav-panel"], dbc.Nav(id="nav-panel", className="d-none invisible"))

vizro-core/tests/unit/vizro/models/_navigation/test_navigation.py

@@ -84,7 +84,7 @@ def test_default_nav_selector(self, pages, request):
         navigation = vm.Navigation(pages=pages)
         navigation.pre_build()
         built_navigation = navigation.build(active_page_id="Page 1")
-        assert_component_equal(built_navigation["nav-bar"], dbc.Navbar(hidden=True, id="nav-bar"))
+        assert_component_equal(built_navigation["nav-bar"], dbc.Navbar(className="d-none invisible", id="nav-bar"))
         assert_component_equal(built_navigation["nav-panel"], dbc.Nav(id="nav-panel"), keys_to_strip={"children"})
         assert_component_equal(built_navigation["nav-panel"].children, [dbc.Accordion()], keys_to_strip=STRIP_ALL)
 
@@ -102,5 +102,7 @@ def test_non_default_nav_selector_pages_as_list(self, pages_as_list):
         built_navigation = navigation.build(active_page_id="Page 1")
         assert_component_equal(built_navigation["nav-bar"], dbc.Navbar(id="nav-bar"), keys_to_strip={"children"})
         assert_component_equal(
-            built_navigation["nav-panel"], dbc.Nav(id="nav-panel", hidden=True), keys_to_strip={"children"}
+            built_navigation["nav-panel"],
+            dbc.Nav(id="nav-panel", className="d-none invisible"),
+            keys_to_strip={"children"},
         )