pass dom props to dropdown button

Arize-ai · May 22, 2023 · df1973e · df1973e
1 parent e5222cb
commit df1973e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/src/dropdown/Dropdown.tsx b/src/dropdown/Dropdown.tsx
@@ -3,11 +3,12 @@ import { DropdownButton, DropdownButtonProps } from './DropdownButton';
 import { DropdownMenu } from './DropdownMenu';
 import { DropdownTrigger, DropdownTriggerProps } from './DropdownTrigger';
 import { useResizeObserver } from '@react-aria/utils';
-import { FocusableRefValue } from '../types';
+import { DOMProps, FocusableRefValue } from '../types';
 import { useUnwrapDOMRef } from '../utils';
 import { useProviderProps } from '../provider';
+import { filterDOMProps } from '@react-aria/utils';
 
-export type DropdownProps = {
+export interface DropdownProps extends DOMProps {
   /**
    * The content of the dropdown menu
    */
@@ -47,6 +48,7 @@ export function Dropdown(props: DropdownProps) {
     isQuiet = false,
     isDisabled,
     buttonProps,
+    ...otherProps
   } = props;
   buttonProps = { ...buttonProps, isDisabled, isQuiet };
   const triggerRef = useRef<FocusableRefValue<HTMLButtonElement>>(null);
@@ -71,10 +73,11 @@ export function Dropdown(props: DropdownProps) {
   const menuStyle = {
     minWidth: buttonWidth,
   };
-
+  const domProps = filterDOMProps(otherProps as DOMProps)
+  const buttonComponentProps = {...buttonProps, ...domProps}
   return (
     <DropdownTrigger {...triggerProps}>
-      <DropdownButton ref={triggerRef} {...buttonProps}>
+      <DropdownButton ref={triggerRef} {...buttonComponentProps}>
         {children}
       </DropdownButton>
       <DropdownMenu style={menuStyle}>{menu}</DropdownMenu>

diff --git a/src/dropdown/DropdownButton.tsx b/src/dropdown/DropdownButton.tsx
@@ -60,10 +60,10 @@ const buttonBaseCSS = css`
     height: 16px;
     font-size: 16px;
   }
-  
+
   /* Validation styles */
   --ac-validation-icon-width: var(--ac-global-dimension-size-300);
-  
+
   // prepend some space before the icon
   .ac-dropdown-button__validation-icon {
     margin: 0 0 0 10px;
@@ -80,14 +80,14 @@ const buttonBaseCSS = css`
       color: var(--ac-global-color-danger);
     }
   }
-  
+
   // Make room for the invalid icon
   &.ac-dropdown-button > .ac-dropdown-button__text {
-    padding-right: calc(${
-      theme.spacing.padding8
-    }px + var(--ac-validation-icon-width));
+    padding-right: calc(
+      ${theme.spacing.padding8}px + var(--ac-validation-icon-width)
+    );
   }
-  
+
   &.ac-dropdown-button--invalid > .ac-dropdown-button__text {
     padding-right: 0;
   }

diff --git a/stories/Dropdown.stories.tsx b/stories/Dropdown.stories.tsx
@@ -57,7 +57,9 @@ export const Gallery = () => (
       `}
     >
       <li>
-        <Dropdown menu={<Menu />}>Click Me</Dropdown>
+        <Dropdown menu={<Menu />} data-testid="dropdown-test-id">
+          Click Me
+        </Dropdown>
       </li>
       <li>
         <Dropdown menu={<Menu />} buttonProps={{ addonBefore: 'Dataset A' }}>