playbook_ui_docs 14.4.0.pre.alpha.pbntr523enablekitsforradiofix3826 → 14.4.0.pre.alpha.stephenagreerpatch13908

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b1e57172003495ff23ef86ab014c8023ea069bb9f9bc9ffdb8dab469c6bdde7b
-  data.tar.gz: 8cfb04820c1de2a1ba332b06d72ba605786e7418aac62f68ed1925310dc31546
+  metadata.gz: 8352a52dd5cf61ddbd3878e9ec53b2a8ab7fb12415e9d19ec69c97647fdde964
+  data.tar.gz: 8118e67afbdf555e4ed7476a6301db25368674d3e22b4efd2c6a5811231c5682
 SHA512:
-  metadata.gz: fc426feebadb866bccdccc38b888e4393a99be03f882a5801aba4eaa87af11ec0e574caad299e89931024fb7e8103e9af6e591b7e9c825daf050f62df9efce2c
-  data.tar.gz: 5ca81e22fec27d95de46d73c716894c2db299f95e03364b2da39601fab6091ac698b28c0eff14acfffc0c3f7066b091bd9769349e8a7ebabdba8d50e376c3a81
+  metadata.gz: 1755b58ae47308b01bfc77dd6f086faba7e92165328a0e25b1dd568744455cc3524115f3383d2ba60848f7a7590ecb1e90d321ada11d505954143aa34d6b1864
+  data.tar.gz: 580513ee60a62f79229a92982d048ce60a228d481391b5db81ea9d066819daefa09a2c99dc7595768d9d260ba94e2e748b142b7f12da553b40845304716be692

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb

@@ -14,4 +14,4 @@
     }
     fpInline.config.onChange.push(showAngleDownHandler)
   })
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx

@@ -0,0 +1,117 @@
+import React, { useState } from "react";
+import { Button, Drawer, Flex } from "playbook-ui";
+
+const DrawerBorders = () => {
+  // Individual state variables for each drawer size
+  const [openedBRightDrawer, setOpenedBRightDrawer] = useState(false);
+  const [openedBLeftDrawer, setOpenedBLeftDrawer] = useState(false);
+  const [openedBFullDrawer, setOpenedBFullDrawer] = useState(false);
+  const [openedBDefaultDrawer, setOpenedBDefaultDrawer] = useState(false);
+  const [openedBRoundedDrawer, setOpenedBRoundedDrawer] = useState(false);
+
+  // Toggle functions for each drawer
+  const toggleBRightDrawer = () => setOpenedBRightDrawer(!openedBRightDrawer);
+  const toggleBLeftDrawer = () => setOpenedBLeftDrawer(!openedBLeftDrawer);
+  const toggleBFullDrawer = () => setOpenedBFullDrawer(!openedBFullDrawer);
+  const toggleBDefaultDrawer = () => setOpenedBDefaultDrawer(!openedBDefaultDrawer);
+  const toggleBRoundedDrawer = () => setOpenedBRoundedDrawer(!openedBRoundedDrawer);
+
+  return (
+    <>
+      <Flex padding="md"
+          wrap
+      >
+        <Button marginRight="md"
+            onClick={toggleBRightDrawer}
+        >
+         Drawer with border right
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleBLeftDrawer}
+        >
+         Drawer with border left
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleBFullDrawer}
+        >
+          Drawer with border full
+        </Button>
+        <Button marginRight="md"    
+            onClick={toggleBDefaultDrawer}
+        >
+          Default Drawer
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleBRoundedDrawer}
+        > 
+          Rounded Drawer
+        </Button>
+      </Flex>
+
+      {/* Drawers for each size */}
+      <Drawer
+          behavior="float"
+          border="right"
+          fullHeight
+          onClose={toggleBRightDrawer}
+          opened={openedBRightDrawer}
+          overlay={false}
+          placement="left"
+          size="lg"
+      >
+        This is a Drawer with border right  
+      </Drawer>
+      <Drawer
+          behavior="float"
+          border="left"
+          fullHeight
+          onClose={toggleBLeftDrawer}
+          opened={openedBLeftDrawer}
+          overlay={false}
+          placement="right"
+          size="lg"
+      >
+        This is a Drawer with border left
+      </Drawer>
+      <Drawer
+          behavior="float"
+          border="full"
+          fullHeight
+          onClose={toggleBFullDrawer}
+          opened={openedBFullDrawer}
+          overlay={false}
+          placement="right"
+          size="lg"
+      >
+        This is a Drawer with border full
+      </Drawer>
+      <Drawer
+          behavior="float"
+          fullHeight
+          onClose={toggleBDefaultDrawer}
+          opened={openedBDefaultDrawer}
+          overlay={false}
+          placement="right"
+          size="lg"
+      >   
+        This is a Default Drawer
+      </Drawer>
+      <Drawer
+          behavior="float"
+          borderRadius="rounded"
+          fullHeight
+          onClose={toggleBRoundedDrawer}
+          opened={openedBRoundedDrawer}
+          overlay={false}
+          placement="right"
+          size="lg"
+      >
+      <div style={{ paddingTop: '100px', paddingLeft: '12px' }}>
+        This is a Rounded Drawer
+      </div>
+      </Drawer>
+    </>
+  );
+};
+
+export default DrawerBorders;

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import { Button, Drawer, Flex } from "playbook-ui";
+
+const useDrawer = (visible = false) => {
+  const [opened, setOpened] = useState(visible);
+  const toggle = () => setOpened(!opened);
+
+  return [opened, toggle];
+};
+
+const DrawerBreakpoints = () => {
+  const [smallDrawerOpened, toggleSmallDrawer] = useDrawer();
+
+  return (
+    <>
+      <Flex wrap>
+        <Button
+            id="sm"
+            marginRight="md"
+            onClick={toggleSmallDrawer}
+        >
+          {"Will open at small breakpoint"}
+        </Button>
+      </Flex>
+      <Flex>
+        <Drawer
+            behavior={"push"}
+            breakpoint="sm"
+            fullHeight
+            onClose={toggleSmallDrawer}
+            opened={smallDrawerOpened}
+            overlay={false}
+            placement={"right"}
+            size={"lg"}
+        >
+          Open because small breakpoint 
+        </Drawer>
+      </Flex>
+    </>
+  );
+};
+
+export default DrawerBreakpoints;

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("drawer") %>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx

@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import { Button, Drawer, Flex } from "playbook-ui";
+
+const useDrawer = (visible = false) => {
+  const [opened, setOpened] = useState(visible);
+  const toggle = () => setOpened(!opened);
+
+  return [opened, toggle];
+};
+
+const DrawerDefault = () => {
+  const [headerSeparatorDrawerOpened, toggleHeaderSeparatorDrawer] = useDrawer();
+  const [bothSeparatorsDrawerOpened, toggleBothSeparatorsDrawer] = useDrawer();
+
+  return (
+    <>
+      <Flex wrap>
+        <Button
+            id="sm"
+            marginRight="md"
+            onClick={toggleHeaderSeparatorDrawer}
+        >
+          {"Left Drawer"}
+        </Button>
+        <Button
+            marginRight="xl"
+            onClick={toggleBothSeparatorsDrawer}
+        >
+          {"Right Drawer"}
+        </Button>
+      </Flex>
+      <Flex>
+        {/* Left Drawer */}
+        <Drawer
+            behavior={"push"}
+            fullHeight
+            onClose={toggleHeaderSeparatorDrawer}
+            opened={headerSeparatorDrawerOpened}
+            overlay
+            placement={"left"}
+            size={"lg"}
+        >
+          Test me (Left Drawer)
+        </Drawer>
+
+        {/* Right Drawer */}
+        <Drawer
+            behavior={"push"}
+            fullHeight
+            onClose={toggleBothSeparatorsDrawer}
+            opened={bothSeparatorsDrawerOpened}
+            overlay
+            placement={"right"}
+            size={"lg"}
+        >
+          Test me (Right Drawer)
+        </Drawer>
+      </Flex>
+    </>
+  );
+};
+
+export default DrawerDefault;

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import { Button, Drawer, Flex } from "playbook-ui";
+
+const DrawerSizes = () => {
+  // Individual state variables for each drawer size
+  const [openedNoOverlayDrawer, setOpenedNoOverlayDrawer] = useState(false);
+  const [openedOverlayDrawer, setOpenedOverlayDrawer] = useState(false);
+
+  // Toggle functions for each drawer
+  const toggleNoOverlayDrawer = () => setOpenedNoOverlayDrawer(!openedNoOverlayDrawer);
+  const toggleOverlayDrawer = () => setOpenedOverlayDrawer(!openedOverlayDrawer);
+
+  return (
+    <>
+      <Flex wrap>
+        <Button marginRight="md"
+            onClick={toggleNoOverlayDrawer}
+        >
+          No Overlay Drawer
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleOverlayDrawer}
+        >
+          Overlay Drawer
+        </Button>
+      </Flex>
+
+      {/* Drawers for each size */}
+      <Drawer
+          behavior="push"
+          fullHeight
+          onClose={toggleNoOverlayDrawer}
+          opened={openedNoOverlayDrawer}
+          overlay={false}
+          placement="right"
+          size="lg"
+      >
+        This is a Drawer with no overlay
+      </Drawer>
+      <Drawer
+          behavior="push"
+          fullHeight
+          onClose={toggleOverlayDrawer}
+          opened={openedOverlayDrawer}
+          overlay
+          placement="right"
+          size="lg"
+      >
+        This is a Drawer with an overlay 
+      </Drawer>
+    </>
+  );
+};
+
+export default DrawerSizes;

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx

@@ -0,0 +1,113 @@
+import React, { useState } from "react";
+import { Button, Drawer, Flex } from "playbook-ui";
+
+const DrawerSizes = () => {
+  // Individual state variables for each drawer size
+  const [openedXsDrawer, setOpenedXsDrawer] = useState(false);
+  const [openedSmDrawer, setOpenedSmDrawer] = useState(false);
+  const [openedMdDrawer, setOpenedMdDrawer] = useState(false);
+  const [openedLgDrawer, setOpenedLgDrawer] = useState(false);
+  const [openedXlDrawer, setOpenedXlDrawer] = useState(false);
+
+  // Toggle functions for each drawer
+  const toggleXsDrawer = () => setOpenedXsDrawer(!openedXsDrawer);
+  const toggleSmDrawer = () => setOpenedSmDrawer(!openedSmDrawer);
+  const toggleMdDrawer = () => setOpenedMdDrawer(!openedMdDrawer);
+  const toggleLgDrawer = () => setOpenedLgDrawer(!openedLgDrawer);
+  const toggleXlDrawer = () => setOpenedXlDrawer(!openedXlDrawer);
+
+  return (
+    <>
+      <Flex wrap>
+        <Button marginRight="md"
+            onClick={toggleXsDrawer}
+        >
+          XS Drawer
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleSmDrawer}
+        >
+          SM Drawer
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleMdDrawer}
+        >
+          MD Drawer
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleLgDrawer}
+        >
+          LG Drawer
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleXlDrawer}
+        >
+          XL Drawer
+        </Button>
+      </Flex>
+
+      {/* Drawers for each size */}
+      <Drawer
+          behavior="push"
+          fullHeight
+          onClose={toggleXsDrawer}
+          opened={openedXsDrawer}
+          overlay
+          placement="right"
+          size="xs"
+      >
+        XS 
+      </Drawer>
+
+      <Drawer
+          behavior="push"
+          fullHeight
+          onClose={toggleSmDrawer}
+          opened={openedSmDrawer}
+          overlay
+          placement="right"
+          size="sm"
+      >
+        This is an SM Drawer
+      </Drawer>
+
+      <Drawer
+          behavior="push"
+          fullHeight
+          onClose={toggleMdDrawer}
+          opened={openedMdDrawer}
+          overlay
+          placement="right"
+          size="md"
+      >
+        This is an MD Drawer
+      </Drawer>
+
+      <Drawer
+          behavior="push"
+          fullHeight
+          onClose={toggleLgDrawer}
+          opened={openedLgDrawer}
+          overlay
+          placement="right"
+          size="lg"
+      >
+        This is an LG Drawer
+      </Drawer>
+
+      <Drawer
+          behavior="push"
+          fullHeight
+          onClose={toggleXlDrawer}
+          opened={openedXlDrawer}
+          overlay
+          placement="right"
+          size="xl"
+      >
+        This is an XL Drawer
+      </Drawer>
+    </>
+  );
+};
+
+export default DrawerSizes;

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

@@ -0,0 +1,12 @@
+examples:
+  
+  rails:
+  - drawer_default: Default
+  
+  
+  react:
+  - drawer_default: Default
+  - drawer_sizes: Sizes
+  - drawer_overlay: Overlay
+  - drawer_borders: Borders 
+  - drawer_breakpoints: Open on Breakpoints 

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

@@ -0,0 +1,5 @@
+export { default as DrawerDefault } from './_drawer_default.jsx'
+export { default as DrawerSizes } from './_drawer_sizes.jsx'
+export { default as DrawerOverlay } from './_drawer_overlay.jsx'
+export { default as DrawerBorders } from './_drawer_borders.jsx'
+export { default as DrawerBreakpoints } from './_drawer_breakpoints.jsx'

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx

@@ -22,6 +22,16 @@ const PaginationPageChange = (props) => {
 
     return (
       <div className="App">
+      <Pagination
+          current={activePage}
+          key={`pagination-top-${activePage}`}
+          marginBottom="xs"
+          onChange={onPageChange}
+          range={5}
+          total={totalPages}
+          {...props}
+      />
+
       <Table 
           marginBottom="xs"
           responsive="none" 
@@ -49,7 +59,8 @@ const PaginationPageChange = (props) => {
       </Table>
  
       <Pagination
-          current={1}
+          current={activePage}
+          key={`pagination-bottom-${activePage}`}
           onChange={onPageChange}
           range={5}
           total={totalPages}

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md

@@ -1 +1,3 @@
-You can use the `onChange` prop to control the data of your table. This prop is callback function that will allow you control the state.
+You can use the `onChange` prop to control the data of your table. This prop is callback function that will allow you control the state.
+
+To ensure synchronization between multiple pagination components on a single page, use unique, dynamic keys for each pagination instance. Each Pagination component should have its own dynamic key that reflects the current active page: this example uses `pagination-top-${activePage}` and `pagination-bottom-${activePage}`.

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb

@@ -10,6 +10,7 @@
 <%= pb_rails("radio", props: {
   custom_children: true,
   label: "Select",
+  margin_bottom: "sm",
   name: "Group1",
   value: "Select",
 }) do %>
@@ -22,6 +23,7 @@
 <%= pb_rails("radio", props: {
   custom_children: true,
   label: "Typeahead",
+  margin_bottom: "sm",
   name: "Group1",
   value: "Typeahead",
 }) do %>

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx

@@ -19,12 +19,14 @@ const RadioChildren = (props) => {
       <Radio
           customChildren
           label="Select"
+          marginBottom="sm"
           name="Group1"
           tabIndex={0}
           value="Select"
           {...props}
       >
-        <Select 
+        <Select
+            marginBottom="none"
             minWidth="xs"
             options={options}
         />
@@ -32,17 +34,18 @@ const RadioChildren = (props) => {
       <Radio
           customChildren
           label="Typeahead"
+          marginBottom="sm"
           name="Group1"
           tabIndex={0}
           value="Typeahead"
           {...props}
       >
         <Typeahead 
+            marginBottom="none"
             minWidth="xs"
             options={options}
         />
       </Radio>
-      <br />
       <Radio
           customChildren
           defaultChecked={false}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb

@@ -0,0 +1,88 @@
+<%
+  options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "None",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "none",
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "XXS",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "xxs",
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "XS",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "xs",
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "Default - SM",
+    name: :foo,
+    is_multi: false,
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "MD",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "md",
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "LG",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "lg",
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "XL",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "xl",
+  })
+%>
+
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-typeahead-default-result-option-select", function(event) {
+    console.log('Single Option selected')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-default-result-clear", function() {
+    console.log('All options cleared')
+  })
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx

@@ -0,0 +1,60 @@
+import React from 'react'
+
+import Typeahead from '../_typeahead'
+
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+]
+
+const TypeaheadMarginBottom = (props) => {
+  return (
+    <>
+      <Typeahead
+          label="None"
+          marginBottom="none"
+          options={options}
+          {...props}
+      />
+      <Typeahead
+          label="XXS"
+          marginBottom="xxs"
+          options={options}
+          {...props}
+      />   
+      <Typeahead
+          label="XS"
+          marginBottom="xs"
+          options={options}
+          {...props}
+      />   
+      <Typeahead
+          label="Default - SM"
+          options={options}
+          {...props}
+      />   
+      <Typeahead
+          label="MD"
+          marginBottom="md"
+          options={options}
+          {...props}
+      />
+      <Typeahead
+          label="LG"
+          marginBottom="lg"
+          options={options}
+          {...props}
+      />
+      <Typeahead
+          label="XL"
+          marginBottom="xl"
+          options={options}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TypeaheadMarginBottom

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

@@ -9,6 +9,7 @@ examples:
     - typeahead_inline: Inline
     - typeahead_multi_kit: Multi Kit Options
     - typeahead_error_state: Error State
+    - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)
 
   react:
@@ -24,4 +25,5 @@ examples:
     - typeahead_async_createable: Createable (+ Async Data)
     - typeahead_error_state: Error State
     - typeahead_custom_menu_list: Custom MenuList
+    - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)

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

@@ -10,4 +10,5 @@ export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
 export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
 export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'
 export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_list.jsx'
+export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx'
 export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'