[EuiResizableButton] Add new prop to allow consumers to account for o…

…verlap with scrollbars (#8021)
elastic · Sep 17, 2024 · 301a9cd · 301a9cd
1 parent 53801cc
commit 301a9cd
Show file tree

Hide file tree

Showing 13 changed files with 60 additions and 28 deletions.
diff --git a/packages/eui/changelogs/upcoming/8021.md b/packages/eui/changelogs/upcoming/8021.md
@@ -0,0 +1 @@
+- Updated `EuiResizableButton` with a new `accountForScrollbars` prop
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -46,7 +46,7 @@ export default () => {
   ));
   return (
     <EuiPage paddingSize="none">
-      <EuiResizableContainer style={{ height: '320px' }}>
+      <EuiResizableContainer>
         {(EuiResizablePanel, EuiResizableButton) => (
           <>
             <EuiResizablePanel

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
@@ -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/...es/eui/src/components/resizable_container/__snapshots__/resizable_container.test.tsx.snap b/...es/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
@@ -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_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
@@ -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 (

diff --git 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>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		- Updated `EuiResizableButton` with a new `accountForScrollbars` prop