playbook_ui_docs 16.9.0.pre.alpha.touchdragmulticontainers17271 → 16.9.0.pre.alpha.typeaheaddraggablepills16995

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c37988286914a2f25a086d402770d224ae1d9c7d21ec8e72ab5236e8b37f2dc4
-  data.tar.gz: dfaf4490ee81cd2320cb0a0ae7d0dfc4f7f870a7d5d0e767fb07946881362b21
+  metadata.gz: 8b90e37b91ab420004202c5b58a1d8057ee420666582a8f3a03a41d2cfddb387
+  data.tar.gz: 042a98fd3c80fac72a8ca3666e4d340cc9a8691200ac3c61219084455d82bb29
 SHA512:
-  metadata.gz: ca5ccd99e8131a556256e184e4be7574cef73ad1a33e9ac312147e563721b170b199f8fc664334e85a575ba1265894d756a552063b74c9da91f5000464378c1a
-  data.tar.gz: ae96fd5c96cd8f50ba7036b364db86b864f747191645e284eb562927ba4b688d5d81e711c49c03d91d4d32faade51986217d72fcb7a102637601fe3941dd2680
+  metadata.gz: 821ca52233f3e8b0667e748178d9c295351413ed459eef979baef2a81a7d0febd87f897ddd167edbed8be98d1e24774802207cf301f410f276fe01565e9eb5d5
+  data.tar.gz: c5aaccf1dbc19ed115a39c4c7bcf0a0c6532f8f9df9f9020106ecd97be7292d432671922f60b91171a7fdd72b89d00a7db1dee9809a7a05058fbba39daa53773

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

@@ -1,6 +1,6 @@
 import React from "react"
 import AdvancedTable from '../_advanced_table'
-import MOCK_DATA_WITH_ID from "./advanced_table_mock_data_with_id.json"
+import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
 import colors from '../../tokens/exports/_colors.module.scss'
 
 
@@ -55,7 +55,7 @@ const rowStyling = [
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           rowStyling={rowStyling}
-          tableData={MOCK_DATA_WITH_ID}
+          tableData={MOCK_DATA}
           {...props}
       />
     </div>

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

@@ -1,39 +1,47 @@
 <% column_definitions = [
-  {
-    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",
-  },
+    {
+      accessor: "year",
+      label: "Year",
+    },
+    {
+      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",
+    }
 ] %>
 
-<%= pb_rails("advanced_table", props: {
-  id: "table_props_sticky_table",
-  table_data: @table_data,
-  column_definitions: column_definitions,
-  max_height: "xs",
-  table_props: { sticky: true },
-}) %>
+<% table_data = 15.times.map do |index|
+  {
+    year: (2020 + index).to_s,
+    id: (2020 + index).to_s,
+    newEnrollments: (20 + index).to_s,
+    scheduledMeetings: (10 + index).to_s,
+    attendanceRate: "#{50 + index}%",
+    completedClasses: (3 + index).to_s,
+    classCompletionRate: "#{30 + index}%",
+    graduatedStudents: (19 + index).to_s,
+  }
+end %>
+
+<div style="max-height: 320px; overflow-y: auto;">
+  <%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: table_data, column_definitions: column_definitions, table_props: { sticky: true }}) %>
+</div>

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

@@ -1,13 +1,21 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const tableData = Array.from({ length: 15 }, (_, index) => ({
+  year: String(2020 + index),
+  newEnrollments: String(20 + index),
+  scheduledMeetings: String(10 + index),
+  attendanceRate: `${50 + index}%`,
+  completedClasses: String(3 + index),
+  classCompletionRate: `${30 + index}%`,
+  graduatedStudents: String(19 + index),
+}))
 
 const AdvancedTableTablePropsStickyHeader = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
       label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -36,17 +44,18 @@ const AdvancedTableTablePropsStickyHeader = (props) => {
   ]
 
   const tableProps = {
-    sticky: true,
+    sticky: true
   }
 
   return (
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        maxHeight="xs"
-        tableData={MOCK_DATA}
-        tableProps={tableProps}
-        {...props}
-    />
+    <div style={{ maxHeight: "320px", overflowY: "auto" }}>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={tableData}
+          tableProps={tableProps}
+          {...props}
+      />
+    </div>
   )
 }
 

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

@@ -2,6 +2,10 @@ Create a sticky header that works for responsive Advanced Tables by setting `sti
 
 **NOTE**: This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 
+Scroll inside the table preview to see the header stick.
+
+This example builds flat table data inline for the docs preview. For typical `table_data` setup, see [Default (Required Props)](/kits/advanced_table/default/rails#advanced_table_beta).
+
 Expand the table above to see this in action.
 
 A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#sticky-header) doc example above.

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

@@ -1,7 +1,9 @@
-Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/global_props/max_height) global prop. 
+Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and wrapping the table in a scroll container (or using `maxHeight`).
 
-**NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
+**NOTE**: The header is sticky within the table scroll area. The live example uses flat rows so you can scroll inside the preview without expanding subrows.
 
-Expand the table above to see this in action.
+This example builds flat table data inline for the docs preview. For typical `tableData` setup, see [Default (Required Props)](/kits/advanced_table/default/react#advanced_table_default).
+
+Expand the table above to see responsive behavior in action.
 
 A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header) doc example above.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_rails.md

@@ -1 +1 @@
-You can add drag event listeners for desktop `drag`, `dragend`, `dragenter`, `dragleave`, `dragover`, `dragstart`, and `drop` or mobile `touch`, `touchend`, `touchcancel`,`touchleave`,  `touchmove`, `touchstart`
+You can add drag event listeners for `drag`, `dragend`, `dragenter`, `dragleave`, `dragover`, `dragstart`, and `drop`.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md

@@ -1,3 +1 @@
-The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure — **one** `draggable` wrapping multiple `draggable/draggable_container` kits so items can move between columns.
-
-For lists that should stay separate, see [Independent Draggable Containers](#draggable_independent_containers).
+The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_react.md

@@ -1 +1 @@
-The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure.
+The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure.

data/app/pb_kits/playbook/pb_draggable/docs/_playground.json

@@ -1,295 +1,54 @@
 {
   "template": "<Draggable{{props}} />",
-  "propTargets": {
-    "dropZone": "Provider.props",
-    "providerId": "Provider.props",
-    "enableCrossContainerPreview": "Provider.props",
-    "htmlOptions": "Container.props",
-    "tag": "Container.props",
-    "onDragStart": "Item.props",
-    "onDragEnd": "Item.props",
-    "onDrop": "Item.props"
-  },
+  "propTargets": {},
   "defaults": {
-    "dropZoneColor": "neutral",
-    "dropZone": {
-      "type": "ghost",
-      "color": "neutral",
-      "direction": "vertical"
-    },
-    "providerId": "draggable-playground",
-    "enableCrossContainerPreview": false
+    "dropZoneColor": "neutral"
   },
   "groups": [
     {
-      "name": "Provider",
+      "name": "Appearance",
       "props": [
         "dropZone",
-        "providerId",
-        "enableCrossContainerPreview"
-      ]
-    },
-    {
-      "name": "Container",
-      "props": [
-        "tag"
-      ]
-    },
-    {
-      "name": "Item",
-      "props": [
-        "onDragStart",
-        "onDragEnd",
-        "onDrop"
+        "dropZoneColor"
       ]
     }
   ],
   "presets": [
     {
-      "name": "Single List",
-      "structureMode": "single_container",
-      "props": {
-        "dropZone": {
-          "type": "ghost",
-          "color": "neutral",
-          "direction": "vertical"
-        }
-      }
-    },
-    {
-      "name": "Outline Drop Zone",
-      "structureMode": "single_container",
-      "props": {
-        "dropZone": {
-          "type": "outline",
-          "color": "primary",
-          "direction": "vertical"
-        }
-      }
-    },
-    {
-      "name": "Shadow Drop Zone",
-      "structureMode": "single_container",
-      "props": {
-        "dropZone": {
-          "type": "shadow",
-          "color": "purple",
-          "direction": "vertical"
-        }
-      }
-    },
-    {
-      "name": "Line Vertical",
-      "structureMode": "single_container",
+      "name": "Ghost (neutral)",
       "props": {
-        "dropZone": {
-          "type": "line",
-          "color": "primary",
-          "direction": "vertical"
-        }
+        "dropZone": "ghost",
+        "dropZoneColor": "neutral"
       }
     },
     {
-      "name": "Line Horizontal",
-      "structureMode": "single_container_horizontal",
+      "name": "Outline (primary)",
       "props": {
-        "dropZone": {
-          "type": "line",
-          "color": "primary",
-          "direction": "horizontal"
-        }
+        "dropZone": "outline",
+        "dropZoneColor": "primary"
       }
     },
     {
-      "name": "Multiple Containers",
-      "structureMode": "multiple_containers",
+      "name": "Shadow (purple)",
       "props": {
-        "dropZone": {
-          "type": "ghost",
-          "color": "neutral",
-          "direction": "vertical"
-        }
+        "dropZone": "shadow",
+        "dropZoneColor": "purple"
       }
     },
     {
-      "name": "Cross Container Preview",
-      "structureMode": "multiple_containers",
+      "name": "Line (neutral)",
       "props": {
-        "enableCrossContainerPreview": true,
-        "dropZone": {
-          "type": "outline",
-          "color": "primary",
-          "direction": "vertical"
-        }
-      }
-    },
-    {
-      "name": "Event Listeners",
-      "structureMode": "single_container",
-      "props": {
-        "onDragEnd": "() => console.log('drag end')",
-        "onDragStart": "() => console.log('drag start')",
-        "onDrop": "() => console.log('drop')",
-        "dropZone": {
-          "type": "ghost",
-          "color": "neutral",
-          "direction": "vertical"
-        }
+        "dropZone": "line",
+        "dropZoneColor": "neutral"
       }
     }
   ],
   "conditionals": {},
   "hints": {
-    "single_list": {
-      "presetName": "Single List",
-      "message": "Single List wraps Draggable.Container and Draggable.Item children in DraggableProvider with initialItems and onReorder.",
-      "type": "info"
-    },
-    "outline_drop_zone": {
-      "presetName": "Outline Drop Zone",
-      "message": "Outline Drop Zone passes a dropZone object to DraggableProvider so the dragged item uses the outline treatment.",
-      "type": "info"
-    },
-    "shadow_drop_zone": {
-      "presetName": "Shadow Drop Zone",
-      "message": "Shadow Drop Zone uses the provider dropZone color and type to preview the shadow treatment while dragging.",
+    "children_note": {
+      "when": {},
+      "message": "Compose Draggable.Container and Draggable.Item as children to build a sortable list.",
       "type": "info"
-    },
-    "line_vertical": {
-      "presetName": "Line Vertical",
-      "message": "Line Vertical uses dropZone.direction=\"vertical\" for between-row placement.",
-      "type": "info"
-    },
-    "line_horizontal": {
-      "presetName": "Line Horizontal",
-      "message": "Line Horizontal uses dropZone.direction=\"horizontal\" for between-column placement.",
-      "type": "info"
-    },
-    "multiple_containers": {
-      "presetName": "Multiple Containers",
-      "message": "Multiple Containers maps items into Draggable.Container columns by their container value.",
-      "type": "info"
-    },
-    "cross_container_preview": {
-      "presetName": "Cross Container Preview",
-      "message": "Cross Container Preview enables provider-managed movement previews between containers before drop.",
-      "type": "info"
-    },
-    "event_listeners": {
-      "presetName": "Event Listeners",
-      "message": "Event Listeners routes item callbacks through Draggable.Item props so drag events can be handled by app code.",
-      "type": "info"
-    }
-  },
-  "structureModes": {
-    "default": "single_container",
-    "modes": {
-      "single_container": {
-        "label": "Single Container",
-        "template": "<DraggableProvider\n    initialItems={initialItems}\n    onReorder={setItems}{{Provider.props}}\n>\n  <Draggable{{props}}>\n    <Draggable.Container\n        container=\"tasks\"{{Container.props}}\n    >\n      <Flex\n          gap=\"xs\"\n          orientation=\"column\"\n      >\n        {items.map(({ id, text }) => (\n          <Draggable.Item\n              container=\"tasks\"\n              dragId={id}\n              key={id}{{Item.props}}\n          >\n            <Card padding=\"xs\">\n              <Body text={text} />\n            </Card>\n          </Draggable.Item>\n        ))}\n      </Flex>\n    </Draggable.Container>\n  </Draggable>\n</DraggableProvider>",
-        "children": "",
-        "props": {
-          "dropZone": {
-            "type": "ghost",
-            "color": "neutral",
-            "direction": "vertical"
-          }
-        },
-        "wrapper": "const initialItems = [\n  { id: 'task-1', container: 'tasks', text: 'Confirm scope' },\n  { id: 'task-2', container: 'tasks', text: 'Design states' },\n  { id: 'task-3', container: 'tasks', text: 'Ship playground' },\n]\n\nconst DraggablePlaygroundExample = () => {\n  const [items, setItems] = useState(initialItems)\n\n  return {{component}}\n}\n\n<DraggablePlaygroundExample />"
-      },
-      "single_container_horizontal": {
-        "label": "Single Container Horizontal",
-        "template": "<Flex>\n  <DraggableProvider\n      initialItems={initialItems}\n      onReorder={setItems}{{Provider.props}}\n  >\n    <Draggable.Container{{Container.props}}>\n      <Flex\n          alignItems=\"stretch\"\n          flexDirection=\"row\"\n          height=\"110px\"\n      >\n        {items.map(({ id, url }) => (\n          <Draggable.Item\n              dragId={id}\n              key={id}\n              marginRight=\"sm\"{{Item.props}}\n          >\n            <Image\n                alt={id}\n                size=\"md\"\n                url={url}\n            />\n          </Draggable.Item>\n        ))}\n      </Flex>\n    </Draggable.Container>\n  </DraggableProvider>\n</Flex>",
-        "children": "",
-        "props": {
-          "dropZone": {
-            "type": "line",
-            "color": "primary",
-            "direction": "horizontal"
-          },
-          "htmlOptions": {
-            "style": {
-              "width": "420px"
-            }
-          }
-        },
-        "wrapper": "const initialItems = [\n  { id: 'image-1', url: 'https://unsplash.it/500/400/?image=633' },\n  { id: 'image-2', url: 'https://unsplash.it/500/400/?image=634' },\n  { id: 'image-3', url: 'https://unsplash.it/500/400/?image=637' },\n]\n\nconst DraggablePlaygroundExample = () => {\n  const [items, setItems] = useState(initialItems)\n\n  return {{component}}\n}\n\n<DraggablePlaygroundExample />"
-      },
-      "multiple_containers": {
-        "label": "Multiple Containers",
-        "template": "<DraggableProvider\n    initialItems={initialItems}\n    onReorder={setItems}{{Provider.props}}\n>\n  <Draggable{{props}}>\n    <Flex\n        align=\"start\"\n        gap=\"sm\"\n        wrap\n    >\n      {containers.map((container) => (\n        <Draggable.Container\n            container={container}\n            key={container}\n            minWidth=\"220px\"{{Container.props}}\n        >\n          <Card padding=\"sm\">\n            <Title\n                marginBottom=\"xs\"\n                size={4}\n                text={container}\n            />\n            <Flex\n                gap=\"xs\"\n                orientation=\"column\"\n            >\n              {items\n                .filter((item) => item.container === container)\n                .map(({ id, text }) => (\n                  <Draggable.Item\n                      container={container}\n                      dragId={id}\n                      key={id}{{Item.props}}\n                  >\n                    <Card padding=\"xs\">\n                      <Body text={text} />\n                    </Card>\n                  </Draggable.Item>\n                ))}\n            </Flex>\n          </Card>\n        </Draggable.Container>\n      ))}\n    </Flex>\n  </Draggable>\n</DraggableProvider>",
-        "children": "",
-        "props": {
-          "dropZone": {
-            "type": "ghost",
-            "color": "neutral",
-            "direction": "vertical"
-          }
-        },
-        "wrapper": "const containers = ['To Do', 'In Progress', 'Done']\nconst initialItems = [\n  { id: 'task-1', container: 'To Do', text: 'Confirm scope' },\n  { id: 'task-2', container: 'To Do', text: 'Design states' },\n  { id: 'task-3', container: 'In Progress', text: 'Ship playground' },\n  { id: 'task-4', container: 'Done', text: 'Write docs' },\n]\n\nconst DraggablePlaygroundExample = () => {\n  const [items, setItems] = useState(initialItems)\n\n  return {{component}}\n}\n\n<DraggablePlaygroundExample />"
-      }
-    }
-  },
-  "children": {
-    "editable": false,
-    "default": ""
-  },
-  "customProps": {
-    "dropZone": {
-      "type": "object",
-      "platforms": [
-        "react"
-      ]
-    },
-    "providerId": {
-      "type": "string",
-      "platforms": [
-        "react"
-      ]
-    },
-    "enableCrossContainerPreview": {
-      "type": "boolean",
-      "platforms": [
-        "react"
-      ],
-      "default": false
-    },
-    "tag": {
-      "type": "enum",
-      "platforms": [
-        "react"
-      ],
-      "values": [
-        "div",
-        "span",
-        "p",
-        "tr",
-        "td",
-        "tbody"
-      ]
-    },
-    "onDragStart": {
-      "type": "function",
-      "platforms": [
-        "react"
-      ]
-    },
-    "onDragEnd": {
-      "type": "function",
-      "platforms": [
-        "react"
-      ]
-    },
-    "onDrop": {
-      "type": "function",
-      "platforms": [
-        "react"
-      ]
-    }
-  },
-  "propSyncOnEnable": {
-    "enableCrossContainerPreview": {
-      "structureMode": "multiple_containers"
     }
   }
 }