feat(menu): change popover position as designed

Author: anitavincent

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} />
+}

packages/components/src/menu/stories/menu.stories.tsx

@@ -1,5 +1,6 @@
 import '../../../dist/styles.min.css'
 import '../menu.css'
+import './style.css'
 import React from 'react'
 import {
   IconCaretDown,
@@ -26,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>
@@ -206,7 +211,7 @@ export function MoreActions() {
 
 export function CustomLabel() {
   return (
-    <Stack>
+    <Stack className="base-story">
       <MenuProvider>
         <MenuTrigger asChild>
           <Button variant="primary">
@@ -239,7 +244,7 @@ export function CustomLabel() {
 
 export function ItemVariants() {
   return (
-    <Stack>
+    <Stack className="base-story">
       <MenuProvider>
         <MenuTrigger asChild>
           <Button variant="primary">

packages/components/src/menu/stories/style.css

@@ -0,0 +1,3 @@
+.base-story {
+  padding: 2rem;
+}

packages/next-docs/next-env.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
+// / <reference types="next" />
+// / <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.