fix: contextual_help uses heading, content, footer props

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

@@ -17,7 +17,10 @@
 
 
 def contextual_help(
-    *children: Any,
+    heading: Any,
+    content: Any,
+    footer: Any = None,
+    *,
     variant: ContextualHelperVariant | None = "help",
     placement: Placement | None = "bottom start",
     is_open: bool | None = None,
@@ -75,7 +78,9 @@ def contextual_help(
     """
     A contextual help is a quiet action button that triggers an informational popover.
     Args:
-        *children: The children of the contextual help popover.
+        heading: The heading of the popover.
+        content: The content of the popover.
+        footer: The footer of the popover.
         variant: Indicates whether contents are informative or provides helpful guidance.
         placement: The placement of the popover relative to the action button.
         is_open: Whether the popover is open by default (controlled).
@@ -132,7 +137,9 @@ def contextual_help(
     """
     return component_element(
         "ContextualHelp",
-        *children,
+        heading=heading,
+        content=content,
+        footer=footer,
         variant=variant,
         placement=placement,
         is_open=is_open,

plugins/ui/src/js/src/elements/ContextualHelp.tsx

@@ -0,0 +1,46 @@
+import {
+  ContextualHelp as DHCContextualHelp,
+  ContextualHelpProps as DHCContextualHelpProps,
+  Heading,
+  Content,
+  Footer,
+} from '@deephaven/components';
+import { isElementOfType } from '@deephaven/react-hooks';
+import { ReactNode } from 'react';
+
+export type SerializedContextualHelpProps = Omit<
+  DHCContextualHelpProps,
+  'children'
+> & {
+  heading: ReactNode;
+  content: ReactNode;
+  footer?: ReactNode;
+};
+
+export function ContextualHelp(
+  props: SerializedContextualHelpProps
+): JSX.Element {
+  const { heading, content, footer, ...otherProps } = props;
+
+  return (
+    /* eslint-disable-next-line react/jsx-props-no-spreading */
+    <DHCContextualHelp {...otherProps}>
+      {heading != null &&
+        (isElementOfType(heading, Heading) ? (
+          heading
+        ) : (
+          <Heading>{heading}</Heading>
+        ))}
+      {content != null &&
+        (isElementOfType(content, Content) ? (
+          content
+        ) : (
+          <Content>{content}</Content>
+        ))}
+      {footer != null &&
+        (isElementOfType(footer, Footer) ? footer : <Footer>{footer}</Footer>)}
+    </DHCContextualHelp>
+  );
+}
+
+export default ContextualHelp;

plugins/ui/src/js/src/elements/index.ts

@@ -3,6 +3,7 @@ export * from './ActionGroup';
 export * from './Button';
 export * from './Calendar';
 export * from './ComboBox';
+export * from './ContextualHelp';
 export * from './DateField';
 export * from './DatePicker';
 export * from './DateRangePicker';

plugins/ui/src/js/src/widget/WidgetUtils.tsx

@@ -10,7 +10,6 @@ import {
   SpectrumCheckbox as Checkbox,
   CheckboxGroup,
   Content,
-  ContextualHelp,
   Heading,
   Item,
   ListActionGroup,
@@ -51,6 +50,7 @@ import {
   Button,
   Calendar,
   ComboBox,
+  ContextualHelp,
   DateField,
   DatePicker,
   DateRangePicker,
@@ -182,9 +182,7 @@ export function getComponentForElement(element: ElementNode): React.ReactNode {
       }
       if (props?.contextualHelp != null && isPrimitive(props.contextualHelp)) {
         props.contextualHelp = (
-          <ContextualHelp>
-            <Content>{props.contextualHelp}</Content>
-          </ContextualHelp>
+          <ContextualHelp heading={null} content={props.contextualHelp} />
         );
       }
       return <Component {...props} />;

tests/app.d/ui_render_all.py

@@ -55,7 +55,7 @@ def ui_components1():
         ui.column("Column child A", "Column child B", "Column child C"),
         # TODO: #201 ui.combo_box("Combo Box"),
         ui.content("Content"),
-        ui.contextual_help("Contextual Help"),
+        ui.contextual_help("Contextual Help", "Content"),
         ui.date_picker(label="Date Picker", value="2021-01-01"),
         ui.date_range_picker(
             label="Date Range Picker",