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
+56 −0
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
Highlight SlotFill provider is only needed when building outside editor
  • Loading branch information
@aaronrobertshaw
aaronrobertshaw committed Mar 28, 2022
commit 5e5628469c490ea5774806a0372fa4006a7472b3
4 changes: 3 additions & 1 deletion packages/components/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@ In non-WordPress projects, link to the `build-style/style.css` file directly, it

### Popovers and Tooltips

By default, the [`Popover`](/packages/components/src/popover/README.md) component will render inline i.e. within its
_If you're using [`Popover`](/packages/components/src/popover/README.md) or [`Tooltip`](/packages/components/src/tooltip/README.md) components outside of the editor, make sure they are rendered within a `SlotFillProvider` and with a `Popover.Slot` somewhere up the element tree._

By default, the `Popover` 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.
Expand Down
9 changes: 5 additions & 4 deletions 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,10 +60,11 @@ const MyBorderBoxControl = () => {
};
```

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.
If you're using this component outside the editor, you can
[ensure `Tooltip` positioning](/packages/components/README.md#popovers-and-tooltips)
for the `BorderBoxControl`'s color and style options, by rendering your
`BorderBoxControl` with a `Popover.Slot` further up the element tree and within
a `SlotFillProvider` overall.

## Props

Expand Down
7 changes: 4 additions & 3 deletions 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,9 +43,10 @@ const MyBorderControl = () => {
};
```

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
If you're using this component outside the editor, you can
[ensure `Tooltip` positioning](/packages/components/README.md#popovers-and-tooltips)
for the `BorderControl`'s color and style options, by rendering your
`BorderControl` with a `Popover.Slot` further up the element tree and within a
`SlotFillProvider` overall.

## Props
Expand Down
8 changes: 5 additions & 3 deletions 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,8 @@ const MyColorPalette = () => {
} );
```

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.
If you're using this component outside the editor, you can
[ensure `Tooltip` positioning](/packages/components/README.md#popovers-and-tooltips)
for the `ColorPalette`'s color swatches, by rendering your `ColorPalette` with a
`Popover.Slot` further up the element tree and within a
`SlotFillProvider` overall.