playbook_ui_docs 16.4.0 → 16.5.0.pre.alpha.PLAY2893datepickerlabelclicktoggle15576

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d75941f7f1cb8007566e28c430baaee9882fed47bb4ac81e68962ce8355edf6d
-  data.tar.gz: df099e190d6c86ddcc19811aba14f0b347b5cee4f6d34828ade8d4a044bac51f
+  metadata.gz: 2d60c2ba4f82d282d7852f35732e089f16535c728299a163cbe6518a7a617f56
+  data.tar.gz: a99eab01b457c02313dfdb725d53c1caf606f1d8f98b2bd083db81b9ff96ce14
 SHA512:
-  metadata.gz: ee1f847879b0fea73374b12a9b6504a406db13deab901edeb3f1c34fb60b25b80bf630b31dcc74d82c3a59fa5ef9e18ae3d6f9907cd80f6aec8895592cdaf0fc
-  data.tar.gz: 6a4d4074147c4150f0536117b80bc0b9578dc48c3e0b5e3c9c63325d929be8f982d84d71d181114ec5f728afc156ef365377a3e2eb04172d00d8bb7962beb792
+  metadata.gz: 67020badde5cfd53a0cd98149ecdb17c36916996930f619141fff9d50c4e5aca171bb1ead458f62a96d7e1d47c2ea6ae85f919098a44fe5c4e55cc92657ed4a9
+  data.tar.gz: 264b9593b9e1c11ce394361f1b62eb12ac05c73a0e06bdb9b7e175958a642bc979b8d488c2cf8e094e5ba3cf4321996a3567d5267846bd9a0a9376faf8099e0d

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

@@ -0,0 +1,235 @@
+/* eslint-disable react/no-multi-comp, react/prop-types */
+import React, { useCallback, useState } from "react"
+
+import AdvancedTable from "../_advanced_table"
+import Flex from "../../pb_flex/_flex"
+import Icon from "../../pb_icon/_icon"
+import List from "../../pb_list/_list"
+import ListItem from "../../pb_list/_list_item"
+import PbReactPopover from "../../pb_popover/_popover"
+import SectionSeparator from "../../pb_section_separator/_section_separator"
+import StarRating from "../../pb_star_rating/_star_rating"
+import COMPOSITION_MOCK_DATA from "./advanced_table_grouped_headers_composition_mock_data.json"
+
+const LEAF_COUNT = "newEnrollments"
+const LEAF_SCHEDULED = "scheduledMeetings"
+
+const ICON_UNSORTED = "arrow-up-arrow-down"
+const iconSorted = (desc) => (desc ? "arrow-up-wide-short" : "arrow-down-short-wide")
+
+const STAR_MENU = [
+  { id: LEAF_COUNT, label: "Count" },
+  { id: LEAF_SCHEDULED, label: "Scheduled" },
+]
+
+const MENU_BTN = {
+  alignItems: "center",
+  background: "transparent",
+  border: "none",
+  cursor: "pointer",
+  display: "flex",
+  font: "inherit",
+  gap: 12,
+  justifyContent: "space-between",
+  padding: "8px 14px",
+  textAlign: "left",
+  width: "100%",
+}
+
+const labelStyle = (active) => ({
+  color: active ? "#0056cf" : "#242930",
+  flex: 1,
+  fontSize: 14,
+  fontWeight: active ? 600 : 400,
+})
+
+/** Hooks + popover; `header` callback cannot use hooks directly. */
+const StarMetricGroupHeader = ({ table }) => {
+  const [open, setOpen] = useState(false)
+  const menuId = "playbook-star-metric-sort-menu"
+
+  const sort0 = table.getState().sorting[0]
+  const groupActive =
+    sort0?.id === LEAF_COUNT || sort0?.id === LEAF_SCHEDULED
+
+  const close = useCallback((shouldClose) => setOpen(!shouldClose), [])
+  const toggle = useCallback((e) => {
+    e.stopPropagation()
+    setOpen((v) => !v)
+  }, [])
+
+  const applySort = useCallback(
+    (columnId, e) => {
+      e.stopPropagation()
+      const cur = table.getState().sorting[0]
+      const nextDesc = cur?.id === columnId ? !cur.desc : true
+      table.setSorting([{ desc: nextDesc, id: columnId }])
+      setOpen(false)
+    },
+    [table]
+  )
+
+  return (
+    <PbReactPopover
+        closeOnClick="outside"
+        offset
+        padding="none"
+        placement="bottom-start"
+        reference={
+          <button
+              aria-controls={menuId}
+              aria-expanded={open}
+              aria-haspopup="menu"
+              aria-label="Sort by Count or Scheduled"
+              onClick={toggle}
+              style={{
+                background: open ? "rgba(115, 134, 169, 0.14)" : "transparent",
+                border: "none",
+                borderRadius: 6,
+                cursor: "pointer",
+                font: "inherit",
+                margin: 0,
+                padding: "2px 4px",
+              }}
+              title="Open menu to sort by Count or Scheduled"
+              type="button"
+          >
+            <Flex alignItems="center"
+                gap="xs"
+                justifyContent="center"
+            >
+              <StarRating
+                  backgroundType="outline"
+                  colorOption="primary"
+                  justifyContent="center"
+                  maxWidth="102px"
+                  rating={5}
+              />
+              <Icon
+                  color={groupActive ? "primary" : "default"}
+                  fixedWidth
+                  icon={
+                    groupActive
+                      ? iconSorted(Boolean(sort0?.desc))
+                      : ICON_UNSORTED
+                  }
+                  size="md"
+              />
+            </Flex>
+          </button>
+        }
+        shouldClosePopover={close}
+        show={open}
+        zIndex={1200}
+    >
+      <Flex id={menuId}
+          minWidth="220px"
+          orientation="column"
+      >
+        <List borderless
+            padding="none"
+        >
+          {STAR_MENU.map(({ id, label }, i) => {
+            const active = sort0?.id === id
+            return (
+              <React.Fragment key={id}>
+                {i > 0 ? <SectionSeparator margin="none" /> : null}
+                <ListItem padding="none">
+                  <button
+                      onClick={(e) => applySort(id, e)}
+                      style={MENU_BTN}
+                      type="button"
+                  >
+                    <span style={labelStyle(active)}>{label}</span>
+                    <Icon
+                        color={active ? "primary" : "default"}
+                        fixedWidth
+                        icon={
+                          active
+                            ? iconSorted(Boolean(sort0?.desc))
+                            : ICON_UNSORTED
+                        }
+                        size="md"
+                    />
+                  </button>
+                </ListItem>
+              </React.Fragment>
+            )
+          })}
+        </List>
+      </Flex>
+    </PbReactPopover>
+  )
+}
+
+const AdvancedTableGroupedHeadersComposition = (props) => {
+  const [pinnedRows, setPinnedRows] = useState({ top: ["12"] })
+
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      cellAccessors: ["quarter", "month", "day"],
+      label: "Year",
+    },
+    {
+      columns: [
+        {
+          columns: [
+            {
+              accessor: "newEnrollments",
+              enableSort: true,
+              id: LEAF_COUNT,
+              label: "Count",
+            },
+            {
+              accessor: "scheduledMeetings",
+              enableSort: true,
+              id: LEAF_SCHEDULED,
+              label: "Scheduled",
+            },
+          ],
+          id: "starLeafPair",
+          label: "Metrics",
+        },
+      ],
+      header: ({ table }) => (
+        <Flex justify="center">
+          <StarMetricGroupHeader table={table} />
+        </Flex>
+      ),
+      id: "starMetricGroup",
+      label: "Rating group (custom header)",
+    },
+    {
+      columns: [
+        { accessor: "attendanceRate", label: "Attendance" },
+        {
+          accessor: "classCompletionRate",
+          enableSort: true,
+          id: "classCompletionRate",
+          label: "Completion %",
+        },
+      ],
+      label: "Performance",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableSortingRemoval
+          maxHeight="md"
+          pinnedRows={{ onChange: setPinnedRows, value: pinnedRows }}
+          tableData={COMPOSITION_MOCK_DATA}
+          tableProps={{ sticky: true }}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableGroupedHeadersComposition

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

@@ -0,0 +1,17 @@
+### Grouped headers, custom UI, sort, and pinned rows
+
+This example combines patterns that often show up together in product tables:
+
+1. **Multi-level headers** — nested `columns` in `columnDefinitions`.
+2. **Custom group header** — a `header` function returning React (here: `StarRating`, sort icon, `PbReactPopover` menu). Parent groups are not sort targets; **only leaf columns** use `enableSort: true` (see **Enable Sort By Column (Multi-Column)**).
+3. **Programmatic sort** — the group `header` receives TanStack’s **`table`**. Call **`table.setSorting([{ id: "<leafColumnId>", desc: boolean }])`** using the same **`id`** values as your leaf columns. Match **direction icons** to the built-in kit (`arrow-up-arrow-down` unsorted; `arrow-up-wide-short` / `arrow-down-short-wide` when sorted).
+4. **Pinned row + sticky header** — `pinnedRows` with row **`id`**s and `tableProps={{ sticky: true }}` (see **Pinned Rows**).
+
+**Implementation notes**
+
+- **`header` must be a child component** if you need hooks (e.g. popover open state). Render it from `header: ({ table }) => <YourHeader table={table} />`.
+- **Avoid wrapping the primary control in `Tooltip`** — it can steal the first tap/click. Use a **`title`** on the button or copy in the doc instead.
+- **Popover rows:** use a plain **`<button>`** as `reference`, `closeOnClick="outside"`. Picking the **same** metric again should **toggle** `desc`; switching to another leaf column often defaults to **`desc: true`** to align with **`sortDescFirst`**.
+- **Data:** **`advanced_table_grouped_headers_composition_mock_data.json`** — twelve flat rows (2015–2026) with **varied** Count / Scheduled / % values so sorting is obvious; **`id` `"12"`** is **2026** and is pinned by default.
+
+Other building blocks on this kit: **Custom Header with Multiple Headers**, **Sticky Header**.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_rails.html.erb

@@ -0,0 +1,57 @@
+<%# Example sort method for demonstration purposes %>
+<% if params["sort"] %>
+  <% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %>
+  <% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %>
+  <% @table_data_with_id.sort! do |a, b|
+    value_a = a[sort_param] || a[sort_param.to_sym]
+    value_b = b[sort_param] || b[sort_param.to_sym]
+
+    value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/)
+    value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/)
+
+    sort_direction * (value_a <=> value_b)
+  end %>
+<% end %>
+
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      sort_menu: [
+        { item: "Year", link: "?sort=year_asc#pinned_rows_table", active: params["sort"] == "year_asc", direction: "asc" },
+        { item: "Year", link: "?sort=year_desc#pinned_rows_table", active: params["sort"] == "year_desc", direction: "desc" }
+      ],
+    },
+    {
+      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",
+    }
+] %>
+
+<% pinned_rows = { top: ["8"] } %>
+
+<%= pb_rails("advanced_table", props: { id: "pinned_rows_table", table_data: @table_data_with_id, column_definitions: column_definitions, max_height: "xs", pinned_rows: pinned_rows, responsive: "none", table_props: { sticky: true }}) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "pinned_rows_table", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "pinned_rows_table", table_data: @table_data_with_id, column_definitions: column_definitions, pinned_rows: pinned_rows }) %>
+<% end %>

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

@@ -0,0 +1,7 @@
+Use the `pinned_rows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and will not change position if sorting is used.
+
+**NOTE:**
+- Sticky header required: Pinned rows must be used with `sticky: true` via `table_props` (works with both responsive and non-responsive tables)
+- Row ids required: Each object within the `table_data` array must contain a unique `id` in order to attach an id to all Rows for this to function.
+- `pinned_rows` takes a hash with a `top` key containing an array of row ids, as shown in the code snippet below.
+- For expandable rows, use the parent id in `pinned_rows[:top]`; all its children will automatically be pinned with it. If a child id is passed without the parent being pinned, nothing will be pinned.

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

@@ -0,0 +1,98 @@
+[
+  {
+    "id": "1",
+    "year": "2015",
+    "newEnrollments": "12",
+    "scheduledMeetings": "40",
+    "attendanceRate": "62%",
+    "classCompletionRate": "28%"
+  },
+  {
+    "id": "2",
+    "year": "2016",
+    "newEnrollments": "88",
+    "scheduledMeetings": "12",
+    "attendanceRate": "71%",
+    "classCompletionRate": "55%"
+  },
+  {
+    "id": "3",
+    "year": "2017",
+    "newEnrollments": "34",
+    "scheduledMeetings": "67",
+    "attendanceRate": "58%",
+    "classCompletionRate": "41%"
+  },
+  {
+    "id": "4",
+    "year": "2018",
+    "newEnrollments": "05",
+    "scheduledMeetings": "91",
+    "attendanceRate": "44%",
+    "classCompletionRate": "73%"
+  },
+  {
+    "id": "5",
+    "year": "2019",
+    "newEnrollments": "61",
+    "scheduledMeetings": "19",
+    "attendanceRate": "83%",
+    "classCompletionRate": "36%"
+  },
+  {
+    "id": "6",
+    "year": "2020",
+    "newEnrollments": "19",
+    "scheduledMeetings": "54",
+    "attendanceRate": "67%",
+    "classCompletionRate": "62%"
+  },
+  {
+    "id": "7",
+    "year": "2021",
+    "newEnrollments": "73",
+    "scheduledMeetings": "08",
+    "attendanceRate": "52%",
+    "classCompletionRate": "49%"
+  },
+  {
+    "id": "8",
+    "year": "2022",
+    "newEnrollments": "50",
+    "scheduledMeetings": "50",
+    "attendanceRate": "75%",
+    "classCompletionRate": "45%"
+  },
+  {
+    "id": "9",
+    "year": "2023",
+    "newEnrollments": "95",
+    "scheduledMeetings": "03",
+    "attendanceRate": "69%",
+    "classCompletionRate": "81%"
+  },
+  {
+    "id": "10",
+    "year": "2024",
+    "newEnrollments": "27",
+    "scheduledMeetings": "76",
+    "attendanceRate": "91%",
+    "classCompletionRate": "22%"
+  },
+  {
+    "id": "11",
+    "year": "2025",
+    "newEnrollments": "41",
+    "scheduledMeetings": "33",
+    "attendanceRate": "48%",
+    "classCompletionRate": "94%"
+  },
+  {
+    "id": "12",
+    "year": "2026",
+    "newEnrollments": "66",
+    "scheduledMeetings": "66",
+    "attendanceRate": "55%",
+    "classCompletionRate": "58%"
+  }
+]

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

@@ -7,6 +7,7 @@ examples:
   - advanced_table_table_props: Table Props
   - advanced_table_sticky_header_rails: Sticky Header
   - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
+  - advanced_table_pinned_rows_rails: Pinned Rows
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
@@ -74,6 +75,7 @@ examples:
   - advanced_table_column_visibility_with_state: Column Visibility Control With State
   - advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
   - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
+  - advanced_table_grouped_headers_composition: Grouped headers, custom headers, sort, and pinned rows
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
   - advanced_table_row_styling: Row Styling
   - advanced_table_padding_control_per_row: Padding Control using Row Styling

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

@@ -42,6 +42,7 @@ export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinit
 export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'
 export { default as AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'
 export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced_table_with_custom_header_multi_header.jsx'
+export { default as AdvancedTableGroupedHeadersComposition } from './_advanced_table_grouped_headers_composition.jsx'
 export { default as AdvancedTableSortPerColumn } from './_advanced_table_sort_per_column.jsx'
 export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'
 export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'

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

@@ -0,0 +1,19 @@
+This button is used many times for mobile or other things like cards and sidebars.
+
+### Responsive `display` and `full_width`
+
+`full_width` applies block styling that includes `display: flex` on the **same element** as the button. The **`display` global prop** also sets `display` (via utility classes, often with `!important`).
+
+Putting **both** on one button means **two systems control `display` on one node**, which can cause wrong visibility (e.g. both a header and a full-width mobile button showing) or confusing cascade behavior.
+
+**Recommended:** Put responsive `display` on a **parent** (e.g. `Flex`, `Card`, or a plain wrapper) and keep `full_width` only on the `Button` inside. The wrapper handles show/hide by breakpoint; the button only handles full-width layout.
+
+```erb
+<%= pb_rails("flex", props: {
+  display: { xs: "flex", default: "none" },
+  orientation: "column",
+  width: "100%",
+}) do %>
+  <%= pb_rails("button", props: { full_width: true, text: "Add" }) %>
+<% end %>
+```

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

@@ -0,0 +1,23 @@
+This button is used many times for mobile or other things like cards and sidebars.
+
+### Responsive `display` and `full_width`
+
+`full_width` applies block styling that includes `display: flex` on the **same element** as the button. The **`display` global prop** also sets `display` (via utility classes, often with `!important`).
+
+Putting **both** on one button means **two systems control `display` on one node**, which can cause wrong visibility (e.g. both a header and a full-width mobile button showing) or confusing cascade behavior.
+
+**Recommended:** Put responsive `display` on a **parent** (e.g. `Flex`, `Card`, or a plain wrapper) and keep `fullWidth` only on the `Button` inside. The wrapper handles show/hide by breakpoint; the button only handles full-width layout.
+
+```jsx
+import { Flex, Button } from "playbook-ui"
+
+const Example = () => (
+  <Flex
+    display={{ xs: "flex", default: "none" }}
+    orientation="column"
+    width="100%"
+  >
+    <Button fullWidth text="Add" />
+  </Flex>
+)
+```

data/app/pb_kits/playbook/pb_button/docs/{_button_loading.html.erb → _button_loading_rails.html.erb}

@@ -1,7 +1,7 @@
 <%= pb_rails("caption", props: { margin_y: "md", text: "Button variants with loading" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, margin_right: "lg" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "secondary", loading: true, margin_right: "lg" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "link", loading: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, text: "Loading", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "secondary", loading: true, text: "Loading", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "link", loading: true, text: "Loading", margin_right: "lg" }) %>
 <%= pb_rails("caption", props: { margin_y: "md", text: "Button sizes with loading" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "sm", margin_right: "lg" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "lg", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "sm", text: "Loading", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "lg", text: "Loading", margin_right: "lg" }) %>

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

@@ -0,0 +1,3 @@
+Used when a button will take a little while to load. The spinner lets the user know that the button has worked and it is in the process of loading. 
+
+**NOTE**: In Rails, both the button text and loading spinner are rendered at the same time, and visibility is toggled between them. Even though the text prop is not required, providing it ensures the button maintains its correct shape during loading.

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

@@ -4,7 +4,7 @@ examples:
   - button_reaction: Reaction Button
   - button_full_width: Button Full Width
   - button_link: Button Links
-  - button_loading: Button Loading
+  - button_loading_rails: Button Loading
   - button_block_content: Button Block Content
   - button_icon_options: Button Icon Options
   - button_accessibility: Button Accessibility Options

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_multi_level_select/docs/_multi_level_select_placeholder.html.erb

@@ -0,0 +1,109 @@
+<%
+  tree_base = [{
+      label: "Power Home Remodeling",
+      value: "powerHomeRemodeling",
+      id: "100",
+      expanded: true,
+      children: [
+        {
+          label: "People",
+          value: "people",
+          id: "101",
+          expanded: true,
+          children: [
+            {
+              label: "Talent Acquisition",
+              value: "talentAcquisition",
+              id: "102",
+            },
+            {
+              label: "Business Affairs",
+              value: "business Affairs",
+              id: "103",
+              children: [
+                {
+                  label: "Initiatives",
+                  value: "initiatives",
+                  id: "104",
+                },
+                {
+                  label: "Learning & Development",
+                  value: "learningAndDevelopment",
+                  id: "105",
+                },
+              ],
+            },
+            {
+              label: "People Experience",
+              value: "peopleExperience",
+              id: "106",
+            },
+          ],
+        },
+        {
+          label: "Contact Center",
+          value: "contactCenter",
+          id: "107",
+          children: [
+            {
+              label: "Appointment Management",
+              value: "appointmentManagement",
+              id: "108",
+            },
+            {
+              label: "Customer Service",
+              value: "customerService",
+              id: "109",
+            },
+            {
+              label: "Energy",
+              value: "energy",
+              id: "110",
+            },
+          ],
+        },
+      ],
+  }]
+
+  prefix_mls_ids = nil
+  prefix_mls_ids = ->(nodes, pfx) {
+    nodes.map do |n|
+      h = n.dup
+      h[:id] = "#{pfx}#{n[:id]}"
+      h[:children] = prefix_mls_ids.call(n[:children], pfx) if n[:children].present?
+      h
+    end
+  }
+
+  tree_multi = prefix_mls_ids.call(tree_base, "phm_")
+  tree_return_all = prefix_mls_ids.call(tree_base, "phr_")
+  tree_single = prefix_mls_ids.call(tree_base, "phs_")
+%>
+
+<%= pb_rails("multi_level_select", props: {
+  id: "multi-level-select-placeholder-multi-rails",
+  label: "Multi (default)",
+  margin_bottom: "sm",
+  name: "placeholder_multi",
+  tree_data: tree_multi,
+  placeholder: "Search or choose options…",
+}) %>
+
+<%= pb_rails("multi_level_select", props: {
+  id: "multi-level-select-placeholder-return-all-rails",
+  label: "Multi (return all selected)",
+  margin_bottom: "sm",
+  name: "placeholder_return_all",
+  placeholder: "Departments...",
+  return_all_selected: true,
+  tree_data: tree_return_all,
+}) %>
+
+<%= pb_rails("multi_level_select", props: {
+  id: "multi-level-select-placeholder-single-rails",
+  label: "Single",
+  name: "placeholder_single",
+  placeholder: "Select one option…",
+  tree_data: tree_single,
+  variant: "single",
+}) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.jsx

@@ -0,0 +1,127 @@
+import React from "react";
+
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeTemplate = [
+  {
+    label: "Power Home Remodeling",
+    value: "powerHomeRemodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "people",
+        id: "people1",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "talentAcquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "businessAffairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "learningAndDevelopment",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "peopleExperience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "contactCenter",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "appointmentManagement",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "customerService",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+function prefixTreeIds(nodes, prefix) {
+  return nodes.map((node) => ({
+    ...node,
+    id: `${prefix}${node.id}`,
+    children:
+      node.children && node.children.length > 0
+        ? prefixTreeIds(node.children, prefix)
+        : node.children,
+  }));
+}
+
+const treeDataMulti = prefixTreeIds(treeTemplate, "phm_");
+const treeDataReturnAll = prefixTreeIds(treeTemplate, "phr_");
+const treeDataSingle = prefixTreeIds(treeTemplate, "phs_");
+
+const MultiLevelSelectPlaceholder = () => (
+  <>
+    <MultiLevelSelect
+        id="multi-level-select-placeholder-multi"
+        label="Multi (default)"
+        marginBottom="sm"
+        name="placeholder_multi"
+        onSelect={(selectedNodes) =>
+          console.log("Multi — default", selectedNodes)
+        }
+        placeholder="Search or choose options…"
+        treeData={treeDataMulti}
+    />
+    <MultiLevelSelect
+        id="multi-level-select-placeholder-return-all"
+        label="Multi (return all selected)"
+        marginBottom="sm"
+        name="placeholder_return_all"
+        onSelect={(selectedNodes) =>
+          console.log("Multi — return all selected", selectedNodes)
+        }
+        placeholder="Departments..."
+        returnAllSelected
+        treeData={treeDataReturnAll}
+    />
+    <MultiLevelSelect
+        id="multi-level-select-placeholder-single"
+        label="Single"
+        name="placeholder_single"
+        onSelect={(selectedNodes) =>
+          console.log("Single", selectedNodes)
+        }
+        placeholder="Select one option…"
+        treeData={treeDataSingle}
+        variant="single"
+    />
+  </>
+);
+
+export default MultiLevelSelectPlaceholder;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.md

@@ -0,0 +1 @@
+Use the `placeholder` prop to customize the initial text shown in the input when nothing is selected. The default is `Start typing...`.

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

@@ -18,6 +18,7 @@ examples:
     - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
     - multi_level_select_single_disabled: Disabled Options (Single Select)
     - multi_level_select_required_indicator: Required Indicator
+    - multi_level_select_placeholder: Placeholder
 
   react:
     - multi_level_select_default: Default
@@ -40,3 +41,4 @@ examples:
     - multi_level_select_single_disabled: Disabled Options (Single Select)
     - multi_level_select_required_indicator: Required Indicator
     - multi_level_select_react_reset_key: Reset with Key (React)
+    - multi_level_select_placeholder: Placeholder

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

@@ -18,3 +18,4 @@ export { default as MultiLevelSelectLabel } from "./_multi_level_select_label.js
 export { default as MultiLevelSelectSingleDisabled } from "./_multi_level_select_single_disabled.jsx"
 export { default as MultiLevelSelectRequiredIndicator } from "./_multi_level_select_required_indicator.jsx"
 export { default as MultiLevelSelectReactResetKey } from "./_multi_level_select_react_reset_key.jsx"
+export { default as MultiLevelSelectPlaceholder } from "./_multi_level_select_placeholder.jsx"

data/app/pb_kits/playbook/pb_select/docs/_select_attributes.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-food-attributes",
   attributes: {
     data: { options: "data_attribute" },
   },

data/app/pb_kits/playbook/pb_select/docs/_select_blank.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-location",
   label: "Where do you live",
   name: "location",
   blank_selection: "Select One...",

data/app/pb_kits/playbook/pb_select/docs/_select_custom_select.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("select", props: { label: "Favorite Holiday" }) do %>
+<%= pb_rails("select", props: { id: "holiday", label: "Favorite Holiday" }) do %>
   <select name="holiday" id="holiday">
     <option value="1">Christmas</option>
     <option value="2">Thanksgiving</option>

data/app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("select", props: { label: "Favorite Animal" }) do %>
+<%= pb_rails("select", props: { id: "animal", label: "Favorite Animal" }) do %>
   <select name="animal" id="animal">
     <optgroup label="Mammal">
       <option value="1">Cat</option>

data/app/pb_kits/playbook/pb_select/docs/_select_default.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-favorite-food",
   label: "Favorite Food",
   name: "food",
   options: [

data/app/pb_kits/playbook/pb_select/docs/_select_disabled.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-dessert-disabled",
   label: "Favorite Dessert",
   disabled: true,
   name: "dessert",

data/app/pb_kits/playbook/pb_select/docs/_select_disabled_options.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-coffee",
   label: "Favorite Coffee",
   name: "coffee",
   options: [

data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb

@@ -1,5 +1,6 @@
 <%= pb_rails("select", props: {
   error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
+  id: "select-food-error",
   label: "Favorite Food",
   name: "food",
   options: [

data/app/pb_kits/playbook/pb_select/docs/_select_inline.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-food-inline",
   label: "Favorite Food",
   name: "food",
   inline: true,

data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-food-inline-compact",
   label: "Favorite Food",
   name: "food",
   inline: true,

data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-food-inline-arrow",
   label: "Favorite Food",
   name: "food",
   inline: true,

data/app/pb_kits/playbook/pb_select/docs/_select_multiple.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-food-multiple",
   label: "Favorite Food",
   name: "food",
   multiple: true,

data/app/pb_kits/playbook/pb_select/docs/_select_required.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-shoe-required",
   label: "Which shoe do you tie first?",
   required: true,
   name: "shoe",

data/app/pb_kits/playbook/pb_select/docs/_select_required_indicator.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-snacks-required-indicator",
   label: "Favorite Snacks",
   name: "food",
   required_indicator: true,

data/app/pb_kits/playbook/pb_select/docs/_select_value_text_same.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-sport",
   label: "Favorite Sport",
   name: "sports",
   options: [

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

@@ -55,6 +55,7 @@ sections:
       - table_with_clickable_rows
       - table_with_selectable_rows
       - table_with_filter_variant
+      - table_with_filter_variant_external_filter_rails
       - table_with_filter_variant_with_pagination
       - table_disable_hover
 

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

@@ -0,0 +1,45 @@
+<%# External filter: capture any filter markup and pass it via the filter prop.
+    Use your own helper (e.g. a search/filter form) or pb_rails("filter") as shown here. %>
+<% users = [
+  { name: "Alex", role: "Engineer" },
+  { name: "Sam", role: "Designer" },
+  { name: "Jordan", role: "Manager" },
+] %>
+
+<% filter_output = capture do %>
+  <%= pb_rails("filter", props: {
+    id: "external-filter-demo",
+    template: "single",
+    results: 3,
+    background: false,
+    sort_menu: [
+      { item: "Name", link: "#", active: true, direction: "asc" },
+      { item: "Role", link: "#", active: false },
+    ],
+  }) do %>
+    <%= pb_rails("text_input", props: { label: "Name", placeholder: "Search by name" }) %>
+    <%= pb_rails("text_input", props: { label: "Role", placeholder: "e.g. Engineer, Designer" }) %>
+    <%= pb_rails("button", props: { text: "Apply" }) %>
+  <% end %>
+<% end %>
+
+<%= pb_rails("table", props: {
+  variant: "with_filter",
+  title: "Table with External Filter",
+  filter: filter_output,
+}) do %>
+  <%= pb_rails("table/table_head") do %>
+    <%= pb_rails("table/table_row") do %>
+      <%= pb_rails("table/table_header", props: { text: "Name" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Role" }) %>
+    <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+    <% users.each do |user| %>
+      <%= pb_rails("table/table_row") do %>
+        <%= pb_rails("table/table_cell") { user[:name] } %>
+        <%= pb_rails("table/table_cell") { user[:role] } %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,39 @@
+Use the **"with_filter"** variant with an **external filter** (Option B): pass pre-rendered filter markup via the `filter` prop. Same layout as Variant with Filter (card, title, separator, flex); only the filter slot is supplied by you. Use this when you need:
+
+- **Manual filter submission** – Apply / Filter button instead of automatic application
+- **Full control** – Over filter props, template, sort menu, and submission
+- **Custom or app-specific filter helpers** – Any helper that returns filter markup (e.g. search/filter forms)
+
+#### Required props
+
+- `variant: "with_filter"`
+- `filter` – Pre-rendered filter HTML (e.g. from `capture { ... }`)
+
+When `filter` is present, `filter_content` and `filter_props` are ignored.
+
+#### How to do it
+
+1. **Render your filter** (e.g. `pb_rails("filter", ...)` or any helper that returns filter markup).
+2. **Capture the output** with `capture do ... end`.
+3. **Pass it to the Table** as the `filter` prop.
+
+**Example (generic pattern):**
+
+```erb
+<% filter_output = capture do %>
+  <%= pb_rails("filter", props: { template: "single", results: 10, background: false }) do %>
+    <%= pb_rails("text_input", props: { label: "Name", placeholder: "Search by name" }) %>
+    <%= pb_rails("button", props: { text: "Apply" }) %>
+  <% end %>
+<% end %>
+
+<%= pb_rails("table", props: {
+  variant: "with_filter",
+  title: "My Table",
+  filter: filter_output,
+}) do %>
+  <%# table_head / table_body ... %>
+<% end %>
+```
+
+For Nitro apps that use a shared search/filter pattern, reference the example on Alpha for implementation details.

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

@@ -26,8 +26,9 @@ The Table kit automatically sets these Filter defaults (which you can override v
 - `min_width: "xs"`
 - `popover_props: { width: "350px" }`
 
+Alternatively, you can pass pre-rendered filter markup via the `filter` prop (e.g. for manual submission or custom filter helpers)—scroll down for that approach.
 
 **IMPORTANT NOTE**: 
 The purpose of this variant is to provide an easy way to set up a Table with a Filter with Design standards applied by default.
 
-If you are looking for more customization than this embedded variant provides, you may be better served by using the individual kits as demonstrating in our Table Filter Card Building Block as seen [here](https://playbook.powerapp.cloud/building_blocks/table_filter_card/rails).
+If you are looking for more customization than this embedded variant provides, you may be better served by using the individual kits as demonstrated in our Table Filter Card Building Block as seen [here](https://playbook.powerapp.cloud/building_blocks/table_filter_card/rails).

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

@@ -41,6 +41,7 @@ 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)
 

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.4.0
+  version: 16.5.0.pre.alpha.PLAY2893datepickerlabelclicktoggle15576
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-03-17 00:00:00.000000000 Z
+date: 2026-04-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -98,6 +98,8 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_grouped_headers_composition.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_grouped_headers_composition.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx
@@ -125,6 +127,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
@@ -191,6 +195,7 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
 - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading_empty_children.js
+- app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_grouped_headers_composition_mock_data.json
 - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json
 - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_infinite_scroll.json
 - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_no_subrows.json
@@ -307,7 +312,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
@@ -322,9 +328,10 @@ files:
 - app/pb_kits/playbook/pb_button/docs/_button_link.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_link.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_link.md
-- app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_loading.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_loading.md
+- app/pb_kits/playbook/pb_button/docs/_button_loading_rails.html.erb
+- app/pb_kits/playbook/pb_button/docs/_button_loading_rails.md
 - app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.md
 - app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.html.erb
@@ -1459,6 +1466,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
@@ -2298,6 +2308,8 @@ 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
@@ -2654,6 +2666,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.