Merge main into feature branch

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/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/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);
+}

vizro-core/tests/unit/vizro/models/_components/form/test_date_picker.py

@@ -129,9 +129,7 @@ def test_datepicker_build(self, range, value):
                     persistence_type="session",
                     type="range" if range else "default",
                     allowSingleDateInRange=True,
-                    className="datepicker",
-                    # removes the default red color for  weekend days
-                    styles={"day": {"color": "var(--mantine-color-text"}},
+                    withCellSpacing=False,
                 ),
             ],
         )