playbook_ui 14.21.2.pre.alpha.PLAY2018verticalBordertableheaderborders8323 → 14.21.2.pre.alpha.PLAY2020sidebarfilterPOC8265

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 89e5c8498b0a671de8feebbb801b169ab19d122477756c9ea6a0f270f51d660e
-  data.tar.gz: 0754ee11059ff2b06f74b87777a5e400c122a3a32ccabba8ee09ea0e5a80a480
+  metadata.gz: 110027cf4b6fc7f41901f5d8a95eeee3cabd472a0f64d95870e83cac6155d44f
+  data.tar.gz: 96c09cbb3a87483920bfd554a727e6663767bc3447cc2e363af5adcb09d6a5c7
 SHA512:
-  metadata.gz: 70011e7df53940699338913f5d156bc49473d45b97d01295e00ad304cc0c309d11a8ba994ffb0ac100e6800c285906b192289ad5ecf25c9f5a98b3401c7a8675
-  data.tar.gz: b768e24d2dfea9ad4f3e85f6938e7ebbce5073235c3ee1f2977aa76b8bdf962d03ffe8cd21a94f7d1a6adc48772247634a3996272216f8b055867f24052a20ab
+  metadata.gz: 14c26029d6c5254a2f62b2ea222c4cd5d06ffb3e6586d36d506dfaeed57c4f824e41418e9ce5533838e720d94c1257bace7f55a78da5a2d6ee6dd6768d066fdf
+  data.tar.gz: 0cd5c076dfb211d337b2de733d3b4a94b09c208b00261b74bcd2eeae88c255b59cd6849025ad1f3548be3f1a910244d6b8e6f689dd413b210a8903855b656a90

data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx

@@ -47,7 +47,7 @@ export const CustomCell = ({
       <Flex 
           alignItems="center" 
           columnGap="xs"
-          justify="start"
+          justify={"start"}
           orientation="row"
       >
         {

data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx

@@ -4,7 +4,6 @@ import { flexRender, Row, Cell } from "@tanstack/react-table"
 
 import { GenericObject } from "../../types"
 import { isChrome } from "../Utilities/BrowserCheck"
-import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
@@ -26,15 +25,13 @@ const TableCellRenderer = ({
   collapsibleTrail = true,
   loading = false,
   stickyLeftColumn,
-  columnPinning,
-  columnDefinitions,
+  columnPinning
 }: {
   row: Row<GenericObject>
   collapsibleTrail?: boolean
   loading?: boolean | string
   stickyLeftColumn?: string[]
   columnPinning: { left: string[] }
-  columnDefinitions?: {[key:string]:any}[]
 }) => {
   return (
     <>
@@ -52,14 +49,10 @@ const TableCellRenderer = ({
         })();
 
         const { column } = cell;
-
-        // Find the “owning” colDefinition by accessor. Needed for multi column logic
-        const colDef = findColumnDefByAccessor(columnDefinitions ?? [], column.id)
-        const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
-
+        
         return (
           <td
-              align={cellAlignment}
+              align="right"
               className={classnames(
                 `${cell.id}-cell position_relative`,
                 isChrome() ? "chrome-styles" : "",
@@ -124,6 +117,7 @@ export const RegularTableView = ({
 
   const columnPinning = table.getState().columnPinning || { left: [] };
   const columnDefinitions = table.options.meta?.columnDefinitions || [];
+
   // Row pinning
   function PinnedRow({ row }: { row: Row<any> }) {
     return (
@@ -143,7 +137,6 @@ export const RegularTableView = ({
       >
         <TableCellRenderer
             collapsibleTrail={collapsibleTrail}
-            columnDefinitions={columnDefinitions}
             columnPinning={columnPinning}
             loading={loading}
             row={row}
@@ -204,7 +197,6 @@ export const RegularTableView = ({
               )}
               <TableCellRenderer
                   collapsibleTrail={collapsibleTrail}
-                  columnDefinitions={columnDefinitions}
                   columnPinning={columnPinning}
                   loading={loading}
                   row={row}

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -15,7 +15,6 @@ import Icon from "../../pb_icon/_icon"
 import { SortIconButton } from "./SortIconButton"
 import { ToggleIconButton } from "./ToggleIconButton"
 import { displayIcon } from "../Utilities/IconHelpers"
-import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
 import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers"
 
 import { isChrome } from "../Utilities/BrowserCheck"
@@ -46,7 +45,6 @@ export const TableHeaderCell = ({
   table
 }: TableHeaderCellProps) => {
   const {
-    columnDefinitions,
     expanded,
     setExpanded,
     expandByDepth,
@@ -74,18 +72,6 @@ export const TableHeaderCell = ({
       header?.column.getToggleSortingHandler()(event)
     }
   }
-  const alignmentMap: Record<string, "start" | "center" | "end"> = {
-    left: "start",
-    center: "center",
-    right: "end",
-  };
-
- // Look up the “owning” columnDefinition by accessor. Needed for multi column logic
- const colDef = header
-   ? findColumnDefByAccessor(columnDefinitions, header.column.id)
-   : undefined
-
- const headerAlignment =   colDef?.columnStyling?.headerAlignment ?? colDef?.columnStyling?.headerAligment
 
   const isLeafColumn =
   header?.column.getLeafColumns().length === 1 &&
@@ -140,15 +126,9 @@ const isToggleExpansionEnabled =
   (enableToggleExpansion === "all" || "header") &&
   enableToggleExpansion !== "none"
 
-  let justifyHeader: justifyTypes;
+  let justifyHeader:justifyTypes;
 
-  if (headerAlignment && alignmentMap[headerAlignment]) {
-    justifyHeader = alignmentMap[headerAlignment];
-  } else if (
-    (header?.index === 0 && hasAnySubRows) ||
-    (header?.index === 0 && inlineRowLoading) ||
-    (header?.index === 0 && isToggleExpansionEnabled)
-  ) {
+  if (header?.index === 0 && hasAnySubRows || (header?.index === 0 && inlineRowLoading) || (header?.index === 0 && isToggleExpansionEnabled)) {
     justifyHeader = enableSorting ? "between" : "start";
   } else {
     justifyHeader = isLeafColumn ? "end" : "center";
@@ -185,7 +165,7 @@ const isToggleExpansionEnabled =
 
   return (
     <th
-        align={headerAlignment ? headerAlignment : "right"}
+        align="right"
         className={cellClassName}
         colSpan={header?.colSpan}
         id={cellId}
@@ -273,8 +253,8 @@ const isToggleExpansionEnabled =
                     tabIndex: 0,
                   },
                 })}
-              justify={header?.index === 0 && enableSorting ? "between" : headerAlignment ? alignmentMap[headerAlignment] : "none"}
-              paddingLeft={header?.index === 0 ? enableSorting ? "xxs" : "xs" : "none"}
+              justify={header?.index === 0 && enableSorting ? "between" : "none"}
+              paddingLeft={enableSorting ? "xxs" : "xs"}
           >
             <div>
               {flexRender(header?.column.columnDef.header, header?.getContext())}

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -621,23 +621,6 @@
     box-shadow: 0 4px 10px 0 rgba($shadow, 0.16) !important;
   }
 
-  // For Rails, we can't target the &:last-child since collapsed rows are display: none;
-  // With JS, we add a .last-visible-row class and add rounded corners to bottom row
-  .last-visible-row {
-    td, .pb_table_td {
-      border-width: 0 0 1px 0;
-
-      &:first-child {
-        border-radius: 0 0 0 4px;
-        border-width: 0 0 1px 1px;
-      }
-      &:last-child {
-        border-radius: 0 0 4px 0;
-        border-width: 0 1px 1px 0;
-      }
-    }
-  }
-
   &.dark {
     // Override default border color for dark mode
     --column-border-color: #{$border_dark};

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -572,64 +572,4 @@ test("pinnedRows prop renders pinned rows at top", () => {
   const firstPinnedRow = pinnedRows[0]
   expect(firstPinnedRow).toHaveStyle("position: sticky")
   expect(firstPinnedRow).toHaveStyle("background-color: white")
-})
-
-test("columnStyling.headerAlignment aligns header as expected", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling: { headerAlignment: "left" },
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const headerCell = screen.getByText("New Enrollments").closest("th");
-  expect(headerCell).toHaveAttribute("align", "left");
-});
-
-test("columnStyling.cellAlignment sets each <td> align attribute as expected", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling: { cellAlignment: "left" },
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
-  expect(firstEnrollmentCell).toHaveAttribute("align", "left");
-});
+})

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb

@@ -51,7 +51,7 @@
   ]
 %>
 
-<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "beta_sort" }) do %>
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
   <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
   <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, enable_toggle_expansion: "all" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb

@@ -34,7 +34,7 @@
   subrow_headers = ["Quarter", "Month", "Day"]
 %>
 
-<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "test_table" }) do %>
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
   <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
   <%= pb_rails("advanced_table/table_body", props: { id: "test_table", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb

@@ -55,4 +55,4 @@
   },
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "beta_table_with_color_headers", table_data: @table_data, column_definitions: column_definitions, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>
+<%= pb_rails("advanced_table", props: { id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "loading_table", table_data: @table_data, column_definitions: column_definitions, loading: true }) %>
+<%= pb_rails("advanced_table", props: { id: "beta_table", table_data: @table_data, column_definitions: column_definitions, loading: true }) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.jsx

@@ -47,14 +47,14 @@ const CustomActions = () => {
       <CircleIconButton
           icon="file-csv"
           onClick={() =>
-            alert(rowIds.length === 0 ? "No Selection Made" : 'Row ids ' + rowIds.join(", ") + 'will be exported!')
+            alert(rowIds.length === 0 ? "No Selection Made" : `Row ids ${rowIds.join(", ")} will be exported!`)
           }
           variant="link"
       />
       <CircleIconButton
           icon="trash-alt"
           onClick={() =>
-            alert(rowIds.length === 0 ? "No Selection Made" : 'Row ids ' + rowIds.join(", ") + 'will be deleted!')
+            alert(rowIds.length === 0 ? "No Selection Made" : `Row ids ${rowIds.join(", ")} will be deleted!`)
           }
           variant="link"
         />

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions_rails.html.erb

@@ -88,11 +88,10 @@ actions = [
     if (!selectedRowIds || selectedRowIds.length === 0) {
       alert('No Selection Made');
     } else {
-      const selectedRowsString = selectedRowIds.join(', ');
       if (actionType === 'export') {
-        alert('Row ids ' + selectedRowsString + ' will be exported!');
+        alert(`Row ids ${selectedRowIds.join(', ')} will be exported!`);
       } else if (actionType === 'delete') {
-        alert('Row ids ' + selectedRowsString + ' will be deleted!');
+        alert(`Row ids ${selectedRowIds.join(', ')} will be deleted!`);
       }
     }
   };

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", table_props: { sticky: true }}) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", table_props: { sticky: true }}) %>

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

@@ -19,8 +19,6 @@ examples:
   - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
-  # - advanced_table_column_styling_rails: Column Styling
-  # - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
 
   react:
   - advanced_table_default: Default (Required Props)
@@ -59,5 +57,3 @@ examples:
   - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
   - advanced_table_pinned_rows: Pinned Rows
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
-  - advanced_table_column_styling: Column Styling
-  - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers

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

@@ -34,5 +34,3 @@ export { default as AdvancedTableColumnVisibilityMulti } from './_advanced_table
 export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
 export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_rows.jsx'
 export { default as AdvancedTableScrollbarNone} from './_advanced_table_scrollbar_none.jsx'
-export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
-export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -266,25 +266,6 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         this.updateTableSelectedRowsAttribute();
       });
     }
-    this.addBorderRadiusOnLastVisibleRow()
-  }
-
-  addBorderRadiusOnLastVisibleRow() {
-    const parentElement = this.element.closest('.pb_advanced_table');
-    
-    const table = document.getElementById(parentElement.id);
-
-    if (table) {
-      const visibleRows = table.querySelectorAll('tr.is-visible, tr:not(.toggle-content)');
-  
-      visibleRows.forEach(row => row.classList.remove('last-visible-row'));
-  
-      const lastVisibleRow = visibleRows[visibleRows.length - 1];
-
-      if (lastVisibleRow) {
-        lastVisibleRow.classList.add('last-visible-row');
-      }
-    }
   }
 
 
@@ -386,8 +367,6 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       row.classList.toggle("bg-silver", !isVisible);
       row.classList.toggle("bg-white", isVisible);
     }
-
-    this.addBorderRadiusOnLastVisibleRow();
   }
 
   displayDownArrow() {

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -7,7 +7,7 @@
       <% header_row.each_with_index do |cell, cell_index| %>
         <% header_id = cell[:accessor].present? ? cell[:accessor] : "header_#{row_index}_#{cell_index}" %>
         <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname(is_first_column: cell_index.zero?), ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
-          <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: (cell[:header_alignment] || "end") }) do %>
+          <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: "end" }) do %>
             <% if cell_index.zero? && row_index === header_rows.size - 1 %>
               <% if object.selectable_rows && object.enable_toggle_expansion != "none" %>
                 <%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -98,9 +98,6 @@ module Playbook
 
             process_columns(col[:columns], rows, current_depth + 1, max_depth)
           else
-            raw_styling       = col[:column_styling] || {}
-            header_alignment  = raw_styling[:header_alignment]
-
             colspan = 1
             rows[current_depth] << {
               label: col[:label],
@@ -108,7 +105,6 @@ module Playbook
               accessor: col[:accessor],
               sort_menu: col[:sort_menu],
               is_last_in_group: is_last && current_depth.positive?,
-              header_alignment: header_alignment,
             }
           end
         end
@@ -141,7 +137,6 @@ module Playbook
           accessor: col[:accessor],
           label: col[:label] || "",
           sort_menu: col[:sort_menu] || nil,
-          column_styling: col[:column_styling] || {},
         }
         (max_depth - 1).times do
           wrapped = { label: "", columns: [wrapped] }

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -6,7 +6,7 @@
     <% object.column_definitions.each_with_index do |column, index| %>
         <% next unless column[:accessor].present? %>
         <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
-            <%= pb_rails("flex", props:{ align: "center", justify: object.justify_for(column, index), classname: object.loading ? "loading-cell" : "" }) do %>
+            <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", classname: object.loading ? "loading-cell" : "" }) do %>
                 <% if collapsible_trail && index.zero? %>
                     <% (1..depth).each do |i| %>
                         <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
@@ -34,7 +34,7 @@
                                 </button>
                             <% end %>
                         <% end %>
-                        <%= pb_rails("flex/flex_item") do %>       
+                        <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && (object.row[:children].present? || has_integrated_checkbox) ? "none" : "xs"}) do %>       
                             <% if column[:custom_renderer].present? %>
                                 <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
                             <% elsif index.zero? %>

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -80,20 +80,6 @@ module Playbook
         end
       end
 
-      def justify_for(column, index)
-        if index.zero?
-          "start"
-        else
-          case cell_alignment_for(column)
-          when "left"   then "start"
-          when "center" then "center"
-          when "right"  then "end"
-          else
-            "end"
-          end
-        end
-      end
-
     private
 
       def custom_renderer_value(column, index)
@@ -117,25 +103,6 @@ module Playbook
       def subrow_depth_classname
         depth.positive? ? "depth-sub-row-#{depth}" : ""
       end
-
-      def find_column_def_by_accessor(defs, target_accessor)
-        defs.each do |col|
-          return col if col[:accessor] == target_accessor
-
-          if col[:columns].is_a?(Array)
-            found = find_column_def_by_accessor(col[:columns], target_accessor)
-            return found if found
-          end
-        end
-        nil
-      end
-
-      def cell_alignment_for(column)
-        return nil unless column[:accessor]
-
-        orig_def = find_column_def_by_accessor(column_definitions, column[:accessor])
-        orig_def[:column_styling][:cell_alignment] if orig_def && orig_def[:column_styling].is_a?(Hash)
-      end
     end
   end
 end

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

@@ -0,0 +1,49 @@
+import React from 'react'
+
+import Collapsible from '../../pb_collapsible/_collapsible'
+import Caption from '../../pb_caption/_caption'
+import Body from '../../pb_body/_body'
+
+type FilterSectionProps = {
+  children?: React.ReactChild[] | React.ReactChild,
+  collapsible?: boolean,
+  collapsed?: boolean,
+  headerText?: string,
+}
+const FilterSection = ({ children, collapsible = false, collapsed = true, headerText, }: FilterSectionProps): React.ReactElement => {
+  if (collapsible) {
+    return (
+      <Collapsible
+          collapsed={collapsed}
+          padding="none"
+      >
+        <Collapsible.Main
+            paddingX="sm"
+            paddingY="xs"
+        >
+            <Caption>{ headerText }</Caption>
+        </Collapsible.Main>
+        <Collapsible.Content
+            className="filter_section_collapsible"
+            paddingX="sm"
+        >
+          { children }
+        </Collapsible.Content>
+      </Collapsible>
+    )
+  }
+  
+  return (
+    <Body
+        paddingTop="xs"
+        paddingX="sm"
+    >
+      <>
+        {headerText && <Caption marginBottom="sm">{ headerText }</Caption>}
+        { children }
+      </>
+    </Body>
+  )
+}
+
+export default FilterSection

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

@@ -0,0 +1,69 @@
+import React from 'react'
+
+import { FilterDescription } from './CurrentFilters'
+import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
+import ResultsCount from './ResultsCount'
+
+import Flex from '../../pb_flex/_flex'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+import Card from '../../pb_card/_card'
+import Caption from '../../pb_caption/_caption'
+
+export type FilterSidebarProps = {
+  children?: React.ReactChild[] | React.ReactChild,
+  filters?: FilterDescription,
+  results?: number,
+} & FilterBackgroundProps
+
+const FilterSidebar = ({
+  onCollapse,
+  onSortChange,
+  sortOptions,
+  sortValue,
+  filters,
+  results,
+  children,
+  dark,
+  isCollapsed,
+  maxHeight,
+  minWidth,
+  placement,
+  popoverProps,
+  ...bgProps
+}: FilterSidebarProps): React.ReactElement => (
+  <FilterBackground
+      dark={dark}
+      {...bgProps}
+  >
+    <Card.Body
+        paddingX="sm"
+        paddingY="xs"
+    >
+      <Flex
+          align="center"
+          justify="between"
+          orientation="row"
+      >
+        <ResultsCount
+            dark={dark}
+            results={results}
+            title
+        />
+        <div onClick={onCollapse}>
+          <Caption
+              color="link"
+              cursor="pointer"
+              size="xs"
+              text={isCollapsed ? "Expand All" : "Collapse All"}
+          />
+        </div>
+      </Flex>
+    </Card.Body>
+    <SectionSeparator dark={dark} />
+    <>
+      { children }
+    </>
+  </FilterBackground>
+)
+
+export default FilterSidebar

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

@@ -1,18 +1,29 @@
 import React from 'react'
 import FilterSingle, { FilterSingleProps } from './FilterSingle'
 import FilterDouble, { FilterDoubleProps } from './FilterDouble'
+import FilterSidebar, { FilterSidebarProps } from './FilterSidebar'
+import FilterSection from './FilterSection'
 
 type FilterProps =
   | FilterSingleProps
   | (FilterDoubleProps & {
       double?: boolean,
     })
+  | (FilterSidebarProps & {
+    variant?: null | 'sidebar',
+  })
 
 const Filter = ({
   double = false,
+  variant,
   ...templateProps
   }: FilterProps): React.ReactElement => {
   const displayFilter = () => {
+    if (variant === 'sidebar') {
+      return (
+        <FilterSidebar {...templateProps} />
+      )
+    }
     if (double === true) {
       return (
         <FilterDouble {...templateProps} />
@@ -30,4 +41,6 @@ const Filter = ({
   )
 }
 
+Filter.Section = FilterSection
+
 export default Filter

data/app/pb_kits/playbook/pb_filter/_filter.scss

@@ -88,6 +88,10 @@
     z-index: 1;
   }
 
+  [class^=pb_collapsible_kit] .toggle-content.filter_section_collapsible {
+    padding-top: $space_xs !important;
+  }
+
   &[class*=dark] {
     .filters .filter {
     border-right: 1px solid $border_dark !important;