RubyGems - playbook_ui_docs - Versions diffs - 15.6.0 → 15.7.0.pre.alpha.play263313229 - Mend

playbook_ui_docs 15.6.0 → 15.7.0.pre.alpha.play263313229

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (107) hide show

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible.jsx ADDED Viewed

@@ -0,0 +1,57 @@
+import React, { useState } from 'react'
+import Body from '../../pb_body/_body'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
+import Typeahead from '../../pb_typeahead/_typeahead'
+const DialogOverflowVisible = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const close = () => setIsOpen(false)
+  const open = () => setIsOpen(true)
+  const typeaheadOptions = [
+    { label: "United States", value: "unitedStates", id: "us" },
+    { label: "United Kingdom", value: "unitedKingdom", id: "gb" },
+    { label: "Canada", value: "canada", id: "ca" },
+    { label: "Australia", value: "australia", id: "au" },
+    { label: "Germany", value: "germany", id: "de" },
+    { label: "France", value: "france", id: "fr" },
+    { label: "Japan", value: "japan", id: "jp" },
+    { label: "Brazil", value: "brazil", id: "br" },
+  ]
+  return (
+    <>
+      <Button onClick={open}>{'Open Dialog with Overflow Visible'}</Button>
+      <Dialog
+          onClose={close}
+          opened={isOpen}
+          overflow="visible"
+          size="md"
+      >
+        <Dialog.Header>
+          <Body>{'Select Location'}</Body>
+        </Dialog.Header>
+        <Dialog.Body>
+          <Typeahead
+              options={typeaheadOptions}
+              placeholder="Select a location..."
+          />
+        </Dialog.Body>
+        <Dialog.Footer>
+          <Button onClick={close}>{'Save'}</Button>
+          <Button
+              onClick={close}
+              variant="link"
+          >
+            {'Cancel'}
+          </Button>
+        </Dialog.Footer>
+      </Dialog>
+    </>
+  )
+}
+export default DialogOverflowVisible

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible_rails.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Use the `overflow: "visible"` global prop to allow Typeahead dropdown menus to appear outside the dialog boundaries. By default, dialogs clip content that extends beyond their edges, but this prop enables pop-up elements to render above the dialog overlay.

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible_react.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Use the `overflow="visible"` global prop to allow Date Picker and Typeahead dropdown menus to appear outside the dialog boundaries. By default, dialogs clip content that extends beyond their edges, but this prop enables pop-up elements to render above the dialog overlay.

data/app/pb_kits/playbook/pb_dialog/docs/example.yml CHANGED Viewed

@@ -12,6 +12,8 @@ examples:
   - dialog_full_height_placement: Full Height Placement
   - dialog_loading: Loading
   - dialog_turbo_frames: Within Turbo Frames
+  - dialog_overflow_visible: Overflow Visible
+  - dialog_closeable: Close Button in Header
   react:
@@ -25,6 +27,8 @@ examples:
   - dialog_full_height: Full Height
   - dialog_full_height_placement: Full Height Placement
   - dialog_loading: Loading
+  - dialog_overflow_visible: Overflow Visible
+  - dialog_closeable: Close Button in Header
   swift:
   - dialog_default_swift: Simple

data/app/pb_kits/playbook/pb_dialog/docs/index.js CHANGED Viewed

@@ -8,4 +8,6 @@ export { default as DialogStatus } from './_dialog_status.jsx'
 export { default as DialogStackedAlert } from './_dialog_stacked_alert.jsx'
 export { default as DialogFullHeight } from './_dialog_full_height.jsx'
 export { default as DialogFullHeightPlacement } from './_dialog_full_height_placement.jsx'
-export { default as DialogLoading } from './_dialog_loading.jsx'
+export { default as DialogLoading } from './_dialog_loading.jsx'
+export { default as DialogOverflowVisible } from './_dialog_overflow_visible.jsx'
+export { default as DialogCloseable } from './_dialog_closeable.jsx'

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md CHANGED Viewed

	@@ -1 +1 @@
1	- You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](https://playbook.powerapp.cloud/~~token~~/colors) for reference.
1	+ You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](https://playbook.powerapp.cloud/tokens/colors) for reference.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb CHANGED Viewed

@@ -20,12 +20,14 @@
 %>
-<%= pb_rails("dropdown", props: {options: options}) %>
+<%= pb_rails("dropdown", props: {id: "country-dropdown", options: options}) %>
 <script>
   document.addEventListener("pb:dropdown:selected", (e) => {
-    const option   = e.detail;
-    const dropdown = e.target;
-    console.log("Selected option:", option);
-})
+    if (e.target.id === "country-dropdown") {
+      const option   = e.detail;
+      const dropdown = e.target;
+      console.log("Selected option:", option);
+    }
+  });
 </script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.html.erb ADDED Viewed

@@ -0,0 +1,19 @@
+<%= pb_rails("dropdown", props: {
+  id: "date-range-with-default",
+  label: "Date Range",
+  variant: "quickpick",
+  default_value: "This Year"
+}) %>
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const dropdown = document.getElementById("date-range-with-default");
+    if (dropdown) {
+      dropdown.addEventListener("pb:dropdown:selected", (e) => {
+        const option = e.detail;
+        console.log("Selected option:", option);
+      });
+    }
+  });
+</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_rails.html.erb ADDED Viewed

@@ -0,0 +1,12 @@
+<%= pb_rails("dropdown", props: {id: "date-range-quickpick-1", label: "Date Range", variant: "quickpick"}) %>
+<script>
+  const dropdown = document.getElementById("date-range-quickpick-1");
+  if (dropdown) {
+    dropdown.addEventListener("pb:dropdown:selected", (e) => {
+      const option = e.detail;
+      console.log("Selected option:", option);
+    });
+  }
+</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_rails.md ADDED Viewed

@@ -0,0 +1,26 @@
+The `quickpick` variant provides predefined date based options when `variant:"quickpick"` is used.
+Open the Dropdown above to see the default options.
+The quickpick variant automatically generates hidden inputs for `start_date` and `end_date` which are populated when a date range is selected. These inputs are ready for form submission.
+You can customize the input names and IDs using the following props:
+- `start_date_name` - The name attribute for the start date input (default: `"start_date_name"`)
+- `start_date_id` - The ID attribute for the start date input (default: `"start_date_id"`)
+- `end_date_name` - The name attribute for the end date input (default: `"end_date_name"`)
+- `end_date_id` - The ID attribute for the end date input (default: `"end_date_id"`)
+Example with custom names:
+```ruby
+pb_rails("dropdown", props: {
+  variant: "quickpick",
+  start_date_name: "filter[start_date]",
+  start_date_id: "filter_start_date",
+  end_date_name: "filter[end_date]",
+  end_date_id: "filter_end_date"
+})
+```
+The Dropdown kit also comes with a custom event called "pb:dropdown:selected" which updates dynamically with the selection as it changes. See code snippet to see this in action.
+In addition, a data attribute called data-option-selected with the selection is also rendered on the parent dropdown div.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end_rails.html.erb ADDED Viewed

@@ -0,0 +1,19 @@
+<%= pb_rails("dropdown", props: {
+  id: "date-range-quickpick-end-today",
+  label: "Date Range",
+  variant: "quickpick",
+  range_ends_today: true
+}) %>
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const dropdown = document.getElementById("date-range-quickpick-end-today");
+    if (dropdown) {
+      dropdown.addEventListener("pb:dropdown:selected", (e) => {
+        const option = e.detail;
+        console.log("Selected option:", option);
+      });
+    }
+  });
+</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end_rails.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ The optional `range_ends_today` prop can be used with the `quickpick` variant to set end date on all ranges that start with 'this' to today's date. For instance, by default 'This Year' will set end day to 12/31/(current year), but if `range_ends_today` prop is used, end date on that range will be today's date.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_default_rails.html.erb ADDED Viewed

@@ -0,0 +1,30 @@
+<%= pb_rails("dropdown", props: {
+  id: "dropdown-quickpick-with-date-pickers-default",
+  label: "Date Range",
+  name: "date_range",
+  margin_bottom: "sm",
+  variant: "quickpick",
+  default_value: "This Month",
+  controls_start_id: "start-date-picker-default",
+  controls_end_id: "end-date-picker-default",
+  start_date_id: "quickpick_start_date_default",
+  start_date_name: "start_date",
+  end_date_id: "quickpick_end_date_default",
+  end_date_name: "end_date"
+}) %>
+<%= pb_rails("date_picker", props: {
+  picker_id: "start-date-picker-default",
+  label: "Start Date",
+  name: "start_date_picker",
+  placeholder: "Select Start Date",
+  sync_start_with: "dropdown-quickpick-with-date-pickers-default"
+}) %>
+<%= pb_rails("date_picker", props: {
+  picker_id: "end-date-picker-default",
+  label: "End Date",
+  name: "end_date_picker",
+  placeholder: "Select End Date",
+  sync_end_with: "dropdown-quickpick-with-date-pickers-default"
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_default_rails.md ADDED Viewed

@@ -0,0 +1,3 @@
+This example demonstrates the 3-input pattern with a default value. The dropdown is initialized with "This Month" selected, and both DatePickers are automatically populated with the corresponding start and end dates.
+The default value can be set using the `default_value` prop with any of the quickpick option labels.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_rails.html.erb ADDED Viewed

@@ -0,0 +1,29 @@
+<%= pb_rails("dropdown", props: {
+  id: "dropdown-quickpick-with-date-pickers",
+  label: "Date Range",
+  name: "date_range",
+  margin_bottom: "sm",
+  variant: "quickpick",
+  controls_start_id: "start-date-picker",
+  controls_end_id: "end-date-picker",
+  start_date_id: "quickpick_start_date",
+  start_date_name: "start_date",
+  end_date_id: "quickpick_end_date",
+  end_date_name: "end_date"
+}) %>
+<%= pb_rails("date_picker", props: {
+  picker_id: "start-date-picker",
+  label: "Start Date",
+  name: "start_date_picker",
+  placeholder: "Select Start Date",
+  sync_start_with: "dropdown-quickpick-with-date-pickers"
+}) %>
+<%= pb_rails("date_picker", props: {
+  picker_id: "end-date-picker",
+  label: "End Date",
+  name: "end_date_picker",
+  placeholder: "Select End Date",
+  sync_end_with: "dropdown-quickpick-with-date-pickers"
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_rails.md ADDED Viewed

@@ -0,0 +1,13 @@
+The quickpick variant can be synced with two DatePickers for a 3-input pattern. When a quickpick option is selected from the dropdown, both DatePickers are automatically populated. When either DatePicker is manually changed, the dropdown is cleared.
+#### Props for 3-Input Pattern:
+- `controls_start_id` - ID of the start DatePicker to sync with
+- `controls_end_id` - ID of the end DatePicker to sync with
+#### DatePicker Props:
+- `sync_start_with` - ID of the dropdown to clear when start date changes
+- `sync_end_with` - ID of the dropdown to clear when end date changes
+This pattern allows users to quickly select common date ranges or manually pick specific dates.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb CHANGED Viewed

@@ -47,7 +47,7 @@
 %>
-<%= pb_rails("dropdown", props: {options: options}) do %>
+<%= pb_rails("dropdown", props: {id: "user-dropdown", options: options}) do %>
     <%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Select a User", custom_display: custom_display}) %>
     <%= pb_rails("dropdown/dropdown_container") do %>
         <% options.each do |option| %>
@@ -71,6 +71,8 @@
 <script>
   document.addEventListener("pb:dropdown:selected", (e) => {
+    if (e.target.id !== "user-dropdown") return;
     const option   = e.detail;
     const dropdown = e.target;

data/app/pb_kits/playbook/pb_dropdown/docs/example.yml CHANGED Viewed

@@ -22,6 +22,11 @@ examples:
   - dropdown_multi_select_with_default: Multi Select Default Value
   - dropdown_blank_selection: Blank Selection
   - dropdown_separators_hidden: Separators Hidden
+  - dropdown_quickpick_rails: Quick Pick Variant
+  - dropdown_quickpick_range_end_rails: Quick Pick Variant (Range Ends Today)
+  - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
+  - dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
+  - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
   react:
   - dropdown_default: Default

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb CHANGED Viewed

@@ -116,7 +116,7 @@
   <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true } %>
   <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form-default", tree_data: treeData, margin_bottom: "sm", label: "Example Multi Level Select field" } %>
+  <%= form.time_picker :example_time_picker, props: { label: true } %>
   <%= form.actions do |action| %>
     <%= action.submit %>
     <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb CHANGED Viewed

@@ -117,7 +117,8 @@
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
   <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form", tree_data: treeData, margin_bottom: "sm", required: true, label: "Example Multi Level Select field" } %>
+  <%= form.time_picker :example_time_picker_validation, props: { label: true, required: true, validation_message: "Please select a time." } %>
   <%= form.actions do |action| %>
     <%= action.submit %>
     <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>

data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb ADDED Viewed

@@ -0,0 +1,14 @@
+<%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
+  <%= form.text_field :example_text_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label", required: true, required_indicator: true } %>
+  <%= form.email_field :example_email_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.number_field :example_number_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.search_field :example_search_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.password_field :example_password_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.url_field :example_url_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.actions do |action| %>
+    <%= action.submit %>
+    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.md ADDED Viewed

@@ -0,0 +1,3 @@
+The `required_indicator` prop adds a red asterisk (*) to the input label, visually marking the field as required. This works with both `label: true` for auto-generated labels and `label: "Custom Text"` for custom labels.
+While it's typically used alongside the `required` prop for HTML5 validation, you can use `required_indicator` independently if you're handling validation differently (e.g., client-side or backend validation).

data/app/pb_kits/playbook/pb_form/docs/example.yml CHANGED Viewed

@@ -4,3 +4,4 @@ examples:
   - form_form_with: Default
   - form_form_with_validate: Default + Validation
   - form_form_with_loading: Default + Loading
+  - form_with_required_indicator: With Optional Required Indicator

data/app/pb_kits/playbook/pb_radio/docs/_radio_error.md CHANGED Viewed

	@@ -1 +1 @@
1	- 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).
1	+ Error shows that the radio option must be selected or is invalid (i.e. when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_select/docs/_select_error.md CHANGED Viewed

	@@ -1 +1 @@
1	- Select 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).
1	+ Select w/ Error shows that an option must be selected or is invalid (i.e. when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_select/docs/_select_input_options.html.erb ADDED Viewed

@@ -0,0 +1,16 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Food",
+  name: "favorite_food",
+  options: [
+    { value: "pizza", value_text: "Pizza" },
+    { value: "tacos", value_text: "Tacos" },
+    { value: "sushi", value_text: "Sushi" }
+  ],
+  input_options: {
+    'aria-label': "Select your favorite food",
+    class: "custom-select-class",
+    data: { controller: "search", action: "change->search#filter" },
+    id: "favorite-food-select"
+  }
+}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_input_options.jsx ADDED Viewed

@@ -0,0 +1,30 @@
+import React from 'react'
+import Select from '../_select'
+const SelectInputOptions = (props) => {
+  const options = [
+    { value: 'pizza', text: 'Pizza' },
+    { value: 'tacos', text: 'Tacos' },
+    { value: 'sushi', text: 'Sushi' },
+  ]
+  return (
+    <>
+      <Select
+          inputOptions={{
+            'aria-label': 'Select your favorite food',
+            className: 'custom-select-class',
+            id: 'favorite-food-select',
+          }}
+          label="Favorite Food"
+          name="favorite_food"
+          options={options}
+          {...props}
+      />
+    </>
+  )
+}
+export default SelectInputOptions

data/app/pb_kits/playbook/pb_select/docs/_select_input_options.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Use the `input_options` / `inputOptions` prop to pass additional attributes directly to the underlying `<select>` element instead of the outer wrapper. This is useful for applying data attributes, custom IDs, or other HTML attributes that need to be on the select element itself.

data/app/pb_kits/playbook/pb_select/docs/example.yml CHANGED Viewed

@@ -15,6 +15,7 @@ examples:
   - select_inline_compact: Select Inline Compact
   - select_attributes: Select W/ Attributes
   - select_multiple: Select Multiple
+  - select_input_options: Input Options
@@ -33,6 +34,7 @@ examples:
   - select_inline_compact: Select Inline Compact
   - select_multiple: Select Multiple
   - select_react_hook: React Hook
+  - select_input_options: Input Options
   swift:
   - select_default_swift: Default

data/app/pb_kits/playbook/pb_select/docs/index.js CHANGED Viewed

@@ -12,3 +12,4 @@ export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
 export { default as SelectMultiple } from './_select_multiple.jsx'
 export { default as SelectReactHook } from './_select_react_hook.jsx'
 export { default as SelectCustomSelectSubheaders } from './_select_custom_select_subheaders.jsx'
+export { default as SelectInputOptions } from './_select_input_options.jsx'

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant.jsx ADDED Viewed

@@ -0,0 +1,134 @@
+import React, { useState } from "react"
+import { Button, Date as DateKit, DatePicker, Dropdown, Select, Table, TextInput, Typeahead, Flex } from "playbook-ui"
+ // Mock Data for Table
+  const users = [
+    { id: 1, name: "Jennifer", title: "Associate Scrum Master", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-01" },
+    { id: 2, name: "Nick", title: "UX Engineer II", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-02" },
+    { id: 3, name: "Nida", title: "Senior UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-03" },
+    { id: 4, name: "Justin", title: "Director of User Experience Engineering", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-04" },
+    { id: 5, name: "Edward", title: "UX Designer II", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-05" },
+    { id: 6, name: "Elisa", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-06" },
+    { id: 7, name: "Gary", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-07" },
+    { id: 8, name: "Barkley", title: "Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-08" },
+    { id: 9, name: "Aaron", title: "Associate Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-09" },
+  ]
+const TableWithFilterVariant = () => {
+  const [territory, setTerritory] = useState("")
+  // --------Filter content example ------
+  const filterContent = ({ closePopover }) => (
+          <>
+            <TextInput
+                label="Territory ID"
+                onChange={event => setTerritory(event.target.value)}
+                value={territory}
+            />
+            <Typeahead
+                label="Title"
+                options={[
+                  { key: "senior-ux-engineer", label: "Senior UX Engineer", value: "senior-ux-engineer" },
+                  { key: "ux-engineer", label: "UX Engineer", value: "ux-engineer" },
+                  { key: "ux-designer", label: "UX Designer", value: "ux-designer" }
+                ]}
+            />
+            <Select
+                blankSelection="All Departments"
+                label="Department"
+                options={[
+                  { value: "Business Technology", label: "Business Technology", key: "business-technology" },
+                  { value: "Customer Development", label: "Customer Development", key: "customer-development" },
+                  { value: "Talent Acquisition", label: "Talent Acquisition", key: "talent-acquisition" }
+                ]}
+            />
+            <Dropdown
+                label="Branch"
+                options={[
+                  { key: "Philadelphia", label: "Philadelphia", value: "philadelphia" },
+                  { key: "New York", label: "New York", value: "new-york" },
+                  { key: "Austin", label: "Austin", value: "austin" }
+                ]}
+            />
+            <DatePicker
+                label="Start Date"
+                paddingY="sm"
+                pickerId="startedOn"
+            />
+            <Flex spacing="between">
+            <Button
+                onClick={() => {
+                  alert("No filtering functionality - just a pattern demo!")
+                  closePopover()
+                }}
+                text="Filter"
+            />
+            <Button
+                text="Defaults"
+                variant="secondary"
+            />
+            </Flex>
+          </>
+        )
+  // -------End Filter content example ------
+  return (
+    <Table
+        filterContent={filterContent}
+        filterProps={{
+          results: 50,
+          sortOptions: {
+            territory_id: "Territory ID",
+            first_name: "Name",
+            started_on: "Start Date",
+            department_name: "Department",
+            title_name: "Title",
+            branch_branch_name: "Branch",
+          },
+          sortValue: [{ name: 'started_on', dir: 'asc' }],
+        }}
+        title="Table Title Here"
+        variant="withFilter"
+    >
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>{'Territory ID'}</Table.Header>
+          <Table.Header>{'Name'}</Table.Header>
+          <Table.Header>{'Title'}</Table.Header>
+          <Table.Header>{'Department'}</Table.Header>
+          <Table.Header>{'Branch'}</Table.Header>
+          <Table.Header textAlign="right">{'Start Date'}</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        {users.map((user) => (
+          <Table.Row key={user.id}>
+            <Table.Cell
+                marginX={{ xs: "sm" }}
+                numberSpacing="tabular"
+            >
+                {user.id}
+            </Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.name}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.title}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.department}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.branch}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>
+              <DateKit
+                  alignment="right"
+                  showCurrentYear
+                  value={user.startDate}
+              />
+            </Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  )
+}
+export default TableWithFilterVariant

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant.md ADDED Viewed

@@ -0,0 +1,34 @@
+Set the `variant` prop to `withFilter` 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="withFilter"`: Enables the filter variant
+- `filterContent`: A function that receives `{ closePopover }` and returns the filter's body content (inputs, buttons, etc.). Use this to pass in all input kits, etc needed inside the Filter itself.
+- `filterProps`: An object containing Filter-specific props like `results`, `sortOptions`, `sortValue`, 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
+- All standard Filter props 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 `filterProps`):
+- `background={false}`
+- `maxHeight="50vh"`
+- `minWidth="xs"`
+- `popoverProps={{ 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 demonstrated in our Table Filter Card Building Block [here](https://playbook.powerapp.cloud/building_blocks/table_filter_card/react).