Add the ability to center the Dialog component

Nuvotion-Visuals · May 20, 2024 · a795fcb · a795fcb
1 parent 9cfccfe
commit a795fcb
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 20 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.121",
+  "version": "1.0.122",
   "description": "Formation is a comprehensive component library powered by React, Styled Components, and CSS variables for creating apps and websites that demand responsive, unified cross-platform experiences.",
   "resolutions": {
     "string-width": "^4",

diff --git a/src/components/Dialog/Dialog.stories.tsx b/src/components/Dialog/Dialog.stories.tsx
@@ -1,19 +1,18 @@
 import React, { useState } from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { Button, Gap, Dialog, DialogProvider, useDialog, StyleHTML } from '../../internal'
+import { Button, Gap, Dialog, DialogProvider, useDialog, StyleHTML, Box } from '../../internal'
 
 export default {
   title: 'Input/Dialog',
   component: Dialog,
   decorators: [(Story) => (
     <DialogProvider>
       <Story />
-      <Dialog />
+      <Dialog center />
     </DialogProvider>
   )],
 } as ComponentMeta<typeof Dialog>
 
-
 const UseDialogTemplate: ComponentStory<typeof Dialog> = () => {
   const { openDialog } = useDialog()
   const [response, setResponse] = useState<string | boolean | null>('')
@@ -62,15 +61,17 @@ const ChildrenTemplate: ComponentStory<typeof Dialog> = () => {
       <Button 
         onClick={() => openDialog({
           mode: 'confirm',
-          children: <StyleHTML>
-            <h1>Children</h1>
-            <p>It's possible to use children in a Dialog as well. This has several advatages:</p>
-            <ul>
-              <li>Not limited to text.</li>
-              <li>More control.</li>
-              <li>Show things like images or videos.</li>
-            </ul>
-          </StyleHTML>,
+          children: <Box mt={-1}>
+            <StyleHTML>
+              <h1>Children</h1>
+              <p>It's possible to use children in a Dialog as well. This has several advatages:</p>
+              <ul>
+                <li>Not limited to text.</li>
+                <li>More control.</li>
+                <li>Show things like images or videos.</li>
+              </ul>
+            </StyleHTML>
+          </Box>,
           callback: (result) => setResponse(result)
         })} 
         text='Open confirmation dialog'

diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
@@ -46,7 +46,26 @@ export const DialogProvider: React.FC<{ children: React.ReactNode }> = ({ childr
   )
 }
 
-export const Dialog = () => {
+/**
+ * `Dialog` is a versatile modal component that functions as an alert, confirmation, or prompt dialog.
+ * It is designed to be interactive and requires user interaction to be closed. The dialog integrates
+ * with a context to manage its open/close state and configuration, and it can optionally be centered on the screen.
+ * The dialog supports customizable messages, additional content, and input fields.
+ *
+ * This component must be wrapped in a `DialogProvider` component to provide the necessary context.
+ * You can use the `openDialog` function from the `useDialog` hook to open the dialog from anywhere in your application.
+ *
+ * @component
+ * @param {boolean} [center=false] - Whether to center the dialog vertically on the screen.
+ *
+ * @property {boolean} isOpen - Indicates if the dialog is currently open.
+ * @property {DialogConfig} config - Configuration object for the dialog, defining its mode, message, and callback.
+ * @property {function} closeDialog - Function to close the dialog, which invokes the callback with the user response.
+ *
+ * @returns {JSX.Element} The rendered dialog component.
+ */
+
+export const Dialog = ({ center }: { center?: boolean }) => {
   const { isOpen, config, closeDialog } = useDialog()
   const [inputValue, setInputValue] = useState('')
   const dialogRef = useRef<HTMLDivElement>(null)
@@ -79,8 +98,17 @@ export const Dialog = () => {
   }, [isOpen])
 
   return (
-    <S.DialogContainer show={isOpen}>
-      <S.Dialog ref={dialogRef} id='F_Dialog' show={isOpen} shake={shouldShake}>
+    <S.DialogContainer 
+      show={isOpen}
+      center={center}
+    >
+      <S.Dialog 
+        ref={dialogRef} 
+        id='F_Dialog' 
+        show={isOpen} 
+        shake={shouldShake}
+        center={center}
+      >
         <S.DialogContent>
           <Gap gap={0.5} autoWidth center>
             {
@@ -150,6 +178,7 @@ const shake = keyframes`
 const S = {
   DialogContainer: styled.div<{
     show?: boolean
+    center?: boolean
   }>`
     position: fixed;
     z-index: 1000;
@@ -160,18 +189,20 @@ const S = {
     display: ${props => props.show ? 'flex' : 'none'};
     justify-content: center;
     background: var(--F_Backdrop_Light);
-    align-items: flex-start;
+    align-items: ${props => props.center ? 'center' : 'flex-start'};
   `,
   Dialog: styled.div<{
-    show?: boolean, shake?: boolean
+    show?: boolean
+    shake?: boolean
+    center?: boolean
   }>`
     box-shadow: var(--F_Outline_Outset);
     background: var(--F_Background);
     border-radius: .5rem;
-    max-width: 90vw;
+    max-width: calc(100vw - 2rem);
     animation: ${props => props.show ? css`${slideDown} 0.125s ease-out` : 'none'},
                ${props => props.shake ? css`${shake} 0.5s ease` : 'none'};
-    margin-top: 2rem;
+    margin-top: ${props => props.center ? '0' : '2rem'};
     width: 400px;
   `,
   DialogContent: styled.div`