From 9f3dc57d4e63cc7f9ba5f20980172c16da528e2f Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 27 Dec 2023 12:02:19 -0800
Subject: [PATCH] Add docs example

---
 src-docs/src/views/flyout/flyout_example.js   | 46 ++++++++++
 .../src/views/flyout/flyout_resizable.tsx     | 89 +++++++++++++++++++
 2 files changed, 135 insertions(+)
 create mode 100644 src-docs/src/views/flyout/flyout_resizable.tsx

diff --git a/src-docs/src/views/flyout/flyout_example.js b/src-docs/src/views/flyout/flyout_example.js
index 5097bfb0c7b..fbe28aa1633 100644
--- a/src-docs/src/views/flyout/flyout_example.js
+++ b/src-docs/src/views/flyout/flyout_example.js
@@ -9,6 +9,7 @@ import {
   EuiFlyoutBody,
   EuiFlyoutHeader,
   EuiFlyoutFooter,
+  EuiFlyoutResizable,
   EuiCallOut,
   EuiLink,
 } from '../../../../src/components';
@@ -37,6 +38,9 @@ const flyoutWithBannerSource = require('!!raw-loader!./flyout_banner');
 import FlyoutPush from './flyout_push';
 const flyoutPushSource = require('!!raw-loader!./flyout_push');
 
+import FlyoutResizable from './flyout_resizable';
+const flyoutResizableSource = require('!!raw-loader!./flyout_resizable');
+
 const flyOutSnippet = `<EuiFlyout onClose={closeFlyout}>
   <EuiFlyoutHeader hasBorder aria-labelledby={flyoutHeadingId}>
     <EuiTitle>
@@ -144,6 +148,18 @@ const flyoutPushedSnippet = `<EuiFlyout type="push" onClose={closeFlyout}>
 </EuiFlyout>
 `;
 
+const flyoutResizableSnippet = `<EuiFlyoutResizable onClose={closeFlyout} maxWidth={1000} minWidth={300}>
+  <EuiFlyoutHeader hasBorder aria-labelledby={flyoutHeadingId}>
+    <EuiTitle>
+      <h2 id={flyoutHeadingId}>Flyout title</h2>
+    </EuiTitle>
+  </EuiFlyoutHeader>
+  <EuiFlyoutBody>
+    <!-- Flyout content -->
+  </EuiFlyoutBody>
+</EuiFlyout>
+`;
+
 export const FlyoutExample = {
   title: 'Flyout',
   sections: [
@@ -384,5 +400,35 @@ export const FlyoutExample = {
       demo: <FlyoutMaxWidth />,
       props: { EuiFlyout },
     },
+    {
+      title: 'Resizable flyouts',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: flyoutResizableSource,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            You can use <strong>EuiFlyoutResizable</strong> to render a flyout
+            that users can drag with their mouse or use arrow keys to resize.
+            This may be useful for scenarios where the space the user needs can
+            be unpredictable, if content is dynamic. Resizable flyouts allow
+            users to adjust content to better fit their individual screens and
+            workflows.
+          </p>
+          <p>
+            We strongly recommend setting reasonable numerical{' '}
+            <EuiCode>minWidth</EuiCode> and <EuiCode>maxWidth</EuiCode> props
+            based on the flyout content and page content that you <em>can</em>{' '}
+            predict.
+          </p>
+        </>
+      ),
+      snippet: flyoutResizableSnippet,
+      demo: <FlyoutResizable />,
+      props: { EuiFlyoutResizable },
+    },
   ],
 };
diff --git a/src-docs/src/views/flyout/flyout_resizable.tsx b/src-docs/src/views/flyout/flyout_resizable.tsx
new file mode 100644
index 00000000000..4969860ca89
--- /dev/null
+++ b/src-docs/src/views/flyout/flyout_resizable.tsx
@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+
+import {
+  EuiFlyoutResizable,
+  EuiFlyoutProps,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiButton,
+  EuiButtonGroup,
+  EuiText,
+  EuiTitle,
+  EuiSpacer,
+} from '../../../../src/components';
+
+import { useGeneratedHtmlId } from '../../../../src/services';
+
+export default () => {
+  const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
+  const [flyoutType, setFlyoutType] = useState('overlay');
+  const [flyoutSide, setFlyoutSide] = useState('right');
+
+  const flyoutTitleId = useGeneratedHtmlId({
+    prefix: 'simpleFlyoutTitle',
+  });
+
+  let flyout;
+
+  if (isFlyoutVisible) {
+    flyout = (
+      <EuiFlyoutResizable
+        type={flyoutType as EuiFlyoutProps['type']}
+        side={flyoutSide as EuiFlyoutProps['side']}
+        onClose={() => setIsFlyoutVisible(false)}
+        aria-labelledby={flyoutTitleId}
+      >
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle size="m">
+            <h2 id={flyoutTitleId}>A resizable flyout</h2>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody>
+          <EuiText>
+            <p>
+              This flyout is resizable by both mouse drag and arrow keys (when
+              the resizable edge is focused). Both push and overlay flyouts can
+              be resizable, on either side.
+            </p>
+          </EuiText>
+          <EuiSpacer />
+          <EuiTitle size="xxs">
+            <h3>Flyout type</h3>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+          <EuiButtonGroup
+            legend="Flyout type"
+            options={[
+              { id: 'overlay', label: 'Overlay' },
+              { id: 'push', label: 'Push' },
+            ]}
+            idSelected={flyoutType}
+            onChange={(id) => setFlyoutType(id)}
+          />
+          <EuiSpacer />
+          <EuiTitle size="xxs">
+            <h3>Flyout side</h3>
+          </EuiTitle>
+          <EuiButtonGroup
+            legend="Flyout side"
+            options={[
+              { id: 'right', label: 'Right' },
+              { id: 'left', label: 'Left' },
+            ]}
+            idSelected={flyoutSide}
+            onChange={(id) => setFlyoutSide(id)}
+          />
+        </EuiFlyoutBody>
+      </EuiFlyoutResizable>
+    );
+  }
+
+  return (
+    <>
+      <EuiButton onClick={() => setIsFlyoutVisible(true)}>
+        Show resizable flyout
+      </EuiButton>
+      {flyout}
+    </>
+  );
+};