feat: ui.logic button

plugins/ui/docs/components/logic_button.md

@@ -0,0 +1,57 @@
+# Logic Button
+
+A LogicButton shows an operator in a boolean logic sequence.
+
+## Example
+
+```python
+from deephaven import ui
+
+my_logic_button_basic = ui.logic_button("Or", variant="or")
+```
+
+## Events
+
+Logic buttons handles user interaction through the `on_press` prop.
+
+```python
+# from deephaven import ui
+
+# @ui.component
+# def ui_toggle_logic_button():
+#     variant, set_variant = ui.use_state("or")
+
+#     return ui.logic_button(
+#         variant,
+#         variant=variant,
+#         on_press=lamdba: set_variant("and" if variant == "or" else "or"),
+#     )
+
+# my_toggle_logic_button = ui_toggle_logic_button()
+```
+
+## Variants
+
+```python
+from deephaven import ui
+
+
+@ui.component
+def ui_logic_button_variants():
+
+    return [
+        ui.logic_button("Or", variant="or"),
+        ui.logic_button("And", variant="and"),
+    ]
+
+
+my_logic_button_variants = ui_logic_button_variants()
+```
+
+## Disabled state
+
+```python
+from deephaven import ui
+
+my_logic_button_disabled = ui.logic_button("Or", variant="or", is_disabled=True)
+```

plugins/ui/docs/sidebar.json

@@ -150,6 +150,10 @@
             "label": "list_view",
             "path": "components/list_view.md"
           },
+          {
+            "label": "logic_button",
+            "path": "components/logic_button.md"
+          },
           {
             "label": "markdown",
             "path": "components/markdown.md"

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

@@ -36,6 +36,7 @@
 from .list_action_group import list_action_group
 from .list_action_menu import list_action_menu
 from .list_view import list_view
+from .logic_button import logic_button
 from .make_component import make_component as component
 from .markdown import markdown
 from .meter import meter
@@ -108,6 +109,7 @@
     "list_view",
     "list_action_group",
     "list_action_menu",
+    "logic_button",
     "html",
     "markdown",
     "meter",

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

@@ -0,0 +1,233 @@
+from __future__ import annotations
+from typing import Any, Callable
+from .types import (
+    # Accessibility
+    AriaExpanded,
+    AriaHasPopup,
+    AriaPressed,
+    # Events
+    ButtonType,
+    FocusEventCallable,
+    KeyboardEventCallable,
+    PressEventCallable,
+    StaticColor,
+    # Layout
+    AlignSelf,
+    CSSProperties,
+    DimensionValue,
+    JustifySelf,
+    LayoutFlex,
+    Position,
+)
+from .basic import component_element
+from ..elements import Element
+
+
+def logic_button(
+    *children: Any,
+    variant: str | None = None,
+    is_disabled: bool | None = None,
+    auto_focus: bool | None = None,
+    type: ButtonType = "button",
+    on_press: PressEventCallable | None = None,
+    on_press_start: PressEventCallable | None = None,
+    on_press_end: PressEventCallable | None = None,
+    on_press_change: Callable[[bool], None] | None = None,
+    on_press_up: PressEventCallable | None = None,
+    on_focus: FocusEventCallable | None = None,
+    on_blur: FocusEventCallable | None = None,
+    on_focus_change: Callable[[bool], None] | None = None,
+    on_key_down: KeyboardEventCallable | None = None,
+    on_key_up: KeyboardEventCallable | None = None,
+    flex: LayoutFlex | None = None,
+    flex_grow: float | None = None,
+    flex_shrink: float | None = None,
+    flex_basis: DimensionValue | None = None,
+    align_self: AlignSelf | None = None,
+    justify_self: JustifySelf | None = None,
+    order: int | None = None,
+    grid_area: str | None = None,
+    grid_column: str | None = None,
+    grid_row: str | None = None,
+    grid_column_start: str | None = None,
+    grid_column_end: str | None = None,
+    grid_row_start: str | None = None,
+    grid_row_end: str | None = None,
+    margin: DimensionValue | None = None,
+    margin_top: DimensionValue | None = None,
+    margin_bottom: DimensionValue | None = None,
+    margin_start: DimensionValue | None = None,
+    margin_end: DimensionValue | None = None,
+    margin_x: DimensionValue | None = None,
+    margin_y: DimensionValue | None = None,
+    width: DimensionValue | None = None,
+    height: DimensionValue | None = None,
+    min_width: DimensionValue | None = None,
+    min_height: DimensionValue | None = None,
+    max_width: DimensionValue | None = None,
+    max_height: DimensionValue | None = None,
+    position: Position | None = None,
+    top: DimensionValue | None = None,
+    bottom: DimensionValue | None = None,
+    left: DimensionValue | None = None,
+    right: DimensionValue | None = None,
+    start: DimensionValue | None = None,
+    end: DimensionValue | None = None,
+    z_index: int | None = None,
+    is_hidden: bool | None = None,
+    id: str | None = None,
+    exclude_from_tab_order: bool | None = None,
+    aria_expanded: AriaExpanded | None = None,
+    aria_haspopup: AriaHasPopup | None = None,
+    aria_controls: str | None = None,
+    aria_label: str | None = None,
+    aria_labelledby: str | None = None,
+    aria_describedby: str | None = None,
+    aria_pressed: AriaPressed | None = None,
+    aria_details: str | None = None,
+    UNSAFE_class_name: str | None = None,
+    UNSAFE_style: CSSProperties | None = None,
+    key: str | None = None,
+) -> Element:
+    """
+
+    A LogicButton shows an operator in a boolean logic sequence.
+
+    Args:
+        *children: The children to render inside the button.
+        variant: The variant of the button. (default: "primary")
+        is_disabled: Whether the button is disabled.
+        auto_focus: Whether the button should automatically get focus when the page loads.
+        type: The type of button to render. (default: "button")
+        on_press: Function called when the button is pressed.
+        on_press_start: Function called when the button is pressed.
+        on_press_end: Function called when a press interaction ends, either over the target or when the pointer leaves the target.
+        on_press_up: Function called when the button is released.
+        on_press_change: Function called when the press state changes.
+        on_focus: Function called when the button receives focus.
+        on_blur: Function called when the button loses focus.
+        on_focus_change: Function called when the focus state changes.
+        on_key_down: Function called when a key is pressed.
+        on_key_up: Function called when a key is released.
+        flex: When used in a flex layout, specifies how the element will grow or shrink to fit the space available.
+        flex_grow: When used in a flex layout, specifies how much the element will grow to fit the space available.
+        flex_shrink: When used in a flex layout, specifies how much the element will shrink to fit the space available.
+        flex_basis: When used in a flex layout, specifies the initial size of the element.
+        align_self: Overrides the align_items property of a flex or grid container.
+        justify_self: Specifies how the element is justified inside a flex or grid container.
+        order: The layout order for the element within a flex or grid container.
+        grid_area: The name of the grid area to place the element in.
+        grid_row: The name of the grid row to place the element in.
+        grid_row_start: The name of the grid row to start the element in.
+        grid_row_end: The name of the grid row to end the element in.
+        grid_column: The name of the grid column to place the element in.
+        grid_column_start: The name of the grid column to start the element in.
+        grid_column_end: The name of the grid column to end the element in.
+        margin: The margin to apply around the element.
+        margin_top: The margin to apply above the element.
+        margin_bottom: The margin to apply below the element.
+        margin_start: The margin to apply before the element.
+        margin_end: The margin to apply after the element.
+        margin_x: The margin to apply to the left and right of the element.
+        margin_y: The margin to apply to the top and bottom of the element.
+        width: The width of the element.
+        height: The height of the element.
+        min_width: The minimum width of the element.
+        min_height: The minimum height of the element.
+        max_width: The maximum width of the element.
+        max_height: The maximum height of the element.
+        position: Specifies how the element is positioned.
+        top: The distance from the top of the containing element.
+        bottom: The distance from the bottom of the containing element.
+        start: The distance from the start of the containing element.
+        end: The distance from the end of the containing element.
+        left: The distance from the left of the containing element.
+        right: The distance from the right of the containing element.
+        z_index: The stack order of the element.
+        is_hidden: Whether the element is hidden.
+        id: A unique identifier for the element.
+        exclude_from_tab_order: Whether the element should be excluded from the tab order.
+        aria_expanded: Whether the element is expanded.
+        aria_haspopup: Whether the element has a popup.
+        aria_controls: The id of the element that the element controls.
+        aria_label: The label for the element.
+        aria_labelledby: The id of the element that labels the element.
+        aria_describedby: The id of the element that describes the element.
+        aria_pressed: Whether the element is pressed.
+        aria_details: The details for the element.
+        UNSAFE_class_name: A CSS class to apply to the element.
+        UNSAFE_style: A CSS style to apply to the element.
+        key: A unique identifier used by React to render elements in a list.
+
+    Returns:
+        The rendered toggle button element.
+
+    """
+
+    return component_element(
+        "LogicButton",
+        *children,
+        variant=variant,
+        is_disabled=is_disabled,
+        type=type,
+        auto_focus=auto_focus,
+        on_press=on_press,
+        on_press_start=on_press_start,
+        on_press_end=on_press_end,
+        on_press_change=on_press_change,
+        on_press_up=on_press_up,
+        on_focus=on_focus,
+        on_blur=on_blur,
+        on_focus_change=on_focus_change,
+        on_key_down=on_key_down,
+        on_key_up=on_key_up,
+        flex=flex,
+        flex_grow=flex_grow,
+        flex_shrink=flex_shrink,
+        flex_basis=flex_basis,
+        align_self=align_self,
+        justify_self=justify_self,
+        order=order,
+        grid_area=grid_area,
+        grid_column=grid_column,
+        grid_row=grid_row,
+        grid_column_start=grid_column_start,
+        grid_column_end=grid_column_end,
+        grid_row_start=grid_row_start,
+        grid_row_end=grid_row_end,
+        margin=margin,
+        margin_top=margin_top,
+        margin_bottom=margin_bottom,
+        margin_start=margin_start,
+        margin_end=margin_end,
+        margin_x=margin_x,
+        margin_y=margin_y,
+        width=width,
+        height=height,
+        min_width=min_width,
+        min_height=min_height,
+        max_width=max_width,
+        max_height=max_height,
+        position=position,
+        top=top,
+        bottom=bottom,
+        left=left,
+        right=right,
+        start=start,
+        end=end,
+        z_index=z_index,
+        is_hidden=is_hidden,
+        id=id,
+        exclude_from_tab_order=exclude_from_tab_order,
+        aria_expanded=aria_expanded,
+        aria_haspopup=aria_haspopup,
+        aria_controls=aria_controls,
+        aria_label=aria_label,
+        aria_labelledby=aria_labelledby,
+        aria_describedby=aria_describedby,
+        aria_pressed=aria_pressed,
+        aria_details=aria_details,
+        UNSAFE_class_name=UNSAFE_class_name,
+        UNSAFE_style=UNSAFE_style,
+        key=key,
+    )

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import {
+  LogicButton as DHCLogicButton,
+  LogicButtonProps as DHCLogicButtonProps,
+} from '@deephaven/components';
+import { useButtonProps } from './hooks/useButtonProps';
+import { SerializedButtonEventProps } from './model/SerializedPropTypes';
+
+export function LogicButton(
+  props: SerializedButtonEventProps<DHCLogicButtonProps>
+): JSX.Element {
+  const buttonProps = useButtonProps(props);
+
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  return <DHCLogicButton {...buttonProps} />;
+}
+
+export default LogicButton;

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

@@ -19,6 +19,7 @@ export * from './IllustratedMessage';
 export * from './Image';
 export * from './InlineAlert';
 export * from './ListView';
+export * from './LogicButton';
 export * from './Markdown';
 export * from './Meter';
 export * from './model';

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

@@ -54,6 +54,7 @@ export const ELEMENT_NAME = {
   listActionMenu: uiComponentName('ListActionMenu'),
   link: uiComponentName('Link'),
   listView: uiComponentName('ListView'),
+  logicButton: uiComponentName('LogicButton'),
   markdown: uiComponentName('Markdown'),
   meter: uiComponentName('Meter'),
   numberField: uiComponentName('NumberField'),

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

@@ -66,6 +66,7 @@ import {
   Image,
   InlineAlert,
   ListView,
+  LogicButton,
   Markdown,
   Meter,
   Picker,
@@ -147,6 +148,7 @@ export const elementComponentMap = {
   [ELEMENT_NAME.listActionGroup]: ListActionGroup,
   [ELEMENT_NAME.listActionMenu]: ListActionMenu,
   [ELEMENT_NAME.listView]: ListView,
+  [ELEMENT_NAME.logicButton]: LogicButton,
   [ELEMENT_NAME.markdown]: Markdown,
   [ELEMENT_NAME.meter]: Meter,
   [ELEMENT_NAME.numberField]: NumberField,