From 9daaa82ee0b96304aa280b827bcd4c2cf2dd8a14 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 12 Sep 2024 15:43:13 -0700
Subject: [PATCH 1/4] Add new `accountForScrollbars` prop

---
 .../resizable_button.styles.ts                  | 17 +++++++++++++++--
 .../resizable_container/resizable_button.tsx    | 10 ++++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/eui/src/components/resizable_container/resizable_button.styles.ts b/packages/eui/src/components/resizable_container/resizable_button.styles.ts
index a7436cc7554..17d172ef233 100644
--- a/packages/eui/src/components/resizable_container/resizable_button.styles.ts
+++ b/packages/eui/src/components/resizable_container/resizable_button.styles.ts
@@ -15,6 +15,7 @@ export const euiResizableButtonStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
 
   const buttonSize = euiTheme.size.base;
+  const negativeMargin = mathWithUnits(buttonSize, (x) => x / -2);
   const grabHandleWidth = euiTheme.size.m;
   const grabHandleHeight = euiTheme.border.width.thin;
 
@@ -77,15 +78,27 @@ export const euiResizableButtonStyles = (euiThemeContext: UseEuiTheme) => {
       cursor: col-resize;
       ${logicalCSS('height', '100%')}
       ${logicalCSS('width', buttonSize)}
-      margin-inline: ${mathWithUnits(buttonSize, (x) => x / -2)};
     `,
     vertical: css`
       flex-direction: column;
       cursor: row-resize;
       ${logicalCSS('width', '100%')}
       ${logicalCSS('height', buttonSize)}
-      margin-block: ${mathWithUnits(buttonSize, (x) => x / -2)};
     `,
+    accountForScrollbars: {
+      horizontal: {
+        both: css``,
+        before: css(logicalCSS('margin-right', negativeMargin)),
+        after: css(logicalCSS('margin-left', negativeMargin)),
+        none: css(logicalCSS('margin-horizontal', negativeMargin)),
+      },
+      vertical: {
+        both: css``,
+        before: css(logicalCSS('margin-bottom', negativeMargin)),
+        after: css(logicalCSS('margin-top', negativeMargin)),
+        none: css(logicalCSS('margin-vertical', negativeMargin)),
+      },
+    },
 
     border: css`
       &::before,
diff --git a/packages/eui/src/components/resizable_container/resizable_button.tsx b/packages/eui/src/components/resizable_container/resizable_button.tsx
index 11cdb0df2c0..b31bed58a13 100644
--- a/packages/eui/src/components/resizable_container/resizable_button.tsx
+++ b/packages/eui/src/components/resizable_container/resizable_button.tsx
@@ -47,6 +47,12 @@ export type EuiResizableButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
      * tall content that scrolls off-screen
      */
     alignIndicator?: 'center' | 'start' | 'end';
+    /**
+     * By default, EuiResizableButton will overlap into the panels before/after it.
+     * This can occasionally occlude interactive elements like scrollbars. To prevent
+     * this overlap, use this prop to remove the overlap for the specified side.
+     */
+    accountForScrollbars?: 'before' | 'after' | 'both';
     /**
      * When disabled, the resizer button will be completely hidden
      */
@@ -66,6 +72,7 @@ export const EuiResizableButton = forwardRef<
       isHorizontal,
       indicator = 'handle',
       alignIndicator = 'center',
+      accountForScrollbars,
       className,
       ...rest
     },
@@ -82,6 +89,9 @@ export const EuiResizableButton = forwardRef<
       styles[`${indicator}Direction`][resizeDirection],
       styles[resizeDirection],
       indicator === 'handle' && styles.alignIndicator[alignIndicator],
+      styles.accountForScrollbars[resizeDirection][
+        accountForScrollbars ?? 'none'
+      ],
     ];
 
     return (

From 74d7cee271079913657867146ddbed39f993c4d1 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 12 Sep 2024 15:51:06 -0700
Subject: [PATCH 2/4] Update snapshots + stories

---
 .../resizable_button.test.tsx.snap             |  4 ++--
 .../resizable_container.test.tsx.snap          | 18 +++++++++---------
 .../resizable_button.stories.tsx               |  5 +++++
 .../resizable_container.stories.tsx            | 14 +++++++-------
 4 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/packages/eui/src/components/resizable_container/__snapshots__/resizable_button.test.tsx.snap b/packages/eui/src/components/resizable_container/__snapshots__/resizable_button.test.tsx.snap
index a6747ad44f6..0e1ee7cd51f 100644
--- a/packages/eui/src/components/resizable_container/__snapshots__/resizable_button.test.tsx.snap
+++ b/packages/eui/src/components/resizable_container/__snapshots__/resizable_button.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`EuiResizableButton renders 1`] = `
 <div>
   <button
     aria-label="aria-label"
-    class="euiResizableButton testClass1 testClass2 emotion-euiResizableButton-handle-vertical-vertical-center-euiTestCss"
+    class="euiResizableButton testClass1 testClass2 emotion-euiResizableButton-handle-vertical-vertical-center-none-euiTestCss"
     data-test-subj="test subject string"
     type="button"
   />
@@ -15,7 +15,7 @@ exports[`EuiResizableButton renders different indicator styles and directions 1`
 <div>
   <button
     aria-label="Press the left or right arrow keys to adjust panels size"
-    class="euiResizableButton emotion-euiResizableButton-border-horizontal-horizontal"
+    class="euiResizableButton emotion-euiResizableButton-border-horizontal-horizontal-none"
     data-test-subj="euiResizableButton"
     type="button"
   />
diff --git a/packages/eui/src/components/resizable_container/__snapshots__/resizable_container.test.tsx.snap b/packages/eui/src/components/resizable_container/__snapshots__/resizable_container.test.tsx.snap
index 65820a3e682..086f49a2368 100644
--- a/packages/eui/src/components/resizable_container/__snapshots__/resizable_container.test.tsx.snap
+++ b/packages/eui/src/components/resizable_container/__snapshots__/resizable_container.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`EuiResizableContainer can adjust panel props 1`] = `
   </div>
   <button
     aria-label="Press the left or right arrow keys to adjust panels size"
-    class="euiResizableButton emotion-euiResizableButton-handle-horizontal-horizontal-center"
+    class="euiResizableButton emotion-euiResizableButton-handle-horizontal-horizontal-center-none"
     data-test-subj="euiResizableButton"
     id="resizable-button_generated-id"
     type="button"
@@ -60,7 +60,7 @@ exports[`EuiResizableContainer can be controlled externally 1`] = `
   </div>
   <button
     aria-label="Press the left or right arrow keys to adjust panels size"
-    class="euiResizableButton emotion-euiResizableButton-handle-horizontal-horizontal-center"
+    class="euiResizableButton emotion-euiResizableButton-handle-horizontal-horizontal-center-none"
     data-test-subj="euiResizableButton"
     id="resizable-button_generated-id"
     type="button"
@@ -100,7 +100,7 @@ exports[`EuiResizableContainer can be vertical 1`] = `
   </div>
   <button
     aria-label="Press the up or down arrow keys to adjust panels size"
-    class="euiResizableButton emotion-euiResizableButton-handle-vertical-vertical-center"
+    class="euiResizableButton emotion-euiResizableButton-handle-vertical-vertical-center-none"
     data-test-subj="euiResizableButton"
     id="resizable-button_generated-id"
     type="button"
@@ -140,7 +140,7 @@ exports[`EuiResizableContainer can have more than two panels 1`] = `
   </div>
   <button
     aria-label="Press the left or right arrow keys to adjust panels size"
-    class="euiResizableButton emotion-euiResizableButton-handle-horizontal-horizontal-center"
+    class="euiResizableButton emotion-euiResizableButton-handle-horizontal-horizontal-center-none"
     data-test-subj="euiResizableButton"
     id="resizable-button_generated-id"
     type="button"
@@ -159,7 +159,7 @@ exports[`EuiResizableContainer can have more than two panels 1`] = `
   </div>
   <button
     aria-label="Press the left or right arrow keys to adjust panels size"
-    class="euiResizableButton emotion-euiResizableButton-handle-horizontal-horizontal-center"
+    class="euiResizableButton emotion-euiResizableButton-handle-horizontal-horizontal-center-none"
     data-test-subj="euiResizableButton"
     id="resizable-button_generated-id"
     type="button"
@@ -199,7 +199,7 @@ exports[`EuiResizableContainer can have scrollable panels 1`] = `
   </div>
   <button
     aria-label="Press the left or right arrow keys to adjust panels size"
-    class="euiResizableButton emotion-euiResizableButton-handle-horizontal-horizontal-center"
+    class="euiResizableButton emotion-euiResizableButton-handle-horizontal-horizontal-center-none"
     data-test-subj="euiResizableButton"
     id="resizable-button_generated-id"
     type="button"
@@ -251,7 +251,7 @@ exports[`EuiResizableContainer can have toggleable panels 1`] = `
   </div>
   <button
     aria-label="Press the left or right arrow keys to adjust panels size"
-    class="euiResizableButton emotion-euiResizableButton-handle-horizontal-horizontal-center"
+    class="euiResizableButton emotion-euiResizableButton-handle-horizontal-horizontal-center-none"
     data-test-subj="euiResizableButton"
     id="resizable-button_generated-id"
     type="button"
@@ -291,7 +291,7 @@ exports[`EuiResizableContainer is rendered 1`] = `
   </div>
   <button
     aria-label="Press the left or right arrow keys to adjust panels size"
-    class="euiResizableButton emotion-euiResizableButton-handle-horizontal-horizontal-center"
+    class="euiResizableButton emotion-euiResizableButton-handle-horizontal-horizontal-center-none"
     data-test-subj="euiResizableButton"
     id="resizable-button_generated-id"
     type="button"
@@ -344,7 +344,7 @@ exports[`EuiResizableContainer toggleable panels can be configurable 1`] = `
   </div>
   <button
     aria-label="Press the left or right arrow keys to adjust panels size"
-    class="euiResizableButton emotion-euiResizableButton-handle-horizontal-horizontal-center"
+    class="euiResizableButton emotion-euiResizableButton-handle-horizontal-horizontal-center-none"
     data-test-subj="euiResizableButton"
     id="resizable-button_generated-id"
     type="button"
diff --git a/packages/eui/src/components/resizable_container/resizable_button.stories.tsx b/packages/eui/src/components/resizable_container/resizable_button.stories.tsx
index c633375bc32..04e3597d0a3 100644
--- a/packages/eui/src/components/resizable_container/resizable_button.stories.tsx
+++ b/packages/eui/src/components/resizable_container/resizable_button.stories.tsx
@@ -19,6 +19,11 @@ import {
 const meta: Meta<EuiResizableButtonProps> = {
   title: 'Layout/EuiResizableContainer/Subcomponents/EuiResizableButton',
   component: EuiResizableButton,
+  argTypes: {
+    accountForScrollbars: {
+      options: [undefined, 'both', 'before', 'after'],
+    },
+  },
   args: {
     // Component defaults
     indicator: 'handle',
diff --git a/packages/eui/src/components/resizable_container/resizable_container.stories.tsx b/packages/eui/src/components/resizable_container/resizable_container.stories.tsx
index 491fd88c187..3c00c9fccf8 100644
--- a/packages/eui/src/components/resizable_container/resizable_container.stories.tsx
+++ b/packages/eui/src/components/resizable_container/resizable_container.stories.tsx
@@ -36,7 +36,7 @@ const TwoColumns: EuiResizableContainerProps['children'] = (
       <EuiText>{placeholderText}</EuiText>
     </EuiResizablePanel>
 
-    <EuiResizableButton />
+    <EuiResizableButton accountForScrollbars="both" />
 
     <EuiResizablePanel initialSize={50} tabIndex={0}>
       <EuiText>{placeholderText}</EuiText>
@@ -53,13 +53,13 @@ const ThreeColumns: EuiResizableContainerProps['children'] = (
       <EuiText>{placeholderText}</EuiText>
     </EuiResizablePanel>
 
-    <EuiResizableButton />
+    <EuiResizableButton accountForScrollbars="both" />
 
     <EuiResizablePanel initialSize={40} tabIndex={0}>
       <EuiText>{placeholderText}</EuiText>
     </EuiResizablePanel>
 
-    <EuiResizableButton />
+    <EuiResizableButton accountForScrollbars="both" />
 
     <EuiResizablePanel initialSize={20} tabIndex={0}>
       <EuiText>{placeholderText}</EuiText>
@@ -80,7 +80,7 @@ const WithMinSize: EuiResizableContainerProps['children'] = (
       </EuiText>
     </EuiResizablePanel>
 
-    <EuiResizableButton alignIndicator="center" />
+    <EuiResizableButton accountForScrollbars="both" />
 
     <EuiResizablePanel initialSize={50} minSize="200px" tabIndex={0}>
       <EuiText>
@@ -105,7 +105,7 @@ const SingleCollapsible: EuiResizableContainerProps['children'] = (
       </EuiText>
     </EuiResizablePanel>
 
-    <EuiResizableButton alignIndicator="center" />
+    <EuiResizableButton accountForScrollbars="both" />
 
     <EuiResizablePanel initialSize={70} mode="main">
       <EuiText>
@@ -130,7 +130,7 @@ const MultiCollapsible: EuiResizableContainerProps['children'] = (
       </EuiText>
     </EuiResizablePanel>
 
-    <EuiResizableButton />
+    <EuiResizableButton accountForScrollbars="both" />
 
     <EuiResizablePanel initialSize={60} mode="main">
       <EuiText>
@@ -140,7 +140,7 @@ const MultiCollapsible: EuiResizableContainerProps['children'] = (
       </EuiText>
     </EuiResizablePanel>
 
-    <EuiResizableButton />
+    <EuiResizableButton accountForScrollbars="both" />
 
     <EuiResizablePanel initialSize={20} mode="collapsible">
       <EuiText>

From 772c0aa397ebef9c718f3e57a39dae5eccbf90d0 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 12 Sep 2024 15:51:34 -0700
Subject: [PATCH 3/4] Update all src-docs examples with scrolling text

---
 .../resizable_container/resizable_button_indicator.tsx   | 9 ++++++---
 .../resizable_container/resizable_container_basic.tsx    | 2 +-
 .../resizable_container_callbacks.tsx                    | 2 +-
 .../resizable_container_reset_values.tsx                 | 2 +-
 .../resizable_container/resizable_container_vertical.tsx | 2 +-
 .../resizable_panel_collapsible_options.tsx              | 2 +-
 6 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/eui/src-docs/src/views/resizable_container/resizable_button_indicator.tsx b/packages/eui/src-docs/src/views/resizable_container/resizable_button_indicator.tsx
index 32a39e91530..313471bc90d 100644
--- a/packages/eui/src-docs/src/views/resizable_container/resizable_button_indicator.tsx
+++ b/packages/eui/src-docs/src/views/resizable_container/resizable_button_indicator.tsx
@@ -18,7 +18,7 @@ export default () => (
           <EuiText>{text}</EuiText>
         </EuiResizablePanel>
 
-        <EuiResizableButton indicator="border" />
+        <EuiResizableButton indicator="border" accountForScrollbars="before" />
 
         <EuiResizablePanel
           initialSize={50}
@@ -33,10 +33,13 @@ export default () => (
             {(EuiResizablePanel, EuiResizableButton) => (
               <>
                 <EuiResizablePanel initialSize={50} minSize="50px" tabIndex={0}>
-                  <EuiText>{text}</EuiText>
+                  <EuiText style={{ width: '110%' }}>{text}</EuiText>
                 </EuiResizablePanel>
 
-                <EuiResizableButton indicator="border" />
+                <EuiResizableButton
+                  indicator="border"
+                  accountForScrollbars="both"
+                />
 
                 <EuiResizablePanel initialSize={50} minSize="50px" tabIndex={0}>
                   <EuiText>{text}</EuiText>
diff --git a/packages/eui/src-docs/src/views/resizable_container/resizable_container_basic.tsx b/packages/eui/src-docs/src/views/resizable_container/resizable_container_basic.tsx
index c70d8ba54d8..100150209c6 100644
--- a/packages/eui/src-docs/src/views/resizable_container/resizable_container_basic.tsx
+++ b/packages/eui/src-docs/src/views/resizable_container/resizable_container_basic.tsx
@@ -21,7 +21,7 @@ export default () => (
           </EuiText>
         </EuiResizablePanel>
 
-        <EuiResizableButton />
+        <EuiResizableButton accountForScrollbars="before" />
 
         <EuiResizablePanel initialSize={50} minSize="200px" tabIndex={0}>
           <EuiText>{text}</EuiText>
diff --git a/packages/eui/src-docs/src/views/resizable_container/resizable_container_callbacks.tsx b/packages/eui/src-docs/src/views/resizable_container/resizable_container_callbacks.tsx
index aec980b2ad1..9b3af0ecf0a 100644
--- a/packages/eui/src-docs/src/views/resizable_container/resizable_container_callbacks.tsx
+++ b/packages/eui/src-docs/src/views/resizable_container/resizable_container_callbacks.tsx
@@ -86,7 +86,7 @@ export default () => {
                 </EuiText>
               </EuiResizablePanel>
 
-              <EuiResizableButton />
+              <EuiResizableButton accountForScrollbars="before" />
 
               <EuiResizablePanel
                 id={secondPanelId}
diff --git a/packages/eui/src-docs/src/views/resizable_container/resizable_container_reset_values.tsx b/packages/eui/src-docs/src/views/resizable_container/resizable_container_reset_values.tsx
index 824a19e82bc..db3a42c7de4 100644
--- a/packages/eui/src-docs/src/views/resizable_container/resizable_container_reset_values.tsx
+++ b/packages/eui/src-docs/src/views/resizable_container/resizable_container_reset_values.tsx
@@ -100,7 +100,7 @@ export default () => {
               </EuiText>
             </EuiResizablePanel>
 
-            <EuiResizableButton />
+            <EuiResizableButton accountForScrollbars="before" />
 
             <EuiResizablePanel
               id={secondPanelId}
diff --git a/packages/eui/src-docs/src/views/resizable_container/resizable_container_vertical.tsx b/packages/eui/src-docs/src/views/resizable_container/resizable_container_vertical.tsx
index 1efa8567291..ddf221ff8bc 100644
--- a/packages/eui/src-docs/src/views/resizable_container/resizable_container_vertical.tsx
+++ b/packages/eui/src-docs/src/views/resizable_container/resizable_container_vertical.tsx
@@ -19,7 +19,7 @@ export default () => (
           </EuiText>
         </EuiResizablePanel>
 
-        <EuiResizableButton />
+        <EuiResizableButton accountForScrollbars="both" />
 
         <EuiResizablePanel initialSize={40} minSize="10%" tabIndex={0}>
           <EuiText>
diff --git a/packages/eui/src-docs/src/views/resizable_container/resizable_panel_collapsible_options.tsx b/packages/eui/src-docs/src/views/resizable_container/resizable_panel_collapsible_options.tsx
index 5af61828b33..9beb8d419c8 100644
--- a/packages/eui/src-docs/src/views/resizable_container/resizable_panel_collapsible_options.tsx
+++ b/packages/eui/src-docs/src/views/resizable_container/resizable_panel_collapsible_options.tsx
@@ -46,7 +46,7 @@ export default () => {
   ));
   return (
     <EuiPage paddingSize="none">
-      <EuiResizableContainer style={{ height: '320px' }}>
+      <EuiResizableContainer>
         {(EuiResizablePanel, EuiResizableButton) => (
           <>
             <EuiResizablePanel

From 2b3d5e9d0909b130ccc56e0ac78a074f72c4abd6 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 12 Sep 2024 16:02:19 -0700
Subject: [PATCH 4/4] changelog

---
 packages/eui/changelogs/upcoming/8021.md | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 packages/eui/changelogs/upcoming/8021.md

diff --git a/packages/eui/changelogs/upcoming/8021.md b/packages/eui/changelogs/upcoming/8021.md
new file mode 100644
index 00000000000..ec80e0747e5
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/8021.md
@@ -0,0 +1 @@
+- Updated `EuiResizableButton` with a new `accountForScrollbars` prop