Use theme spaces for DropdownMenu gutter

docs/pages/components/dropdown-menu.mdx

@@ -35,7 +35,7 @@ function() {
       <DropdownMenu.Trigger store={dropdownMenu} as={Button}>
         Dropdown Menu
       </DropdownMenu.Trigger>
-      <DropdownMenu store={dropdownMenu} aria-label="Example">
+      <DropdownMenu store={dropdownMenu} aria-label="Example" gutter="md">
         <DropdownMenu.Item store={dropdownMenu} onClick={handleClick}>
           Twitter
         </DropdownMenu.Item>

packages/DropdownMenu/package.json

@@ -48,6 +48,7 @@
   "dependencies": {
     "@ariakit/react": "0.2.17",
     "@welcome-ui/box": "^5.0.0",
+    "@welcome-ui/core": "^5.0.0",
     "@welcome-ui/system": "^5.0.0",
     "@welcome-ui/utils": "^5.0.0"
   },

packages/DropdownMenu/src/index.tsx

@@ -1,31 +1,47 @@
 import React from 'react'
 import * as Ariakit from '@ariakit/react'
 import { CreateWuiProps, forwardRef, WuiProps } from '@welcome-ui/system'
+import { useTheme } from '@xstyled/styled-components'
+import type { WuiTheme } from '@welcome-ui/core'
 
 import { Arrow } from './Arrow'
 import { Item } from './Item'
 import { Separator } from './Separator'
 import * as S from './styles'
 
-export interface DropdownMenuOptions extends Ariakit.MenuProps {
+export interface DropdownMenuOptions extends Omit<Ariakit.MenuProps, 'gutter'> {
   /** add custom props from styled system on DropdownMenu inner */
   innerProps?: WuiProps
+  /** default 4px (space.xs) */
+  gutter?: keyof WuiTheme['space'] | number
 }
 
 export type DropdownMenuProps = CreateWuiProps<'div', DropdownMenuOptions>
 
 const DropdownMenuComponent = forwardRef<'div', DropdownMenuProps>(
-  ({ children, dataTestId, innerProps = {}, store, gutter = 10, ...rest }, ref) => {
+  ({ children, dataTestId, innerProps = {}, store, gutter = 'xs', ...rest }, ref) => {
+    const theme = useTheme()
     const arrowElement = store.useState('arrowElement')
     const isOpen = store.useState('open')
 
+    let parsedGutter = gutter
+    if (typeof parsedGutter === 'string') {
+      // The value from the theme is in rem, e.g: 1.5rem
+      // So we parse it to float and pass it to theme.toPx that will convert it to px, e.g: 24px
+      // Since we want a number we parse it to int
+      parsedGutter = parseInt(theme.toPx(parseFloat(theme.space[gutter])), 10) || 0
+    }
+    if (arrowElement) {
+      parsedGutter = 0
+    }
+
     return (
       isOpen && (
         <Ariakit.Menu
           alwaysVisible
           aria-label="dropdown-menu"
           data-testid={dataTestId}
-          gutter={arrowElement ? 0 : gutter}
+          gutter={parsedGutter}
           ref={ref}
           render={<S.Inner {...innerProps} />}
           store={store}

packages/DropdownMenu/tests/index.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { renderHook } from '@testing-library/react-hooks'
+import userEvent from '@testing-library/user-event'
 
 import { render } from '../../../utils/tests'
 import { DropdownMenu, useDropdownMenu } from '../src'
@@ -22,4 +23,37 @@ describe('<DropdownMenu>', () => {
 
     expect(dropdown).toHaveTextContent(content)
   })
+
+  test.each([
+    ['md', 12],
+    ['xxl', 32],
+    [10, 10],
+    ['not a space', 0],
+  ] as const)('should render the gutter correctly - %s (%i)', async (gutter, expected) => {
+    const triggerDataTestId = 'trigger'
+    const dropdownDataTestId = 'menu'
+    const {
+      result: { current: dropdownMenu },
+    } = renderHook(() => useDropdownMenu({ open: true }))
+
+    const { getByTestId } = render(
+      <>
+        <DropdownMenu.Trigger data-testId={triggerDataTestId} store={dropdownMenu} />
+        <DropdownMenu dataTestId={dropdownDataTestId} gutter={gutter} store={dropdownMenu}>
+          {content}
+        </DropdownMenu>
+      </>
+    )
+    const trigger = getByTestId(triggerDataTestId)
+    const dropdown = getByTestId(dropdownDataTestId)
+
+    await userEvent.click(trigger)
+
+    const { transform } = getComputedStyle(dropdown.parentElement)
+    const y = parseInt(
+      transform.match(/translate3d\(\d*(?:px)?,(\d*)(?:px)?,\d*(?:px)?\)/)?.[1],
+      10
+    )
+    expect(y).toBe(expected)
+  })
 })