Replace dash-mantine with dbc

vizro-core/examples/scratch_dev/app.py

@@ -1,51 +1,61 @@
 """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(
+                            figure=px.bar(
+                                gapminder_2007,
+                                title="Graph 1",
+                                x="continent",
+                                y="lifeExp",
+                                color="continent",
+                            ),
+                        ),
+                        vm.Graph(
+                            figure=px.box(
+                                gapminder_2007,
+                                title="Graph 2",
+                                x="continent",
+                                y="lifeExp",
+                                color="continent",
+                            ),
+                        ),
+                    ],
+                ),
+                vm.Container(
+                    title="Tab II",
+                    components=[
+                        vm.Graph(
+                            figure=px.scatter(
+                                gapminder_2007,
+                                title="Graph 3",
+                                x="gdpPercap",
+                                y="lifeExp",
+                                size="pop",
+                                color="continent",
+                            ),
+                        ),
+                    ],
+                ),
+            ],
         ),
     ],
+    controls=[vm.Filter(column="continent")],
 )
 
 dashboard = vm.Dashboard(pages=[page])
 
-if __name__ == "__main__":
+if __name__ == '__main__':
     Vizro().build(dashboard).run()

vizro-core/pyproject.toml

@@ -16,7 +16,7 @@ classifiers = [
 ]
 dependencies = [
   "dash>=2.17.1,<3",  # 2.17.1 needed for no_output fix in clientside_callback
-  "dash_bootstrap_components",
+  "dash_bootstrap_components>=1.6.0",
   "dash-ag-grid>=31.0.0",
   "pandas>=2",
   "plotly>=5.12.0",

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

@@ -2,7 +2,7 @@
 
 from typing import TYPE_CHECKING, Literal
 
-import dash_mantine_components as dmc
+import dash_bootstrap_components as dbc
 from dash import html
 
 try:
@@ -33,21 +33,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",
-        )
-
-        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(html.Div([tab.build()], className="tab-content"),
+                    label=tab.title)
+            for tab in self.tabs],
             persistence=True,
             persistence_type="session",
-            className="tabs",
         )

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

@@ -1,60 +1,3 @@
-.tabs {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  height: 100%;
-}
-
-.tabs-list {
-  align-items: flex-start;
-  align-self: stretch;
-  border-bottom: 1px solid var(--border-subtleAlpha01);
-  display: flex;
-  flex-wrap: nowrap;
-  gap: 16px;
-  height: 32px;
-}
-
-.tabs-panel {
-  height: calc(100% - 60px);
-}
-
-.tab-content {
-  height: 100%;
-}
-
-.tab-title {
-  align-items: flex-start;
-  border-bottom: 1px solid transparent;
-  color: var(--text-secondary);
-  display: flex;
-  font-size: 16px;
-  height: 32px;
-  line-height: 20px;
-  margin: 0;
-  padding: 0;
-}
-
-.tab-title:hover {
-  background-color: transparent;
-  border-bottom: 1px solid var(--border-hover);
-  color: var(--text-primaryHover);
-}
-
-.tab-title[data-active] {
-  border-bottom: 1px solid var(--border-selected);
-  color: var(--text-primary);
-}
-
-.tab-title[data-active]:hover {
-  background-color: transparent;
-  border-color: 1px solid var(--border-selected);
-}
-
-.tab-title[data-active] .mantine-Tabs-tabLabel {
-  color: var(--text-primary);
-}
-
 .tab-content > .page-component-container > .container-title {
   display: none;
 }