[Tidy] Replace underscores with dashes in classNames (#781)

vizro-core/changelog.d/20241004_162300_rilesdou_replace_underscores_css.md

@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->

vizro-core/docs/pages/explanation/authors.md

@@ -38,7 +38,8 @@ Natalia Kurakina,
 [Chiara Pullem](https://github.com/chiara-sophie)
 [Lydia Pitts](https://github.com/LydiaPitts)
 [Bhavana Sundar](https://github.com/bhavanaeh),
-[Ferida Mohammed](https://github.com/feridaaa)
+[Ferida Mohammed](https://github.com/feridaaa),
+[Riley Dou](https://github.com/rilieo)
 
 with thanks to Sam Bourton and Kevin Staight for sponsorship, inspiration and guidance,
 

vizro-core/src/vizro/models/_components/container.py

@@ -57,7 +57,7 @@ def build(self):
         return html.Div(
             id=self.id,
             children=[
-                html.H3(children=self.title, className="container__title", id=f"{self.id}_title"),
+                html.H3(children=self.title, className="container-title", id=f"{self.id}_title"),
                 components_container,
             ],
             className="page-component-container",

vizro-core/src/vizro/models/_components/form/_alert.py

@@ -42,5 +42,4 @@ def build(self):
                     className="alert",
                 )
             ],
-            className="alert_container",
         )

vizro-core/src/vizro/models/_components/form/date_picker.py

@@ -108,5 +108,4 @@ def build(self):
                 date_picker,
                 dcc.Store(id=f"{self.id}_input_store", storage_type="session", data=init_value),
             ],
-            className="selector_container",
         )

vizro-core/src/vizro/models/_components/tabs.py

@@ -34,12 +34,12 @@ class Tabs(VizroBaseModel):
     @_log_call
     def build(self):
         tabs_list = dmc.TabsList(
-            [dmc.Tab(tab.title, value=tab.id, className="tab__title") for tab in self.tabs],
-            className="tabs__list",
+            [dmc.Tab(tab.title, value=tab.id, className="tab-title") for tab in self.tabs],
+            className="tabs-list",
         )
 
         tabs_panels = [
-            dmc.TabsPanel(html.Div([tab.build()], className="tab__content"), value=tab.id, className="tabs__panel")
+            dmc.TabsPanel(html.Div([tab.build()], className="tab-content"), value=tab.id, className="tabs-panel")
             for tab in self.tabs
         ]
 

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

@@ -313,14 +313,14 @@ def _make_page_404_layout():
                                 html.H3("This page could not be found.", className="heading-3-600"),
                                 html.P("Make sure the URL you entered is correct."),
                             ],
-                            className="error_text_container",
+                            className="error-text-container",
                         ),
                         dbc.Button(children="Take me home", href=get_relative_path("/")),
                     ],
-                    className="error_content_container",
+                    className="error-content-container",
                 ),
             ],
-            className="page_error_container",
+            className="page-error-container",
         )
 
     @staticmethod

vizro-core/src/vizro/static/css/layout.css

@@ -85,7 +85,7 @@
   border-bottom: 1px solid var(--border-subtle-alpha-01);
 }
 
-.page_error_container {
+.page-error-container {
   align-items: center;
   background: var(--surfaces-bg-03);
   display: flex;
@@ -95,15 +95,15 @@
   width: 100vw;
 }
 
-.error_content_container {
+.error-content-container {
   align-items: center;
   display: inline-flex;
   flex-direction: column;
   gap: 24px;
   margin-top: -32px;
 }
 
-.error_text_container {
+.error-text-container {
   display: flex;
   flex-direction: column;
   gap: 8px;

vizro-core/src/vizro/static/css/tabs.css

@@ -5,7 +5,7 @@
   height: 100%;
 }
 
-.tabs__list {
+.tabs-list {
   align-items: flex-start;
   align-self: stretch;
   border-bottom: 1px solid var(--border-subtle-alpha-01);
@@ -15,15 +15,15 @@
   height: 32px;
 }
 
-.tabs__panel {
+.tabs-panel {
   height: calc(100% - 60px);
 }
 
-.tab__content {
+.tab-content {
   height: 100%;
 }
 
-.tab__title {
+.tab-title {
   align-items: flex-start;
   border-bottom: 1px solid transparent;
   color: var(--text-secondary);
@@ -35,25 +35,25 @@
   padding: 0;
 }
 
-.tab__title:hover {
+.tab-title:hover {
   background-color: transparent;
   border-bottom: 1px solid var(--text-active);
 }
 
-.tab__title[data-active] {
+.tab-title[data-active] {
   border-bottom: 1px solid var(--text-active);
   color: var(--text-active);
 }
 
-.tab__title[data-active]:hover {
+.tab-title[data-active]:hover {
   background-color: transparent;
   border-color: 1px solid var(--text-active);
 }
 
-.tab__title[data-active] .mantine-Tabs-tabLabel {
+.tab-title[data-active] .mantine-Tabs-tabLabel {
   color: var(--text-active);
 }
 
-.tab__content > .page-component-container > .container__title {
+.tab-content > .page-component-container > .container-title {
   display: none;
 }

vizro-core/tests/unit/vizro/models/_components/form/test_date_picker.py

@@ -137,6 +137,5 @@ def test_datepicker_build(self, range, value):
                 ),
                 dcc.Store(id="datepicker_id_input_store", storage_type="session", data=value),
             ],
-            className="selector_container",
         )
         assert_component_equal(date_picker, expected_datepicker)

vizro-core/tests/unit/vizro/models/_components/test_container.py

@@ -50,6 +50,6 @@ def test_container_build(self):
         )
         assert_component_equal(result.children, [html.H3(), html.Div()], keys_to_strip=STRIP_ALL)
         # We still want to test the exact H3 produced in Container.build:
-        assert_component_equal(result.children[0], html.H3("Title", className="container__title", id="container_title"))
+        assert_component_equal(result.children[0], html.H3("Title", className="container-title", id="container_title"))
         # And also that a button has been inserted in the right place:
         assert_component_equal(result["layout_id_0"].children, dbc.Button(), keys_to_strip=STRIP_ALL)

vizro-core/tests/unit/vizro/models/_components/test_tabs.py

@@ -56,18 +56,18 @@ def test_tabs_build(self, containers):
             result.children[0],
             dmc.TabsList(
                 children=[
-                    dmc.Tab(value="container-1", children="Title-1", className="tab__title"),
-                    dmc.Tab(value="container-2", children="Title-2", className="tab__title"),
+                    dmc.Tab(value="container-1", children="Title-1", className="tab-title"),
+                    dmc.Tab(value="container-2", children="Title-2", className="tab-title"),
                 ],
-                className="tabs__list",
+                className="tabs-list",
             ),
         )
         # This one removes the need for duplication of tests as the output is similar
         assert_component_equal(
             result.children[1:],
             [
-                dmc.TabsPanel(className="tabs__panel", value="container-1"),
-                dmc.TabsPanel(className="tabs__panel", value="container-2"),
+                dmc.TabsPanel(className="tabs-panel", value="container-1"),
+                dmc.TabsPanel(className="tabs-panel", value="container-2"),
             ],
             keys_to_strip={"children"},
         )

vizro-core/tests/unit/vizro/models/test_dashboard.py

@@ -251,14 +251,14 @@ def test_make_page_404_layout(self, vizro_app):
                                 html.H3("This page could not be found.", className="heading-3-600"),
                                 html.P("Make sure the URL you entered is correct."),
                             ],
-                            className="error_text_container",
+                            className="error-text-container",
                         ),
                         dbc.Button("Take me home", href="/"),
                     ],
-                    className="error_content_container",
+                    className="error-content-container",
                 ),
             ],
-            className="page_error_container",
+            className="page-error-container",
         )
 
         assert_component_equal(vm.Dashboard._make_page_404_layout(), expected)