playbook_ui_docs 15.6.0.pre.rc.4 → 15.7.0.pre.alpha.play263313229

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

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

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

@@ -0,0 +1,33 @@
+Set the `variant` prop to `with_filter` to render a Table with a filter. The variant automatically handles:
+
+- Card wrapper with standard responsive margins
+- Optional `title` prop to render title above the card
+- Filter component rendering with Design defaults
+- SectionSeparator between filter and table
+- Flex layout for proper alignment
+
+#### Required Props
+
+- `variant: "with_filter"`: Enables the filter variant
+- `filter_content`: The filter's body content (inputs, buttons, etc.) built with `pb_rails` string concatenation
+- `filter_props`: A hash containing Filter-specific props like `results`, `sort_menu`, etc.
+
+#### Optional Props
+
+- `title`: Displays a title above the card
+- All standard Table props (`size`, `collapse`, etc.) can be used, but defaults are already set to match Design guidelines
+
+#### Default Filter Props
+
+The Table kit automatically sets these Filter defaults (which you can override via `filter_props`):
+
+- `background: false`
+- `max_height: "50vh"`
+- `min_width: "xs"`
+- `popover_props: { width: "350px" }`
+
+
+**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).

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

@@ -0,0 +1,180 @@
+import React, { useState } from "react"
+import { Button, Date as DateKit, DatePicker, Dropdown, Pagination, Select, Table, TextInput, Typeahead, Flex } from "playbook-ui"
+
+
+// Mock Data for Table
+  const users = [
+    { id: 1, name: "Jennifer", title: "Associate Scrum Master", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-01" },
+    { id: 2, name: "Nick", title: "UX Engineer II", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-02" },
+    { id: 3, name: "Nida", title: "Senior UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-03" },
+    { id: 4, name: "Justin", title: "Director of User Experience Engineering", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-04" },
+    { id: 5, name: "Edward", title: "UX Designer II", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-05" },
+    { id: 6, name: "Elisa", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-06" },
+    { id: 7, name: "Gary", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-07" },
+    { id: 8, name: "Barkley", title: "Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-08" },
+    { id: 9, name: "Aaron", title: "Associate Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-09" },
+    { id: 10, name: "Sarah", title: "Senior Product Manager", department: "Business Technology", branch: "New York", startDate: "2025-01-10" },
+    { id: 11, name: "Michael", title: "Software Engineer III", department: "Business Technology", branch: "Austin", startDate: "2025-01-11" },
+    { id: 12, name: "Emma", title: "Data Analyst II", department: "Customer Development", branch: "Philadelphia", startDate: "2025-01-12" },
+    { id: 13, name: "David", title: "QA Engineer", department: "Business Technology", branch: "New York", startDate: "2025-01-13" },
+    { id: 14, name: "Lisa", title: "UX Researcher", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-14" },
+    { id: 15, name: "James", title: "DevOps Engineer", department: "Business Technology", branch: "Austin", startDate: "2025-01-15" },
+    { id: 16, name: "Anna", title: "Product Designer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-16" },
+    { id: 17, name: "Robert", title: "Backend Engineer", department: "Business Technology", branch: "New York", startDate: "2025-01-17" },
+    { id: 18, name: "Maria", title: "Frontend Developer", department: "Business Technology", branch: "Austin", startDate: "2025-01-18" },
+    { id: 19, name: "William", title: "Tech Lead", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-19" },
+    { id: 20, name: "Jessica", title: "Scrum Master", department: "Business Technology", branch: "New York", startDate: "2025-01-20" },
+    { id: 21, name: "Daniel", title: "Software Architect", department: "Business Technology", branch: "Austin", startDate: "2025-01-21" },
+    { id: 22, name: "Laura", title: "Business Analyst", department: "Customer Development", branch: "Philadelphia", startDate: "2025-01-22" },
+    { id: 23, name: "Chris", title: "Security Engineer", department: "Business Technology", branch: "New York", startDate: "2025-01-23" },
+    { id: 24, name: "Ashley", title: "UX Engineer III", department: "Business Technology", branch: "Austin", startDate: "2025-01-24" },
+    { id: 25, name: "Kevin", title: "Platform Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-25" },
+    { id: 26, name: "Michelle", title: "Content Designer", department: "Business Technology", branch: "New York", startDate: "2025-01-26" },
+  ]
+
+
+const TableWithFilterVariantWithPagination = () => {
+  const [territory, setTerritory] = useState("")
+  // ------Pagination-----
+  const [activePage, setActivePage] = useState(1)
+    // Calculate pagination
+  const itemsPerPage = 20
+  const totalPages = Math.ceil(users.length / itemsPerPage)
+  const startIndex = (activePage - 1) * itemsPerPage
+  const endIndex = startIndex + itemsPerPage
+  const currentData = users.slice(startIndex, endIndex)
+  
+  const onPageChange = (page) => {
+    setActivePage(page)
+  }
+  // ------End Pagination-----
+  
+// -------Filter content example ------
+  const filterContent = ({ closePopover }) => (
+          <>
+            <TextInput
+                label="Territory ID"
+                onChange={event => setTerritory(event.target.value)}
+                value={territory}
+            />
+            <Typeahead
+                label="Title"
+                options={[
+                  { key: "senior-ux-engineer", label: "Senior UX Engineer", value: "senior-ux-engineer" },
+                  { key: "ux-engineer", label: "UX Engineer", value: "ux-engineer" },
+                  { key: "ux-designer", label: "UX Designer", value: "ux-designer" }
+                ]}
+            />
+
+            <Select
+                blankSelection="All Departments"
+                label="Department"
+                options={[
+                  { value: "Business Technology", label: "Business Technology", key: "business-technology" },
+                  { value: "Customer Development", label: "Customer Development", key: "customer-development" },
+                  { value: "Talent Acquisition", label: "Talent Acquisition", key: "talent-acquisition" }
+                ]}
+            />
+
+            <Dropdown
+                label="Branch"
+                options={[
+                  { key: "Philadelphia", label: "Philadelphia", value: "philadelphia" },
+                  { key: "New York", label: "New York", value: "new-york" },
+                  { key: "Austin", label: "Austin", value: "austin" }
+                ]}
+            />
+
+            <DatePicker
+                label="Start Date"
+                paddingY="sm"
+                pickerId="startedOn"
+            />
+            <Flex spacing="between">
+            <Button
+                onClick={() => {
+                  alert("No filtering functionality - just a pattern demo!")
+                  closePopover()
+                }}
+                text="Filter"
+            />
+            <Button
+                text="Defaults"
+                variant="secondary"
+            />
+            </Flex>
+          </>
+        )
+  // -------End Filter content example ------
+
+  // -------Pagination element example ------
+  const paginationElement = (
+    <Pagination
+        current={activePage}
+        key={`pagination-${activePage}`}
+        marginLeft="lg"
+        onChange={onPageChange}
+        paddingY="xs"
+        range={5}
+        total={totalPages}
+    />
+  )
+  // -------End Pagination element example ------
+
+  return (
+    <Table 
+        filterContent={filterContent}
+        filterProps={{
+          results: 50,
+          sortOptions: {
+            territory_id: "Territory ID",
+            first_name: "Name",
+            started_on: "Start Date",
+            department_name: "Department",
+            title_name: "Title",
+            branch_branch_name: "Branch",
+          },
+          sortValue: [{ name: 'started_on', dir: 'asc' }],
+        }}
+        pagination={paginationElement}
+        title="Table Title Here"
+        variant="withFilter"
+    >
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>{'Territory ID'}</Table.Header>
+          <Table.Header>{'Name'}</Table.Header>
+          <Table.Header>{'Title'}</Table.Header>
+          <Table.Header>{'Department'}</Table.Header>
+          <Table.Header>{'Branch'}</Table.Header>
+          <Table.Header textAlign="right">{'Start Date'}</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        {currentData.map((user) => (
+          <Table.Row key={user.id}>
+            <Table.Cell 
+                marginX={{ xs: "sm" }}
+                numberSpacing="tabular"
+            >
+                {user.id}
+            </Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.name}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.title}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.department}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.branch}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>
+              <DateKit 
+                  alignment="right"
+                  showCurrentYear
+                  value={user.startDate}
+              />
+            </Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  )
+}
+
+export default TableWithFilterVariantWithPagination

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

@@ -0,0 +1,3 @@
+The `withFilter` variant can also be used with the Pagination kit as shown here. Simply set up your Pagination as normal, and pass the Pagination kit to the prop `pagination` as shown.
+
+For more information on the Pagination Kit and how to use it, see the documentation [here](https://playbook.powerapp.cloud/kits/pagination/react)

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

@@ -0,0 +1,122 @@
+    <% users = [
+        { id: 1, name: "Jennifer", title: "Associate Scrum Master", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 1) },
+        { id: 2, name: "Nick", title: "UX Engineer II", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 2) },
+        { id: 3, name: "Nida", title: "Senior UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 3) },
+        { id: 4, name: "Justin", title: "Director of User Experience Engineering", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 4) },
+        { id: 5, name: "Edward", title: "UX Designer II", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 5) },
+        { id: 6, name: "Elisa", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 6) },
+        { id: 7, name: "Gary", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 7) },
+        { id: 8, name: "Barkley", title: "Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 8) },
+        { id: 9, name: "Aaron", title: "Associate Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 9) },
+        { id: 10, name: "Sarah", title: "Senior Product Manager", department: "Business Technology", branch: "New York", start_date: Date.new(2025, 1, 10) },
+        { id: 11, name: "Michael", title: "Software Engineer III", department: "Business Technology", branch: "Austin", start_date: Date.new(2025, 1, 11) },
+        { id: 12, name: "Emma", title: "Data Analyst II", department: "Customer Development", branch: "Philadelphia", start_date: Date.new(2025, 1, 12) },
+        { id: 13, name: "David", title: "QA Engineer", department: "Business Technology", branch: "New York", start_date: Date.new(2025, 1, 13) },
+        { id: 14, name: "Lisa", title: "UX Researcher", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 14) },
+        { id: 15, name: "James", title: "DevOps Engineer", department: "Business Technology", branch: "Austin", start_date: Date.new(2025, 1, 15) },
+        { id: 16, name: "Anna", title: "Product Designer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 16) },
+        { id: 17, name: "Robert", title: "Backend Engineer", department: "Business Technology", branch: "New York", start_date: Date.new(2025, 1, 17) },
+        { id: 18, name: "Maria", title: "Frontend Developer", department: "Business Technology", branch: "Austin", start_date: Date.new(2025, 1, 18) },
+        { id: 19, name: "William", title: "Tech Lead", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 19) },
+        { id: 20, name: "Jessica", title: "Scrum Master", department: "Business Technology", branch: "New York", start_date: Date.new(2025, 1, 20) },
+        { id: 21, name: "Daniel", title: "Software Architect", department: "Business Technology", branch: "Austin", start_date: Date.new(2025, 1, 21) },
+        { id: 22, name: "Laura", title: "Business Analyst", department: "Customer Development", branch: "Philadelphia", start_date: Date.new(2025, 1, 22) },
+        { id: 23, name: "Chris", title: "Security Engineer", department: "Business Technology", branch: "New York", start_date: Date.new(2025, 1, 23) },
+        { id: 24, name: "Ashley", title: "UX Engineer III", department: "Business Technology", branch: "Austin", start_date: Date.new(2025, 1, 24) },
+        { id: 25, name: "Kevin", title: "Platform Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 25) },
+        { id: 26, name: "Michelle", title: "Content Designer", department: "Business Technology", branch: "New York", start_date: Date.new(2025, 1, 26) },
+    ] %>
+
+<% filter_content = 
+    pb_rails("text_input", props: {
+      label: "Territory ID",
+      placeholder: "Enter Territory ID"
+    }) +
+    pb_rails("typeahead", props: {
+      label: "Title",
+      options: [
+        { label: "Senior UX Engineer", value: "senior-ux-engineer" },
+        { label: "UX Engineer", value: "ux-engineer" },
+        { label: "UX Designer", value: "ux-designer" }
+      ]
+    }) +
+    pb_rails("select", props: {
+      blank_selection: "All Departments",
+      label: "Department",
+      options: [
+        { value: "Business Technology", text: "Business Technology" },
+        { value: "Customer Development", text: "Customer Development" },
+        { value: "Talent Acquisition", text: "Talent Acquisition" }
+      ]
+    }) +
+    pb_rails("dropdown", props: {
+      label: "Branch",
+      options: [
+        { label: "Philadelphia", value: "philadelphia" },
+        { label: "New York", value: "new-york" },
+        { label: "Austin", value: "austin" }
+      ]
+    }) +
+    pb_rails("date_picker", props: {
+      label: "Start Date",
+      padding_y: "sm",
+      picker_id: "startedOn"
+    }) +
+    pb_rails("flex", props: { spacing: "between" }) do
+      pb_rails("button", props: {
+        text: "Filter",
+      }) +
+      pb_rails("button", props: {
+        text: "Defaults",
+        variant: "secondary"
+      })
+    end
+%>
+
+<%# Replace "model" in pagination here with your specific data source %>
+<% pagination_element = pb_rails("pagination", props: { model: @users, view: self, padding_y:"xs", margin_left:"lg" }) %>
+
+<%= pb_rails("table", props: {
+  variant: "with_filter",
+  title: "Table Title Here",
+  filter_content: filter_content,
+  pagination: pagination_element,
+  filter_props: {
+    id: "user-table-filters-2",
+    results: users.length,
+    sort_menu: [
+        { item: "Start Date", link: "?q[sorts]=started_on+asc", active: true, direction: "asc" },
+        { item: "First Name", link: "?q[sorts]=name+asc", active: false },
+        { item: "Title", link: "?q[sorts]=title+asc", active: false },
+        { item: "Department", link: "?q[sorts]=department+asc", active: false },
+        { item: "Branch", link: "?q[sorts]=branch+asc", active: false },
+        { item: "Territory ID", link: "?q[sorts]=territory_id+asc", active: false },
+    ],
+  }
+}) do %>
+  <%= pb_rails("table/table_head") do %>
+    <%= pb_rails("table/table_row") do %>
+      <%= pb_rails("table/table_header", props: { text: "Territory ID" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Name" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Title" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Department" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Branch" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Start Date", text_align: "right" }) %>
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("table/table_body") do %>
+    <% users.each do |user| %>
+      <%= pb_rails("table/table_row") do %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" }, number_spacing: "tabular" }) { user[:id].to_s } %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:name] } %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:title] } %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:department] } %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:branch] } %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) do %>
+           <%= pb_rails("date", props: {alignment: "right", date: user[:start_date].to_s, show_current_year: true } ) %>        
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,3 @@
+The `with_filter` variant can also be used with the Pagination kit as shown here. Simply set up your Pagination as normal, and pass the Pagination kit to the prop `pagination` as shown.
+
+**IMPORTANT NOTE**: This is NOT a working example of pagination, please set up your use case with the relevant data in your controller. For more information on the Pagination Kit and how to use it, see the documentation [here](https://playbook.powerapp.cloud/kits/pagination/rails)

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

@@ -40,6 +40,8 @@ examples:
     - table_with_selectable_rows: Table with Selectable Rows
     - 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_with_pagination_rails: Variant with Filter and Pagination
 
   react:
     - table_sm: Small
@@ -81,3 +83,5 @@ examples:
     - table_with_selectable_rows: Table with Selectable Rows
     - table_with_header_style_borderless: Header Style Borderless
     - table_with_header_style_floating: Header Style Floating
+    - table_with_filter_variant: Variant with Filter
+    - table_with_filter_variant_with_pagination: Variant with Filter and Pagination

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

@@ -38,3 +38,5 @@ export { default as TableWithSelectableRows } from './_table_with_selectable_row
 export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'
 export { default as TableWithHeaderStyleBorderless } from './_table_with_header_style_borderless.jsx'
 export { default as TableWithHeaderStyleFloating } from './_table_with_header_style_floating.jsx'
+export { default as TableWithFilterVariant } from './_table_with_filter_variant.jsx'
+export { default as TableWithFilterVariantWithPagination } from './_table_with_filter_variant_with_pagination.jsx'

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.md

@@ -1 +1 @@
-Text Input w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
+Text Input w/ Error shows that the input must be filled out (i.e. when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_required_indicator.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("text_input", props: {
+  label: "First Name",
+  placeholder: "Enter first name",
+  id: "text_input_required_indicator",
+  required_indicator: true,
+}) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_required_indicator.jsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+
+import TextInput from '../../pb_text_input/_text_input'
+
+const TextInputDefault = (props) => {
+  const [firstName, setFirstName] = useState('')
+  const handleOnChangeFirstName = ({ target }) => {
+    setFirstName(target.value)
+  }
+
+  return (
+      <TextInput
+          id="text_input_required_indicator"
+          label="First Name"
+          name="firstName"
+          onChange={handleOnChangeFirstName}
+          placeholder="Enter first name"
+          requiredIndicator
+          value={firstName}
+          {...props}
+      />
+  )
+}
+
+export default TextInputDefault

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_required_indicator.md

@@ -0,0 +1,3 @@
+The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation. 
+
+You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop. 

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

@@ -10,6 +10,8 @@ examples:
   - text_input_options: Input Options
   - text_input_mask: Mask
   - text_input_autocomplete: Autocomplete
+  - text_input_required_indicator: Required Indicator
+
   
   react:
   - text_input_default: Default
@@ -22,6 +24,7 @@ examples:
   - text_input_mask: Mask
   - text_input_sanitize: Sanitized Masked Input
   - text_input_autocomplete: Autocomplete
+  - text_input_required_indicator: Required Indicator
 
 
   swift:

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

@@ -8,3 +8,4 @@ export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
 export { default as TextInputMask } from './_text_input_mask.jsx'
 export { default as TextInputSanitize } from './_text_input_sanitize.jsx'
 export { default as TextInputAutocomplete } from './_text_input_autocomplete.jsx'
+export { default as TextInputRequiredIndicator } from './_text_input_required_indicator.jsx'

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.md

@@ -1 +1 @@
-Textarea w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
+Textarea w/ Error shows that the input must be filled out (i.e. when used in a form it signals a user to fix an error).

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

@@ -0,0 +1,2 @@
+<%= pb_rails("time_picker", props: { id: "time-picker-24-hour", label: "24-Hour Format", time_format: "24hour" }) %>
+

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_24_hour.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import TimePicker from '../../pb_time_picker/_time_picker'
+
+const TimePicker24Hour = (props) => (
+  <div>
+    <TimePicker
+        id="time-picker-24-hour"
+        label="24-Hour Format"
+        timeFormat="24hour"
+        {...props}
+    />
+  </div>
+)
+
+export default TimePicker24Hour
+

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

@@ -0,0 +1 @@
+Set `time_format` / `timeFormat` to 24hour to display the time selection dropdown in a 24-hour format.

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

@@ -0,0 +1 @@
+<%= pb_rails("time_picker", props: { id: "time-picker-default" }) %>

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

@@ -0,0 +1,13 @@
+import React from 'react'
+import TimePicker from '../../pb_time_picker/_time_picker'
+
+const TimePickerDefault = (props) => (
+  <div>
+    <TimePicker
+        id="time-picker-default"
+        {...props}
+    />
+  </div>
+)
+
+export default TimePickerDefault

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

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

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

@@ -0,0 +1,4 @@
+<%= pb_rails("time_picker", props: { id: "time-picker-default-time-12hr", default_time: "2:30 PM", label: "12-Hour Format (2:30 PM)" }) %>
+<%= pb_rails("time_picker", props: { id: "time-picker-default-time-24hr", default_time: "14:30", label: "24-Hour Format (14:30)" }) %>
+<%= pb_rails("time_picker", props: { id: "time-picker-default-time-24hr-format", default_time: "14:30", label: "24-Hour Format with timeFormat (14:30)", time_format: "24hour" }) %>
+

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default_time.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import TimePicker from '../../pb_time_picker/_time_picker'
+
+const TimePickerDefaultTime = (props) => (
+  <div>
+    <TimePicker
+        defaultTime="2:30 PM"
+        id="time-picker-default-time-12hr"
+        label="12-Hour Format (2:30 PM)"
+        {...props}
+    />
+    <TimePicker
+        defaultTime="14:30"
+        id="time-picker-default-time-24hr"
+        label="24-Hour Format (14:30)"
+        {...props}
+    />
+    <TimePicker
+        defaultTime="14:30"
+        id="time-picker-default-time-24hr-format"
+        label="24-Hour Format with timeFormat (14:30)"
+        timeFormat="24hour"
+        {...props}
+    />
+  </div>
+)
+
+export default TimePickerDefaultTime
+

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

@@ -0,0 +1 @@
+The `default_time` / `defaultTime` prop sets a default time value and accepts both 12-hour and 24-hour formats.