Merge pull request #2634 from teamleadercrm/TIDAL-4359-allow-tooltipp…

…ed-menu-items

Allow tooltipped menu items in split buttons

CHANGELOG.md

@@ -12,6 +12,12 @@
 
 ### Dependency updates
 
+## [21.0.2] - 2023-04-25
+
+### Fixed
+
+- `SplitButton`: Render all elements passed to SplitButton instead of only MenuItems ([@lorgan3](https://https://github.com/lorgan3) in [#2634](https://github.com/teamleadercrm/ui/pull/2634))
+
 ## [21.0.1] - 2023-04-19
 
 ### Fixed
@@ -41,7 +47,6 @@
 
 - [BREAKING] `@teamleader/ui-colors` has been updated to version 2.0.0 which uses the newer comma-free syntax for hsl colors. This means that you need to update the syntax where you use the hsl value in combination with alhpa (e.g. `hsl(var(--color-teal), 50%)` should be changed to `hsl(var(--color-teal) /50%)`). ([@lowiebenoot](https://https://github.com/lowiebenoot) in [#2620](https://github.com/teamleadercrm/ui/pull/2620))
 
-
 ## [20.1.0] - 2023-03-17
 
 ### Added

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@teamleader/ui",
   "description": "Teamleader UI library",
-  "version": "21.0.1",
+  "version": "21.0.2",
   "author": "Teamleader <[email protected]>",
   "bugs": {
     "url": "https://github.com/teamleadercrm/ui/issues"

src/components/splitButton/SplitButton.tsx

@@ -119,11 +119,11 @@ const SplitButton: GenericComponent<SplitButtonProps> = ({
       >
         <Menu>
           {React.Children.map(children, (child) => {
-            if (
-              !React.isValidElement(child) ||
-              !isComponentOfType(MenuItem, child) ||
-              child.props.label === buttonLabel
-            ) {
+            if (!React.isValidElement(child) || !isComponentOfType(MenuItem, child)) {
+              return child;
+            }
+
+            if (child.props.label === buttonLabel) {
               return null;
             }
 

src/components/splitButton/splitButton.stories.tsx

@@ -4,6 +4,9 @@ import SplitButton from './SplitButton';
 import MenuDivider from '../menu/MenuDivider';
 import MenuItem from '../menu/MenuItem';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import Tooltip from '../tooltip';
+import Box from '../box';
+import { TextBody } from '../typography';
 
 const handleButtonClick = () => {
   console.log('clicked main button');
@@ -33,3 +36,14 @@ export const WithPopoverOverrides: ComponentStory<typeof SplitButton> = (args) =
     <MenuItem onClick={handleMenuItemClick} label="I appear above the button" />
   </SplitButton>
 );
+
+const TooltippedBox = Tooltip(Box);
+
+export const WithTooltip: ComponentStory<typeof SplitButton> = (args) => (
+  <SplitButton {...args} onButtonClick={handleButtonClick}>
+    <MenuItem onClick={handleMenuItemClick} label="Main action" />
+    <TooltippedBox tooltip={<TextBody>I am disabled</TextBody>}>
+      <MenuItem onClick={handleMenuItemClick} label="Disabled action" disabled />
+    </TooltippedBox>
+  </SplitButton>
+);