playbook_ui_docs 16.8.0.pre.alpha.PLAY298616637 → 16.8.0.pre.alpha.play293416802

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 596ee7f7c70ef9f133fad473e4e2c4060753e23339f76965b077b081884a0992
-  data.tar.gz: 2303ee885e0c4deb40a56bac5716e84ab82237ace88081528b84902087d53678
+  metadata.gz: f113ae8f11b4e289b8de3c2b1b554a6b36606b142f024acf02a60475c479f6e0
+  data.tar.gz: 0dad54e09afb9bd5ec35b431e97cd8b221a64dbf8084353548e062e789d3186e
 SHA512:
-  metadata.gz: 306aee1005a77f0d518fcaff7f7bc08a8527a621ea12b0224a77484b0cdf5544242bc143ef6658a229343e5d7e9c4c8f7b74da17adf062d95ee4280b59b17756
-  data.tar.gz: 1dd8e7002156fa66d8adee2dd12c2addaab61a4e44450e61a746533eadd9ed022996ced4bbe201001b0b448f9666f722e3fccd819fd9871fbfc6469f81569b7d
+  metadata.gz: 1c69733472ccbf8d63187222c45516050c6d52f271a3dcdab9349104d1cfac2d0b9b3b071af0c90db93d4be5dfb88bf5644dd7896ad68867819ae3fcf3ba4d99
+  data.tar.gz: fcbe504b76d1b96bf2d36ce9ad4c5f51ced0a160b5e504c7fdd1aa8d77226928ae45df2a97a99d84f981d4c4a69c12d93ced5192601bb31d972a350d1adb7f5e

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

@@ -0,0 +1,62 @@
+<%
+  column_definitions = [
+    {
+      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",
+    }
+  ]
+
+  subrow_headers = ["Quarter", "Month", "Day"]
+%>
+
+<%= pb_rails("title", props: { size: 4, text: "Normal Structure", margin_bottom: "sm" }) %>
+
+<%= pb_rails("advanced_table", props: {
+  id: "enable-toggle-expansion-normal",
+  table_data: @table_data,
+  column_definitions: column_definitions,
+  enable_toggle_expansion: "all"
+}) %>
+
+<%= pb_rails("title", props: { size: 4, text: "Subcomponent Structure", margin_top: "lg", margin_bottom: "sm" }) %>
+
+<%= pb_rails("advanced_table", props: { id: "enable-toggle-expansion-subcomponents" }) do %>
+  <%= pb_rails("advanced_table/table_header", props: {
+    table_id: "enable-toggle-expansion-subcomponents",
+    table_data: @table_data,
+    column_definitions: column_definitions,
+    enable_toggle_expansion: "all"
+  }) %>
+  <%= pb_rails("advanced_table/table_body", props: {
+    table_id: "enable-toggle-expansion-subcomponents",
+    table_data: @table_data,
+    column_definitions: column_definitions,
+    subrow_headers: subrow_headers,
+    enable_toggle_expansion: "all"
+  }) %>
+<% end %>

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

@@ -0,0 +1,7 @@
+`enable_toggle_expansion` controls where AdvancedTable renders toggle-all expansion controls. It accepts `"header"`, `"all"`, or `"none"` and defaults to `"header"`.
+
+When using the normal Rails structure, pass `enable_toggle_expansion` to `advanced_table`. The parent kit renders its own `table_header` and `table_body`, so the prop is passed down automatically.
+
+When using the Rails subcomponent structure, pass `enable_toggle_expansion` directly to the subcomponents that need it. `advanced_table/table_header` uses it for the table header toggle-all button. **NOTE**: you must pass `table_data` to `advanced_table/table_header` as well so it can detect whether expandable rows exist. `advanced_table/table_body` uses it for nested subrow header toggle controls, such as when `subrow_headers` is present.
+
+Use `"all"` when you want toggle-all controls in both the table header and subrow headers. Use `"header"` when you only want the table header toggle-all control. Use `"none"` to suppress the header toggle-all control.

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

@@ -1,13 +1,21 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const tableData = Array.from({ length: 15 }, (_, index) => ({
+  year: String(2020 + index),
+  newEnrollments: String(20 + index),
+  scheduledMeetings: String(10 + index),
+  attendanceRate: `${50 + index}%`,
+  completedClasses: String(3 + index),
+  classCompletionRate: `${30 + index}%`,
+  graduatedStudents: String(19 + index),
+}))
 
 const AdvancedTableStickyHeader = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
       label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -40,11 +48,11 @@ const AdvancedTableStickyHeader = (props) => {
   }
 
   return (
-    <div>
+    <div style={{ maxHeight: "320px", overflowY: "auto" }}>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           responsive="none"
-          tableData={MOCK_DATA}
+          tableData={tableData}
           tableProps={tableProps}
           {...props}
       />

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

@@ -1,3 +1,7 @@
 The `TableProps` prop can also be used to render a sticky header for the Advanced Table.
 
+This doc example uses a scroll container with flat rows so sticky behavior is visible in the docs without expanding subrows. Scroll inside the preview to see the header stick.
+
+This example builds flat table data inline for the docs preview. For typical `tableData` setup, see [Default (Required Props)](/kits/advanced_table/default/react#advanced_table_default).
+
 This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "Sticky Header for Responsive Table" doc example below.

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

@@ -2,7 +2,6 @@
     {
       accessor: "year",
       label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -30,4 +29,19 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "sticky_header_table", table_data: @table_data, column_definitions: column_definitions, responsive: "none", table_props: { sticky: true }}) %>
+<% table_data = 15.times.map do |index|
+  {
+    year: (2020 + index).to_s,
+    id: (2020 + index).to_s,
+    newEnrollments: (20 + index).to_s,
+    scheduledMeetings: (10 + index).to_s,
+    attendanceRate: "#{50 + index}%",
+    completedClasses: (3 + index).to_s,
+    classCompletionRate: "#{30 + index}%",
+    graduatedStudents: (19 + index).to_s,
+  }
+end %>
+
+<div style="max-height: 320px; overflow-y: auto;">
+  <%= pb_rails("advanced_table", props: { id: "sticky_header_table", table_data: table_data, column_definitions: column_definitions, responsive: "none", table_props: { sticky: true }}) %>
+</div>

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

@@ -1,3 +1,7 @@
 The `table_props` prop can also be used to render a sticky header for the Advanced Table.
 
+This doc example uses a scroll container with flat rows so sticky behavior is visible in the docs without expanding subrows. Scroll inside the preview to see the header stick.
+
+This example builds flat table data inline for the docs preview. For typical `table_data` setup, see [Default (Required Props)](/kits/advanced_table/default/rails#advanced_table_beta).
+
 This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "[Sticky Header for Responsive Table](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header-for-responsive-table)" doc example below.

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

@@ -0,0 +1,68 @@
+import React from "react"
+import AdvancedTable from "../../pb_advanced_table/_advanced_table"
+import Title from "../../pb_title/_title"
+
+const COLUMN_COUNT = 10
+const ROW_COUNT = 40
+
+const columnDefinitions = [
+  {
+    accessor: "region",
+    label: "Region",
+    id: "region",
+    columnStyling: { minWidth: 160 },
+  },
+  ...Array.from({ length: COLUMN_COUNT }, (_, index) => ({
+    accessor: `metric${index + 1}`,
+    label: `Metric ${index + 1}`,
+    id: `metric${index + 1}`,
+    columnStyling: { minWidth: 180 },
+  })),
+]
+
+const tableData = Array.from({ length: ROW_COUNT }, (_, row) => ({
+  region: `Region ${row + 1}`,
+  ...Object.fromEntries(
+    Array.from({ length: COLUMN_COUNT }, (_, col) => [
+      `metric${col + 1}`,
+      String((row + 1) * (col + 1)),
+    ])
+  ),
+}))
+
+const tableProps = { sticky: true }
+
+const AdvancedTableStickyScrollLimitation = (props) => (
+  <div>
+    <Title
+        size={4}
+        text="Without maxHeight"
+        {...props}
+    />
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        responsive="none"
+        stickyLeftColumn={["region"]}
+        tableData={tableData}
+        tableProps={tableProps}
+        {...props}
+    />
+    <Title
+        paddingTop="sm"
+        size={4}
+        text="With maxHeight"
+        {...props}
+    />
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        maxHeight="sm"
+        responsive="none"
+        stickyLeftColumn={["region"]}
+        tableData={tableData}
+        tableProps={tableProps}
+        {...props}
+    />
+  </div>
+)
+
+export default AdvancedTableStickyScrollLimitation

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

@@ -0,0 +1,7 @@
+`stickyLeftColumn` adds horizontal overflow to the table wrapper. Without `maxHeight`, the page scrolls vertically while the table scrolls horizontally — two scroll containers.
+
+Sticky columns work in that setup, but the sticky header cannot stick to the page. Scroll down on the page, then scroll the first table horizontally to see the conflict.
+
+The second table uses `maxHeight` so both axes share one scroll container. The header sticks to the top of the table box instead of the page.
+
+For a typical implementation with subrows, see [Sticky Columns with Sticky Header](#sticky-columns-with-sticky-header).

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

@@ -2,7 +2,6 @@
     {
       accessor: "year",
       label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -30,4 +29,19 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", table_props: { sticky: true }}) %>
+<% table_data = 15.times.map do |index|
+  {
+    year: (2020 + index).to_s,
+    id: (2020 + index).to_s,
+    newEnrollments: (20 + index).to_s,
+    scheduledMeetings: (10 + index).to_s,
+    attendanceRate: "#{50 + index}%",
+    completedClasses: (3 + index).to_s,
+    classCompletionRate: "#{30 + index}%",
+    graduatedStudents: (19 + index).to_s,
+  }
+end %>
+
+<div style="max-height: 320px; overflow-y: auto;">
+  <%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: table_data, column_definitions: column_definitions, table_props: { sticky: true }}) %>
+</div>

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

@@ -1,13 +1,21 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const tableData = Array.from({ length: 15 }, (_, index) => ({
+  year: String(2020 + index),
+  newEnrollments: String(20 + index),
+  scheduledMeetings: String(10 + index),
+  attendanceRate: `${50 + index}%`,
+  completedClasses: String(3 + index),
+  classCompletionRate: `${30 + index}%`,
+  graduatedStudents: String(19 + index),
+}))
 
 const AdvancedTableTablePropsStickyHeader = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
       label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -40,11 +48,10 @@ const AdvancedTableTablePropsStickyHeader = (props) => {
   }
 
   return (
-    <div>
+    <div style={{ maxHeight: "320px", overflowY: "auto" }}>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
-          maxHeight="xs"
-          tableData={MOCK_DATA}
+          tableData={tableData}
           tableProps={tableProps}
           {...props}
       />

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

@@ -2,6 +2,10 @@ Create a sticky header that works for responsive Advanced Tables by setting `sti
 
 **NOTE**: This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 
+Scroll inside the table preview to see the header stick.
+
+This example builds flat table data inline for the docs preview. For typical `table_data` setup, see [Default (Required Props)](/kits/advanced_table/default/rails#advanced_table_beta).
+
 Expand the table above to see this in action.
 
 A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#sticky-header) doc example above.

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

@@ -1,7 +1,9 @@
-Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/global_props/max_height) global prop. 
+Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and wrapping the table in a scroll container (or using `maxHeight`).
 
-**NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
+**NOTE**: The header is sticky within the table scroll area. The live example uses flat rows so you can scroll inside the preview without expanding subrows.
 
-Expand the table above to see this in action.
+This example builds flat table data inline for the docs preview. For typical `tableData` setup, see [Default (Required Props)](/kits/advanced_table/default/react#advanced_table_default).
+
+Expand the table above to see responsive behavior in action.
 
 A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header) doc example above.

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

@@ -3,6 +3,7 @@ examples:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_loading: Loading State
   - advanced_table_beta_subrow_headers: SubRow Headers
+  - advanced_table_enable_toggle_expansion_rails: Enable Toggle Expansion
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_table_props: Table Props
   - advanced_table_sticky_header_rails: Sticky Header
@@ -52,6 +53,7 @@ examples:
   - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
   - advanced_table_sticky_columns: Sticky Columns
   - advanced_table_sticky_columns_and_header: Sticky Columns with Sticky Header
+  - advanced_table_sticky_scroll_limitation: Sticky Header and Column Scroll Limitation
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
   - advanced_table_with_custom_header: Custom Header Cell

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

@@ -27,6 +27,7 @@ export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen
 export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
 export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
 export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
+export { default as AdvancedTableStickyScrollLimitation } from './_advanced_table_sticky_scroll_limitation.jsx'
 export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
 export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
 export { default as AdvancedTableColumnVisibility } from './_advanced_table_column_visibility.jsx'

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.jsx

@@ -36,10 +36,10 @@ const DatePickerDialogSubmission = () => {
                 <Dialog.Body>
                     <DatePicker
                         defaultDate={dateFixed || undefined}
-                        key={`fixed-${pickerInstance}`}
+                        key={"fixed-" + pickerInstance}
                         label="Date"
                         onChange={(dateStr) => setDateFixed(dateStr || "")}
-                        pickerId={`datePickerFixed-${pickerInstance}`}
+                        pickerId={"datePickerFixed-" + pickerInstance}
                         staticPosition={false}
                     />
                 </Dialog.Body>

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb

@@ -28,7 +28,11 @@
   <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
     <%= form.text_field :example_text_field, props: { label: true } %>
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-
+    <%= pb_rails("date_picker", props: {
+      label: "Start date",
+      name: "start_date",
+      picker_id: "filter-default",
+    }) %>
     <%= form.actions do |action| %>
       <%= action.submit props: {
         text: "Apply",

data/app/pb_kits/playbook/pb_filter/docs/_filter_interactive.html.erb

@@ -0,0 +1,116 @@
+<%
+  territory_options = [
+    { value: "USA", label: "USA" },
+    { value: "Canada", label: "Canada" },
+    { value: "Brazil", label: "Brazil" },
+    { value: "Philippines", label: "Philippines" },
+  ]
+
+  status_options = [
+    { value: "open", label: "Open", id: "open" },
+    { value: "in_progress", label: "In progress", id: "in_progress" },
+    { value: "resolved", label: "Resolved", id: "resolved" },
+    { value: "closed", label: "Closed", id: "closed" },
+  ]
+
+  raw_example = params[:example]
+  example_params =
+    if raw_example.respond_to?(:permit)
+      raw_example.permit(:territory, :status, :date_range, :start_date)
+    else
+      raw_example || {}
+    end
+  current_territory = example_params[:territory].presence || "USA"
+  current_status    = example_params[:status].presence || "open"
+  current_date_range = example_params[:date_range].presence || "quickpick-this-week"
+  current_start     = example_params[:start_date].presence || "05/01/2026"
+  status_default    = status_options.find { |o| o[:value] == current_status }
+%>
+
+<%=
+  pb_rails("filter", props: {
+    id: "filter-interactive-demo",
+    min_width: "360px",
+    margin_bottom: "xl",
+    template: "default",
+    results: 546,
+    filters: [
+      { name: "Territory",  value: current_territory },
+      { name: "Status",     value: current_status },
+      { name: "Date range", value: current_date_range },
+      { name: "Start date", value: current_start },
+    ],
+    interactive_filters: [
+      {
+        name: "Territory",
+        type: "select",
+        options: territory_options,
+        target_input: "filter-interactive-territory",
+        auto_submit: true,
+      },
+      {
+        name: "Status",
+        type: "dropdown",
+        options: status_options,
+        target_input: "filter-interactive-status",
+        auto_submit: true,
+      },
+      {
+        name: "Date range",
+        type: "dropdown",
+        variant: "quickpick",
+        target_input: "filter-interactive-date-range",
+        auto_submit: true,
+      },
+      {
+        name: "Start date",
+        type: "date-picker",
+        target_input: "filter-interactive-start",
+        format: "m/d/Y",
+        auto_submit: true,
+      },
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+    ],
+  }) do
+%>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= pb_rails("select", props: {
+      label: "Territory",
+      name: "territory",
+      options: territory_options.map { |o| { value: o[:value], text: o[:label] } },
+      value: current_territory,
+      input_options: { id: "filter-interactive-territory" }
+    }) %>
+
+    <%= pb_rails("dropdown", props: {
+      id: "filter-interactive-status",
+      label: "Status",
+      name: "status",
+      options: status_options,
+      default_value: status_default,
+      margin_bottom: "sm",
+    }) %>
+
+    <%= pb_rails("dropdown", props: {
+      id: "filter-interactive-date-range",
+      label: "Date range",
+      name: "date_range",
+      variant: "quickpick",
+      margin_bottom: "sm",
+    }) %>
+
+    <%= pb_rails("date_picker", props: {
+      label: "Start date",
+      name: "start_date",
+      picker_id: "filter-interactive-start",
+      default_date: current_start,
+    }) %>
+
+    <%= form.actions do |action| %>
+      <%= action.submit props: { text: "Apply" } %>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_interactive.md

@@ -0,0 +1,14 @@
+Click an applied filter chip to edit it inline. `interactive_filters` supports:
+
+- `type: 'select'` / `'dropdown'`: pick from a list of options.
+- `type: 'date-picker'`: inline calendar. Supports `format`, `min_date`, `max_date`, and `mode`.
+
+Each entry needs a `target_input` that points to the form control it updates. For `select` and `date-picker`, use the input's `id`. For `dropdown`, use the Dropdown kit's `id`.
+
+For date ranges, use `type: 'dropdown'` with `variant: 'quickpick'`. The Filter kit generates the same quickpick options as Dropdown, so no `options` are needed. Values are quickpick ids, such as `quickpick-this-week`.
+
+Chip edits update the linked control inside the filter popover. Click **Apply** to submit, then pass the submitted values back into `filters` so chips re-render with the latest labels.
+
+To preserve space for results and sort controls, only the first four applied filters are interactive at `lg` screen sizes (`960px`) and larger. Below `960px`, applied filters render as static chips; edit values from the filter popover instead.
+
+Use `auto_submit: true` to submit the form immediately after a chip value is picked.

data/app/pb_kits/playbook/pb_filter/docs/_filter_interactive_react.jsx

@@ -0,0 +1,153 @@
+import React, { useState } from "react";
+
+import Filter from "../_filter";
+
+import Button from "../../pb_button/_button";
+import DatePicker from "../../pb_date_picker/_date_picker";
+import Dropdown from "../../pb_dropdown/_dropdown";
+import Flex from "../../pb_flex/_flex";
+import Select from "../../pb_select/_select";
+
+const territorySelectOptions = [
+  { value: "USA" },
+  { value: "Canada" },
+  { value: "Brazil" },
+  { value: "Philippines" },
+];
+
+const statusDropdownOptions = [
+  { id: "open", label: "Open", value: "open" },
+  { id: "in_progress", label: "In progress", value: "in_progress" },
+  { id: "resolved", label: "Resolved", value: "resolved" },
+  { id: "closed", label: "Closed", value: "closed" },
+];
+
+const INITIAL_FILTERS = {
+  territory: "USA",
+  status: "open",
+  dateRange: "quickpick-this-week",
+  startDate: "05/01/2026",
+};
+
+const statusOptionForValue = (value) =>
+  value
+    ? statusDropdownOptions.find((opt) => opt.value === value)
+    : undefined;
+
+const FilterInteractive = (props) => {
+  const [filters, setFilters] = useState(INITIAL_FILTERS);
+
+  const updateFilter = (key) => (value) =>
+    setFilters((prev) => ({ ...prev, [key]: value }));
+
+  const handleClear = () => {
+    setFilters(INITIAL_FILTERS);
+  };
+
+  return (
+    <Filter
+        {...props}
+        filters={{
+          Territory: filters.territory,
+          Status: filters.status,
+          "Date range": filters.dateRange,
+          "Start date": filters.startDate,
+        }}
+        interactiveFilters={{
+          Territory: {
+            type: "select",
+            options: territorySelectOptions,
+            value: filters.territory,
+            onChange: updateFilter("territory"),
+          },
+          Status: {
+            type: "dropdown",
+            options: statusDropdownOptions,
+            value: filters.status,
+            onChange: updateFilter("status"),
+          },
+          "Date range": {
+            type: "dropdown",
+            variant: "quickpick",
+            value: filters.dateRange,
+            onChange: updateFilter("dateRange"),
+          },
+          "Start date": {
+            type: "date-picker",
+            value: filters.startDate,
+            onChange: updateFilter("startDate"),
+            format: "m/d/Y",
+          },
+        }}
+        minWidth="360px"
+        results={546}
+        sortOptions={{
+          popularity: "Popularity",
+        }}
+        sortValue={[{ name: "popularity", dir: "desc" }]}
+    >
+      {({ closePopover }) => (
+        <form>
+          <Select
+              {...props}
+              label="Territory"
+              name="location"
+              onChange={(e) => updateFilter("territory")(e.target.value)}
+              options={territorySelectOptions}
+              value={filters.territory}
+          />
+          <Dropdown
+              {...props}
+              blankSelection="Select status..."
+              defaultValue={statusOptionForValue(filters.status)}
+              key={filters.status || "cleared"}
+              label="Status"
+              marginBottom="sm"
+              onSelect={(option) =>
+                updateFilter("status")(option ? option.value : "")
+              }
+              options={statusDropdownOptions}
+          />
+
+          <Dropdown
+              {...props}
+              key={filters.dateRange || "cleared"}
+              label="Date range"
+              marginBottom="sm"
+              onSelect={(option) =>
+                updateFilter("dateRange")(option ? option.id : "")
+              }
+              variant="quickpick"
+          />
+
+          <DatePicker
+              {...props}
+              inputValue={filters.startDate}
+              label="Start date"
+              onChange={updateFilter("startDate")}
+              pickerId="filter-panel-start-date"
+          />
+
+          <Flex
+              {...props}
+              spacing="between"
+          >
+            <Button
+                {...props}
+                onClick={closePopover}
+                text="Apply"
+            />
+            <Button
+                {...props}
+                onClick={handleClear}
+                text="Clear"
+                variant="secondary"
+            />
+          </Flex>
+        </form>
+      )}
+    </Filter>
+  );
+};
+
+export default FilterInteractive;

data/app/pb_kits/playbook/pb_filter/docs/_filter_interactive_react.md

@@ -0,0 +1,10 @@
+Click an applied filter chip to edit it inline. `interactiveFilters` supports:
+
+- `type: 'select'` / `'dropdown'`: pick from a list of options.
+- `type: 'date-picker'`: inline calendar. Supports `format`, `minDate`, `maxDate`, and `mode`.
+
+For date ranges, use `type: 'dropdown'` with `variant: 'quickpick'`. The Filter kit generates the same quickpick options as Dropdown, so no `options` are needed. Values are quickpick ids, such as `quickpick-this-week`.
+
+Keep `filters`, `interactiveFilters.value`, and the filter popover fields backed by the same state so chip labels and form controls stay in sync.
+
+To preserve space for results and sort controls, only the first four applied filters are interactive at `lg` screen sizes (`960px`) and larger. Below `960px`, applied filters render as static chips; edit values from the filter popover instead.

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

@@ -12,6 +12,7 @@ examples:
   - filter_placement: Filter Placement
   - filter_popover_props: Popover Props
   - filter_within_turbo_frames: Within Turbo Frames
+  - filter_interactive: Interactive Applied Filters
 
   react:
   - filter_default: Default
@@ -25,4 +26,5 @@ examples:
   - filter_placement: Filter Placement
   - filter_popover_props: Popover Props
   - filter_sidebar: Sidebar
+  - filter_interactive_react: Interactive Applied Filters
 

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

@@ -8,4 +8,5 @@ export { default as FilterMaxWidth } from './_filter_max_width.jsx'
 export { default as FilterMaxHeight } from './_filter_max_height.jsx'
 export { default as FilterPlacement } from './_filter_placement.jsx'
 export { default as FilterPopoverProps } from './_filter_popover_props.jsx'
-export { default as FilterSidebar } from './_filter_sidebar.jsx'
+export { default as FilterSidebar } from './_filter_sidebar.jsx'
+export { default as FilterInteractiveReact } from './_filter_interactive_react.jsx'

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

@@ -1,83 +1,85 @@
-<%= pb_rails("table", props: { sticky: true }) do %>
-  <thead>
-    <tr>
-      <th>Column 1</th>
-      <th>Column 2</th>
-      <th>Column 3</th>
-      <th>Column 4</th>
-      <th>Column 5</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-  </tbody>
-<% end %>
+<div style="max-height: 320px; overflow-y: auto;">
+  <%= pb_rails("table", props: { sticky: true }) do %>
+    <thead>
+      <tr>
+        <th>Column 1</th>
+        <th>Column 2</th>
+        <th>Column 3</th>
+        <th>Column 4</th>
+        <th>Column 5</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Value 1</td>
+        <td>Value 2</td>
+        <td>Value 3</td>
+        <td>Value 4</td>
+        <td>Value 5</td>
+      </tr>
+      <tr>
+        <td>Value 1</td>
+        <td>Value 2</td>
+        <td>Value 3</td>
+        <td>Value 4</td>
+        <td>Value 5</td>
+      </tr>
+      <tr>
+        <td>Value 1</td>
+        <td>Value 2</td>
+        <td>Value 3</td>
+        <td>Value 4</td>
+        <td>Value 5</td>
+      </tr>
+      <tr>
+        <td>Value 1</td>
+        <td>Value 2</td>
+        <td>Value 3</td>
+        <td>Value 4</td>
+        <td>Value 5</td>
+      </tr>
+      <tr>
+        <td>Value 1</td>
+        <td>Value 2</td>
+        <td>Value 3</td>
+        <td>Value 4</td>
+        <td>Value 5</td>
+      </tr>
+      <tr>
+        <td>Value 1</td>
+        <td>Value 2</td>
+        <td>Value 3</td>
+        <td>Value 4</td>
+        <td>Value 5</td>
+      </tr>
+      <tr>
+        <td>Value 1</td>
+        <td>Value 2</td>
+        <td>Value 3</td>
+        <td>Value 4</td>
+        <td>Value 5</td>
+      </tr>
+      <tr>
+        <td>Value 1</td>
+        <td>Value 2</td>
+        <td>Value 3</td>
+        <td>Value 4</td>
+        <td>Value 5</td>
+      </tr>
+      <tr>
+        <td>Value 1</td>
+        <td>Value 2</td>
+        <td>Value 3</td>
+        <td>Value 4</td>
+        <td>Value 5</td>
+      </tr>
+      <tr>
+        <td>Value 1</td>
+        <td>Value 2</td>
+        <td>Value 3</td>
+        <td>Value 4</td>
+        <td>Value 5</td>
+      </tr>
+    </tbody>
+  <% end %>
+</div>

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

@@ -3,92 +3,94 @@ import React from "react"
 import Table from "../_table"
 
 const TableSticky = (props) => (
-  <Table
-      sticky
-      {...props}
-  >
-    <thead>
-      <tr>
-        <th>{'Column 1'}</th>
-        <th>{'Column 2'}</th>
-        <th>{'Column 3'}</th>
-        <th>{'Column 4'}</th>
-        <th>{'Column 5'}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>{'Value 1'}</td>
-        <td>{'Value 2'}</td>
-        <td>{'Value 3'}</td>
-        <td>{'Value 4'}</td>
-        <td>{'Value 5'}</td>
-      </tr>
-      <tr>
-        <td>{'Value 1'}</td>
-        <td>{'Value 2'}</td>
-        <td>{'Value 3'}</td>
-        <td>{'Value 4'}</td>
-        <td>{'Value 5'}</td>
-      </tr>
-      <tr>
-        <td>{'Value 1'}</td>
-        <td>{'Value 2'}</td>
-        <td>{'Value 3'}</td>
-        <td>{'Value 4'}</td>
-        <td>{'Value 5'}</td>
-      </tr>
-      <tr>
-        <td>{'Value 1'}</td>
-        <td>{'Value 2'}</td>
-        <td>{'Value 3'}</td>
-        <td>{'Value 4'}</td>
-        <td>{'Value 5'}</td>
-      </tr>
-      <tr>
-        <td>{'Value 1'}</td>
-        <td>{'Value 2'}</td>
-        <td>{'Value 3'}</td>
-        <td>{'Value 4'}</td>
-        <td>{'Value 5'}</td>
-      </tr>
-      <tr>
-        <td>{'Value 1'}</td>
-        <td>{'Value 2'}</td>
-        <td>{'Value 3'}</td>
-        <td>{'Value 4'}</td>
-        <td>{'Value 5'}</td>
-      </tr>
-      <tr>
-        <td>{'Value 1'}</td>
-        <td>{'Value 2'}</td>
-        <td>{'Value 3'}</td>
-        <td>{'Value 4'}</td>
-        <td>{'Value 5'}</td>
-      </tr>
-      <tr>
-        <td>{'Value 1'}</td>
-        <td>{'Value 2'}</td>
-        <td>{'Value 3'}</td>
-        <td>{'Value 4'}</td>
-        <td>{'Value 5'}</td>
-      </tr>
-      <tr>
-        <td>{'Value 1'}</td>
-        <td>{'Value 2'}</td>
-        <td>{'Value 3'}</td>
-        <td>{'Value 4'}</td>
-        <td>{'Value 5'}</td>
-      </tr>
-      <tr>
-        <td>{'Value 1'}</td>
-        <td>{'Value 2'}</td>
-        <td>{'Value 3'}</td>
-        <td>{'Value 4'}</td>
-        <td>{'Value 5'}</td>
-      </tr>
-    </tbody>
-  </Table>
+  <div style={{ maxHeight: "320px", overflowY: "auto" }}>
+    <Table
+        sticky
+        {...props}
+    >
+      <thead>
+        <tr>
+          <th>{'Column 1'}</th>
+          <th>{'Column 2'}</th>
+          <th>{'Column 3'}</th>
+          <th>{'Column 4'}</th>
+          <th>{'Column 5'}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+      </tbody>
+    </Table>
+  </div>
 )
 
 export default TableSticky

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

@@ -2,7 +2,9 @@ React: Use `sticky` on a table to allow the table header to be fixed in place wh
 
 Rails: Pass `sticky: true` to props.
 
-If the table header is not sticking in the right place you will need to pass a inline `top` style to the `thead`.
+The live example uses a scroll container so sticky behavior is visible in the docs. Scroll inside the preview to see it.
+
+If the table header is not sticking in the right place you will need to pass an inline `top` style to the `thead`. This is often needed when a parent adds padding above the table.
 React Example: `<thead style={{ top: "-16px" }}>`
 Rails Example: `<thead style="top: -16px">`
 

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

@@ -36,4 +36,4 @@ When `filter` is present, `filter_content` and `filter_props` are ignored.
 <% end %>
 ```
 
-For Nitro apps that use a shared search/filter pattern, reference the example on Alpha for implementation details.
+For Nitro apps that use a shared search/filter pattern, reference the [example on Alpha](https://github.com/powerhome/nitro-web/pull/56859/changes/aa2afcdc97d39d74beb65cf53eb3bb2517eb2181) for implementation details.

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default.md

@@ -1 +1,3 @@
-Use the Time Picker for time-only selection. For date and time selection, use the [DatePicker with Time Selection Enabled](https://playbook.powerapp.cloud/kits/date_picker/react#time-selection) instead.
+Use the Time Picker for time-only selection. For date and time selection, use the [DatePicker with Time Selection Enabled](https://playbook.powerapp.cloud/kits/date_picker/react#time-selection) instead.
+
+`id` is a **required prop** to instantiate the Time Picker. The presence of a unique `id` for each Time Picker on a page also associates the label with the input, providing the ability to focus the Time Picker by clicking the label.

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("flex", props: { margin_bottom: "sm", orientation: "column" }) do %>
+  <%= pb_rails("body", props: { id: "time-picker-on-change-output", text: "" }) %>
+  <%= pb_rails("body", props: { id: "time-picker-on-close-output", text: "" }) %>
+<% end %>
+
+<%= pb_rails("time_picker", props: { id: "time-picker-on-handler" }) %>
+
+<script>
+  (function() {
+    var picker = document.getElementById("time-picker-on-handler");
+    var changeOutput = document.getElementById("time-picker-on-change-output");
+    var closeOutput = document.getElementById("time-picker-on-close-output");
+
+    if (!picker) return;
+
+    picker.addEventListener("pb-time-picker-change", function(event) {
+      changeOutput.textContent = "onChange: " + (event.detail.time || "");
+    });
+
+    picker.addEventListener("pb-time-picker-close", function(event) {
+      closeOutput.textContent = "onClose: " + (event.detail.time || "");
+    });
+  })();
+</script>

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler_rails.md

@@ -0,0 +1,6 @@
+Demonstrates listening for Time Picker custom events on the Rails enhanced element. Attach listeners to the picker root element (the element with `data-pb-time-picker`).
+
+| Event | When it fires | `event.detail` |
+| --- | --- | --- |
+| `pb-time-picker-change` | Hour, minute, or period changes while the dropdown is open | `{ time: string }` — 24-hour `HH:MM` value, or `""` when cleared |
+| `pb-time-picker-close` | Dropdown closes with a valid selection | `{ time: string }` — 24-hour `HH:MM` value |

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

@@ -11,6 +11,7 @@ examples:
   - time_picker_disabled: Disabled
   - time_picker_required_indicator: Required Indicator
   - time_picker_input_options: Input Options
+  - time_picker_on_handler: onChange & onClose Handlers
   
   
   react:

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.8.0.pre.alpha.PLAY298616637
+  version: 16.8.0.pre.alpha.play293416802
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-05-27 00:00:00.000000000 Z
+date: 2026-06-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -94,6 +94,8 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_enable_toggle_expansion_rails.html.erb
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_enable_toggle_expansion_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
@@ -175,6 +177,8 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_scroll_limitation.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_scroll_limitation.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx
@@ -1086,6 +1090,10 @@ files:
 - app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_default.md
+- app/pb_kits/playbook/pb_filter/docs/_filter_interactive.html.erb
+- app/pb_kits/playbook/pb_filter/docs/_filter_interactive.md
+- app/pb_kits/playbook/pb_filter/docs/_filter_interactive_react.jsx
+- app/pb_kits/playbook/pb_filter/docs/_filter_interactive_react.md
 - app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_max_height.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_max_width.html.erb
@@ -2625,8 +2633,10 @@ files:
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.html.erb
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.jsx
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.md
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.html.erb
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.jsx
-- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.md
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler_rails.md
+- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler_react.md
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.html.erb
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.jsx
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.md