diff --git a/vizro-core/docs/pages/user_guides/custom_components.md b/vizro-core/docs/pages/user_guides/custom_components.md index dc3fdc805..bc61f9e13 100644 --- 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 index 70b877c30..cb69b6210 100644 --- 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 index 3933406b6..01e219854 100644 --- 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 index edcfeff0e..cfe29a275 100644 --- 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 index 8fec2870e..b8f0daea6 100644 --- 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 index 5db1a375d..9d01c79a5 100755 --- 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 index 57e460206..782f15d21 100644 --- 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 index 64326c711..4ee181c8d 100644 --- 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 index 5e6607f7e..4a44e898f 100644 --- 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 index 4dd0a33a3..f1e98718e 100644 --- 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 index 1cd899304..cf6fbab63 100644 --- 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 index 6937e6b2b..be00ff619 100644 --- 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 index 88ca01774..e8e0a8245 100644 --- 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 index 5418b05a3..26eb979f0 100644 --- 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 index dcabb030d..35546c5a5 100644 --- 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 index a5a74407a..dba28f7b6 100644 --- 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 index ca9eedc1b..157f42bfe 100644 --- 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 index 17d483450..c96a782cf 100644 --- 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