playbook_ui 18.2.0.pre.rc.0 → 18.2.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ea7a2cbd41fa905d1b87ea9045bf7b2ba422f28fb0a2b573d236bdc9298ac3ff
-  data.tar.gz: a33468825a7669e840ba73fa1e57c838bba54a00e8900d942de1285e6dd418f2
+  metadata.gz: 5db309b02e5dd780da0f53f519c006634be2dd50e13553ce229ddd8be84a5527
+  data.tar.gz: dd7da084d43bf1060792d5dcc88dcc5fe2eaabe30d143f262083c80bef7f0a90
 SHA512:
-  metadata.gz: 1d3d5f31785f165d440106d964e9c2e594972664f7f01447bf93ffc3b83b0c3d0c2c7c0d53af0ada8ce2737cd0189b9a9dd39521b291bf7638e7ad398e660f6e
-  data.tar.gz: 037a62fcdd8ecf9417080645b462bf7f3a3ccc2a2f96baf7feed75b10f17aa43c7b5491711bdc947f4ed28a61a247579cb016c11962e4a7f745615fa5417fd93
+  metadata.gz: fcc52f997e3940eae2b3c00d36620ab00d2f44fddbce652671a6a3f6223877ce3cce1310d994e405dffad6fa92629727c8b1651a777cf379dd198a810ba1c93d
+  data.tar.gz: 18cd7637fe9d879a22a4df5505afda151de2e0a8f6bb02dc742016efe4bf4692bc2d08b50c88f078be99b0ea95c95e543dea5061489c4ffe9eada2799900a509

data/app/pb_kits/playbook/pb_advanced_table/Components/TablePagination.tsx

@@ -1,33 +1,55 @@
 import React from "react";
 import Pagination from "../../pb_pagination/_pagination";
+import SectionSeparator from "../../pb_section_separator/_section_separator";
 
 interface TablePaginationProps {
-  table: any;
   onChange: (page: number) => void;
   position: "top" | "bottom";
   range?: number;
+  sectionSeparator?: boolean;
+  table: any;
 }
 
 const TablePagination: React.FC<TablePaginationProps> = ({
-  table,
   onChange,
   position,
-  range = 5
+  range = 5,
+  sectionSeparator = false,
+  table,
 }) => {
   const current = table.getState().pagination.pageIndex + 1;
   const total = table.getPageCount();
 
-  return (
+  // Pagination returns null when total <= 1; avoid orphan separators.
+  if (total <= 1) {
+    return null;
+  }
+
+  const pagination = (
     <Pagination
         current={current}
         key={`pagination-${position}-${current}`}
-        marginBottom={position === "top" ? "xs" : undefined}
-        marginTop={position === "bottom" ? "xs" : undefined}
+        marginBottom={!sectionSeparator && position === "top" ? "xs" : undefined}
+        marginLeft={sectionSeparator ? "lg" : undefined}
+        marginTop={!sectionSeparator && position === "bottom" ? "xs" : undefined}
         onChange={onChange}
+        paddingY={sectionSeparator ? "xs" : undefined}
         range={range}
         total={total}
     />
   );
+
+  if (!sectionSeparator) {
+    return pagination;
+  }
+
+  return (
+    <>
+      <SectionSeparator />
+      {pagination}
+      {position === "top" && <SectionSeparator />}
+    </>
+  );
 };
 
 export default TablePagination;

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -293,6 +293,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             onChange={onPageChange}
             position="top"
             range={paginationProps?.range}
+            sectionSeparator={paginationProps?.sectionSeparator}
             table={table}
         />
       )}
@@ -375,6 +376,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             onChange={onPageChange}
             position="bottom"
             range={paginationProps?.range}
+            sectionSeparator={paginationProps?.sectionSeparator}
             table={table}
         />
       )}

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -1385,6 +1385,47 @@ test("cascadeCollapse=true with header toggle all: collapse all then expand all
   })
 })
 
+test("pagination does not render section separators by default", () => {
+  const { container } = render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        pagination
+        paginationProps={{ pageSize: 1 }}
+        tableData={MOCK_DATA}
+    />
+  )
+
+  expect(container.querySelectorAll(".pb_paginate")).toHaveLength(2)
+  expect(container.querySelectorAll(".pb_section_separator_kit")).toHaveLength(0)
+})
+
+test("paginationProps.sectionSeparator renders separators for top and bottom pagination", () => {
+  const { container } = render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        pagination
+        paginationProps={{ pageSize: 1, sectionSeparator: true }}
+        tableData={MOCK_DATA}
+        tableProps={{ container: false }}
+    />
+  )
+
+  const paginations = container.querySelectorAll(".pb_paginate")
+  const separators = container.querySelectorAll(".pb_section_separator_kit")
+
+  expect(paginations).toHaveLength(2)
+  expect(separators).toHaveLength(3)
+  expect(paginations[0]).toHaveClass("ml_lg")
+  expect(paginations[0]).toHaveClass("py_xs")
+  expect(paginations[1]).toHaveClass("ml_lg")
+  expect(paginations[1]).toHaveClass("py_xs")
+  expect(separators[0].nextElementSibling).toBe(paginations[0])
+  expect(paginations[0].nextElementSibling).toBe(separators[1])
+  expect(separators[2].nextElementSibling).toBe(paginations[1])
+})
+
 const groupedColumnDefinitions = [
   {
     accessor: "year",
@@ -1477,4 +1518,5 @@ test("single header row does not mark every column as last-header-cell", () => {
   expect(headers[0]).not.toHaveClass("last-header-cell")
   expect(groupEnds).toHaveLength(1)
   expect(kit.querySelector("tbody td.last-cell")).not.toBeInTheDocument()
-})
+})
+

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

@@ -0,0 +1,90 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import Button from '../../pb_button/_button'
+import Card from '../../pb_card/_card'
+import Filter from '../../pb_filter/_filter'
+import Flex from '../../pb_flex/_flex'
+import TextInput from '../../pb_text_input/_text_input'
+import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
+
+const AdvancedTablePaginationSectionSeparator = (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 paginationProps = {
+    pageSize: 10,
+    sectionSeparator: true,
+  }
+
+  return (
+    <Card padding="none">
+      <Filter
+          background={false}
+          minWidth="xs"
+          results={PAGINATION_MOCK_DATA.length}
+          sortOptions={{
+            year: "Year",
+            newEnrollments: "New Enrollments",
+            scheduledMeetings: "Scheduled Meetings",
+          }}
+          sortValue={[{ name: "year", dir: "asc" }]}
+      >
+        {({ closePopover }) => (
+          <>
+            <TextInput label="Year" />
+            <Flex spacing="between">
+              <Button
+                  onClick={closePopover}
+                  text="Filter"
+              />
+              <Button
+                  text="Defaults"
+                  variant="secondary"
+              />
+            </Flex>
+          </>
+        )}
+      </Filter>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          pagination
+          paginationProps={paginationProps}
+          responsive="none"
+          tableData={PAGINATION_MOCK_DATA}
+          tableProps={{ container: false }}
+          {...props}
+      />
+    </Card>
+  )
+}
+
+export default AdvancedTablePaginationSectionSeparator

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

@@ -0,0 +1,5 @@
+Use `sectionSeparator` on `paginationProps` to add section separators and spacing around pagination, matching the Table pagination/filter pattern.
+
+- Defaults to `false`
+- When `true`, top pagination is sandwiched by separators, bottom pagination gets a leading separator, and both use Table filter spacing (`marginLeft="lg"`, `paddingY="xs"`)
+- Recommended with `tableProps.container` set to `false` inside a Card (often with a Filter above), as shown here

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

@@ -3,4 +3,5 @@
 - `pageIndex`: An optional prop to set which page is set to open on initial load. Default is '0'
 - `pageSize`: An optional prop to set total number of rows for each page before the Table paginates. Default is '20'
 - `range`: The range prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the range prop. See [here for more details](https://playbook.powerapp.cloud/kits/pagination/react#default). Default is set to '5'
-- `onPageChange`: A callback function that gives to access to the current page index.
+- `onPageChange`: A callback function that gives to access to the current page index.
+- `sectionSeparator`: Adds section separators and Table filter-pattern spacing around pagination. Default is `false`. See the [Section Separator](https://playbook.powerapp.cloud/kits/advanced_table/react#pagination-section-separator) example.

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

@@ -67,6 +67,7 @@ examples:
   - advanced_table_with_custom_header_multi_header: Custom Header with Multiple Headers
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props
+  - advanced_table_pagination_section_separator: Pagination Section Separator
   - advanced_table_loading: Loading State
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_column_headers: Multi-Header Columns

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

@@ -13,6 +13,7 @@ export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cel
 export { default as AdvancedTableFullWidthCell } from './_advanced_table_full_width_cell.jsx'
 export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
 export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'
+export { default as AdvancedTablePaginationSectionSeparator } from './_advanced_table_pagination_section_separator.jsx'
 export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
 export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
 export { default as AdvancedTableSelectableRows } from './_advanced_table_selectable_rows.jsx'

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -106,6 +106,22 @@
         }
       }
 
+      // Let Rails autocomplete use the trigger space left by its action icons.
+      > :has([data-dropdown-autocomplete]) {
+        flex: 1;
+        min-width: 0;
+
+        .pb_flex_kit:has([data-dropdown-autocomplete]) {
+          min-width: 0;
+          width: 100%;
+        }
+
+        [data-dropdown-autocomplete] {
+          min-width: 0;
+          width: 100%;
+        }
+      }
+
       .dropdown_input:disabled {
         background-color: $input_background_disabled;
         color: $input_text_disabled;