Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
Co-authored-by: margaretkennedy <[email protected]>
  • Loading branch information
dgodinez-dh and margaretkennedy authored Oct 25, 2024
1 parent b0e8ea4 commit bb4f1ea
Show file tree
Hide file tree
Showing 3 changed files with 8 additions and 8 deletions.
2 changes: 1 addition & 1 deletion plugins/ui/docs/components/dialog.md
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ my_print_example = print_example()

### Dismissable dialogs

Dismissable dialogs support an optional `on_dismiss` prop which is triggered whenever the dialog's close button is clicked. Similar to non-dismissable dialogs, you must chain the close function with whatever callback you provide as onDismiss. If this event callback is not needed, the dismissiable dialog will behave as normal without passing this callback through.
Dismissable dialogs support an optional `on_dismiss` prop that is triggered whenever the dialog's close button is clicked. Like non-dismissable dialogs, you must chain the close function with whatever callback you provide as `onDismiss`. If this event callback is not needed, the dismissable dialog will behave normally without passing this callback through.

```python
from deephaven import ui
Expand Down
12 changes: 6 additions & 6 deletions plugins/ui/docs/components/dialog_trigger.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ my_dialog_trigger_example = ui.dialog_trigger(

The `dialog_trigger` accepts exactly two children: the element which triggers opening of the `dialog` and the `dialog` itself. The trigger must be the first child passed into the `dialog_trigger` and should be an element that supports press events.

If your `dialog` has buttons within it that should close the Dialog when pressed, you must use controlled mode in order to propagate the close function to the dialog's children. Dialogs that do not contain such interactive elements can simply provide the `dialog` component as is to the `dialog_trigger` as its second child.
If your `dialog` has buttons within it that should close the dialog when pressed, you must use controlled mode to propagate the close function to the dialog's children. Dialogs that do not contain such interactive elements can provide the `dialog` component as is to the `dialog_trigger` as its second child.

The example below demonstrates how to pass the close function to the dialog's buttons.

Expand Down Expand Up @@ -58,7 +58,7 @@ By providing a `type` prop, you can specify the type of `dialog` that is rendere

### Modal

Modal dialogs create an underlay that blocks access to the underlying user interface until the dialog is closed. Sizing options can be found on the `dialog` page. Focus is trapped inside the Modal as per the accessibility guidelines laid out by W3C.
Modal dialogs create an underlay that blocks access to the underlying user interface until the dialog is closed. Sizing options can be found on the `dialog` page. Focus is trapped inside the modal as per the accessibility guidelines laid out by W3C.

```python
from deephaven import ui
Expand Down Expand Up @@ -252,7 +252,7 @@ my_placement = ui.dialog_trigger(

### Offset and cross offset

The popover dialog's offset can be adjusted using the `offset` and `cross_offset` props. The `offset` prop controls the spacing applied along the main axis between the element and its anchor element whereas the `cross_offset` prop handles the spacing applied along the cross axis.
The popover dialog's offset can be adjusted using the `offset` and `cross_offset` props. The `offset` prop controls the spacing applied along the main axis between the element and its anchor element, whereas the `cross_offset` prop handles the spacing applied along the cross axis.

Below is a popover offset by an additional 50px above the trigger.

Expand Down Expand Up @@ -311,7 +311,7 @@ my_should_flip_example = ui.dialog_trigger(

You can control the minimum padding required between the popover dialog and the surrounding container via the `container_padding` prop. This affects the positioning breakpoints that determine when the dialog will attempt to flip.

The example below will flip the dialog from above the trigger button to below the trigger button if the Dialog cannot render fully while maintaining 50px of padding between itself and the top of the browser.
The example below will flip the dialog from above the trigger button to below the trigger button if the dialog cannot render fully while maintaining 50px of padding between itself and the top of the browser.

```python
from deephaven import ui
Expand All @@ -330,9 +330,9 @@ my_should_flip_example = ui.dialog_trigger(

## Events

Dialog trigger accepts an `on_open_change` handler which is triggered whenever the Dialog is opened or closed.
Dialog triggers accept an `on_open_change` handler that is triggered whenever the dialog is opened or closed. The example below updates a separate element with the dialog's current open state.


The example below uses `on_open_change` to update a separate element with the current open state of the Dialog.

```python
from deephaven import ui
Expand Down
2 changes: 1 addition & 1 deletion plugins/ui/docs/hooks/use_flag.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# use_flag

`use_flag` is a hook used to add a boolean flag to your component. Since it is a hook, it must be used at the top level of your component. It returns a tuple with exactly three items: the current flag value, a function to set the flag to `True`, and a function to set the flag to `False` . Updating state will cause the component to re-render (running the function again). This is a convenience hook for when you only need functions to set a flag to `True` or `False`. For more complex state management, use `use_state`.
`use_flag` is a hook that adds a boolean flag to your component. Since it is a hook, it must be used at the top level of your component. It returns a tuple with exactly three items: the current flag value, a function to set the flag to `True`, and a function to set the flag to `False` . Updating state will cause the component to re-render (running the function again). This is a convenience hook for when you only need functions to set a flag to `True` or `False`. For more complex state management, use `use_state`.

## Example

Expand Down

0 comments on commit bb4f1ea

Please sign in to comment.