From e885b20608a6dc55dc56198556fdf9c02f96f95e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=96=91=ED=98=9C=EC=A7=84?= Date: Mon, 15 Jul 2024 14:55:51 +0900 Subject: [PATCH 1/2] docs: add Dialog documentation --- .../stories/components/Dialog/DialogDocs.mdx | 181 ++++++++++++++++++ 1 file changed, 181 insertions(+) create mode 100644 packages/design-system/src/stories/components/Dialog/DialogDocs.mdx diff --git a/packages/design-system/src/stories/components/Dialog/DialogDocs.mdx b/packages/design-system/src/stories/components/Dialog/DialogDocs.mdx new file mode 100644 index 00000000..e5f0c4b1 --- /dev/null +++ b/packages/design-system/src/stories/components/Dialog/DialogDocs.mdx @@ -0,0 +1,181 @@ +import { Canvas, Stories, Controls, Meta, Story } from "@storybook/blocks"; +import { Error } from "@lunit/design-system-icons"; + +import Dialog from "@/components/Dialog"; +import * as DialogStories from "./Dialog.stories"; + + + +# Dialog + +Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks. +Dialogs are rendered in a [Portal](https://react.dev/reference/react-dom/createPortal) and are not affected by the z-index of the parent component. + +## Usage + +### Basic Dialog + +```tsx +import { Dialog } from "@lunit/design-system"; +// or +import Dialog from "@lunit/design-system/Dialog"; + +; +``` + +### Demo + +The Dialog demo cannot be seen in the mdx canvas since it is rendered in a [Portal](https://react.dev/reference/react-dom/createPortal). +Please go to the stories to see the demo. + + + +### IsOpen + +The `isOpen` prop is used to control the render of the Dialog.
+If it is set to `false`, the Dialog will not be rendered in the DOM. + +```tsx + + Lorem Ipsum is simply dummy text of the a printing and typesetting industry + +``` + +### Dismiss(onClose, enableBackButtonClose, enableBackdropClick) + +The `onClose` prop is used to close the Dialog. You can pass a function to the prop to close the Dialog.
+If the `enableBackButtonClick` prop is set to `true`, the Dialog will be closed when the back button(escape/backspace key) is pressed.
+If the `enableBackdropClose` prop is set to `true`, the Dialog will be closed when the backdrop(outside of the dialog area) is clicked.
+ +
+The `enableBackButtonClick` is awalys `true` in Passive Modal, but it is optional +in Action Modal.
+The `enableBackdropClose` is awalys `true` only in Passive Modal. + +```tsx + + Lorem Ipsum is simply dummy text of the a printing and typesetting industry + + + Lorem Ipsum is simply dummy text of the a printing and typesetting industry + +``` + +### Type + +The Dialog Modal has 2 types: passive and action.
+Passive modals are persistent until dismissed in one of the ways mentioned above.
+Action modals must have actions and are dismissed when the user clicks on one of the actions (backdrop close is also optional).
+ +```tsx + + Lorem Ipsum is simply dummy text of the a printing and typesetting industry + + + Lorem Ipsum is simply dummy text of the a printing and typesetting industry + + +``` + +### NonModal + +The nonModal prop renders the Dialog as a non-modal Dialog.
+Non-modal Dialogs provide non-critical information and do not block the user's interaction with the rest of the application.
+Non-modal Dialogs have an action type only.
+ +```tsx + + Lorem Ipsum is simply dummy text of the a printing and typesetting industry + +``` + +### Title(Title, titleIcon, titleVariant) + +The `title` prop sets the title of the Dialog.
+The `titleIcon` prop sets the icon of the title.
+The `titleVariant` prop sets the variant of the title icon.
+ +```tsx +} + titleVariant="error" +> + Lorem Ipsum is simply dummy text of the a printing and typesetting industry + +``` + +### Children + +The `children` prop sets the content of the Dialog.
+You can pass any component to the children prop. + +```tsx + + Lorem Ipsum is simply dummy text of the a printing and typesetting industry + +``` + +### Actions + +The `actions` prop sets the actions of the Dialog.
+You can pass any component to the actions prop only when the type of the modal is action. + +```tsx + + Lorem Ipsum is simply dummy text of the a printing and typesetting industry + +``` + +### Size + +The Dialog has 3 sizes: `small` and `medium`. + +```tsx + + Lorem Ipsum is simply dummy text of the a printing and typesetting industry + + + + Lorem Ipsum is simply dummy text of the a printing and typesetting industry + +``` + +## Reference + +- [Material-UI Dialog](https://mui.com/material-ui/react-dialog/) +- [Material-UI Dialog API](https://mui.com/material-ui/api/dialog/) +- [Lunit Design System Dialog Figma](https://www.figma.com/design/9CoirIDPof6exynJosiGXi/Design-System_2.0.0_Latest?node-id=474-56088&m=dev) + +## Support + +- Github: [Create a new issue](https://github.com/lunit-io/design-system/issues/new) +- Slack: #tf_design_system From 4c1c9f21f960ff9b7a6342c2d1f4ef1facc560a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=96=91=ED=98=9C=EC=A7=84?= Date: Mon, 15 Jul 2024 14:56:36 +0900 Subject: [PATCH 2/2] chore: remove unused variable --- packages/design-system/src/components/Dialog/Dialog.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/design-system/src/components/Dialog/Dialog.tsx b/packages/design-system/src/components/Dialog/Dialog.tsx index 97ec54b6..23703483 100644 --- a/packages/design-system/src/components/Dialog/Dialog.tsx +++ b/packages/design-system/src/components/Dialog/Dialog.tsx @@ -71,7 +71,6 @@ function Dialog(props: DialogProps) { const isActionModal = type === "action" && !nonModal; const isPassiveModal = type === "passive" && !nonModal; - const isActionNonModal = type === "action" && nonModal; function handleBackdropClose(e: React.MouseEvent) { const isClosable =