feat: Dialog Overlay

packages/components/src/dialog/Dialog.tsx

@@ -2,15 +2,11 @@ import React from 'react';
 import { DialogProps as ReachDialogProps } from '@reach/dialog';
 
 import IconClose from '../private/icons/IconClose';
+import DialogOverlay from '../dialogOverlay/DialogOverlay';
 
 import { DialogToggle, DialogToggleText } from './private/toggle';
 import { DialogPosition, DialogMaxWidth } from './private/types';
-import {
-  DialogContainer,
-  DialogContent,
-  DialogMain,
-  DialogOverlay,
-} from './private/layout';
+import { DialogContainer, DialogContent, DialogMain } from './private/layout';
 
 export type DialogProps = ReachDialogProps &
   DialogPosition &

packages/components/src/dialogOverlay/DialogOverlay.tsx

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+import rgba from 'polished/lib/color/rgba';
+import { DialogOverlay as ReachDialogOverlay } from '@reach/dialog';
+
+/**
+ * For further info, see the Reach UI documentation:
+ * https://ui.reach.tech/dialog/
+ */
+const DialogOverlay = styled<any>(ReachDialogOverlay)(
+  ({ theme: { color, zIndex } }) => ({
+    position: 'fixed',
+    top: '0',
+    right: '0',
+    bottom: '0',
+    left: '0',
+    overflow: 'auto',
+    backgroundColor: color.gohan[100] && rgba(color.gohan[100], 0.75),
+    zIndex: zIndex.dialog,
+  })
+);
+
+export default DialogOverlay;

packages/components/src/dialogOverlay/README.mdx

@@ -0,0 +1,39 @@
+---
+name: Dialog Overlay
+menu: Components
+route: /components/dialog-overlay
+---
+
+# Dialog Overlay
+
+A small pop-up window to display additional content or request action from the
+user.
+
+```jsx react-live
+() => {
+  const [showDialog, setShowDialog] = React.useState(false);
+
+  return (
+    <>
+      <Button variant="secondary" onClick={() => setShowDialog(true)}>
+        Open Dialog
+      </Button>
+      <DialogOverlay
+        isOpen={showDialog}
+        onDismiss={() => setShowDialog(false)}
+      />
+    </>
+  );
+};
+```
+
+## State
+
+Dialog is a styled extension of Reach UI's "Dialog" component, with state
+handled via `isOpen` and `onDismiss`. More information on these props, can be
+found in the [Reach UI documentation](https://ui.reach.tech/dialog).
+
+Examples on this page show usage with
+[React Hooks](https://reactjs.org/docs/hooks-intro.html), but this could also be
+handled via higher-order components or libaries such as
+[Recompose](https://github.com/acdlite/recompose).

packages/components/src/index.ts

@@ -56,6 +56,8 @@ export { default as weekStartsOn } from './datepicker/types/weekStartsOn';
 export * from './datepicker/types/weekStartsOn';
 export { default as Dialog } from './dialog/Dialog';
 export * from './dialog/Dialog';
+export { default as DialogOverlay } from './dialogOverlay/DialogOverlay';
+export * from './dialogOverlay/DialogOverlay';
 export { default as EmptyState } from './emptyState/EmptyState';
 export * from './emptyState/EmptyState';
 export { default as FileInput } from './fileInput/FileInput';