diff --git a/plugins/ui/docs/components/disclosure.md b/plugins/ui/docs/components/disclosure.md new file mode 100644 index 000000000..19ca5dfa7 --- /dev/null +++ b/plugins/ui/docs/components/disclosure.md @@ -0,0 +1,85 @@ +# Disclosure + +A collapsible section of content with a heading that toggles the visibility of a panel. + +## Example + +```python +from deephaven import ui + +my_disclosure_basic = ui.disclosure(title="Heading", panel="Content") +``` + +## Events + +Disclosure accepts an `on_expanded_change` prop which triggers when it is expanded or collapsed. + +```python +from deephaven import ui + + +@ui.component +def ui_toggle_disclosure(): + is_expanded, set_is_expanded = ui.use_state(False) + + return ui.flex( + ui.disclosure( + title="Heading", + panel="Content", + on_expanded_change=lambda: set_is_expanded( + True if is_expanded == False else False + ), + ), + ui.text("Expanded" if is_expanded == True else "Collapsed"), + direction="column", + ) + + +my_toggle_disclosure = ui_toggle_disclosure() +``` + +## Variants + +```python +from deephaven import ui + + +@ui.component +def ui_disclosure_variants(): + + return [ + ui.disclosure("Or", variant="or"), + ui.disclosure("And", variant="and"), + ] + + +my_disclosure_variants = ui_disclosure_variants() +``` + +## Disabled state + +```python +from deephaven import ui + +my_disclosure_disabled = ui.disclosure( + title="Heading", panel="Content", is_disabled=True +) +``` + +## Quiet state + +```python +from deephaven import ui + +my_disclosure_disabled = ui.disclosure(title="Heading", panel="Content", is_quiet=True) +``` + +## Expanded state + +```python +from deephaven import ui + +my_disclosure_disabled = ui.disclosure( + title="Heading", panel="Content", default_expanded=True +) +``` diff --git a/plugins/ui/docs/sidebar.json b/plugins/ui/docs/sidebar.json index 107df561c..7201fac21 100644 --- a/plugins/ui/docs/sidebar.json +++ b/plugins/ui/docs/sidebar.json @@ -126,6 +126,10 @@ "label": "dialog_trigger", "path": "components/dialog_trigger.md" }, + { + "label": "disclosure", + "path": "components/disclosure.md" + }, { "label": "flex", "path": "components/flex.md" diff --git a/plugins/ui/src/deephaven/ui/components/disclosure.py b/plugins/ui/src/deephaven/ui/components/disclosure.py index 8d984b144..3326b33ba 100644 --- a/plugins/ui/src/deephaven/ui/components/disclosure.py +++ b/plugins/ui/src/deephaven/ui/components/disclosure.py @@ -11,7 +11,7 @@ from .basic import component_element from ..elements import Element -# TODO: create disclosure_title and disclosure_panel + def disclosure( title: Any, panel: Any, diff --git a/plugins/ui/src/deephaven/ui/components/disclosure_panel.py b/plugins/ui/src/deephaven/ui/components/disclosure_panel.py index e06389db5..83ff82e83 100644 --- a/plugins/ui/src/deephaven/ui/components/disclosure_panel.py +++ b/plugins/ui/src/deephaven/ui/components/disclosure_panel.py @@ -7,7 +7,6 @@ JustifySelf, LayoutFlex, Position, - HeadingLevel, ) from .basic import component_element from ..elements import Element @@ -117,6 +116,7 @@ def disclosure_panel( """ return component_element( "DisclosurePanel", + *children, flex=flex, flex_grow=flex_grow, flex_shrink=flex_shrink,