Merge branch 'main' of https://github.com/mckinsey/vizro into feat/co…

…mponents/datepicker

vizro-core/changelog.d/20240314_124722_huong_li_nguyen_replace_card.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
+
+- Rename CSS classNames `nav_card_container` and `card_container` to `nav-card` and `card`. ([#373](https://github.com/mckinsey/vizro/pull/373))
+
+<!--
+### 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/docs/pages/user-guides/assets.md

@@ -98,14 +98,14 @@ following the pattern `"{component_id}_outer"`.
 To achieve this, do the following:
 
 1. Provide a custom `id` to the relevant `Card` e.g `Card(id="my_card", ...)`
-2. Take a look at the source code of the component to see which CSS Class you need to target e.g. `"card_container"` or `"card_text"`
+2. Take a look at the source code of the component to see which CSS Class you need to target e.g. `"card"` or `"card_text"`
 3. Use CSS selectors to target the right property e.g. by leveraging the ID of the outermost Div `"my_card_outer"`
 
 
 !!! example "Customizing CSS properties in selective components"
     === "my_css_file.css"
     ```css
-    #my_card_outer.card_container {
+    #my_card_outer.card {
       background-color: white;
     }
 

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

@@ -1,7 +1,7 @@
 from typing import Literal
 
 import dash_bootstrap_components as dbc
-from dash import dcc, get_relative_path, html
+from dash import dcc, get_relative_path
 
 try:
     from pydantic.v1 import Field
@@ -44,5 +44,5 @@ def build(self):
             if self.href
             else text
         )
-        card_container = "nav_card_container" if self.href else "card_container"
-        return html.Div(card_content, className=card_container, id=f"{self.id}_outer")
+        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/static/css/card.css

@@ -1,22 +1,23 @@
-.nav_card_container,
-.card_container {
+.nav-card,
+.card {
   background-color: var(--surfaces-bg-card);
+  border: none;
+  border-radius: 0;
   box-shadow: var(--box-shadow-elevation-card);
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow: auto;
 }
 
-.nav_card_container {
-  height: 98%;
-  margin-top: 4px;
-}
-
-.nav_card_container:hover {
+.nav-card:hover {
   background-color: var(--field-enabled);
   box-shadow: var(--box-shadow-elevation-card-hover);
-  top: -8px;
+  transform: translate3d(0, -8px, 0);
+  transition:
+    transform 0.3s,
+    box-shadow 0.2s;
+  will-change: transform;
 }
 
 .card-link {

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

@@ -27,7 +27,7 @@
   background: var(--main-container-bg-color);
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-06);
+  gap: var(--spacing-04);
   padding: 32px;
   width: 100%;
 }
@@ -58,6 +58,7 @@
 
 #page-components {
   overflow: auto;
+  padding-top: var(--spacing-02);
 }
 
 .grid-layout {

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

@@ -16,11 +16,11 @@
   border-color: var(--surfaces-bg-02);
 }
 
-.card_container::-webkit-scrollbar-thumb {
+.card::-webkit-scrollbar-thumb {
   border-color: var(--surfaces-bg-card);
 }
 
-.nav_card_container::-webkit-scrollbar-thumb {
+.nav-card::-webkit-scrollbar-thumb {
   border-color: var(--surfaces-bg-card);
 }
 

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

@@ -3,7 +3,7 @@
 import dash_bootstrap_components as dbc
 import pytest
 from asserts import assert_component_equal
-from dash import dcc, html
+from dash import dcc
 
 try:
     from pydantic.v1 import ValidationError
@@ -49,13 +49,13 @@ def test_card_build(self):
         card = vm.Card(id="card_id", text="Hello", href="https://www.google.com")
         card = card.build()
 
-        expected_card = html.Div(
+        expected_card = dbc.Card(
             dbc.NavLink(
                 dcc.Markdown("Hello", className="card_text", dangerously_allow_html=False, id="card_id"),
                 href="https://www.google.com",
                 className="card-link",
             ),
-            className="nav_card_container",
+            className="nav-card",
             id="card_id_outer",
         )