Add collapsible option to SelectWithLabel (#182)

equinor · Oct 24, 2021 · d83f848 · d83f848
1 parent 90e5943
commit d83f848
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [#177](https://github.com/equinor/webviz-core-components/pull/177) - Bug fix: Menu missing if using non-existent icon.
 
 ### Added
+- [#182](https://github.com/equinor/webviz-core-components/pull/182) - Added option to wrap `SelectWithLabel` in a `Details` collapsible widget.
 - [#174](https://github.com/equinor/webviz-core-components/pull/174) - Implemented `initiallyCollapsed` setting for menu.
 
 ## [0.5.2] - 2021-10-08

diff --git a/webviz_core_components/wrapped_components/select_with_label.py b/webviz_core_components/wrapped_components/select_with_label.py
@@ -12,6 +12,12 @@ class SelectWithLabel(html.Div):
     - label (string; optional):
         The text of the label
 
+    - collapsible (bool; optional):
+        Wraps the select in a collapsible box
+
+    - open_details (bool; default True):
+        Used to set initial opened/closed state if the collapsible box is used
+
     - wrapper_id (string; optional):
         Id of the wrapping div
 
@@ -33,6 +39,8 @@ class SelectWithLabel(html.Div):
     def __init__(
         self,
         label: str = None,
+        collapsible: bool = False,
+        open_details: bool = True,
         wrapper_id: str = None,
         persistence: bool = True,
         persistence_type: str = "session",
@@ -41,12 +49,21 @@ def __init__(
         super().__init__()
         if wrapper_id is not None:
             self.id = wrapper_id
-        children = [html.Label(label)] if label else []
+        if collapsible:
+            children = [html.Summary(label)] if label else []
+        else:
+            children = [html.Label(label)] if label else []
         children.append(
             BaseSelect(
                 persistence=persistence,
                 persistence_type=persistence_type,
                 **kwargs,
             )
         )
-        self.children = html.Div(style={"fontSize": "15px"}, children=children)
+        if collapsible:
+            self.children = html.Div(
+                style={"fontSize": "15px"},
+                children=html.Details(open=open_details, children=children),
+            )
+        else:
+            self.children = html.Div(style={"fontSize": "15px"}, children=children)