Skip to content

Components: Add more prominent documentation around popover use #39709

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.

Sign up for GitHub

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

Merged
aaronrobertshaw merged 5 commits into from
Mar 28, 2022
Merged

Components: Add more prominent documentation around popover use #39709

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
dfe55a1
Add more prominent documentation around popover use
aaronrobertshaw Mar 24, 2022
a7e4676
Add note about tooltip position to BorderBoxControl docs
aaronrobertshaw Mar 24, 2022
f107a63
Fix links
aaronrobertshaw Mar 24, 2022
6b47fc8
Correct ToolTip to Tooltip
aaronrobertshaw Mar 25, 2022
5e56284
Highlight SlotFill provider is only needed when building outside editor
aaronrobertshaw Mar 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix links
  • Loading branch information
@aaronrobertshaw
aaronrobertshaw committed Mar 28, 2022
commit f107a6389b8cd44a2b1afc34c7ecf485453bf006
4 changes: 2 additions & 2 deletions packages/components/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,14 @@ In non-WordPress projects, link to the `build-style/style.css` file directly, it

### Popovers and Tooltips

By default, the [`Popover`](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/popover/README.md) component will render inline i.e. within its
By default, the [`Popover`](/packages/components/src/popover/README.md) component will render inline i.e. within its
parent to which it should anchor. Depending upon the context in which the
`Popover` is being consumed, this might lead to incorrect positioning. For
example, when being nested within another popover.

This issue can be solved by rendering popovers to a specific location in the DOM via the
`Popover.Slot`. For this to work, you will need your use of the `Popover`
component and its `Slot` to be wrapped in a [`SlotFill`](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/slot-fill/README.md) provider.
component and its `Slot` to be wrapped in a [`SlotFill`](/packages/components/src/slot-fill/README.md) provider.

A `Popover` is also used as the underlying mechanism to display `ToolTip` components.
So the same considerations should be applied to them.
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/border-box-control/border-box-control/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ const MyBorderBoxControl = () => {
};
```

To [ensure `ToolTip` positioning](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/README.md#popovers-and-tooltips)
To [ensure `ToolTip` positioning](/packages/components/README.md#popovers-and-tooltips)
for the `BorderBoxControl`'s color swatches, render your `BorderBoxControl` with
a `Popover.Slot` further up the element tree and within a
`SlotFillProvider` overall.
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/border-control/border-control/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const MyBorderControl = () => {
};
```

To [ensure `ToolTip` positioning](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/README.md#popovers-and-tooltips)
To [ensure `ToolTip` positioning](/packages/components/README.md#popovers-and-tooltips)
for the `BorderControl`'s color swatches, render your `BorderControl` with a
`Popover.Slot` further up the element tree and within a
`SlotFillProvider` overall.
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/color-palette/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,6 @@ const MyColorPalette = () => {
} );
```

To [ensure `ToolTip` positioning](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/README.md#popovers-and-tooltips)
To [ensure `ToolTip` positioning](/packages/components/README.md#popovers-and-tooltips)
when hovering the `ColorPalette`'s swatches, render your `ColorPalette` with a
`Popover.Slot` further up the element tree and within a `SlotFillProvider` overall.