[Tidy] Add vizro-bootstrap stylesheet and remove custom CSS (mckins…

…ey#384)

Co-authored-by: Pruthvi Prakasha <[email protected]>

.pre-commit-config.yaml

@@ -33,6 +33,7 @@ repos:
     rev: v2.2.6
     hooks:
       - id: codespell
+        args: ["--skip=*.min.css.map, *.min.css"]
         additional_dependencies:
           - tomli
 

.prettierignore

@@ -1,2 +1,4 @@
 **/docs/
 **/.devcontainer/devcontainer.json
+**/static/css/vizro-bootstrap.min.css
+**/static/css/vizro-bootstrap.min.css.map

.stylelintignore

@@ -0,0 +1,2 @@
+**/static/css/vizro-bootstrap.min.css
+**/static/css/vizro-bootstrap.min.css.map

vizro-core/changelog.d/20240325_180146_huong_li_nguyen_replace_css_bootstrap.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
+
+- Replace default bootstrap stylesheet with `vizro-bootstrap` stylesheet. ([#384](https://github.com/mckinsey/vizro/pull/384))
+- Refactor code and remove custom classNames from `Button`, `Card`, `NavBar` and `NavLink`. ([#384](https://github.com/mckinsey/vizro/pull/384))
+
+<!--
+### 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/_vizro.py

@@ -4,7 +4,6 @@
 from typing import List
 
 import dash
-import dash_bootstrap_components as dbc
 import flask
 from flask_caching import SimpleCache
 
@@ -30,9 +29,6 @@ def __init__(self, **kwargs):
         self.dash.config.external_stylesheets.extend(
             [
                 "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined",
-                # Bootstrap theme has no effect on styling as it gets overwritten by our CSS. However, it is
-                # necessary to add a default theme here so that added dbc components work properly.
-                dbc.themes.BOOTSTRAP,
             ]
         )
 
@@ -41,6 +37,10 @@ def __init__(self, **kwargs):
         vizro_assets_folder = Path(__file__).with_name("static")
         requests_pathname_prefix = self.dash.config.requests_pathname_prefix
         vizro_css = [requests_pathname_prefix + path for path in self._get_external_assets(vizro_assets_folder, "css")]
+
+        # Ensure vizro-bootstrap.min.css is loaded in first to allow overwrites
+        vizro_css.sort(key=lambda x: not x.endswith("vizro-bootstrap.min.css"))
+
         vizro_js = [
             {"src": requests_pathname_prefix + path, "type": "module"}
             for path in self._get_external_assets(vizro_assets_folder, "js")

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

@@ -1,7 +1,6 @@
 from typing import List, Literal
 
 import dash_bootstrap_components as dbc
-from dash import html
 
 try:
     from pydantic.v1 import Field
@@ -32,8 +31,4 @@ class Button(VizroBaseModel):
 
     @_log_call
     def build(self):
-        return html.Div(
-            dbc.Button(id=self.id, children=self.text, className="button_primary"),
-            className="button_container",
-            id=f"{self.id}_outer",
-        )
+        return dbc.Button(id=self.id, children=self.text)

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

@@ -34,15 +34,15 @@ class Card(VizroBaseModel):
 
     @_log_call
     def build(self):
-        text = dcc.Markdown(self.text, className="card_text", dangerously_allow_html=False, id=self.id)
+        text = dcc.Markdown(self.text, dangerously_allow_html=False, id=self.id)
         card_content = (
             dbc.NavLink(
                 text,
                 href=get_relative_path(self.href) if self.href.startswith("/") else self.href,
-                className="card-link",
             )
             if self.href
             else text
         )
+
         card_class = "nav-card" if self.href else "card"
         return dbc.Card(card_content, className=card_class, id=f"{self.id}_outer")

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

@@ -246,7 +246,7 @@ def _make_page_404_layout():
                             ],
                             className="error_text_container",
                         ),
-                        dbc.Button("Take me home", href=get_relative_path("/"), className="button_primary"),
+                        dbc.Button("Take me home", href=get_relative_path("/")),
                     ],
                     className="error_content_container",
                 ),

vizro-core/src/vizro/models/_navigation/nav_bar.py

@@ -3,14 +3,14 @@
 from collections.abc import Mapping
 from typing import Dict, List, Literal
 
+import dash_bootstrap_components as dbc
 from dash import html
 
 try:
     from pydantic.v1 import Field, validator
 except ImportError:  # pragma: no cov
     from pydantic import Field, validator
 
-import dash_bootstrap_components as dbc
 
 from vizro.models import VizroBaseModel
 from vizro.models._models_utils import _log_call
@@ -75,4 +75,6 @@ def build(self, *, active_page_id=None) -> _NavBuildType:
             # Active page is not in navigation at all, so hide navigation panel.
             nav_panel = dbc.Nav(id="nav-panel", className="d-none invisible")
 
-        return html.Div([dbc.Navbar(nav_links, id="nav-bar"), nav_panel])
+        # `flex-column` ensures that we return a vertical NavBar. In the future, we could use that className
+        # to create a horizontal NavBar.
+        return html.Div([dbc.Navbar(nav_links, id="nav-bar", className="flex-column"), nav_panel])

vizro-core/src/vizro/models/_navigation/nav_link.py

@@ -67,7 +67,6 @@ def build(self, *, active_page_id=None):
                 ),
             ],
             id=self.id,
-            className="nav-bar-icon-link",
             href=get_relative_path(first_page.path),
             # `active` is required to keep the icon highlighted when navigating through different pages inside
             # the nested accordion

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

@@ -154,3 +154,29 @@
 #page-container .ag-floating-filter-input input[class^="ag-"][type="text"] {
   padding-left: 0;
 }
+
+/* Buttons */
+#dashboard-container .ag-standard-button {
+  background: var(--fill-active);
+  border: none;
+  border-radius: 0;
+  box-shadow: var(--box-shadow-elevation-0);
+  color: var(--text-contrast-primary);
+  font-size: var(--text-size-02);
+  font-weight: var(--text-weight-semibold);
+  height: 32px;
+  letter-spacing: var(--letter-spacing-body-link-02);
+  line-height: var(--text-size-05);
+  padding: var(--spacing-01) var(--spacing-03);
+  text-transform: none;
+}
+
+#dashboard-container .ag-standard-button:hover {
+  background: linear-gradient(
+      var(--state-overlays-contrast-hover),
+      var(--state-overlays-contrast-hover)
+    ),
+    var(--fill-active);
+  color: var(--text-contrast-primary);
+  text-decoration-line: underline;
+}

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

@@ -1,3 +1,6 @@
-.form-label {
-  margin-bottom: 0;
+/* This file contains overwrites, which we want to have as defaults for vizro
+but do not want to take over to `vizro-bootstrap` as these settings might not be generic enough. */
+
+.card .nav-link {
+  height: 100%;
 }