fix(menu): export MenuButton and menu button jumps

Export MenuButton again. MenuButton should be exported but
it was accidentally removed when refactoring BaseMenu.
Also added example in docs.

And fixed menu button that jumps when changing state
by adding `box-sizing: border-box`.

Author: boilund

packages/core/src/Menu/BaseMenu.tsx

@@ -36,6 +36,7 @@ const Anchor = styled.div`
 
 export const MenuButtonIconContainer = styled.div`
   position: relative;
+  box-sizing: border-box;
   height: ${componentSize.small};
   width: ${componentSize.small};
   border-radius: ${shape.radius.circle};
@@ -199,7 +200,7 @@ interface MenuButtonProps extends BaseButtonProps {
   readonly title?: string
 }
 
-const MenuButton = React.forwardRef<BaseButtonElement, MenuButtonProps>(
+export const MenuButton = React.forwardRef<BaseButtonElement, MenuButtonProps>(
   (
     {
       disabled,

packages/core/src/Menu/__snapshots__/index.test.tsx.snap

@@ -61,6 +61,7 @@ exports[`Menus Menu (default) 1`] = `
 
 .c5 {
   position: relative;
+  box-sizing: border-box;
   height: 32px;
   width: 32px;
   border-radius: 50%;
@@ -279,6 +280,7 @@ exports[`Menus Menu (disabled) 1`] = `
 
 .c5 {
   position: relative;
+  box-sizing: border-box;
   height: 32px;
   width: 32px;
   border-radius: 50%;
@@ -501,6 +503,7 @@ exports[`Menus Menu (left) 1`] = `
 
 .c5 {
   position: relative;
+  box-sizing: border-box;
   height: 32px;
   width: 32px;
   border-radius: 50%;
@@ -719,6 +722,7 @@ exports[`Menus Menu (right) 1`] = `
 
 .c5 {
   position: relative;
+  box-sizing: border-box;
   height: 32px;
   width: 32px;
   border-radius: 50%;

packages/docs/src/mdx/coreComponents/Menu.mdx

@@ -84,6 +84,31 @@ export const ITEMS = [
 />
 ```
 
+## Advanced usage
+
+You can create a custom `Menu` with `MenuButton`.
+
+```typescript
+<Anchor ref={anchorRef}>
+  <MenuButton onClick={mouseToggleMenu}>
+    <MenuButtonIconContainer>
+      <MenuButtonIcon icon={icon} />
+      <MenuButtonHalo />
+    </MenuButtonIconContainer>
+  </MenuButton>
+  {menuVisible ? (
+    <PopOver
+      horizontalPosition="right"
+      horizontalAlignment="right"
+      anchorEl={anchorRef.current}
+      onScroll={hideAndBlurMenu}
+    >
+      <MenuWrapper onClose={hideMenu}>{children}</MenuWrapper>
+    </PopOver>
+  ) : null}
+</Anchor>
+```
+
 ## Menu Props
 
 Menu forwards all props to `PopOver`.