From 6b06149833d93400c1b27907a240f0e20dd4cea6 Mon Sep 17 00:00:00 2001 From: Jakub Prymak Date: Sat, 5 Mar 2022 23:48:05 +0100 Subject: [PATCH 1/3] change basic modal props so that it cannot be styled directly with them --- .../BasicModal/BasicModal.style.tsx | 103 +++--------------- src/components/BasicModal/BasicModal.tsx | 34 +----- 2 files changed, 16 insertions(+), 121 deletions(-) diff --git a/src/components/BasicModal/BasicModal.style.tsx b/src/components/BasicModal/BasicModal.style.tsx index 245442a..aca11f8 100644 --- a/src/components/BasicModal/BasicModal.style.tsx +++ b/src/components/BasicModal/BasicModal.style.tsx @@ -1,97 +1,22 @@ import { styled } from "@mui/material/styles"; - -import Box from "@mui/material/Box"; import Dialog from "@mui/material/Dialog"; -import { DialogTitle } from "@mui/material"; - -type DialogProps = { - paddings: Array; -}; - -type DialogTitleProps = { - alignTitle: "center" | "end" | "start"; - titleMargin: string; -}; -type ButtonBoxProps = { - buttonsTopMargin: string; -}; +export const StyledDialog = styled(Dialog)({ + overflowY: "auto", -export const IconBox = styled(Box)(({ theme }) => ({ - position: "absolute", - top: "-60px", - left: "50%", - transform: "translateX(-50%)", - boxSizing: "border-box", - minWidth: "112px", - minHeight: "112px", - display: "grid", - placeItems: "center", - borderRadius: "50%", - background: theme.palette.grey["100"], - - "& .MuiSvgIcon-root": { - width: "64px", - height: "64px", - color: theme.palette.grey["500"], + "& .MuiDialog-container": { + height: "auto", + minHeight: "100vh", }, -})); - -export const StyledDialog = styled(Dialog)( - ({ paddings, theme }) => ({ - overflowY: "auto", - "& .MuiDialog-container": { - height: "auto", - minHeight: "100vh", - }, - - "& .MuiPaper-root": { - boxSizing: "border-box", - marginBottom: "68px", - marginTop: "68px", - minWidth: "544px", - minHeight: "304px", - display: "flex", - alignItems: "center", - flexDirection: "column", - paddingTop: theme.spacing(paddings[0]), - paddingRight: theme.spacing(paddings[1]), - paddingBottom: theme.spacing(paddings[2]), - paddingLeft: theme.spacing(paddings[3]), - borderRadius: "8px", - overflow: "visible", - boxShadow: "0px 8px 16px rgba(98, 98, 98, 0.24)", - }, - - "& .MuiDialogContent-root": { - padding: 0, - minWidth: "100%", - width: 0, - }, - }) -); - -export const ButtonBox = styled(({ buttonsTopMargin, ...props }) => ( - -))(({ buttonsTopMargin }) => ({ - alignSelf: "flex-end", - marginTop: buttonsTopMargin, - boxShadow: "none", - border: "none", - - "& .MuiButtonBase-root:first-of-type": { - marginRight: "5px", + "& .MuiPaper-root": { + minWidth: "544px", + overflow: "visible", + boxShadow: "0px 8px 16px rgba(98, 98, 98, 0.24)", }, -})); -export const StyledDialogTitle = styled( - ({ alignTitle, titleMargin, ...props }) => -)(({ theme, alignTitle, titleMargin }) => ({ - width: "100%", - textAlign: alignTitle, - lineHeight: "32px", - fontSize: "24px", - padding: 0, - marginBottom: titleMargin, -})); + "& .MuiDialogContent-root": { + minWidth: "100%", + width: 0, + }, +}); diff --git a/src/components/BasicModal/BasicModal.tsx b/src/components/BasicModal/BasicModal.tsx index 9d72817..6f18682 100644 --- a/src/components/BasicModal/BasicModal.tsx +++ b/src/components/BasicModal/BasicModal.tsx @@ -1,54 +1,24 @@ -import { - StyledDialog, - IconBox, - ButtonBox, - StyledDialogTitle, -} from "./BasicModal.style"; -import DialogContent from "@mui/material/DialogContent"; - +import { StyledDialog } from "./BasicModal.style"; export interface BasicModalProps { - headerIcon?: JSX.Element; children?: JSX.Element | JSX.Element[]; - buttons: JSX.Element[]; handleClose?: () => void; isOpen: boolean; - /**paddings are calculated by taking mui theme spacing - * property and multiplying it by values in Array, calculated paddings are set clockwise, just like in normal css*/ - paddings: Array; - title?: string; - alignTitle: "center" | "end" | "start"; - /** Bottom title margin*/ - titleMargin?: number; - buttonsTopMargin?: number; } export default function BasicModal({ children, - headerIcon, isOpen, handleClose, - paddings, - title, - alignTitle, - titleMargin = 16, - buttons, - buttonsTopMargin = 32, }: BasicModalProps) { return ( - {headerIcon && {headerIcon}} - - {title} - - {children} - {buttons} + {children} ); } From f8423a7a774461dc3c7b0d0659752898ff748cc6 Mon Sep 17 00:00:00 2001 From: Jakub Prymak Date: Sat, 5 Mar 2022 23:50:09 +0100 Subject: [PATCH 2/3] adjust all components using basic modal to recent changes in this component --- .../BasicModal/BasicModal.stories.tsx | 98 +++++----- .../ConfirmationDialog.style.tsx | 20 +++ .../ConfirmationDialog/ConfirmationDialog.tsx | 34 ++-- .../CreateIssueDialog.style.tsx | 36 +++- .../CreateIssueDialog/CreateIssueDialog.tsx | 170 +++++++++--------- .../NewProjectDialog.style.tsx | 47 +++++ .../NewProjectDialog/NewProjectDialog.tsx | 74 ++++---- src/views/SecondPage/SecondPage.tsx | 6 +- 8 files changed, 303 insertions(+), 182 deletions(-) create mode 100644 src/modules/ConfirmationDialog/ConfirmationDialog.style.tsx create mode 100644 src/modules/NewProjectDialog/NewProjectDialog.style.tsx diff --git a/src/components/BasicModal/BasicModal.stories.tsx b/src/components/BasicModal/BasicModal.stories.tsx index 66eb267..c04b119 100644 --- a/src/components/BasicModal/BasicModal.stories.tsx +++ b/src/components/BasicModal/BasicModal.stories.tsx @@ -7,6 +7,13 @@ import BasicModal from "@components/BasicModal/BasicModal"; import { Button } from "@components/Button/Button"; import Input from "@components/Input/Input"; +import { + ButtonBox, + IconBox, + StyledDialogTitle, + NewProjectDialogContent, +} from "@modules/NewProjectDialog/NewProjectDialog.style"; + export default { title: "BasicModal", component: BasicModal, @@ -25,55 +32,57 @@ export const CreateProjectWithError = Template.bind({}); export const LongModal = Template.bind({}); CreateProject.args = { - buttons: [ - , - , - ], - children: , - paddings: [10, 6, 7, 6], + children: ( + + + + + {"Name your project"} + + + + + + + ), isOpen: true, - headerIcon: , - title: "Name your project", - alignTitle: "center", }; CreateProjectWithError.args = { - buttons: [ - , - , - ], children: ( - + + + + + {"Name your project"} + + + + + + ), - paddings: [10, 6, 7, 6], isOpen: true, - headerIcon: , - title: "Name your project", - alignTitle: "center", }; LongModal.args = { - buttons: [ - , - ], children: ( - <> + @@ -81,10 +90,15 @@ LongModal.args = { - + + + + + ), - paddings: [10, 6, 7, 6], isOpen: true, - title: "Form", - alignTitle: "start", }; diff --git a/src/modules/ConfirmationDialog/ConfirmationDialog.style.tsx b/src/modules/ConfirmationDialog/ConfirmationDialog.style.tsx new file mode 100644 index 0000000..8aa74e4 --- /dev/null +++ b/src/modules/ConfirmationDialog/ConfirmationDialog.style.tsx @@ -0,0 +1,20 @@ +import { styled } from "@mui/material/styles"; + +import Box from "@mui/material/Box"; +import { DialogContent } from "@mui/material"; + +export const ConfirmationDialogContent = styled(DialogContent)({ + boxSizing: "border-box", + display: "flex", + alignItems: "stretch", + flexDirection: "column", + padding: "120px 48px 56px 48px", +}); + +export const ButtonBox = styled(Box)({ + alignSelf: "flex-end", + marginTop: "32px", + "& .MuiButtonBase-root:first-of-type": { + marginRight: "5px", + }, +}); diff --git a/src/modules/ConfirmationDialog/ConfirmationDialog.tsx b/src/modules/ConfirmationDialog/ConfirmationDialog.tsx index 04f0bef..095bc65 100644 --- a/src/modules/ConfirmationDialog/ConfirmationDialog.tsx +++ b/src/modules/ConfirmationDialog/ConfirmationDialog.tsx @@ -4,6 +4,11 @@ import { Button } from "@components/Button/Button"; import { useTranslation } from "react-i18next"; import { Typography } from "@mui/material"; +import { + ConfirmationDialogContent, + ButtonBox, +} from "./ConfirmationDialog.style"; + export interface ConfirmationDialogProps { children: string | JSX.Element | JSX.Element[]; confirmHandler: () => void; @@ -23,24 +28,19 @@ export const ConfirmationDialog = ({ confirmHandler(); }; - const buttons = [ - , - , - ]; - return ( - - {children} + + + {children} + + + + + ); }; diff --git a/src/modules/CreateIssueDialog/CreateIssueDialog.style.tsx b/src/modules/CreateIssueDialog/CreateIssueDialog.style.tsx index 6201d36..15bf30f 100644 --- a/src/modules/CreateIssueDialog/CreateIssueDialog.style.tsx +++ b/src/modules/CreateIssueDialog/CreateIssueDialog.style.tsx @@ -1,8 +1,28 @@ import { styled } from "@mui/material/styles"; import { FormGroup } from "@mui/material"; +import { DialogContent } from "@mui/material"; +import { DialogTitle } from "@mui/material"; +import Box from "@mui/material/Box"; + import Input from "@components/Input/Input"; -export const StyledFormGroup = styled(FormGroup)(() => ({ +export const CreateIssueDialogContent = styled(DialogContent)({ + boxSizing: "border-box", + display: "flex", + alignItems: "stretch", + flexDirection: "column", + padding: "40px 40px 24px 40px", +}); + +export const StyledDialogTitle = styled(DialogTitle)({ + textAlign: "start", + lineHeight: "24px", + fontSize: "24px", + padding: 0, + marginBottom: "32px", +}); + +export const StyledFormGroup = styled(FormGroup)({ "& .MuiFormControl-root:not(.MuiFormControl-root:last-of-type)": { marginBottom: "16px", }, @@ -12,8 +32,16 @@ export const StyledFormGroup = styled(FormGroup)(() => ({ "&& .MuiFormControl-root:nth-of-type(5)": { margin: "0px", }, -})); +}); -export const LongInput = styled(Input)(() => ({ +export const LongInput = styled(Input)({ width: "100% !important", -})); +}); + +export const ButtonBox = styled(Box)({ + alignSelf: "flex-end", + marginTop: "32px", + "& .MuiButtonBase-root:first-of-type": { + marginRight: "5px", + }, +}); diff --git a/src/modules/CreateIssueDialog/CreateIssueDialog.tsx b/src/modules/CreateIssueDialog/CreateIssueDialog.tsx index a804135..4b3cab2 100644 --- a/src/modules/CreateIssueDialog/CreateIssueDialog.tsx +++ b/src/modules/CreateIssueDialog/CreateIssueDialog.tsx @@ -5,7 +5,13 @@ import { Button } from "@components/Button/Button"; import Input from "@components/Input/Input"; import { Select } from "@components/Select/Select"; -import { StyledFormGroup, LongInput } from "./CreateIssueDialog.style"; +import { + StyledFormGroup, + LongInput, + CreateIssueDialogContent, + ButtonBox, + StyledDialogTitle, +} from "./CreateIssueDialog.style"; import useForm from "../../hooks/useForm"; import { validateInfo } from "../../validation/validateCreateIssue"; @@ -50,89 +56,85 @@ export default function CreateIssueDialog({ } return ( - - {t("cancelBtn")} - , - , - ]} - > - - - - - + + + {t("createIssue")} + + + + + + + + + + ); } diff --git a/src/modules/NewProjectDialog/NewProjectDialog.style.tsx b/src/modules/NewProjectDialog/NewProjectDialog.style.tsx new file mode 100644 index 0000000..7f9dff7 --- /dev/null +++ b/src/modules/NewProjectDialog/NewProjectDialog.style.tsx @@ -0,0 +1,47 @@ +import { styled } from "@mui/material/styles"; + +import Box from "@mui/material/Box"; +import { DialogTitle, DialogContent } from "@mui/material"; + +export const NewProjectDialogContent = styled(DialogContent)({ + boxSizing: "border-box", + display: "flex", + alignItems: "stretch", + flexDirection: "column", + padding: "80px 48px 56px 48px", +}); + +export const IconBox = styled(Box)(({ theme }) => ({ + position: "absolute", + top: "-60px", + left: "50%", + transform: "translateX(-50%)", + minWidth: "112px", + minHeight: "112px", + display: "grid", + placeItems: "center", + borderRadius: "50%", + background: theme.palette.grey[100], + + "& .MuiSvgIcon-root": { + width: "64px", + height: "64px", + color: theme.palette.grey[500], + }, +})); + +export const StyledDialogTitle = styled(DialogTitle)({ + textAlign: "center", + lineHeight: "32px", + fontSize: "24px", + padding: 0, + marginBottom: "16px", +}); + +export const ButtonBox = styled(Box)(() => ({ + alignSelf: "flex-end", + marginTop: "32px", + "& .MuiButtonBase-root:first-of-type": { + marginRight: "5px", + }, +})); diff --git a/src/modules/NewProjectDialog/NewProjectDialog.tsx b/src/modules/NewProjectDialog/NewProjectDialog.tsx index 4fb9cd7..f033261 100644 --- a/src/modules/NewProjectDialog/NewProjectDialog.tsx +++ b/src/modules/NewProjectDialog/NewProjectDialog.tsx @@ -2,11 +2,18 @@ import { useState, useEffect, useRef, Dispatch, SetStateAction } from "react"; import { useNavigate } from "react-router-dom"; import { useTranslation } from "react-i18next"; import EditIcon from "@mui/icons-material/Edit"; +import { LoadingButton } from "@mui/lab"; import BasicModal from "@components/BasicModal/BasicModal"; import { Button } from "@components/Button/Button"; import Input from "@components/Input/Input"; -import { LoadingButton } from "@mui/lab"; + +import { + ButtonBox, + IconBox, + StyledDialogTitle, + NewProjectDialogContent, +} from "./NewProjectDialog.style"; import { Pages } from "../../views/pages"; import { createNewProjectPattern } from "../../validation/patterns.const"; @@ -75,40 +82,39 @@ export default function NewProjectDialog({ } }; return ( - } - title={dialogTitle} - alignTitle='center' - handleClose={handleClose} - buttons={[ - , - isLoading ? ( - - ) : ( - - ), - ]} - > - + {isLoading ? ( + + ) : ( + + )} + + ); } diff --git a/src/views/SecondPage/SecondPage.tsx b/src/views/SecondPage/SecondPage.tsx index ce8f661..8a18219 100644 --- a/src/views/SecondPage/SecondPage.tsx +++ b/src/views/SecondPage/SecondPage.tsx @@ -10,6 +10,7 @@ import { Counter } from "@components/Counter/Counter"; import ProjectCard from "@components/ProjectCard"; import ThreeDotsMenu from "@components/ThreeDotsMenu/ThreeDotsMenu"; import TasksCard from "@modules/TasksCard"; +import CreateIssueDialog from "@modules/CreateIssueDialog/CreateIssueDialog"; //Store import { useDispatch } from "react-redux"; @@ -49,7 +50,10 @@ export const SecondPage = () => { return (

{t("paragraph3")}

- {/* */} + setIsCreateIssueModalOpen(false)} + /> From aecf5e5876efc66191c9e0f365c1b7ec89586dc1 Mon Sep 17 00:00:00 2001 From: Jakub Prymak Date: Sun, 6 Mar 2022 15:11:21 +0100 Subject: [PATCH 3/3] remove unnecessary intermediary StyledDialog component and adjust components which used it accordingly --- .../BasicModal/BasicModal.stories.tsx | 27 ++++++++++++++++--- .../BasicModal/BasicModal.style.tsx | 4 ++- src/components/BasicModal/BasicModal.tsx | 25 +---------------- .../ConfirmationDialog/ConfirmationDialog.tsx | 8 +++--- .../CreateIssueDialog/CreateIssueDialog.tsx | 5 ++-- .../NewProjectDialog/NewProjectDialog.tsx | 16 +++-------- 6 files changed, 38 insertions(+), 47 deletions(-) diff --git a/src/components/BasicModal/BasicModal.stories.tsx b/src/components/BasicModal/BasicModal.stories.tsx index c04b119..f50d9e4 100644 --- a/src/components/BasicModal/BasicModal.stories.tsx +++ b/src/components/BasicModal/BasicModal.stories.tsx @@ -49,7 +49,14 @@ CreateProject.args = { ), - isOpen: true, + open: true, +}; + +CreateProject.parameters = { + controls: { + include: ["onClose", "open", "children"], + sort: "alpha", + }, }; CreateProjectWithError.args = { @@ -77,7 +84,14 @@ CreateProjectWithError.args = { ), - isOpen: true, + open: true, +}; + +CreateProjectWithError.parameters = { + controls: { + include: ["onClose", "open", "children"], + sort: "alpha", + }, }; LongModal.args = { @@ -100,5 +114,12 @@ LongModal.args = { ), - isOpen: true, + open: true, +}; + +LongModal.parameters = { + controls: { + include: ["onClose", "open", "children"], + sort: "alpha", + }, }; diff --git a/src/components/BasicModal/BasicModal.style.tsx b/src/components/BasicModal/BasicModal.style.tsx index aca11f8..485afa6 100644 --- a/src/components/BasicModal/BasicModal.style.tsx +++ b/src/components/BasicModal/BasicModal.style.tsx @@ -1,7 +1,7 @@ import { styled } from "@mui/material/styles"; import Dialog from "@mui/material/Dialog"; -export const StyledDialog = styled(Dialog)({ +const BasicModal = styled(Dialog)({ overflowY: "auto", "& .MuiDialog-container": { @@ -20,3 +20,5 @@ export const StyledDialog = styled(Dialog)({ width: 0, }, }); + +export default BasicModal; diff --git a/src/components/BasicModal/BasicModal.tsx b/src/components/BasicModal/BasicModal.tsx index 6f18682..95d92fe 100644 --- a/src/components/BasicModal/BasicModal.tsx +++ b/src/components/BasicModal/BasicModal.tsx @@ -1,24 +1 @@ -import { StyledDialog } from "./BasicModal.style"; -export interface BasicModalProps { - children?: JSX.Element | JSX.Element[]; - handleClose?: () => void; - isOpen: boolean; -} - -export default function BasicModal({ - children, - isOpen, - handleClose, -}: BasicModalProps) { - return ( - - {children} - - ); -} +export { default } from "./BasicModal.style"; diff --git a/src/modules/ConfirmationDialog/ConfirmationDialog.tsx b/src/modules/ConfirmationDialog/ConfirmationDialog.tsx index 095bc65..77a47fb 100644 --- a/src/modules/ConfirmationDialog/ConfirmationDialog.tsx +++ b/src/modules/ConfirmationDialog/ConfirmationDialog.tsx @@ -1,5 +1,5 @@ import { MouseEventHandler, SyntheticEvent, useState } from "react"; -import BasicModal, { BasicModalProps } from "@components/BasicModal/BasicModal"; +import BasicModal from "@components/BasicModal/BasicModal"; import { Button } from "@components/Button/Button"; import { useTranslation } from "react-i18next"; import { Typography } from "@mui/material"; @@ -29,14 +29,14 @@ export const ConfirmationDialog = ({ }; return ( - + {children} - - diff --git a/src/modules/CreateIssueDialog/CreateIssueDialog.tsx b/src/modules/CreateIssueDialog/CreateIssueDialog.tsx index 4b3cab2..ce1db7e 100644 --- a/src/modules/CreateIssueDialog/CreateIssueDialog.tsx +++ b/src/modules/CreateIssueDialog/CreateIssueDialog.tsx @@ -56,7 +56,7 @@ export default function CreateIssueDialog({ } return ( - + {t("createIssue")} @@ -123,13 +123,12 @@ export default function CreateIssueDialog({ /> - diff --git a/src/modules/NewProjectDialog/NewProjectDialog.tsx b/src/modules/NewProjectDialog/NewProjectDialog.tsx index f033261..4d64880 100644 --- a/src/modules/NewProjectDialog/NewProjectDialog.tsx +++ b/src/modules/NewProjectDialog/NewProjectDialog.tsx @@ -82,7 +82,7 @@ export default function NewProjectDialog({ } }; return ( - + @@ -95,21 +95,13 @@ export default function NewProjectDialog({ helperText={error} /> - {isLoading ? ( - + ) : ( - )}