diff --git a/plugins/ui/src/deephaven/ui/components/__init__.py b/plugins/ui/src/deephaven/ui/components/__init__.py index f5a448f5c..2047ce050 100644 --- a/plugins/ui/src/deephaven/ui/components/__init__.py +++ b/plugins/ui/src/deephaven/ui/components/__init__.py @@ -3,7 +3,6 @@ from .action_menu import action_menu from .basic import ( component_element, - grid, heading, icon_wrapper, illustrated_message, @@ -25,6 +24,7 @@ from .date_picker import date_picker from .flex import flex from .fragment import fragment +from .grid import grid from .icon import icon from .item import item from .item_table_source import item_table_source diff --git a/plugins/ui/src/deephaven/ui/components/basic.py b/plugins/ui/src/deephaven/ui/components/basic.py index cc1380f61..92cd315e9 100644 --- a/plugins/ui/src/deephaven/ui/components/basic.py +++ b/plugins/ui/src/deephaven/ui/components/basic.py @@ -12,14 +12,6 @@ def component_element(name: str, /, *children: Any, **props: Any) -> BaseElement return BaseElement(f"deephaven.ui.components.{name}", *children, **props) -def grid(*children, **props): - """ - Python implementation for the Adobe React Spectrum Grid component. - https://react-spectrum.adobe.com/react-spectrum/Grid.html - """ - return component_element("Grid", *children, **props) - - def heading(*children, **props): """ Python implementation for the Adobe React Spectrum Heading component. diff --git a/plugins/ui/src/deephaven/ui/components/grid.py b/plugins/ui/src/deephaven/ui/components/grid.py new file mode 100644 index 000000000..56a60f943 --- /dev/null +++ b/plugins/ui/src/deephaven/ui/components/grid.py @@ -0,0 +1,190 @@ +from __future__ import annotations +from typing import Any +from .types import ( + # Layout + AlignSelf, + CSSProperties, + DimensionValue, + JustifySelf, + LayoutFlex, + Number, + Position, + GridFlow, + JustifyItems, + JustifyContent, + AlignContent, + AlignItems, +) +from .basic import component_element +from ..elements import Element + + +def grid( + *children: Any, + areas: list[str] | None = None, + rows: str | list[DimensionValue] | None = None, + columns: str | list[DimensionValue] | None = None, + auto_columns: DimensionValue | None = None, + auto_rows: DimensionValue | None = None, + auto_flow: GridFlow | None = None, + justify_items: JustifyItems | None = None, + justify_content: JustifyContent = "stretch", + align_content: AlignContent = "start", + align_items: AlignItems = "stretch", + gap: DimensionValue | None = None, + column_gap: DimensionValue | None = None, + row_gap: DimensionValue | None = None, + 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_row_start: str | None = None, + grid_row_end: str | None = None, + grid_column: 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, + start: DimensionValue | None = None, + end: DimensionValue | None = None, + left: DimensionValue | None = None, + right: 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 layout container using CSS grid. Supports Spectrum dimensions as values to ensure consistent and adaptive sizing and spacing. + + Args: + children: The content to render within the container. + areas: The named grid areas to use for the grid. + rows: The row sizes for the grid. + columns: The column sizes for the grid. + auto_columns: The size of auto-generated columns. + auto_rows: The size of auto-generated rows. + auto_flow: The flow direction for auto-generated grid items. + justify_items: The defailt justify_self for all items in the grid. + justify_content: The distribution of space around items along the main axis. + align_content: The distribution of space around items along the cross axis. + align_items: The alignment of children within their container. + gap: The gap between rows and columns. + column_gap: The gap between columns. + row_gap: The gap between rows. + 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 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. + width: The width of the element. + min_width: The minimum width of the element. + max_width: The maximum width of the element. + height: The height of the element. + min_height: The minimum height of the element. + max_height: The maximum height of the element + position: The position of the element. + top: The distance from the top of the containing element. + bottom: The distance from the bottom of the containing element. + left: The distance from the left of the containing element. + right: The distance from the right of the containing element. + start: The distance from the start of the containing element, depending on layout direction. + end: The distance from the end of the containing element, depending on layout direction. + z_index: The stack order of the element. + is_hidden: Whether the element is hidden. + id: The unique identifier of the element. + UNSAFE_class_name: A CSS class to apply to the element. + UNSAFE_style: A CSS style to apply to the element. + """ + return component_element( + "Grid", + children=children, + areas=areas, + rows=rows, + columns=columns, + auto_columns=auto_columns, + auto_rows=auto_rows, + auto_flow=auto_flow, + justify_items=justify_items, + justify_content=justify_content, + align_content=align_content, + align_items=align_items, + gap=gap, + column_gap=column_gap, + row_gap=row_gap, + 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_row_start=grid_row_start, + grid_row_end=grid_row_end, + grid_column=grid_column, + 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, + start=start, + end=end, + left=left, + right=right, + z_index=z_index, + is_hidden=is_hidden, + id=id, + UNSAFE_class_name=UNSAFE_class_name, + UNSAFE_style=UNSAFE_style, + ) diff --git a/plugins/ui/src/deephaven/ui/components/types/layout.py b/plugins/ui/src/deephaven/ui/components/types/layout.py index 8a7804d40..7727529a8 100644 --- a/plugins/ui/src/deephaven/ui/components/types/layout.py +++ b/plugins/ui/src/deephaven/ui/components/types/layout.py @@ -104,6 +104,27 @@ "stretch", ] +JustifyItems = Literal[ + "auto", + "normal", + "start", + "end", + "center", + "left", + "right", + "stretch", + "self-start", + "self-end", + "baseline", + "first baseline", + "last baseline", + "safe center", + "unsafe center", + "legacy right", + "legacy left", + "legacy center", +] + OverflowMode = Literal["wrap", "collapse"] Alignment = Literal["start", "end"] @@ -132,6 +153,7 @@ LabelPosition = Literal["top", "side"] Align = Literal["start", "end"] +GridFlow = Literal["row", "column", "row dense", "column dense"] BorderSize = Literal["none", "thin", "thick", "thicker", "thickest"] BorderRadius = Literal[ "xsmall",