Merge pull request #2369 from teamleadercrm/TIDAL-2601-allow-more-spl…

…itbutton-control

Allow more control over SplitButton component

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ### Added
 
+- `SplitButton`: `popoverProps` prop which allows overwriting the z-index, direction and height of the popover. ([@lorgan3](https://github.com/lorgan3)) in [#2369](https://github.com/teamleadercrm/ui/pull/2369))
+
 ### Changed
 
 ### Deprecated

src/components/splitButton/SplitButton.tsx

@@ -23,6 +23,15 @@ interface SplitButtonProps extends Omit<BoxProps, 'children' | 'size'> {
   onSecondaryButtonClick?: (event: MouseEvent<HTMLElement>) => void;
   /** If true, component will be disabled. */
   disabled?: boolean;
+  /** Overwrites for the popover */
+  popoverProps?: {
+    /** The preferred direction in which the Popover is rendered, is overridden with the opposite or adjacent direction if the Popover cannot be entirely displayed in the current direction. */
+    direction?: 'north' | 'south';
+    /** If true, the Popover stretches to fit its content vertically */
+    fullHeight?: boolean;
+    /** The z-index of the Popover */
+    zIndex?: number;
+  };
 }
 
 const SplitButton: GenericComponent<SplitButtonProps> = ({
@@ -32,6 +41,7 @@ const SplitButton: GenericComponent<SplitButtonProps> = ({
   onButtonClick,
   onSecondaryButtonClick,
   disabled,
+  popoverProps,
   ...others
 }) => {
   const [popoverActive, setPopoverActive] = useState<boolean>(false);
@@ -90,6 +100,7 @@ const SplitButton: GenericComponent<SplitButtonProps> = ({
         onEscKeyDown={handleCloseClick}
         onOverlayClick={handleCloseClick}
         position="start"
+        {...popoverProps}
       >
         <Menu>
           {React.Children.map(children, (child) => {

src/components/splitButton/splitButton.stories.tsx

@@ -26,3 +26,10 @@ export const DefaultStory: ComponentStory<typeof SplitButton> = (args) => (
     <MenuItem onClick={handleMenuItemClick} label="Via Marketplace integrations" />
   </SplitButton>
 );
+
+export const WithPopoverOverrides: ComponentStory<typeof SplitButton> = (args) => (
+  <SplitButton {...args} popoverProps={{ direction: 'north' }} onButtonClick={handleButtonClick}>
+    <MenuItem onClick={handleMenuItemClick} label="Main action" />
+    <MenuItem onClick={handleMenuItemClick} label="I appear above the button" />
+  </SplitButton>
+);