playbook_ui_docs 16.9.0.pre.alpha.PLAY3039advancedtablerowstylingfontweight17275 → 16.9.0.pre.alpha.PLAY296917309

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7e228b970f9c7960de181b34b0d4618765d9d0257ec31c8a05748dae9e2f1eb3
-  data.tar.gz: d3a69fe644a55a8a186fd6ce7efd2284379f7a87979d050703a42b5695b24a6d
+  metadata.gz: 8c37d99b1420ce34f136dc4c89a19be0c8f6b0ebfeb27f8739f570190f2598d7
+  data.tar.gz: 31060a1cd7c6e47de129cf0f9f391c5a461133a7b5dad5fbdbf1f4eb17aab290
 SHA512:
-  metadata.gz: e3058b7a1b78b0f59b7158e9fa7798a7898ae31b75c7c873d62b7ee09c77e3ab5a183a0dde15acd7d1af2bd64d29eebc170ed8b776b6c9d7d776bd643c33fae9
-  data.tar.gz: 8276737ee960b889b57d08c4a2c6ff08ce7918300158248294cf8a60de5d5890ca71befcd59f187401c9ed088efb09600dfc399b5d612823965cf70272cf8d6b
+  metadata.gz: c4ab4bc82d6384d3d05d6bf129f7da14107f5b84ff6a8253d2f86cabd99ae3ca3dd0482bc7dbc40d3c96c8670e1c403983aef8eb67d08c2d2a2a3a16d9cae7b1
+  data.tar.gz: 4146ad81678145b524a30e0cc3aa0bed64529257aa01c84a453f20e900fec06a74cebd3506dd1c52386c107c474eb9189913e1f83692a112fd2fe94fab181fdf

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

@@ -48,10 +48,6 @@ const rowStyling = [
     fontColor: colors.white,
     expandButtonColor: colors.white,
   },
-  {
-    rowId: "15",
-    fontWeight: "bold",
-  },
 ];
 
   return (

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

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

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

@@ -73,9 +73,7 @@
   },
   "hiddenProps": [
     "sortControl",
-    "fullScreenControl",
     "expandedControl",
-    "allowFullScreen",
     "pagination",
     "paginationProps"
   ],
@@ -106,7 +104,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,
@@ -291,11 +289,6 @@
         "customSort": true
       }
     },
-    "fullScreenControl": {
-      "requires": {
-        "allowFullScreen": true
-      }
-    },
     "enableSortingRemoval": {
       "requires": {
         "enableSorting": true

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

@@ -23,7 +23,6 @@ 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_independent_containers.html.erb

@@ -0,0 +1,35 @@
+<% lists = [
+  {
+    title: "Morning Crew",
+    items: [
+      { id: "m1", name: "Alice Chen" },
+      { id: "m2", name: "Ben Ortiz" },
+      { id: "m3", name: "Cara Kim" },
+    ],
+  },
+  {
+    title: "Afternoon Crew",
+    items: [
+      { id: "a1", name: "Diana Patel" },
+      { id: "a2", name: "Evan Brooks" },
+      { id: "a3", name: "Fiona Lee" },
+    ],
+  },
+] %>
+
+<%= pb_rails("flex", props: { gap: "md", justify_content: "center", wrap: true }) do %>
+  <% lists.each do |list| %>
+    <%= pb_rails("flex/flex_item", props: { fixed_size: "220px" }) do %>
+      <%= pb_rails("caption", props: { text: list[:title], text_align: "center", margin_bottom: "xs" }) %>
+      <%= pb_rails("draggable", props: { initial_items: list[:items] }) do %>
+        <%= pb_rails("draggable/draggable_container", props: { padding: "sm" }) do %>
+          <% list[:items].each do |item| %>
+            <%= pb_rails("draggable/draggable_item", props: { drag_id: item[:id], margin_bottom: "xs" }) do %>
+              <%= pb_rails("body", props: { text: item[:name] }) %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,8 @@
+Use a **separate** `draggable` kit for each list when items should reorder within their own column only.
+
+Each instance creates its own drag boundary. Items stay inside that list on desktop and touch — they cannot be dropped into a neighboring list.
+
+This is different from [Dragging Across Multiple Containers](#draggable_multiple_containers), which uses **one** `draggable` wrapping multiple `draggable/draggable_container` kits so items can move between columns.
+
+On touch devices, drag from the grip handle. Swiping outside the handle scrolls as usual.
+

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

@@ -1 +1,3 @@
-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 — **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).

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/example.yml

@@ -17,6 +17,7 @@ examples:
   - draggable_with_list: Draggable with List Kit
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
+  - draggable_independent_containers: Independent Draggable Containers
   - draggable_with_table: Draggable with Table
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb

@@ -2,7 +2,7 @@
 
 <%= pb_rails("progress_simple", props: { percent: 0, id: "bar_breached" }) %>
 
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_breached" }) %>
+<%= pb_rails("caption", props: { size: 'xs', text: "", id: "caption_breached" }) %>
 
 <script>
     window.addEventListener("load", () => {

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.html.erb

@@ -7,7 +7,7 @@
 
 <%= pb_rails("progress_simple", props: { percent: 0, id: "bar_common" }) %>
 
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_common" }) %>
+<%= pb_rails("caption", props: { size: 'xs', text: "", id: "caption_common" }) %>
 
 
 <script>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb

@@ -2,7 +2,7 @@
 
 <%= pb_rails("progress_simple", props: { percent: 0, id: "def_bar" }) %>
 
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "def_caption" }) %>
+<%= pb_rails("caption", props: { size: 'xs', text: "", id: "def_caption" }) %>
 
 <%= pb_rails("text_input", props: { label: "Calculated Strength", value: "0", disabled: true, id: "calc_strength" }) %>
 
@@ -10,25 +10,25 @@
 
 <%= pb_rails("progress_simple", props: { percent: 0, id: "min_5_bar" }) %>
 
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "min_5_caption" }) %>
+<%= pb_rails("caption", props: { size: 'xs', text: "", id: "min_5_caption" }) %>
 
 <%= pb_rails("passphrase", props: { label: "Min length = 30", classname: "min_30" }) %>
 
 <%= pb_rails("progress_simple", props: { percent: 0, id: "min_30_bar" }) %>
 
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "min_30_caption" }) %>
+<%= pb_rails("caption", props: { size: 'xs', text: "", id: "min_30_caption" }) %>
 
 <%= pb_rails("passphrase", props: { label: "Average Threshold = 1", classname: "avg_1" }) %>
 
 <%= pb_rails("progress_simple", props: { percent: 0, id: "avg_1_bar" }) %>
 
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "avg_1_caption" }) %>
+<%= pb_rails("caption", props: { size: 'xs', text: "", id: "avg_1_caption" }) %>
 
 <%= pb_rails("passphrase", props: { label: "Strong Threshold = 4", classname: "strong_4" }) %>
 
 <%= pb_rails("progress_simple", props: { percent: 0, id: "strong_4_bar" }) %>
 
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "strong_4_caption" }) %>
+<%= pb_rails("caption", props: { size: 'xs', text: "", id: "strong_4_caption" }) %>
 
 
 

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb

@@ -2,7 +2,7 @@
 
 <%= pb_rails("progress_simple", props: { percent: 0, id: "bar_change" }) %>
 
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_change" }) %>
+<%= pb_rails("caption", props: { size: 'xs', text: "", id: "caption_change" }) %>
 
 <%= pb_rails("text_input", props: { label: "Passphrase Strength", value: "0", disabled: true, id: "calc_strength_change" }) %>
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.9.0.pre.alpha.PLAY3039advancedtablerowstylingfontweight17275
+  version: 16.9.0.pre.alpha.PLAY296917309
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-06-23 00:00:00.000000000 Z
+date: 2026-06-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -100,8 +100,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_grouped_headers_composition.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_grouped_headers_composition.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx
@@ -910,6 +908,8 @@ files:
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_rails.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_independent_containers.html.erb
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_independent_containers_rails.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx

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

@@ -1,92 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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.