feat(menu): change popover position as designed

vtex · Nov 29, 2023 · a15e8b9 · a15e8b9
1 parent c10e64c
commit a15e8b9
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 33 deletions.
diff --git a/packages/components/src/menu/menu-provider.tsx b/packages/components/src/menu/menu-provider.tsx
@@ -1,3 +1,9 @@
-import { MenuProvider } from '@ariakit/react'
+import type { MenuProviderProps } from '@ariakit/react'
+import { MenuProvider as Provider } from '@ariakit/react'
+import React from 'react'
 
-export { MenuProvider }
+export function MenuProvider(props: MenuProviderProps) {
+  const { placement = 'bottom-end', ...otherProps } = props
+
+  return <Provider placement={placement} {...otherProps} />
+}
diff --git a/packages/components/src/menu/stories/menu.stories.tsx b/packages/components/src/menu/stories/menu.stories.tsx
@@ -1,3 +1,6 @@
+import '../../../dist/styles.min.css'
+import '../menu.css'
+import './style.css'
 import React from 'react'
 import {
   IconCaretDown,
@@ -24,45 +27,49 @@ export default {
 
 export function Default() {
   return (
-    <MenuProvider>
-      <MenuTrigger>Open</MenuTrigger>
-      <Menu>
-        <MenuItem>New Tab</MenuItem>
-        <MenuItem>New Item</MenuItem>
-        <MenuSeparator />
-        <MenuItem>Downloads</MenuItem>
-      </Menu>
-    </MenuProvider>
+    <div className="base-story">
+      <MenuProvider>
+        <MenuTrigger>Open</MenuTrigger>
+        <Menu>
+          <MenuItem>New Tab</MenuItem>
+          <MenuItem>New Item</MenuItem>
+          <MenuSeparator />
+          <MenuItem>Downloads</MenuItem>
+        </Menu>
+      </MenuProvider>
+    </div>
   )
 }
 
 export function Composition() {
   return (
-    <MenuProvider>
-      <MenuTrigger asChild>
-        <Button>
-          Open <IconCaretDown />
-        </Button>
-      </MenuTrigger>
-      <Menu asChild>
-        <div style={{ border: '5px solid red' }}>
-          <MenuItem>New Tab</MenuItem>
-          <MenuItem>New Item</MenuItem>
-          <MenuSeparator />
-          <MenuItem asChild>
-            <a href="htpps://vtex.com" target="_blank" rel="noreferrer">
-              Downloads
-            </a>
-          </MenuItem>
-        </div>
-      </Menu>
-    </MenuProvider>
+    <div className="base-story">
+      <MenuProvider placement="bottom-end">
+        <MenuTrigger asChild>
+          <Button>
+            Open <IconCaretDown />
+          </Button>
+        </MenuTrigger>
+        <Menu asChild>
+          <div style={{ border: '5px solid red' }}>
+            <MenuItem>New Tab</MenuItem>
+            <MenuItem>New Item</MenuItem>
+            <MenuSeparator />
+            <MenuItem asChild>
+              <a href="htpps://vtex.com" target="_blank" rel="noreferrer">
+                Downloads
+              </a>
+            </MenuItem>
+          </div>
+        </Menu>
+      </MenuProvider>
+    </div>
   )
 }
 
 export function MoreActions() {
   return (
-    <Stack>
+    <Stack className="base-story">
       <Stack direction="row" space="5rem">
         <MenuProvider>
           <MenuTrigger asChild>
@@ -204,7 +211,7 @@ export function MoreActions() {
 
 export function CustomLabel() {
   return (
-    <Stack>
+    <Stack className="base-story">
       <MenuProvider>
         <MenuTrigger asChild>
           <Button variant="primary">
@@ -237,7 +244,7 @@ export function CustomLabel() {
 
 export function ItemVariants() {
   return (
-    <Stack>
+    <Stack className="base-story">
       <MenuProvider>
         <MenuTrigger asChild>
           <Button variant="primary">

diff --git a/packages/components/src/menu/stories/style.css b/packages/components/src/menu/stories/style.css
@@ -0,0 +1,3 @@
+.base-story {
+  padding: 2rem;
+}