[Bug] Fix text alignment and enable href in Button

vizro-core/changelog.d/20241118_113651_huong_li_nguyen_button_alignment.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
+
+- Enable `href` inside `vm.Button` ([#881](https://github.com/mckinsey/vizro/pull/881))
+
+<!--
+### 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/scratch_dev/app.py

@@ -1,45 +1,15 @@
 """Dev app to try things out."""
 
-import pandas as pd
 import vizro.models as vm
-import vizro.plotly.express as px
 from vizro import Vizro
-from vizro._themes._color_values import COLORS
-
-pastry = pd.DataFrame(
-    {
-        "pastry": [
-            "Scones",
-            "Bagels",
-            "Muffins",
-            "Cakes",
-            "Donuts",
-            "Cookies",
-            "Croissants",
-            "Eclairs",
-            "Brownies",
-            "Tarts",
-            "Macarons",
-            "Pies",
-        ],
-        "Profit Ratio": [-0.10, -0.15, -0.05, 0.10, 0.05, 0.20, 0.15, -0.08, 0.08, -0.12, 0.02, -0.07],
-    }
-)
 
 
 page = vm.Page(
-    title="Charts UI",
+    title="Button Styling",
+    layout=vm.Layout(grid=[[0, 1]]),
     components=[
-        vm.Graph(
-            figure=px.bar(
-                pastry.sort_values("Profit Ratio"),
-                orientation="h",
-                x="Profit Ratio",
-                y="pastry",
-                color="Profit Ratio",
-                color_continuous_scale=COLORS["DIVERGING_RED_CYAN"],
-            ),
-        ),
+        vm.Button(),
+        vm.Button(text="Take me home", href="/"),
     ],
 )
 

vizro-core/schemas/0.1.28.dev0.json

@@ -141,6 +141,12 @@
           "default": "Click me!",
           "type": "string"
         },
+        "href": {
+          "title": "Href",
+          "description": "URL (relative or absolute) to navigate to.",
+          "default": "",
+          "type": "string"
+        },
         "actions": {
           "title": "Actions",
           "default": [],

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

@@ -1,6 +1,7 @@
 from typing import Literal
 
 import dash_bootstrap_components as dbc
+from dash import get_relative_path
 
 try:
     from pydantic.v1 import Field
@@ -24,11 +25,17 @@ class Button(VizroBaseModel):
 
     type: Literal["button"] = "button"
     text: str = Field("Click me!", description="Text to be displayed on button.")
+    href: str = Field("", description="URL (relative or absolute) to navigate to.")
     actions: list[Action] = []
 
     # Re-used validators
     _set_actions = _action_validator_factory("n_clicks")
 
     @_log_call
     def build(self):
-        return dbc.Button(id=self.id, children=self.text)
+        return dbc.Button(
+            id=self.id,
+            children=self.text,
+            href=get_relative_path(self.href) if self.href.startswith("/") else self.href,
+            target="_top",
+        )

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

@@ -16,14 +16,28 @@ def test_create_default_button(self):
         assert hasattr(button, "id")
         assert button.type == "button"
         assert button.text == "Click me!"
+        assert button.href == ""
         assert button.actions == []
 
-    @pytest.mark.parametrize("text", ["Test", 123, 1.23, True, """# Header""", """<p>Hello </p>"""])
-    def test_create_button_with_optional(self, text):
-        button = vm.Button(text=text)
-        assert hasattr(button, "id")
+    @pytest.mark.parametrize(
+        "text, href",
+        [
+            ("Test", "/page_1_reference"),
+            ("Test", "https://www.google.de/"),
+            (123, "/"),
+            ("""# Header""", "/"),
+            (1.23, "/"),
+            ("""<p>Hello </p>""", "/"),
+            (True, "/"),
+        ],
+    )
+    def test_create_button_with_optional(self, text, href):
+        button = vm.Button(id="button-id", text=text, href=href)
+
+        assert button.id == "button-id"
         assert button.type == "button"
         assert button.text == str(text)
+        assert button.href == href
         assert button.actions == []
 
     def test_set_action_via_validator(self):
@@ -33,7 +47,12 @@ def test_set_action_via_validator(self):
 
 
 class TestBuildMethod:
-    def test_button_build(self):
+    def test_button_build_wo_href(self):
         button = vm.Button(id="button_id", text="My text").build()
-        expected = dbc.Button(id="button_id", children="My text")
+        expected = dbc.Button(id="button_id", children="My text", href="", target="_top")
+        assert_component_equal(button, expected)
+
+    def test_button_build_with_href(self):
+        button = vm.Button(id="button_id", text="My text", href="https://www.google.com").build()
+        expected = dbc.Button(id="button_id", children="My text", href="https://www.google.com", target="_top")
         assert_component_equal(button, expected)

vizro-core/tests/unit/vizro/models/test_dashboard.py

@@ -58,7 +58,7 @@ def test_field_invalid_pages_empty_list(self):
             vm.Dashboard(pages=[])
 
     def test_field_invalid_pages_input_type(self):
-        with pytest.raises(ValidationError, match="4 validation errors for Dashboard"):
+        with pytest.raises(ValidationError, match="5 validation errors for Dashboard"):
             vm.Dashboard(pages=[vm.Button()])
 
     def test_field_invalid_theme_input_type(self, page_1):