Change deprecated className to class_name

The once exception where I did not apply this was navigation as it seemed to complicated

vizro-core/docs/pages/user-guides/custom-figures.md

@@ -69,7 +69,7 @@ For instance, to make a KPI card with the icon positioned on the right side of t
                 ]
             )
             body = dbc.CardBody([value_format.format(value=value)])
-            return dbc.Card([header, body], className="card-kpi")
+            return dbc.Card([header, body], class_name="card-kpi")
 
 
         page = vm.Page(

vizro-core/examples/bootstrap/app.py

@@ -65,27 +65,27 @@ def make_subheading(label, link):
 
 badge = html.Div(
     [
-        dbc.Badge("Primary", color="primary", className="me-1"),
-        dbc.Badge("Secondary", color="secondary", className="me-1"),
-        dbc.Badge("Success", color="success", className="me-1"),
-        dbc.Badge("Warning", color="warning", className="me-1"),
-        dbc.Badge("Danger", color="danger", className="me-1"),
-        dbc.Badge("Info", color="info", className="me-1"),
-        dbc.Badge("Light", color="light", className="me-1"),
+        dbc.Badge("Primary", color="primary", class_name="me-1"),
+        dbc.Badge("Secondary", color="secondary", class_name="me-1"),
+        dbc.Badge("Success", color="success", class_name="me-1"),
+        dbc.Badge("Warning", color="warning", class_name="me-1"),
+        dbc.Badge("Danger", color="danger", class_name="me-1"),
+        dbc.Badge("Info", color="info", class_name="me-1"),
+        dbc.Badge("Light", color="light", class_name="me-1"),
         dbc.Badge("Dark", color="dark"),
     ],
     className="mb-2",
 )
 
 badge_pills = html.Div(
     [
-        dbc.Badge("Primary", color="primary", className="me-1", pill=True),
-        dbc.Badge("Secondary", color="secondary", className="me-1", pill=True),
-        dbc.Badge("Success", color="success", className="me-1", pill=True),
-        dbc.Badge("Warning", color="warning", className="me-1", pill=True),
-        dbc.Badge("Danger", color="danger", className="me-1", pill=True),
-        dbc.Badge("Info", color="info", className="me-1", pill=True),
-        dbc.Badge("Light", color="light", className="me-1", pill=True),
+        dbc.Badge("Primary", color="primary", class_name="me-1", pill=True),
+        dbc.Badge("Secondary", color="secondary", class_name="me-1", pill=True),
+        dbc.Badge("Success", color="success", class_name="me-1", pill=True),
+        dbc.Badge("Warning", color="warning", class_name="me-1", pill=True),
+        dbc.Badge("Danger", color="danger", class_name="me-1", pill=True),
+        dbc.Badge("Info", color="info", class_name="me-1", pill=True),
+        dbc.Badge("Light", color="light", class_name="me-1", pill=True),
         dbc.Badge("Dark", color="dark", pill=True),
     ],
 )
@@ -100,12 +100,12 @@ def make_subheading(label, link):
         make_subheading("dbc.Button", "button"),
         html.Div(
             [
-                dbc.Button("Primary", color="primary", className="me-1 mt-1"),
-                dbc.Button("Secondary", color="secondary", className="me-1 mt-1"),
-                dbc.Button("Success", color="success", className="me-1 mt-1"),
-                dbc.Button("Warning", color="warning", className="me-1 mt-1"),
-                dbc.Button("Danger", color="danger", className="me-1 mt-1"),
-                dbc.Button("Info", color="info", className="me-1 mt-1"),
+                dbc.Button("Primary", color="primary", class_name="me-1 mt-1"),
+                dbc.Button("Secondary", color="secondary", class_name="me-1 mt-1"),
+                dbc.Button("Success", color="success", class_name="me-1 mt-1"),
+                dbc.Button("Warning", color="warning", class_name="me-1 mt-1"),
+                dbc.Button("Danger", color="danger", class_name="me-1 mt-1"),
+                dbc.Button("Info", color="info", class_name="me-1 mt-1"),
             ],
             className="mb-2",
         ),
@@ -115,59 +115,59 @@ def make_subheading(label, link):
                     "Primary",
                     outline=True,
                     color="primary",
-                    className="me-1 mt-1",
+                    class_name="me-1 mt-1",
                 ),
                 dbc.Button(
                     "Secondary",
                     outline=True,
                     color="secondary",
-                    className="me-1 mt-1",
+                    class_name="me-1 mt-1",
                 ),
                 dbc.Button(
                     "Success",
                     outline=True,
                     color="success",
-                    className="me-1 mt-1",
+                    class_name="me-1 mt-1",
                 ),
                 dbc.Button(
                     "Warning",
                     outline=True,
                     color="warning",
-                    className="me-1 mt-1",
+                    class_name="me-1 mt-1",
                 ),
                 dbc.Button(
                     "Danger",
                     outline=True,
                     color="danger",
-                    className="me-1 mt-1",
+                    class_name="me-1 mt-1",
                 ),
-                dbc.Button("Info", outline=True, color="info", className="me-1 mt-1"),
+                dbc.Button("Info", outline=True, color="info", class_name="me-1 mt-1"),
             ],
             className="mb-2",
         ),
         html.Div(
             [
-                dbc.Button("Regular", color="primary", className="me-1 mt-1"),
+                dbc.Button("Regular", color="primary", class_name="me-1 mt-1"),
                 dbc.Button(
                     "Active",
                     color="primary",
                     active=True,
-                    className="me-1 mt-1",
+                    class_name="me-1 mt-1",
                 ),
                 dbc.Button(
                     "Disabled",
                     color="primary",
                     disabled=True,
-                    className="me-1 mt-1",
+                    class_name="me-1 mt-1",
                 ),
             ],
             className="mb-2",
         ),
         html.Div(
             [
-                dbc.Button("Large button", size="lg", className="me-1 mt-1"),
-                dbc.Button("Regular button", className="me-1 mt-1"),
-                dbc.Button("Small button", size="sm", className="me-1 mt-1"),
+                dbc.Button("Large button", size="lg", class_name="me-1 mt-1"),
+                dbc.Button("Regular button", class_name="me-1 mt-1"),
+                dbc.Button("Small button", size="sm", class_name="me-1 mt-1"),
             ],
             className="mb-2",
         ),
@@ -187,7 +187,7 @@ def make_subheading(label, link):
                     dbc.Button("Danger", color="danger"),
                 ]
             ),
-            className="mb-2",
+            class_name="mb-2",
         ),
         html.Div(
             dbc.ButtonGroup(
@@ -205,14 +205,14 @@ def make_subheading(label, link):
                 ],
                 vertical=True,
             ),
-            className="mb-2",
+            class_name="mb-2",
         ),
     ],
     lg=6,
     xs=12,
 )
 
-buttons = dbc.Row([buttons1, buttons2], className="mb-4")
+buttons = dbc.Row([buttons1, buttons2], class_name="mb-4")
 
 cards = html.Div(
     [
@@ -290,7 +290,7 @@ def make_subheading(label, link):
                 dbc.Button(
                     "Open collapse",
                     id="dbc-gallery-x-collapse-button",
-                    className="mb-2",
+                    class_name="mb-2",
                 ),
                 dbc.Collapse(
                     dbc.Card(dbc.CardBody("This content is hidden in the collapse")),
@@ -497,21 +497,21 @@ def toggle_fade(n, is_in):
                 dbc.Button("To the left!", color="danger"),
                 dbc.Input(type="text"),
             ],
-            className="my-3",
+            class_name="my-3",
         ),
         dbc.InputGroup(
             [
                 dbc.Input(type="text"),
                 dbc.Button("To the right!", color="success"),
             ],
-            className="mb-3",
+            class_name="mb-3",
         ),
         dbc.InputGroup(
             [
                 dbc.InputGroupText("@"),
                 dbc.Input(type="text", placeholder="Enter username"),
             ],
-            className="mb-3",
+            class_name="mb-3",
         ),
     ],
     className="mb-4",
@@ -605,14 +605,14 @@ def toggle_modal(n, is_open):
             brand_href=DBC_HOME,
             color="primary",
             dark=True,
-            className="mb-3",
+            class_name="mb-3",
         ),
         dbc.NavbarSimple(
             children=navbar_children,
             brand="Navbar",
             brand_href=DBC_HOME,
             color="light",
-            className="mb-3",
+            class_name="mb-3",
         ),
         dbc.NavbarSimple(
             children=navbar_children,
@@ -859,9 +859,9 @@ def open_toast(_):
 
 color_mode_switch = html.Span(
     [
-        dbc.Label(className="fa fa-moon", html_for="color-mode-switch"),
-        dbc.Switch(id="color-mode-switch", value=False, className="d-inline-block ms-1", persistence=True),
-        dbc.Label(className="fa fa-sun", html_for="color-mode-switch"),
+        dbc.Label(class_name="fa fa-moon", html_for="color-mode-switch"),
+        dbc.Switch(id="color-mode-switch", value=False, class_name="d-inline-block ms-1", persistence=True),
+        dbc.Label(class_name="fa fa-sun", html_for="color-mode-switch"),
     ]
 )
 

vizro-core/examples/dev/app.py

@@ -825,7 +825,7 @@ def multiple_cards(data_frame: pd.DataFrame, n_rows: Optional[int] = 1) -> html.
         ["Made with ", html.Img(src=get_asset_url("logo.svg"), id="banner", alt="Vizro logo"), "vizro"],
         href="https://github.com/mckinsey/vizro",
         target="_blank",
-        className="anchor-container",
+        class_name="anchor-container",
     )
     app.dash.layout.children.append(banner)
     app.run()

vizro-core/examples/visual-vocabulary/app.py

@@ -115,7 +115,7 @@ def make_navlink(chart_group: ChartGroup) -> vm.NavLink:
         ["Made with ", html.Img(src=get_asset_url("logo.svg"), id="banner", alt="Vizro logo"), "vizro"],
         href="https://github.com/mckinsey/vizro",
         target="_blank",
-        className="anchor-container",
+        class_name="anchor-container",
     )
 )
 

vizro-core/examples/visual-vocabulary/custom_components.py

@@ -28,7 +28,7 @@ def build(self):
             ],
             href=f"https://py.cafe/snippet/vizro/v1#code={quote(self.code)}",
             target="_blank",
-            className="pycafe-link",
+            class_name="pycafe-link",
         )
 
         return html.Div(

vizro-core/src/vizro/figures/_kpi_cards.py

@@ -69,7 +69,7 @@ def kpi_card(
         ]
     )
     body = dbc.CardBody(value_format.format(value=value))
-    return dbc.Card([header, body], className="card-kpi")
+    return dbc.Card([header, body], class_name="card-kpi")
 
 
 @capture("figure")
@@ -161,6 +161,6 @@ def kpi_card_reference(  # noqa: PLR0913
                 reference_format.format(value=value, reference=reference, delta=delta, delta_relative=delta_relative)
             ),
         ],
-        className=footer_class,
+        class_name=footer_class,
     )
-    return dbc.Card([header, body, footer], className="card-kpi")
+    return dbc.Card([header, body, footer], class_name="card-kpi")

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

@@ -35,7 +35,7 @@ def build(self):
                     children=[html.P(self.text)],
                     duration=self.duration,
                     is_open=self.is_open,
-                    className="alert",
+                    class_name="alert",
                 )
             ],
         )

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

@@ -44,7 +44,7 @@ def _all_hidden(components: list[Component]):
     return all(
         component is None
         or getattr(component, "hidden", False)
-        or "d-none" in getattr(component, "className", "d-inline")
+        or "d-none" in getattr(component, "className", "d-inline")  # TODO: this may be important
         for component in components
     )
 
@@ -131,7 +131,7 @@ def build(self):
         clientside_callback(
             ClientsideFunction(namespace="dashboard", function_name="update_dashboard_theme"),
             # This currently doesn't do anything, but we need to define an Output such that the callback is triggered.
-            Output("dashboard-container", "className"),
+            Output("dashboard-container", "className"),  # TODO: this too
             Input("theme-selector", "value"),
         )
         left_side_div_present = any([len(self.pages) > 1, self.pages[0].controls])
@@ -318,7 +318,7 @@ def _make_page_404_layout(self):
                 html.Img(src=f"data:image/svg+xml;base64,{error_404_svg}"),
                 html.H3("This page could not be found."),
                 html.P("Make sure the URL you entered is correct."),
-                dbc.Button(children="Take me home", href=get_relative_path("/"), className="mt-4"),
+                dbc.Button(children="Take me home", href=get_relative_path("/"), class_name="mt-4"),
             ],
             className="d-flex flex-column align-items-center justify-content-center min-vh-100",
         )

vizro-core/tests/unit/vizro/figures/test_kpi_cards.py

@@ -16,7 +16,7 @@ def test_kpi_card_mandatory(self):
             result,
             dbc.Card(
                 [dbc.CardHeader([None, html.H4("Sum Actual", className="card-kpi-title")]), dbc.CardBody("6")],
-                className="card-kpi",
+                class_name="card-kpi",
             ),
         )
 
@@ -41,7 +41,7 @@ def test_kpi_card_mandatory_and_optional(self):
                     ),
                     dbc.CardBody("$2.00"),
                 ],
-                className="card-kpi",
+                class_name="card-kpi",
             ),
         )
 
@@ -69,10 +69,10 @@ def test_kpi_card_reference_mandatory_delta_negative(self):
                         html.Span("arrow_circle_down", className="material-symbols-outlined"),
                         html.Span("-50.0% vs. reference (12)"),
                     ],
-                    className="color-neg",
+                    class_name="color-neg",
                 ),
             ],
-            className="card-kpi",
+            class_name="card-kpi",
         )
         assert_component_equal(result, expected)
 
@@ -87,10 +87,10 @@ def test_kpi_card_reference_mandatory_delta_positive(self):
                         html.Span("arrow_circle_up", className="material-symbols-outlined"),
                         html.Span("+100.0% vs. reference (6)"),
                     ],
-                    className="color-pos",
+                    class_name="color-pos",
                 ),
             ],
-            className="card-kpi",
+            class_name="card-kpi",
         )
         assert_component_equal(result, expected)
 
@@ -105,10 +105,10 @@ def test_kpi_card_reference_mandatory_delta_zero(self):
                         html.Span("arrow_circle_right", className="material-symbols-outlined"),
                         html.Span("+0.0% vs. reference (6)"),
                     ],
-                    className="",
+                    class_name="",
                 ),
             ],
-            className="card-kpi",
+            class_name="card-kpi",
         )
         assert_component_equal(result, expected)
 
@@ -123,10 +123,10 @@ def test_kpi_card_reference_mandatory_reference_zero(self):
                         html.Span("arrow_circle_up", className="material-symbols-outlined"),
                         html.Span("+nan% vs. reference (0)"),
                     ],
-                    className="color-pos",
+                    class_name="color-pos",
                 ),
             ],
-            className="card-kpi",
+            class_name="card-kpi",
         )
         assert_component_equal(result, expected)
 
@@ -157,10 +157,10 @@ def test_kpi_card_reference_mandatory_and_optional(self):
                         html.Span("arrow_circle_down", className="material-symbols-outlined"),
                         html.Span("B 2.0 is +-2.0 (-0.5:%) vs. 4.0"),
                     ],
-                    className="color-pos",
+                    class_name="color-pos",
                 ),
             ],
-            className="card-kpi",
+            class_name="card-kpi",
         )
 
         assert_component_equal(result, expected)