playbook_ui_docs 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469 → 16.10.0.pre.alpha.PLAY3088figmacodeconnecttrial17604

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 54da223a58079747e07a434617596364176d18e253953d3538b471b5682514fc
-  data.tar.gz: c9ac712cb4fc7704c4d122cf27377c4847d432664f7871a3536104332e85ddfe
+  metadata.gz: e41427b065be326b7f39a9c50c7646bb37c8ba6e468a2bac3bb56251c12cbc05
+  data.tar.gz: 6c8b2e841fa09acb651b1d5d3eaeb94c0d9b9bbdae92327e8cd14b394ac499e8
 SHA512:
-  metadata.gz: 845a59d6693e7e4c17c38ecc339b30cf06fa815a77e222f40c4521b98a513dfeff8166aaae4f5a7fd35e5ae30e30a271e2d55a6fd7bbbe6197b73428d8f33e52
-  data.tar.gz: db593af6693a42cde0cbe0ae239e25890041de12bc1957788210ac2db85a81e48cd499a8997c72e9bb39993c2fc8a039e3343a2e52061eb312c90711a5793333
+  metadata.gz: f979696ac74d9016cdb550585dd4233b39a6fb0f13fbe0b02976d67cf4ee89b0c634c7e277ae2e7547d3bdbdb712425bb4c9be18ab7f56a2d1f6528b3e6d817c
+  data.tar.gz: f3e4112c27741620a58b203ec014fa716cdfaf5599e7e424986f3e8c4661f3430ec59b0f5d34ef8d26e918f21f94957d6e59d9de6b9638c98979f9f8451abded

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

@@ -1,7 +1,6 @@
 import React, { useState } from "react"
 import AdvancedTable from '../_advanced_table'
 import MOCK_DATA_WITH_ID from "./advanced_table_mock_data_with_id.json"
-import Caption from "../../pb_caption/_caption"
 
 const AdvancedTableRowPinning = (props) => {
   const columnDefinitions = [
@@ -36,30 +35,14 @@ const AdvancedTableRowPinning = (props) => {
     },
   ]
 
-  const [pinnedRowsTop, setPinnedRowsTop] = useState({top: ["8"]})
-  const [pinnedRowsBottom, setPinnedRowsBottom] = useState({bottom: ["8"]})
+  const [pinnedRows, setPinnedRows] = useState({top: ["8"]})
 
   return (
     <div>
-      <Caption text="Pinned Rows Top" />
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           maxHeight="xs"
-          pinnedRows={{value: pinnedRowsTop, onChange: setPinnedRowsTop}}
-          tableData={MOCK_DATA_WITH_ID}
-          tableProps={{sticky: true}}
-          {...props}
-      >
-        <AdvancedTable.Header enableSorting />
-        <AdvancedTable.Body />
-      </AdvancedTable>
-      <Caption marginTop="md"
-          text="Pinned Rows Bottom"
-      />
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          maxHeight="xs"
-          pinnedRows={{value: pinnedRowsBottom, onChange: setPinnedRowsBottom}}
+          pinnedRows={{value: pinnedRows, onChange: setPinnedRows}}
           tableData={MOCK_DATA_WITH_ID}
           tableProps={{sticky: true}}
           {...props}

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

@@ -0,0 +1,57 @@
+import React, { useState } from "react"
+import AdvancedTable from '../_advanced_table'
+import MOCK_DATA_WITH_ID from "./advanced_table_mock_data_with_id.json"
+
+const AdvancedTableRowPinningBoth = (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 [pinnedRows, setPinnedRows] = useState({top: ["8"], bottom: ["1"]})
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          maxHeight="xs"
+          pinnedRows={{value: pinnedRows, onChange: setPinnedRows}}
+          tableData={MOCK_DATA_WITH_ID}
+          tableProps={{sticky: true}}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableRowPinningBoth

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

@@ -0,0 +1 @@
+This code snippet demonstrates `pinnedRows` taking an array of row ids to both the `top` and `bottom` properties.

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

@@ -0,0 +1,57 @@
+import React, { useState } from "react"
+import AdvancedTable from '../_advanced_table'
+import MOCK_DATA_WITH_ID from "./advanced_table_mock_data_with_id.json"
+
+const AdvancedTableRowPinningBottom = (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 [pinnedRows, setPinnedRows] = useState({bottom: ["8"]})
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          maxHeight="xs"
+          pinnedRows={{value: pinnedRows, onChange: setPinnedRows}}
+          tableData={MOCK_DATA_WITH_ID}
+          tableProps={{sticky: true}}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableRowPinningBottom

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

@@ -0,0 +1 @@
+This code snippet demonstrates `pinnedRows` taking an array of row ids to the `bottom` property.

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

@@ -3,5 +3,5 @@ Use the `pinnedRows` prop to pin specific rows to the top or bottom of an Advanc
 **NOTE:** 
 - Sticky header required: Pinned rows must be used with `sticky: true` via `tableProps` (works with both responsive and non-responsive tables)
 - Row ids required: Each object within the `tableData` Array must contain a unique id in order to attach an id to all Rows for this to function. 
-- `pinnedRows` takes an array of row ids to the `top` or `bottom` property as shown in the code snippet below (both can be used on the same table).
+- `pinnedRows` takes an array of row ids to the `top` or `bottom` property, or both. `top` is shown in the code snippet below.
 - For expandable rows, use the parent id in `pinnedRows`, all its children will automatically be pinned with it. If id for a child is passed in without parent being pinned, nothing will be pinned. 

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

@@ -67,7 +67,9 @@ examples:
   - 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_pinned_rows: Pinned Rows (Top)
+  - advanced_table_pinned_rows_bottom: Pinned Rows (Bottom)
+  - advanced_table_pinned_rows_both: Pinned Rows (Both)
   - advanced_table_selectable_rows: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)

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

@@ -52,4 +52,6 @@ export { default as AdvancedTableColumnStylingBackground } from './_advanced_tab
 export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
 export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
 export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'
-export { default as AdvancedTableSortParentOnly } from './_advanced_table_sort_parent_only.jsx'
+export { default as AdvancedTableSortParentOnly } from './_advanced_table_sort_parent_only.jsx'
+export { default as AdvancedTablePinnedRowsBottom } from './_advanced_table_pinned_rows_bottom.jsx'
+export { default as AdvancedTablePinnedRowsBoth } from './_advanced_table_pinned_rows_both.jsx'

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_table_and_filter.jsx

@@ -90,7 +90,7 @@ const FullScreenTableAndFilter = (props) => {
                 double
                 maxHeight="50vh"
                 minWidth="xs"
-                popoverProps={{ width: "350px", appendTo: ".fullscreen-overlay" }}
+                popoverProps={{ width: "350px" }}
                 results={50}
                 sortOptions={{
                   territory_id: "Territory ID",

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_table_and_filter.md

@@ -1 +1 @@
-Full Screen can host composed workflows such as a filter paired with a data table. For popovers inside the overlay, set the popover append target to `.fullscreen-overlay` so menus render within the fullscreen layer.
+Full Screen can host composed workflows such as a filter paired with a data table. Filter and sort popovers automatically append to the fullscreen overlay; dropdown menus inside them portal above the overlay via the shared floating UI stack.