playbook_ui_docs 14.24.0.pre.rc.6 → 14.25.0.pre.alpha.testingcss9700

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bd832d17e4242874ee18b73cb11bbe573054e8ebaace3cad31904ce48cbc05a4
-  data.tar.gz: 2c18cdd478d7c09d38076223c94365d5a9e1e9e01c029f1dc06966818afbebeb
+  metadata.gz: ecb2289b05e51254aa62c364e4a543d374a3790ca42c14bb9ed86d65bd1cff47
+  data.tar.gz: 147189476726310d62ad857844cbb54e63a99793989eadbf333703bc1311904e
 SHA512:
-  metadata.gz: '02799b0d6650e5d6a913ca2038ab31ef1519e4f69b9286757bf3c5dd8ea3fb1033bdbc67e4c0562ac7723aa882b986c069accdeab2c0eb63f87c4e5ec63e8484'
-  data.tar.gz: 11246123eb948827f45d76b69b1d091a3ea1e2642635af178baced14d7a32d4befa437d2ebff7c78f69b894c5d34c43b6b88e8d74770a19d1546361863c7882f
+  metadata.gz: f92d4ca2af12ca9379faadd91a67852ebcdb6574dde37e8439db1a4f42a4113d99c94b2e7400323e5278dc210e595311dd8e492398bfcb83e5d75065dda2d84e
+  data.tar.gz: c73002345301e74ae4ff537ae0ad613ffb0603be5c777724dce1982e8ef4161547afb4a2f3110be2786344e70a315826d06c6c71d9198b0d879d774b806c6003

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.html.erb

@@ -0,0 +1,43 @@
+<% column_definitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        accessor: "newEnrollments",
+        label: "New Enrollments",
+      },
+      {
+        accessor: "scheduledMeetings",
+        label: "Scheduled Meetings",
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        accessor: "attendanceRate",
+        label: "Attendance Rate",
+      },
+      {
+        accessor: "completedClasses",
+        label: "Completed Classes",
+      },
+      {
+        accessor: "classCompletionRate",
+        label: "Class Completion Rate",
+      },
+      {
+        accessor: "graduatedStudents",
+        label: "Graduated Students",
+      },
+    ],
+  },
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true } }) %>

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

@@ -0,0 +1,64 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableColumnHeadersVerticalBorder = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          accessor: "newEnrollments",
+          label: "New Enrollments",
+        },
+        {
+          accessor: "scheduledMeetings",
+          label: "Scheduled Meetings",
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          accessor: "attendanceRate",
+          label: "Attendance Rate",
+        },
+        {
+          accessor: "completedClasses",
+          label: "Completed Classes",
+        },
+        {
+          accessor: "classCompletionRate",
+          label: "Class Completion Rate",
+        },
+        {
+          accessor: "graduatedStudents",
+          label: "Graduated Students",
+        },
+      ],
+    },
+  ];
+  
+  const tableProps = {
+    verticalBorder: true
+  }
+
+  return (
+    <>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          tableProps={tableProps}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default AdvancedTableColumnHeadersVerticalBorder

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

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

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

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

@@ -0,0 +1 @@
+`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_advanced_table/docs/example.yml

@@ -13,6 +13,7 @@ examples:
   - advanced_table_with_custom_header_rails: Custom Header Cell
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
+  - advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders
   - advanced_table_no_subrows: Table with No Subrows or Expansion
   - advanced_table_selectable_rows_rails: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
@@ -53,6 +54,7 @@ examples:
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
+  - advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders
   - advanced_table_no_subrows: Table with No Subrows or Expansion
   - advanced_table_pinned_rows: Pinned Rows
   - advanced_table_selectable_rows: Selectable Rows
@@ -66,8 +68,10 @@ examples:
   - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
   - advanced_table_row_styling: Row Styling
+  - advanced_table_padding_control_per_row: Padding Control using Row Styling
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
+  - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color
   - advanced_table_fullscreen: Fullscreen
   - advanced_table_infinite_scroll: Infinite Scroll

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

@@ -21,6 +21,7 @@ export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
 export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
 export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
+export { default as AdvancedTableColumnHeadersVerticalBorder } from './_advanced_table_column_headers_vertical_border.jsx'
 export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
 export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
 export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
@@ -42,4 +43,6 @@ export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_c
 export { default as AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'
 export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced_table_with_custom_header_multi_header.jsx'
 export { default as AdvancedTableSortPerColumn } from './_advanced_table_sort_per_column.jsx'
-export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'
+export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'
+export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
+export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'

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

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

@@ -0,0 +1,3 @@
+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_circle_icon_button/docs/example.yml

@@ -5,6 +5,7 @@ examples:
   - circle_icon_button_link: Link
   - circle_icon_button_loading: Loading
   - circle_icon_button_size: Size
+  - circle_icon_button_input_options: Input Options
   
   react:
   - circle_icon_button_default: Default

data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date", props: {
+  date: Date.today,
+  show_current_year: true
+}) %>

data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import FormattedDate from '../../pb_date/_date'
+
+const DateWithShowCurrentYear = (props) => {
+  return (
+    <>
+      <FormattedDate
+          showCurrentYear
+          value={new Date()}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default DateWithShowCurrentYear

data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.md

@@ -0,0 +1 @@
+By default, the Date kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true as shown here. 

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

@@ -5,12 +5,14 @@ examples:
   - date_variants: Variants
   - date_alignment: Alignment
   - date_timezone: Timezones
+  - date_with_show_current_year: Show Current Year
   - date_unstyled: Unstyled
 
   react:
   - date_default: Default
   - date_variants: Variants
   - date_alignment: Alignment
+  - date_with_show_current_year: Show Current Year
   - date_unstyled: Unstyled
 
   swift:

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

@@ -2,3 +2,4 @@ export { default as DateDefault } from './_date_default.jsx'
 export { default as DateVariants } from './_date_variants.jsx'
 export { default as DateAlignment } from './_date_alignment.jsx'
 export { default as DateUnstyled } from './_date_unstyled.jsx'
+export { default as DateWithShowCurrentYear } from './_date_with_show_current_year.jsx'

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

@@ -0,0 +1,22 @@
+<%= 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

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

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

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

@@ -8,6 +8,7 @@ examples:
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
+  - fixed_confirmation_toast_no_icon: No Icon
   
   react:
   - fixed_confirmation_toast_default: Default
@@ -17,6 +18,7 @@ examples:
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
+  - fixed_confirmation_toast_no_icon: No Icon
 
   swift:
   - fixed_confirmation_toast_default_swift: Default

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

@@ -5,3 +5,4 @@ export { default as FixedConfirmationToastPositions } from './_fixed_confirmatio
 export { default as FixedConfirmationToastAutoClose } from './_fixed_confirmation_toast_auto_close.jsx'
 export { default as FixedConfirmationToastChildren } from './_fixed_confirmation_toast_children.jsx'
 export { default as FixedConfirmationToastCustomIcon } from './_fixed_confirmation_toast_custom_icon.jsx'
+export { default as FixedConfirmationToastNoIcon } from './_fixed_confirmation_toast_no_icon.jsx'

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

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

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

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

@@ -6,3 +6,4 @@ examples:
   react:
   - pagination_default: Default
   - pagination_page_change: Page Change
+  - pagination_external_control: External Control

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

@@ -1,2 +1,3 @@
 export { default as PaginationDefault } from './_pagination_default.jsx'
 export { default as PaginationPageChange } from './_pagination_page_change.jsx'
+export { default as PaginationExternalControl } from './_pagination_external_control.jsx'