playbook_ui_docs 14.25.0.pre.alpha.testingcss10064 → 14.25.0.pre.rc.0

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.25.0.pre.alpha.testingcss10064
+  version: 14.25.0.pre.rc.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-08-29 00:00:00.000000000 Z
+date: 2025-08-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -98,10 +98,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading_react.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_no_subrows.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_no_subrows.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx
@@ -462,8 +458,6 @@ files:
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.html.erb
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.jsx
-- app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.html.erb
-- app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.md
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.md
@@ -837,6 +831,24 @@ 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
@@ -997,9 +1009,6 @@ files:
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.md
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_swift.md
-- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.html.erb
-- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.jsx
-- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.md
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions_swift.md
@@ -1015,8 +1024,7 @@ 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_rails.md
-- app/pb_kits/playbook/pb_flex/docs/_flex_gap_react.md
+- app/pb_kits/playbook/pb_flex/docs/_flex_gap.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
@@ -1598,8 +1606,6 @@ files:
 - app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx
 - app/pb_kits/playbook/pb_pagination/docs/_pagination_default_rails.md
 - app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md
-- app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control.jsx
-- app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control_react.md
 - app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx
 - app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md
 - app/pb_kits/playbook/pb_pagination/docs/data.js

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.jsx

@@ -1,60 +0,0 @@
-import React from "react"
-import AdvancedTable from '../_advanced_table'
-import Background from '../../pb_background/_background'
-import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
-
-const AdvancedTablePaddingControl = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling:{cellPadding: "none"},
-      customRenderer: (row, value) => (
-        <Background 
-            backgroundColor={row.original.newEnrollments > 20 ? "success_secondary" : "warning_secondary"}
-            padding="xs" 
-        >
-         {value}
-        </Background>
-      ), 
-
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-    },
-  ]
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          tableData={MOCK_DATA}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTablePaddingControl

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

@@ -1,3 +0,0 @@
-`columnStyling` can also be used to control padding on all cells in a given column via the use of the `cellPadding` key/value pair. `cellPadding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.  
-
-This control can be used in conjunction with the `customRenderer` item within each columnDefinition to achieve custom background colors for individual cells as seen here. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.jsx

@@ -1,57 +0,0 @@
-import React from "react"
-import AdvancedTable from '../_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
-
-const AdvancedTablePaddingControlPerRow = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-    },
-  ]
-
-const rowStyling = [
-  {
-    rowId: "1",
-    cellPadding:"md"
-  },
-];
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          rowStyling={rowStyling}
-          tableData={MOCK_DATA}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTablePaddingControlPerRow

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

@@ -1 +0,0 @@
-`rowStyling` can also be used to control padding on all cells in a given row via the use of the `cellPadding` key/value pair as shown here. `cellPadding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.html.erb

@@ -1,24 +0,0 @@
-<%= pb_rails("circle_icon_button", props: {
-  icon: "plus",
-  input_options: {
-    data: { "test-id": "add-button", remote: true },
-  }
-}) %>
-<br/>
-<%= pb_rails("circle_icon_button", props: {
-  icon: "pen",
-  variant: "secondary",
-  input_options: {
-    data: { "test-id": "edit-button" },
-    classname: "custom-secondary-button-class"
-  }
-}) %>
-<br/>
-<%= pb_rails("circle_icon_button", props: {
-  icon: "user",
-  variant: "link",
-  input_options: {
-    data: { "test-id": "user-button" },
-    id: "user-button-id"
-  }
-}) %>

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.md

@@ -1,3 +0,0 @@
-Use the `input_options` prop to pass additional attributes directly to the internal Playbook Button component. While the wrapper div has access to the standard `data` prop from KitBase, `input_options` allows you to attach attributes specifically to the internal button element.
-
-This is particularly useful when you need data attributes or other HTML attributes to apply to the button itself.

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

@@ -1,22 +0,0 @@
-<%= pb_rails("fixed_confirmation_toast", props: {
-  text: "Error Message",
-  status: "error",
-  icon: "none",
-  closeable: true
-})%>
-
-<br><br>
-
-<%= pb_rails("fixed_confirmation_toast", props: {
-  text: "Items Successfully Moved",
-  status: "success",
-  icon: "none"
-})%>
-
-<br><br>
-
-<%= pb_rails("fixed_confirmation_toast", props: {
-  text: "Scan to Assign Selected Items",
-  status: "neutral",
-  icon: "none"
-})%>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.jsx

@@ -1,43 +0,0 @@
-import React from 'react'
-
-import FixedConfirmationToast from '../_fixed_confirmation_toast'
-
-const FixedConfirmationToastNoIcon = (props) => {
-  return (
-    <div>
-      <div>
-        <FixedConfirmationToast
-            closeable
-            icon="none"
-            status="error"
-            text="Error Message"
-            {...props}
-        />
-      </div>
-
-      <br />
-
-      <div>
-        <FixedConfirmationToast
-            icon="none"
-            status="success"
-            text="Items Successfully Moved"
-            {...props}
-        />
-      </div>
-
-      <br />
-
-      <div>
-        <FixedConfirmationToast
-            icon="none"
-            status="neutral"
-            text="Scan to Assign Selected Items"
-            {...props}
-        />
-      </div>
-    </div>
-  )
-}
-
-export default FixedConfirmationToastNoIcon

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

@@ -1 +0,0 @@
-Setting `icon` prop to "none" will render the fixed confirmation toast without the left side icon. 

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap_rails.md

@@ -1,11 +0,0 @@
-##### Prop
-
-`gap` | `row_gap` | `column_gap` | **Type**: String | Hash | **Values**: xxs | xs | sm | md | lg | xl | none
-
-Setting the gap prop sets the `row_gap` and the `column_gap` props to the same size and creates equal space within a flex container.
-
-Setting the `row_gap` prop creates space between rows in a flex container.
-
-Setting the `column_gap` prop creates space between columns in a flex container.
-
-You can also set responsive values by passing a hash with device sizes and values. 

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap_react.md

@@ -1,11 +0,0 @@
-##### Prop
-
-`gap` | `rowGap` | `columnGap` | **Type**: String | Object | **Values**: xxs | xs | sm | md | lg | xl | none
-
-Setting the gap prop sets the `rowGap` and the `columnGap` props to the same size and creates equal space within a flex container.
-
-Setting the `rowGap` prop creates space between rows in a flex container.
-
-Setting the `columnGap` prop creates space between columns in a flex container.
-
-You can also set responsive values by passing an object with device sizes and values. 

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

@@ -1,112 +0,0 @@
-import React, { useState } from "react";
-import Flex from '../../pb_flex/_flex'
-import Pagination from '../../pb_pagination/_pagination'
-import Select from '../../pb_select/_select'
-import Table from '../../pb_table/_table'
-
-import { data } from "./data";
-
-const PaginationExternalControl = (props) => {
-  const [totalItems, setTotalItems] = useState(20);
-  const [itemsPerPage, setItemsPerPage] = useState(5);
-  const [currentPage, setCurrentPage] = useState(1);
-
-  const totalPages = Math.ceil(totalItems / itemsPerPage);
-
-  const handlePageChange = (page) => {
-    setCurrentPage(page);
-  };
-
-  const limitedData = data.slice(0, totalItems);
-  const startIndex = (currentPage - 1) * itemsPerPage;
-  const paginatedItems = limitedData.slice(startIndex, startIndex + itemsPerPage);
-
-  const handleTotalItemsChange = (event) => {
-    const value = Number(event.target.value);
-    setTotalItems(value);
-    setCurrentPage(1);
-  };
-
-  const handleItemsPerPageChange = (event) => {
-    const value = Number(event.target.value);
-    setItemsPerPage(value);
-    setCurrentPage(1);
-  };
-
-  return (
-    <>
-        <Flex gap="sm">
-            <Select
-                label="Total Items"
-                onChange={handleTotalItemsChange}
-                options={[
-                    { value: "5", text: "5" },
-                    { value: "10", text: "10" },
-                    { value: "20", text: "20" }
-                ]}
-                size="sm"
-                value={String(totalItems)}
-                {...props}
-            />
-
-            <Select
-                label="Items per Page"
-                onChange={handleItemsPerPageChange}
-                options={[
-                    { value: "3", text: "3" },
-                    { value: "5", text: "5" },
-                    { value: "10", text: "10" }
-                ]}
-                size="sm"
-                value={String(itemsPerPage)}
-                {...props}
-            />
-        </Flex>
-
-        <Pagination
-            current={currentPage}
-            key={`pagination-top-${currentPage}`}
-            marginBottom="xs"
-            onChange={handlePageChange}
-            range={5}
-            total={totalPages}
-            {...props}
-        />
-        <Table 
-            marginBottom="xs"
-            responsive="none" 
-            size="sm" 
-            {...props}
-        >
-            <Table.Head>
-            <Table.Row>
-                <Table.Header>{"Column 1"}</Table.Header>
-                <Table.Header>{"Column 2"}</Table.Header>
-                <Table.Header>{"Column 3"}</Table.Header>
-                <Table.Header>{"Column 4"}</Table.Header>
-                <Table.Header>{"Column 5"}</Table.Header>
-            </Table.Row>
-            </Table.Head>
-            <Table.Body>
-            {paginatedItems.map((row, index) => (
-                <Table.Row key={index}>
-                {row.map((cell, cellIndex) => (
-                    <Table.Cell key={cellIndex}>{cell}</Table.Cell>
-                ))}
-                </Table.Row>
-            ))}
-            </Table.Body>
-        </Table>
-        <Pagination
-            current={currentPage}
-            key={`pagination-bottom-${currentPage}`}
-            onChange={handlePageChange}
-            range={5}
-            total={totalPages}
-            {...props}
-        />
-    </>
-  )
-}
-
-export default PaginationExternalControl 

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

@@ -1,3 +0,0 @@
-The Pagination component supports external control of the current page. This allows for programmatically reseting or changing the current page when filters or other criteria change, without needing to unmount and remount the component.
-
-In this example, changing the "Total Items" or "Items per Page" dropdowns will automatically reset the pagination to page 1, demonstrating how external control works. The pagination component will update its internal state to reflect the new `current` prop value.