Enable Button as ControlType

vizro-core/changelog.d/20230927_163719_huong_li_nguyen_button_as_control.md

@@ -0,0 +1,41 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Removed
+
+- A bullet item for the Removed category.
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category.
+
+
+-->
+
+### Changed
+
+- Add `Button` to `ControlType` ([#88](https://github.com/mckinsey/vizro/pull/88))
+
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category.
+
+-->
+
+### Fixed
+
+- Fix bug of horizontal rulers not being visible in `Card` ([#88](https://github.com/mckinsey/vizro/pull/88))
+
+<!--
+### Security
+
+- A bullet item for the Security category.
+
+-->

vizro-core/docs/pages/development/authors.md

@@ -10,7 +10,7 @@
 [Maximilian Schulz](https://github.com/maxschulz-COL),
 [Huong Li Nguyen](https://github.com/huong-li-nguyen),
 [Dan Dumitriu](https://github.com/dandumitriu1),
-[Joseph Perkins](https://github.com/Joseph-Perkins),
+[Joseph Perkins](https://github.com/Joseph-Perkins)
 
 ## Previous team members and code contributors
 

vizro-core/docs/pages/user_guides/buttons.md

@@ -0,0 +1,5 @@
+# How to use buttons
+
+For further details on how to use the [`Button`][vizro.models.Button], see our user guide on [Buttons](components.md#button).
+Configuration instructions remain the same, but to add a [`Button`][vizro.models.Button] to the control panel,
+simply insert it into the `controls` argument of the [`Page`][vizro.models.Page].

vizro-core/docs/pages/user_guides/components.md

@@ -674,7 +674,7 @@ To enhance dashboard interactions, you can use the [`Button`][vizro.models.Butto
 action functions such as e.g. exporting chart data. Please refer to the [user guide][vizro.actions] on
 [`Actions`][vizro.models.Action] for currently available options.
 
-To add a [`Button`][vizro.models.Button], simply insert it into the `components` argument of the
+To add a [`Button`][vizro.models.Button] as a component, simply insert it into the `components` argument of the
 [`Page`][vizro.models.Page].
 
 You can configure the `text` argument to alter the display text of the [`Button`][vizro.models.Button] and the

vizro-core/mkdocs.yml

@@ -17,6 +17,7 @@ nav:
           - Filters: pages/user_guides/filters.md
           - Parameters: pages/user_guides/parameters.md
           - Selectors: pages/user_guides/selectors.md
+          - Buttons: pages/user_guides/buttons.md
       - Navigation:
           - Accordion: pages/user_guides/navigation.md
       - Visual Formatting:

vizro-core/schemas/0.1.4.dev0.json

@@ -826,11 +826,15 @@
             "discriminator": {
               "propertyName": "type",
               "mapping": {
+                "button": "#/definitions/Button",
                 "filter": "#/definitions/Filter",
                 "parameter": "#/definitions/Parameter"
               }
             },
             "oneOf": [
+              {
+                "$ref": "#/definitions/Button"
+              },
               {
                 "$ref": "#/definitions/Filter"
               },

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

@@ -255,7 +255,7 @@ class OptionsDictType(TypedDict):
 ]
 
 ControlType = Annotated[
-    Union["Filter", "Parameter"],
+    Union["Button", "Filter", "Parameter"],
     Field(
         discriminator="type",
         description="Control that affects components on the page.",

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

@@ -87,6 +87,23 @@ def test_set_layout_invalid(self):
         with pytest.raises(ValidationError, match="Number of page and grid components need to be the same."):
             vm.Page(title="Page 4", components=[vm.Button()], layout=vm.Layout(grid=[[0, 1]]))
 
+    def test_valid_component_types(self, standard_px_chart):
+        vm.Page(
+            title="Page Title",
+            components=[vm.Graph(figure=standard_px_chart), vm.Card(text="""# Header 1"""), vm.Button()],
+        )
+
+    def test_valid_control_types(self, standard_px_chart):
+        vm.Page(
+            title="Page Title",
+            components=[vm.Graph(id="scatter", figure=standard_px_chart)],
+            controls=[
+                vm.Filter(column="continent"),
+                vm.Parameter(targets=["scatter.x"], selector=vm.RadioItems(options=["lifeExp", "pop", "gdpPercap"])),
+                vm.Button(),
+            ],
+        )
+
 
 # TODO: Remove this if we can get rid of on-page-load action
 class TestPagePreBuildMethod: