Feat: IGL-115 - Added dropdownClassName & dropdownOffset

Author: vicky-comeau

.changeset/loud-singers-enjoy.md

@@ -0,0 +1,6 @@
+---
+"@igloo-ui/action-menu": minor
+"@igloo-ui/dropdown": minor
+---
+
+Added dropdownOffset to Actionmenu and Dropdown components. Also added dropdownClassName to ActionMenu.

packages/ActionMenu/src/ActionMenu.tsx

@@ -34,6 +34,10 @@ export interface ActionMenuProps extends React.ComponentProps<"div"> {
     /** Whether or not the menu should use ReactPortal
    * to append to the body */
     disablePortal?: boolean;
+    /** Add a specific class to the dropdown */
+    dropdownClassName?: string;
+    /** Offset of the dropdown */
+    dropdownOffset?: number;
     /** Whether or not the action menu should be open by default */
     isOpen?: boolean;
     /** Callback when the action menu is closed and animations are done */
@@ -57,6 +61,8 @@ const ActionMenu: React.FunctionComponent<ActionMenuProps> = ({
     className,
     dataTest,
     disablePortal = false,
+    dropdownClassName,
+    dropdownOffset,
     isOpen = false,
     onAfterMenuClose,
     onMenuClose,
@@ -244,7 +250,8 @@ const ActionMenu: React.FunctionComponent<ActionMenuProps> = ({
                     />
                 }
                 isOpen={showMenu}
-                className="ids-action-menu__dropdown"
+                className={cx("ids-action-menu__dropdown", dropdownClassName)}
+                dropdownOffset={dropdownOffset}
                 position={position}
                 onClose={() => toggleMenu(false)}
                 onAfterClose={onAfterMenuClose}

packages/Dropdown/src/Dropdown.tsx

@@ -70,6 +70,8 @@ export interface DropdownProps
     /** The threshold in pixels from the bottom of the dropdown
    * to trigger the onScrollEnd callback */
     scrollEndThreshold?: number;
+    /** The offset of the dropdown from the reference */
+    dropdownOffset?: number;
 }
 
 const Dropdown: React.FunctionComponent<DropdownProps> = React.forwardRef(
@@ -93,6 +95,7 @@ const Dropdown: React.FunctionComponent<DropdownProps> = React.forwardRef(
             footer,
             onScrollEnd,
             scrollEndThreshold = 30,
+            dropdownOffset = 4,
             ...rest
         }: DropdownProps,
         ref: React.ForwardedRef<HTMLDivElement>
@@ -147,7 +150,7 @@ const Dropdown: React.FunctionComponent<DropdownProps> = React.forwardRef(
                 return cleanup;
             },
             middleware: [
-                offset(1),
+                offset(dropdownOffset),
                 flip({ padding: 10 }),
                 fuiSize({
                     apply({ rects, elements, availableHeight }) {

packages/Dropdown/src/__mocks__/Dropdown.mock.tsx

@@ -54,6 +54,8 @@ export interface DropdownProps
     /** The threshold in pixels from the bottom of the dropdown
    * to trigger the onScrollEnd callback */
     scrollEndThreshold?: number;
+    /** The offset of the dropdown from the reference */
+    dropdownOffset?: number;
 }
 
 const MockDropdown: React.FunctionComponent<DropdownProps> = ({
@@ -75,6 +77,7 @@ const MockDropdown: React.FunctionComponent<DropdownProps> = ({
     footer,
     onScrollEnd,
     scrollEndThreshold = 30,
+    dropdownOffset = 4,
     ...rest
 }: DropdownProps) => {
     const { x, y, refs } = {