[Tidy] Replace dmc.Tabs with dbc.Tabs (#895)

vizro-core/changelog.d/20241125_175907_huong_li_nguyen_replace_tabs.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.Tabs` with `dbc.Tabs` and change CSS selectors accordingly. ([#895](https://github.com/mckinsey/vizro/pull/895))
+
+<!--
+### 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/examples/scratch_dev/app.py

@@ -1,46 +1,55 @@
 """Dev app to try things out."""
 
-import pandas as pd
 import vizro.models as vm
 import vizro.plotly.express as px
 from vizro import Vizro
-from vizro._themes._color_values import COLORS
-import dash_bootstrap_components as dbc
-from dash import html
 
-from typing import Literal
-
-from dash import html
-
-import vizro.models as vm
-from vizro import Vizro
-
-
-class Tooltip(vm.VizroBaseModel):
-    type: Literal["tooltip"] = "tooltip"
-    text: str = "This is a tooltip"
-
-    def build(self):
-        return html.Div(
-            [
-                dbc.Button("Button", id=f"{self.id}-tooltip-target"),
-                dbc.Tooltip(
-                    self.text,
-                    target=f"{self.id}-tooltip-target",
-                    is_open=True,
-                ),
-            ]
-        )
-
-
-vm.Page.add_type("components", Tooltip)
+gapminder_2007 = px.data.gapminder().query("year == 2007")
 
 page = vm.Page(
-    title="Custom Component",
+    title="Tabs",
     components=[
-        Tooltip(text="Tooltip label"),
-        Tooltip(
-            text="Max. width of tooltip should not exceed 180px - this instance should be used for multiple lines of text for increased legibility."
+        vm.Tabs(
+            tabs=[
+                vm.Container(
+                    title="Tab I",
+                    components=[
+                        vm.Graph(
+                            title="Graph I",
+                            figure=px.bar(
+                                gapminder_2007,
+                                x="continent",
+                                y="lifeExp",
+                                color="continent",
+                            ),
+                        ),
+                        vm.Graph(
+                            title="Graph II",
+                            figure=px.box(
+                                gapminder_2007,
+                                x="continent",
+                                y="lifeExp",
+                                color="continent",
+                            ),
+                        ),
+                    ],
+                ),
+                vm.Container(
+                    title="Tab II",
+                    components=[
+                        vm.Graph(
+                            title="Graph III",
+                            figure=px.scatter(
+                                gapminder_2007,
+                                x="gdpPercap",
+                                y="lifeExp",
+                                size="pop",
+                                color="continent",
+                            ),
+                        ),
+                    ],
+                ),
+            ],
         ),
     ],
 )

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

@@ -2,8 +2,7 @@
 
 from typing import TYPE_CHECKING, Literal
 
-import dash_mantine_components as dmc
-from dash import html
+import dash_bootstrap_components as dbc
 
 try:
     from pydantic.v1 import validator
@@ -33,21 +32,9 @@ 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",
-        )
-
-        tabs_panels = [
-            dmc.TabsPanel(html.Div([tab.build()], className="tab-content"), value=tab.id, className="tabs-panel")
-            for tab in self.tabs
-        ]
-
-        return dmc.Tabs(
+        return dbc.Tabs(
             id=self.id,
-            value=self.tabs[0].id,
-            children=[tabs_list, *tabs_panels],
+            children=[dbc.Tab(tab.build(), label=tab.title) for tab in self.tabs],
             persistence=True,
             persistence_type="session",
-            className="tabs",
         )

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

@@ -28,6 +28,7 @@ All the HEX values starting with --text-code are taken from the Github code high
   --collapse-icon-bg: var(--primary-300);
 }
 
+/* CARDS */
 .card .nav-link {
   height: 100%;
 }
@@ -36,10 +37,32 @@ All the HEX values starting with --text-code are taken from the Github code high
   margin-bottom: 0;
 }
 
+/* ACCORDION */
 .accordion-item .nav-link {
   padding: 0.5rem 1rem;
 }
 
 .accordion-item .nav-link.active {
   border-left: 2px solid var(--border-enabled);
 }
+
+/* TABS */
+.nav-tabs {
+  margin-bottom: 1.25rem;
+}
+
+.tab-content {
+  height: calc(100% - 3.25rem); /* 3.25rem: nav-tabs margin + height */
+}
+
+/* The dbc component adds an additional div element to which we cannot assign a className.
+To ensure the dynamic height adjustment and prevent scrolling, the height must be specified for that div as below. */
+.tab-pane,
+.tab-pane > div:first-child {
+  height: 100%;
+}
+
+/* Hides title of the first container given the title is already reflected in the tab title */
+.tab-content .container-title:first-of-type {
+  display: none;
+}

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

@@ -1,6 +1,6 @@
 """Unit tests for vizro.models.Container."""
 
-import dash_mantine_components as dmc
+import dash_bootstrap_components as dbc
 import pytest
 from asserts import assert_component_equal
 from dash import html
@@ -41,42 +41,20 @@ def test_tabs_build(self, containers):
         # We want to test the component itself but not all its children
         assert_component_equal(
             result,
-            dmc.Tabs(id="tabs-id", value="container-1", persistence=True, persistence_type="session", className="tabs"),
+            dbc.Tabs(id="tabs-id", persistence=True, persistence_type="session"),
             keys_to_strip={"children"},
         )
         # We want to test the children created in the Tabs.build but not e.g. the
         # vm.Container.build() as it's tested elsewhere already
         assert_component_equal(
-            result.children,
-            [dmc.TabsList(), dmc.TabsPanel(value="container-1"), dmc.TabsPanel(value="container-2")],
-            keys_to_strip={"children", "className"},
-        )
-        # So we go down the tree and ignore the children selectively
-        assert_component_equal(
-            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"),
-                ],
-                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"),
-            ],
-            keys_to_strip={"children"},
+            result.children, [dbc.Tab(label="Title-1"), dbc.Tab(label="Title-2")], keys_to_strip={"children"}
         )
         # We still check that the html.Div for the Containers are created, but we don't need to check its content
         assert_component_equal(
-            [tab.children.children for tab in result.children[1:]],
+            [tab.children for tab in result.children],
             [
-                [html.Div(id="container-1", className="page-component-container")],
-                [html.Div(id="container-2", className="page-component-container")],
+                html.Div(id="container-1", className="page-component-container"),
+                html.Div(id="container-2", className="page-component-container"),
             ],
             keys_to_strip={"children"},
         )