playbook_ui 15.6.0.pre.alpha.play266913088 → 15.6.0.pre.rc.0

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

@@ -10,11 +10,6 @@ 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 },
@@ -26,13 +21,10 @@ 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",
@@ -41,32 +33,24 @@ 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 = variant === 'withFilter' ? 'md' : 'sm',
+        collapse = 'sm',
         container = true,
         dark,
         data = {},
         dataTable = false,
         disableHover = false,
-        filterProps = {},
-        filterContent,
         headerStyle = "default",
         htmlOptions = {},
         id,
         outerPadding = '',
-        pagination,
         responsive = 'collapse',
         singleLine = false,
         size = 'sm',
@@ -75,7 +59,6 @@ const Table = (props: TableProps): React.ReactElement => {
         stickyRightColumn= [],
         striped = false,
         tag = 'table',
-        title,
         verticalBorder = false,
     } = props
 
@@ -90,15 +73,12 @@ 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': effectiveContainer,
+            'table-card': container,
             'table-dark': dark,
             'data_table': dataTable,
             'single-line': singleLine,
@@ -225,70 +205,36 @@ const Table = (props: TableProps): React.ReactElement => {
         addDataTitle()
     }, [])
 
-// ------------ 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>
-            ) : (
-                <div
-                    {...ariaProps}
-                    {...dataProps}
-                    {...htmlProps}
-                    className={classNames}
-                    id={id}
-                    style={dynamicInlineProps}
-                >
-                    {children}
+    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>
-            )
-        )
-
-        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 ? (
+            ) : (
+                isTableTag ? (
                     <table
                         {...ariaProps}
                         {...dataProps}
@@ -310,108 +256,8 @@ 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/example.yml

@@ -40,8 +40,6 @@ 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
@@ -83,5 +81,3 @@ 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,5 +38,3 @@ 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_table/table.html.erb

@@ -1,73 +1,17 @@
-<%# ------------ variant = 'withFilter' rendering  ------------ %>
-<% if object.with_filter_variant? %>
-  <%= pb_rails("title", props: {
-    padding_left: { xs: "sm", sm: "sm", md: "xl", lg: "xl", xl: "xl", default: "xl" },
-    padding_y: "md",
-    size: 3,
-    text: object.title
-  }) if object.title.present? %>
-  <%= pb_rails("card", props: {
-    margin_x: { xs: "sm", sm: "sm", md: "xl", lg: "xl", xl: "xl", default: "xl" },
-    padding: "none"
-  }) do %>
-    <%= pb_rails("flex", props: {
-      align: "stretch",
-      flex_direction: "column",
-      gap: "none"
-    }) do %>
-      <% if object.filter_content.present? %>
-        <%
-          default_filter_props = {
-            background: false,
-            max_height: "50vh",
-            min_width: "xs",
-            popover_props: { width: "350px" },
-            template: 'single'
-          }
-          merged_filter_props = default_filter_props.merge(object.filter_props)
-        %>
-        <%= pb_rails("filter", props: merged_filter_props) do %>
-          <%= object.filter_content %>
-        <% end %>
-      <% end %>
-      <%= pb_rails("section_separator") if object.filter_content.present? %>
-      <% if object.pagination.present? %>
-        <%= object.pagination %>
-        <%= pb_rails("section_separator") %>
-      <% end %>
-      <% if object.tag == "table" %>
-        <%= pb_content_tag(:table) do %>
-          <%= content.presence %>
-        <% end %>
-      <% else %>
-        <%= pb_content_tag do %>
-          <%= content.presence %>
-        <% end %>
-      <% end %>
-      <% if object.pagination.present? %>
-        <%= object.pagination %>
-      <% end %>
-    <% end %>
-  <% end %>
-<%# ------------ End variant = 'withFilter' rendering  ------------ %>
+<% if object.responsive_classname %>
+  <% responsive_class = object.responsive_classname %>
 <% else %>
-  <%# ------------ Default Table (non-filter variant rendering)  ------------ %>
-  <% if object.responsive_classname %>
-    <% responsive_class = object.responsive_classname %>
-  <% else %>
-    <% responsive_class = nil %>
-  <% end %>
+  <% responsive_class = nil %>
+<% end %>
 
-  <%= content_tag(:div, class: responsive_class, 'data-pb-table-wrapper' => true) do %>
-    <% if object.tag == "table" %>
-      <%= pb_content_tag(:table) do %>
-        <%= content.presence %>
-      <% end %>
-    <% else %>
-      <%= pb_content_tag do %>
-        <%= content.presence %>
-      <% end %>
+<%= content_tag(:div, class: responsive_class, 'data-pb-table-wrapper' => true) do %>
+  <% if object.tag == "table" %>
+    <%= pb_content_tag(:table) do %>
+      <%= content.presence %>
+    <% end %>
+  <% else %>
+    <%= pb_content_tag do %>
+      <%= content.presence %>
     <% end %>
   <% end %>
-  <%# ------------ End Default Table (non-filter variant rendering)  ------------ %>
 <% end %>

data/app/pb_kits/playbook/pb_table/table.rb

@@ -40,23 +40,10 @@ module Playbook
       prop :header_style, type: Playbook::Props::Enum,
                           values: %w[default borderless floating],
                           default: "default"
-      prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default with_filter],
-                     default: "default"
-      prop :filter_props, type: Playbook::Props::HashProp,
-                          default: {}
-      prop :filter_content
-      prop :pagination
-      prop :title, type: Playbook::Props::String,
-                   default: nil
-
-      def size_class
-        variant === "with_filter" && size == "md" ? "sm" : size
-      end
 
       def classname
         generate_classname(
-          "pb_table", "table-#{size_class}", single_line_class, dark_class,
+          "pb_table", "table-#{size}", single_line_class, dark_class,
           disable_hover_class, container_class, data_table_class, sticky_class, sticky_left_column_class,
           sticky_right_column_class, collapse_class, vertical_border_class, striped_class, outer_padding_class,
           "table-responsive-#{responsive}", header_style_class, separator: " "
@@ -67,10 +54,6 @@ module Playbook
         responsive ? "table-responsive-#{responsive}" : nil
       end
 
-      def with_filter_variant?
-        variant == "with_filter"
-      end
-
     private
 
       def dark_class
@@ -90,13 +73,11 @@ module Playbook
       end
 
       def container_class
-        effective_container = variant == "with_filter" ? false : container
-        effective_container ? "table-card" : nil
+        container ? "table-card" : nil
       end
 
       def collapse_class
-        effective_collapse = variant == "with_filter" && collapse == "sm" ? "md" : collapse
-        responsive != "none" ? "table-collapse-#{effective_collapse}" : ""
+        responsive != "none" ? "table-collapse-#{collapse}" : ""
       end
 
       def sticky_class

data/app/pb_kits/playbook/pb_table/table.test.js

@@ -184,146 +184,3 @@ test("when headerStyle is floating", () => {
   const kit = renderKit(Table, props, { headerStyle: "floating" })
   expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card header-floating table-collapse-sm")
 })
-
-test("renders withFilter variant with Card wrapper", () => {
-  const { container } = render(
-    <Table
-        data={{testid: "table-with-filter"}}
-        filterContent={<div>{"Mock Filter"}</div>}
-        title="Test Table"
-        variant="withFilter"
-    >
-      <Table.Head>
-        <Table.Row>
-          <Table.Header>{"Column 1"}</Table.Header>
-        </Table.Row>
-      </Table.Head>
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>{"Value 1"}</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-
-  const card = container.querySelector('.pb_card_kit')
-  expect(card).toBeInTheDocument()
-  const filter = container.querySelector('.pb_filter_kit')
-  expect(filter).toBeInTheDocument()
-})
-
-test("renders title when provided with withFilter variant", () => {
-  render(
-    <Table
-        filterContent={<div>{"Mock Filter"}</div>}
-        title="Test Title"
-        variant="withFilter"
-    >
-      <Table.Head>
-        <Table.Row>
-          <Table.Header>{"Column 1"}</Table.Header>
-        </Table.Row>
-      </Table.Head>
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>{"Value 1"}</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-
-  expect(screen.getByText("Test Title")).toBeInTheDocument()
-})
-
-test("renders filter component in withFilter variant", () => {
-  const { container } = render(
-    <Table
-        filterContent={<div data-testid="test-filter">{"Filter inputs"}</div>}
-        variant="withFilter"
-    >
-      <Table.Head>
-        <Table.Row>
-          <Table.Header>{"Column 1"}</Table.Header>
-        </Table.Row>
-      </Table.Head>
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>{"Value 1"}</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-
-  const filter = container.querySelector('.pb_filter_kit')
-  expect(filter).toBeInTheDocument()
-})
-
-test("renders SectionSeparator between filter and table in withFilter variant", () => {
-  const { container } = render(
-    <Table
-        filterContent={<div>{"Filter content"}</div>}
-        variant="withFilter"
-    >
-      <Table.Head>
-        <Table.Row>
-          <Table.Header>{"Column 1"}</Table.Header>
-        </Table.Row>
-      </Table.Head>
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>{"Value 1"}</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-
-  const separator = container.querySelector('.pb_section_separator_kit')
-  expect(separator).toBeInTheDocument()
-})
-
-test("does not render title when not provided with withFilter variant", () => {
-  const { container } = render(
-    <Table
-        filterContent={<div>{"Filter content"}</div>}
-        variant="withFilter"
-    >
-      <Table.Head>
-        <Table.Row>
-          <Table.Header>{"Column 1"}</Table.Header>
-        </Table.Row>
-      </Table.Head>
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>{"Value 1"}</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-
-  const title = container.querySelector('.pb_title_kit')
-  expect(title).not.toBeInTheDocument()
-})
-
-test("renders default variant without Card wrapper", () => {
-  render(
-    <Table
-        data={{testid: "default-table"}}
-        variant="default"
-    >
-      <Table.Head>
-        <Table.Row>
-          <Table.Header>{"Column 1"}</Table.Header>
-        </Table.Row>
-      </Table.Head>
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>{"Value 1"}</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-
-  const table = screen.getByTestId("default-table")
-  expect(table).toBeInTheDocument()
-  expect(table.closest('.pb_card_kit')).not.toBeInTheDocument()
-})

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

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

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

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

data/app/pb_kits/playbook/pb_timeline/_item.tsx

@@ -18,7 +18,6 @@ type ItemProps = {
   icon?: string,
   iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
   lineStyle?: 'solid' | 'dotted',
-  showCurrentYear?: boolean,
 } & GlobalProps
 
 function isElementOfType<P>(
@@ -36,7 +35,6 @@ const TimelineItem = ({
   icon = 'user',
   iconColor = 'default',
   lineStyle = 'solid',
-  showCurrentYear = false,
   ...props
 }: ItemProps): React.ReactElement => {
   const timelineItemCss = buildCss('pb_timeline_item_kit', lineStyle)
@@ -75,7 +73,6 @@ const TimelineItem = ({
               <DateStacked
                   align="center"
                   date={date}
-                  showCurrentYear={showCurrentYear}
                   size="sm"
               />
             )}

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md

@@ -1 +1 @@
-Use the optional `showDate` prop to render the timeline kit with a visible date. By default, if the date is from the current year, the year will not be displayed; however, if the date is NOT from the current year, the kit will display the year as well.
+Use the optional `showDate` prop to render the timeline kit with a visible date. If the date is from the current year, the year will not be displayed, however if date is NOT from the current year, the kit will display the year as well.

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

@@ -5,7 +5,6 @@ examples:
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
-  - timeline_show_current_year: Show Current Year
   - timeline_with_gap: With Gap
 
 
@@ -14,5 +13,4 @@ examples:
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
-  - timeline_show_current_year: Show Current Year
   - timeline_with_gap: With Gap

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

@@ -3,5 +3,4 @@ export { default as TimelineVertical } from './_timeline_vertical.jsx'
 export { default as TimelineWithDate } from './_timeline_with_date.jsx'
 export { default as TimelineWithChildren } from './_timeline_with_children.jsx'
 export { default as TimelineWithGap } from './_timeline_with_gap.jsx'
-export { default as TimelineShowCurrentYear } from './_timeline_show_current_year.jsx'
 

data/app/pb_kits/playbook/pb_timeline/item.html.erb

@@ -2,7 +2,7 @@
   <% if label %>
     <%= label %>
   <% else %>
-    <%= pb_rails("timeline/label", props: { date: date, show_current_year: show_current_year }) %>
+    <%= pb_rails("timeline/label", props: { date: date }) %>
   <% end %>
 
   <% if step %>

data/app/pb_kits/playbook/pb_timeline/item.rb

@@ -12,8 +12,6 @@ module Playbook
       prop :line_style, type: Playbook::Props::Enum,
                         values: %w[solid dotted],
                         default: "solid"
-      prop :show_current_year, type: Playbook::Props::Boolean,
-                               default: false
 
       renders_one :label
       renders_one :step