From 1812e863a58f3604ad88f285f5a1fb8dbcebc7cf Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 12 Jan 2024 08:13:18 -0800
Subject: [PATCH] Update downstream API usages/references :facepalm:

---
 changelogs/upcoming/7455.md                               | 2 +-
 .../resizable_container/resizable_button_indicator.tsx    | 4 ++--
 .../resizable_container/resizable_container_example.js    | 8 ++++----
 src/components/flyout/flyout_resizable.tsx                | 2 +-
 .../resizable_container/resizable_button.stories.tsx      | 2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/changelogs/upcoming/7455.md b/changelogs/upcoming/7455.md
index 079c4d209b2..556da2a60c7 100644
--- a/changelogs/upcoming/7455.md
+++ b/changelogs/upcoming/7455.md
@@ -1 +1 @@
-- Updated `EuiResizableButton` with a new `showIndicator` prop, which allows replacing the default grab handle with a plain border
+- Updated `EuiResizableButton` to allow customizing the `indicator` style with either `handle` (default) or `border`
diff --git a/src-docs/src/views/resizable_container/resizable_button_indicator.tsx b/src-docs/src/views/resizable_container/resizable_button_indicator.tsx
index 2fc8cfa05ba..32a39e91530 100644
--- a/src-docs/src/views/resizable_container/resizable_button_indicator.tsx
+++ b/src-docs/src/views/resizable_container/resizable_button_indicator.tsx
@@ -18,7 +18,7 @@ export default () => (
           <EuiText>{text}</EuiText>
         </EuiResizablePanel>
 
-        <EuiResizableButton showIndicator={false} />
+        <EuiResizableButton indicator="border" />
 
         <EuiResizablePanel
           initialSize={50}
@@ -36,7 +36,7 @@ export default () => (
                   <EuiText>{text}</EuiText>
                 </EuiResizablePanel>
 
-                <EuiResizableButton showIndicator={false} />
+                <EuiResizableButton indicator="border" />
 
                 <EuiResizablePanel initialSize={50} minSize="50px" tabIndex={0}>
                   <EuiText>{text}</EuiText>
diff --git a/src-docs/src/views/resizable_container/resizable_container_example.js b/src-docs/src/views/resizable_container/resizable_container_example.js
index 5a0cb24ada5..f8469e0096e 100644
--- a/src-docs/src/views/resizable_container/resizable_container_example.js
+++ b/src-docs/src/views/resizable_container/resizable_container_example.js
@@ -521,9 +521,9 @@ export const ResizableContainerExample = {
             indicator as a UI hint. For use cases where the resize behavior is
             "nice to have" but not a primary UX focus, or where there are many
             other busy UI elements on the page, you can set{' '}
-            <EuiCode>{'showIndicator={false}'}</EuiCode> to display a subdued
-            border element instead, which only provides resize affordance on
-            hover or focus.
+            <EuiCode>indicator="border"</EuiCode> to display a subdued border
+            element instead, which only provides resize affordance on hover or
+            focus.
           </p>
         </>
       ),
@@ -532,7 +532,7 @@ export const ResizableContainerExample = {
       props: { EuiResizableButton },
       snippet: `<EuiResizableButton
   isHorizontal
-  showIndicator={false}
+  indicator="border"
 />`,
     },
     {
diff --git a/src/components/flyout/flyout_resizable.tsx b/src/components/flyout/flyout_resizable.tsx
index af55fe350b5..7005aafd69c 100644
--- a/src/components/flyout/flyout_resizable.tsx
+++ b/src/components/flyout/flyout_resizable.tsx
@@ -147,7 +147,7 @@ export const EuiFlyoutResizable = forwardRef(
       >
         <EuiResizableButton
           isHorizontal
-          showIndicator={false}
+          indicator="border"
           css={cssStyles}
           onMouseDown={onMouseDown}
           onTouchStart={onMouseDown}
diff --git a/src/components/resizable_container/resizable_button.stories.tsx b/src/components/resizable_container/resizable_button.stories.tsx
index c9c2ea87eec..511648a0cec 100644
--- a/src/components/resizable_container/resizable_button.stories.tsx
+++ b/src/components/resizable_container/resizable_button.stories.tsx
@@ -21,7 +21,7 @@ const meta: Meta<EuiResizableButtonProps> = {
   component: EuiResizableButton,
   args: {
     // Component defaults
-    showIndicator: true,
+    indicator: 'handle',
     alignIndicator: 'center',
     disabled: false,
     isHorizontal: false,