playbook_ui 14.23.0.pre.alpha.advancedtablefix9082 → 14.23.0.pre.alpha.play1983advancedtabledoubleborder9286

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b0b8707f27e1d78520568b40d2f13050f404af79a1cbcda223db14444569aa9e
-  data.tar.gz: 30329a170b42fd317808886d5d6a3c54d0b76ce766e8d425f673388f4f743080
+  metadata.gz: 96d0660f857b59986929260adca4f46190602fa97cf19854d6d5caa8a7a997fc
+  data.tar.gz: b0e422e432dd215f0c1738f5b2eb3d26be164103b277c274318570bdf4857b97
 SHA512:
-  metadata.gz: 95a214937ae321b93e42789ae622c9690ee90b7773be34444f6c659961f39f1ed22a64448b19867419accaaebda7489431bc54d8a9a559a48be8d77a7407f256
-  data.tar.gz: 89966b80daf0eb0911e9c2232ab75c263d68309b6a18dc5112e599ff0b484bc5eb555cd88603b1ea4b152e1fe82bc44472cfc4e78ae68f6870991a405d254a31
+  metadata.gz: 39eb60cbc85b72e9b293b5a0af34eb7c18dc464de9622dcb76f3e2cce7b99f01b6a1be4fb3d5c0506af9f0433f0500de902fde48576355103c16732d73d70a86
+  data.tar.gz: a94d811f6303801719cbe279e2dea8ed11ce67c438ef612d4698733d33dec2482e46b0bce0fdb3c4622432d4c670ef3ec83ef633d4cd691122f3d71d7e7757dc

data/app/pb_kits/playbook/_playbook.scss

@@ -107,7 +107,6 @@
 @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,11 +71,12 @@ export const CustomCell = ({
           >
             {row.getIsExpanded() ? (
               <Icon cursor="pointer"
-                  icon="circle-play-down"
+                  icon="circle-play"
+                  rotation={90}
               />
             ) : (
               <Icon cursor="pointer"
-                  icon="circle-play"
+                  icon="circle-play"    
                />
             )}
           </button>

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/_advanced_table.scss

@@ -124,13 +124,65 @@
       -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;
@@ -915,4 +967,19 @@
 // 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

@@ -218,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">
@@ -250,6 +250,10 @@ 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}`,
@@ -257,6 +261,8 @@ 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}` : '',
@@ -270,9 +276,6 @@ 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
@@ -288,7 +291,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       ) : (
         <>
           <TableHeader />
-          <TableBody   
+          <TableBody
               isFetching={isFetching}
           />
         </>

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

@@ -35,7 +35,12 @@ module Playbook
                          default: []
 
       def classname
-        additional_classes = [responsive_classname, max_height_classname, hide_scroll_bar_class]
+        additional_classes = [
+          responsive_classname,
+          max_height_classname,
+          hide_scroll_bar_class,
+          hidden_action_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
@@ -49,7 +54,12 @@ module Playbook
       end
 
       def hide_scroll_bar_class
-        scroll_bar_none ? "advanced-table-hide-scrollbar " : ""
+        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" : ""
       end
 
       def selected_rows

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

@@ -1,4 +1,7 @@
 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";
@@ -8,6 +11,11 @@ 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) {
@@ -16,12 +24,20 @@ 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_table_props.html.erb

@@ -29,5 +29,10 @@
       label: "Graduated Students",
     }
 ] %>
+<%= pb_rails("card", props: { margin_bottom: "md" })  do %>
+  <%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { container: false, vertical_border: true }}) %>
+<% end %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
+<%= pb_rails("card", props: { padding: "none" })  do %>
+  <%= pb_rails("advanced_table", props: { id: "table_props_table_2", padding: "none", table_data: @table_data, column_definitions: column_definitions, table_props: { container: false, vertical_border: true }}) %>
+<% end %>

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

@@ -1,5 +1,6 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import { Card } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableTableProps = (props) => {
@@ -42,12 +43,26 @@ const AdvancedTableTableProps = (props) => {
 
   return (
     <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          tableData={MOCK_DATA}
-          tableProps={tableProps}
-          {...props}
-      />
+      <Card padding="md">
+        <AdvancedTable
+            columnDefinitions={columnDefinitions}
+            tableData={MOCK_DATA}
+            tableProps={tableProps}
+            {...props}
+            />
+      </Card>
+
+      <Card 
+          marginTop="md"
+          padding="none" 
+      >
+        <AdvancedTable
+            columnDefinitions={columnDefinitions}
+            tableData={MOCK_DATA}
+            tableProps={tableProps}
+            {...props}
+        />
+      </Card>
     </div>
   )
 }

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

@@ -314,12 +314,16 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         "tr.is-visible, tr:not(.toggle-content)"
       );
 
-      visibleRows.forEach((row) => row.classList.remove("last-visible-row"));
+      visibleRows.forEach((row) => {
+        row.classList.remove("last-visible-row");
+        row.classList.remove("last-row-cell");
+      });
 
       const lastVisibleRow = visibleRows[visibleRows.length - 1];
 
       if (lastVisibleRow) {
         lastVisibleRow.classList.add("last-visible-row");
+        lastVisibleRow.classList.add("last-row-cell");
       }
     }
   }

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss

@@ -79,8 +79,14 @@
     left: 0;
     border-radius: unset;
     z-index: 5;
-  }
 
+    // Add proper border radius when action bar is visible
+    &.is-visible,
+    &.show-action-card {
+      border-top-left-radius: 4px !important;
+      border-top-right-radius: 4px !important;
+    }
+  }
   .checkbox-cell {
     display: table-cell !important;
   }

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

@@ -39,11 +39,11 @@
                                     style="color: <%= button_color %>"
                                 >
                                     <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
-                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play-down", cursor: "pointer" }) %>
+                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
                                 </button>
                             <% end %>
                         <% end %>
-                        <%= pb_rails("flex/flex_item") do %>
+                        <%= pb_rails("flex/flex_item") 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_checkbox/checkbox.rb

@@ -6,6 +6,8 @@ module Playbook
       prop :error, type: Playbook::Props::Boolean, default: false
       prop :checked, type: Playbook::Props::Boolean, default: false
       prop :indeterminate_main, type: Playbook::Props::Boolean, default: false
+      prop :indeterminate_main_labels, type: Playbook::Props::Array,
+                                       default: []
       prop :indeterminate_parent
       prop :text
       prop :value
@@ -49,10 +51,19 @@ module Playbook
       end
 
       def data
-        Hash(prop(:data)).merge(
+        base_data = Hash(prop(:data)).merge(
           pb_checkbox_indeterminate_main: indeterminate_main,
           pb_checkbox_indeterminate_parent: indeterminate_parent
         )
+
+        if indeterminate_main && indeterminate_main_labels.size == 2
+          base_data.merge!(
+            pb_checkbox_indeterminate_main_label_check: indeterminate_main_labels[0],
+            pb_checkbox_indeterminate_main_label_uncheck: indeterminate_main_labels[1]
+          )
+        end
+
+        base_data
       end
 
     private

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb

@@ -9,10 +9,10 @@
     <tr>
       <th>
         <%= pb_rails("checkbox", props: {
-          text: "Uncheck All",
           value: "checkbox-value",
           name: "main-checkbox",
           indeterminate_main: true,
+          indeterminate_main_labels: ["Check All Ice Cream", "Uncheck All Ice Cream"],
           id: "indeterminate-checkbox"
         }) %>
       </th>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md

@@ -1 +1,2 @@
-If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.
+If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.
+If you want to customize the main checkbox labels, set an array `indeterminate_main_labels` with "Check All" and "Uncheck All" labels.

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

@@ -23,7 +23,9 @@ export default class PbCheckbox extends PbEnhancedElement {
       mainCheckbox.checked = checkedCount > 0;
 
       // Determine the main checkbox label based on the number of checked checkboxes
-      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
+      const checkAllLabel = mainCheckboxWrapper.dataset.pbCheckboxIndeterminateMainLabelCheck ?? 'Check All'
+      const uncheckAllLabel = mainCheckboxWrapper.dataset.pbCheckboxIndeterminateMainLabelUncheck ?? 'Uncheck All'
+      const text = checkedCount === 0 ? checkAllLabel : uncheckAllLabel;
 
       // Determine the icon class to add and remove based on the number of checked checkboxes
       const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -8,6 +8,7 @@
 @import "../pb_textarea/textarea_mixin";
 
 @import "./scss_partials/dropdown_animation";
+@import "dropdown_mixin";
 
 [class*="pb_dropdown"] {
   .dropdown_wrapper {
@@ -98,9 +99,23 @@
           [class^="pb_title_kit"], a {
             color: $white !important;
           }
+          border-bottom: 1px solid $border_light;
           &:hover {
-            background-color: $product_1_background !important;
+            background-color: $product_1_background;
+          }
+ 
+          // activeStyle font color map
+          @each $name, $color in $font-colors {
+            &.font-#{$name} {
+              @include apply-font-color($color);
+            }
           }
+          // activeStyle background color map (no difference between selected and selected+hover custom colors)
+          @each $name, $bg in $background-colors {
+            &.bg-#{$name} {
+              background-color: $bg;
+            }
+          }     
         }
       }
 
@@ -267,6 +282,7 @@
         }
         &[class*="selected"] {
           background-color: $primary;
+          border-bottom: rgba($white, 0.15);
         }
       }
     }

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -39,6 +39,10 @@ type DropdownProps = {
     options: GenericObject;
     separators?: boolean;
     variant?: "default" | "subtle";
+    activeStyle?: {
+      backgroundColor?: string;
+      fontColor?: string;
+    };
 };
 
 interface DropdownComponent
@@ -69,6 +73,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         options,
         separators = true,
         variant = "default",
+        activeStyle,
     } = props;
 
     const ariaProps = buildAriaProps(aria);
@@ -251,6 +256,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         >
             <DropdownContext.Provider
                 value={{
+                    activeStyle,
                     autocomplete,
                     dropdownContainerRef,
                     filteredOptions,

data/app/pb_kits/playbook/pb_dropdown/_dropdown_mixin.scss

@@ -0,0 +1,36 @@
+@import "../tokens/colors";
+
+// activeStyle fontColor sass map to go through text colors + set of custom colors
+$custom-font-colors: (
+  primary: $primary
+);
+
+$merged-font-colors: map-merge($text_colors, $custom-font-colors);
+
+$font-colors: ();
+
+@each $key, $val in $merged-font-colors {
+  $font-colors: map-merge($font-colors, ($key: $val));
+}
+
+@mixin apply-font-color($color) {
+  color: $color;
+
+  [class^="pb_body"],
+  [class^="pb_title_kit"],
+  a {
+    color: $color !important;
+  }
+}
+
+// activeStyle backgroundColor map (set of custom colors)
+$custom-background-colors: (
+  "bg_light": $bg_light,
+  "white": $white,
+);
+
+$background-colors: ();
+
+@each $key, $val in $custom-background-colors {
+  $background-colors: map-merge($background-colors, ($key: $val));
+}