playbook_ui 16.8.0.pre.alpha.PLAY2965datepickerconsoleerrors16591 → 16.8.0.pre.alpha.PLAY2966draggablemobile16518

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cd2ca8297ec9a85d8dab2aecadfe8eac192a7f98f7be17f0a728b3f993f2bb5d
-  data.tar.gz: 823a12f11d4305883854e5cc5919e28178f1cb7548f23c93dfe18f299c0a49c1
+  metadata.gz: 6ce05c1f63f5d67ded893b9cf4d8986264aeb095c29b00513d2d338c7d5252e2
+  data.tar.gz: e6b1628c4d294c560b9c7f2d88c13b82933323510b9eb1071be08fac93716412
 SHA512:
-  metadata.gz: cb559e089d5ede598740cc35e24fa7a20085d54c829814a855fe4ecbf25e1aa0e5f8a4119a376b185e5ed818360899979a1c03e5f7dc9bc9c593d81074380627
-  data.tar.gz: f7d28f0eb0beb741c5b1053f88f1b35189e4eaa3d3cde39598c3a760cc4ad5c8dd606d302642325fd6451b53d7d6008d1542508c7b305f7b56580432f62b37fb
+  metadata.gz: 93b22b8d43325f07d577dba4cce7e4af974844925c882a00d7e4749d842f0c51cc914e107f416d55ed0add9bfab27604759bc9e9620eb3d0dfcd34c2fa601dfc
+  data.tar.gz: 36213315af933db5f537794383c4430df58d1cc563a450e93e05160199ded6adf355f1c37d40853e6c2467ed08dddbf46cfaa3615b3b59c5bb5d055c8bc17fdb

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

@@ -5,7 +5,6 @@ import { flexRender, Row, Cell } from "@tanstack/react-table"
 import { GenericObject } from "../../types"
 import { isChrome } from "../Utilities/BrowserCheck"
 import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
-import { playbookColumnLayoutStylesFromMeta } from "../Utilities/ColumnLayoutHelper"
 import { getRowColorClass, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
@@ -95,7 +94,6 @@ const TableCellRenderer = ({
               )}
               key={`${cell.id}-data`}
               style={{
-                ...playbookColumnLayoutStylesFromMeta(column.columnDef),
                 left: isPinnedLeft
                   ? i === 1 // Accounting for set min-width for first column
                     ? '180px'

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

@@ -16,7 +16,6 @@ import { SortIconButton } from "./SortIconButton"
 import { ToggleIconButton } from "./ToggleIconButton"
 import { displayIcon } from "../Utilities/IconHelpers"
 import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
-import { playbookColumnLayoutStylesFromMeta } from "../Utilities/ColumnLayoutHelper"
 import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers"
 
 import { isChrome } from "../Utilities/BrowserCheck"
@@ -199,7 +198,6 @@ const isToggleExpansionEnabled =
         id={cellId}
         key={`${header?.id}-header`}
         style={{
-          ...playbookColumnLayoutStylesFromMeta(header?.column?.columnDef),
           backgroundColor: headerBackgroundColor,
           color: headerFontColor,
           left: isPinnedLeft

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

@@ -19,7 +19,6 @@ import { LoadingCell } from "../Components/LoadingCell"
 import { renderCollapsibleTrail } from "../Components/CollapsibleTrail"
 
 import AdvancedTableContext from "../Context/AdvancedTableContext"
-import { playbookColumnLayoutStylesFromMeta } from "../Utilities/ColumnLayoutHelper"
 
 type VirtualizedTableViewProps = {
   collapsibleTrail?: boolean
@@ -225,10 +224,7 @@ export const VirtualizedTableView = ({
                         isLastCell && 'last-cell',
                       )}
                       key={`${cell.id}-data`}
-                      style={{
-                        ...playbookColumnLayoutStylesFromMeta(cell.column.columnDef),
-                        width: cellWidth,
-                      }}
+                      style={{ width: cellWidth }}
                   >
                     {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
                     <span id={`${cell.id}-span`}>

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -12,10 +12,6 @@ import {
 import { GenericObject } from "../../types";
 import { createColumnHelper } from "@tanstack/react-table";
 import { createCellFunction } from "../Utilities/CellRendererUtils";
-import {
-  buildPlaybookColumnLayoutStyles,
-  buildTanStackSizingFromColumn,
-} from "../Utilities/ColumnLayoutHelper";
 import { getParentOnlySortedRowModel } from "../Utilities/RowModelUtils";
 
 interface UseTableStateProps {
@@ -109,31 +105,11 @@ export function useTableState({
           columns: buildColumns(column.columns, false),
         };
       }
-      const tanStackSizing = buildTanStackSizingFromColumn(column);
-      const layoutStyles = buildPlaybookColumnLayoutStyles(column, tanStackSizing);
-      const userMeta =
-        column.meta &&
-        typeof column.meta === "object" &&
-        !Array.isArray(column.meta)
-          ? column.meta
-          : {};
-      const hasLayoutStyles =
-        layoutStyles.width !== undefined ||
-        layoutStyles.minWidth !== undefined ||
-        layoutStyles.maxWidth !== undefined;
-
       // Define the base column structure
       const columnStructure = {
         ...columnHelper.accessor(column.accessor, {
           header: column.header ?? column.label ?? "",
           enableSorting: isFirstColumn || column.enableSort === true,
-          ...tanStackSizing,
-          meta: {
-            ...userMeta,
-            ...(hasLayoutStyles
-              ? { playbookColumnLayoutStyles: layoutStyles }
-              : {}),
-          },
         }),
       };
 

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

@@ -774,150 +774,6 @@ test("columnStyling.cellPadding sets cell padding", () => {
   expect(firstEnrollmentCell).toHaveClass('p_none')
 });
 
-test("columnStyling minWidth, width, and maxWidth apply to header and body cells", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-      columnStyling: { minWidth: 240, width: 260, maxWidth: 400 },
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const yearHeader = screen.getByText("Year").closest("th");
-  expect(yearHeader).toHaveStyle({ minWidth: "240px", width: "260px", maxWidth: "400px" });
-
-  const yearCell = screen.getAllByText("2021")[0].closest("td");
-  expect(yearCell).toHaveStyle({ minWidth: "240px", width: "260px", maxWidth: "400px" });
-});
-
-test("columnStyling width only locks minWidth and maxWidth to the same value", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-      columnStyling: { width: 128 },
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const yearHeader = screen.getByText("Year").closest("th");
-  expect(yearHeader).toHaveStyle({
-    width: "128px",
-    minWidth: "128px",
-    maxWidth: "128px",
-  });
-});
-
-test("columnDefinitions size only locks minSize and maxSize to the same value", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      size: 200,
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const enrollmentsHeader = screen.getByText("New Enrollments").closest("th");
-  expect(enrollmentsHeader).toHaveStyle({
-    width: "200px",
-    minWidth: "200px",
-    maxWidth: "200px",
-  });
-});
-
-test("columnDefinitions size, minSize, and maxSize apply layout styles", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      size: 180,
-      minSize: 160,
-      maxSize: 320,
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const enrollmentsHeader = screen.getByText("New Enrollments").closest("th");
-  expect(enrollmentsHeader).toHaveStyle({
-    width: "180px",
-    minWidth: "160px",
-    maxWidth: "320px",
-  });
-
-  const enrollmentsCell = screen.getAllByText("20")[0].closest("td");
-  expect(enrollmentsCell).toHaveStyle({
-    width: "180px",
-    minWidth: "160px",
-    maxWidth: "320px",
-  });
-});
-
 test("columnStyling.fontColor sets cell font color", () => {
   const styledColumnDefs = [
     {

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

@@ -10,7 +10,6 @@ const AdvancedTableColumnStyling = (props) => {
       accessor: "year",
       label: "Year",
       cellAccessors: ["quarter", "month", "day"],
-      columnStyling: { width: 124 },
     },
     {
       accessor: "newEnrollments",

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

@@ -6,10 +6,4 @@ The `columnStyling` prop is an optional item that can be used within `columnDefi
 
 3) `fontColor`: This will allow you to control the font color for a given column.
 
-4) Column width: optional keys on `columnStyling` are `minWidth`, `width`, and `maxWidth` (numbers = pixels; CSS strings allowed). This example sets `width` on Year for a fixed hierarchy column (see the width doc for `minWidth` and bands).
-
-Fixed width: pass `width` only (or TanStack `size` only) and Playbook sets min and max to the same value automatically — you do not need all three for an exact width.
-
-See [Column Styling: Width](https://playbook.powerapp.cloud/kits/advanced_table/react#column-styling-width) for the full guide (Playbook ↔ TanStack mapping, floor-only vs bands, and when to use one vs three values).
-
 `columnStyling` can be used within the columnDefinition of all the columns or some of them, as shown. Each column has its own individual control in this way. 

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

@@ -313,7 +313,7 @@
     },
     "column_styling_info": {
       "presetName": "Column Styling",
-      "message": "This sample uses columnStyling on column definitions. Year uses width for a fixed hierarchy column; other columns show background colors. See the Column Styling Width doc for minWidth and min/pref/max bands.",
+      "message": "This sample uses columnStyling on column definitions. You can style headers and cells for the whole table or per column.",
       "type": "info"
     }
   },
@@ -2628,10 +2628,7 @@
               "quarter",
               "month",
               "day"
-            ],
-            "columnStyling": {
-              "width": 124
-            }
+            ]
           },
           {
             "accessor": "newEnrollments",

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

@@ -371,7 +371,7 @@
     },
     "column_styling_info": {
       "presetName": "Column Styling",
-      "message": "This sample uses columnStyling on column definitions. Year uses width for a fixed hierarchy column; other columns show background colors. See the Column Styling Width doc for minWidth and min/pref/max bands.",
+      "message": "This sample uses columnStyling on column definitions. You can style headers and cells for the whole table or per column.",
       "type": "info"
     }
   }

data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_column_definitions_styling.json

@@ -2,10 +2,7 @@
   {
     "accessor": "year",
     "label": "Year",
-    "cellAccessors": ["quarter", "month", "day"],
-    "columnStyling": {
-      "width": 124
-    }
+    "cellAccessors": ["quarter", "month", "day"]
   },
   {
     "accessor": "newEnrollments",

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

@@ -80,7 +80,6 @@ examples:
   - 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_width: Column Styling Width
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
   - advanced_table_column_styling_background: Column Styling Background Color
   - advanced_table_column_styling_background_custom: Column Styling Background Color (Custom)

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

@@ -37,7 +37,6 @@ export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_row
 export { default as AdvancedTableScrollbarNone} from './_advanced_table_scrollbar_none.jsx'
 export { default as AdvancedTableRowStyling } from './_advanced_table_row_styling.jsx'
 export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
-export { default as AdvancedTableColumnStylingWidth } from './_advanced_table_column_styling_width.jsx'
 export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
 export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'
 export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'

data/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -59,13 +59,12 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     commaSeparator = false,
   } = props
 
-  const isAmountEmpty = (value: string | number): boolean => (
-    value === '' || value == null || (typeof value === 'string' && value.trim() === '')
-  )
-
   // Convert numeric input to string format
   const convertAmount = (input: string | number): string => {
     if (typeof input === 'number') {
+      if (input === 0 && !nullDisplay) {
+        return ""
+      }
       return input.toFixed(2)
     }
     return input
@@ -82,9 +81,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     variantClass = '_bold'
   }
 
-  const [wholePart, decimalPart = '00'] = currencyAmount ? currencyAmount.split('.') : ['', '00']
-  const decimal = (decimalPart || '00').padEnd(2, '0').slice(0, 2)
-  const whole = currencyAmount === '' ? '' : (wholePart === '' ? '0' : wholePart)
+  const [whole, decimal = '00'] = currencyAmount.split('.')
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -138,7 +135,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
       <Caption dark={dark}>{label}</Caption>
       <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
         {unstyled ? (
-          nullDisplay && isAmountEmpty(amount) ? (
+          nullDisplay && !amount ? (
             <div>{nullDisplay}</div>
           ) : (
             <>
@@ -151,7 +148,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
             </>
           )
         ) : (
-          nullDisplay && isAmountEmpty(amount) ? (
+          nullDisplay && !amount ? (
             <Title
                 className="pb_currency_value"
                 dark={dark}

data/app/pb_kits/playbook/pb_currency/currency.rb

@@ -68,7 +68,7 @@ module Playbook
       end
 
       def title_text
-        if null_display && amount.blank?
+        if null_display
           null_display
         elsif swap_negative
           absolute_amount(abbr_or_format_amount)
@@ -125,7 +125,14 @@ module Playbook
       # Convert numeric input to string format
       def convert_amount(input)
         if input.is_a?(Numeric)
-          Kernel.format("%.2f", input)
+          if input.zero? && null_display.nil?
+            ""
+          else
+            format("%.2f", input)
+          end
+        # Handle string representations of zero
+        elsif input.to_s.strip.match?(/^-?0+(\.0+)?$/) && null_display.nil?
+          ""
         else
           input.to_s
         end
@@ -135,7 +142,6 @@ module Playbook
         return "" if currency_amount.blank?
 
         value = currency_amount.split(".").first
-        value = "0" if value.blank?
         if comma_separator
           number_with_delimiter(value.gsub(",", ""))
         else
@@ -146,8 +152,7 @@ module Playbook
       def decimal_value
         return "00" if currency_amount.blank?
 
-        fraction = currency_amount.split(".")[1] || "00"
-        fraction.ljust(2, "0")[0, 2]
+        currency_amount.split(".")[1] || "00"
       end
 
       def units_element

data/app/pb_kits/playbook/pb_currency/currency.test.js

@@ -178,48 +178,5 @@ test('handles numeric amounts correctly', () => {
   expect(screen.getByTestId('test-numeric-no-symbol')).toHaveTextContent('400.50')
   expect(screen.getByTestId('test-numeric-medium-size')).toHaveTextContent('$500.55')
   expect(screen.getByTestId('test-numeric-negative')).toHaveTextContent('-$600.70')
-  expect(screen.getByTestId('test-numeric-null')).toHaveTextContent('$0.00')
-})
-
-test('renders zero values with leading digit', () => {
-  render(
-    <>
-      <Currency
-          amount="0"
-          data={{ testid: 'test-string-zero' }}
-      />
-      <Currency
-          amount={0}
-          data={{ testid: 'test-numeric-zero' }}
-      />
-    </>
-  )
-
-  expect(screen.getByTestId('test-string-zero')).toHaveTextContent('$0.00')
-  expect(screen.getByTestId('test-numeric-zero')).toHaveTextContent('$0.00')
-})
-
-test('normalizes string zero with single decimal digit to .00', () => {
-  render(
-    <Currency
-        amount="0.0"
-        commaSeparator
-        data={{ testid: 'test-string-zero-single-decimal' }}
-    />
-  )
-
-  expect(screen.getByTestId('test-string-zero-single-decimal')).toHaveTextContent('$0.00')
-})
-
-test('nullDisplay only applies when amount is empty', () => {
-  render(
-    <Currency
-        amount="-.53"
-        data={{ testid: 'test-null-display-negative' }}
-        nullDisplay="$0.00"
-    />
-  )
-
-  expect(screen.getByTestId('test-null-display-negative')).toHaveTextContent('-$')
-  expect(screen.getByTestId('test-null-display-negative')).not.toHaveTextContent('$0.00')
+  expect(screen.getByTestId('test-numeric-null')).toHaveTextContent('$.00')
 })

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -79,57 +79,42 @@
 
   <%= javascript_tag do %>
     (function() {
-      const initQuickPickChangeListener = (input) => {
-        if (!<%= object.selection_type == "quickpick" %>) return
-        if (input.dataset.quickpickInitialized) return
-
-        input.dataset.quickpickInitialized = "true"
-        input.addEventListener("change", ({ target }) => {
-          const startDate = document.getElementById("<%= object.start_date_id %>")
-          const endDate = document.getElementById("<%= object.end_date_id %>")
-          const splittedValue = target.value.split(" to ")
-          startDate.value = splittedValue[0]
-          endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
-        })
-      }
-
       const loadDatePicker = () => {
-        const input = document.getElementById("<%= object.picker_id %>")
-
-        if (!input || input._flatpickr) return true
-        if (typeof window.datePickerHelper !== "function") return false
-
-        window.datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
-        initQuickPickChangeListener(input)
-
-        return true
-      }
-
-      let attempts = 0
-      const retryLoad = () => {
-        if (loadDatePicker()) return
+        const input = document.getElementById("<%= object.picker_id %>");
+        if (input && !input._flatpickr) {
+          datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
 
-        if (attempts++ < 20) {
-          setTimeout(retryLoad, 100)
+          if (<%= object.selection_type == "quickpick" %>) {
+            document.getElementById("<%= object.picker_id %>").addEventListener("change", ({ target }) => {
+              const startDate = document.getElementById("<%= object.start_date_id %>")
+              const endDate = document.getElementById("<%= object.end_date_id %>")
+              const splittedValue = target.value.split(" to ")
+              startDate.value = splittedValue[0]
+              endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
+            })
+          }
         }
       }
 
+      // Try to initialize immediately if DOM is ready
       if (document.readyState === "loading") {
-        window.addEventListener("DOMContentLoaded", retryLoad)
+        window.addEventListener("DOMContentLoaded", loadDatePicker)
       } else {
-        retryLoad()
+        loadDatePicker()
       }
 
       // For dynamically added content (modals, etc.), check again after a brief delay
       setTimeout(() => {
-        const input = document.getElementById("<%= object.picker_id %>")
+        const input = document.getElementById("<%= object.picker_id %>");
         if (input && !input._flatpickr) {
-          retryLoad()
+          loadDatePicker();
         }
-      }, 100)
+      }, 100);
 
       if (<%= !object.custom_event_type.empty? %>) {
-        window.addEventListener("<%= object.custom_event_type %>", retryLoad)
+        window.addEventListener("<%= object.custom_event_type %>", () => {
+          loadDatePicker()
+        })
       }
     })()
   <% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.jsx

@@ -36,10 +36,10 @@ const DatePickerDialogSubmission = () => {
                 <Dialog.Body>
                     <DatePicker
                         defaultDate={dateFixed || undefined}
-                        key={"fixed-" + pickerInstance}
+                        key={`fixed-${pickerInstance}`}
                         label="Date"
                         onChange={(dateStr) => setDateFixed(dateStr || "")}
-                        pickerId={"datePickerFixed-" + pickerInstance}
+                        pickerId={`datePickerFixed-${pickerInstance}`}
                         staticPosition={false}
                     />
                 </Dialog.Body>

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

@@ -5,5 +5,3 @@ Use the `draggable` kit and manage state as shown.
 `draggable/draggable_container` kit creates the container within which the cards can be dragged and dropped.
 
 The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggable_item` and `drag_id` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `drag_handle` is also available to show the drag handle icon.
-
-On touch devices, drag from the grip handle (no long press). Swiping the card body scrolls as usual. Keep `drag_handle` enabled on mobile. Desktop mouse drag is unchanged.

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

@@ -6,5 +6,4 @@ Use `DraggableProvider` and manage state as shown.
 
 The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggableItem` and `dragId` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `dragHandle` is also available to show the drag handle icon.
 
-On touch devices, drag from the grip handle (no long press). Swiping the card body scrolls as usual. Keep `dragHandle` enabled on mobile. Desktop mouse drag is unchanged.
 

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

@@ -4,4 +4,4 @@ The List kit is optimized to work with the draggable kit. To enable drag, use th
 
 An additional optional boolean prop (set to true by default) of `drag_handle` is also available on ListItem kit to show the drag handle icon.
 
-On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `drag_handle` enabled on mobile. Desktop mouse drag is unchanged.
+On touch devices (phones and tablets), reordering is started from the grip handle only. Touch the grip and move slightly to drag; you do not need a long press. Touching and swiping the rest of the list row scrolls the page as usual. Keep `drag_handle` enabled on mobile so users have a clear drag target separate from scroll. Desktop mouse drag is unchanged.

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

@@ -4,4 +4,4 @@ Use `DraggableProvider` and manage state as shown.
 
 The List kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on List kit AND `dragId` prop on ListItem. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on ListItem to show the drag handle icon.
 
-On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `dragHandle` enabled on mobile. Desktop mouse drag is unchanged.
+On touch devices (phones and tablets), reordering is started from the grip handle only. Touch the grip and move slightly to drag; you do not need a long press. Touching and swiping the rest of the list row scrolls the page as usual. Keep `dragHandle` enabled on mobile so users have a clear drag target separate from scroll. Desktop mouse drag is unchanged.

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

@@ -1,5 +1,3 @@
 For a simplified version of the Draggable API for the SelectableList kit, you can do the following:
 
-The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on SelectableList kit AND `drag_id` prop within the SelectableList kit prop. An additional optional boolean prop (set to true by default) of `drag_handle` is also available on SelectableList kit to show the drag handle icon.
-
-On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `drag_handle` enabled on mobile. Desktop mouse drag is unchanged.
+The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on SelectableList kit AND `drag_id` prop within the SelectableList kit prop. An additional optional boolean prop (set to true by default) of `drag_handle` is also available on SelectableList kit to show the drag handle icon.

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

@@ -2,6 +2,4 @@ For a simplified version of the Draggable API for the SelectableList kit, you ca
 
 Use `DraggableProvider` and manage state as shown.
 
-The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on SelectableList kit AND `dragId` prop on SelectableList.Item. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on SelectableList kit to show the drag handle icon.
-
-On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `dragHandle` enabled on mobile. Desktop mouse drag is unchanged.
+The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on SelectableList kit AND `dragId` prop on SelectableList.Item. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on SelectableList kit to show the drag handle icon.

data/app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("icon", props: { icon: "powergon", font_style: "fak", fixed_width: true, size: "5x"  }) %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import Icon from '../_icon'
+
+import '../../../../../../playbook-website/app/javascript/scripts/custom-icons'
+
+const IconFaKit = (props) => {
+  return (
+    <div>
+      <Icon
+          {...props}
+          fixedWidth
+          fontStyle="fak"
+          icon="powergon"
+          size="5x"
+      />
+    </div>
+  )
+}
+
+export default IconFaKit