playbook_ui_docs 16.3.0.pre.alpha.play284914702 → 16.3.0.pre.alpha.play284914770

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4a2ac445f7184e60f97e50e8e806c93b07ea53eb01200f8945dadffbd7ca3ca6
-  data.tar.gz: ff11c9655f0ee480293310fc4e444194e51d328546c27c5ca62053d4af1f0a04
+  metadata.gz: 8a9c4c55a34ed20163b96c3aed1180d4ff8e2f1335ccca59b59091a3a384495c
+  data.tar.gz: ef35842aa2b6ee61e13302c8370d911e618d4d11fec735473d670edac10656e3
 SHA512:
-  metadata.gz: 5f3992c727d1c3705b735aa41f66a9b5feb696cc09183c263eb9746b6d1de6460eb1bddf4de09e85c2e8a1f6ab415fb23e60d161dc8b1a05e667d0a62dca5b36
-  data.tar.gz: 26072709617471bba8486d421b75460890db39efdbf18dfc4856ed0a66e519e1b5af3a70497aab06330bfec5e0a62006093c88a2865a5b45e25139170a4a35ea
+  metadata.gz: 2da2f955fd09b23d85d645a3f7b8c8b958643750e1bb02d1fe2b9f4e1e82f34594040081f61b459a6474c9216d197a0b1f656391f480924e8dab7001a30993f4
+  data.tar.gz: 7bd6b76a659154e6a2e1ec1e53961d7b29bd17d8a189f98cf64f7d1e9013069cc362aef60556106783837e1e1f86bfa673ef6f86715e66531dd9f5aba55e6d94

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

@@ -0,0 +1,50 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableCascadeCollapse = (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",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          cascadeCollapse
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableCascadeCollapse

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

@@ -0,0 +1 @@
+`cascadeCollapse` is an optional prop that is set to 'false' by default. If set to 'true', collapsing any parent row itself or by using the toggle exapansion buttons in any header or subheader row also collapses all descendants and clears their expansion state. Re-expanding then shows only direct children until the user expands deeper levels again.

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

@@ -42,6 +42,7 @@ examples:
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers
+  - advanced_table_cascade_collapse: Cascade Collapse
   - advanced_table_collapsible_trail: Collapsible Trail
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props

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

@@ -48,4 +48,5 @@ export { default as AdvancedTablePaddingControl } from './_advanced_table_paddin
 export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
 export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
 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 AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
+export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_event_type.html.erb

@@ -0,0 +1,224 @@
+<%
+  default_options = [
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+    { label: 'India', value: 'India', id: 'in' },
+    { label: 'Mexico', value: 'Mexico', id: 'mx' },
+  ]
+
+  multi_options = [
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+    { label: 'India', value: 'india', id: 'in' },
+    { label: 'United Kingdom', value: 'unitedKingdom', id: 'uk' },
+  ]
+
+  autocomplete_options = [
+    { label: "United States", value: "unitedStates", areaCode: "+1", icon: "🇺🇸", id: "us" },
+    { label: "United Kingdom", value: "unitedKingdom", areaCode: "+44", icon: "🇬🇧", id: "gb" },
+    { label: "Pakistan", value: "pakistan", areaCode: "+92", icon: "🇵🇰", id: "pk" },
+  ]
+
+  custom_display_options = [
+    { label: "Strong Bad", value: "strongBad", id: "strong-bad", status: "Offline" },
+    { label: "Strong Mad", value: "strongMad", id: "strong-mad", status: "Online" },
+    { label: "Strong Sad", value: "strongSad", id: "strong-sad", status: "Away" },
+  ]
+
+  custom_display_content = capture do
+    pb_rails("flex", props: { align: "center" }) do
+      concat(pb_rails("avatar", props: { name: "", size: "xs", id: "cet-dropdown-avatar" }))
+      concat(pb_rails("body", props: { text: "", size: "xs", margin_x: "xs", id: "cet-dropdown-avatar-name" }))
+      concat(pb_rails("badge", props: { text: "", id: "cet-dropdown-avatar-status" }))
+    end
+  end
+%>
+
+<!-- Example 1: Default dropdown -->
+<%= pb_rails("dropdown", props: {
+  custom_event_type: "form:submitted,pb:dropdown:clearRequest",
+  id: "dropdown-default-cet",
+  label: "Default dropdown",
+  margin_bottom: "sm",
+  options: default_options,
+}) %>
+<%= pb_rails("flex", props: { wrap: true, gap: "sm", align: "center", margin_bottom: "md" }) do %>
+  <%= pb_rails("button", props: { id: "clear-default-cet", text: "Clear", variant: "primary" }) %>
+  <%= pb_rails("button", props: { id: "select-default-cet", text: "Select Canada", variant: "secondary" }) %>
+  <%= pb_rails("button", props: { id: "simulate-default-cet", text: "Simulate form submit", variant: "secondary" }) %>
+<% end %>
+
+<script>
+  (function() {
+    var id = "dropdown-default-cet";
+    document.getElementById("clear-default-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("pb:dropdown:clearRequest", { detail: { dropdownId: id } }));
+    });
+    document.getElementById("select-default-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("pb:dropdown:select", { detail: { dropdownId: id, optionId: "ca" } }));
+    });
+    document.getElementById("simulate-default-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("form:submitted", { detail: { dropdownId: id } }));
+    });
+  })();
+</script>
+
+<!-- Example 2: Multi select -->
+<%= pb_rails("dropdown", props: {
+  custom_event_type: "form:submitted,pb:dropdown:clearRequest",
+  id: "dropdown-multi-cet",
+  label: "Multi select dropdown",
+  margin_bottom: "sm",
+  multi_select: true,
+  options: multi_options,
+}) %>
+<%= pb_rails("flex", props: { wrap: true, gap: "sm", align: "center", margin_bottom: "md" }) do %>
+  <%= pb_rails("button", props: { id: "clear-multi-cet", text: "Clear", variant: "primary" }) %>
+  <%= pb_rails("button", props: { id: "select-multi-cet", text: "Select US + UK", variant: "secondary" }) %>
+  <%= pb_rails("button", props: { id: "simulate-multi-cet", text: "Simulate form submit", variant: "secondary" }) %>
+<% end %>
+
+<script>
+  (function() {
+    var id = "dropdown-multi-cet";
+    document.getElementById("clear-multi-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("pb:dropdown:clearRequest", { detail: { dropdownId: id } }));
+    });
+    document.getElementById("select-multi-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("pb:dropdown:select", { detail: { dropdownId: id, optionIds: ["us", "uk"] } }));
+    });
+    document.getElementById("simulate-multi-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("form:submitted", { detail: { dropdownId: id } }));
+    });
+  })();
+</script>
+
+<!-- Example 3: Autocomplete -->
+<%= pb_rails("dropdown", props: {
+  autocomplete: true,
+  custom_event_type: "form:submitted,pb:dropdown:clearRequest",
+  id: "dropdown-autocomplete-cet",
+  label: "Autocomplete dropdown",
+  margin_bottom: "sm",
+  options: autocomplete_options,
+}) %>
+<%= pb_rails("flex", props: { wrap: true, gap: "sm", align: "center", margin_bottom: "md" }) do %>
+  <%= pb_rails("button", props: { id: "clear-autocomplete-cet", text: "Clear", variant: "primary" }) %>
+  <%= pb_rails("button", props: { id: "select-autocomplete-cet", text: "Select Pakistan", variant: "secondary" }) %>
+  <%= pb_rails("button", props: { id: "simulate-autocomplete-cet", text: "Simulate form submit", variant: "secondary" }) %>
+<% end %>
+
+<script>
+  (function() {
+    var id = "dropdown-autocomplete-cet";
+    document.getElementById("clear-autocomplete-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("pb:dropdown:clearRequest", { detail: { dropdownId: id } }));
+    });
+    document.getElementById("select-autocomplete-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("pb:dropdown:select", { detail: { dropdownId: id, optionId: "pk" } }));
+    });
+    document.getElementById("simulate-autocomplete-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("form:submitted", { detail: { dropdownId: id } }));
+    });
+  })();
+</script>
+
+<!-- Example 4: Quick pick (Date Range) -->
+<%= pb_rails("dropdown", props: {
+  custom_event_type: "form:submitted,pb:dropdown:clearRequest",
+  id: "dropdown-quickpick-cet",
+  label: "Quickpick dropdown",
+  margin_bottom: "sm",
+  variant: "quickpick",
+}) %>
+<%= pb_rails("flex", props: { wrap: true, gap: "sm", align: "center", margin_bottom: "md" }) do %>
+  <%= pb_rails("button", props: { id: "clear-quickpick-cet", text: "Clear", variant: "primary" }) %>
+  <%= pb_rails("button", props: { id: "select-quickpick-cet", text: "Select This Week", variant: "secondary" }) %>
+  <%= pb_rails("button", props: { id: "simulate-quickpick-cet", text: "Simulate form submit", variant: "secondary" }) %>
+<% end %>
+
+<script>
+  (function() {
+    var id = "dropdown-quickpick-cet";
+    document.getElementById("clear-quickpick-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("pb:dropdown:clearRequest", { detail: { dropdownId: id } }));
+    });
+    document.getElementById("select-quickpick-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("pb:dropdown:select", { detail: { dropdownId: id, optionId: "quickpick-this-week" } }));
+    });
+    document.getElementById("simulate-quickpick-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("form:submitted", { detail: { dropdownId: id } }));
+    });
+  })();
+</script>
+
+<!-- Example 5: Custom display -->
+<%= pb_rails("dropdown", props: {
+  custom_event_type: "form:submitted,pb:dropdown:clearRequest",
+  id: "dropdown-custom-display-cet",
+  label: "Custom display (Subcomponent) dropdown",
+  margin_bottom: "sm",
+  options: custom_display_options,
+}) do %>
+  <%= pb_rails("dropdown/dropdown_trigger", props: { placeholder: "Select a User", custom_display: custom_display_content }) %>
+  <%= pb_rails("dropdown/dropdown_container") do %>
+    <% custom_display_options.each do |option| %>
+      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
+        <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
+          <%= pb_rails("flex/flex_item") do %>
+            <%= pb_rails("user", props: { name: option[:label], align: "left", avatar: true, orientation: "horizontal" }) %>
+          <% end %>
+          <%= pb_rails("flex/flex_item") do %>
+            <%= pb_rails("badge", props: { rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+<%= pb_rails("flex", props: { wrap: true, gap: "sm", align: "center", margin_bottom: "md" }) do %>
+  <%= pb_rails("button", props: { id: "clear-custom-display-cet", text: "Clear", variant: "primary" }) %>
+  <%= pb_rails("button", props: { id: "select-custom-display-cet", text: "Select Strong Sad", variant: "secondary" }) %>
+  <%= pb_rails("button", props: { id: "simulate-custom-display-cet", text: "Simulate form submit", variant: "secondary" }) %>
+<% end %>
+
+<script>
+  (function() {
+    var id = "dropdown-custom-display-cet";
+    document.getElementById("clear-custom-display-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("pb:dropdown:clearRequest", { detail: { dropdownId: id } }));
+    });
+    document.getElementById("select-custom-display-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("pb:dropdown:select", { detail: { dropdownId: id, optionId: "strong-sad" } }));
+    });
+    document.getElementById("simulate-custom-display-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("form:submitted", { detail: { dropdownId: id } }));
+    });
+
+    document.addEventListener("pb:dropdown:selected", function(e) {
+      if (e.target && e.target.id === id && e.detail) {
+        var display = e.target.querySelector("[data-dropdown-trigger-custom-display]");
+        if (!display) return;
+        var nameEl = display.querySelector("#cet-dropdown-avatar-name");
+        if (nameEl) nameEl.textContent = e.detail.label;
+        var avatarEl = display.querySelector("#cet-dropdown-avatar");
+        if (avatarEl) {
+          var wrapper = avatarEl.querySelector(".avatar_wrapper");
+          if (wrapper) {
+            var initials = (e.detail.label[0] + (e.detail.label.split(" ").pop() || "")[0]).toUpperCase();
+            wrapper.dataset.name = e.detail.label;
+            wrapper.setAttribute("data-initials", initials);
+          }
+        }
+        var badgeEl = display.querySelector("#cet-dropdown-avatar-status");
+        if (badgeEl && e.detail.status) {
+          var variant = e.detail.status === "Online" ? "success" : e.detail.status === "Offline" ? "neutral" : "warning";
+          badgeEl.querySelector("span").textContent = e.detail.status;
+          badgeEl.className = "pb_badge_kit_" + variant;
+        }
+      }
+    });
+  })();
+</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_event_type.md

@@ -0,0 +1,7 @@
+The `custom_event_type` prop lets the dropdown clear when specific events are dispatched. Set it to a comma-separated list of event names (e.g. Turbo or app-specific); when any of those events fire with optional `detail: { dropdownId }`, the matching dropdown clears. You can also listen for selection changes (`pb:dropdown:selected`), clear by dispatching `pb:dropdown:clear`, or set the selection by dispatching `pb:dropdown:select` with `detail: { dropdownId, optionId }` (or `optionIds` for multi-select).
+
+The examples show five distinct variants (default, multi select, autocomplete, quick pick, custom display). In each example, the first button clears the dropdown by dispatching a custom event that the dropdown listens for via `custom_event_type`. The second button sets the selection by dispatching `pb:dropdown:select`. The third button simulates a form submit by dispatching another custom event in `custom_event_type`, so the dropdown clears as it would after a real form submission.
+
+Turbo events (e.g. `turbo:frame-load`, `turbo:frame-render`, `turbo:submit-end`) often fire for many actions or across the page, so using them as `custom_event_type` can clear the dropdown more often than intended. Use them when that scope is what you want; otherwise use app-specific event names and dispatch with `detail: { dropdownId }` when the action happens, or dispatch `pb:dropdown:clear` from your own handler.
+
+Dropdowns with subcomponent structures that show custom displays (e.g. custom trigger or custom display) require a `pb:dropdown:selected` listener to update the visible UI from `event.detail` when a selection is made; clear is handled by the kit.

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

@@ -32,6 +32,7 @@ examples:
   - dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
   - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
   - dropdown_required_indicator: Required Indicator
+  - dropdown_custom_event_type: Custom Event Type
 
   react:
   - dropdown_default: Default

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props.jsx

@@ -0,0 +1,152 @@
+import React, { useState } from "react"
+import { Button, Date as DateKit, DatePicker, Dropdown, Select, Table, TextInput, Typeahead, Flex } from "playbook-ui"
+
+ // Mock Data for Table  
+  const users = [
+    { id: 1, name: "Jennifer", title: "Associate Scrum Master", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-01" },
+    { id: 2, name: "Nick", title: "UX Engineer II", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-02" },
+    { id: 3, name: "Nida", title: "Senior UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-03" },
+    { id: 4, name: "Justin", title: "Director of User Experience Engineering", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-04" },
+    { id: 5, name: "Edward", title: "UX Designer II", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-05" },
+    { id: 6, name: "Elisa", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-06" },
+    { id: 7, name: "Gary", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-07" },
+    { id: 8, name: "Barkley", title: "Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-08" },
+    { id: 9, name: "Aaron", title: "Associate Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-09" },
+  ]
+
+const TableWithFilterWithCardTitleProps = () => {
+  const [territory, setTerritory] = useState("")
+
+  // --------Filter content example ------
+  const filterContent = ({ closePopover }) => (
+          <>
+            <TextInput
+                label="Territory ID"
+                onChange={event => setTerritory(event.target.value)}
+                value={territory}
+            />
+
+            <Typeahead
+                label="Title"
+                options={[
+                  { key: "senior-ux-engineer", label: "Senior UX Engineer", value: "senior-ux-engineer" },
+                  { key: "ux-engineer", label: "UX Engineer", value: "ux-engineer" },
+                  { key: "ux-designer", label: "UX Designer", value: "ux-designer" }
+                ]}
+            />
+
+            <Select
+                blankSelection="All Departments"
+                label="Department"
+                options={[
+                  { value: "Business Technology", label: "Business Technology", key: "business-technology" },
+                  { value: "Customer Development", label: "Customer Development", key: "customer-development" },
+                  { value: "Talent Acquisition", label: "Talent Acquisition", key: "talent-acquisition" }
+                ]}
+            />
+
+            <Dropdown
+                label="Branch"
+                options={[
+                  { key: "Philadelphia", label: "Philadelphia", value: "philadelphia" },
+                  { key: "New York", label: "New York", value: "new-york" },
+                  { key: "Austin", label: "Austin", value: "austin" }
+                ]}
+            />
+
+            <DatePicker
+                label="Start Date"
+                paddingY="sm"
+                pickerId="startedOn"
+            />
+            <Flex spacing="between">
+            <Button
+                onClick={() => {
+                  alert("No filtering functionality - just a pattern demo!")
+                  closePopover()
+                }}
+                text="Filter"
+            />
+            <Button
+                text="Defaults"
+                variant="secondary"
+            />
+            </Flex>
+          </>
+        )
+  // -------End Filter content example ------
+  
+  return (
+    <Table 
+        cardProps={{marginX: {
+                        xs: "sm",
+                        sm: "sm",
+                        md: "xl",
+                        lg: "xl",
+                        xl: "xl",
+                        default: "xl",
+                    }}}
+        filterContent={filterContent}
+        filterProps={{
+          results: 50,
+          sortOptions: {
+            territory_id: "Territory ID",
+            first_name: "Name",
+            started_on: "Start Date",
+            department_name: "Department",
+            title_name: "Title",
+            branch_branch_name: "Branch",
+          },
+          sortValue: [{ name: 'started_on', dir: 'asc' }],
+        }}
+        title="Table Title Here"
+        titleProps={{
+          paddingLeft:{
+            xs: "sm",
+            sm: "sm",
+            md: "xl",
+            lg: "xl",
+            xl: "xl",
+            default: "xl",
+          }
+        }}
+        variant="withFilter"
+    >
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>{'Territory ID'}</Table.Header>
+          <Table.Header>{'Name'}</Table.Header>
+          <Table.Header>{'Title'}</Table.Header>
+          <Table.Header>{'Department'}</Table.Header>
+          <Table.Header>{'Branch'}</Table.Header>
+          <Table.Header textAlign="right">{'Start Date'}</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        {users.map((user) => (
+          <Table.Row key={user.id}>
+            <Table.Cell 
+                marginX={{ xs: "sm" }}
+                numberSpacing="tabular"
+            >
+                {user.id}
+            </Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.name}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.title}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.department}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.branch}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>
+              <DateKit 
+                  alignment="right"
+                  showCurrentYear
+                  value={user.startDate}
+              />
+            </Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  )
+}
+
+export default TableWithFilterWithCardTitleProps

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props.md

@@ -0,0 +1,17 @@
+The `withFilter` variant also offers 2 additional optional props:
+
+`cardProps`: An object containing Card-specific props.
+`titleProps`: An object containing Title-specific props.
+
+#### Default Card Props
+
+The Table kit automatically sets these Card defaults (which you can override via `cardProps`):
+
+- `padding="none"`
+
+#### Default Title Props
+
+The Table kit automatically sets these Title defaults (which you can override via `titleProps`):
+
+- `size={3}`
+- `paddingY="md"`

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props_rails.html.erb

@@ -0,0 +1,121 @@
+    <% users = [
+        { id: 1, name: "Jennifer", title: "Associate Scrum Master", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 1) },
+        { id: 2, name: "Nick", title: "UX Engineer II", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 2) },
+        { id: 3, name: "Nida", title: "Senior UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 3) },
+        { id: 4, name: "Justin", title: "Director of User Experience Engineering", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 4) },
+        { id: 5, name: "Edward", title: "UX Designer II", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 5) },
+        { id: 6, name: "Elisa", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 6) },
+        { id: 7, name: "Gary", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 7) },
+        { id: 8, name: "Barkley", title: "Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 8) },
+        { id: 9, name: "Aaron", title: "Associate Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 9) },
+    ] %>
+
+<% filter_content = 
+    pb_rails("text_input", props: {
+      label: "Territory ID",
+      placeholder: "Enter Territory ID"
+    }) +
+    pb_rails("typeahead", props: {
+      label: "Title",
+      options: [
+        { label: "Senior UX Engineer", value: "senior-ux-engineer" },
+        { label: "UX Engineer", value: "ux-engineer" },
+        { label: "UX Designer", value: "ux-designer" }
+      ]
+    }) +
+    pb_rails("select", props: {
+      blank_selection: "All Departments",
+      label: "Department",
+      options: [
+        { value: "Business Technology", text: "Business Technology" },
+        { value: "Customer Development", text: "Customer Development" },
+        { value: "Talent Acquisition", text: "Talent Acquisition" }
+      ]
+    }) +
+    pb_rails("dropdown", props: {
+      label: "Branch",
+      options: [
+        { label: "Philadelphia", value: "philadelphia" },
+        { label: "New York", value: "new-york" },
+        { label: "Austin", value: "austin" }
+      ]
+    }) +
+    pb_rails("date_picker", props: {
+      label: "Start Date",
+      padding_y: "sm",
+      picker_id: "startedOn"
+    }) +
+    pb_rails("flex", props: { spacing: "between" }) do
+      pb_rails("button", props: {
+        text: "Filter",
+      }) +
+      pb_rails("button", props: {
+        text: "Defaults",
+        variant: "secondary"
+      })
+    end
+%>
+
+<%= pb_rails("table", props: {
+  card_props: {
+    margin_x: {
+      xs: "sm",
+      sm: "sm",
+      md: "xl",
+      lg: "xl",
+      xl: "xl",
+      default: "xl",
+    }
+  },
+  variant: "with_filter",
+  title: "Table Title Here",
+  title_props: {
+    padding_left:{
+      xs: "sm",
+      sm: "sm",
+      md: "xl",
+      lg: "xl",
+      xl: "xl",
+      default: "xl",
+    }
+  },
+  filter_content: filter_content,
+  filter_props: {
+    id: "user-table-filters-1",
+    results: 9,
+    sort_menu: [
+        { item: "Start Date", link: "?q[sorts]=started_on+asc", active: true, direction: "asc" },
+        { item: "First Name", link: "?q[sorts]=name+asc", active: false },
+        { item: "Title", link: "?q[sorts]=title+asc", active: false },
+        { item: "Department", link: "?q[sorts]=department+asc", active: false },
+        { item: "Branch", link: "?q[sorts]=branch+asc", active: false },
+        { item: "Territory ID", link: "?q[sorts]=territory_id+asc", active: false },
+    ],
+  }
+}) do %>
+  <%= pb_rails("table/table_head") do %>
+    <%= pb_rails("table/table_row") do %>
+      <%= pb_rails("table/table_header", props: { text: "Territory ID" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Name" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Title" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Department" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Branch" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Start Date", text_align: "right" }) %>
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("table/table_body") do %>
+    <% users.each do |user| %>
+      <%= pb_rails("table/table_row") do %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" }, number_spacing: "tabular" }) { user[:id].to_s } %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:name] } %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:title] } %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:department] } %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:branch] } %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) do %>
+           <%= pb_rails("date", props: {alignment: "right", date: user[:start_date].to_s, show_current_year: true } ) %>        
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props_rails.md

@@ -0,0 +1,17 @@
+The `with_filter` variant also offers 2 additional optional props:
+
+`card_props`: An object containing Card-specific props.
+`title_props`: An object containing Title-specific props.
+
+#### Default Card Props
+
+The Table kit automatically sets these Card defaults (which you can override via `card_props`):
+
+- `padding:"none"`
+
+#### Default Title Props
+
+The Table kit automatically sets these Title defaults (which you can override via `title_props`):
+
+- `size:3`
+- `paddingY:"md"`

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

@@ -42,6 +42,7 @@ examples:
     - table_with_header_style_floating: Header Style Floating
     - table_with_filter_variant_rails: Variant with Filter
     - table_with_filter_variant_with_pagination_rails: Variant with Filter and Pagination
+    - table_with_filter_with_card_title_props_rails: Variant with Filter (with Card and Title Props)
 
   react:
     - table_sm: Small
@@ -85,3 +86,4 @@ examples:
     - table_with_header_style_floating: Header Style Floating
     - table_with_filter_variant: Variant with Filter
     - table_with_filter_variant_with_pagination: Variant with Filter and Pagination
+    - table_with_filter_with_card_title_props: Variant with Filter (with Card and Title Props)

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

@@ -40,3 +40,4 @@ export { default as TableWithHeaderStyleBorderless } from './_table_with_header_
 export { default as TableWithHeaderStyleFloating } from './_table_with_header_style_floating.jsx'
 export { default as TableWithFilterVariant } from './_table_with_filter_variant.jsx'
 export { default as TableWithFilterVariantWithPagination } from './_table_with_filter_variant_with_pagination.jsx'
+export { default as TableWithFilterWithCardTitleProps } from './_table_with_filter_with_card_title_props.jsx'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.3.0.pre.alpha.play284914702
+  version: 16.3.0.pre.alpha.play284914770
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-02-26 00:00:00.000000000 Z
+date: 2026-03-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -43,6 +43,8 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_cascade_collapse.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_cascade_collapse.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.html.erb
@@ -859,6 +861,8 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_event_type.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_event_type.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb
@@ -2309,6 +2313,10 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination_rails.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination_rails.md
+- app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props.jsx
+- app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props.md
+- app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props_rails.html.erb
+- app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props_rails.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md