Add Card to ControlType and enable horizontal rulers

vizro-core/changelog.d/20231001_192229_huong_li_nguyen_extend_card.md

@@ -0,0 +1,42 @@
+<!--
+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
+
+- A bullet item for the Changed category.
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category.
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category.
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category.
+
+-->

vizro-core/examples/assets/css/card.css

@@ -0,0 +1,4 @@
+div.left_side .card_container {
+  background-color: var(--surfaces-bg-02);
+  padding: 0;
+}

vizro-core/examples/default/app.py

@@ -299,18 +299,42 @@ def create_relation_analysis():
             ),
         ],
         controls=[
+            vm.Card(
+                text="""
+                #### Group A
+
+                ***
+
+                """,
+            ),
             vm.Parameter(
                 targets=["scatter_relation_2007.x", "scatter_relation.x"],
                 selector=vm.Dropdown(
                     options=["lifeExp", "gdpPercap", "pop"], multi=False, value="gdpPercap", title="Choose x-axis"
                 ),
             ),
+            vm.Card(
+                text="""
+                #### Group B
+
+                ___
+
+                """,
+            ),
             vm.Parameter(
                 targets=["scatter_relation_2007.y", "scatter_relation.y", "bar_relation_2007.y"],
                 selector=vm.Dropdown(
                     options=["lifeExp", "gdpPercap", "pop"], multi=False, value="lifeExp", title="Choose y-axis"
                 ),
             ),
+            vm.Card(
+                text="""
+                #### Group C
+
+                ---
+
+                """,
+            ),
             vm.Parameter(
                 targets=["scatter_relation_2007.size", "scatter_relation.size"],
                 selector=vm.Dropdown(

vizro-core/src/vizro/models/_navigation/_accordion.py

@@ -78,7 +78,7 @@ def _create_default_accordion(self):
                     persistence=True,
                     persistence_type="session",
                 ),
-                html.Div(className="keyline"),
+                html.Hr(),
             ],
             className="nav_panel",
             id=f"{self.id}_outer",
@@ -108,7 +108,7 @@ def _create_accordion(self):
                     persistence=True,
                     persistence_type="session",
                 ),
-                html.Div(className="keyline"),
+                html.Hr(),
             ],
             className="nav_panel",
             id=f"{self.id}_outer",

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

@@ -160,9 +160,8 @@ def _create_theme_switch():
 
     @staticmethod
     def _create_control_panel(controls_content):
-        keyline = html.Div(className="keyline")
         control_panel = html.Div(
-            children=[*controls_content, keyline],
+            children=[*controls_content, html.Hr()],
             className="control_panel",
         )
         return control_panel if controls_content else None
@@ -202,9 +201,7 @@ def _arrange_containers(page_title, theme_switch, nav_panel, control_panel, comp
         """
         _, dashboard = next(model_manager._items_with_type(Dashboard))
         dashboard_title = (
-            html.Div(
-                children=[html.H2(dashboard.title), html.Div(className="keyline")], className="dashboard_title_outer"
-            )
+            html.Div(children=[html.H2(dashboard.title), html.Hr()], className="dashboard_title_outer")
             if dashboard.title
             else None
         )

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

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

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

@@ -87,7 +87,7 @@
   width: 336px;
 }
 
-.keyline {
+hr {
   border-bottom: 1px solid var(--border-subtle-alpha-01);
   width: 100%;
 }

vizro-core/tests/unit/vizro/models/_navigation/conftest.py

@@ -53,7 +53,7 @@ def accordion_from_page_as_list():
                 persistence=True,
                 persistence_type="session",
             ),
-            html.Div(className="keyline"),
+            html.Hr(),
         ],
         className="nav_panel",
         id="accordion_list_outer",
@@ -86,7 +86,7 @@ def accordion_from_pages_as_dict():
                 persistence=True,
                 persistence_type="session",
             ),
-            html.Div(className="keyline"),
+            html.Hr(),
         ],
         className="nav_panel",
         id="accordion_dict_outer",