fix: drawer trigger "as component" props (#2087)

* fix: drawer trigger as props * fix: modal.trigger missing state prop * fix: dropdown.trigger missing state prop
WTTJ · Jun 15, 2023 · 60a7898 · 60a7898
1 parent 2f67b72
commit 60a7898
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 10 deletions.
diff --git a/packages/Drawer/src/index.tsx b/packages/Drawer/src/index.tsx
@@ -3,7 +3,6 @@ import {
   Dialog,
   DialogBackdropProps,
   DialogDisclosure,
-  DialogDisclosureProps,
   DialogInitialState,
   DialogOptions,
   DialogProps,
@@ -162,11 +161,11 @@ export const Footer: React.FC<BoxProps> = props => {
   )
 }
 
-type TriggerProps = { state: DialogDisclosureProps; children: React.ReactNode; as?: As }
+type TriggerProps = { state: DialogStateReturn; children: React.ReactNode; as?: As }
 
-export const Trigger: React.FC<TriggerProps> = ({ as, state, ...rest }) => {
-  return <DialogDisclosure as={as} {...state} {...rest} />
-}
+export const Trigger = forwardRef<'button', TriggerProps>(({ as, state, ...rest }, ref) => {
+  return <DialogDisclosure as={as} ref={ref} {...state} {...rest} />
+})
 
 export const Drawer = Object.assign(DrawerComponent, {
   Trigger,

diff --git a/packages/Drawer/tests/index.test.tsx b/packages/Drawer/tests/index.test.tsx
@@ -43,4 +43,26 @@ describe('<Drawer>', () => {
     fireEvent.click(getByText('open'))
     expect(queryByRole('dialog')).toHaveStyleRule('height', '50%')
   })
+
+  it('should render "as" correctly', () => {
+    const Test = () => {
+      const drawerState = useDrawerState()
+
+      return (
+        <>
+          <Drawer.Trigger as="button" onClick={() => null} state={drawerState}>
+            open
+          </Drawer.Trigger>
+          <Drawer aria-label="drawer" state={drawerState}>
+            test
+          </Drawer>
+        </>
+      )
+    }
+
+    const { getByText, queryByRole } = render(<Test />)
+    expect(queryByRole('dialog')).toBeNull()
+    fireEvent.click(getByText('open'))
+    expect(queryByRole('dialog')).toHaveTextContent('test')
+  })
 })
diff --git a/packages/DropdownMenu/src/index.tsx b/packages/DropdownMenu/src/index.tsx
@@ -8,7 +8,7 @@ import {
   useMenuState,
 } from 'reakit'
 import { useNextFrame } from '@welcome-ui/utils'
-import { CreateWuiProps, forwardRef, OmitReakitState, WuiProps } from '@welcome-ui/system'
+import { As, CreateWuiProps, forwardRef, OmitReakitState, WuiProps } from '@welcome-ui/system'
 
 import { Arrow } from './Arrow'
 import { Item } from './Item'
@@ -99,8 +99,14 @@ export function useDropdownMenuState(options?: DropdownMenuInitialState): Dropdo
   return { open: dropdownMenuState.visible, ...dropdownMenuState }
 }
 
+type TriggerProps = { state: MenuStateReturn; children: React.ReactNode; as?: As }
+
+export const Trigger = forwardRef<'button', TriggerProps>(({ as, state, ...rest }, ref) => {
+  return <MenuButton as={as} ref={ref} {...state} {...rest} />
+})
+
 export const DropdownMenu = Object.assign(DropdownMenuComponent, {
-  Trigger: MenuButton,
+  Trigger,
   Item,
   Separator,
   Arrow,

diff --git a/packages/Modal/src/index.tsx b/packages/Modal/src/index.tsx
@@ -7,7 +7,7 @@ import {
   useDialogState,
 } from 'reakit'
 import { BoxProps } from '@welcome-ui/box'
-import { CreateWuiProps, forwardRef, OmitReakitState } from '@welcome-ui/system'
+import { As, CreateWuiProps, forwardRef, OmitReakitState } from '@welcome-ui/system'
 import { useTheme } from '@xstyled/styled-components'
 import { Shape, ShapeProps } from '@welcome-ui/shape'
 
@@ -113,9 +113,15 @@ const Cover: React.FC<ShapeProps> = props => {
   )
 }
 
+type TriggerProps = { state: DialogStateReturn; children: React.ReactNode; as?: As }
+
+export const Trigger = forwardRef<'button', TriggerProps>(({ as, state, ...rest }, ref) => {
+  return <DialogDisclosure as={as} ref={ref} {...state} {...rest} />
+})
+
 // Nested exports
 export const Modal = Object.assign(ModalComponent, {
-  Trigger: DialogDisclosure,
+  Trigger,
   Content,
   Header,
   Body,

diff --git a/packages/Modal/tests/index.test.tsx b/packages/Modal/tests/index.test.tsx
@@ -32,7 +32,9 @@ describe('<Modal>', () => {
 
       return (
         <>
-          <Modal.Trigger state={modalState}>open</Modal.Trigger>
+          <Modal.Trigger as="button" state={modalState} type="button">
+            open
+          </Modal.Trigger>
           <Modal ariaLabel="modal" state={modalState}>
             <Modal.Content>
               {shouldRender && <Modal.Body>Modal.Body exist?</Modal.Body>}