Add Dialog to components (#185)

* Add Dialog to components

* Add option to showOverlay

src/components/Dialog/Dialog.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import * as RadixDialog from "@radix-ui/react-dialog";
 import styled, { keyframes } from "styled-components";
 import { Button, Icon, Spacer, Title } from "@/components";
@@ -16,11 +16,7 @@ const Trigger = styled(RadixDialog.Trigger)`
   cursor: pointer;
 `;
 
-interface DialogTriggerProps extends RadixDialog.DialogTriggerProps {
-  children: React.ReactNode;
-}
-
-const DialogTrigger = ({ children, ...props }: DialogTriggerProps) => {
+const DialogTrigger = ({ children, ...props }: RadixDialog.DialogTriggerProps) => {
   return <Trigger {...props}>{children}</Trigger>;
 };
 
@@ -100,13 +96,14 @@ const CloseButton = ({ onClose }: { onClose?: () => void }) => (
   </RadixDialog.Close>
 );
 
-interface DialogContentProps extends RadixDialog.DialogContentProps {
+export interface DialogContentProps extends RadixDialog.DialogContentProps {
   title: string;
   showClose?: boolean;
   forceMount?: true;
   container?: HTMLElement | null;
   children: ReactNode;
   onClose?: () => void;
+  showOverlay?: boolean;
 }
 
 const DialogContent = ({
@@ -116,13 +113,14 @@ const DialogContent = ({
   onClose,
   forceMount,
   container,
+  showOverlay = true,
 }: DialogContentProps) => {
   return (
     <RadixDialog.Portal
       forceMount={forceMount}
       container={container}
     >
-      <DialogOverlay />
+      {showOverlay && <DialogOverlay />}
       <ContentArea>
         <TitleArea>
           <Title

src/components/index.ts

@@ -15,6 +15,7 @@ export { CardSecondary } from "./CardSecondary/CardSecondary";
 export { CardPrimary } from "./CardPrimary/CardPrimary";
 export { Checkbox } from "./Checkbox/Checkbox";
 export { CodeBlock } from "./CodeBlock/CodeBlock";
+export { Dialog } from "./Dialog/Dialog";
 export { EllipsisContent } from "./EllipsisContent/EllipsisContent";
 export { Flyout } from "./Flyout/Flyout";
 export { InlineCodeBlock } from "./CodeBlock/InlineCodeBlock";

src/components/types.ts

@@ -32,6 +32,8 @@ export type { SelectOptionListItem } from "./Select/common/types";
 export type { MultiSelectProps } from "./Select/MultiSelect";
 export type { PanelProps } from "./Panel/Panel";
 export type { FlyoutProps, FlyoutFooterProps, FlyoutHeaderProps } from "./Flyout/Flyout";
+export type { DialogContentProps } from "./Dialog/Dialog";
+export type { DialogProps, DialogTriggerProps } from "@radix-ui/react-dialog";
 
 export type States = "default" | "active" | "disabled" | "error" | "hover";
 export type HorizontalDirection = "start" | "end";