docs: ui.contextual_help (#974)

Closes #832

---------

Co-authored-by: margaretkennedy <[email protected]>
Co-authored-by: Don <[email protected]>

Author: 3 people

plugins/ui/docs/components/contextual_help.md

@@ -0,0 +1,117 @@
+# Contextual Help
+
+Contextual help can be used to show extra information about the state of a component.
+
+## Example
+
+For the contextual help component, both the `heading` and `content` props are required. 
+
+```python
+from deephaven import ui
+
+
+my_contextual_help_basic = ui.contextual_help(
+    heading="Need Help",
+    content="If you are having issues accessing your account, contact our customer support team for help.",
+    variant="info",
+)
+```
+
+
+## Placement
+
+The contextual help component supports different placement options for when the popover's positioning needs to be customized.
+
+```python
+from deephaven import ui
+
+
+@ui.component
+def ui_contextual_help_placement_examples():
+    return [
+        ui.contextual_help(
+            heading="Need Help",
+            content="If you are having issues accessing your account, contact our customer support team for help.",
+            variant="info",
+        ),
+        ui.contextual_help(
+            heading="Need Help",
+            content="If you are having issues accessing your account, contact our customer support team for help.",
+            variant="info",
+            placement="top start",
+        ),
+        ui.contextual_help(
+            heading="Need Help",
+            content="If you are having issues accessing your account, contact our customer support team for help.",
+            variant="info",
+            placement="end",
+        ),
+    ]
+
+
+my_contextual_help_placement_examples = ui_contextual_help_placement_examples()
+```
+
+
+## Events
+
+The `on_open_change` prop is triggered when the popover opens or closes.
+
+```python
+from deephaven import ui
+
+
+@ui.component
+def ui_contextual_help_events_example():
+    is_open, set_is_open = ui.use_state(False)
+    return [
+        ui.flex(
+            ui.contextual_help(
+                heading="Permission required",
+                content="Your admin must grant you permission before you can create a segment.",
+                variant="info",
+                on_open_change={set_is_open},
+            ),
+            align_items="center",
+        )
+    ]
+
+
+my_contextual_help_events_example = ui_contextual_help_events_example()
+```
+
+
+## Visual Options
+
+The `variant` prop can be set to either "info" or "help", depending on how the contextual help component is meant to help the user.
+
+```python
+from deephaven import ui
+
+
+@ui.component
+def ui_contextual_help_variant_examples():
+    return [
+        ui.contextual_help(
+            heading="Permission required",
+            content="Your admin must grant you permission before you can create a segment.",
+            variant="info",
+        ),
+        ui.contextual_help(
+            heading="What is a segment?",
+            content="Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.",
+            variant="help",
+        ),
+    ]
+
+
+my_contextual_help_variant_examples = ui_contextual_help_variant_examples()
+```
+
+
+## API reference
+
+```{eval-rst}
+.. dhautofunction:: deephaven.ui.contextual_help
+```
+

plugins/ui/docs/sidebar.json

@@ -49,6 +49,10 @@
             "label": "combo_box",
             "path": "components/combo_box.md"
           },
+          {
+            "label": "contextual_help",
+            "path": "components/contextual_help.md"
+          },
           {
             "label": "date_picker",
             "path": "components/date_picker.md"

plugins/ui/src/deephaven/ui/components/contextual_help.py

@@ -77,6 +77,7 @@ def contextual_help(
 ) -> Element:
     """
     A contextual help is a quiet action button that triggers an informational popover.
+
     Args:
         heading: The heading of the popover.
         content: The content of the popover.
@@ -127,13 +128,17 @@ def contextual_help(
         z_index: The stacking order for the element
         is_hidden: Hides the element.
         id: The unique identifier of the element.
-        aria-label: Defines a string value that labels the current element.
-        aria-labelledby: Identifies the element (or elements) that labels the current element.
-        aria-describedby: Identifies the element (or elements) that describes the object.
-        aria-details: Identifies the element (or elements) that provide a detailed, extended description for the object.
+        aria_label: Defines a string value that labels the current element.
+        aria_labelledby: Identifies the element (or elements) that labels the current element.
+        aria_describedby: Identifies the element (or elements) that describes the object.
+        aria_details: Identifies the element (or elements) that provide a detailed, extended description for the object.
         UNSAFE_class_name: Set the CSS className for the element. Only use as a last resort. Use style props instead.
         UNSAFE_style: Set the inline style for the element. Only use as a last resort. Use style props instead.
         key: A unique identifier used by React to render elements in a list.
+
+    Returns:
+        The rendered contextual help component.
+
     """
     return component_element(
         "ContextualHelp",