From 1b7f605176ae5964e6a5ffaf2b0768ee29afbcde Mon Sep 17 00:00:00 2001 From: dsmmcken Date: Fri, 3 Jan 2025 15:17:58 -0500 Subject: [PATCH 1/3] docs: Expand sidebars by default for certain categories, add link to flexbox froggy --- plugins/plotly-express/docs/sidebar.json | 2 ++ plugins/ui/docs/components/flex.md | 14 ++++++++------ plugins/ui/docs/sidebar.json | 1 + 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/plugins/plotly-express/docs/sidebar.json b/plugins/plotly-express/docs/sidebar.json index 3278c9613..07b602781 100644 --- a/plugins/plotly-express/docs/sidebar.json +++ b/plugins/plotly-express/docs/sidebar.json @@ -16,6 +16,7 @@ }, { "label": "Plot Types", + "expanded": true, "items": [ { "label": "Area", @@ -117,6 +118,7 @@ }, { "label": "Concepts", + "expanded": true, "items": [ { "label": "Plot by", diff --git a/plugins/ui/docs/components/flex.md b/plugins/ui/docs/components/flex.md index e61099943..1a2342d4e 100644 --- a/plugins/ui/docs/components/flex.md +++ b/plugins/ui/docs/components/flex.md @@ -1,6 +1,10 @@ # Flex + 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. +> [!TIP] +> The `flex` component follows the same rules as a browser flexbox layout. A good game for understanding flexbox is [Flexbox Froggy](https://flexboxfroggy.com/). + ## Example ```python @@ -24,6 +28,7 @@ my_flex = ui_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. @@ -98,7 +103,6 @@ def ui_flex_nesting(): my_flex_nesting = ui_flex_nesting() ``` - ## Wrapping When enabled, items that overflow wrap into the next row. Resize your browser window to see the items reflow. @@ -124,12 +128,12 @@ def ui_flex_wrap(): 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. @@ -200,12 +204,12 @@ def ui_flex_justify(): my_flex_justify = ui_flex_justify() ``` - ## 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. @@ -254,7 +258,6 @@ def ui_flex_align_vertical(): my_flex_align_vertical = ui_flex_align_vertical() ``` - ```python from deephaven import ui @@ -289,9 +292,8 @@ def ui_flex_align_horizontal(): my_flex_align_horizontal = ui_flex_align_horizontal() ``` - ## API reference ```{eval-rst} .. dhautofunction:: deephaven.ui.flex -``` \ No newline at end of file +``` diff --git a/plugins/ui/docs/sidebar.json b/plugins/ui/docs/sidebar.json index 85cd16769..6e3966dc0 100644 --- a/plugins/ui/docs/sidebar.json +++ b/plugins/ui/docs/sidebar.json @@ -24,6 +24,7 @@ }, { "label": "Describing the UI", + "expanded": true, "items": [ { "label": "Your First Component", From 58a96c57c652d5ace19679e3f0cef90866d091f3 Mon Sep 17 00:00:00 2001 From: dsmmcken Date: Fri, 3 Jan 2025 15:24:33 -0500 Subject: [PATCH 2/3] feedback --- plugins/ui/docs/components/flex.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/ui/docs/components/flex.md b/plugins/ui/docs/components/flex.md index 1a2342d4e..0489c9309 100644 --- a/plugins/ui/docs/components/flex.md +++ b/plugins/ui/docs/components/flex.md @@ -3,7 +3,7 @@ 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. > [!TIP] -> The `flex` component follows the same rules as a browser flexbox layout. A good game for understanding flexbox is [Flexbox Froggy](https://flexboxfroggy.com/). +> The `flex` component follows the same rules as a browser CSS flexbox. The [CSS flexbox layout guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) from CSS-Tricks and the [Flexbox Froggy](https://flexboxfroggy.com/) game are great resources to learn more about flexbox. ## Example From ccb39b92c60cffc838dddad93255c089999e02be Mon Sep 17 00:00:00 2001 From: dsmmcken Date: Fri, 3 Jan 2025 15:34:12 -0500 Subject: [PATCH 3/3] rename sidebar key --- plugins/plotly-express/docs/sidebar.json | 4 ++-- plugins/ui/docs/sidebar.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/plugins/plotly-express/docs/sidebar.json b/plugins/plotly-express/docs/sidebar.json index 07b602781..a19f52bf9 100644 --- a/plugins/plotly-express/docs/sidebar.json +++ b/plugins/plotly-express/docs/sidebar.json @@ -16,7 +16,7 @@ }, { "label": "Plot Types", - "expanded": true, + "collapsible": false, "items": [ { "label": "Area", @@ -118,7 +118,7 @@ }, { "label": "Concepts", - "expanded": true, + "collapsible": false, "items": [ { "label": "Plot by", diff --git a/plugins/ui/docs/sidebar.json b/plugins/ui/docs/sidebar.json index 6e3966dc0..12219c51c 100644 --- a/plugins/ui/docs/sidebar.json +++ b/plugins/ui/docs/sidebar.json @@ -24,7 +24,7 @@ }, { "label": "Describing the UI", - "expanded": true, + "collapsible": false, "items": [ { "label": "Your First Component",