Merge pull request #2648 from teamleadercrm/TIDAL-4585

Spread all other props & add title prop

CHANGELOG.md

@@ -2,8 +2,12 @@
 
 ### Added
 
+- `IconMenu`: Added a `title` prop and pass it to the IconButton ([@driesd](https://https://github.com/driesd) in [#2648](https://github.com/teamleadercrm/ui/pull/2648))
+
 ### Changed
 
+- `IconMenu`: Spread all other props instead of only spreading the box props ([@driesd](https://https://github.com/driesd) in [#2648](https://github.com/teamleadercrm/ui/pull/2648))
+
 ### Deprecated
 
 ### Removed

src/components/menu/IconMenu.tsx

@@ -4,7 +4,7 @@ import { IconMoreMediumOutline } from '@teamleader/ui-icons';
 import IconButton from '../iconButton';
 import Menu from './Menu';
 import theme from './theme.css';
-import Box, { pickBoxProps } from '../box';
+import Box from '../box';
 import { BoxProps } from '../box/Box';
 import { GenericComponent } from '../../@types/types';
 
@@ -19,6 +19,7 @@ export interface IconMenuProps extends Omit<BoxProps, 'children' | 'className'>
   position?: 'auto' | 'static' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
   selectable?: boolean;
   selected?: any;
+  title?: string;
 }
 
 const IconMenu: GenericComponent<IconMenuProps> = ({
@@ -32,14 +33,14 @@ const IconMenu: GenericComponent<IconMenuProps> = ({
   selectable = false,
   selected,
   onClick,
+  title,
   ...others
 }) => {
   const [active, setActive] = useState(false);
 
   const buttonRef = useRef<HTMLButtonElement>(null);
 
   const buttonIcon = icon || <IconMoreMediumOutline />;
-  const boxProps = pickBoxProps(others);
 
   const handleButtonClick = (event: MouseEvent) => {
     setActive(!active);
@@ -60,8 +61,14 @@ const IconMenu: GenericComponent<IconMenuProps> = ({
   }, [active, onHide, onShow]);
 
   return (
-    <Box data-teamleader-ui="icon-menu" {...boxProps} className={cx(theme['icon-menu'], className)}>
-      <IconButton className={theme['icon']} icon={buttonIcon} onClick={handleButtonClick} ref={buttonRef} />
+    <Box data-teamleader-ui="icon-menu" {...others} className={cx(theme['icon-menu'], className)}>
+      <IconButton
+        className={theme['icon']}
+        icon={buttonIcon}
+        onClick={handleButtonClick}
+        ref={buttonRef}
+        title={title}
+      />
       <Menu
         active={active}
         onHide={handleMenuHide}