playbook_ui 14.20.0.pre.rc.2 → 14.21.0.pre.alpha.PLAY2167advtablenitrorowborderdoubling8097

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

@@ -33,6 +33,16 @@
     }
   }
 
+  @mixin scrollbar-styling {
+     &::-webkit-scrollbar {
+        width: 8px;
+      }
+
+      -ms-overflow-style: none !important;
+      scrollbar-width: thin !important;
+      scrollbar-color: rgb(0 0 0 / .20) transparent;
+  }
+
   [id$="-span"] {
     word-wrap: normal;
   }
@@ -53,15 +63,6 @@
     width: 100%;
   }
 
-  .column-visibility-dropdown-wrapper {
-    position: unset !important;
-  }
-  .column-visibility-dropdown {
-    width: unset !important;
-    right: $space_xxs;
-    text-align: left;
-  }
-
   // Virtualized table styles
   .virtualized-table-row {
     display: table !important;
@@ -96,6 +97,16 @@
     }
   }
 
+  &.advanced-table-hide-scrollbar {
+      &::-webkit-scrollbar {
+        display: none !important;
+      }
+
+      -ms-overflow-style: none !important;
+      scrollbar-width: none !important;
+    }
+  
+
   .row-selection-actions-card {
     border-bottom-right-radius: 0px !important;
     border-bottom-left-radius: 0px !important;
@@ -159,13 +170,6 @@
         box-sizing: border-box !important;
       }
     }
-    .expand-by-depth-dropdown-wrapper {
-      position: unset !important;
-    }
-    .expand-by-depth-dropdown {
-      width: unset !important;
-      text-align: left;
-    }
   }
 
   .pb_advanced_table_body {
@@ -242,30 +246,37 @@
   &.advanced-table-max-height-xs {
     max-height: 320px;
     overflow-y: auto;
+    @include scrollbar-styling;
   }
   &.advanced-table-max-height-sm {
     max-height: 480px;
     overflow-y: auto;
+    @include scrollbar-styling;
   }
   &.advanced-table-max-height-md {
     max-height: 768px;
     overflow-y: auto;
+    @include scrollbar-styling;
   }
   &.advanced-table-max-height-lg {
     max-height: 1024px;
     overflow-y: auto;
+    @include scrollbar-styling;
   }
   &.advanced-table-max-height-xl {
     max-height: 1280px;
     overflow-y: auto;
+    @include scrollbar-styling;
   }
   &.advanced-table-max-height-xxl {
     max-height: 1440px;
     overflow-y: auto;
+    @include scrollbar-styling;
   }
   &.advanced-table-max-height-xxxl {
     max-height: 1920px;
     overflow-y: auto;
+    @include scrollbar-styling;
   }
 
   // Fullscreen
@@ -384,6 +395,10 @@
     box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
   }
 
+  .pb_table_td:nth-child(2) {
+    box-shadow: inset 1px 0px 0px 0px var(--column-border-color) !important;
+  }
+
   // Color for collapsible trail
   .collapsible-trail {
     background-color: $border_light !important;
@@ -395,7 +410,6 @@
 
   // Make sure all horizontal borders use the default border color
   tr, th, td {
-    border-top-color: $border_light !important;
     border-bottom-color: $border_light !important;
   }
 
@@ -554,14 +568,12 @@
       background-color: $white;
       box-shadow: $shadow_deep;
     }
+
     @include advanced-table-sticky-mixin(
       $border_light,
       $white,
       lighten($silver, $opacity_7)
     );
-
-    // Apply border colors for sticky columns
-    @include apply-sticky-colors("light");
   }
 
   // Responsive Styles
@@ -582,6 +594,10 @@
         box-shadow: $shadow_deep !important;
       }
 
+      .pb_table_td:nth-child(2) {
+        box-shadow: 0 0 0 0 !important;
+      }
+
       .pb_advanced_table_header,
       .pb_advanced_table_body {
         th.sticky-left,
@@ -598,6 +614,11 @@
     }
   }
 
+  // Row Pinning - additional inline styles in RegularTableView.tsx
+  .pinned-row {
+    box-shadow: 0 4px 10px 0 rgba($shadow, 0.16) !important;
+  }
+
   &.dark {
     // Override default border color for dark mode
     --column-border-color: #{$border_dark};
@@ -609,7 +630,6 @@
 
     // Make sure all horizontal borders use the default border color in dark mode
     tr, th, td {
-      border-top-color: $border_dark !important;
       border-bottom-color: $border_dark !important;
     }
 
@@ -827,3 +847,8 @@
     }
   }
 }
+
+// Outside of the pb_advanced_table class for popover
+.pb-advanced-table-popover-option:hover {
+  background-color: $bg_light;
+}

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

@@ -2,7 +2,7 @@ import React, { useRef, useEffect, useState, useCallback } from "react";
 import classnames from "classnames";
 
 import { GenericObject } from "../types";
-import { Row, RowSelectionState } from "@tanstack/react-table";
+import { Row, RowSelectionState, RowPinningState } from "@tanstack/react-table";
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
@@ -51,8 +51,13 @@ type AdvancedTableProps = {
   onRowToggleClick?: (arg: Row<GenericObject>) => void
   onToggleExpansionClick?: (arg: Row<GenericObject>) => void
   pagination?: boolean,
-  paginationProps?: GenericObject
+  paginationProps?: GenericObject,
+  pinnedRows?: {
+    value?: RowPinningState;
+    onChange?: (value: RowPinningState) => void;
+  };
   responsive?: "scroll" | "none",
+  scrollBarNone?: boolean,
   selectableRows?: boolean,
   showActionsBar?: boolean,
   sortControl?: GenericObject
@@ -91,7 +96,9 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     onToggleExpansionClick,
     pagination = false,
     paginationProps,
+    pinnedRows,
     responsive = "scroll",
+    scrollBarNone= false,
     showActionsBar = true,
     selectableRows,
     sortControl,
@@ -136,6 +143,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     tableOptions,
     onRowSelectionChange,
     columnVisibilityControl,
+    pinnedRows,
   });
 
   // Initialize table actions
@@ -241,10 +249,11 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     maxHeight ? `advanced-table-max-height-${maxHeight}` : '',
     {
       'advanced-table-fullscreen': isFullscreen,
-      'advanced-table-allow-fullscreen': allowFullScreen
+      'advanced-table-allow-fullscreen': allowFullScreen,
     },
     {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
     columnGroupBorderColor ? `column-group-border-${columnGroupBorderColor}` : '',
+    scrollBarNone ? 'advanced-table-hide-scrollbar' : '',
     globalProps(props),
     className
   );
@@ -302,6 +311,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             isFullscreen={isFullscreen}
             loading={loading}
             onExpandByDepthClick={onExpandByDepthClick}
+            pinnedRows={pinnedRows}
             responsive={responsive}
             selectableRows={selectableRows}
             setExpanded={setExpanded}

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

@@ -1,10 +1,18 @@
 <%= pb_content_tag do %>
-        <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : ""  }.merge(object.table_props)) do %>
-          <% if content.present? %>
-            <% content.presence %>
-          <% else %>
-            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows }) %>
-            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion }) %>
-          <% end %>
-        <% end %>
+  <% if object.id && object.selectable_rows && object.show_actions_bar %>
+    <%= pb_rails("advanced_table/table_action_bar", props: {
+      actions: object.actions,
+      is_visible: false,
+      selected_count: 0
+    }) %>
+  <% end %>
+
+  <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : ""  }.merge(object.table_props)) do %>
+    <% if content.present? %>
+      <% content.presence %>
+    <% else %>
+      <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar }) %>
+      <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion }) %>
+    <% end %>
+  <% end %>
 <% end %>

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

@@ -25,9 +25,15 @@ module Playbook
                         default: "auto"
       prop :selectable_rows, type: Playbook::Props::Boolean,
                              default: false
+      prop :show_actions_bar, type: Playbook::Props::Boolean,
+                              default: true
+      prop :actions, type: Playbook::Props::Array,
+                     default: []
+      prop :scroll_bar_none, type: Playbook::Props::Boolean,
+                             default: false
 
       def classname
-        additional_classes = [responsive_classname, max_height_classname]
+        additional_classes = [responsive_classname, max_height_classname, hide_scroll_bar_class]
         additional_classes << "column-group-border-#{column_group_border_color}" if column_group_border_color != "none"
         generate_classname("pb_advanced_table", *additional_classes, separator: " ")
       end
@@ -40,6 +46,10 @@ module Playbook
         max_height.present? ? "advanced-table-max-height-#{max_height}" : ""
       end
 
+      def hide_scroll_bar_class
+        scroll_bar_none ? "advanced-table-hide-scrollbar " : ""
+      end
+
       def selected_rows
         @selected_rows ||= []
       end
@@ -47,6 +57,11 @@ module Playbook
       def selected_rows_length
         selected_rows.length
       end
+
+      def is_action_bar_visible
+        # Action bar visibility is controlled by JS based on selection
+        false
+      end
     end
   end
 end

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

@@ -3,6 +3,12 @@ import { render, screen, waitFor } from "../utilities/test-utils"
 
 import { AdvancedTable, Pill } from "playbook-ui"
 
+global.ResizeObserver = class {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+
 const MOCK_DATA = [
   {
     year: "2021",
@@ -72,6 +78,36 @@ const MOCK_DATA_LOADING = [
   },
 ]
 
+const MOCK_DATA_WITH_ID = [
+  {
+    id: "1",
+    year: "2021",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "20",
+    scheduledMeetings: "10",
+  },
+  {
+    id: "2", 
+    year: "2022",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "25",
+    scheduledMeetings: "15",
+  },
+  {
+    id: "3",
+    year: "2023", 
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "30",
+    scheduledMeetings: "20",
+  },
+]
+
 const columnDefinitions = [
   {
     accessor: "year",
@@ -512,3 +548,28 @@ test("allowFullScreen prop adds fullscreen class", () => {
   const tableContainer = screen.getByRole("table").closest("div")
   expect(tableContainer).toHaveClass("advanced-table-allow-fullscreen")
 })
+
+test("pinnedRows prop renders pinned rows at top", () => {
+  const pinnedRowsControl = {
+    value: { top: ["1", "3"] },
+    onChange: jest.fn()
+  }
+
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        pinnedRows={pinnedRowsControl}
+        tableData={MOCK_DATA_WITH_ID}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const pinnedRows = kit.querySelectorAll(".pinned-row")
+  
+  expect(pinnedRows).toHaveLength(2)
+  
+  const firstPinnedRow = pinnedRows[0]
+  expect(firstPinnedRow).toHaveStyle("position: sticky")
+  expect(firstPinnedRow).toHaveStyle("background-color: white")
+})

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md

@@ -1,4 +1,8 @@
-The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__: 
+The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has three required props__:
+
+### id
+
+A unique `id` is required to allow the table functionality to work properly. Without it, certain functions like the action bar will not be able to properly reference the correct table.
 
 ### table_data
 
@@ -13,6 +17,6 @@ Column definitions are the single most important part of building a table as the
 - `accessor`: this is the key from your data for the value you want rendered in that column
 - `label`: this is what will be rendered as the column header label
 
-There is also one optional item that is only required if the table has nested data: 
+There is also one optional item that is only required if the table has nested data:
 
 - `cellAccessors`: This is an array of strings that represent keys from your data object. This is only required for the first column in case of nested data. If you have nested data, the AdvancedTable needs to know what to render in that first column for nested items. This array represents the nested data in the order you want it rendered.

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

@@ -49,6 +49,7 @@ const AdvancedTableColumnVisibilityWithState = (props) => {
   const columnVisibilityControl = {
     value: columnVisibility,
     onChange: setColumnVisibility,
+    onColumnVisibilityChange: (currentState) => console.log(currentState),
   }
   return (
     <div>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.md

@@ -1 +1,3 @@
-The `columnVisibilityControl` prop also allows for greater control over the columnVisibility state. Devs can manage state themselves by passing in `value` and `onChange` as shown.
+The `columnVisibilityControl` prop also allows for greater control over the columnVisibility state. Devs can manage state themselves by passing in `value` and `onChange` as shown.
+
+The additional `onColumnVisibilityChange` provides a callback with the current state as the argument if needed. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md

@@ -3,7 +3,7 @@
 <br />
 <br />
 
-The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__: 
+The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__:
 
 ### tableData
 

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

@@ -0,0 +1,33 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "table-no-children", enable_toggle_expansion: "none", table_data: @table_data_no_subrows, column_definitions: column_definitions }) %>

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

@@ -39,7 +39,6 @@ const AdvancedTableNoSubrows = (props) => {
     <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
-          enableToggleExpansion="all"
           tableData={MOCK_DATA}
           {...props}
       />

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

@@ -0,0 +1,57 @@
+import React, { useState } from "react"
+import AdvancedTable from '../_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
+
+const AdvancedTableRowPinning = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  const [pinnedRows, setPinnedRows] = useState({top: ["8", "9", "10", "11", "12", "13", "14"]})
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          maxHeight="xs"
+          pinnedRows={{value: pinnedRows, onChange: setPinnedRows}}
+          tableData={MOCK_DATA}
+          tableProps={{sticky: true}}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableRowPinning

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_react.md

@@ -0,0 +1,5 @@
+Use the `pinnedRows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and reorganizing via sorting.
+
+**NOTE:** This prop is in Beta. Current Requirements for V1:
+- Sticky header required: Pinned rows must be used with `sticky: true` via `tableProps` (works with both responsive and non-responsive tables)
+- Row ids required: Pass an array of row ids to the `top` property. For expandable rows, both parent and all its child row ids must be included individually

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

@@ -0,0 +1,33 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "beta_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", scroll_bar_none: true }) %>

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

@@ -0,0 +1,53 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableScrollbarNone = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          maxHeight="xs"
+          overflow="auto"
+          responsive="scroll"
+          scrollBarNone
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableScrollbarNone