RubyGems - playbook_ui - Versions diffs - 12.20.0.pre.alpha.movemarkdown668 → 12.20.0.pre.alpha.title2665 - Mend

playbook_ui 12.20.0.pre.alpha.movemarkdown668 → 12.20.0.pre.alpha.title2665

Files changed (1425) hide show

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx ADDED Viewed

@@ -0,0 +1,54 @@
+import React, { useState } from 'react'
+import {
+  Body,
+  Button,
+  Caption,
+  Dialog,
+  RichTextEditor,
+  Typeahead,
+} from '../../'
+const DialogCompound = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const close = () => setIsOpen(false)
+  const open = () => setIsOpen(true)
+  return (
+    <>
+      <Button onClick={open}>{'Open a Complex Dialog'}</Button>
+      <Dialog
+          fullHeight
+          onClose={close}
+          opened={isOpen}
+          size="lg"
+      >
+        <Dialog.Header>
+          <Body>{'What do you need us to take care of?'}</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={close}>{'Send My Issue'}</Button>
+          <Button
+              onClick={close}
+              variant="link"
+          >
+            {'Back'}
+          </Button>
+        </Dialog.Footer>
+      </Dialog>
+    </>
+  )
+}
+export default DialogCompound

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.md ADDED Viewed

@@ -0,0 +1,4 @@
+The dialog kit also supports customizing your dialog with a [compound component](https://kentcdodds.com/blog/compound-components-with-react-hooks) structure.
+This allows for greater flexibility and more complex dialogs.
+For the Rails version, when using the kit as a compound component it is necessary to pass the same value as the id for the dialog, the dialog header and the dialog footer in order for the opening and closing of the dialog to function as expected.

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb ADDED Viewed

@@ -0,0 +1,11 @@
+<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-1"} }) %>
+<%= pb_rails("dialog", props: {
+    id:"dialog-1",
+    size: "sm",
+    title: "Header Title is the Title Prop",
+    text: "Hello Body Text, Nice to meet ya.",
+    cancel_button: "Cancel Button",
+    confirm_button: "Okay",
+    confirm_button_id: "confirm-button-1"
+}) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx ADDED Viewed

@@ -0,0 +1,31 @@
+import React, { useState } from 'react'
+import { Button, Dialog } from '../../'
+const DialogDefault = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const close = () => setIsOpen(false)
+  const open = () => setIsOpen(true)
+  const [isLoading, setIsLoading] = useState(false)
+  return (
+    <>
+      <Button onClick={open}>{'Open Dialog'}</Button>
+      <Dialog
+          cancelButton="Cancel Button"
+          className="wrapper"
+          confirmButton="Okay"
+          loading={isLoading}
+          onCancel={close}
+          onClose={close}
+          onConfirm={() => setIsLoading(!isLoading)}
+          opened={isOpen}
+          portalClassName="portal"
+          size="sm"
+          text="Hello Body Text, Nice to meet ya."
+          title="Header Title is the Title Prop"
+      />
+    </>
+  )
+}
+export default DialogDefault

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.md ADDED Viewed

@@ -0,0 +1,3 @@
+For the Rails version of the dialog kit, the clickable element being used to open the dialog must be given a `open-dialog` data attribute with a value that is the same as the id being given to the dialog itself. See code example below to see this in action.
+Additionally, both the cancel button and the confirm button have optional id props which can be used to pass in a custom id to allow developers to target that button with custom javascript if needed (`confirm_button_id` and `cancel_button_id`).

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.html.erb ADDED Viewed

@@ -0,0 +1,58 @@
+<%= pb_rails("button", props: { text: "Small Dialog", data:{"open-dialog": "dialog-fullheight-sm"}, margin_right: "md" }) %>
+<%= pb_rails("button", props: { text: "Medium Dialog", data:{"open-dialog": "dialog-fullheight-md"}, margin_right: "md" }) %>
+<%= pb_rails("button", props: { text: "Large Dialog", data:{"open-dialog": "dialog-fullheight-lg"}, margin_right: "md" }) %>
+<%= pb_rails("dialog", props: {
+    id:"dialog-fullheight-sm",
+    size: "sm",
+    full_height: true,
+   }) do %>
+    <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-sm" } ) do %>
+        <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
+    <% end %>
+    <%= pb_rails("dialog/dialog_body") do %>
+        <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
+        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+        <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
+        <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
+    <% end %>
+    <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-sm"}) %>
+<% end %>
+<%= pb_rails("dialog", props: {
+    id:"dialog-fullheight-md",
+    size: "md",
+    full_height: true,
+     }) do %>
+        <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-md" } ) do %>
+            <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
+        <% end %>
+        <%= pb_rails("dialog/dialog_body") do %>
+            <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
+            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
+            <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
+        <% end %>
+        <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-md"}) %>
+<% end %>
+<%= pb_rails("dialog", props: {
+    id:"dialog-fullheight-lg",
+    size: "lg",
+    full_height: true,
+     }) do %>
+        <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-lg" } ) do %>
+            <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
+        <% end %>
+        <%= pb_rails("dialog/dialog_body") do %>
+            <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
+            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
+            <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
+        <% end %>
+        <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-lg"}) %>
+<% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx ADDED Viewed

@@ -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="md"
+            onClick={toggleHeaderSeparatorDialog}>
+          {"Small Dialog"}
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleFooterSeparatorDialog}>
+          {"Medium Dialog"}
+        </Button>
+        <Button marginRight="md"
+            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;

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ To render a full height Dialog, use the `fullHeight` (react) or `full_height` (rails) prop. A full height Dialog can be size small, medium, or large. By default it will be center aligned.

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.html.erb ADDED Viewed

@@ -0,0 +1,58 @@
+<%= pb_rails("button", props: { text: "Left Dialog", data:{"open-dialog": "dialog-fullheight-left"}, margin_right: "md" }) %>
+<%= pb_rails("button", props: { text: "Center Dialog", data:{"open-dialog": "dialog-fullheight-center"}, margin_right: "md" }) %>
+<%= pb_rails("button", props: { text: "Right Dialog", data:{"open-dialog": "dialog-fullheight-right"}, margin_right: "md" }) %>
+<%= pb_rails("dialog", props: {
+    id:"dialog-fullheight-left",
+    size: "md",
+    full_height: true,
+    placement: "left",
+   }) do %>
+    <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-left" } ) do %>
+        <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
+    <% end %>
+    <%= pb_rails("dialog/dialog_body") do %>
+        <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
+        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+        <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
+        <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
+    <% end %>
+    <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-left"}) %>
+<% end %>
+<%= pb_rails("dialog", props: {
+    id:"dialog-fullheight-center",
+    size: "md",
+    full_height: true,
+    placement: "center",
+     })  do %>
+        <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-center" } ) do %>
+            <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
+        <% end %>
+        <%= pb_rails("dialog/dialog_body") do %>
+            <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
+            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
+            <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
+        <% end %>
+        <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-center"}) %>
+<% end %>
+<%= pb_rails("dialog", props: {
+    id:"dialog-fullheight-right",
+    size: "md",
+    full_height: true,
+    placement: "right",
+     }) do %>
+        <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-right" } ) do %>
+            <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
+        <% end %>
+        <%= pb_rails("dialog/dialog_body") do %>
+            <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
+            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
+            <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
+        <% end %>
+        <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-right"}) %>
+    <% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx ADDED Viewed

@@ -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="md"
+            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;

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.md ADDED Viewed

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

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.html.erb ADDED Viewed

@@ -0,0 +1,23 @@
+<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-scroll"}, margin_right: "md" }) %>
+<%= pb_rails("button", props: { text: "Open Full Height Dialog", data: {"open-dialog": "dialog-scroll-full-height"}, margin_right: "md" }) %>
+<%= pb_rails("dialog", props: {
+    id:"dialog-scroll",
+    size: "md",
+    title: "Header Title is the Title Prop",
+    text: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.",
+    cancel_button: "Cancel",
+    confirm_button: "Confirm",
+    confirm_button_id: "confirm-button-1"
+}) %>
+<%= pb_rails("dialog", props: {
+    full_height: true,
+    id:"dialog-scroll-full-height",
+    size: "sm",
+    title: "Header Title is the Title Prop",
+    text: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.",
+    cancel_button: "Cancel",
+    confirm_button: "Confirm",
+    confirm_button_id: "confirm-button-1"
+}) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx ADDED Viewed

@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+import { Button, Dialog } from '../../'
+const DialogScrollable = () => {
+  const useDialog = (visible = false) => {
+    const [opened, setOpened] = useState(visible)
+    const toggle = () => setOpened(!opened)
+    return [opened, toggle]
+  }
+    const [dialog1Opened, toggleDialog1] = useDialog()
+    const [dialog2Opened, toggleDialog2] = useDialog()
+  return (
+    <>
+      <Button marginRight="md"
+          onClick={toggleDialog1}>{'Open Dialog'}
+      </Button>
+      <Button marginRight="md"
+          onClick={toggleDialog2}>{'Open Full Height Dialog'}
+      </Button>
+      <Dialog
+          cancelButton="Cancel"
+          confirmButton="Okay"
+          onCancel={toggleDialog1}
+          onClose={toggleDialog1}
+          onConfirm={toggleDialog1}
+          opened={dialog1Opened}
+          size="md"
+          text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
+          title="Header Title is the Title Prop"
+      />
+      <Dialog
+          cancelButton="Cancel"
+          confirmButton="Okay"
+          fullHeight
+          onCancel={toggleDialog2}
+          onClose={toggleDialog2}
+          onConfirm={toggleDialog2}
+          opened={dialog2Opened}
+          size="sm"
+          text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in."
+          title="Header Title is the Title Prop"
+      />
+    </>
+  )
+}
+export default DialogScrollable

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.md ADDED Viewed

@@ -0,0 +1,5 @@
+The dialog will create a scroll container automatically when the text exceeds the height of the page. No prop or configuration is needed.
+When such a scroll container is created, the dialog header will remain fixed at top of dialog and not scroll with the body content.
+If the dialog is a  `fullHeight` variant, the header and footer will both be sticky and not scroll with the body content.