playbook_ui_docs 16.3.0 → 16.4.0.pre.alpha.PLAY2846reactadvancedtablecalcheaderpinnedrows15356

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

@@ -41,7 +41,9 @@ examples:
     - table_with_header_style_borderless: Header Style Borderless
     - table_with_header_style_floating: Header Style Floating
     - table_with_filter_variant_rails: Variant with Filter
+    - table_with_filter_variant_external_filter_rails: Variant with Filter (External 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 +87,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'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-danger */
 /* eslint-disable react/no-multi-comp */
 
 import React, { useState } from 'react'
@@ -38,14 +37,26 @@ const TypeaheadWithHighlight = (props) => {
   const [selectedUser, setSelectedUser] = useState()
 
   const formatOptionLabel = ({name, territory, title}, {inputValue}) => {
+    const escapeRegExp = (value = "") => (
+      value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+    )
 
-    const highlighted = (text) => {
+    const highlighted = (text = "") => {
       if (!inputValue.length) return text
-      return text.replace(
-        new RegExp(inputValue, 'gi'),
-        (highlighted) => `<mark>${highlighted}</mark>`
-      )
+
+      const escapedInputValue = escapeRegExp(inputValue)
+      const regex = new RegExp(`(${escapedInputValue})`, 'gi')
+      const parts = text.split(regex)
+
+      return parts.map((part, index) => {
+        if (part.toLowerCase() === inputValue.toLowerCase()) {
+          return <mark key={`${part}-${index}`}>{part}</mark>
+        }
+
+        return <React.Fragment key={`${part}-${index}`}>{part}</React.Fragment>
+      })
     }
+
     return (
       <Flex>
         <FlexItem>
@@ -61,11 +72,12 @@ const TypeaheadWithHighlight = (props) => {
               size={4}
               {...props}
           >
-            <span dangerouslySetInnerHTML={{ __html: highlighted(name) }} /></Title>
+            {highlighted(name)}
+          </Title>
           <Body color="light"
               {...props}
           >
-            <span dangerouslySetInnerHTML={{ __html: highlighted(title) }} />{" • "}
+            {highlighted(title)}{" • "}
             {territory}
           </Body>
         </FlexItem>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.md

@@ -0,0 +1,3 @@
+Use `formatOptionLabel` to customize each option row and highlight text that matches the current search input. Split each field (for example, `name` and `title`) by the typed value, then render matching parts inside `<mark>` so users can quickly see why a result matched.
+
+See the code snippet below for more details.

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.3.0
+  version: 16.4.0.pre.alpha.PLAY2846reactadvancedtablecalcheaderpinnedrows15356
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-02-25 00:00:00.000000000 Z
+date: 2026-03-31 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
@@ -123,6 +125,8 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_rails.html.erb
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_react.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx
@@ -153,6 +157,8 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_parent_only.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_parent_only.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column_for_multi_column.jsx
@@ -303,7 +309,8 @@ files:
 - app/pb_kits/playbook/pb_button/docs/_button_form.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_full_width.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx
-- app/pb_kits/playbook/pb_button/docs/_button_full_width.md
+- app/pb_kits/playbook/pb_button/docs/_button_full_width_rails.md
+- app/pb_kits/playbook/pb_button/docs/_button_full_width_react.md
 - app/pb_kits/playbook/pb_button/docs/_button_full_width_swift.md
 - app/pb_kits/playbook/pb_button/docs/_button_hover.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_hover.jsx
@@ -859,6 +866,10 @@ 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_closing_options_rails.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options_rails.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
@@ -1049,6 +1060,10 @@ files:
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.md
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_swift.md
+- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_nav_margin.html.erb
+- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_nav_margin.jsx
+- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_nav_margin_rails.md
+- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_nav_margin_react.md
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.html.erb
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.md
@@ -1447,6 +1462,9 @@ files:
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.md
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.html.erb
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.jsx
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_reset_key.jsx
@@ -1857,6 +1875,10 @@ files:
 - app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb
 - app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx
 - app/pb_kits/playbook/pb_popover/docs/_popover_list.md
+- app/pb_kits/playbook/pb_popover/docs/_popover_placement.jsx
+- app/pb_kits/playbook/pb_popover/docs/_popover_placement_react.md
+- app/pb_kits/playbook/pb_popover/docs/_popover_position.html.erb
+- app/pb_kits/playbook/pb_popover/docs/_popover_position_rails.md
 - app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.html.erb
 - app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx
 - app/pb_kits/playbook/pb_popover/docs/_popover_z_index.html.erb
@@ -1968,31 +1990,10 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.md
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.html.erb
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.html.erb
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb
-- 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_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_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
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.html.erb
-- 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_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
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml
@@ -2303,12 +2304,18 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_react.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant.md
+- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_external_filter_rails.html.erb
+- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_external_filter_rails.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_rails.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_rails.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination.jsx
 - 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
@@ -2655,6 +2662,7 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md

data/app/pb_kits/playbook/pb_button/docs/_button_full_width.md

@@ -1 +0,0 @@
-This button is used many times for mobile or other things like cards and sidebars.

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

@@ -1,5 +0,0 @@
-<%= pb_rails("rich_text_editor", props: {
-  aria: { label: "rich-textarea" },
-  data: { key: "value", key2: "value2" },
-  name: "textarea-label",
-}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-
-const RichTextEditorAttributes = (props) => (
-  <div>
-    <RichTextEditor
-        aria={{ label: 'rich textarea' }}
-        data={{ key: 'value', key2: 'value2' }}
-        name="name-attribute"
-        {...props}
-    />
-  </div>
-)
-
-export default RichTextEditorAttributes

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

@@ -1 +0,0 @@
-<%= pb_rails("rich_text_editor", 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_focus.html.erb

@@ -1,3 +0,0 @@
-<%= pb_rails("rich_text_editor", props: {focus: true}) %>
-<br>
-<%= pb_rails("rich_text_editor", props: {focus: true}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-
-const RichTextEditorFocus = (props) => (
-  <>
-    <RichTextEditor
-        focus
-        {...props}
-    />
-    <br />
-    <RichTextEditor
-        focus
-        {...props}
-    />
-  </>
-)
-export default RichTextEditorFocus

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

@@ -1,6 +0,0 @@
-<%= pb_rails("rich_text_editor", props: {
-  id: "inline",
-  inline: true,
-  toolbar_bottom: true,
-  value: "Try hovering over this text. Then try modifying it or adding more of your own text."
-}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-
-const RichTextEditorInline = (props) => (
-  <div>
-    <RichTextEditor
-        id="inline"
-        inline
-        toolbarBottom
-        value="Try hovering over this text. Then try modifying it or adding more of your own text."
-        {...props}
-    />
-  </div>
-)
-
-export default RichTextEditorInline