[Tidy] Replace dmc.Switch with dbc.Switch (#907)

vizro-core/changelog.d/20241129_095703_huong_li_nguyen_replace_switch.md

@@ -0,0 +1,47 @@
+<!--
+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
+
+- Replace `dmc.Switch` with `dbc.Switch` and change CSS selectors accordingly. ([#907](https://github.com/mckinsey/vizro/pull/907))
+
+<!--
+### 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/src/vizro/models/_components/ag_grid.py

@@ -119,7 +119,7 @@ def build(self):
         clientside_callback(
             ClientsideFunction(namespace="dashboard", function_name="update_ag_grid_theme"),
             Output(self._input_component_id, "className"),
-            Input("theme_selector", "checked"),
+            Input("theme-selector", "value"),
         )
 
         return dcc.Loading(

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

@@ -168,7 +168,7 @@ def build(self):
             output=[Output(self.id, "figure"), Output(self.id, "style")],
             inputs=[
                 Input(self.id, "figure"),
-                Input("theme_selector", "checked"),
+                Input("theme-selector", "value"),
                 State("vizro_themes", "data"),
             ],
             prevent_initial_call=True,

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

@@ -8,7 +8,6 @@
 
 import dash
 import dash_bootstrap_components as dbc
-import dash_mantine_components as dmc
 import plotly.io as pio
 from dash import (
     ClientsideFunction,
@@ -142,7 +141,7 @@ def build(self):
             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"),
-            Input("theme_selector", "checked"),
+            Input("theme-selector", "value"),
         )
         left_side_div_present = any([len(self.pages) > 1, self.pages[0].controls])
         if left_side_div_present:
@@ -197,12 +196,11 @@ def _get_page_divs(self, page: Page) -> _PageDivsType:
             else html.H2(id="dashboard-title", hidden=True)
         )
         settings = html.Div(
-            children=dmc.Switch(
-                id="theme_selector",
-                checked=self.theme == "vizro_light",
+            children=dbc.Switch(
+                id="theme-selector",
+                value=self.theme == "vizro_light",
                 persistence=True,
                 persistence_type="session",
-                className="toggle-switch",
             ),
             id="settings",
         )
@@ -311,12 +309,11 @@ def _make_page_404_layout(self):
             [
                 # Theme switch is added such that the 404 page has the same theme as the user-selected one.
                 html.Div(
-                    children=dmc.Switch(
-                        id="theme_selector",
-                        checked=self.theme == "vizro_light",
+                    children=dbc.Switch(
+                        id="theme-selector",
+                        value=self.theme == "vizro_light",
                         persistence=True,
                         persistence_type="session",
-                        className="toggle-switch",
                     ),
                     id="settings",
                 ),

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

@@ -66,3 +66,8 @@ To ensure the dynamic height adjustment and prevent scrolling, the height must b
 .tab-content .container-title:first-of-type {
   display: none;
 }
+
+/* Remove label that automatically gets added when calling `dbc.Switch` to remove gap. */
+label[for="theme-selector"] {
+  display: none;
+}

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

@@ -2,7 +2,6 @@
 
 import dash
 import dash_bootstrap_components as dbc
-import dash_mantine_components as dmc
 import plotly.io as pio
 import pytest
 from asserts import assert_component_equal
@@ -245,12 +244,11 @@ def test_make_page_404_layout(self, page_1, vizro_app):
         expected = html.Div(
             [
                 html.Div(
-                    children=dmc.Switch(
-                        id="theme_selector",
-                        checked=False,
+                    children=dbc.Switch(
+                        id="theme-selector",
+                        value=False,
                         persistence=True,
                         persistence_type="session",
-                        className="toggle-switch",
                     ),
                     id="settings",
                 ),