[PLAY-203] Full-height Variant for Dialog

playbook/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -62,6 +62,7 @@
 	$status_size: 375px;
 	$medium: 500px;
 	$large: 800px;
+	$xlarge: 1150px;
 	$animation-duration: 0.2s;
 	$z-index: 100;
 	$opacity_visible: 1;
@@ -71,14 +72,15 @@
 	background-color: $white;
 	box-shadow: $shadow_deepest;
 	border: 0;
+	border-radius: 0;
 	max-height: calc(100vh - #{$gutter * 2});
 	max-width: calc(100vw - #{$gutter * 2});
 	overflow: auto;
 	animation-name: modalFadeIn;
 	animation-duration: $animation-duration;
 	outline: none;
 	animation-timing-function: $easeInOutQuint;
-
+	
 	&[class*="_status_size"] {
 		width: $status_size;
 	}
@@ -135,5 +137,34 @@
 			animation-duration: $animation-duration;
 			opacity: $opacity_hidden;
 		}
+		&[class*="full_height"] {
+
+			&[class*="_left"]{
+				justify-content: flex-start;
+			}
+
+			&[class*="_center"]{
+				justify-content: center;
+			}
+
+			&[class*="_right"]{
+				justify-content: flex-end;
+			}
+
+			.pb_dialog {
+				height: 100%;
+				max-height: 100%;
+				max-width: none;
+				&[class*="_sm"] {
+					width: $medium;
+				}
+				&[class*="_md"] {
+					width: $large;
+				}
+				&[class*="_lg"] {
+					width: $xlarge;
+				}
+			}
+		}
 	}
 }

playbook/app/pb_kits/playbook/pb_dialog/_dialog.tsx

@@ -27,15 +27,17 @@ type DialogProps = {
   confirmButton?: string;
   data?: object;
   id?: string;
+  fullHeight?: boolean;
   loading?: boolean;
   onCancel?: () => void;
   onChange?: () => void;
   onClose?: () => void;
   onConfirm?: () => void;
   opened: boolean;
   portalClassName?: string;
+  placement?: "left" | "center" | "right";
   shouldCloseOnOverlayClick: boolean;
-  size?: "sm" | "md" | "lg" | "status_size" | "content";
+  size?: "sm" | "md" | "lg" | "xl" | "status_size" | "content";
   status?: "info" | "caution" | "delete" | "error" | "success";
   text?: string;
   title?: string;
@@ -53,10 +55,12 @@ const Dialog = (props: DialogProps) => {
     size = "md",
     children,
     loading = false,
+    fullHeight = false,
     opened,
     onCancel = () => {},
     onConfirm = () => {},
     onClose = () => {},
+    placement = "center",
     portalClassName,
     shouldCloseOnOverlayClick = true,
     status,
@@ -72,8 +76,14 @@ const Dialog = (props: DialogProps) => {
     beforeClose: "pb_dialog_before_close",
   };
 
+  const fullHeightClassNames = () => {
+    if(!fullHeight) return null
+    if(size === "xl") return `full_height_center`
+    return `full_height_${placement}`
+  }
+
   const overlayClassNames = {
-    base: "pb_dialog_overlay",
+    base: `pb_dialog_overlay ${fullHeight !== null && fullHeightClassNames() }`,
     afterOpen: "pb_dialog_overlay_after_open",
     beforeClose: "pb_dialog_overlay_before_close",
   };

playbook/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx

@@ -9,10 +9,10 @@ import SectionSeparator from '../../pb_section_separator/_section_separator'
 
 
 type DialogFooterProps = {
-  aria?: object,
+  aria?: {[key: string]: string},
   children: React.ReactChild[] | React.ReactChild | string,
   className?: string,
-  data?: object,
+  data?: {[key: string]: string},
   id?: string,
   padding?: string,
   paddingBottom?: string,
@@ -39,7 +39,7 @@ const DialogFooter = (props: DialogFooterProps) => {
   return (
     <>
       {separator &&
-        <SectionSeparator aria={{dd: 'ff'}} className="dd" data={{dd: 'ff'}} id="d" text="ss"/>
+        <SectionSeparator />
       }
       <Flex
           className={classnames(footerCSS, footerSpacing, className)}

playbook/app/pb_kits/playbook/pb_dialog/dialog.test.jsx

@@ -8,7 +8,7 @@ const size="sm"
 const confirmButton="Okay"
 const cancelButton="Cancel Button"
 
-function DialogTest() {
+function DialogTest({ props }) {
   const [isOpen, setIsOpen] = useState(false)
   const close = () => setIsOpen(false)
   const open = () => setIsOpen(true)
@@ -29,6 +29,7 @@ function DialogTest() {
           size={size}
           text={text}
           title={title}
+          {...props}
       />
     </>
   );
@@ -71,6 +72,19 @@ test("renders the title and body text", async () => {
   cleanup()
 });
 
+test("renders the full height version", async () => {
+
+  const { queryByText } = render(<DialogTest fullHeight />);
+
+  fireEvent.click(queryByText('Open Dialog'));
+
+  await waitFor(() => expect(queryByText("Header Title is the Title Prop")).toHaveTextContent(title));
+
+  await waitFor(() => expect(queryByText("Hello Body Text, Nice to meet ya.")).toHaveTextContent(text));
+
+  cleanup()
+});
+
 test("renders the buttons", async () => {
 
   const { queryByText } = render(<DialogTest />);
@@ -82,4 +96,5 @@ test("renders the buttons", async () => {
   await waitFor(() => expect(queryByText("Cancel Button")).toHaveTextContent(cancelButton));
 
   cleanup()
-});
+});
+

playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx

@@ -17,6 +17,7 @@ const DialogCompound = () => {
     <>
       <Button onClick={open}>{'Open a Complex Dialog'}</Button>
       <Dialog
+          fullHeight
           onClose={close}
           opened={isOpen}
           size="lg"

playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx

@@ -0,0 +1,103 @@
+import React, { useState } from "react";
+import {
+  Body,
+  Button,
+  Caption,
+  Dialog,
+  Flex,
+  RichTextEditor,
+  Typeahead,
+} from "../..";
+
+const useDialog = (visible = false) => {
+  const [opened, setOpened] = useState(visible);
+  const toggle = () => setOpened(!opened);
+
+  return [opened, toggle];
+};
+
+const DialogFullHeight = () => {
+  const [headerSeparatorDialogOpened, toggleHeaderSeparatorDialog] =
+    useDialog();
+  const [footerSeparatorDialogOpened, toggleFooterSeparatorDialog] =
+    useDialog();
+  const [bothSeparatorsDialogOpened, toggleBothSeparatorsDialog] = useDialog();
+
+  const dialogs = [
+    {
+      size: "sm",
+      title: "Small Dialog",
+      toggle: toggleHeaderSeparatorDialog,
+      visible: headerSeparatorDialogOpened,
+    },
+    {
+      size: "md",
+      title: "Medium Dialog",
+      toggle: toggleFooterSeparatorDialog,
+      visible: footerSeparatorDialogOpened,
+    },
+    {
+      size: "lg",
+      title: "Large Dialog",
+      toggle: toggleBothSeparatorsDialog,
+      visible: bothSeparatorsDialogOpened,
+    },
+  ];
+
+  return (
+    <>
+      <Flex wrap>
+        <Button id="sm"
+            marginRight="xl"
+            onClick={toggleHeaderSeparatorDialog}>
+          {"Small Dialog"}
+        </Button>
+        <Button marginRight="xl"
+            onClick={toggleFooterSeparatorDialog}>
+          {"Medium Dialog"}
+        </Button>
+        <Button marginRight="xl"
+            onClick={toggleBothSeparatorsDialog}>
+          {"Large Dialog"}
+        </Button>
+      </Flex>
+      <Flex>
+        {dialogs.map(({toggle, visible, placement, size, title}, index) => (
+          <Dialog
+              fullHeight
+              key={index}
+              onClose={toggle}
+              opened={visible}
+              placement={placement}
+              size={size}
+          >
+            <Dialog.Header>
+              <Body>{title}</Body>
+            </Dialog.Header>
+            <Dialog.Body>
+              <Caption marginBottom="xs">{"Description"}</Caption>
+              <RichTextEditor />
+              <br />
+              <Caption>
+                {
+                  "Type in a word or term too help find tickets later. ex. training,"
+                }
+                {"phone setup, hr"}
+              </Caption>
+              <Typeahead placeholder="Tags.." />
+            </Dialog.Body>
+            <Dialog.Footer>
+              <Button onClick={toggle}>{"Send My Issue"}</Button>
+              <Button onClick={toggle}
+                  variant="link">
+                {"Back"}
+              </Button>
+            </Dialog.Footer>
+          </Dialog>
+        ))}
+      </Flex>
+    </>
+  );
+};
+
+export default DialogFullHeight;

playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.md

@@ -0,0 +1,2 @@
+The full height dialog can be size small, medium, and large
+They may be left, center or right aligned. Except for the Xlarge dialog which should only be center aligned.

playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx

@@ -0,0 +1,102 @@
+import React, { useState } from "react";
+import {
+  Body,
+  Button,
+  Caption,
+  Dialog,
+  Flex,
+  RichTextEditor,
+  Typeahead,
+} from "../..";
+
+const useDialog = (visible = false) => {
+  const [opened, setOpened] = useState(visible);
+  const toggle = () => setOpened(!opened);
+
+  return [opened, toggle];
+};
+
+const DialogFullHeightPlacement = () => {
+  const [headerSeparatorDialogOpened, toggleHeaderSeparatorDialog] =
+    useDialog();
+  const [footerSeparatorDialogOpened, toggleFooterSeparatorDialog] =
+    useDialog();
+  const [bothSeparatorsDialogOpened, toggleBothSeparatorsDialog] = useDialog();
+
+  const dialogs = [
+    {
+      title: "Left Dialog",
+      toggle: toggleHeaderSeparatorDialog,
+      visible: headerSeparatorDialogOpened,
+      placement: "left",
+    },
+    {
+      title: "Center Dialog",
+      toggle: toggleFooterSeparatorDialog,
+      visible: footerSeparatorDialogOpened,
+    },
+    {
+      title: "Right Dialog",
+      toggle: toggleBothSeparatorsDialog,
+      visible: bothSeparatorsDialogOpened,
+      placement: "right",
+    },
+  ];
+
+  return (
+    <>
+      <Flex wrap>
+        <Button id="sm"
+            marginRight="xl"
+            onClick={toggleHeaderSeparatorDialog}>
+          {"Left Dialog"}
+        </Button>
+        <Button marginRight="xl"
+            onClick={toggleFooterSeparatorDialog}>
+          {"Center Dialog"}
+        </Button>
+        <Button marginRight="xl"
+            onClick={toggleBothSeparatorsDialog}>
+          {"Right Dialog"}
+        </Button>
+      </Flex>
+      <Flex>
+        {dialogs.map(({toggle, visible, placement, title}, index) => (
+          <Dialog
+              fullHeight
+              key={index}
+              onClose={toggle}
+              opened={visible}
+              placement={placement}
+              size={"md"}
+          >
+            <Dialog.Header>
+              <Body>{title}</Body>
+            </Dialog.Header>
+            <Dialog.Body>
+              <Caption marginBottom="xs">{"Description"}</Caption>
+              <RichTextEditor />
+              <br />
+              <Caption>
+                {
+                  "Type in a word or term too help find tickets later. ex. training,"
+                }
+                {"phone setup, hr"}
+              </Caption>
+              <Typeahead placeholder="Tags.." />
+            </Dialog.Body>
+            <Dialog.Footer>
+              <Button onClick={toggle}>{"Send My Issue"}</Button>
+              <Button onClick={toggle}
+                  variant="link">
+                {"Back"}
+              </Button>
+            </Dialog.Footer>
+          </Dialog>
+        ))}
+      </Flex>
+    </>
+  );
+};
+
+export default DialogFullHeightPlacement;

playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.md

@@ -0,0 +1,5 @@
+The full height dialog is centered by default, but the placement can changed via `placement` prop with one of the following values: `left`, `center`, `right`.
+
+The `large` variant will allways be centered even sending a preferred placement.
+
+All dialogs with the `fullHeight` prop will be displayed full-width on mobile screens.