playbook_ui 15.6.0.pre.alpha.play2552collapsibleiconrefactor12903 → 15.6.0.pre.alpha.play261013050

data/app/pb_kits/playbook/pb_select/_select.tsx

@@ -29,6 +29,7 @@ type SelectProps = {
   id?: string,
   includeBlank?: string,
   inline?: boolean,
+  inputOptions?: {[key: string]: string | number | boolean | (() => void)},
   label?: string,
   margin: string,
   marginBottom: string,
@@ -63,6 +64,7 @@ const Select = ({
   label,
   htmlOptions = {},
   inline = false,
+  inputOptions = {},
   multiple = false,
   name,
   onChange = () => undefined,
@@ -94,14 +96,17 @@ const Select = ({
   const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
+  const selectId = (inputOptions?.id as string) || name
+
   const selectBody =(() =>{
     if (children) return children
     return (
       <select
           {...htmlOptions}
           {...domSafeProps(props)}
+          {...inputOptions}
           disabled={disabled}
-          id={name}
+          id={selectId}
           multiple={multiple}
           name={name}
           onChange={onChange}
@@ -125,7 +130,7 @@ const Select = ({
       {label &&
         <label
             className="pb_select_kit_label"
-            htmlFor={name}
+            htmlFor={selectId}
         >
           <Caption 
               dark={props.dark}
@@ -135,7 +140,7 @@ const Select = ({
       }
       <label
           className={selectWrapperClass}
-          htmlFor={name}
+          htmlFor={selectId}
       >
         {selectBody}
         { multiple !== true ?

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

@@ -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).
+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

@@ -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

@@ -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

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

@@ -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

@@ -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_select/select.html.erb

@@ -2,11 +2,11 @@
   id: nil,
   class: object.classnames ) do %>
   <% if object.label %>
-    <label class="pb_select_kit_label" for="<%= object.name %>">
+    <label class="pb_select_kit_label" for="<%= object.input_options[:id] || object.name %>">
       <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
     </label>
   <% end %>
-  <label class="<%= object.select_wrapper_class %>" for="<%= object.name %>">
+  <label class="<%= object.select_wrapper_class %>" for="<%= object.input_options[:id] || object.name %>">
     <% if content.present? %>
       <%= content %>
       <%= pb_rails("body", props: { status: "negative", text: object.error }) %>

data/app/pb_kits/playbook/pb_select/select.rb

@@ -14,6 +14,8 @@ module Playbook
       prop :error
       prop :include_blank
       prop :inline, type: Playbook::Props::Boolean, default: false
+      prop :input_options, type: Playbook::Props::HashProp,
+                           default: {}
       prop :label
       prop :multiple, type: Playbook::Props::Boolean, default: false
       prop :name
@@ -38,7 +40,7 @@ module Playbook
           multiple: multiple,
           onchange: onchange,
           include_blank: include_blank,
-        }.merge(attributes)
+        }.merge(attributes).merge(input_options)
       end
 
       def classname

data/app/pb_kits/playbook/pb_select/select.test.js

@@ -65,4 +65,27 @@ test('returns multiple variant', () => {
   const selectElement = kit.querySelector('select');
 
   expect(selectElement).toHaveAttribute('multiple', '');
+});
+
+test('inputOptions are passed to select element', () => {
+  render(
+    <Select
+        data={{ testid: testId }}
+        inputOptions={{
+          id: 'custom-select-id',
+          className: 'custom-select-class',
+          'aria-label': 'Custom aria label',
+        }}
+        label="Favorite Food"
+        name="food"
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const selectElement = kit.querySelector('select')
+
+  expect(selectElement).toHaveAttribute('id', 'custom-select-id')
+  expect(selectElement).toHaveClass('custom-select-class')
+  expect(selectElement).toHaveAttribute('aria-label', 'Custom aria label')
 });

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -10,6 +10,11 @@ import {
     TableCell,
 } from "./subcomponents";
 import { addDataTitle } from './utilities/addDataTitle'
+import Card from '../pb_card/_card'
+import Flex from '../pb_flex/_flex'
+import Title from '../pb_title/_title'
+import SectionSeparator from '../pb_section_separator/_section_separator'
+import Filter from '../pb_filter/_filter'
 
 type TableProps = {
     aria?: { [key: string]: string },
@@ -21,10 +26,13 @@ type TableProps = {
     data?: { [key: string]: string },
     dataTable: boolean,
     disableHover?: boolean,
+    filterProps?: { [key: string]: any },
+    filterContent?: any,
     headerStyle?: "default" | "borderless" | "floating"
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string,
     outerPadding?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
+    pagination?: React.ReactElement,
     responsive?: "collapse" | "scroll" | "none",
     singleLine?: boolean,
     size?: "sm" | "md" | "lg",
@@ -33,24 +41,32 @@ type TableProps = {
     stickyRightColumn?: string[],
     striped?: boolean,
     tag?: "table" | "div",
+    title?: string,
+    variant?: "default" | "withFilter",
     verticalBorder?: boolean,
 } & GlobalProps
 
+type AllSizes = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "auto" | "initial" | "inherit"
+
 const Table = (props: TableProps): React.ReactElement => {
     const {
         aria = {},
+        variant = 'default',
         children,
         className,
-        collapse = 'sm',
+        collapse = variant === 'withFilter' ? 'md' : 'sm',
         container = true,
         dark,
         data = {},
         dataTable = false,
         disableHover = false,
+        filterProps = {},
+        filterContent,
         headerStyle = "default",
         htmlOptions = {},
         id,
         outerPadding = '',
+        pagination,
         responsive = 'collapse',
         singleLine = false,
         size = 'sm',
@@ -59,6 +75,7 @@ const Table = (props: TableProps): React.ReactElement => {
         stickyRightColumn= [],
         striped = false,
         tag = 'table',
+        title,
         verticalBorder = false,
     } = props
 
@@ -73,12 +90,15 @@ const Table = (props: TableProps): React.ReactElement => {
     const dynamicInlineProps = globalInlineProps(props)
     const stickyRightColumnReversed = stickyRightColumn.reverse()
 
+    const isFilterVariant = variant === 'withFilter'
+    const effectiveContainer = isFilterVariant ? false : container
+
     const classNames = classnames(
         'pb_table',
         `table-${size}`,
         `table-responsive-${responsive}`,
         {
-            'table-card': container,
+            'table-card': effectiveContainer,
             'table-dark': dark,
             'data_table': dataTable,
             'single-line': singleLine,
@@ -205,36 +225,70 @@ const Table = (props: TableProps): React.ReactElement => {
         addDataTitle()
     }, [])
 
-    return (
-        <>
-            {responsive === 'scroll' ? (
-                <div className='table-responsive-scroll'>
-                    {isTableTag ? (
-                        <table
-                            {...ariaProps}
-                            {...dataProps}
-                            {...htmlProps}
-                            className={classNames}
-                            id={id}
-                            style={dynamicInlineProps}
-                        >
-                            {children}
-                        </table>
-                    ) : (
-                        <div
-                            {...ariaProps}
-                            {...dataProps}
-                            {...htmlProps}
-                            className={classNames}
-                            id={id}
-                            style={dynamicInlineProps}
-                        >
-                            {children}
-                        </div>
-                    )}
-                </div>
+// ------------ Default Table (non-filter variant rendering) ------------
+    const renderTable = () => {
+        const tableElement = responsive === 'scroll' ? (
+            <div className='table-responsive-scroll'>
+                {isTableTag ? (
+                    <table
+                        {...ariaProps}
+                        {...dataProps}
+                        {...htmlProps}
+                        className={classNames}
+                        id={id}
+                        style={dynamicInlineProps}
+                    >
+                        {children}
+                    </table>
+                ) : (
+                    <div
+                        {...ariaProps}
+                        {...dataProps}
+                        {...htmlProps}
+                        className={classNames}
+                        id={id}
+                        style={dynamicInlineProps}
+                    >
+                        {children}
+                    </div>
+                )}
+            </div>
+        ) : (
+            isTableTag ? (
+                <table
+                    {...ariaProps}
+                    {...dataProps}
+                    {...htmlProps}
+                    className={classNames}
+                    id={id}
+                    style={dynamicInlineProps}
+                >
+                    {children}
+                </table>
             ) : (
-                isTableTag ? (
+                <div
+                    {...ariaProps}
+                    {...dataProps}
+                    {...htmlProps}
+                    className={classNames}
+                    id={id}
+                    style={dynamicInlineProps}
+                >
+                    {children}
+                </div>
+            )
+        )
+
+        return tableElement
+    }
+// ------------ End Default Table (non-filter variant rendering) ------------
+
+// ------------ variant = 'withFilter' rendering  ------------
+    const renderCardVariant = () => {
+        // Render table element
+        const tableElement = responsive === 'scroll' ? (
+            <div className='table-responsive-scroll'>
+                {isTableTag ? (
                     <table
                         {...ariaProps}
                         {...dataProps}
@@ -256,8 +310,108 @@ const Table = (props: TableProps): React.ReactElement => {
                     >
                         {children}
                     </div>
-                )
-            )}
+                )}
+            </div>
+        ) : (
+            isTableTag ? (
+                <table
+                    {...ariaProps}
+                    {...dataProps}
+                    {...htmlProps}
+                    className={classNames}
+                    id={id}
+                    style={dynamicInlineProps}
+                >
+                    {children}
+                </table>
+            ) : (
+                <div
+                    {...ariaProps}
+                    {...dataProps}
+                    {...htmlProps}
+                    className={classNames}
+                    id={id}
+                    style={dynamicInlineProps}
+                >
+                    {children}
+                </div>
+            )
+        )
+
+        // Default filter props that CAN be overridden (All props from Filter kit CAN be used, but these are the ones we set as defaults)
+        const defaultFilterProps = {
+            background: false,
+            maxHeight: "50vh",
+            minWidth: "xs",
+            popoverProps: { width: "350px" },
+        }
+
+        // Merge default props with user-provided props (user props override defaults)
+        const mergedFilterProps = { ...defaultFilterProps, ...filterProps }
+
+        return (
+            <>
+                {title && (
+                    <Title         
+                        paddingLeft={{
+                            xs: "sm",
+                            sm: "sm",
+                            md: "xl",
+                            lg: "xl",
+                            xl: "xl",
+                            default: "xl",
+                        } as any}
+                        paddingY="md"
+                        size={3}
+                        text={title} 
+                    />
+                )}
+                <Card
+                    marginX={{
+                        xs: "sm",
+                        sm: "sm",
+                        md: "xl",
+                        lg: "xl",
+                        xl: "xl",
+                        default: "xl",
+                    } as any}
+                    padding="none"
+                >
+                    <Flex
+                        align="stretch"
+                        flexDirection="column"
+                        gap="none"
+                    >
+                        {filterContent && (
+                            <Filter {...mergedFilterProps}>
+                                {filterContent}
+                            </Filter>
+                        )}
+                        {filterContent && <SectionSeparator />}
+                        {pagination && (
+                            <>
+                                {pagination}
+                                <SectionSeparator />
+                            </>
+                        )}
+                        {tableElement}
+                        {pagination && (
+                            <>
+                                {pagination}
+                            </>
+                        )}
+                    </Flex>
+                </Card>
+            </>
+        )
+    }
+// ------------ End variant = 'withFilter' rendering  ------------
+
+
+
+    return (
+        <>
+            {isFilterVariant ? renderCardVariant() : renderTable()}
         </>
     )
 }

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

@@ -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

@@ -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).