playbook_ui_docs 14.11.1.pre.alpha.PLAY17445539 → 14.11.1.pre.alpha.hfhbrakemanplaybook5370

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '090f195e5c1d632daff7a380a997fa713796b9f3fe91b57716e4f47f2009127e'
-  data.tar.gz: 564f6568f7c77fb7b11528ee81690486d00ec53dffe1ba829e4bc37aaa69a9c9
+  metadata.gz: 8cec5b327027d185abd08e5306f4d55cd69463894c965c49b410fc4f5e87c264
+  data.tar.gz: 2aa04f18b9ed1b6befdd50d8568d574cff1c86b88e9dc84035b5043a1e1680a2
 SHA512:
-  metadata.gz: a768c323ef00fb1bc7dad3728d146a71f1be7ea69c2bc592ed9337bccc0374f0bd7b4dcdcc967328e81354608474199048a14d6caab13842180c262c0d97225d
-  data.tar.gz: 301d2159ace035f984951c9eafcfc43ace554798fd5730bfc383ccc2763c1a6ae7d1c074a72ca87af790cbfddaa007746d7cadff6768b7f6032b0d48e6800de1
+  metadata.gz: 7bdfd5454a5ab5591e8a656b63b40192b03d9389dd4388279b317dbedd3bd933730736996d3aef33f0c36bbff7234d23265a9e63065f841fcb8318afccb2d7fa
+  data.tar.gz: 0e09ff8694c3c0166393a0e73893b37da44fe33ef54a8c0028e3150de55d7b107277b78d89a5d8a2b17d0f9a3e8cc7a545353533398bdf7a8d3b884279606d84

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md

@@ -1,3 +1,3 @@
-`sortControl` is an optional prop that can be used to gain greater control over the sort state of the Advanced Table. Tanstack handles sort itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the sort state so it persists on page reload, set an initial sort state, etc.
+`sortControl` is an optional prop that can be used to gain greater control over the sort state of the Advanced Table. Tanstack handles sort itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the sort state so it persists on page reload, set an initial sort state, etc. 
 
-The sort state must be an object with a single key/value pair, with the key being "desc" and the value being a boolean. The default for sort direction is `desc: true`.
+The sort state must be an object with a single key/value pair, with the key being "desc" and the value being a boolean. The default for sort directino is `desc: true`.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md

@@ -2,4 +2,4 @@ The `defaultDate`/`default_date` prop has a null or empty string value by defaul
 
 If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor).  See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.
 
-You can leverage the `defaultDate`/`default_date` prop with custom logic in your filter or controller files where the determination of the default value changes based on user interaction. The page can load with an initial default date picker value or placeholder text, then after filter submission save the submitted values as the "new default" (via state or params).
+

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb

@@ -6,8 +6,14 @@
 
 ] %>
 
-<%= pb_rails("list", props: { enable_drag: true, items: initial_items }) do %>
-  <% initial_items.each do |item| %>
-    <%= pb_rails("list/item", props:{drag_id: item[:id]}) do %><%= item[:name] %><% end %>
+<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
+  <%= pb_rails("draggable/draggable_container") do %>
+    <%= pb_rails("list", props: {ordered: false}) do %>
+        <% initial_items.each do |item| %>
+            <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
+                <%= pb_rails("list/item") do %><%= item[:name] %><% end %>
+            <% end %>
+        <% end %>
+    <% end %>
   <% end %>
 <% end %>

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

@@ -11,7 +11,6 @@ examples:
   rails:
   - draggable_default_rails: Default
   - draggable_with_list_rails: Draggable with List Kit
-  - draggable_with_selectable_list_rails: Draggable with SelectableList Kit
   - draggable_with_cards_rails: Draggable with Cards
 
 

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

@@ -6,15 +6,19 @@ const DrawerBorders = () => {
   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 
+      <Flex padding="md"
           wrap
       >
         <Button marginRight="md"
@@ -32,12 +36,23 @@ const DrawerBorders = () => {
         >
           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}
@@ -49,10 +64,11 @@ const DrawerBorders = () => {
       <Drawer
           behavior="float"
           border="left"
+          fullHeight
           onClose={toggleBLeftDrawer}
           opened={openedBLeftDrawer}
           overlay={false}
-          placement="left"
+          placement="right"
           size="lg"
       >
         This is a Drawer with border left
@@ -60,14 +76,40 @@ const DrawerBorders = () => {
       <Drawer
           behavior="float"
           border="full"
+          fullHeight
           onClose={toggleBFullDrawer}
           opened={openedBFullDrawer}
           overlay={false}
-          placement="left"
+          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>
     </>
   );
 };

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

@@ -26,6 +26,7 @@ const DrawerBreakpoints = () => {
         <Drawer
             behavior={"push"}
             breakpoint="sm"
+            fullHeight
             onClose={toggleSmallDrawer}
             opened={smallDrawerOpened}
             overlay={false}

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

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

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

@@ -1,56 +1,31 @@
-import React, { useState, useEffect } from "react"
-import { Button, Drawer, Icon, Nav, NavItem } from "playbook-ui"
+import React from "react";
+import { Button, Drawer, Icon, Title } 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 (
-    <div>
-      <Button id='menuButton'
-          padding='xs'
+    <>
+      <Button id="menuButton"
+          padding="sm"
       >
-        <Icon icon='bars'
-            size='2x'
+        <Icon icon="bars"
+            size="3x"
         />
       </Button>
       <Drawer
-          breakpoint="md"
-          placement='bottom'
-          size='full'
-          triggerId='menuButton'
+          behavior="push"
+          closeBreakpoint="md"
+          menuButtonID="menuButton"
+          overlay={false}
+          placement="left"
+          size="lg"
           withinElement
       >
-        <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>
+        <Title paddingBottom="md">A really neat menu</Title>
+        <Button text="This Button does nothing" />
       </Drawer>
-    </div>
-  )
-}
+    </>
+  );
+};
 
-export default DrawerMenu
+export default DrawerMenu;

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

@@ -1,24 +1,6 @@
-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
-
+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.
 
+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,25 +1,24 @@
-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
@@ -28,23 +27,29 @@ const DrawerSizes = () => {
 
       {/* Drawers for each size */}
       <Drawer
+          behavior="push"
+          fullHeight
           onClose={toggleNoOverlayDrawer}
           opened={openedNoOverlayDrawer}
           overlay={false}
-          size='lg'
+          placement="right"
+          size="lg"
       >
         This is a Drawer with no overlay
       </Drawer>
       <Drawer
+          behavior="push"
+          fullHeight
           onClose={toggleOverlayDrawer}
           opened={openedOverlayDrawer}
-          placement='right'
-          size='lg'
+          overlay
+          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,8 +19,7 @@ const DrawerSizes = () => {
   return (
     <>
       <Flex wrap>
-        <Button 
-            marginRight="md"
+        <Button marginRight="md"
             onClick={toggleXsDrawer}
         >
           XS Drawer
@@ -49,8 +48,11 @@ const DrawerSizes = () => {
 
       {/* Drawers for each size */}
       <Drawer
+          behavior="push"
+          fullHeight
           onClose={toggleXsDrawer}
           opened={openedXsDrawer}
+          overlay
           placement="right"
           size="xs"
       >
@@ -58,32 +60,47 @@ 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,8 +6,7 @@ examples:
   
   react:
   - drawer_default: Default
-  - drawer_behavior: Push Behavior
-  - drawer_menu: Within Element
+  - drawer_menu: Menu Behavior 
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
   - drawer_borders: Borders 

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

@@ -4,4 +4,3 @@ 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 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 more cleaner look.

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

@@ -8,12 +8,10 @@ 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_format: Format as You Type
+  - phone_number_input_validation: Form Validation

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

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

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md

@@ -1,3 +1,3 @@
-The `sticky_left_column` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
+The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
 
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `sticky_left_column`.
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyLeftColumn`.

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

@@ -5,8 +5,6 @@ examples:
     - table_lg: Large
     - table_sticky: Sticky Header
     - table_sticky_left_columns: Sticky Left Column
-    - table_sticky_right_columns: Sticky Right Column
-    - table_sticky_columns: Sticky Left and Right Columns
     - table_header: Table Header
     - table_alignment_row_rails: Row Alignment
     - table_alignment_column_rails: Cell Alignment