initial changes to dropdown

vizro-core/examples/scratch_dev/app.py

@@ -4,18 +4,21 @@
 import vizro.models as vm
 import vizro.plotly.express as px
 
-stocks = px.data.stocks(datetimes=True)
+from vizro.tables import dash_data_table
+
+gapminder = px.data.gapminder()
 
 page = vm.Page(
     title="Page",
     components=[
-        vm.Graph(
-            figure=px.line(stocks, x="date", y="GOOG", title="Stocks Data"),
-        ),
+        vm.Table(
+            figure=dash_data_table(data_frame=gapminder),
+            title="Gapminder Data Insights",
+        )
     ],
     controls=[
-        vm.Filter(column="GOOG"),
-        vm.Filter(column="date", selector=vm.DatePicker(title="Date Picker (Stocks - date)")),
+        vm.Filter(column="continent"),
+        vm.Filter(column="continent", selector=vm.Checklist()),
     ],
 )
 

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

@@ -39,6 +39,37 @@ def _calculate_option_height(full_options: OptionsType) -> int:
     return 8 + 24 * number_of_lines
 
 
+def _add_select_all_option(full_options: OptionsType, component_id: str, multi: bool):
+    """Adds checklist component for select all option."""
+    if not multi:
+        return full_options
+
+    def create_select_all_option():
+        """Creates the "Select All" option as a dictionary."""
+        return {
+            "label": html.Div(
+                [html.Span("ALL")],
+                className="checklist-dropdown-div",
+            ),
+            "value": "ALL",
+        }
+
+    altered_options = []
+    for option in full_options:
+        if isinstance(option, str):
+            if option == "ALL":
+                altered_options.append(create_select_all_option())
+            else:
+                altered_options.append({"label": option, "value": option})
+        elif isinstance(option, dict):
+            if option["value"] == "ALL":
+                altered_options.append(create_select_all_option())
+            else:
+                altered_options.append(option)
+
+    return altered_options
+
+
 class Dropdown(VizroBaseModel):
     """Categorical single/multi-option selector `Dropdown`.
 
@@ -89,6 +120,7 @@ def validate_multi(cls, multi, values):
     def __call__(self, options):
         full_options, default_value = get_options_and_default(options=options, multi=self.multi)
         option_height = _calculate_option_height(full_options)
+        full_options = _add_select_all_option(full_options=full_options, component_id=self.id, multi=self.multi)
 
         return html.Div(
             children=[

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

@@ -151,3 +151,8 @@ wrapper **/
   gap: 4px;
   padding: 4px 8px;
 }
+
+#dashboard-container .VirtualizedSelectOption:nth-child(1):has(> div) {
+  padding: 0;
+  border-bottom: 1px solid var(--border-subtleAlpha01);
+}