playbook_ui_docs 16.10.0.pre.alpha.typeaheaddraggablepills17549 → 16.10.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 468d87f7dd5ae372b93e4d67d3c490b288f6d56d9dd171beb3fabeef8b502476
-  data.tar.gz: dbad6f69d98958f3306f40958860241881874dbc8c752a79bf7c14b02a69d523
+  metadata.gz: c82d4adfa4d9cbd6550580ab6dfd58119365c4efecd5399419d6f6e9eeb5e822
+  data.tar.gz: 199e229ddfc52a82ff613aa97c7c8cd076f0195e0f7a37e33c3471ab05cdd651
 SHA512:
-  metadata.gz: f562f984b4283834215b8de6a98348423a56619395474cf5649c8108bbdc25ee7dff2550c773b941ffaafdab6c7cc7bda0e71dc6ac3b3c1970fba5547f0e9f24
-  data.tar.gz: 0e75e1aa1bc8fe2746363dde4fb697095298fd7bc37d4e7afa9778101a3cb2eff2b50202d0e08a620ac79ef0ddb0071eb674b45a75fab60b2dff6882bad2daf5
+  metadata.gz: d8c416f86e1125bee7ff540957a058d8461ddb7e7670fcc7c74cfc0c320714015065aa8fb056425ba3861efa0901d987f767542a5b61b7d534d096a584609253
+  data.tar.gz: 0a3c47dd180de40f4911e921554d914b90a77700cf3b6abc3a94b8c3d4cd5855a2ae610c476887b33dbd9646bb59e24410b902e26e64ed22120296a351e723f7

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

@@ -0,0 +1,92 @@
+import React, { useState } from "react"
+import AdvancedTable from '../_advanced_table'
+import Flex from '../../pb_flex/_flex'
+import Button from '../../pb_button/_button'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
+
+const AdvancedTableFullscreen = (props) => {
+  const [fullscreenToggleSmall, setFullscreenToggleSmall] = useState(null)
+  const [fullscreenToggleLarge, setFullscreenToggleLarge] = useState(null)
+
+  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 tableProps = {
+    sticky: true
+  }
+
+  return (
+    <div>
+      <Flex justify="end">
+          <Button
+              marginBottom="sm"
+              onClick={() => fullscreenToggleSmall?.()}
+              text="Fullscreen Small Table"
+              variant="secondary"
+          />
+      </Flex>
+      <AdvancedTable
+          allowFullScreen
+          columnDefinitions={columnDefinitions}
+          fullScreenControl={({ toggleFullscreen }) => setFullscreenToggleSmall(() => toggleFullscreen)}
+          tableData={MOCK_DATA}
+          {...props}
+      >
+          <AdvancedTable.Header enableSorting />
+          <AdvancedTable.Body />
+      </AdvancedTable>
+      <Flex justify="end">
+          <Button
+              marginY="sm"
+              onClick={() => fullscreenToggleLarge?.()}
+              text="Fullscreen Large Table"
+              variant="secondary"
+          />
+      </Flex>
+      <AdvancedTable
+          allowFullScreen
+          columnDefinitions={columnDefinitions}
+          fullScreenControl={({ toggleFullscreen }) => setFullscreenToggleLarge(() => toggleFullscreen)}
+          responsive="none"
+          tableData={PAGINATION_MOCK_DATA}
+          tableProps={tableProps}
+          {...props}
+      >
+          <AdvancedTable.Header enableSorting />
+          <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableFullscreen

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

@@ -0,0 +1,3 @@
+Trigger Fullscreen mode with the `allowFullScreen`and `fullScreenControl` props.  `allowFullScreen` is a boolean that enables Fullscreen functionality for an Advanced Table. `fullScreenControl` is a callback function that receives an object containing the table's internal `toggleFullscreen` function, allowing you to store and trigger Fullscreen from the parent component. An external trigger (like a button) must be used to activate Fullscreen mode.
+
+Exit Fullscreen mode by clicking the minimize top-right-corner icon or by pressing the "Escape" keyboard key.

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

@@ -41,10 +41,6 @@
     font_color: "white",
     expand_button_color: "white",
   },
-  {
-    row_id: "15",
-    font_weight: "bold",
-  },
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "row-styling", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) %>

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'
 
 
@@ -48,10 +48,6 @@ const rowStyling = [
     fontColor: colors.white,
     expandButtonColor: colors.white,
   },
-  {
-    rowId: "15",
-    fontWeight: "bold",
-  },
 ];
 
   return (
@@ -59,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_row_styling_rails.md

@@ -3,6 +3,5 @@ The `row_styling` prop can be used in conjunction with row ids to control certai
 - `background_color` : use this to control the background color of the row
 - `font_color`: use this to control font color for each row if needed, for example if using a darker background color.
 - `expand_button_color`: use this to control the color of the expand icon if needed, for example if using a darker background color.
-- `font_weight`: use this to control row font weight. Accepted values are `regular` (default appearance) and `bold`.
 
 **NOTE:** Each object within the `table_data` Array must contain a unique id in order to attach an id to all Rows for this to function.

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

@@ -3,6 +3,5 @@ The `rowStyling` prop can be used in conjunction with row ids to control certain
 - `backgroundColor` : use this to control the background color of the row
 - `fontColor`: use this to control font color for each row if needed, for example if using a darker background color.
 - `expandButtonColor`: use this to control the color of the expand icon if needed, for example if using a darker background color.
-- `fontWeight`: use this to control row font weight. Accepted values are `regular` (default appearance) and `bold`.
 
 **NOTE:** Each object within the `tableData` Array must contain a unique id in order to attach an id to all Rows for this to function.

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_advanced_table/docs/_playground.json

@@ -28,8 +28,7 @@
         "rowId": "1",
         "backgroundColor": "#0056CF",
         "fontColor": "#FFFFFF",
-        "expandButtonColor": "#FFFFFF",
-        "fontWeight": "bold"
+        "expandButtonColor": "#FFFFFF"
       }
     ],
     "expandByDepth": [
@@ -234,6 +233,11 @@
         "customSort": true
       }
     },
+    "fullScreenControl": {
+      "requires": {
+        "allowFullScreen": true
+      }
+    },
     "enableSortingRemoval": {
       "requires": {
         "enableSorting": true
@@ -2950,7 +2954,9 @@
   },
   "hiddenProps": [
     "sortControl",
+    "fullScreenControl",
     "expandedControl",
+    "allowFullScreen",
     "pagination",
     "paginationProps"
   ],

data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.overrides.json

@@ -73,7 +73,9 @@
   },
   "hiddenProps": [
     "sortControl",
+    "fullScreenControl",
     "expandedControl",
+    "allowFullScreen",
     "pagination",
     "paginationProps"
   ],
@@ -104,7 +106,7 @@
     "tableProps": {
       "container": false
     },
-    "rowStyling": [{ "rowId": "1", "backgroundColor": "#0056CF", "fontColor": "#FFFFFF", "expandButtonColor": "#FFFFFF", "fontWeight": "bold" }],
+    "rowStyling": [{ "rowId": "1", "backgroundColor": "#0056CF", "fontColor": "#FFFFFF", "expandButtonColor": "#FFFFFF" }],
     "expandByDepth": [
       {
         "depth": 0,
@@ -289,6 +291,11 @@
         "customSort": true
       }
     },
+    "fullScreenControl": {
+      "requires": {
+        "allowFullScreen": true
+      }
+    },
     "enableSortingRemoval": {
       "requires": {
         "enableSorting": true

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

@@ -23,6 +23,7 @@ export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_tabl
 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'
 export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
 export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'

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.