playbook_ui 15.6.0.pre.alpha.play265012993 → 15.6.0.pre.alpha.play266913088

data/app/pb_kits/playbook/pb_dropdown/quickpick_helper.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDropdown
+    module QuickpickHelper
+      class << self
+        def get_quickpick_options(range_ends_today: false)
+          today = Date.today
+          yesterday = today - 1.day
+
+          this_week_start_date = first_day_of_week(today)
+          this_week_end_date = range_ends_today ? today : last_day_of_week(today)
+          last_week_start_date = previous_week_start_date(today)
+          last_week_end_date = previous_week_end_date(today)
+
+          this_month_start_date = today.beginning_of_month
+          this_month_end_date = range_ends_today ? today : today.end_of_month
+          last_month_start_date = (today - 1.month).beginning_of_month
+          last_month_end_date = (today - 1.month).end_of_month
+
+          this_quarter_start_date = today.beginning_of_quarter
+          this_quarter_end_date = range_ends_today ? today : today.end_of_quarter
+          last_quarter_start_date = (today - 3.months).beginning_of_quarter
+          last_quarter_end_date = (today - 3.months).end_of_quarter
+
+          this_year_start_date = today.beginning_of_year
+          this_year_end_date = range_ends_today ? today : today.end_of_year
+          last_year_start_date = (today - 1.year).beginning_of_year
+          last_year_end_date = (today - 1.year).end_of_year
+
+          [
+            { id: "quickpick-today", label: "Today", value: [today.to_s, today.to_s], formatted_start_date: format_date(today), formatted_end_date: format_date(today) },
+            { id: "quickpick-yesterday", label: "Yesterday", value: [yesterday.to_s, yesterday.to_s], formatted_start_date: format_date(yesterday), formatted_end_date: format_date(yesterday) },
+            { id: "quickpick-this-week", label: "This Week", value: [this_week_start_date.to_s, this_week_end_date.to_s], formatted_start_date: format_date(this_week_start_date), formatted_end_date: format_date(this_week_end_date) },
+            { id: "quickpick-this-month", label: "This Month", value: [this_month_start_date.to_s, this_month_end_date.to_s], formatted_start_date: format_date(this_month_start_date), formatted_end_date: format_date(this_month_end_date) },
+            { id: "quickpick-this-quarter", label: "This Quarter", value: [this_quarter_start_date.to_s, this_quarter_end_date.to_s], formatted_start_date: format_date(this_quarter_start_date), formatted_end_date: format_date(this_quarter_end_date) },
+            { id: "quickpick-this-year", label: "This Year", value: [this_year_start_date.to_s, this_year_end_date.to_s], formatted_start_date: format_date(this_year_start_date), formatted_end_date: format_date(this_year_end_date) },
+            { id: "quickpick-last-week", label: "Last Week", value: [last_week_start_date.to_s, last_week_end_date.to_s], formatted_start_date: format_date(last_week_start_date), formatted_end_date: format_date(last_week_end_date) },
+            { id: "quickpick-last-month", label: "Last Month", value: [last_month_start_date.to_s, last_month_end_date.to_s], formatted_start_date: format_date(last_month_start_date), formatted_end_date: format_date(last_month_end_date) },
+            { id: "quickpick-last-quarter", label: "Last Quarter", value: [last_quarter_start_date.to_s, last_quarter_end_date.to_s], formatted_start_date: format_date(last_quarter_start_date), formatted_end_date: format_date(last_quarter_end_date) },
+            { id: "quickpick-last-year", label: "Last Year", value: [last_year_start_date.to_s, last_year_end_date.to_s], formatted_start_date: format_date(last_year_start_date), formatted_end_date: format_date(last_year_end_date) },
+          ]
+        end
+
+      private
+
+        def format_date(date)
+          date.strftime("%m/%d/%Y")
+        end
+
+        def format_date_range(start_date, end_date)
+          "#{format_date(start_date)} - #{format_date(end_date)}"
+        end
+
+        def first_day_of_week(date)
+          # Monday as first day of week
+          date.beginning_of_week(:monday)
+        end
+
+        def last_day_of_week(date)
+          # Sunday as last day of week
+          date.end_of_week(:monday)
+        end
+
+        def previous_week_start_date(date)
+          first_day_of_week(date) - 1.week
+        end
+
+        def previous_week_end_date(date)
+          last_day_of_week(date) - 1.week
+        end
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.tsx

@@ -6,10 +6,10 @@ import { GlobalProps, globalProps } from '../../utilities/globalProps'
 import Card from '../../pb_card/_card'
 
 export type FilterBackgroundProps = {
-  background: boolean,
-  className: string,
+  background?: boolean,
+  className?: string,
   children?: React.ReactChild[] | React.ReactChild,
-  dark: boolean,
+  dark?: boolean,
 } & GlobalProps
 
 const FilterBackground = (props: FilterBackgroundProps): React.ReactElement => {

data/app/pb_kits/playbook/pb_legend/_legend.tsx

@@ -1,9 +1,8 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
-import { deprecatedKitWarning } from '../utilities/deprecated'
 
 import Body from '../pb_body/_body'
 import Title from '../pb_title/_title'
@@ -33,10 +32,6 @@ const Legend = (props: LegendProps) => {
     text,
   } = props
 
-  useEffect(() => {
-    deprecatedKitWarning('Legend')
-  }, [])
-
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)

data/app/pb_kits/playbook/pb_legend/legend.html.erb

@@ -1,4 +1,3 @@
-<%== deprecated_kit_warning('Legend') %>
 <%= pb_content_tag do %>
   <%= pb_rails("body", props: {color: object.body_color}) do %>
     <span style="<%= object.custom_color %>" class=<%= object.custom_color_class %>></span>

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