Mapped ActionGroup and ListActionGroup (#445)

Author: bmingles

plugins/ui/docs/README.md

@@ -203,6 +203,30 @@ my_checkbox = ui_checkbox()
 
 ![Checkbox](_assets/checkbox.png)
 
+## ActionGroup (string values)
+An ActionGroup is a grouping of ActionButtons that are related to one another.
+
+```python
+@ui.component
+def action_group():
+    [action, on_action] = ui.use_state()
+
+    return ui.flex(
+        ui.action_group(
+            "Aaa",
+            "Bbb",
+            "Ccc",
+            action=action,
+            on_action=on_action,
+        ),
+        ui.text(action),
+        direction="column",
+    )
+
+
+ag = action_group()
+```
+
 ## Picker (string values)
 
 The `ui.picker` component can be used to select from a list of items. Here's a basic example for selecting from a list of string values and displaying the selected key in a text field.

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

@@ -1,3 +1,4 @@
+from .action_group import action_group
 from .icon import icon
 from .make_component import make_component as component
 from .fragment import fragment
@@ -21,6 +22,7 @@
 
 __all__ = [
     "action_button",
+    "action_group",
     "button",
     "button_group",
     "checkbox",

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

@@ -0,0 +1,12 @@
+from ..elements import BaseElement
+
+
+def action_group(*children, **props):
+    """
+    An ActionGroup is a grouping of ActionButtons that are related to one another.
+
+    Args:
+        children: A list of Item or primitive elements.
+        **props: Any other ActionGroup prop.
+    """
+    return BaseElement(f"deephaven.ui.components.ActionGroup", *children, **props)

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

@@ -23,8 +23,10 @@ export const ELEMENT_NAME = {
   stack: uiComponentName('Stack'),
 
   /** Other Components */
+  actionGroup: uiComponentName('ActionGroup'),
   fragment: uiComponentName('Fragment'),
   item: uiComponentName('Item'),
+  listActionGroup: uiComponentName('ListActionGroup'),
   listView: uiComponentName('ListView'),
   picker: uiComponentName('Picker'),
   section: uiComponentName('Section'),

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text } from '@deephaven/components';
 import type { dh } from '@deephaven/jsapi-types';
-import { ITEM_ELEMENT_NAME } from './ElementConstants';
+import { ELEMENT_NAME } from './ElementConstants';
 import ObjectView from './ObjectView';
 
 export const CALLABLE_KEY = '__dhCbid';
@@ -159,7 +159,7 @@ export function wrapElementChildren(element: ElementNode): ElementNode {
 
   const newProps = { ...element.props };
 
-  const isItemElement = isElementNode(element, ITEM_ELEMENT_NAME);
+  const isItemElement = isElementNode(element, ELEMENT_NAME.item);
 
   // We will be wrapping all primitive `Item` children in a `Text` element to
   // ensure proper layout. Since `Item` components require a `textValue` prop

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

@@ -34,6 +34,7 @@ export const SPECTRUM_ELEMENT_TYPE_PREFIX = 'deephaven.ui.spectrum.';
 
 export const SpectrumSupportedTypes = {
   ActionButton,
+  ActionGroup,
   Button,
   ButtonGroup,
   Checkbox,
@@ -45,6 +46,7 @@ export const SpectrumSupportedTypes = {
   Heading,
   Icon,
   IllustratedMessage,
+  ListActionGroup,
   NumberField,
   Item,
   RangeSlider,

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

@@ -3,7 +3,12 @@
 import React, { ComponentType } from 'react';
 // Importing `Item` and `Section` compnents directly since they should not be
 // wrapped due to how Spectrum collection components consume them.
-import { Item, Section } from '@deephaven/components';
+import {
+  ActionGroup,
+  Item,
+  ListActionGroup,
+  Section,
+} from '@deephaven/components';
 import { ValueOf } from '@deephaven/utils';
 import { ReadonlyWidgetData } from './WidgetTypes';
 import {
@@ -43,8 +48,10 @@ export const elementComponentMap = {
   [ELEMENT_NAME.stack]: Stack,
 
   // Other components
+  [ELEMENT_NAME.actionGroup]: ActionGroup,
   [ELEMENT_NAME.fragment]: React.Fragment,
   [ELEMENT_NAME.item]: Item,
+  [ELEMENT_NAME.listActionGroup]: ListActionGroup,
   [ELEMENT_NAME.listView]: ListView,
   [ELEMENT_NAME.picker]: Picker,
   [ELEMENT_NAME.section]: Section,