refactor(Menu): replace with `Button

Author: ze-flo

packages/dropdowns/src/elements/menu/Menu.tsx

@@ -11,14 +11,15 @@ import { mergeRefs } from 'react-merge-refs';
 import { ThemeContext } from 'styled-components';
 import { useMenu } from '@zendeskgarden/container-menu';
 import { DEFAULT_THEME, useWindow } from '@zendeskgarden/react-theming';
-import { IButtonProps } from '@zendeskgarden/react-buttons';
+import { Button, IButtonProps } from '@zendeskgarden/react-buttons';
 import { IMenuProps, PLACEMENT } from '../../types';
 import { MenuContext } from '../../context/useMenuContext';
 import { toItems } from './utils';
 import { MenuList } from './MenuList';
-import { StyledButton } from '../../views';
 import ChevronIcon from '@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg';
 
+const BTN_COMPONENT_ID = 'dropdowns.menu.button';
+
 /**
  * @extends HTMLAttributes<HTMLUListElement>
  */
@@ -87,12 +88,12 @@ export const Menu = forwardRef<HTMLUListElement, IMenuProps>(
       typeof button === 'function' ? (
         button(triggerProps)
       ) : (
-        <StyledButton {...triggerProps}>
+        <Button {...triggerProps} data-garden-id={BTN_COMPONENT_ID}>
           {button}
-          <StyledButton.EndIcon isRotated={isExpanded}>
+          <Button.EndIcon isRotated={isExpanded}>
             <ChevronIcon />
-          </StyledButton.EndIcon>
-        </StyledButton>
+          </Button.EndIcon>
+        </Button>
       );
 
     const contextValue = useMemo(

packages/dropdowns/src/views/index.ts

@@ -36,5 +36,4 @@ export * from './menu/StyledItemGroup';
 export * from './menu/StyledItemIcon';
 export * from './menu/StyledItemMeta';
 export * from './menu/StyledItemTypeIcon';
-export * from './menu/StyledButton';
 export * from './menu/StyledSeparator';