playbook_ui_docs 16.3.0.pre.alpha.PLAY2782RTEPOCs14848 → 16.3.0.pre.alpha.PLAY2791closeonclick14694

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1427892436d40f5311374502e351d8c1a215d6f562ec3a2ba588c630cf388929
-  data.tar.gz: f37d49a22ff5b05aac5ba1b6117a702c846135f4faff00c7977be382fcd24425
+  metadata.gz: 9b15a838be78fa03d9a2abdeb52ec5f47a5d47ddce7033a82bafde117b7182c7
+  data.tar.gz: dcc70228338285727d42fa9f20f8f72f15e2010c817b7e47246aa26038005cbe
 SHA512:
-  metadata.gz: df38c8d32aee8ef9e2df488540bec0e43e24ed81900d326ccc0e2f2004f28527ae3da20a56fcbc3b37f12e8d2361f514f41ec016befe95a5a81bd397b77c074b
-  data.tar.gz: 5b6ef50bedc40c6577dc05251b4bae84ffeeebaa1d1160523d3d6e09660a8affef3222ada1609d98186949dcc4e199236792af45a287216aafca1d10a9d268f3
+  metadata.gz: 7e694a12a159407d4014bbc13fff5f358274b57fd87a1254cfd8f899aeb06eee606b65ba57e22b6f6540dfbea54eda51cd45618fdb5affd82bc3bfcecd687046
+  data.tar.gz: b9886ed7f7e8e89959e509ebfaf5e8a4e179bcdf9035145ae722f93d7e7de85a773cfe85a09931e36958d2845c4b9153bf629694f524ea257dab381b2a16f884

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

@@ -42,7 +42,6 @@ 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,5 +48,4 @@ 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 AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'
+export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb

@@ -1,20 +1,11 @@
 <%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-1"} }) %>
 
-<%= pb_rails("dialog", props: {
-        id:"dialog-1",
-        size: "md",
-        title: "Header Title is the Title Prop"
-}) do %>
-    <%= pb_rails("dialog/dialog_body") do %>
-        <%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, margin_right: "lg", text: "Button Primary" }) %>
-        <div style="height: 800px; background-color: lightgray;"></div>
-        <%= pb_rails("button", props: { loading: true, text: "Loading..." }) %>
-    <% end %>
-
-    <%= pb_rails("dialog/dialog_footer") do %>
-        <%= pb_rails("flex", props: { spacing: "between", padding_x: "md", padding_bottom: "md", padding: "sm" }) do %>
-            <%= pb_rails("button", props: { loading: true, text: "Send My Issue" }) %>
-            <%= pb_rails("button", props: { text: "Back", variant: "link", data: {"close-dialog": "dialog-1"} }) %>
-        <% end %>
-    <% end %>
-<% end %>
+<%= pb_rails("dialog", props: { 
+    id:"dialog-1", 
+    size: "sm", 
+    title: "Header Title is the Title Prop", 
+    text: "Hello Body Text, Nice to meet ya.", 
+    cancel_button: "Cancel Button", 
+    confirm_button: "Okay", 
+    confirm_button_id: "confirm-button-1"
+}) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx

@@ -12,35 +12,16 @@ const DialogDefault = () => {
     <>
       <Button onClick={open}>{'Open Dialog'}</Button>
       <Dialog
+          cancelButton="Cancel Button"
+          confirmButton="Okay"
           onCancel={close}
           onClose={close}
           onConfirm={close}
           opened={isOpen}
-          size="md"
+          size="sm"
+          text="Hello Body Text, Nice to meet ya."
           title="Header Title is the Title Prop"
-      >
-        <Dialog.Body>
-            <Button
-                aria={{ label: 'Loading' }}
-                loading
-                text="Button Primary"
-            />
-            <div style={{height: '800px', backgroundColor: 'lightgray'}} />
-            <Button
-                loading
-                text="Loading..."
-            />
-          </Dialog.Body>
-          <Dialog.Footer>
-            <Button
-                loading
-                text="Send My Issue"
-            />
-            <Button  variant="link">
-              {"Back"}
-            </Button>
-          </Dialog.Footer>
-        </Dialog>
+      />
     </>
   )
 }

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

@@ -11,9 +11,6 @@ examples:
   - rich_text_editor_inline: Inline
   - rich_text_editor_required_indicator: Required Indicator
   - rich_text_editor_preview: Preview
-  - rich_text_editor_tiptap_default: "TipTap (Vanilla JS)"
-  - rich_text_editor_quill_default: "Quill"
-  - rich_text_editor_lexxy_default: "Lexxy"
 
   react:
   - rich_text_editor_default: Default

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

@@ -42,7 +42,6 @@ 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
@@ -86,4 +85,3 @@ 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,4 +40,3 @@ 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.PLAY2782RTEPOCs14848
+  version: 16.3.0.pre.alpha.PLAY2791closeonclick14694
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-03-09 00:00:00.000000000 Z
+date: 2026-02-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -43,8 +43,6 @@ 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
@@ -1982,14 +1980,10 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.md
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_lexxy_default.html.erb
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_lexxy_default.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_quill_default.html.erb
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_quill_default.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.md
@@ -1999,8 +1993,6 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_tiptap_default.html.erb
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_tiptap_default.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.jsx
@@ -2319,10 +2311,6 @@ 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

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

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

@@ -1 +0,0 @@
-`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_rich_text_editor/docs/_rich_text_editor_lexxy_default.html.erb

@@ -1 +0,0 @@
-<%= pb_rails("rich_text_editor_lexxy", props: { input_options: { id: 'lexxy_editor_id', name: "hidden_input_name" }, placeholder: "Write something…" }) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_lexxy_default.md

@@ -1 +0,0 @@
-Lexxy (37signals / Lexical) kit — form-associated custom element; submits with the form like a textarea. Attachments disabled in this demo. Use `pb_rails("rich_text_editor_lexxy", props: { input_options: { id: "...", name: "..." }, placeholder: "..." })`.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_quill_default.html.erb

@@ -1 +0,0 @@
-<%= pb_rails("rich_text_editor_quill", props: { input_options: { id: 'hidden_input_id', name: "hidden_input_name" }, value: "Add your text here. You can format your text, add links, quotes, and bullets." }) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_quill_default.md

@@ -1 +0,0 @@
-Quill kit — framework-agnostic editor with Snow theme. Content is synced to a hidden input for Rails form submission. Use `pb_rails("rich_text_editor_quill", props: { input_options: { id: "...", name: "..." }, value: "..." })`.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_tiptap_default.html.erb

@@ -1 +0,0 @@
-<%= pb_rails("rich_text_editor_tiptap", props: { input_options: { id: 'hidden_input_id', name: "hidden_input_name" }, value: "Add your text here. You can format your text, add links, quotes, and bullets." }) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_tiptap_default.md

@@ -1 +0,0 @@
-TipTap (vanilla JS) kit — no React. Same editor core as the React TipTap variant; content is synced to a hidden input for Rails form submission. Use `pb_rails("rich_text_editor_tiptap", props: { input_options: { id: "...", name: "..." }, value: "..." })`.

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

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

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

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

@@ -1,17 +0,0 @@
-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"`