Merge branch 'main' into feat/data-manager

Signed-off-by: Antony Milne <[email protected]>

vizro-core/changelog.d/20240405_135655_huong_li_nguyen_change_theme_default.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
+
+- Change default continuous color scale to `SEQUENTIAL_CYAN`. ([#407](https://github.com/mckinsey/vizro/pull/407))
+
+<!--
+### 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/20240409_110318_huong_li_nguyen_replace_label.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/changelog.d/20240409_125129_nadija_ratkusic_graca_fix_style_icon_link.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/docs/pages/user-guides/card-button.md

@@ -602,12 +602,12 @@ Assign the predefined CSS variable `--inverse-color` to the `filter` property of
 
 ```css
 img[src*="#my-image"] {
-  filter: var(--icon-color);
+  filter: var(--inverse-color);
 }
 ```
 
-!!! example "Styled icon"
-    ![styled icon](../../assets/user_guides/components/responsive_icon.gif)
+??? example "Responsive icon"
+    ![responsive icon](../../assets/user_guides/components/responsive_icon.gif)
 
 
 ## Buttons

vizro-core/examples/_dev/app.py

@@ -1,5 +1,8 @@
 """Example to show dashboard configuration."""
 
+from typing import Optional
+
+import pandas as pd
 import vizro.models as vm
 import vizro.plotly.express as px
 from flask_caching import Cache
@@ -31,6 +34,7 @@
         vm.Graph(figure=px.scatter("no_expire_data", "sepal_width", "sepal_length")),
     ],
     controls=[vm.Filter(column="species")],
+
 )
 dashboard = vm.Dashboard(pages=[page])
 app = Vizro().build(dashboard)

vizro-core/src/vizro/_themes/_templates/common_values.py

@@ -48,6 +48,7 @@ def create_template_common():
         margin_b=64,
         margin_pad=0,
         margin_autoexpand=True,
+        coloraxis_autocolorscale=False,  # Set to False as otherwise users cannot customize via `color_continous_scale`
         coloraxis_colorbar_outlinewidth=0,
         coloraxis_colorbar_thickness=20,
         coloraxis_colorbar_showticklabels=True,

vizro-core/src/vizro/_themes/_templates/template_dark.py

@@ -42,8 +42,11 @@ def create_template_dark() -> Template:
     template_dark["layout"]["coloraxis"]["colorbar"]["tickcolor"] = COLORS["WHITE_30"]
     template_dark["layout"]["coloraxis"]["colorbar"]["tickfont"]["color"] = COLORS["WHITE_55"]
     template_dark["layout"]["coloraxis"]["colorbar"]["title"]["font"]["color"] = COLORS["WHITE_55"]
-    template_dark["layout"]["colorscale"]["diverging"] = COLORS["DIVERGING_RED_CYAN"][::-1]
-    template_dark["layout"]["colorscale"]["sequential"] = COLORS["DIVERGING_RED_CYAN"]  # default for continuous
+    # Diverging, sequential and sequentialminus colorscale will only be applied automatically if
+    # `coloraxis_autocolorscale=True`. Otherwise, they have no effect, and the default for continuous color scales
+    # will be the color sequence applied to ["colorscale"]["sequential"].
+    template_dark["layout"]["colorscale"]["diverging"] = COLORS["DIVERGING_RED_CYAN"]
+    template_dark["layout"]["colorscale"]["sequential"] = COLORS["SEQUENTIAL_CYAN"]
     template_dark["layout"]["colorscale"]["sequentialminus"] = COLORS["SEQUENTIAL_RED"][::-1]
     template_dark["layout"]["colorway"] = COLORS["DISCRETE_10"]
 

vizro-core/src/vizro/_themes/_templates/template_light.py

@@ -43,8 +43,8 @@ def create_template_light() -> Template:
     template_light["layout"]["coloraxis"]["colorbar"]["tickcolor"] = COLORS["BLACK_30"]
     template_light["layout"]["coloraxis"]["colorbar"]["tickfont"]["color"] = COLORS["BLACK_55"]
     template_light["layout"]["coloraxis"]["colorbar"]["title"]["font"]["color"] = COLORS["BLACK_55"]
-    template_light["layout"]["colorscale"]["diverging"] = COLORS["DIVERGING_RED_CYAN"][::-1]
-    template_light["layout"]["colorscale"]["sequential"] = COLORS["DIVERGING_RED_CYAN"]  # default for continuous
+    template_light["layout"]["colorscale"]["diverging"] = COLORS["DIVERGING_RED_CYAN"]
+    template_light["layout"]["colorscale"]["sequential"] = COLORS["SEQUENTIAL_CYAN"]
     template_light["layout"]["colorscale"]["sequentialminus"] = COLORS["SEQUENTIAL_RED"][::-1]
     template_light["layout"]["colorway"] = COLORS["DISCRETE_10"]
 

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

@@ -41,7 +41,7 @@ class TextArea(VizroBaseModel):
     def build(self):
         return html.Div(
             [
-                html.Label(self.title, htmlFor=self.id) if self.title else None,
+                dbc.Label(self.title, html_for=self.id) if self.title else None,
                 dbc.Textarea(
                     id=self.id,
                     placeholder=self.placeholder,

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

@@ -41,7 +41,7 @@ class UserInput(VizroBaseModel):
     def build(self):
         return html.Div(
             [
-                html.Label(self.title, htmlFor=self.id) if self.title else None,
+                dbc.Label(self.title, html_for=self.id) if self.title else None,
                 dbc.Input(
                     id=self.id,
                     placeholder=self.placeholder,

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

@@ -7,6 +7,8 @@
 except ImportError:  # pragma: no cov
     from pydantic import Field, PrivateAttr, root_validator, validator
 
+import dash_bootstrap_components as dbc
+
 from vizro.models import Action, VizroBaseModel
 from vizro.models._action._actions_chain import _action_validator_factory
 from vizro.models._components.form._form_utils import get_options_and_default, validate_options_dict, validate_value
@@ -50,7 +52,7 @@ def build(self):
 
         return html.Div(
             [
-                html.Label(self.title, htmlFor=self.id) if self.title else None,
+                dbc.Label(self.title, html_for=self.id) if self.title else None,
                 dcc.Checklist(
                     id=self.id,
                     options=full_options,

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

@@ -12,6 +12,8 @@
 import datetime
 from datetime import date
 
+import dash_bootstrap_components as dbc
+
 from vizro.models import Action, VizroBaseModel
 from vizro.models._action._actions_chain import _action_validator_factory
 from vizro.models._components.form._form_utils import validate_date_picker_range, validate_max, validate_range_value
@@ -102,7 +104,7 @@ def build(self):
 
         return html.Div(
             [
-                html.Label(self.title, htmlFor=self.id) if self.title else None,
+                dbc.Label(self.title, html_for=self.id) if self.title else None,
                 date_picker,
                 dcc.Store(id=f"{self.id}_input_store", storage_type="session", data=init_value),
             ],

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

@@ -7,6 +7,8 @@
 except ImportError:  # pragma: no cov
     from pydantic import Field, PrivateAttr, root_validator, validator
 
+import dash_bootstrap_components as dbc
+
 from vizro.models import Action, VizroBaseModel
 from vizro.models._action._actions_chain import _action_validator_factory
 from vizro.models._components.form._form_utils import get_options_and_default, validate_options_dict, validate_value
@@ -62,7 +64,7 @@ def build(self):
         full_options, default_value = get_options_and_default(options=self.options, multi=self.multi)
         return html.Div(
             [
-                html.Label(self.title, htmlFor=self.id) if self.title else None,
+                dbc.Label(self.title, html_for=self.id) if self.title else None,
                 dcc.Dropdown(
                     id=self.id,
                     options=full_options,

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

@@ -7,6 +7,8 @@
 except ImportError:  # pragma: no cov
     from pydantic import Field, PrivateAttr, root_validator, validator
 
+import dash_bootstrap_components as dbc
+
 from vizro.models import Action, VizroBaseModel
 from vizro.models._action._actions_chain import _action_validator_factory
 from vizro.models._components.form._form_utils import get_options_and_default, validate_options_dict, validate_value
@@ -51,7 +53,7 @@ def build(self):
 
         return html.Div(
             [
-                html.Label(self.title, htmlFor=self.id) if self.title else None,
+                dbc.Label(self.title, html_for=self.id) if self.title else None,
                 dcc.RadioItems(
                     id=self.id,
                     options=full_options,

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

@@ -7,6 +7,8 @@
 except ImportError:  # pragma: no cov
     from pydantic import Field, PrivateAttr, validator
 
+import dash_bootstrap_components as dbc
+
 from vizro.models import Action, VizroBaseModel
 from vizro.models._action._actions_chain import _action_validator_factory
 from vizro.models._components.form._form_utils import (
@@ -87,7 +89,7 @@ def build(self):
                 dcc.Store(f"{self.id}_callback_data", data={"id": self.id, "min": self.min, "max": self.max}),
                 html.Div(
                     [
-                        html.Label(self.title, htmlFor=self.id) if self.title else None,
+                        dbc.Label(self.title, html_for=self.id) if self.title else None,
                         html.Div(
                             [
                                 dcc.Input(

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

@@ -7,6 +7,8 @@
 except ImportError:  # pragma: no cov
     from pydantic import Field, PrivateAttr, validator
 
+import dash_bootstrap_components as dbc
+
 from vizro.models import Action, VizroBaseModel
 from vizro.models._action._actions_chain import _action_validator_factory
 from vizro.models._components.form._form_utils import (
@@ -83,7 +85,7 @@ def build(self):
                 dcc.Store(f"{self.id}_callback_data", data={"id": self.id, "min": self.min, "max": self.max}),
                 html.Div(
                     [
-                        html.Label(self.title, htmlFor=self.id) if self.title else None,
+                        dbc.Label(self.title, html_for=self.id) if self.title else None,
                         html.Div(
                             [
                                 dcc.Input(

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

@@ -114,3 +114,9 @@
 .accordion-body .accordion-item-link:last-child {
   margin-bottom: var(--spacing-03);
 }
+
+.nav-link:focus-visible {
+  border: none;
+  box-shadow: none;
+  outline: none;
+}

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

@@ -0,0 +1,3 @@
+.form-label {
+  margin-bottom: 0;
+}

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

@@ -1,5 +1,6 @@
 """Unit tests for vizro.models.Checklist."""
 
+import dash_bootstrap_components as dbc
 import pytest
 from asserts import assert_component_equal
 from dash import dcc, html
@@ -131,7 +132,7 @@ def test_checklist_build(self):
         checklist = Checklist(id="checklist_id", options=["A", "B", "C"], title="Title").build()
         expected_checklist = html.Div(
             [
-                html.Label("Title", htmlFor="checklist_id"),
+                dbc.Label("Title", html_for="checklist_id"),
                 dcc.Checklist(
                     id="checklist_id",
                     options=["ALL", "A", "B", "C"],

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

@@ -2,6 +2,7 @@
 
 from datetime import date, datetime
 
+import dash_bootstrap_components as dbc
 import dash_mantine_components as dmc
 import pytest
 from asserts import assert_component_equal
@@ -120,7 +121,7 @@ def test_datepicker_build(self, range, value):
         additional_kwargs = {"allowSingleDateInRange": True} if range else {}
         expected_datepicker = html.Div(
             [
-                html.Label("Test title", htmlFor="datepicker_id"),
+                dbc.Label("Test title", html_for="datepicker_id"),
                 date_picker_class(
                     id="datepicker_id",
                     minDate="2023-01-01",