Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: text field #357

Merged
merged 11 commits into from
Mar 27, 2024
2 changes: 2 additions & 0 deletions plugins/ui/src/deephaven/ui/components/spectrum/__init__.py
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
from .action_button import *
from .basic import *
from .button_group import *
from .button import *
from .text_field import *
from .flex import *
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
# Accessibility typings

BoolLiteral = Union[Literal["true", "false"], bool]

AriaExpanded = BoolLiteral
AriaHasPopup = Union[BoolLiteral, Literal["menu", "listbox", "tree", "grid", "dialog"]]
AriaPressed = Union[BoolLiteral, Literal["mixed"]]
AriaAutoComplete = Union[BoolLiteral, Literal["inline", "list", "both", "none"]]
16 changes: 0 additions & 16 deletions plugins/ui/src/deephaven/ui/components/spectrum/basic.py
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,6 @@ def spectrum_element(name: str, /, *children: Any, **props: Any) -> BaseElement:
return BaseElement(f"deephaven.ui.spectrum.{name}", *children, **props)


def button_group(*children, **props):
"""
Python implementation for the Adobe React Spectrum ButtonGroup component.
https://react-spectrum.adobe.com/react-spectrum/ButtonGroup.html
"""
return spectrum_element("ButtonGroup", *children, **props)


def checkbox(*children, **props):
"""
Python implementation for the Adobe React Spectrum Checkbox component.
Expand Down Expand Up @@ -157,14 +149,6 @@ def text(*children, **props):
return spectrum_element("Text", *children, **props)


def text_field(*children, **props):
"""
Python implementation for the Adobe React Spectrum TextField component.
https://react-spectrum.adobe.com/react-spectrum/TextField.html
"""
return spectrum_element("TextField", *children, **props)


def toggle_button(*children, **props):
"""
Python implementation for the Adobe React Spectrum ToggleButton component.
Expand Down
157 changes: 157 additions & 0 deletions plugins/ui/src/deephaven/ui/components/spectrum/button_group.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
from __future__ import annotations
from typing import Any, Callable
from .accessibility import AriaExpanded, AriaHasPopup, AriaPressed
from .events import (
ButtonType,
FocusEventCallable,
KeyboardEventCallable,
PressEventCallable,
StaticColor,
Orientation,
)
from .layout import (
AlignSelf,
CSSProperties,
DimensionValue,
JustifySelf,
LayoutFlex,
Number,
Position,
)
from .basic import spectrum_element
from ...elements import Element


def button_group(
*children: Any,
is_disabled: bool | None = None,
orientation: Orientation = "horizontal",
alignment: AlignSelf = "start",
flex: LayoutFlex | None = None,
flex_grow: Number | None = None,
flex_shrink: Number | None = None,
flex_basis: DimensionValue | None = None,
align_self: AlignSelf | None = None,
justify_self: JustifySelf | None = None,
order: Number | None = None,
grid_area: str | None = None,
grid_row: str | None = None,
grid_column: str | None = None,
grid_row_start: str | None = None,
grid_row_end: str | None = None,
grid_column_start: str | None = None,
grid_column_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: Number | None = None,
is_hidden: bool | None = None,
id: str | None = None,
UNSAFE_class_name: str | None = None,
UNSAFE_style: CSSProperties | None = None,
) -> Element:
"""
A button group is a grouping of button whose actions are related to each other.

Args:
*children: The children of the button group.
is_disabled: Whether the button group is disabled.
orientation: The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent any switching behaviours between 'vertical' and horizontal'.
alignment: The alignment of the buttons within the ButtonGroup.
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 the element will grow to fit the space available.
flex_shrink: When used in a flex layout, specifies how the element will shrink to fit the space available.
flex_basis: When used in a flex layout, specifies the initial main size of the element.
align_self: Overrides the alignItems property of a flex or grid container.
justify_self: Species 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: When used in a grid layout specifies, specifies the named grid area that the element should be placed in within the grid.
grid_row: When used in a grid layout, specifies the row the element should be placed in within the grid.
grid_column: When used in a grid layout, specifies the column the element should be placed in within the grid.
grid_row_start: When used in a grid layout, specifies the starting row to span within the grid.
grid_row_end: When used in a grid layout, specifies the ending row to span within the grid.
grid_column_start: When used in a grid layout, specifies the starting column to span within the grid.
grid_column_end: When used in a grid layout, specifies the ending column to span within the grid.
margin: The margin for all four sides of the element.
margin_top: The margin for the top side of the element.
margin_bottom: The margin for the bottom side of the element.
margin_start: The margin for the logical start side of the element, depending on layout direction.
margin_end: The margin for the logical end side of the element, depending on layout direction.
margin_x: The margin for the left and right sides of the element.
margin_y: The margin for the top and bottom sides of the element.
position: Specifies how the element is position.
top: The top position of the element.
bottom: The bottom position of the element.
left: The left position of the element.
right: The right position of the element.
start: The logical start position of the element, depending on layout direction.
end: The logical end position of the element, depending on layout direction.
z_index: The stacking order for the element
is_hidden: Hides the element.
id: The unique identifier of the element.
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.
"""
return spectrum_element(
"ButtonGroup",
*children,
is_disabled=is_disabled,
orientation=orientation,
alignment=alignment,
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_row=grid_row,
grid_column=grid_column,
grid_row_start=grid_row_start,
grid_row_end=grid_row_end,
grid_column_start=grid_column_start,
grid_column_end=grid_column_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,
UNSAFE_class_name=UNSAFE_class_name,
UNSAFE_style=UNSAFE_style,
)
1 change: 1 addition & 0 deletions plugins/ui/src/deephaven/ui/components/spectrum/events.py
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ class PressEvent(TypedDict):
]
ButtonStyle = Literal["fill", "outline"]
ElementTypes = Literal["div", "button", "a"]
Orientation = Literal["horizontal", "vertical"]

FocusEventCallable = Callable[[FocusEvent], None]
KeyboardEventCallable = Callable[[KeyboardEvent], None]
Expand Down
2 changes: 2 additions & 0 deletions plugins/ui/src/deephaven/ui/components/spectrum/layout.py
Original file line number Diff line number Diff line change
Expand Up @@ -101,3 +101,5 @@
"""
A dictionary of CSS properties.
"""
LabelPosition = Literal["top", "side"]
LabelAlign = Literal["start", "end"]
Loading
Loading