Change prop style for dropdowns

Arize-ai · Aug 21, 2021 · 4506046 · 4506046
1 parent c8462d8
commit 4506046
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 23 deletions.
diff --git a/src/dropdown/Dropdown.tsx b/src/dropdown/Dropdown.tsx
@@ -7,9 +7,9 @@ import React, {
 } from 'react';
 import { DropdownButton, DropdownButtonProps } from './DropdownButton';
 import { DropdownMenu } from './DropdownMenu';
-import { DropdownTrigger } from './DropdownTrigger';
+import { DropdownTrigger, DropdownTriggerProps } from './DropdownTrigger';
 import { useResizeObserver } from '@react-aria/utils';
-import { Placement, FocusableRefValue } from '../types';
+import { FocusableRefValue } from '../types';
 import { useUnwrapDOMRef } from '../utils';
 
 export type DropdownProps = {
@@ -22,26 +22,20 @@ export type DropdownProps = {
    */
   children: ReactNode;
   /**
-   * the placement of the dropdown menu
-   * @default "bottom left"
+   * the dropdown trigger props
    */
-  menuPlacement?: Placement;
+  triggerProps?: Omit<DropdownTriggerProps, 'children'>;
   /**
-   * before text or icon for the button
+   * the dropdown button props
    */
-  buttonAddonBefore?: DropdownButtonProps['addonBefore'];
-  /**
-   * additional styles for the button
-   */
-  buttonStyle?: CSSProperties;
+  buttonProps?: DropdownButtonProps;
 };
 
 export function Dropdown({
   menu,
   children,
-  menuPlacement = 'bottom left',
-  buttonAddonBefore,
-  buttonStyle,
+  triggerProps = { placement: 'bottom left' },
+  buttonProps,
 }: DropdownProps) {
   let triggerRef = useRef<FocusableRefValue<HTMLButtonElement>>(null);
   let unwrappedTriggerRef = useUnwrapDOMRef(triggerRef);
@@ -67,12 +61,8 @@ export function Dropdown({
   };
 
   return (
-    <DropdownTrigger placement={menuPlacement}>
-      <DropdownButton
-        ref={triggerRef}
-        addonBefore={buttonAddonBefore}
-        style={buttonStyle}
-      >
+    <DropdownTrigger {...triggerProps}>
+      <DropdownButton ref={triggerRef} {...buttonProps}>
         {children}
       </DropdownButton>
       <DropdownMenu style={menuStyle}>{menu}</DropdownMenu>

diff --git a/stories/Dropdown.stories.tsx b/stories/Dropdown.stories.tsx
@@ -34,6 +34,7 @@ const Menu = () => (
     <ListItem>hello</ListItem>
   </List>
 );
+
 export const Gallery = () => (
   <Provider>
     <ul
@@ -48,7 +49,7 @@ export const Gallery = () => (
         <Dropdown menu={<Menu />}>Click Me</Dropdown>
       </li>
       <li>
-        <Dropdown menu={<Menu />} buttonAddonBefore="Dataset A">
+        <Dropdown menu={<Menu />} buttonProps={{ addonBefore: 'Dataset A' }}>
           Click Me
         </Dropdown>
       </li>
@@ -62,8 +63,7 @@ export const Gallery = () => (
               </ListItem>
             </List>
           }
-          buttonAddonBefore="Dataset A"
-          buttonStyle={{ maxWidth: 250 }}
+          buttonProps={{ addonBefore: 'Dataset A', style: { maxWidth: 250 } }}
         >
           Really really really really really really really long text
         </Dropdown>