playbook_ui_docs 14.11.1.pre.alpha.responsivetablerails5364 → 14.12.0.pre.alpha.PBNTR456fixedconftoastrailsautoclose5673

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

@@ -9,8 +9,8 @@ const useDrawer = (visible = false) => {
 };
 
 const DrawerDefault = () => {
-  const [headerSeparatorDrawerOpened, toggleHeaderSeparatorDrawer] = useDrawer();
-  const [bothSeparatorsDrawerOpened, toggleBothSeparatorsDrawer] = useDrawer();
+  const [drawerLeftOpen, toggleDrawerLeftOpen] = useDrawer();
+  const [drawerRightOpen, toggleDrawerRightOpen ] = useDrawer();
 
   return (
     <>
@@ -18,13 +18,13 @@ const DrawerDefault = () => {
         <Button
             id="sm"
             marginRight="md"
-            onClick={toggleHeaderSeparatorDrawer}
+            onClick={toggleDrawerLeftOpen}
         >
           {"Left Drawer"}
         </Button>
         <Button
             marginRight="xl"
-            onClick={toggleBothSeparatorsDrawer}
+            onClick={toggleDrawerRightOpen}
         >
           {"Right Drawer"}
         </Button>
@@ -32,12 +32,8 @@ const DrawerDefault = () => {
       <Flex>
         {/* Left Drawer */}
         <Drawer
-            behavior={"push"}
-            fullHeight
-            onClose={toggleHeaderSeparatorDrawer}
-            opened={headerSeparatorDrawerOpened}
-            overlay
-            placement={"left"}
+            onClose={toggleDrawerLeftOpen}
+            opened={drawerLeftOpen}
             size={"lg"}
         >
           Test me (Left Drawer)
@@ -45,11 +41,8 @@ const DrawerDefault = () => {
 
         {/* Right Drawer */}
         <Drawer
-            behavior={"push"}
-            fullHeight
-            onClose={toggleBothSeparatorsDrawer}
-            opened={bothSeparatorsDrawerOpened}
-            overlay
+            onClose={toggleDrawerRightOpen}
+            opened={drawerRightOpen}
             placement={"right"}
             size={"lg"}
         >
@@ -60,4 +53,4 @@ const DrawerDefault = () => {
   );
 };
 
-export default DrawerDefault;
+export default DrawerDefault;

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

@@ -1,31 +1,56 @@
-import React from "react";
-import { Button, Drawer, Icon, Title } from "playbook-ui";
+import React, { useState, useEffect } from "react"
+import { Button, Drawer, Icon, Nav, NavItem } from "playbook-ui"
 
 const DrawerMenu = () => {
+  const [isSmallScreen, setIsSmallScreen] = useState(false)
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(max-width: 600px)")
+    setIsSmallScreen(mediaQuery.matches)
+    const handler = (e) => setIsSmallScreen(e.matches)
+    mediaQuery.addEventListener('change', handler)
+    return () => mediaQuery.removeEventListener('change', handler)
+  }, [])
 
   return (
-    <>
-      <Button id="menuButton"
-          padding="sm"
+    <div>
+      <Button id='menuButton'
+          padding='xs'
       >
-        <Icon icon="bars"
-            size="3x"
+        <Icon icon='bars'
+            size='2x'
         />
       </Button>
       <Drawer
-          behavior="push"
-          closeBreakpoint="md"
-          menuButtonID="menuButton"
-          overlay={false}
-          placement="left"
-          size="lg"
+          breakpoint="md"
+          placement='bottom'
+          size='full'
+          triggerId='menuButton'
           withinElement
       >
-        <Title paddingBottom="md">A really neat menu</Title>
-        <Button text="This Button does nothing" />
+        <Nav 
+            highlight={false}
+            link='#'
+            orientation={isSmallScreen ? 'vertical' : 'horizontal'} 
+            padding={isSmallScreen ? 'none' : 'sm'}
+        >
+          <NavItem link='#'
+              text='About'
+          />
+          <NavItem active
+              link='#'
+              text='Case Studies'
+          />
+          <NavItem link='#'
+              text='Service'
+          />
+          <NavItem link='#'
+              text='Contacts'
+          />
+        </Nav>
       </Drawer>
-    </>
-  );
-};
+    </div>
+  )
+}
 
-export default DrawerMenu;
+export default DrawerMenu

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.md

@@ -1,6 +1,24 @@
-Our drawer kit can fulfill your responsive menu needs! Using the `closeBreakpoint` prop you can have the menu close on smaller screens like phones/tablets.
+The Drawer component can be used to create responsive navigation menus and sidebars. It provides flexible options for controlling when and how the drawer appears based on screen size.
+
+### Within Element
+The `withinElement` prop allows you to render the drawer within its parent container:
+- The drawer will be positioned relative to its parent element
+- Useful for creating nested navigation structures
+- This must be used in conjunction with the `triggerId` prop
+
+This provides a clean way to create responsive navigation patterns that adapt to different screen sizes while maintaining a consistent user experience.
+
+### Trigger Id
+The `triggerId` prop allows you to connect an element to control the drawer:
+- The specified element will toggle the drawer open/closed
+- The element is automatically hidden when the drawer is opened via breakpoint
+- The element reappears when the drawer is closed via breakpoint
+
+### Breakpoint
+Use the `breakpoint` prop to control when the drawer automatically opens or closes based on screen size. For example, setting `breakpoint="md"` will:
+- Close the drawer on screens smaller than the medium breakpoint (992px)
+- Automatically open the drawer on screens larger than or equal to the medium breakpoint
+
 
-Set a menu button with  the `menuButtonID` props. When the Drawer is open, the menu button will be hidden. But when your Brakpoint closes the drawer, you can toggle the Drawer open/close with your menu butotn.
 
-Also use the `withinElement` props to have the Drawer open within a specific element, instead of the default behavior of it taking up the entire screen size.
 

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

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

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

@@ -19,7 +19,8 @@ const DrawerSizes = () => {
   return (
     <>
       <Flex wrap>
-        <Button marginRight="md"
+        <Button 
+            marginRight="md"
             onClick={toggleXsDrawer}
         >
           XS Drawer
@@ -48,11 +49,8 @@ const DrawerSizes = () => {
 
       {/* Drawers for each size */}
       <Drawer
-          behavior="push"
-          fullHeight
           onClose={toggleXsDrawer}
           opened={openedXsDrawer}
-          overlay
           placement="right"
           size="xs"
       >
@@ -60,47 +58,32 @@ const DrawerSizes = () => {
       </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"
       >

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

@@ -6,7 +6,8 @@ examples:
   
   react:
   - drawer_default: Default
-  - drawer_menu: Menu Behavior 
+  - drawer_behavior: Push Behavior
+  - drawer_menu: Within Element
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
   - drawer_borders: Borders 

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

@@ -4,3 +4,4 @@ export { default as DrawerOverlay } from './_drawer_overlay.jsx'
 export { default as DrawerBorders } from './_drawer_borders.jsx'
 export { default as DrawerBreakpoints } from './_drawer_breakpoints.jsx'
 export { default as DrawerMenu } from './_drawer_menu.jsx'
+export { default as DrawerBehavior } from './_drawer_behavior.jsx'

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md

@@ -1 +1 @@
-For the `subtle` variant, it is recommended that you set the `Separators` prop to `false` to remove the separator lines between the options for a more cleaner look.
+For the `subtle` variant, it is recommended that you set the `Separators` prop to `false` to remove the separator lines between the options for a cleaner look.

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb

@@ -0,0 +1,74 @@
+<%= pb_rails("button", props: { text: "Show Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close" } }) %>
+<%= pb_rails("button", props: { text: "Show Closeable Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close-closeable" } }) %>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  auto_close: 3000,
+  id: "toast-auto-close",
+  text: "I will disappear in 3 seconds.",
+  status: "tip",
+  vertical: "top",
+  horizontal: "center"
+}) %>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  auto_close: 10000,
+  closeable: true,
+  id: "toast-auto-close-closeable",
+  text: "I will disappear in 10 seconds.",
+  status: "tip",
+  vertical: "top",
+  horizontal: "center"
+}) %>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const toasts = {
+      '#toast-auto-close': document.querySelector("#toast-auto-close"),
+      '#toast-auto-close-closeable': document.querySelector("#toast-auto-close-closeable")
+    }
+    
+    const buttons = {
+      '#toast-auto-close': document.querySelector("button[data-toast='#toast-auto-close']"),
+      '#toast-auto-close-closeable': document.querySelector("button[data-toast='#toast-auto-close-closeable']")
+    }
+
+    const hideAllToastsUponPageLoad = () => {
+      Object.values(toasts).forEach(toast => {
+        if (toast) toast.style.display = "none"
+      })
+    }
+
+    const showAndAutoCloseToast = (toastId) => {
+      hideAllToastsUponPageLoad()
+      const toast = toasts[toastId]
+
+      if (toast) {
+        toast.style.display = "flex"  // Show the selected toast
+
+        const autoCloseClass = Array.from(toast.classList).find(cls => cls.startsWith('auto_close_'))
+        if (autoCloseClass) {
+          const duration = parseInt(autoCloseClass.split('_')[2]) || 0;  // Use 0 as fallback if parsing fails
+
+          if (toast.autoCloseTimeout) {
+            clearTimeout(toast.autoCloseTimeout)
+          }
+
+          toast.autoCloseTimeout = setTimeout(() => {
+            toast.style.display = "none"
+          }, duration)
+        }
+      }
+    }
+
+    Object.keys(buttons).forEach((key) => {
+      const button = buttons[key]
+      if (button) {
+        button.onclick = () => {
+          showAndAutoCloseToast(key)
+        }
+      }
+    })
+
+    hideAllToastsUponPageLoad()
+  })
+</script>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_rails.md

@@ -0,0 +1,3 @@
+Auto close is used when you want the confirmation toast to close automatically after a certain time. `auto_close` property will be a delay number in ms.
+
+Script tag in code snippet is for demonstration purposes only. It provides the functionality needed to show and hide the toaster in response to user interaction, and hides them from appearing upon initial page load. In a typical production environment this functionality would be handled by a controller or a separate javascript file.

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

@@ -5,6 +5,7 @@ examples:
   - fixed_confirmation_toast_multi_line: Multi Line
   - fixed_confirmation_toast_close: Click to Close
   - fixed_confirmation_toast_positions: Click to Show Positions
+  - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
   

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("icon_button") %>
+</br>
+<%= pb_rails("icon_button", props: {variant: "link"}) %>

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

@@ -0,0 +1,7 @@
+examples:
+  
+  rails:
+  - icon_button_default: Default
+  
+  
+  

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.html.erb

@@ -0,0 +1,15 @@
+<%= pb_rails("phone_number_input", props: {
+    id: "phone_number_input",
+    format_as_you_type: true
+}) %>
+
+<%= pb_rails("button", props: {id: "clickable", text: "Save Phone Number"}) %>
+
+<%= javascript_tag do %>
+    document.querySelector('#clickable').addEventListener('click', () => {
+        const formattedPhoneNumber = document.querySelector('#phone_number_input').value
+        const unformattedPhoneNumber = formattedPhoneNumber.replace(/\D/g, "")
+
+        alert(`Formatted: ${formattedPhoneNumber}. Unformatted: ${unformattedPhoneNumber}`)
+    })
+<% end %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import { PhoneNumberInput, Body } from "playbook-ui";
+
+const PhoneNumberInputFormat = (props) => {
+    const [phoneNumber, setPhoneNumber] = useState("");
+
+    const handleOnChange = ({ number }) => {
+        setPhoneNumber(number);
+    };
+
+    return (
+        <>
+            <PhoneNumberInput
+                formatAsYouType
+                id="format"
+                onChange={handleOnChange}
+                {...props}
+            />
+            {phoneNumber && <Body>Unformatted number: {phoneNumber}</Body>}
+        </>
+    );
+};
+
+export default PhoneNumberInputFormat;

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.md

@@ -0,0 +1 @@
+NOTE: the `number` in the React `onChange` event will not include formatting (no spaces, dashes, and parentheses). For Rails, the `value` will include formatting and its value must be sanitized manually. 

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

@@ -8,10 +8,12 @@ examples:
   - phone_number_input_validation: Form Validation
   - phone_number_input_clear_field: Clearing the Input Field
   - phone_number_input_access_input_element: Accessing the Input Element
+  - phone_number_input_format: Format as You Type
 
   rails:
   - phone_number_input_default: Default
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Limited Countries
-  - phone_number_input_validation: Form Validation
+  - phone_number_input_validation: Form Validation
+  - phone_number_input_format: Format as You Type

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

@@ -5,3 +5,4 @@ export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_
 export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'
 export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
 export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
+export { default as PhoneNumberInputFormat } from './_phone_number_input_format'

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

@@ -29,6 +29,7 @@ const RadioChildren = (props) => {
             marginBottom="none"
             minWidth="xs"
             options={options}
+            {...props}
         />
       </Radio>
       <Radio
@@ -40,10 +41,11 @@ const RadioChildren = (props) => {
           value="Typeahead"
           {...props}
       >
-        <Typeahead 
+        <Typeahead
             marginBottom="none"
             minWidth="xs"
             options={options}
+            {...props}
         />
       </Radio>
       <Radio
@@ -54,9 +56,12 @@ const RadioChildren = (props) => {
           value="Typography"
           {...props}
       >
-        <Title text="Custom Typography" />
+        <Title
+            text="Custom Typography"
+            {...props}
+        />
       </Radio>
     </div>
   )
 }
-export default RadioChildren
+export default RadioChildren

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_default.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import SelectableIcon from '../_selectable_icon'
 
-const SelectableIconDefault = () => {
+const SelectableIconDefault = (props) => {
   const [ checkSelected, toggleSelected ] = useState(true)
   const [ checkUnselected, toggleUnselected ] = useState(false)
   const [ checkDisabled, toggleDisabled ] = useState(false)
@@ -15,6 +15,7 @@ const SelectableIconDefault = () => {
           inputId={10}
           onChange={() => toggleSelected(!checkSelected)}
           text="US Dollar"
+          {...props}
       />
 
       <SelectableIcon
@@ -23,6 +24,7 @@ const SelectableIconDefault = () => {
           inputId={11}
           onChange={() => toggleUnselected(!checkUnselected)}
           text="Euro"
+          {...props}
       />
 
       <SelectableIcon
@@ -32,6 +34,7 @@ const SelectableIconDefault = () => {
           inputId={12}
           onChange={() => toggleDisabled(!checkDisabled)}
           text="Yen"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_single_select.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 
 import SelectableIcon from '../_selectable_icon'
 
-const SelectableIconSingleSelect = () => {
+const SelectableIconSingleSelect = (props) => {
   const [ selectedFormat, toggleFormat ] = useState(null)
 
   return (
@@ -17,6 +17,7 @@ const SelectableIconSingleSelect = () => {
           onChange={() => toggleFormat('Cassette')}
           text="Cassette"
           value="Cassette"
+          {...props}
       />
 
       <SelectableIcon
@@ -28,6 +29,7 @@ const SelectableIconSingleSelect = () => {
           onChange={() => toggleFormat('CD')}
           text="CD"
           value="CD"
+          {...props}
       />
 
       <SelectableIcon
@@ -39,6 +41,7 @@ const SelectableIconSingleSelect = () => {
           onChange={() => toggleFormat('Vinyl')}
           text="Vinyl"
           value="Vinyl"
+          {...props}
       />
     </div>
   )