From a1bce55da4dd68154d6b2fc155f8cc0ae9d854fa Mon Sep 17 00:00:00 2001 From: Ethan Alvizo Date: Thu, 29 Aug 2024 17:33:09 -0400 Subject: [PATCH 1/8] docs: flex --- plugins/ui/docs/components/flex.md | 254 +++++++++++++++++++++++++++++ 1 file changed, 254 insertions(+) create mode 100644 plugins/ui/docs/components/flex.md diff --git a/plugins/ui/docs/components/flex.md b/plugins/ui/docs/components/flex.md new file mode 100644 index 000000000..7604f5431 --- /dev/null +++ b/plugins/ui/docs/components/flex.md @@ -0,0 +1,254 @@ +# Flex +A flexbox-based layout container that utilizes Spectrum dimension values and supports the gap property for consistent spacing between items. + +## Example + +```python +from deephaven import ui + + +@ui.component +def flex(): + return ui.flex( + ui.view(background_color="red", height="size-800", width="size-800"), + ui.view(background_color="green", height="size-800", width="size-800"), + ui.view(background_color="yellow", height="size-800", width="size-800"), + ) + + +my_flex = flex() +``` + +## Direction + +The `direction` prop determines the direction in which the flex items are laid out. + +Options: +- `row` (default): the flex items are arranged horizontally from left to right +- `column`: the flex items are arranged vertically from top to bottom +- `row-reverse`: the flex items are arranged horizontally from right to left +- `column-reverse`: the flex items are arranged vertically from bottom to top + +```python +from deephaven import ui + + +@ui.component +def flex(): + return [ + ui.flex( + ui.view(background_color="red", height="size-800", width="size-800"), + ui.view(background_color="green", height="size-800", width="size-800"), + ui.view(background_color="yellow", height="size-800", width="size-800"), + ), + ui.flex( + ui.view(background_color="red", height="size-800", width="size-800"), + ui.view(background_color="green", height="size-800", width="size-800"), + ui.view(background_color="yellow", height="size-800", width="size-800"), + direction="row-reverse", + ), + ui.flex( + ui.view(background_color="red", height="size-800", width="size-800"), + ui.view(background_color="green", height="size-800", width="size-800"), + ui.view(background_color="yellow", height="size-800", width="size-800"), + direction="column", + ), + ui.flex( + ui.view(background_color="red", height="size-800", width="size-800"), + ui.view(background_color="green", height="size-800", width="size-800"), + ui.view(background_color="yellow", height="size-800", width="size-800"), + direction="column-reverse", + ), + ] + + +my_flex = flex() +``` + +## Nesting + +Flexboxes can be nested to create more complicated layouts. By using the `flex` prop on the children, it can expand to fill the remaining space. + +```python +from deephaven import ui + + +@ui.component +def flex(): + return [ + ui.flex( + ui.view(background_color="red", height="size-800"), + ui.flex( + ui.view(background_color="green", height="size-800", width="size-800"), + ui.view(background_color="blue", height="size-800", width="size-800"), + ), + direction="column", + ), + ] + + +my_flex = flex() +``` + + +## Wrapping + +When enabled, items that overflow wrap into the next row. Resize your browser window to see the items reflow. + +```python +from deephaven import ui + + +@ui.component +def flex(): + return ui.flex( + ui.view(background_color="red", height="size-800", width="size-800"), + ui.view(background_color="green", height="size-800", width="size-800"), + ui.view(background_color="yellow", height="size-800", width="size-800"), + ui.view(background_color="blue", height="size-800", width="size-800"), + ui.view(background_color="orange", height="size-800", width="size-800"), + wrap=True, + width="200px", + align_content="start", + ) + + +my_flex = flex() +``` + + +## Alignment + +The `alignItems` prop can be utilized to align items along the cross axis. When the direction is set to "column", it controls horizontal alignment, and when the direction is set to "row", it controls vertical alignment. + +Options: +- `stretch` (default): the flex items are stretched to fill the container along the cross axis +- `start`: the flex items are aligned at the start of the cross axis +- `end`: the flex items are aligned at the end of the cross axis +- `center`: the flex items are centered along the cross axis +- `self-start`: the flex items are aligned at the start of their container +- `self-end`: the flex items are aligned at the end of their container +- `baseline`: the flex items are aligned based on their baselines +- `first baseline`: the flex items are aligned based on the first baseline of the container +- `last baseline`: the flex items are aligned based on the last baseline of the container +- `safe center`: the flex items are centered along the cross axis, ensuring they remain within the safe area +- `unsafe center`: the flex items are centered along the cross axis, without considering the safe area + +```python +from deephaven import ui + + +@ui.component +def flex(): + vertical = ui.flex( + ui.flex( + ui.view(background_color="red", height="size-800", width="size-400"), + ui.view(background_color="green", height="size-800", width="size-800"), + ui.view(background_color="blue", height="size-800", width="size-200"), + direction="column", + align_items="start", + ), + ui.flex( + ui.view(background_color="red", height="size-800", width="size-400"), + ui.view(background_color="green", height="size-800", width="size-800"), + ui.view(background_color="blue", height="size-800", width="size-200"), + direction="column", + align_items="center", + ), + ui.flex( + ui.view(background_color="red", height="size-800", width="size-400"), + ui.view(background_color="green", height="size-800", width="size-800"), + ui.view(background_color="blue", height="size-800", width="size-200"), + direction="column", + align_items="end", + ), + ) + horizontal = ui.flex( + ui.flex( + ui.view(background_color="red", width="size-800", height="size-400"), + ui.view(background_color="green", width="size-800", height="size-800"), + ui.view(background_color="blue", width="size-800", height="size-200"), + align_items="start", + ), + ui.flex( + ui.view(background_color="red", width="size-800", height="size-400"), + ui.view(background_color="green", width="size-800", height="size-800"), + ui.view(background_color="blue", width="size-800", height="size-200"), + align_items="center", + ), + ui.flex( + ui.view(background_color="red", width="size-800", height="size-400"), + ui.view(background_color="green", width="size-800", height="size-800"), + ui.view(background_color="blue", width="size-800", height="size-200"), + align_items="end", + ), + direction="column", + ) + + return ui.flex(vertical, horizontal) + + +my_flex = flex() +``` + + +## Justification + +The `justifyContent` prop aligns items along the main axis. For a "column" direction, it controls vertical alignment, and for a "row" direction, it controls horizontal alignment. + +Options: +- `stretch` (default): the flex items are stretched to fill the container along the cross axis +- `start`: the flex items are aligned at the start of the cross axis +- `end`: the flex items are aligned at the end of the cross axis +- `center`: the flex items are centered along the cross axis +- `left`: the flex items are packed toward the left edge of the container +- `right`: the flex items are packed toward the right edge of the container +- `space-between`: the flex items are evenly distributed with the first item at the start and the last item at the end +- `space-around`: the flex items are evenly distributed with equal space around them +- `space-evenly`: the flex items are evenly distributed with equal space between them +- `baseline`: the flex items are aligned based on their baselines +- `first baseline`: the flex items are aligned based on the first baseline of the container +- `last baseline`: the flex items are aligned based on the last baseline of the container +- `safe center`: the flex items are centered along the cross axis, ensuring they remain within the safe area +- `unsafe center`: the flex items are centered along the cross axis, without considering the safe area + +```python +from deephaven import ui + + +@ui.component +def flex(): + start = ui.flex( + ui.view(background_color="red", height="size-800", width="size-400"), + ui.view(background_color="green", height="size-800", width="size-800"), + ui.view(background_color="blue", height="size-800", width="size-200"), + justify_content="start", + width="500px", + ) + center = ui.flex( + ui.view(background_color="red", height="size-800", width="size-400"), + ui.view(background_color="green", height="size-800", width="size-800"), + ui.view(background_color="blue", height="size-800", width="size-200"), + justify_content="center", + width="500px", + ) + end = ui.flex( + ui.view(background_color="red", height="size-800", width="size-400"), + ui.view(background_color="green", height="size-800", width="size-800"), + ui.view(background_color="blue", height="size-800", width="size-200"), + justify_content="end", + width="500px", + ) + + return ui.flex(start, center, end, direction="column") + + +my_flex = flex() +``` + + +## API reference + +```{eval-rst} +.. dhautofunction:: deephaven.ui.flex +``` \ No newline at end of file From 02958cbd5c4ebbb7c5b5301dd53cae90923cc2fc Mon Sep 17 00:00:00 2001 From: Ethan Alvizo Date: Tue, 3 Sep 2024 09:22:46 -0400 Subject: [PATCH 2/8] PR comments --- plugins/ui/docs/components/flex.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/plugins/ui/docs/components/flex.md b/plugins/ui/docs/components/flex.md index 7604f5431..d9a648b09 100644 --- a/plugins/ui/docs/components/flex.md +++ b/plugins/ui/docs/components/flex.md @@ -24,10 +24,10 @@ my_flex = flex() The `direction` prop determines the direction in which the flex items are laid out. Options: -- `row` (default): the flex items are arranged horizontally from left to right -- `column`: the flex items are arranged vertically from top to bottom -- `row-reverse`: the flex items are arranged horizontally from right to left -- `column-reverse`: the flex items are arranged vertically from bottom to top +- `row` (default): the flex items are arranged horizontally from left to right. +- `column`: the flex items are arranged vertically from top to bottom. +- `row-reverse`: the flex items are arranged horizontally from right to left. +- `column-reverse`: the flex items are arranged vertically from bottom to top. ```python from deephaven import ui @@ -67,7 +67,7 @@ my_flex = flex() ## Nesting -Flexboxes can be nested to create more complicated layouts. By using the `flex` prop on the children, it can expand to fill the remaining space. +Flexboxes can be nested to create more complicated layouts. By using the `flex` prop on the children, the flexbox can expand to fill the remaining space. ```python from deephaven import ui @@ -119,7 +119,7 @@ my_flex = flex() ## Alignment -The `alignItems` prop can be utilized to align items along the cross axis. When the direction is set to "column", it controls horizontal alignment, and when the direction is set to "row", it controls vertical alignment. +The `alignItems` prop can align items along the cross-axis. When the direction is set to "column", it controls horizontal alignment, and when it is set to "row", it controls vertical alignment. Options: - `stretch` (default): the flex items are stretched to fill the container along the cross axis From 1335b68bc27cfed752d2f8081ccd01bb4dabbd9e Mon Sep 17 00:00:00 2001 From: Ethan Alvizo Date: Tue, 3 Sep 2024 10:02:47 -0400 Subject: [PATCH 3/8] CI check --- plugins/ui/src/deephaven/ui/components/flex.py | 3 +++ 1 file changed, 3 insertions(+) diff --git a/plugins/ui/src/deephaven/ui/components/flex.py b/plugins/ui/src/deephaven/ui/components/flex.py index a015bc51d..1493ed9cf 100644 --- a/plugins/ui/src/deephaven/ui/components/flex.py +++ b/plugins/ui/src/deephaven/ui/components/flex.py @@ -39,6 +39,9 @@ def flex( gap: The space to display between both rows and columns of children. column_gap: The space to display between columns of children. row_gap: The space to display between rows of children. + + Returns: + The rendered flex box. """ return component_element( "Flex", From 2daccf03f2545bb5c1dfc52eb7cc453dac1851a3 Mon Sep 17 00:00:00 2001 From: Ethan Alvizo Date: Tue, 3 Sep 2024 13:01:36 -0400 Subject: [PATCH 4/8] missing arg doc --- plugins/ui/src/deephaven/ui/components/flex.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/ui/src/deephaven/ui/components/flex.py b/plugins/ui/src/deephaven/ui/components/flex.py index 1493ed9cf..ed655ab6c 100644 --- a/plugins/ui/src/deephaven/ui/components/flex.py +++ b/plugins/ui/src/deephaven/ui/components/flex.py @@ -27,7 +27,6 @@ def flex( ): """ Base Flex component for laying out children in a flexbox. - Args: *children: Elements to render in the flexbox. flex: The flex property of the flexbox. @@ -39,6 +38,7 @@ def flex( gap: The space to display between both rows and columns of children. column_gap: The space to display between columns of children. row_gap: The space to display between rows of children. + **props: Additional properties to pass to the flex box. Returns: The rendered flex box. From 231dfd6e13e65549b14ad5d148621a88912758e2 Mon Sep 17 00:00:00 2001 From: Ethan Alvizo Date: Tue, 3 Sep 2024 17:07:15 -0400 Subject: [PATCH 5/8] autodoc fix --- plugins/ui/docs/README.md | 4 ++-- plugins/ui/src/deephaven/ui/components/flex.py | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/plugins/ui/docs/README.md b/plugins/ui/docs/README.md index ebb5d2272..8c87f7bae 100644 --- a/plugins/ui/docs/README.md +++ b/plugins/ui/docs/README.md @@ -889,7 +889,7 @@ def ui_range_table(source, column): my_range_table = ui_range_table(stocks, "Size") ``` -![Table with a slider for selecting the range.](range_table.png) +![Table with a slider for selecting the range.](./_assets/range_table.png) ## Table with required filters @@ -1388,7 +1388,7 @@ te = ui.table( ) ``` -![Table events](table_events.png) +![Table events](./_assets/table_events.png) ### ui.table Context Menu diff --git a/plugins/ui/src/deephaven/ui/components/flex.py b/plugins/ui/src/deephaven/ui/components/flex.py index ed655ab6c..2f156fbd4 100644 --- a/plugins/ui/src/deephaven/ui/components/flex.py +++ b/plugins/ui/src/deephaven/ui/components/flex.py @@ -1,6 +1,7 @@ from __future__ import annotations from typing import Any from .basic import component_element +from ..elements import Element from .types import ( LayoutFlex, Direction, @@ -23,10 +24,10 @@ def flex( gap: DimensionValue | None = "size-100", column_gap: DimensionValue | None = None, row_gap: DimensionValue | None = None, - **props: Any, -): +) -> Element: """ Base Flex component for laying out children in a flexbox. + Args: *children: Elements to render in the flexbox. flex: The flex property of the flexbox. @@ -38,7 +39,7 @@ def flex( gap: The space to display between both rows and columns of children. column_gap: The space to display between columns of children. row_gap: The space to display between rows of children. - **props: Additional properties to pass to the flex box. + Returns: The rendered flex box. @@ -55,5 +56,4 @@ def flex( gap=gap, column_gap=column_gap, row_gap=row_gap, - **props, ) From 86fe0e24afabac9c72c5f69243bd2580ad0f1074 Mon Sep 17 00:00:00 2001 From: Ethan Alvizo Date: Thu, 5 Sep 2024 23:37:41 -0400 Subject: [PATCH 6/8] PR comments --- plugins/ui/docs/components/flex.md | 56 +++++++++++++++--------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/plugins/ui/docs/components/flex.md b/plugins/ui/docs/components/flex.md index d9a648b09..79fe78103 100644 --- a/plugins/ui/docs/components/flex.md +++ b/plugins/ui/docs/components/flex.md @@ -1,5 +1,5 @@ # Flex -A flexbox-based layout container that utilizes Spectrum dimension values and supports the gap property for consistent spacing between items. +A [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)-based layout container that utilizes dimension values and supports the gap property for consistent spacing between items. ## Example @@ -119,20 +119,20 @@ my_flex = flex() ## Alignment -The `alignItems` prop can align items along the cross-axis. When the direction is set to "column", it controls horizontal alignment, and when it is set to "row", it controls vertical alignment. +The `align_items` prop aligns items along the cross-axis. When the direction is set to "column", it controls horizontal alignment, and when it is set to "row", it controls vertical alignment. Options: -- `stretch` (default): the flex items are stretched to fill the container along the cross axis -- `start`: the flex items are aligned at the start of the cross axis -- `end`: the flex items are aligned at the end of the cross axis -- `center`: the flex items are centered along the cross axis -- `self-start`: the flex items are aligned at the start of their container -- `self-end`: the flex items are aligned at the end of their container -- `baseline`: the flex items are aligned based on their baselines -- `first baseline`: the flex items are aligned based on the first baseline of the container -- `last baseline`: the flex items are aligned based on the last baseline of the container -- `safe center`: the flex items are centered along the cross axis, ensuring they remain within the safe area -- `unsafe center`: the flex items are centered along the cross axis, without considering the safe area +- `stretch` (default): the flex items are stretched to fill the container along the cross-axis. +- `start`: the flex items are aligned at the start of the cross-axis. +- `end`: the flex items are aligned at the end of the cross-axis. +- `center`: the flex items are centered along the cross-axis. +- `self-start`: the flex items are aligned at the start of their container. +- `self-end`: the flex items are aligned at the end of their container. +- `baseline`: the flex items are aligned based on their baselines. +- `first baseline`: the flex items are aligned based on the first baseline of the container. +- `last baseline`: the flex items are aligned based on the last baseline of the container. +- `safe center`: the flex items are centered along the cross-axis, ensuring they remain within the safe area. +- `unsafe center`: the flex items are centered along the cross-axis, without considering the safe area. ```python from deephaven import ui @@ -194,23 +194,23 @@ my_flex = flex() ## Justification -The `justifyContent` prop aligns items along the main axis. For a "column" direction, it controls vertical alignment, and for a "row" direction, it controls horizontal alignment. +The `justify_content` prop is used to align items along the main axis. When the direction is set to "column", it controls the vertical alignment, and when the direction is set to "row", it controls the horizontal alignment. Options: -- `stretch` (default): the flex items are stretched to fill the container along the cross axis -- `start`: the flex items are aligned at the start of the cross axis -- `end`: the flex items are aligned at the end of the cross axis -- `center`: the flex items are centered along the cross axis -- `left`: the flex items are packed toward the left edge of the container -- `right`: the flex items are packed toward the right edge of the container -- `space-between`: the flex items are evenly distributed with the first item at the start and the last item at the end -- `space-around`: the flex items are evenly distributed with equal space around them -- `space-evenly`: the flex items are evenly distributed with equal space between them -- `baseline`: the flex items are aligned based on their baselines -- `first baseline`: the flex items are aligned based on the first baseline of the container -- `last baseline`: the flex items are aligned based on the last baseline of the container -- `safe center`: the flex items are centered along the cross axis, ensuring they remain within the safe area -- `unsafe center`: the flex items are centered along the cross axis, without considering the safe area +- `stretch` (default): the flex items are stretched to fill the container along the cross-axis. +- `start`: the flex items are aligned at the start of the cross-axis. +- `end`: the flex items are aligned at the end of the cross-axis. +- `center`: the flex items are centered along the cross-axis. +- `left`: the flex items are packed toward the left edge of the container. +- `right`: the flex items are packed toward the right edge of the container. +- `space-between`: the flex items are evenly distributed with the first item at the start and the last item at the end. +- `space-around`: the flex items are evenly distributed with equal space around them. +- `space-evenly`: the flex items are evenly distributed with equal space between them. +- `baseline`: the flex items are aligned based on their baselines. +- `first baseline`: the flex items are aligned based on the first baseline of the container. +- `last baseline`: the flex items are aligned based on the last baseline of the container. +- `safe center`: the flex items are centered along the cross-axis, ensuring they remain within the safe area. +- `unsafe center`: the flex items are centered along the cross-axis, without considering the safe area. ```python from deephaven import ui From 3e256a6c745f2079442eb4a243d6ff8aee060c21 Mon Sep 17 00:00:00 2001 From: Ethan Alvizo Date: Fri, 20 Sep 2024 14:12:53 -0400 Subject: [PATCH 7/8] pydocs --- .../ui/src/deephaven/ui/components/flex.py | 124 +++++++++++++++++- 1 file changed, 121 insertions(+), 3 deletions(-) diff --git a/plugins/ui/src/deephaven/ui/components/flex.py b/plugins/ui/src/deephaven/ui/components/flex.py index 61605125b..635085fb2 100644 --- a/plugins/ui/src/deephaven/ui/components/flex.py +++ b/plugins/ui/src/deephaven/ui/components/flex.py @@ -7,15 +7,18 @@ Direction, Wrap, JustifyContent, + JustifySelf, AlignContent, AlignItems, + AlignSelf, DimensionValue, + Position, + CSSProperties, ) def flex( *children: Any, - flex: LayoutFlex | None = "auto", direction: Direction | None = None, wrap: Wrap | None = None, justify_content: JustifyContent | None = None, @@ -24,6 +27,45 @@ def flex( gap: DimensionValue | None = "size-100", column_gap: DimensionValue | None = None, row_gap: DimensionValue | None = None, + flex: LayoutFlex = "auto", + 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_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: int | None = None, + is_hidden: bool | None = None, + id: str | None = None, + UNSAFE_class_name: str | None = None, + UNSAFE_style: CSSProperties | None = None, key: str | None = None, ) -> Element: """ @@ -31,7 +73,6 @@ def flex( Args: *children: Elements to render in the flexbox. - flex: The flex property of the flexbox. direction: The direction in which to layout children. wrap: Whether children should wrap when they exceed the panel's width. justify_content: The distribution of space around items along the main axis. @@ -40,6 +81,45 @@ def flex( gap: The space to display between both rows and columns of children. column_gap: The space to display between columns of children. row_gap: The space to display between rows of children. + 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. + 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. key: A unique identifier used by React to render elements in a list @@ -49,7 +129,6 @@ def flex( return component_element( "Flex", *children, - flex=flex, direction=direction, wrap=wrap, justify_content=justify_content, @@ -58,5 +137,44 @@ def flex( 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, key=key, ) From 6b98ccd5fe23f308c070bbfdb5267052ba35c3e1 Mon Sep 17 00:00:00 2001 From: Ethan Alvizo Date: Sun, 3 Nov 2024 23:55:16 -0500 Subject: [PATCH 8/8] PR comments --- plugins/ui/docs/components/flex.md | 257 +++++++++++++++++------------ 1 file changed, 150 insertions(+), 107 deletions(-) diff --git a/plugins/ui/docs/components/flex.md b/plugins/ui/docs/components/flex.md index 79fe78103..e61099943 100644 --- a/plugins/ui/docs/components/flex.md +++ b/plugins/ui/docs/components/flex.md @@ -8,15 +8,15 @@ from deephaven import ui @ui.component -def flex(): +def ui_flex(): return ui.flex( - ui.view(background_color="red", height="size-800", width="size-800"), - ui.view(background_color="green", height="size-800", width="size-800"), - ui.view(background_color="yellow", height="size-800", width="size-800"), + ui.view(1, background_color="red", height="size-800", width="size-800"), + ui.view(2, background_color="green", height="size-800", width="size-800"), + ui.view(3, background_color="blue", height="size-800", width="size-800"), ) -my_flex = flex() +my_flex = ui_flex() ``` ## Direction @@ -34,35 +34,39 @@ from deephaven import ui @ui.component -def flex(): +def ui_flex_direction(): return [ + 'direction="row"', ui.flex( - ui.view(background_color="red", height="size-800", width="size-800"), - ui.view(background_color="green", height="size-800", width="size-800"), - ui.view(background_color="yellow", height="size-800", width="size-800"), + ui.view(1, background_color="red", height="size-800", width="size-800"), + ui.view(2, background_color="green", height="size-800", width="size-800"), + ui.view(3, background_color="blue", height="size-800", width="size-800"), ), + 'direction="row-reverse"', ui.flex( - ui.view(background_color="red", height="size-800", width="size-800"), - ui.view(background_color="green", height="size-800", width="size-800"), - ui.view(background_color="yellow", height="size-800", width="size-800"), + ui.view(1, background_color="red", height="size-800", width="size-800"), + ui.view(2, background_color="green", height="size-800", width="size-800"), + ui.view(3, background_color="blue", height="size-800", width="size-800"), direction="row-reverse", ), + 'direction="column"', ui.flex( - ui.view(background_color="red", height="size-800", width="size-800"), - ui.view(background_color="green", height="size-800", width="size-800"), - ui.view(background_color="yellow", height="size-800", width="size-800"), + ui.view(1, background_color="red", height="size-800", width="size-800"), + ui.view(2, background_color="green", height="size-800", width="size-800"), + ui.view(3, background_color="blue", height="size-800", width="size-800"), direction="column", ), + 'direction="column-reverse"', ui.flex( - ui.view(background_color="red", height="size-800", width="size-800"), - ui.view(background_color="green", height="size-800", width="size-800"), - ui.view(background_color="yellow", height="size-800", width="size-800"), + ui.view(1, background_color="red", height="size-800", width="size-800"), + ui.view(2, background_color="green", height="size-800", width="size-800"), + ui.view(3, background_color="blue", height="size-800", width="size-800"), direction="column-reverse", ), ] -my_flex = flex() +my_flex_direction = ui_flex_direction() ``` ## Nesting @@ -74,20 +78,24 @@ from deephaven import ui @ui.component -def flex(): +def ui_flex_nesting(): return [ ui.flex( - ui.view(background_color="red", height="size-800"), + ui.view(1, background_color="red", height="size-800"), ui.flex( - ui.view(background_color="green", height="size-800", width="size-800"), - ui.view(background_color="blue", height="size-800", width="size-800"), + ui.view( + 2, background_color="green", height="size-800", width="size-800" + ), + ui.view( + 3, background_color="blue", height="size-800", width="size-800" + ), ), direction="column", ), ] -my_flex = flex() +my_flex_nesting = ui_flex_nesting() ``` @@ -100,20 +108,96 @@ from deephaven import ui @ui.component -def flex(): +def ui_flex_wrap(): return ui.flex( - ui.view(background_color="red", height="size-800", width="size-800"), - ui.view(background_color="green", height="size-800", width="size-800"), - ui.view(background_color="yellow", height="size-800", width="size-800"), - ui.view(background_color="blue", height="size-800", width="size-800"), - ui.view(background_color="orange", height="size-800", width="size-800"), + ui.view(1, background_color="red", height="size-800", width="size-800"), + ui.view(2, background_color="green", height="size-800", width="size-800"), + ui.view(3, background_color="yellow", height="size-800", width="size-800"), + ui.view(4, background_color="blue", height="size-800", width="size-800"), + ui.view(5, background_color="orange", height="size-800", width="size-800"), wrap=True, width="200px", align_content="start", ) -my_flex = flex() +my_flex_wrap = ui_flex_wrap() +``` + + +## Justification + +The `justify_content` prop is used to align items along the main axis. When the direction is set to "column", it controls the vertical alignment, and when the direction is set to "row", it controls the horizontal alignment. + +Options: +- `stretch` (default): the flex items are stretched to fill the container along the cross-axis. +- `start`: the flex items are aligned at the start of the cross-axis. +- `end`: the flex items are aligned at the end of the cross-axis. +- `center`: the flex items are centered along the cross-axis. +- `left`: the flex items are packed toward the left edge of the container. +- `right`: the flex items are packed toward the right edge of the container. +- `space-between`: the flex items are evenly distributed with the first item at the start and the last item at the end. +- `space-around`: the flex items are evenly distributed with equal space around them. +- `space-evenly`: the flex items are evenly distributed with equal space between them. +- `baseline`: the flex items are aligned based on their baselines. +- `first baseline`: the flex items are aligned based on the first baseline of the container. +- `last baseline`: the flex items are aligned based on the last baseline of the container. +- `safe center`: the flex items are centered along the cross-axis, ensuring they remain within the safe area. +- `unsafe center`: the flex items are centered along the cross-axis, without considering the safe area. + +```python +from deephaven import ui + + +@ui.component +def ui_flex_justify(): + start = ui.flex( + ui.view(1, background_color="red", height="size-800", width="size-400"), + ui.view(2, background_color="green", height="size-800", width="size-800"), + ui.view(3, background_color="blue", height="size-800", width="size-200"), + justify_content="start", + ) + center = ui.flex( + ui.view(1, background_color="red", height="size-800", width="size-400"), + ui.view(2, background_color="green", height="size-800", width="size-800"), + ui.view(3, background_color="blue", height="size-800", width="size-200"), + justify_content="center", + ) + end = ui.flex( + ui.view(1, background_color="red", height="size-800", width="size-400"), + ui.view(2, background_color="green", height="size-800", width="size-800"), + ui.view(3, background_color="blue", height="size-800", width="size-200"), + justify_content="end", + ) + space_between = ui.flex( + ui.view(1, background_color="red", height="size-800", width="size-400"), + ui.view(2, background_color="green", height="size-800", width="size-800"), + ui.view(3, background_color="blue", height="size-800", width="size-200"), + justify_content="space-between", + ) + space_around = ui.flex( + ui.view(1, background_color="red", height="size-800", width="size-400"), + ui.view(2, background_color="green", height="size-800", width="size-800"), + ui.view(3, background_color="blue", height="size-800", width="size-200"), + justify_content="space-around", + ) + + return ui.flex( + 'justify_content="start"', + start, + 'justify_content="center"', + center, + 'justify_content="end"', + end, + 'justify_content="space-between"', + space_between, + 'justify_content="space-around"', + space_around, + direction="column", + ) + + +my_flex_justify = ui_flex_justify() ``` @@ -139,111 +223,70 @@ from deephaven import ui @ui.component -def flex(): +def ui_flex_align_vertical(): vertical = ui.flex( ui.flex( - ui.view(background_color="red", height="size-800", width="size-400"), - ui.view(background_color="green", height="size-800", width="size-800"), - ui.view(background_color="blue", height="size-800", width="size-200"), + ui.view(1, background_color="red", height="size-800", width="size-400"), + ui.view(2, background_color="green", height="size-800", width="size-800"), + ui.view(3, background_color="blue", height="size-800", width="size-200"), direction="column", align_items="start", ), ui.flex( - ui.view(background_color="red", height="size-800", width="size-400"), - ui.view(background_color="green", height="size-800", width="size-800"), - ui.view(background_color="blue", height="size-800", width="size-200"), + ui.view(1, background_color="red", height="size-800", width="size-400"), + ui.view(2, background_color="green", height="size-800", width="size-800"), + ui.view(3, background_color="blue", height="size-800", width="size-200"), direction="column", align_items="center", ), ui.flex( - ui.view(background_color="red", height="size-800", width="size-400"), - ui.view(background_color="green", height="size-800", width="size-800"), - ui.view(background_color="blue", height="size-800", width="size-200"), + ui.view(1, background_color="red", height="size-800", width="size-400"), + ui.view(2, background_color="green", height="size-800", width="size-800"), + ui.view(3, background_color="blue", height="size-800", width="size-200"), direction="column", align_items="end", ), ) - horizontal = ui.flex( - ui.flex( - ui.view(background_color="red", width="size-800", height="size-400"), - ui.view(background_color="green", width="size-800", height="size-800"), - ui.view(background_color="blue", width="size-800", height="size-200"), - align_items="start", - ), - ui.flex( - ui.view(background_color="red", width="size-800", height="size-400"), - ui.view(background_color="green", width="size-800", height="size-800"), - ui.view(background_color="blue", width="size-800", height="size-200"), - align_items="center", - ), - ui.flex( - ui.view(background_color="red", width="size-800", height="size-400"), - ui.view(background_color="green", width="size-800", height="size-800"), - ui.view(background_color="blue", width="size-800", height="size-200"), - align_items="end", - ), - direction="column", - ) - return ui.flex(vertical, horizontal) + return ui.flex(vertical) -my_flex = flex() +my_flex_align_vertical = ui_flex_align_vertical() ``` -## Justification - -The `justify_content` prop is used to align items along the main axis. When the direction is set to "column", it controls the vertical alignment, and when the direction is set to "row", it controls the horizontal alignment. - -Options: -- `stretch` (default): the flex items are stretched to fill the container along the cross-axis. -- `start`: the flex items are aligned at the start of the cross-axis. -- `end`: the flex items are aligned at the end of the cross-axis. -- `center`: the flex items are centered along the cross-axis. -- `left`: the flex items are packed toward the left edge of the container. -- `right`: the flex items are packed toward the right edge of the container. -- `space-between`: the flex items are evenly distributed with the first item at the start and the last item at the end. -- `space-around`: the flex items are evenly distributed with equal space around them. -- `space-evenly`: the flex items are evenly distributed with equal space between them. -- `baseline`: the flex items are aligned based on their baselines. -- `first baseline`: the flex items are aligned based on the first baseline of the container. -- `last baseline`: the flex items are aligned based on the last baseline of the container. -- `safe center`: the flex items are centered along the cross-axis, ensuring they remain within the safe area. -- `unsafe center`: the flex items are centered along the cross-axis, without considering the safe area. - ```python from deephaven import ui @ui.component -def flex(): - start = ui.flex( - ui.view(background_color="red", height="size-800", width="size-400"), - ui.view(background_color="green", height="size-800", width="size-800"), - ui.view(background_color="blue", height="size-800", width="size-200"), - justify_content="start", - width="500px", - ) - center = ui.flex( - ui.view(background_color="red", height="size-800", width="size-400"), - ui.view(background_color="green", height="size-800", width="size-800"), - ui.view(background_color="blue", height="size-800", width="size-200"), - justify_content="center", - width="500px", - ) - end = ui.flex( - ui.view(background_color="red", height="size-800", width="size-400"), - ui.view(background_color="green", height="size-800", width="size-800"), - ui.view(background_color="blue", height="size-800", width="size-200"), - justify_content="end", - width="500px", +def ui_flex_align_horizontal(): + horizontal = ui.flex( + ui.flex( + ui.view(1, background_color="red", height="size-800", width="size-400"), + ui.view(2, background_color="green", height="size-800", width="size-800"), + ui.view(3, background_color="blue", height="size-800", width="size-200"), + align_items="start", + ), + ui.flex( + ui.view(1, background_color="red", height="size-800", width="size-400"), + ui.view(2, background_color="green", height="size-800", width="size-800"), + ui.view(3, background_color="blue", height="size-800", width="size-200"), + align_items="center", + ), + ui.flex( + ui.view(1, background_color="red", height="size-800", width="size-400"), + ui.view(2, background_color="green", height="size-800", width="size-800"), + ui.view(3, background_color="blue", height="size-800", width="size-200"), + align_items="end", + ), + direction="column", ) - return ui.flex(start, center, end, direction="column") + return ui.flex(horizontal) -my_flex = flex() +my_flex_align_horizontal = ui_flex_align_horizontal() ```