playbook_ui_docs 14.25.0.pre.alpha.testingcss9700 → 14.25.0.pre.alpha.testingcss9751

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.25.0.pre.alpha.testingcss9700
+  version: 14.25.0.pre.alpha.testingcss9751
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-08-18 00:00:00.000000000 Z
+date: 2025-08-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -837,24 +837,6 @@ files:
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md
 - app/pb_kits/playbook/pb_draggable/docs/example.yml
 - app/pb_kits/playbook/pb_draggable/docs/index.js
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.html.erb
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.html.erb
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.html.erb
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.md
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.html.erb
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.md
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.html.erb
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx
-- app/pb_kits/playbook/pb_drawer/docs/example.yml
-- app/pb_kits/playbook/pb_drawer/docs/index.js
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx
@@ -1033,7 +1015,8 @@ files:
 - app/pb_kits/playbook/pb_flex/docs/_flex_default.md
 - app/pb_kits/playbook/pb_flex/docs/_flex_gap.html.erb
 - app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx
-- app/pb_kits/playbook/pb_flex/docs/_flex_gap.md
+- app/pb_kits/playbook/pb_flex/docs/_flex_gap_rails.md
+- app/pb_kits/playbook/pb_flex/docs/_flex_gap_react.md
 - app/pb_kits/playbook/pb_flex/docs/_flex_inline.html.erb
 - app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx
 - app/pb_kits/playbook/pb_flex/docs/_flex_inline.md

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

@@ -1,8 +0,0 @@
-<%= pb_rails("button", props: { text: "Push Drawer", margin_right: "sm", data: {"open-drawer": "drawer-3"} }) %>
-
-<%= pb_rails("drawer", props: { 
-    id:"drawer-3", 
-    behavior: "push"
-}) do  %>
-    Test me (Push Behavior)
-<% end %>

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

@@ -1,41 +0,0 @@
-import React, { useState } from "react"
-
-import Button from '../../pb_button/_button'
-import Drawer from '../../pb_drawer/_drawer'
-import Flex from '../../pb_flex/_flex'
-
-const useDrawer = (visible = false) => {
-  const [opened, setOpened] = useState(visible)
-  const toggle = () => setOpened(!opened)
-
-  return [opened, toggle]
-}
-
-const DrawerBehavior = () => {
-  const [drawerOpen, toggleDrawerOpen] = useDrawer()
-
-  return (
-    <>
-      <Flex wrap>
-        <Button id='sm'
-            marginRight='md'
-            onClick={toggleDrawerOpen}
-        >
-          {"Push Behavior"}
-        </Button>
-      </Flex>
-      <Flex>
-        <Drawer
-            behavior={"push"}      
-            onClose={toggleDrawerOpen}
-            opened={drawerOpen}
-            size={"lg"}
-        >
-          Test me (Push Behavior)
-        </Drawer>
-      </Flex>
-    </>
-  )
-}
-
-export default DrawerBehavior

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

@@ -1,33 +0,0 @@
-<%= pb_rails("flex") do %>
-    <%= pb_rails("button", props: { text: "Drawer with border right", margin_right: "sm", data: {"open-drawer": "drawer-12"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-12", 
-        overlay: false,
-        border: "right"
-    }) do  %>
-        Test me (Border Right)
-    <% end %>
-    
-    
-    <%= pb_rails("button", props: { text: "Drawer with border left", margin_right: "sm", data: {"open-drawer": "drawer-13"} }) %>
-    
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-13", 
-        overlay: false,
-        border: "left"
-    }) do  %>
-        Test me (Border Left)
-    <% end %>
-
-    <%= pb_rails("button", props: { text: "Drawer with border full", data: {"open-drawer": "drawer-14"} }) %>
-    
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-14", 
-        overlay: false,
-        border: "full"
-    }) do  %>
-        Test me (Border Full)
-    <% end %>
-<% end %>
-

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

@@ -1,78 +0,0 @@
-import React, { useState } from "react";
-
-import Button from '../../pb_button/_button'
-import Drawer from '../../pb_drawer/_drawer'
-import Flex from '../../pb_flex/_flex'
-
-const DrawerBorders = () => {
-  // Individual state variables for each drawer size
-  const [openedBRightDrawer, setOpenedBRightDrawer] = useState(false);
-  const [openedBLeftDrawer, setOpenedBLeftDrawer] = useState(false);
-  const [openedBFullDrawer, setOpenedBFullDrawer] = useState(false);
-
-  // Toggle functions for each drawer
-  const toggleBRightDrawer = () => setOpenedBRightDrawer(!openedBRightDrawer);
-  const toggleBLeftDrawer = () => setOpenedBLeftDrawer(!openedBLeftDrawer);
-  const toggleBFullDrawer = () => setOpenedBFullDrawer(!openedBFullDrawer);
-
-  return (
-    <>
-      <Flex 
-          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>
-      </Flex>
-
-      {/* Drawers for each size */}
-      <Drawer
-          behavior="float"
-          border="right"
-          onClose={toggleBRightDrawer}
-          opened={openedBRightDrawer}
-          overlay={false}
-          placement="right"
-          size="lg"
-      >
-        This is a Drawer with border right  
-      </Drawer>
-      <Drawer
-          behavior="float"
-          border="left"
-          onClose={toggleBLeftDrawer}
-          opened={openedBLeftDrawer}
-          overlay={false}
-          placement="right"
-          size="lg"
-      >
-        This is a Drawer with border left
-      </Drawer>
-      <Drawer
-          behavior="float"
-          border="full"
-          onClose={toggleBFullDrawer}
-          opened={openedBFullDrawer}
-          overlay={false}
-          placement="right"
-          size="lg"
-      >
-        This is a Drawer with border full
-      </Drawer>
-    </>
-  );
-};
-
-export default DrawerBorders;

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

@@ -1,3 +0,0 @@
-
-<%= pb_rails("body", props: { text: " The breakpoint prop determines when the Drawer is always visible. Above the specified breakpoint, the Drawer remains open on the page. Below it, only the trigger element is shown, allowing you to toggle the drawer open and closed. To see this in action, click the button below and resize your window.", padding_bottom: "md" }) %>
-<%= pb_rails("button", props: { text: "Open Doc Example in New Tab", new_window: true, link: "/drawer_page", margin_right: "lg" }) %>

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

@@ -1,26 +0,0 @@
-import React from "react"
-import Button from '../../pb_button/_button'
-import Body from "../../pb_body/_body"
-
-const DrawerMenu = () => {
-  return (
-    <>
-      <Body>
-        The breakpoint prop determines when the Drawer is always visible. Above
-        the specified breakpoint, the Drawer remains open on the page. Below it,
-        only the trigger element is shown, allowing you to toggle the drawer
-        open and closed. To see this in action, click the button below and
-        resize your window.
-      </Body>
-      <Button
-          link='https://8njdkc.csb.app/'
-          marginTop='md' 
-          newWindow 
-      >
-        Open Doc Example in New Tab
-      </Button>
-    </>
-  )
-}
-
-export default DrawerMenu

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

@@ -1,20 +0,0 @@
-<%= pb_rails("flex") do %>
-    <%= pb_rails("button", props: { text: "Left Drawer", margin_right: "sm", data: {"open-drawer": "drawer-1"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-1", 
-    }) do  %>
-        Test me (Left Drawer)
-    <% end %>
-    
-    
-    <%= pb_rails("button", props: { text: "Right Drawer", data: {"open-drawer": "drawer-2"} }) %>
-    
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-2", 
-        placement: "right"
-    }) do  %>
-        Test me (Right Drawer)
-    <% end %>
-<% end %>
-

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

@@ -1,59 +0,0 @@
-import React, { useState } from "react";
-
-import Button from '../../pb_button/_button'
-import Drawer from '../../pb_drawer/_drawer'
-import Flex from '../../pb_flex/_flex'
-
-const useDrawer = (visible = false) => {
-  const [opened, setOpened] = useState(visible);
-  const toggle = () => setOpened(!opened);
-
-  return [opened, toggle];
-};
-
-const DrawerDefault = () => {
-  const [drawerLeftOpen, toggleDrawerLeftOpen] = useDrawer();
-  const [drawerRightOpen, toggleDrawerRightOpen ] = useDrawer();
-
-  return (
-    <>
-      <Flex wrap>
-        <Button
-            id="sm"
-            marginRight="md"
-            onClick={toggleDrawerLeftOpen}
-        >
-          {"Left Drawer"}
-        </Button>
-        <Button
-            marginRight="xl"
-            onClick={toggleDrawerRightOpen}
-        >
-          {"Right Drawer"}
-        </Button>
-      </Flex>
-      <Flex>
-        {/* Left Drawer */}
-        <Drawer
-            onClose={toggleDrawerLeftOpen}
-            opened={drawerLeftOpen}
-            size={"lg"}
-        >
-          Test me (Left Drawer)
-        </Drawer>
-
-        {/* Right Drawer */}
-        <Drawer
-            onClose={toggleDrawerRightOpen}
-            opened={drawerRightOpen}
-            placement={"right"}
-            size={"lg"}
-        >
-          Test me (Right Drawer)
-        </Drawer>
-      </Flex>
-    </>
-  );
-};
-
-export default DrawerDefault;

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

@@ -1,24 +0,0 @@
-<%= pb_rails("button", props: { padding: "xs", margin_right: "sm", data: {"open-drawer": "drawer-4"} }) do %>
-    <%= pb_rails("icon", props: { icon: "bars", size: "2x" }) %>
-<% end %>
-
-<%= pb_rails("drawer", props: { 
-    id:"drawer-4", 
-    within_element: true,
-    placement: "bottom",
-    breakpoint: "md",
-    size: "full"
-}) do  %>
-    <%= pb_rails("nav", props: { display: {xl: "none", lg: "none", md: "none", sm: "block" } }) do %>
-        <%= pb_rails("nav/item", props: { text: "Photos", link: "#" }) %>
-        <%= pb_rails("nav/item", props: { text: "Music", link: "#" }) %>
-        <%= pb_rails("nav/item", props: { text: "Video", link: "#", active: true }) %>
-        <%= pb_rails("nav/item", props: { text: "Files", link: "#" }) %>
-    <% end %>
-    <%= pb_rails("nav", props: { display: {md: "block", sm: "none", xs: "none" }, orientation: "horizontal" }) do %>
-        <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
-        <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
-        <%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
-        <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
-    <% end %>
-<% end %>

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

@@ -1,61 +0,0 @@
-import React, { useState, useEffect } from "react"
-
-import Button from '../../pb_button/_button'
-import Drawer from '../../pb_drawer/_drawer'
-import Icon from '../../pb_icon/_icon'
-import Nav from '../../pb_nav/_nav'
-import NavItem from '../../pb_nav/_item'
-
-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'
-      >
-        <Icon icon='bars'
-            size='2x'
-        />
-      </Button>
-      <Drawer
-          breakpoint='md'
-          placement='bottom'
-          size='full'
-          triggerId='menuButton'
-          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>
-      </Drawer>
-    </div>
-  )
-}
-
-export default DrawerMenu

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

@@ -1,24 +0,0 @@
-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
-
-
-
-

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

@@ -1,21 +0,0 @@
-<%= pb_rails("flex") do %>
-    <%= pb_rails("button", props: { text: "No Overlay Drawer", margin_right: "sm", data: {"open-drawer": "drawer-10"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-10", 
-        overlay: false
-    }) do  %>
-        Test me (No Overlay)
-    <% end %>
-    
-    
-    <%= pb_rails("button", props: { text: "Overlay Drawer", data: {"open-drawer": "drawer-11"} }) %>
-    
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-11", 
-        placement: "right"
-    }) do  %>
-        Test me (Has Overlay)
-    <% end %>
-<% end %>
-

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

@@ -1,54 +0,0 @@
-import React, { useState } from "react"
-
-import Button from '../../pb_button/_button'
-import Drawer from '../../pb_drawer/_drawer'
-import Flex from '../../pb_flex/_flex'
-
-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
-          onClose={toggleNoOverlayDrawer}
-          opened={openedNoOverlayDrawer}
-          overlay={false}
-          placement='right'
-          size='lg'
-      >
-        This is a Drawer with no overlay
-      </Drawer>
-      <Drawer
-          onClose={toggleOverlayDrawer}
-          opened={openedOverlayDrawer}
-          placement='right'
-          size='lg'
-      >
-        This is a Drawer with an overlay
-      </Drawer>
-    </>
-  )
-}
-
-export default DrawerSizes

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

@@ -1 +0,0 @@
-Click the button to close the drawer when there is no overlay.

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

@@ -1,49 +0,0 @@
-<%= pb_rails("flex") do %>
-    <%= pb_rails("button", props: { text: "XS Drawer", margin_right: "sm", data: {"open-drawer": "drawer-5"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-5", 
-        size: "xs"
-    }) do  %>
-        XS 
-    <% end %>
-    
-    <%= pb_rails("button", props: { text: "SM Drawer", margin_right: "sm", data: {"open-drawer": "drawer-6"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-6", 
-        size: "sm",
-        placement: "right"
-    }) do  %>
-        This is a small drawer 
-    <% end %>
-
-    <%= pb_rails("button", props: { text: "MD Drawer", margin_right: "sm", data: {"open-drawer": "drawer-7"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-7", 
-        size: "md"
-    }) do  %>
-        This is a medium drawer 
-    <% end %>
-
-    <%= pb_rails("button", props: { text: "LG Drawer", margin_right: "sm", data: {"open-drawer": "drawer-8"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-8", 
-        size: "lg",
-        placement: "right"
-    }) do  %>
-        This is a large drawer 
-    <% end %>
-
-    <%= pb_rails("button", props: { text: "XL Drawer", margin_right: "sm", data: {"open-drawer": "drawer-9"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-9", 
-        size: "xl"
-    }) do  %>
-        This is an extra large drawer 
-    <% end %>
-<% end %>
-

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

@@ -1,99 +0,0 @@
-import React, { useState } from "react";
-
-import Button from '../../pb_button/_button'
-import Drawer from '../../pb_drawer/_drawer'
-import Flex from '../../pb_flex/_flex'
-
-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
-          onClose={toggleXsDrawer}
-          opened={openedXsDrawer}
-          placement="right"
-          size="xs"
-      >
-        XS 
-      </Drawer>
-
-      <Drawer
-          onClose={toggleSmDrawer}
-          opened={openedSmDrawer}
-          size="sm"
-      >
-        This is an SM Drawer
-      </Drawer>
-
-      <Drawer
-          onClose={toggleMdDrawer}
-          opened={openedMdDrawer}
-          placement="right"
-      >
-        This is an MD Drawer
-      </Drawer>
-
-      <Drawer
-          onClose={toggleLgDrawer}
-          opened={openedLgDrawer}
-          size="lg"
-      >
-        This is an LG Drawer
-      </Drawer>
-
-      <Drawer
-          onClose={toggleXlDrawer}
-          opened={openedXlDrawer}
-          placement="right"
-          size="xl"
-      >
-        This is an XL Drawer
-      </Drawer>
-    </>
-  );
-};
-
-export default DrawerSizes;