Merge branch 'main' into docs/add-vizroai-tutorial

.devcontainer/devcontainer.json

@@ -6,9 +6,7 @@
   "postAttachCommand": "cd vizro-core && hr examples:example",
   "customizations": {
     "vscode": {
-      "extensions": [
-        "ms-python.python"
-      ]
+      "extensions": ["ms-python.python"]
     }
   },
   "build": {
@@ -18,7 +16,7 @@
     "8050": {
       "label": "scratch_dev example"
     }
-  },
+  }
   // It would be nice if the Python interpreter were automatically set in codespaces.
   // In theory this should work automatically but it doesn't seem to - maybe an issue with codespaces?
   // https://code.visualstudio.com/updates/v1_88#_hatch-environment-discovery

.pre-commit-config.yaml

@@ -29,7 +29,7 @@ repos:
         language: node
         types: [text]
         additional_dependencies: ["[email protected]"]
-        exclude_types: [markdown]
+        exclude_types: [markdown, css]
 
   - repo: https://github.com/macisamuele/language-formatters-pre-commit-hooks
     rev: v2.14.0
@@ -76,6 +76,7 @@ repos:
           - [email protected]
           - [email protected]
         args: ["--fix"]
+        exclude: ^vizro-core/src/vizro/static/css/.+\.min.*|^vizro-core/src/vizro/static/css/mantine_dates.css
 
   - repo: https://github.com/executablebooks/mdformat
     rev: 0.7.21

vizro-core/changelog.d/20250120_121030_49395058+antonymilne_dmc_15.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
+
+- Bumped library used for `vm.DatePicker` to `dash_mantine_components~=0.15.1`. ([#924](https://github.com/mckinsey/vizro/pull/924))
+
+<!--
+### 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/changelog.d/20250120_151243_huong_li_nguyen_dmc_15_css.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
+
+- A bullet item for the Changed 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))
+
+-->
+<!--
+### 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/dev/app.py

@@ -827,6 +827,6 @@ def multiple_cards(data_frame: pd.DataFrame, n_rows: Optional[int] = 1) -> html.
         target="_blank",
         className="anchor-container",
     )
-    app.dash.layout.children = [app.dash.layout.children, banner]
+    app.dash.layout.children.append(banner)
     server = app.dash.server
     app.run()

vizro-core/src/vizro/_vizro.py

@@ -8,7 +8,6 @@
 from typing import TYPE_CHECKING, TypedDict, cast
 
 import dash
-import dash_mantine_components as dmc
 import plotly.io as pio
 from dash.development.base_component import ComponentRegistry
 from flask_caching import SimpleCache
@@ -53,13 +52,6 @@ def __init__(self, **kwargs):
             use_pages=True,
         )
 
-        # Ensure external_stylesheets is a list and append the additional stylesheet
-        external_stylesheets = self.dash.config.external_stylesheets
-        self.dash.config.external_stylesheets = (
-            external_stylesheets if isinstance(external_stylesheets, list) else [external_stylesheets]
-        )
-        self.dash.config.external_stylesheets.append(dmc.styles.DATES)
-
         # When Vizro is used as a framework, we want to include the library and framework resources.
         # Dash serves resources in the order 1. external_stylesheets/scripts; 2. library resources from the
         # ComponentRegistry; 3. resources added by append_css/scripts.

vizro-core/src/vizro/models/_components/form/date_picker.py

@@ -41,7 +41,6 @@ class DatePicker(VizroBaseModel):
     max: Optional[date] = Field(None, description="End date for date picker.")
     value: Optional[Union[list[date], date]] = Field(None, description="Default date for date picker")
     title: str = Field("", description="Title to be displayed.")
-
     range: bool = Field(True, description="Boolean flag for displaying range picker.")
     actions: list[Action] = []
 
@@ -65,9 +64,8 @@ def build(self):
             persistence_type="session",
             type="range" if self.range else "default",
             allowSingleDateInRange=True,
-            className="datepicker",
-            # removes the default red color for  weekend days
-            styles={"day": {"color": "var(--mantine-color-text"}},
+            # Required for styling to remove gaps between cells
+            withCellSpacing=False,
         )
 
         return html.Div(

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

@@ -172,8 +172,12 @@ def build(self):
                 dash.page_container,
             ],
         )
+
+        # children=[layout] as a list rather than children=layout, so that app.dash.layout.children.append works to
+        # easily add things to the Dash layout. In future we might have a neater function for patching components into
+        # the Dash layout in which case this could change.
         return dmc.MantineProvider(
-            layout,
+            children=[layout],
             # Use the `theme` to style all Mantine components with a Vizro theme. For more info see https://www.dash-mantine-components.com/components/mantineprovider
             theme={"primaryColor": "gray"},
         )

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

@@ -0,0 +1,61 @@
+/* Dropdown field showing selection */
+.mantine-DatePickerInput-input {
+  background-color: var(--field-enabled);
+  border: none;
+  box-shadow: var(--elevation-0);
+  color: var(--text-secondary);
+}
+
+.mantine-DatePickerInput-input:hover {
+  color: var(--text-primaryHover);
+}
+
+/* Calendar view with selected range */
+.mantine-DatePickerInput-dropdown,
+.mantine-Popover-dropdown {
+  background: var(--field-enabled);
+  border: inherit;
+  box-shadow: var(--elevation-1);
+  padding: 0.5rem 0.75rem;
+}
+
+.mantine-DatePickerInput-day {
+  background: var(--field-enabled);
+  color: var(--text-secondary);
+}
+
+.mantine-DatePickerInput-day[data-in-range] {
+  background: var(--stateOverlays-selectedRange);
+  color: var(--text-primary);
+}
+
+.mantine-DatePickerInput-day[data-selected] {
+  background: var(--stateOverlays-selected-inverted);
+  color: var(--text-primary-inverted);
+  text-decoration: underline;
+}
+
+/* Single month or year selection */
+.mantine-PickerControl-pickerControl,
+.mantine-DatePickerInput-monthsListControl {
+  color: var(--text-secondary);
+}
+
+/* Important tags are required as otherwise mantine media queries will have higher specificity */
+.mantine-DatePickerInput-day:hover,
+.mantine-PickerControl-pickerControl:hover,
+.mantine-DatePickerInput-monthsListControl:hover {
+  background: var(--stateOverlays-hover) !important;
+  color: var(--text-primaryHover) !important;
+}
+
+/* Header inside calendar view */
+.mantine-DatePickerInput-calendarHeader {
+  color: var(--text-secondary);
+}
+
+.mantine-DatePickerInput-calendarHeaderControlIcon:hover,
+.mantine-DatePickerInput-calendarHeader .mantine-UnstyledButton-root:hover {
+  background: transparent;
+  color: var(--text-primaryHover);
+}