From 7a96330d8a25e09c9df7a8f82cba3decb7af1aa1 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 25 Mar 2022 12:06:57 +1000
Subject: [PATCH] Highlight SlotFill provider is only needed when building
 outside editor

---
 packages/components/README.md                            | 4 +++-
 .../src/border-box-control/border-box-control/README.md  | 9 +++++----
 .../src/border-control/border-control/README.md          | 7 ++++---
 packages/components/src/color-palette/README.md          | 8 +++++---
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/components/README.md b/packages/components/README.md
index 8980ca53cdea0..3a5b9c3a64298 100644
--- a/packages/components/README.md
+++ b/packages/components/README.md
@@ -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.
diff --git a/packages/components/src/border-box-control/border-box-control/README.md b/packages/components/src/border-box-control/border-box-control/README.md
index a8547e769e854..5f1783ec12f40 100644
--- a/packages/components/src/border-box-control/border-box-control/README.md
+++ b/packages/components/src/border-box-control/border-box-control/README.md
@@ -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
 
diff --git a/packages/components/src/border-control/border-control/README.md b/packages/components/src/border-control/border-control/README.md
index 64464e1335049..a4d0f2017f2d6 100644
--- a/packages/components/src/border-control/border-control/README.md
+++ b/packages/components/src/border-control/border-control/README.md
@@ -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
diff --git a/packages/components/src/color-palette/README.md b/packages/components/src/color-palette/README.md
index 9d4d80271541a..de195ca1fa395 100644
--- a/packages/components/src/color-palette/README.md
+++ b/packages/components/src/color-palette/README.md
@@ -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.