fix: update fallback placements as per PR suggestions

carbon-design-system · Jun 18, 2024 · 5337c8f · 5337c8f
1 parent 2c381cb
commit 5337c8f
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 47 deletions.
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.featureflag.stories.js b/packages/react/src/components/OverflowMenu/OverflowMenu.featureflag.stories.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import { action } from '@storybook/addon-actions';
 
 import { ArrowsVertical } from '@carbon/icons-react';
@@ -62,52 +62,24 @@ export const _OverflowMenu = () => {
   );
 };
 
-export const AutoAlign = (args) => {
-  const onClick = action('onClick (MenuItem)');
+export const AutoAlign = () => {
+  const ref = useRef();
 
-  return (
-    <>
-      <div
-        style={{
-          marginTop: '200px',
-          display: 'flex',
-          justifyContent: 'space-between',
-        }}>
-        <OverflowMenu {...args} autoAlign={true}>
-          <MenuItem label="Stop app" />
-          <MenuItem label="Restart app" />
-          <MenuItem label="Rename app" />
-          <MenuItem label="Edit routes and access" />
-          <MenuItemDivider />
-          <MenuItem label="Delete app" kind="danger" />
-        </OverflowMenu>
-
-        <OverflowMenu {...args} autoAlign={true} menuAlignment="bottom-end">
-          <MenuItem label="Stop app" />
-          <MenuItem label="Restart app" />
-          <MenuItem label="Rename app" />
-          <MenuItem label="Edit routes and access" />
-          <MenuItemDivider />
-          <MenuItem label="Delete app" kind="danger" />
-        </OverflowMenu>
-      </div>
+  useEffect(() => {
+    console.log(ref);
+    ref?.current?.scrollIntoView({ block: 'center', inline: 'center' });
+  });
 
+  return (
+    <div style={{ width: '5000px', height: '5000px' }}>
       <div
         style={{
-          display: 'flex',
-          marginTop: '15rem',
-          justifyContent: 'space-between',
-        }}>
-        <OverflowMenu {...args} autoAlign={true} menuAlignment="top-start">
-          <MenuItem label="Stop app" />
-          <MenuItem label="Restart app" />
-          <MenuItem label="Rename app" />
-          <MenuItem label="Edit routes and access" />
-          <MenuItemDivider />
-          <MenuItem label="Delete app" kind="danger" />
-        </OverflowMenu>
-
-        <OverflowMenu {...args} autoAlign={true} menuAlignment="top-end">
+          position: 'absolute',
+          top: '2500px',
+          left: '2500px',
+        }}
+        ref={ref}>
+        <OverflowMenu autoAlign={true}>
           <MenuItem label="Stop app" />
           <MenuItem label="Restart app" />
           <MenuItem label="Rename app" />
@@ -116,9 +88,7 @@ export const AutoAlign = (args) => {
           <MenuItem label="Delete app" kind="danger" />
         </OverflowMenu>
       </div>
-
-      <div style={{ width: 2000, height: 800 }}></div>
-    </>
+    </div>
   );
 };
 

diff --git a/packages/react/src/components/OverflowMenu/next/index.tsx b/packages/react/src/components/OverflowMenu/next/index.tsx
@@ -103,7 +103,17 @@ const OverflowMenu = React.forwardRef<HTMLDivElement, OverflowMenuProps>(
             strategy: 'fixed',
 
             // Middleware order matters, arrow should be last
-            middleware: [flip({ fallbackAxisSideDirection: 'start' })],
+            middleware: [
+              flip({
+                fallbackAxisSideDirection: 'start',
+                fallbackPlacements: [
+                  'top-start',
+                  'top-end',
+                  'bottom-start',
+                  'bottom-end',
+                ],
+              }),
+            ],
             whileElementsMounted: autoUpdate,
           }
         : {} // When autoAlign is turned off, floating-ui will not be used