playbook_ui 14.23.0.pre.alpha.PLAY2283multiheaderverticalbordersdoc9335 → 14.23.0.pre.alpha.PLAY2303optD9000

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8139114c4c2408005bbcefb07dcd6822fd88ea9d7f26e2b03b7c0bd3ec16d329
-  data.tar.gz: 7299fe01d10983473ca28781b053295e94b51dfb665c12da294910f74f636e1e
+  metadata.gz: a93672b01ca3505eec3b1345bb7d7c905c329a3cf1ad7c90e6bf5e9b4d95ba2a
+  data.tar.gz: 936d495085a114cbaeaec2982e4efdeecaf585cfdf5c320e56d2fbfd82da0480
 SHA512:
-  metadata.gz: a8bccc7b982a31fd8a4287021af07a9ab10ccb1613413a05b2ac77c818147ccd329585ed29ca78fc1f47fc1a32ee8b1bf1fb045675e67adb2e0e77b1a304f645
-  data.tar.gz: c5ce85fb28afb5f6b058f067ef6d86c9f7114c4d5e9534c94577786f9733eea41d7ab94907a6bd75197dd35b7f55dc8fbecebd26dbb94c4af4835bdda9eb1eee
+  metadata.gz: 65aac7c62e1ff9322ba33ecbc6fa33f7a71ebd0c67bdb219bae381c7eafa19104c92b084fbb222e6284549ed24c9f00eafeec5ae4b4e3626abc596c5f1242ffe
+  data.tar.gz: f88287357b7036647846acb71cb4ea5f8eeb05d153c9a3efa5305a7d5ae7c6c3ecf7a17ee2fb9f3faa6a52ed555453be95c2491619d3c1c710e8e0739b8a3e59

data/app/pb_kits/playbook/_playbook.scss

@@ -107,6 +107,7 @@
 @import 'pb_typeahead/typeahead';
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';
+@import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import 'pb_empty_state/empty_state';
 @import 'utilities/mixins';

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

@@ -20,7 +20,7 @@ interface CustomCellProps {
   customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
   selectableRows?: boolean
   customStyle?: GenericObject
-} 
+}
 
 export const CustomCell = ({
   getValue,
@@ -35,7 +35,7 @@ export const CustomCell = ({
 
   const handleOnExpand = (row: Row<GenericObject>) => {
     onRowToggleClick && onRowToggleClick(row);
-    
+
     if (!expandedControl) {
       setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
     }
@@ -46,8 +46,8 @@ export const CustomCell = ({
 
   return (
     <div style={{ paddingLeft: `${row.depth * 1.25}em`}}>
-      <Flex 
-          alignItems="center" 
+      <Flex
+          alignItems="center"
           columnGap="xs"
           justify="start"
           orientation="row"
@@ -71,12 +71,11 @@ export const CustomCell = ({
           >
             {row.getIsExpanded() ? (
               <Icon cursor="pointer"
-                  icon="circle-play"
-                  rotation={90}
+                  icon="circle-play-down"
               />
             ) : (
               <Icon cursor="pointer"
-                  icon="circle-play"    
+                  icon="circle-play"
                />
             )}
           </button>

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

@@ -4,48 +4,49 @@ import { Header } from "@tanstack/react-table"
 import { GenericObject } from "../../types"
 
 import Icon from "../../pb_icon/_icon"
+import { getAllIcons } from "../../utilities/icons/allicons"
 
 import { displayIcon } from "../Utilities/IconHelpers"
 
 type SortIconButtonProps = {
   header: Header<GenericObject, unknown>
   sortIcon?: string | string[]
-  enableSortingRemoval?: boolean
 }
 
-export const SortIconButton = ({ header, sortIcon, enableSortingRemoval }: SortIconButtonProps) => {
-  const firstIcon = displayIcon(sortIcon)[0]
-  const secondIcon = displayIcon(sortIcon)[1]
+export const SortIconButton = ({ header, sortIcon }: SortIconButtonProps) => {
+
+const firstIcon = displayIcon(sortIcon)[0] 
+const secondIcon = displayIcon(sortIcon)[1] 
+const upIcon = getAllIcons()["arrowUpShortWide"].icon as unknown as { [key: string]: SVGElement }
+const downIcon = getAllIcons()["arrowDownShortWide"].icon as unknown as { [key: string]: SVGElement }
 
   return (
     <>
-      {header.column.getIsSorted() === "desc" && (
-        <div
-            className="sort-button-icon"
+      {header.column.getIsSorted() === "desc" ? (
+        <div className="sort-button-icon" 
             key={firstIcon}
-            style={{ paddingLeft: `${header?.index === 0 ? "2px" : "4px"}` }}
         >
+        { firstIcon === "arrow-up-short-wide" ? (
+          <Icon 
+              className="svg-inline--fa"
+              customIcon={upIcon}
+          /> ) : (
           <Icon icon={firstIcon} />
+        )}
         </div>
-      )}
-      {header.column.getIsSorted() === "asc" && (
-        <div
-            className="sort-button-icon"
+      ) : (
+        <div className="sort-button-icon" 
             key={secondIcon}
-            style={{ paddingLeft: `${header?.index === 0 ? "2px" : "4px"}` }}
         >
+        { secondIcon === "arrow-down-short-wide" ? (
+          <Icon 
+              className="svg-inline--fa"
+              customIcon={downIcon}
+          /> ) : (
           <Icon icon={secondIcon} />
-        </div>
-      )}
-      {header.column.getIsSorted() === false && (
-        <div
-            className="sort-button-icon"
-            key={enableSortingRemoval ? "arrow-up-arrow-down" : secondIcon}
-            style={{ paddingLeft: `${header?.index === 0 ? "2px" : "4px"}` }}
-        >
-          <Icon icon={enableSortingRemoval ? "arrow-up-arrow-down" : secondIcon} />
+        )}
         </div>
       )}
     </>
-  );
-};
+  )
+}

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

@@ -112,7 +112,7 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
             paddingBottom="xs"
             text={node.label}
         />
-        <Flex flexDirection="column"
+        <Flex flexDirection="column" 
             paddingLeft="lg"
         >
           {node?.children?.map((child) =>
@@ -141,8 +141,8 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
     setShowPopover(!shouldClose)
 
   const popoverReference = (
-    <Tooltip
-        placement="top"
+    <Tooltip 
+        placement="top" 
         text="Column Configuration"
     >
       <div onClick={togglePopover}>
@@ -170,8 +170,8 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
       >
         {type === "row-selection" ? (
           <>
-            <Caption color="light"
-                paddingLeft="xs"
+            <Caption color="light" 
+                paddingLeft="xs" 
                 size="xs"
             >
               {selectedCount} Selected
@@ -188,15 +188,15 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
               zIndex={3}
           >
             <>
-              <Caption
-                  paddingY="sm"
+              <Caption 
+                  paddingY="sm" 
                   text="Columns Config"
-                  textAlign="center"
+                  textAlign="center" 
               />
               <SectionSeparator paddingBottom="xs" />
               {tree.map((node: VisibilityNode) => (
-                <Flex cursor="pointer"
-                    flexDirection="column"
+                <Flex cursor="pointer" 
+                    flexDirection="column" 
                     key={node.id}
                     paddingX="xs"
                 >

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

@@ -50,7 +50,6 @@ export const TableHeaderCell = ({
     expanded,
     setExpanded,
     expandByDepth,
-    enableSortingRemoval,
     onExpandByDepthClick,
     toggleExpansionIcon,
     sortControl,
@@ -65,7 +64,6 @@ export const TableHeaderCell = ({
 
   type justifyTypes = "none" | "center" | "start" | "end" | "between" | "around" | "evenly"
   
-  
   const toggleSortButton = (event: React.SyntheticEvent) => {
     if (sortControl) {
       const sortIsDesc = header?.column.getIsSorted() === "desc"
@@ -103,6 +101,7 @@ export const TableHeaderCell = ({
     if (!header) return false;
   
     if (header.colSpan > 1 && header.column.parent !== undefined) return true;
+  
     const parent = header.column.parent;
   
     if (!parent) {
@@ -112,8 +111,7 @@ export const TableHeaderCell = ({
     const visibleSiblings = parent.columns.filter(columnHasVisibleLeaf);
     return visibleSiblings.at(-1) === header.column;
   })();
-
-
+ 
 const cellClassName = classnames(
   "table-header-cells",
   `${showActionsBar && isActionBarVisible && "header-cells-with-actions"}`,
@@ -259,9 +257,12 @@ const isToggleExpansionEnabled =
             )}
 
           <Flex
-              className={`${header?.index === 0 && enableSorting && "header-sort-button pb_th_link"} ${header?.index !== 0 && header?.column.getCanSort() && "header-sort-secondary-columns"}`}
-              cursor={((header?.index !== 0 && header?.column.getCanSort()) || (header?.index === 0 && enableSorting) ? "pointer" : "default")}
-              {...(((header?.index !== 0 && header?.column.getCanSort()) || (header?.index === 0 && enableSorting)) && {
+              className={`${header?.index === 0 &&
+                enableSorting &&
+                "header-sort-button pb_th_link"}`}
+              cursor={header?.index === 0 && enableSorting ? "pointer" : "default"}
+              {...(header?.index === 0 &&
+                enableSorting && {
                   htmlOptions: {
                     onClick: (event: React.MouseEvent) => toggleSortButton(event),
                     onKeyDown: (event: React.KeyboardEvent) => {
@@ -279,13 +280,13 @@ const isToggleExpansionEnabled =
               {flexRender(header?.column.columnDef.header, header?.getContext())}
             </div>
 
-            {((header?.index !== 0 && header?.column.getCanSort()) || (header?.index === 0 && enableSorting)) &&
+            {header?.index === 0 &&
+              header.column.getCanSort() &&
+              enableSorting &&
               (loading ? (
                 <div className="loading-toggle-icon" />
               ) : (
-                <SortIconButton 
-                    enableSortingRemoval={enableSortingRemoval}
-                    header={header} 
+                <SortIconButton header={header} 
                     sortIcon={sortIcon} 
                 />
               ))}

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -16,10 +16,8 @@ import { createCellFunction } from "../Utilities/CellRendererUtils";
 interface UseTableStateProps {
   tableData: GenericObject[];
   columnDefinitions: GenericObject[];
-  enableSortingRemoval?: boolean;
   expandedControl?: GenericObject;
   sortControl?: GenericObject;
-  firstColumnSort?: boolean;
   onRowToggleClick?: (arg: Row<GenericObject>) => void;
   selectableRows?: boolean;
   initialLoadingRowsCount?: number;
@@ -40,7 +38,6 @@ interface UseTableStateProps {
 export function useTableState({
   tableData,
   columnDefinitions,
-  enableSortingRemoval,
   expandedControl,
   sortControl,
   onRowToggleClick,
@@ -86,19 +83,19 @@ export function useTableState({
   const buildColumns = useCallback((columnDefinitions: GenericObject[], isRoot = true): any[] => {
     return columnDefinitions?.map((column, index) => {
       const isFirstColumn = isRoot && index === 0;
+
       // Handle grouped columns
       if (column.columns && column.columns.length > 0) {
         return {
-          header: column.header ?? column.label ?? "",
-          id: column.id ?? column.label ?? `group-${index}`,
+          header: column.header || column.label || "",
           columns: buildColumns(column.columns, false),
         };
       }
+
       // Define the base column structure
       const columnStructure = {
         ...columnHelper.accessor(column.accessor, {
           header: column.header ?? column.label ?? "",
-          enableSorting: isFirstColumn || column.enableSort === true,
         }),
       };
 
@@ -169,7 +166,7 @@ export function useTableState({
     getCoreRowModel: getCoreRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
     getSortedRowModel: getSortedRowModel(),
-    enableSortingRemoval: enableSortingRemoval,
+    enableSortingRemoval: false,
     sortDescFirst: true,
     onRowSelectionChange: setRowSelection,
     onRowPinningChange,

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -28,7 +28,7 @@ export const TableHeader = ({
   dark = false,
   enableSorting = false,
   id,
-  sortIcon = ["arrow-up-wide-short", "arrow-down-short-wide"],
+  sortIcon = ["arrow-up-short-wide", "arrow-down-short-wide"],
   ...props
 }: TableHeaderProps) => {
   const {

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

@@ -124,65 +124,13 @@
       -ms-overflow-style: none !important;
       scrollbar-width: none !important;
   }
-
-  // When action bar is hidden, ensure proper border radius for header corners
-  &.hidden-action-bar {
-    .pb_advanced_table_header {
-      > tr:first-child {
-        th:first-child {
-          border-top-left-radius: 4px !important;
-        }
-        th:last-child {
-          border-top-right-radius: 4px !important;
-        }
-      }
-    }
-
-    // Also handle the case when there are multiple header rows
-    .pb_advanced_table_header {
-      > tr:first-child {
-        th:first-child,
-        .table-header-cells:first-child,
-        .table-header-cells-custom:first-child {
-          border-top-left-radius: 4px !important;
-        }
-        th:last-child,
-        .table-header-cells:last-child,
-        .table-header-cells-custom:last-child {
-          border-top-right-radius: 4px !important;
-        }
-      }
-    }
-  }
-
-  // When action bar is shown, remove border radius from header
-  .row-selection-actions-card.is-visible ~ * .pb_advanced_table_header,
-  .row-selection-actions-card.show-action-card ~ * .pb_advanced_table_header {
-    > tr:first-child {
-      th:first-child,
-      th:last-child,
-      .table-header-cells:first-child,
-      .table-header-cells:last-child,
-      .table-header-cells-custom:first-child,
-      .table-header-cells-custom:last-child {
-        border-top-left-radius: 0 !important;
-        border-top-right-radius: 0 !important;
-      }
-    }
-  }
-
+  
 
   .row-selection-actions-card {
     border-bottom-right-radius: 0px !important;
     border-bottom-left-radius: 0px !important;
     border-bottom-color: transparent;
     transition: height 300ms ease;
-
-    &.is-visible,
-    &.show-action-card {
-      border-top-left-radius: 4px !important;
-      border-top-right-radius: 4px !important;
-    }
   }
   .table-header-cells:first-child {
     min-width: 180px;
@@ -422,15 +370,6 @@
     padding: 2px;
   }
 
-  .header-sort-secondary-columns {
-    color: $primary !important;
-
-    &:hover {
-      background-color: rgba($primary, 0.03);
-      border-radius: $border_radius_md;
-    }
-  }
-
   .toggle-all-icon {
     @extend .button-icon;
     @extend %primary-color-pseudo;
@@ -976,19 +915,4 @@
 // Outside of the pb_advanced_table class for popover
 .pb-advanced-table-popover-option:hover {
   background-color: $bg_light;
-}
-// Removes borders when Wrapped inside the Card Kit
-[class^=pb_card_kit] > .pb_advanced_table .pb_advanced_table_body .last-cell,
-[class^=pb_card_kit] > .pb_advanced_table .pb_advanced_table_header .last-header-cell,
-[class^=pb_card_kit] > .pb_advanced_table .pb_advanced_table_body tr td:last-child,
-[class^=pb_card_kit] > .pb_advanced_table .pb_advanced_table_header tr th:last-child {
-    border-right: none !important;
-}
-
-//  Removes borders when Wrapped inside the Card Kit
-[class^=pb_card_kit] > .pb_advanced_table tr:last-child, 
-[class^=pb_card_kit] > .pb_advanced_table .last-row-cell {
-  td {
-    border-bottom: none !important; 
-  }
-}
+}

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

@@ -40,7 +40,6 @@ type AdvancedTableProps = {
   dark?: boolean
   data?: { [key: string]: string }
   enableToggleExpansion?: "all" | "header" | "none"
-  enableSortingRemoval?: boolean
   expandedControl?: GenericObject
   expandByDepth?: { [key: string]: string | number }
   onExpandByDepthClick?: (arg: number, arg1: any) => void
@@ -88,7 +87,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     dark = false,
     data = {},
     enableToggleExpansion = "header",
-    enableSortingRemoval = false,
     expandedControl,
     expandByDepth,
     onExpandByDepthClick,
@@ -124,6 +122,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   // Component refs
   const tableWrapperRef = useRef<HTMLDivElement>(null);
 
+  // Initialize table state
   const {
     table,
     expanded,
@@ -138,7 +137,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   } = useTableState({
     tableData,
     columnDefinitions,
-    enableSortingRemoval,
     expandedControl,
     sortControl,
     onRowToggleClick,
@@ -220,10 +218,10 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     )
 
     return (
-      <Card
+      <Card 
           borderNone
           borderRadius="none"
-          className="advanced-table-fullscreen-header"
+          className="advanced-table-fullscreen-header" 
           {...props}
       >
           <Flex justify="end">
@@ -252,10 +250,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
-
-  // Visibility flag for action bar
-  const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
-
   const classes = classnames(
     buildCss("pb_advanced_table"),
     `advanced-table-responsive-${responsive}`,
@@ -263,8 +257,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     {
       'advanced-table-fullscreen': isFullscreen,
       'advanced-table-allow-fullscreen': allowFullScreen,
-      // Add the hidden-action-bar class when action bar functionality exists but is not visible
-      'hidden-action-bar': (selectableRows || columnVisibilityControl) && !isActionBarVisible,
     },
     {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
     columnGroupBorderColor ? `column-group-border-${columnGroupBorderColor}` : '',
@@ -278,6 +270,9 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     ? getVirtualizedContainerStyles(maxHeight)
     : {};
 
+  // Visibility flag for action bar
+  const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
+
   // The actual Main <Table /> element
   const tableElement = (
     <Table
@@ -293,7 +288,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       ) : (
         <>
           <TableHeader />
-          <TableBody
+          <TableBody   
               isFetching={isFetching}
           />
         </>
@@ -335,7 +330,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             columnGroupBorderColor={columnGroupBorderColor}
             columnVisibilityControl={columnVisibilityControl}
             customSort={customSort}
-            enableSortingRemoval={enableSortingRemoval}
             enableToggleExpansion={enableToggleExpansion}
             enableVirtualization={virtualizedRows}
             expandByDepth={expandByDepth}

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

@@ -11,8 +11,8 @@
     <% if content.present? %>
       <% content.presence %>
     <% else %>
-      <%= pb_rails("advanced_table/table_header", props: { id: object.id, 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, row_styling: object.row_styling }) %>
+      <%= 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

@@ -31,16 +31,9 @@ module Playbook
                      default: []
       prop :scroll_bar_none, type: Playbook::Props::Boolean,
                              default: false
-      prop :row_styling, type: Playbook::Props::Array,
-                         default: []
 
       def classname
-        additional_classes = [
-          responsive_classname,
-          max_height_classname,
-          hide_scroll_bar_class,
-          hidden_action_bar_class,
-        ]
+        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
@@ -54,12 +47,7 @@ module Playbook
       end
 
       def hide_scroll_bar_class
-        scroll_bar_none ? "advanced-table-hide-scrollbar" : ""
-      end
-
-      def hidden_action_bar_class
-        # Add hidden-action-bar class when action bar functionality is enabled but not currently visible
-        selectable_rows && !is_action_bar_visible ? "hidden-action-bar" : ""
+        scroll_bar_none ? "advanced-table-hide-scrollbar " : ""
       end
 
       def selected_rows

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

@@ -124,23 +124,6 @@ const columnDefinitions = [
   },
 ]
 
-const columnDefinitionsSort = [
-  {
-    accessor: "year",
-    label: "Year",
-    cellAccessors: ["quarter", "month", "day"],
-  },
-  {
-    accessor: "newEnrollments",
-    label: "New Enrollments",
-    enableSort: true,
-  },
-  {
-    accessor: "scheduledMeetings",
-    label: "Scheduled Meetings",
-  },
-];
-
 const columnDefinitionsCustomRenderer = [
   {
     accessor: "year",
@@ -693,20 +676,3 @@ test("rowStyling prop works as expected", () => {
   const row1 = tableBody.querySelector('tr:nth-child(1)') 
   expect(row1).toHaveStyle({backgroundColor: colors.white, color: colors.black})
 })
-
-test("Sort icon renders with enableSort on individual columns", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitionsSort}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const kit = screen.getByTestId(testId);
-  const sortIcon = kit.querySelector(".sort-button-icon");
-  expect(sortIcon).toBeInTheDocument();
-  const sortButton = kit.querySelector(".header-sort-secondary-columns");
-  expect(sortButton).toBeInTheDocument();
-});
-

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

@@ -1,7 +1,4 @@
 function showActionBar(actionBar, selectedCount) {
-  // Get container
-  const tableContainer = actionBar.closest('.pb_advanced_table');
-
   // Show action bar directly
   actionBar.style.height = "auto";
   actionBar.style.overflow = "visible";
@@ -11,11 +8,6 @@ function showActionBar(actionBar, selectedCount) {
   actionBar.classList.remove("p_none");
   actionBar.classList.add("p_xs", "is-visible", "show-action-card");
 
-  // Remove hidden-action-bar class when action bar is shown
-  if (tableContainer) {
-    tableContainer.classList.remove("hidden-action-bar");
-  }
-
   // Update the count
   const countElement = actionBar.querySelector(".selected-count");
   if (countElement) {
@@ -24,20 +16,12 @@ function showActionBar(actionBar, selectedCount) {
 }
 
 function hideActionBar(actionBar) {
-  // Get container
-  const tableContainer = actionBar.closest('.pb_advanced_table');
-
   // Hide action bar directly
   actionBar.style.height = "0px";
   actionBar.style.overflow = "hidden";
   actionBar.style.opacity = "0";
   actionBar.classList.add("p_none");
   actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
-
-  // Add hidden-action-bar class when action bar is hidden
-  if (tableContainer) {
-    tableContainer.classList.add("hidden-action-bar");
-  }
 }
 
 export function updateSelectionActionBar(table, selectedCount) {

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

@@ -31,7 +31,7 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: {
-  id: "selectable_rows_with_header_no_action_bar",
+  id: "selectable_rows_with_actions",
   table_data: @table_data_no_subrows,
   column_definitions: column_definitions,
   selectable_rows: true,

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

@@ -34,6 +34,6 @@
 %>
 
 <%= pb_rails("advanced_table", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, selectable_rows: true }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { id: "selectable_rows", column_definitions: column_definitions, selectable_rows: true }) %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions, selectable_rows: true }) %>
   <%= pb_rails("advanced_table/table_body", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all", selectable_rows: true }) %>
 <% end %>

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

@@ -1 +1 @@
-The optional `header` key/value pair can be used within `columnDefinitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well.
+The optional `header` key/value pair can be used within `columnDefinitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well.