playbook_ui 11.7.0 → 11.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 50c4e2402a8a42486e55758e888f2aa3d0b68c8b00c64537bcf86572c0d39a3b
-  data.tar.gz: 7cbb4822db32acc06087d381c025c8f1e11ef0685e33e8bc2b66bb90e80eeeed
+  metadata.gz: 1786432b79daa7bd71c9c2eeefbd167c26c858d33a7b3c1600e9c53416f0a4cc
+  data.tar.gz: 63355e58e35c1a322f9864aa6000d315643d30123349c7c817bf642db85a2940
 SHA512:
-  metadata.gz: 1e645568ecb8d1ae319c94bc7038f9e7c1dac964fdcca0c256430142813efc4bec63ba172f7522e96766458530ed382499899a6e4e54ee66093d189dbb60b7ab
-  data.tar.gz: c1d7f6db9c77ea3fc3ec9f402f89675caccd4320fb7490ee26df0ab61a43e6dd6ad29a1b9209ac23a33ed6a2239092974949c1689fe2f9931ce899110b9fb30d
+  metadata.gz: d0a254347288d447d1f86672c50de6f64295bc23eac906cf6fd7d06da198dbfcc3c135e29b6caa0a2b5ddee8dec400065f352976094b9ebbb0c0a748a7feca28
+  data.tar.gz: 6dde7b191a13a9ee1630cf92e64229ed03ab69c1874aa5805991d660376c11f2cef81225420a611299a8bc7816545b849d4772a445e22ac150e700e1db9c162c

data/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,6 +72,7 @@
 	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;
@@ -78,7 +80,7 @@
 	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;
+				}
+			} 
+		}
 	}
 }

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

@@ -27,6 +27,7 @@ type DialogProps = {
   confirmButton?: string;
   data?: object;
   id?: string;
+  fullHeight?: boolean;
   loading?: boolean;
   onCancel?: () => void;
   onChange?: () => void;
@@ -34,8 +35,9 @@ type DialogProps = {
   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",
   };

data/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)}

data/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()
-});
+});
+

data/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"

data/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;

data/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.

data/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;

data/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.

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx

@@ -43,7 +43,10 @@ const DialogSizes = () => {
 
   return (
     <div>
-      <Flex>
+      <Flex 
+          rowGap="xs" 
+          wrap
+      >
         <Button
             id="sm"
             marginRight="xl"

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx

@@ -48,7 +48,10 @@ const DialogStackedAlert = () => {
 
   return (
     <div>
-    <Flex>
+    <Flex
+        rowGap="xs" 
+        wrap
+    >
       <Button
           marginRight="md"
           onClick={toggleDefaultAlert}

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx

@@ -81,7 +81,10 @@ const DialogStatus = () => {
 
   return (
     <div>
-      <Flex>
+      <Flex 
+          rowGap="xs" 
+          wrap
+        >
         <Button
             marginRight="md"
             onClick={toggleDefaultAlert}

data/app/pb_kits/playbook/pb_dialog/docs/example.yml

@@ -10,3 +10,5 @@ examples:
   - dialog_should_close_on_overlay: Overlay Click
   - dialog_status: Status Alert
   - dialog_stacked_alert: Stacked Button Alert
+  - dialog_full_height: Full Height
+  - dialog_full_height_placement: Full Height Placement

data/app/pb_kits/playbook/pb_dialog/docs/index.js

@@ -6,3 +6,5 @@ export { default as DialogSeparators } from './_dialog_separators.jsx'
 export { default as DialogShouldCloseOnOverlay } from './_dialog_should_close_on_overlay.jsx'
 export { default as DialogStatus } from './_dialog_status.jsx'
 export { default as DialogStackedAlert } from './_dialog_stacked_alert.jsx'
+export { default as DialogFullHeight } from './_dialog_full_height.jsx'
+export { default as DialogFullHeightPlacement } from './_dialog_full_height_placement.jsx'

data/app/pb_kits/playbook/pb_filter/docs/_filter_close_popover.jsx

@@ -7,7 +7,7 @@ const FilterClosePopover = (props) => {
     { value: 'Canada' },
     { value: 'Brazil' },
     { value: 'Philippines' },
-    { value: 'A Galaxy Far Far Away Like Really Far Away' },
+    { value: 'A galaxy far far away, like really far away...' },
   ]
 
   return (
@@ -17,6 +17,7 @@ const FilterClosePopover = (props) => {
           'Full Name': 'John Wick',
           'City': 'San Francisco',
         }}
+        minWidth="375px"
         results={1}
         sortOptions={{
           popularity: 'Popularity',

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb

@@ -1,5 +1,6 @@
 <%=
   pb_rails("filter", props: {
+    min_width: "375px",
     id: "1",
     filters: [
       { name: "name", value: "John Wick" },
@@ -16,21 +17,16 @@
 %>
   <%
     example_collection = [
-      OpenStruct.new(name: "Alabama", value: 1),
-      OpenStruct.new(name: "Alaska", value: 2),
-      OpenStruct.new(name: "Arizona", value: 3),
-      OpenStruct.new(name: "Arkansas", value: 4),
-      OpenStruct.new(name: "California", value: 5),
-      OpenStruct.new(name: "Colorado", value: 6),
-      OpenStruct.new(name: "Connecticut", value: 7),
-      OpenStruct.new(name: "Delaware", value: 8),
-      OpenStruct.new(name: "Florida", value: 9),
-      OpenStruct.new(name: "Georgia", value: 10),
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away, like really far away...", value: 5)
     ]
   %>
   <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
     <%= form.text_field :example_text_field, props: { label: true } %>
-    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
 
     <%= form.actions do |action| %>
       <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
@@ -44,8 +40,8 @@
 
 <%=
   pb_rails("filter", props: {
+    min_width: "375px",
     id: "def2",
-
     sort_menu: [
       { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
       { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
@@ -57,21 +53,16 @@
 %>
   <%
     example_collection = [
-      OpenStruct.new(name: "Alabama", value: 1),
-      OpenStruct.new(name: "Alaska", value: 2),
-      OpenStruct.new(name: "Arizona", value: 3),
-      OpenStruct.new(name: "Arkansas", value: 4),
-      OpenStruct.new(name: "California", value: 5),
-      OpenStruct.new(name: "Colorado", value: 6),
-      OpenStruct.new(name: "Connecticut", value: 7),
-      OpenStruct.new(name: "Delaware", value: 8),
-      OpenStruct.new(name: "Florida", value: 9),
-      OpenStruct.new(name: "Georgia", value: 10),
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away, like really far away...", value: 5)
     ]
   %>
   <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
     <%= form.text_field :example_text_field, props: { label: true } %>
-    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
 
     <%= form.actions do |action| %>
       <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx

@@ -11,7 +11,7 @@ const FilterDefault = (props) => {
     { value: 'Canada' },
     { value: 'Brazil' },
     { value: 'Philippines' },
-    { value: 'A Galaxy Far Far Away Like Really Far Away' },
+    { value: 'A galaxy far far away, like really far away...' },
   ]
   return (
 
@@ -22,6 +22,7 @@ const FilterDefault = (props) => {
             'Full Name': 'John Wick',
             'City': 'San Francisco',
           }}
+          minWidth="375px"
           onSortChange={SortingChangeCallback}
           results={1}
           sortOptions={{
@@ -43,6 +44,7 @@ const FilterDefault = (props) => {
         <Select
             blankSelection="Select One..."
             label="Territory"
+            maxWidth="sm"
             name="location"
             options={options}
             {...props}
@@ -67,6 +69,7 @@ const FilterDefault = (props) => {
 
       <Filter
           double
+          minWidth="375px"
           onSortChange={SortingChangeCallback}
           results={1}
           sortOptions={{

data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb

@@ -1,6 +1,6 @@
 <%=
   pb_rails("filter", props: {
-    min_width: "600px",
+    min_width: "375px",
     id: "25",
     position: "top",
     filters: [
@@ -17,17 +17,12 @@
   }) do
 %>
   <%
-    example_collection = [
-      OpenStruct.new(name: "Alabama", value: 1),
-      OpenStruct.new(name: "Alaska", value: 2),
-      OpenStruct.new(name: "Arizona", value: 3),
-      OpenStruct.new(name: "Arkansas", value: 4),
-      OpenStruct.new(name: "California", value: 5),
-      OpenStruct.new(name: "Colorado", value: 6),
-      OpenStruct.new(name: "Connecticut", value: 7),
-      OpenStruct.new(name: "Delaware", value: 8),
-      OpenStruct.new(name: "Florida", value: 9),
-      OpenStruct.new(name: "Georgia", value: 10),
+   example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away, like really far away...", value: 5)
     ]
   %>
   <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.jsx

@@ -7,7 +7,7 @@ const FilterMinWidth = (props) => {
     { value: 'Canada' },
     { value: 'Brazil' },
     { value: 'Philippines' },
-    { value: 'A Galaxy Far Far Away Like Really Far Away' },
+    { value: 'A galaxy far far away, like really far away...' },
   ]
   return (
     <Filter
@@ -17,7 +17,7 @@ const FilterMinWidth = (props) => {
           'Full Name': 'John Wick',
           'City': 'San Francisco',
         }}
-        minWidth="600px"
+        minWidth="375px"
         results={1}
         sortOptions={{
           popularity: 'Popularity',