[EuiResizableButton] Add new indicator style prop (#7455)

changelogs/upcoming/7455.md

@@ -0,0 +1 @@
+- Updated `EuiResizableButton` to allow customizing the `indicator` style with either `handle` (default) or `border`

src-docs/src/views/resizable_container/resizable_button_indicator.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { EuiText, EuiResizableContainer } from '../../../../src/components';
+import { faker } from '@faker-js/faker';
+
+const text = (
+  <>
+    <p>{faker.lorem.paragraphs()}</p>
+    <p>{faker.lorem.paragraphs()}</p>
+    <p>{faker.lorem.paragraphs()}</p>
+  </>
+);
+
+export default () => (
+  <EuiResizableContainer style={{ height: '300px' }}>
+    {(EuiResizablePanel, EuiResizableButton) => (
+      <>
+        <EuiResizablePanel initialSize={50} minSize="50px" tabIndex={0}>
+          <EuiText>{text}</EuiText>
+        </EuiResizablePanel>
+
+        <EuiResizableButton indicator="border" />
+
+        <EuiResizablePanel
+          initialSize={50}
+          minSize="50px"
+          tabIndex={0}
+          paddingSize="none"
+        >
+          <EuiResizableContainer
+            direction="vertical"
+            style={{ height: '100%', overflow: 'hidden' }}
+          >
+            {(EuiResizablePanel, EuiResizableButton) => (
+              <>
+                <EuiResizablePanel initialSize={50} minSize="50px" tabIndex={0}>
+                  <EuiText>{text}</EuiText>
+                </EuiResizablePanel>
+
+                <EuiResizableButton indicator="border" />
+
+                <EuiResizablePanel initialSize={50} minSize="50px" tabIndex={0}>
+                  <EuiText>{text}</EuiText>
+                </EuiResizablePanel>
+              </>
+            )}
+          </EuiResizableContainer>
+        </EuiResizablePanel>
+      </>
+    )}
+  </EuiResizableContainer>
+);

src-docs/src/views/resizable_container/resizable_container_example.js

@@ -29,6 +29,7 @@ import ResizablePanelCollapsible from './resizable_panel_collapsible';
 import ResizablePanelCollapsibleResponsive from './resizable_panel_collapsible_responsive';
 import ResizablePanelCollapsibleOpts from './resizable_panel_collapsible_options';
 import ResizablePanelCollapsibleExt from './resizable_panel_collapsible_external';
+import ResizableButtonIndicator from './resizable_button_indicator';
 import ResizableButton from './resizable_button';
 
 const ResizableContainerSource = require('!!raw-loader!./resizable_container_basic');
@@ -40,6 +41,7 @@ const ResizablePanelCollapsibleSource = require('!!raw-loader!./resizable_panel_
 const ResizablePanelCollapsibleResponsiveSource = require('!!raw-loader!./resizable_panel_collapsible_responsive');
 const ResizablePanelCollapsibleOptsSource = require('!!raw-loader!./resizable_panel_collapsible_options');
 const ResizablePanelCollapsibleExtSource = require('!!raw-loader!./resizable_panel_collapsible_external');
+const ResizableButtonIndicatorSource = require('!!raw-loader!./resizable_button_indicator');
 const ResizableButtonSource = require('!!raw-loader!./resizable_button');
 
 const basicSnippet = `<EuiResizableContainer>
@@ -504,14 +506,43 @@ export const ResizableContainerExample = {
       demo: <ResizablePanelCollapsibleExt />,
       snippet: collapsibleExtSnippet,
     },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.TSX,
+          code: ResizableButtonIndicatorSource,
+        },
+      ],
+      title: 'Resizable button indicator',
+      text: (
+        <>
+          <p>
+            By default, <strong>EuiResizableButton</strong> shows a grab handle
+            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>indicator="border"</EuiCode> to display a subdued border
+            element instead, which only provides resize affordance on hover or
+            focus.
+          </p>
+        </>
+      ),
+      demo: <ResizableButtonIndicator />,
+      demoPanelProps: { paddingSize: 'none' },
+      props: { EuiResizableButton },
+      snippet: `<EuiResizableButton
+  isHorizontal
+  indicator="border"
+/>`,
+    },
     {
       source: [
         {
           type: GuideSectionTypes.TSX,
           code: ResizableButtonSource,
         },
       ],
-      title: 'Custom resizable button',
+      title: 'Custom resize logic',
       text: (
         <>
           <p>

src/components/flyout/flyout_resizable.styles.ts

@@ -14,17 +14,21 @@ import { logicalCSS } from '../../global_styling';
 export const euiFlyoutResizableButtonStyles = ({ euiTheme }: UseEuiTheme) => ({
   euiFlyoutResizableButton: css`
     position: absolute;
-
-    /* Hide the default grab icon (although the hover/focus states should remain) */
-    &::before,
-    &::after {
-      background-color: transparent;
-    }
-  `,
-  left: css`
-    ${logicalCSS('right', `-${euiTheme.border.width.thin}`)}
-  `,
-  right: css`
-    ${logicalCSS('left', `-${euiTheme.border.width.thin}`)}
   `,
+  overlay: {
+    left: css`
+      ${logicalCSS('right', 0)}
+    `,
+    right: css`
+      ${logicalCSS('left', 0)}
+    `,
+  },
+  push: {
+    left: css`
+      ${logicalCSS('right', `-${euiTheme.border.width.thin}`)}
+    `,
+    right: css`
+      ${logicalCSS('left', `-${euiTheme.border.width.thin}`)}
+    `,
+  },
 });

src/components/flyout/flyout_resizable.tsx

@@ -34,14 +34,15 @@ export const EuiFlyoutResizable = forwardRef(
       maxWidth,
       minWidth = 200,
       side = 'right',
+      type = 'overlay',
       children,
       ...rest
     }: EuiFlyoutResizableProps,
     ref
   ) => {
     const euiTheme = useEuiTheme();
     const styles = euiFlyoutResizableButtonStyles(euiTheme);
-    const cssStyles = [styles.euiFlyoutResizableButton, styles[side]];
+    const cssStyles = [styles.euiFlyoutResizableButton, styles[type][side]];
 
     const getFlyoutMinMaxWidth = useCallback(
       (width: number) => {
@@ -141,10 +142,12 @@ export const EuiFlyoutResizable = forwardRef(
         size={flyoutWidth || size}
         maxWidth={maxWidth}
         side={side}
+        type={type}
         ref={setRefs}
       >
         <EuiResizableButton
           isHorizontal
+          indicator="border"
           css={cssStyles}
           onMouseDown={onMouseDown}
           onTouchStart={onMouseDown}

src/components/resizable_container/__snapshots__/resizable_button.test.tsx.snap

@@ -4,9 +4,20 @@ exports[`EuiResizableButton renders 1`] = `
 <div>
   <button
     aria-label="aria-label"
-    class="euiResizableButton testClass1 testClass2 emotion-euiResizableButton-vertical-center-euiTestCss"
+    class="euiResizableButton testClass1 testClass2 emotion-euiResizableButton-handle-vertical-vertical-center-euiTestCss"
     data-test-subj="test subject string"
     type="button"
   />
 </div>
 `;
+
+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"
+    data-test-subj="euiResizableButton"
+    type="button"
+  />
+</div>
+`;

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-horizontal-center"
+    class="euiResizableButton emotion-euiResizableButton-handle-horizontal-horizontal-center"
     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-horizontal-center"
+    class="euiResizableButton emotion-euiResizableButton-handle-horizontal-horizontal-center"
     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-vertical-center"
+    class="euiResizableButton emotion-euiResizableButton-handle-vertical-vertical-center"
     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-horizontal-center"
+    class="euiResizableButton emotion-euiResizableButton-handle-horizontal-horizontal-center"
     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-horizontal-center"
+    class="euiResizableButton emotion-euiResizableButton-handle-horizontal-horizontal-center"
     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-horizontal-center"
+    class="euiResizableButton emotion-euiResizableButton-handle-horizontal-horizontal-center"
     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-horizontal-center"
+    class="euiResizableButton emotion-euiResizableButton-handle-horizontal-horizontal-center"
     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-horizontal-center"
+    class="euiResizableButton emotion-euiResizableButton-handle-horizontal-horizontal-center"
     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-horizontal-center"
+    class="euiResizableButton emotion-euiResizableButton-handle-horizontal-horizontal-center"
     data-test-subj="euiResizableButton"
     id="resizable-button_generated-id"
     type="button"

src/components/resizable_container/resizable_button.stories.tsx

@@ -21,6 +21,7 @@ const meta: Meta<EuiResizableButtonProps> = {
   component: EuiResizableButton,
   args: {
     // Component defaults
+    indicator: 'handle',
     alignIndicator: 'center',
     disabled: false,
     isHorizontal: false,
@@ -32,8 +33,14 @@ type Story = StoryObj<EuiResizableButtonProps>;
 
 export const Playground: Story = {
   render: (args) => (
-    <EuiPanel style={{ blockSize: 200, inlineSize: 200 }}>
-      <EuiResizableButton {...args} />
+    <EuiPanel
+      style={{ blockSize: 200, inlineSize: 200, position: 'relative' }}
+      borderRadius="none"
+    >
+      <EuiResizableButton
+        style={{ position: 'absolute', top: 0, left: 0 }}
+        {...args}
+      />
     </EuiPanel>
   ),
 };