[Menu] Extra padding when included as child of <Stack>

Describe the bug A clear and concise description of what the bug is.

The <Menu> component renders two children, one for the menu button, and another for the menu itself. This means that when <Menu> is a child of <Stack>, the menu will be offset incorrectly.

Should <Menu> render a <Box> around the children? Like this:

This is the fixed code (notice how I manually wrap the <Menu> in a <Box>):

    <Stack
      direction='row'
      align='center'
      width='full'
      {...rest}
    >
      <Box>
        <Menu>
          <MenuButton size='sm'><MdMoreHorizIcon boxSize={5} /></MenuButton>
          <MenuList>
            <ReportButton as={MenuItem} game={game}>
              <MdReportProblemIcon mr={2} />
              Report
            </ReportButton>
          </MenuList>
        </Menu>
      </Box>
  </Stack>

Expected Behavior A clear and concise description of what you expected to happen.

The following code, without a <Box> manually added around the <Menu> should render without extra padding on the menu.

    <Stack
      direction='row'
      align='center'
      width='full'
      {...rest}
    >
        <Menu>
          <MenuButton size='sm'><MdMoreHorizIcon boxSize={5} /></MenuButton>
          <MenuList>
            <ReportButton as={MenuItem} game={game}>
              <MdReportProblemIcon mr={2} />
              Report
            </ReportButton>
          </MenuList>
        </Menu>
  </Stack>

Desktop (please complete the following information):

• OS: [e.g. iOS] macOS
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22] Latest

Additional context Add any other context about the problem here, or some background information of how you ran into this bug.

1.0.0-next.4

[feross]

@segunadebayo I’m assuming that you want to give some space between the MenuButton and MenuList, right? If that’s the case you can pass gutter prop to Menu and set it’s value to the space you want between them (30, 24, etc).

The intention of using a <Stack> was to have other buttons horizontally alongside the button that triggers the menu, not to get spacing between MenuButton and MenuList. For example:

So the ‘…’ button (which opens the menu) and the ‘Extend by 2 minutes’ button are in the <Stack>. Does that make sense?

[with-heart]

Here’s a reproduction: https://codesandbox.io/s/boring-shape-mhgib?file=/src/App.tsx

Definitely see what you mean @feross.