feat(basemenu)!: refactors BaseMenu to use ReactNode for menu button

BREAKING CHANGE:
- Refactors `BaseMenu` to use `ReactNode instead of `icon` prop
to allow customization of the menu button.
- Adds `MenuButtonIconContainer` and exports `MenuButtonIcon` and
`MenuButtonHalo` in order to create icon button component as before.

Author: boilund

packages/core/src/Icon/index.tsx

@@ -49,7 +49,7 @@ export type IconType =
 
 export type IconSize = 'small' | 'medium' | 'large' | 'extraLarge'
 
-interface IconProps extends BaseProps {
+export interface IconProps extends BaseProps {
   /**
    * `class` to be passed to the component.
    */

packages/core/src/Menu/BaseMenu.tsx

@@ -8,17 +8,16 @@ import React, {
 } from 'react'
 import styled, { css } from 'styled-components'
 
-import { spacing, componentSize, opacity, shape } from '../designparams'
-import { remainder } from '../utils/math'
-
-import { Icon, IconType } from '../Icon'
-import { MoreVertIcon } from 'practical-react-components-icons'
-import { PopOver, PopOverProps } from '../PopOver'
 import {
   useBoolean,
   useVisibleFocus,
   useClickOutside,
 } from 'react-hooks-shareable'
+
+import { spacing, componentSize, opacity, shape } from '../designparams'
+import { remainder } from '../utils/math'
+import { Icon } from '../Icon'
+import { PopOver, PopOverProps } from '../PopOver'
 import { useEscapeListenerStack } from '../Modal/hooks/useEscapeListenerStack'
 
 type BaseElement = HTMLDivElement
@@ -35,12 +34,24 @@ const Anchor = styled.div`
   height: fit-content;
 `
 
-const MenuIcon = styled(Icon).attrs({ className: 'sc-ButtonIcon' })`
+export const MenuButtonIconContainer = styled.div`
+  position: relative;
+  height: ${componentSize.small};
+  width: ${componentSize.small};
+  border-radius: ${shape.radius.circle};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+export const MenuButtonIcon = styled(Icon).attrs({
+  className: 'sc-ButtonIcon',
+})`
   fill: inherit;
   flex: none;
 `
 
-const MenuButtonHalo = styled.div`
+export const MenuButtonHalo = styled.div`
   position: absolute;
   top: 0;
   right: 0;
@@ -53,27 +64,30 @@ const MenuButtonHalo = styled.div`
   transition: transform 100ms;
 `
 
-const MenuNativeButton = styled.button<{ readonly visibleFocus: boolean }>`
-  position: relative;
+const MenuNativeButton = styled.button<{
+  readonly visibleFocus: boolean
+}>`
   flex: none;
-  height: ${componentSize.small};
-  width: ${componentSize.small};
-  border-radius: ${shape.radius.circle};
   min-width: unset;
   padding: unset;
   outline: none;
-  border: 2px solid transparent;
   cursor: pointer;
+  border: 0;
   &::-moz-focus-inner {
     border: 0;
   }
   color: ${({ theme }) => theme.color.text04()};
   fill: ${({ theme }) => theme.color.text04()};
   background-color: transparent;
   transition: all 200ms;
+  ${MenuButtonIconContainer} {
+    border: 2px solid transparent;
+  }
 
   &:hover {
-    border: 0 solid transparent;
+    ${MenuButtonIconContainer} {
+      border: 0 solid transparent;
+    }
     ${MenuButtonHalo} {
       background-color: ${({ theme }) => theme.color.element11(opacity[16])};
       transform: scale(1);
@@ -85,7 +99,9 @@ const MenuNativeButton = styled.button<{ readonly visibleFocus: boolean }>`
       visibleFocus
         ? css`
             &:focus {
-              border: 2px solid ${({ theme }) => theme.color.elementBorder()};
+              ${MenuButtonIconContainer} {
+                border: 2px solid ${({ theme }) => theme.color.elementBorder()};
+              }
               ${MenuButtonHalo} {
                 background-color: ${({ theme }) =>
                   theme.color.element11(opacity[16])};
@@ -177,27 +193,23 @@ interface MenuButtonProps extends BaseButtonProps {
    * `class` to be passed to the component.
    */
   readonly className?: string
-  /**
-   * Icon that shows inside Button.
-   */
-  readonly icon: IconType
   /**
    * The title attribute specifies extra information about an element.
    */
   readonly title?: string
 }
 
-export const MenuButton = React.forwardRef<BaseButtonElement, MenuButtonProps>(
+const MenuButton = React.forwardRef<BaseButtonElement, MenuButtonProps>(
   (
     {
       disabled,
       name,
       onClick,
       className,
-      icon,
       onPointerDown,
       onPointerUp,
       onFocus,
+      children,
       ...props
     },
     ref
@@ -249,8 +261,7 @@ export const MenuButton = React.forwardRef<BaseButtonElement, MenuButtonProps>(
         visibleFocus={visibleFocus}
         {...props}
       >
-        <MenuIcon icon={icon} />
-        <MenuButtonHalo />
+        {children}
       </MenuNativeButton>
     )
   }
@@ -378,9 +389,9 @@ const BaseItem: React.FunctionComponent<BaseItemProps> = ({
 
 export interface BaseMenuProps extends Omit<PopOverProps, 'anchorEl'> {
   /**
-   * The icon element.
+   * React element that will appear as menu button
    */
-  readonly icon?: IconType
+  readonly button: ReactNode
   /**
    * Aligns the menu either left or right.
    */
@@ -403,7 +414,7 @@ export interface BaseMenuProps extends Omit<PopOverProps, 'anchorEl'> {
  */
 export const BaseMenu = memo<BaseMenuProps>(
   ({
-    icon = MoreVertIcon,
+    button,
     align = 'left',
     disabled = false,
     components,
@@ -537,7 +548,9 @@ export const BaseMenu = memo<BaseMenuProps>(
         onBlur={handleBlur}
         {...props}
       >
-        <MenuButton icon={icon} onClick={mouseToggleMenu} disabled={disabled} />
+        <MenuButton onClick={mouseToggleMenu} disabled={disabled}>
+          {button}
+        </MenuButton>
         {menuVisible ? (
           <PopOver
             horizontalPosition={align}

packages/core/src/Menu/Menu.tsx

@@ -1,10 +1,19 @@
 import React, { memo, useMemo } from 'react'
 import styled, { css, useTheme } from 'styled-components'
 
+import { MoreVertIcon } from 'practical-react-components-icons'
+
 import { componentSize, spacing } from '../designparams'
 import { Typography } from '../Typography'
 import { Icon, IconType } from '../Icon'
-import { BaseMenu, BaseItemProps, BaseMenuProps } from './BaseMenu'
+import {
+  BaseMenu,
+  BaseItemProps,
+  BaseMenuProps,
+  MenuButtonIcon,
+  MenuButtonHalo,
+  MenuButtonIconContainer,
+} from './BaseMenu'
 
 export const MenuItem = styled.div<{
   readonly divider?: boolean
@@ -49,13 +58,18 @@ export interface MenuItemProps
 }
 
 interface MenuProps extends Omit<BaseMenuProps, 'components'> {
+  /**
+   * The icon element for menu button.
+   *
+   * Default: `MoreVertIcon`
+   */
+  readonly icon?: IconType
   /**
    * An array of items in the drop down menu.
    */
   readonly items: ReadonlyArray<MenuItemProps>
   /**
    * Override theme's default setting for `compact` if set.
-
    */
   readonly compact?: boolean
 }
@@ -66,10 +80,22 @@ interface MenuProps extends Omit<BaseMenuProps, 'components'> {
  * Forwards props to BaseMenu
  */
 export const Menu = memo<MenuProps>(
-  ({ items, compact: compactFromProps, ...props }) => {
+  ({
+    icon: buttonIcon = MoreVertIcon,
+    items,
+    compact: compactFromProps,
+    ...props
+  }) => {
     const { compact: compactFromTheme } = useTheme()
     const compact = compactFromProps ?? compactFromTheme
 
+    const button = (
+      <MenuButtonIconContainer>
+        <MenuButtonIcon icon={buttonIcon} />
+        <MenuButtonHalo />
+      </MenuButtonIconContainer>
+    )
+
     /**
      * Creates array of components using MenuItem to
      * forward to Base Menu
@@ -97,7 +123,7 @@ export const Menu = memo<MenuProps>(
       [compact, items]
     )
 
-    return <BaseMenu components={components} {...props} />
+    return <BaseMenu button={button} components={components} {...props} />
   }
 )