Consolidate approach of hidden containers

mckinsey · Nov 1, 2023 · f8fb5d7 · f8fb5d7
1 parent 3c96779
commit f8fb5d7
Show file tree

Hide file tree

Showing 18 changed files with 18 additions and 22 deletions.
diff --git a/vizro-core/docs/pages/user_guides/custom_components.md b/vizro-core/docs/pages/user_guides/custom_components.md
@@ -125,7 +125,7 @@ vm.Parameter.add_type("selector", TooltipNonCrossRangeSlider)
 
                 return html.Div(
                     [
-                        html.P(self.title, id="range_slider_title") if self.title else None,
+                        html.P(self.title, id="range_slider_title") if self.title else html.Div(hidden=True),
                         html.Div(
                             [
                                 dcc.RangeSlider(

diff --git a/vizro-core/src/vizro/actions/_action_loop/_get_action_loop_components.py b/vizro-core/src/vizro/actions/_action_loop/_get_action_loop_components.py
@@ -24,7 +24,7 @@ def _get_action_loop_components() -> html.Div:
     components = [
         dcc.Store(id="action_finished"),
         dcc.Store(id="remaining_actions", data=[]),
-        html.Div(id="cycle_breaker_div", style={"display": "hidden"}),
+        html.Div(id="cycle_breaker_div", hidden=True),
         dcc.Store(id="cycle_breaker_empty_output_store"),
     ]
 

diff --git a/vizro-core/src/vizro/models/_components/card.py b/vizro-core/src/vizro/models/_components/card.py
@@ -39,7 +39,7 @@ def build(self):
                 className="button_container",
             )
             if self.href
-            else None
+            else html.Div(hidden=True)
         )
         card_container = "nav_card_container" if self.href else "card_container"
 

diff --git a/vizro-core/src/vizro/models/_components/form/_user_input.py b/vizro-core/src/vizro/models/_components/form/_user_input.py
@@ -36,7 +36,7 @@ class UserInput(VizroBaseModel):
     def build(self):
         return html.Div(
             [
-                html.P(self.title) if self.title else None,
+                html.P(self.title) if self.title else html.Div(hidden=True),
                 dbc.Input(
                     id=self.id,
                     placeholder=self.placeholder,

diff --git a/vizro-core/src/vizro/models/_components/form/checklist.py b/vizro-core/src/vizro/models/_components/form/checklist.py
@@ -41,7 +41,7 @@ def build(self):
 
         return html.Div(
             [
-                html.P(self.title) if self.title else None,
+                html.P(self.title) if self.title else html.Div(hidden=True),
                 dcc.Checklist(
                     id=self.id,
                     options=full_options,

diff --git a/vizro-core/src/vizro/models/_components/form/dropdown.py b/vizro-core/src/vizro/models/_components/form/dropdown.py
@@ -53,7 +53,7 @@ def build(self):
         full_options, default_value = get_options_and_default(options=self.options, multi=self.multi)
         return html.Div(
             [
-                html.P(self.title) if self.title else None,
+                html.P(self.title) if self.title else html.Div(hidden=True),
                 dcc.Dropdown(
                     id=self.id,
                     options=full_options,

diff --git a/vizro-core/src/vizro/models/_components/form/radio_items.py b/vizro-core/src/vizro/models/_components/form/radio_items.py
@@ -42,7 +42,7 @@ def build(self):
 
         return html.Div(
             [
-                html.P(self.title) if self.title else None,
+                html.P(self.title) if self.title else html.Div(hidden=True),
                 dcc.RadioItems(
                     id=self.id,
                     options=full_options,

diff --git a/vizro-core/src/vizro/models/_components/form/range_slider.py b/vizro-core/src/vizro/models/_components/form/range_slider.py
@@ -87,7 +87,7 @@ def build(self):
                         "max": self.max,
                     },
                 ),
-                html.P(self.title) if self.title else None,
+                html.P(self.title) if self.title else html.Div(hidden=True),
                 html.Div(
                     [
                         dcc.RangeSlider(

diff --git a/vizro-core/src/vizro/models/_components/form/slider.py b/vizro-core/src/vizro/models/_components/form/slider.py
@@ -81,7 +81,7 @@ def build(self):
                         "max": self.max,
                     },
                 ),
-                html.P(self.title) if self.title else None,
+                html.P(self.title) if self.title else html.Div(hidden=True),
                 html.Div(
                     [
                         dcc.Slider(

diff --git a/vizro-core/src/vizro/models/_components/table.py b/vizro-core/src/vizro/models/_components/table.py
@@ -56,7 +56,7 @@ def build(self):
         return dcc.Loading(
             html.Div(
                 [
-                    html.H3(self.title, className="table-title") if self.title else None,
+                    html.H3(self.title, className="table-title") if self.title else html.Div(hidden=True),
                     html.Div(dash_table.DataTable(), id=self.id),
                 ],
                 className="table-container",

diff --git a/vizro-core/src/vizro/models/_dashboard.py b/vizro-core/src/vizro/models/_dashboard.py
@@ -101,7 +101,7 @@ def _make_page_layout(self, page: Page):
         dashboard_title = (
             html.Div(children=[html.H2(self.title), html.Hr()], className="dashboard_title", id="dashboard_title_outer")
             if self.title
-            else html.Div(className="hidden", id="dashboard_title_outer")
+            else html.Div(hidden=True, id="dashboard_title_outer")
         )
         theme_switch = daq.BooleanSwitch(
             id="theme_selector", on=True if self.theme == "vizro_dark" else False, persistence=True
@@ -122,7 +122,7 @@ def _make_page_layout(self, page: Page):
         left_side = (
             html.Div(children=left_side_elements, className="left_side", id="left_side_outer")
             if any(left_side_elements)
-            else html.Div(className="hidden", id="left_side_outer")
+            else html.Div(hidden=True, id="left_side_outer")
         )
         right_side = html.Div(children=[header, component_container], className="right_side", id="right_side_outer")
         return html.Div([left_side, right_side], className="page_container", id="page_container_outer")

diff --git a/vizro-core/src/vizro/models/_navigation/_accordion.py b/vizro-core/src/vizro/models/_navigation/_accordion.py
@@ -36,7 +36,7 @@ def coerce_pages_type(cls, pages):
     def build(self, *, active_page_id=None):
         # Hide navigation panel if there is only one page
         if len(list(itertools.chain(*self.pages.values()))) == 1:
-            return html.Div(className="hidden")
+            return html.Div(hidden=True)
 
         accordion_items = []
         for page_group, page_members in self.pages.items():

diff --git a/vizro-core/src/vizro/models/_page.py b/vizro-core/src/vizro/models/_page.py
@@ -118,7 +118,7 @@ def build(self):
         control_panel = (
             html.Div(children=[*controls_content, html.Hr()], className="control_panel", id="control_panel_outer")
             if controls_content
-            else html.Div(className="hidden", id="control_panel_outer")
+            else html.Div(hidden=True, id="control_panel_outer")
         )
         components_content = [
             html.Div(

diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css
@@ -92,10 +92,6 @@
   width: 100%;
 }
 
-.hidden {
-  display: none;
-}
-
 .loading-container {
   height: 100%;
   width: 100%;

diff --git a/vizro-core/tests/unit/vizro/actions/_action_loop/test_get_action_loop_components.py b/vizro-core/tests/unit/vizro/actions/_action_loop/test_get_action_loop_components.py
@@ -19,7 +19,7 @@ def fundamental_components():
     return [
         dcc.Store(id="action_finished"),
         dcc.Store(id="remaining_actions", data=[]),
-        html.Div(id="cycle_breaker_div", style={"display": "hidden"}),
+        html.Div(id="cycle_breaker_div", hidden=True),
         dcc.Store(id="cycle_breaker_empty_output_store"),
     ]
 

diff --git a/vizro-core/tests/unit/vizro/models/_components/form/test_range_slider.py b/vizro-core/tests/unit/vizro/models/_components/form/test_range_slider.py
@@ -21,7 +21,7 @@ def expected_range_slider_default():
                     "max": None,
                 },
             ),
-            None,
+            html.Div(hidden=True),
             html.Div(
                 [
                     dcc.RangeSlider(

diff --git a/vizro-core/tests/unit/vizro/models/_components/test_table.py b/vizro-core/tests/unit/vizro/models/_components/test_table.py
@@ -28,7 +28,7 @@ def expected_table():
     return dcc.Loading(
         html.Div(
             [
-                None,
+                html.Div(hidden=True),
                 html.Div(dash_table.DataTable(), id="text_table"),
             ],
             className="table-container",

diff --git a/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py b/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py
@@ -62,5 +62,5 @@ def test_accordion_build_pages_as_dict(self, pages_as_dict, accordion_from_pages
     def test_single_page_and_hidden_div(self):
         accordion = Accordion(pages=["Page 1"]).build()
         result = json.loads(json.dumps(accordion, cls=plotly.utils.PlotlyJSONEncoder))
-        expected = json.loads(json.dumps(html.Div(className="hidden"), cls=plotly.utils.PlotlyJSONEncoder))
+        expected = json.loads(json.dumps(html.Div(hidden=True), cls=plotly.utils.PlotlyJSONEncoder))
         assert result == expected