Feat: IGL-115 Added dropdownClassName & dropdownOffset (#641)

workleap · Jan 17, 2024 · c19aa7e · c19aa7e
1 parent 278e7ec
commit c19aa7e
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 16 deletions.
diff --git a/.changeset/hungry-yaks-behave.md b/.changeset/hungry-yaks-behave.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.
diff --git a/packages/ActionMenu/src/ActionMenu.tsx b/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 */
@@ -59,6 +63,8 @@ const ActionMenu: React.FunctionComponent<ActionMenuProps> = ({
     className,
     dataTest,
     disablePortal = false,
+    dropdownClassName,
+    dropdownOffset,
     isOpen = false,
     onAfterMenuClose,
     onMenuClose,
@@ -247,7 +253,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}

diff --git a/packages/Dropdown/src/Dropdown.tsx b/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 }) {

diff --git a/packages/Dropdown/src/__mocks__/Dropdown.mock.tsx b/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 } = {

diff --git a/yarn.lock b/yarn.lock
@@ -2005,11 +2005,6 @@
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
   integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
 
-"@hopper-ui/tokens@^3.1.2":
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/@hopper-ui/tokens/-/tokens-3.1.2.tgz#d77349b3d99f6fb528ff239e769881a7e8b8de14"
-  integrity sha512-nzPI1kjsdO4fsoQZkgE+mrZ5DeSlhcwRz9q6ALCkOdM5g5ZGkShXXDzNUlFmI5YRee2zBZBbs46Fnkz+ngUCkg==
-
 "@hopper-ui/tokens@^3.1.3":
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/@hopper-ui/tokens/-/tokens-3.1.3.tgz#2fe2a3dae7c64fe358d61937f0ab7e4ac657da90"
@@ -2053,15 +2048,6 @@
   resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340"
   integrity sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==
 
-"@igloo-ui/button@^0.7.6":
-  version "0.7.6"
-  resolved "https://registry.yarnpkg.com/@igloo-ui/button/-/button-0.7.6.tgz#fa72a4428835f540b8e52c5f8d2ded127e355b23"
-  integrity sha512-4QEYEMp5IXm6IAY6jSTj3ieInDWVyqMSxU2PKJuy6d2cxFk8OEPsko840vHN4APhgcaHzhsmZm8Zpgn7ngfTfA==
-  dependencies:
-    "@hopper-ui/tokens" "^3.1.2"
-    "@igloo-ui/tokens" "^2.0.0"
-    classnames "^2.3.2"
-
 "@igloo-ui/icons@^1.12.2":
   version "1.12.2"
   resolved "https://registry.yarnpkg.com/@igloo-ui/icons/-/icons-1.12.2.tgz#cc1667e791c8173221d52d54188fe548323434a7"