Merge pull request #84 from ynput/develop

release 1.0.3
ynput · May 2, 2024 · 7da740c · 7da740c
2 parents 9fe706e + 24e01c2
commit 7da740c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 14 deletions.
diff --git a/src/Overlay/Dialog/Dialog.stories.tsx b/src/Overlay/Dialog/Dialog.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { Dialog } from '.'
-import { useRef, useState } from 'react'
+import { useState } from 'react'
 import { Button } from '../../Button'
 
 const meta: Meta<typeof Dialog> = {
@@ -32,11 +32,6 @@ const closeProps = {
 const Template = () => {
 
   const [openModal, setOpenModal] = useState(false)
-
-  const handleCloseModal = () => {
-    setOpenModal(false)
-  }
-
 
   return (
     <>
@@ -48,10 +43,11 @@ const Template = () => {
         children={<BodyContent />}
         footer={<FooterContent />}
         isOpen={openModal}
-        onClose={handleCloseModal}
+        onClose={() => setOpenModal(false)}
         closeProps={closeProps}
         hideCancelButton={false}
         size='full'
+        variant='dialog'
       />
     </>
   )

diff --git a/src/Overlay/Dialog/Dialog.styled.ts b/src/Overlay/Dialog/Dialog.styled.ts
@@ -47,22 +47,23 @@ export const Dialog = styled.dialog<{ $size?: string }>`
 
     /* Backdrop property affects inactive area around modal */
     &::backdrop {
-        background-color: rgba(0, 0, 0, 0.3);
+      background-color: rgba(0, 0, 0, 0.3);
     }
 
     /* Styles for dialogs that carry modal behavior */
     &:modal {
-      display: flex;
     }
 
-    &:modal[open] {
+    /* Styles for dialogs that carry non-modal behavior */
+    &:not(:modal) {
+    }
+
+    &[open] {
+      display: flex;
       animation: ${fadeInAnimation} 150ms ease-in-out forwards, ${fadeInAnimation} 150ms ease-in-out backwards;
       animation-fill-mode: both;
     }
 
-    /* Styles for dialogs that carry non-modal behavior */
-    &:not(:modal) {
-    }
 `
 
 export const Close = styled(Button)`

diff --git a/src/Overlay/Dialog/Dialog.tsx b/src/Overlay/Dialog/Dialog.tsx
@@ -12,6 +12,7 @@ export interface DialogProps extends Omit<React.HTMLAttributes<HTMLDialogElement
   isOpen: boolean
   onClose?: () => void
   classNames?: ClassNames
+  variant?: 'dialog' | 'modal'
   size?: 'sm' | 'md' | 'lg' | 'full'
 }
 
@@ -35,6 +36,7 @@ export const Dialog = forwardRef<HTMLDialogElement, DialogProps>((props) => {
     className,
     classNames,
     size,
+    variant = 'modal'
   } = props
 
   const [isModalOpen, setModalOpen] = useState(isOpen)
@@ -49,7 +51,9 @@ export const Dialog = forwardRef<HTMLDialogElement, DialogProps>((props) => {
   useEffect(() => {
     const modalElement = modalRef.current
     if (!modalElement) return
-    isModalOpen ? modalElement.showModal() : modalElement.close()
+    const showDialog =  variant === 'dialog' && modalElement.show()
+    const showModal =  variant === 'modal' && modalElement.showModal()
+    isModalOpen ? (showDialog || showModal) : modalElement.close()
   }, [isModalOpen])
 
   const handleCloseModal = () => {