playbook_ui 14.17.0.pre.alpha.PLAY1967bracketlayoutphase27205 → 14.17.0.pre.alpha.PLAY20267223

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d66338cc66f0244b82fbcd320f8782c19196ab6f91e17e3a9a0f02bacac3a46b
-  data.tar.gz: c25ca063d64d0da5ef17477f3691a3af6eca383c23ac9ebfe8c2c26a03edb7ba
+  metadata.gz: 4a84667fe2c80d67890e145f5b8841ff6c207eb717b1319029b6ae249c8248ec
+  data.tar.gz: 8b9b31e2525c5cf403f73dbc4a3b1adf23b2ad469edb62b9aac96cb30250c077
 SHA512:
-  metadata.gz: 9375a05bb12f712de5cc1fa577fe559c1d1687372ecfdebb8b7026bd7b79f05bffc2d9cad088ac2db201b01d33dcf7c13f4736b17e2fa93fe90f1407b53aac45
-  data.tar.gz: 9add4571be2cbc89fba49d754332f70a05e7baa7997a18baec842c876b06bac37a4a58c5492fe310a2193205814880486ed35a60a5464b6898aa2d74fcbf5bf7
+  metadata.gz: 467e9b001b9069d97c5f39e257ba810f980351c93772a54474ec829b4a227017a8a11ec5dfd01f32b0acef10402766f8d8f8d1e342866d5edf0acf6ff513aec4
+  data.tar.gz: 6eff90636fd9b005857d8b221b5db06dd4840a94b788bccf6eae6e3869e1be5a6454d7f4c1f18f3fdba9923549fe8a3f0b814b118e60acebc7f478cc79312584

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

@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import React, { useContext, useEffect } from "react"
 import classnames from "classnames"
 import { flexRender, Row, Cell } from "@tanstack/react-table"
 
@@ -32,9 +32,21 @@ export const RegularTableView = ({
     table,
     selectableRows,
     hasAnySubRows,
-    isPinnedLeft = false,
+    stickyLeftColumn
   } = useContext(AdvancedTableContext)
 
+
+  useEffect(() => {
+    if (stickyLeftColumn && Array.isArray(stickyLeftColumn)) {
+      stickyLeftColumn.forEach((columnId) => {
+        const column = table.getColumn(columnId);
+        if (column && column.getCanPin()) {
+          column.pin('left');
+        }
+      });
+    }
+  },[stickyLeftColumn, table]);
+
   const columnPinning = table.getState().columnPinning || { left: [] };
   const columnDefinitions = table.options.meta?.columnDefinitions || [];
 
@@ -82,7 +94,7 @@ export const RegularTableView = ({
               {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
                 const isPinnedLeft = columnPinning.left.includes(cell.column.id);
                 const isLastCell = cell.column.parent?.columns?.at(-1)?.id === cell.column.id;
-
+                const { column } = cell;
                 return (
                   <td
                       align="right"
@@ -90,9 +102,17 @@ export const RegularTableView = ({
                         `${cell.id}-cell position_relative`,
                         isChrome() ? "chrome-styles" : "",
                         isPinnedLeft && 'pinned-left',
+                        stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft && 'sticky-left',
                         isLastCell && 'last-cell',
                       )}
                       key={`${cell.id}-data`}
+                      style={{
+                        left: isPinnedLeft
+                          ? i === 1 //Accounting for set min-width for first column
+                            ? '180px'
+                            : `${column.getStart("left")}px`
+                          : undefined,
+                      }}
                   >
                     {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
                     <span id={`${cell.id}-span`}>

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

@@ -45,6 +45,7 @@ export const TableHeaderCell = ({
     selectableRows,
     hasAnySubRows,
     showActionsBar,
+    stickyLeftColumn,
     inlineRowLoading,
     isActionBarVisible,
   } = useContext(AdvancedTableContext);
@@ -76,7 +77,9 @@ const cellClassName = classnames(
   `${isChrome() ? "chrome-styles" : ""}`,
   `${enableSorting ? "table-header-cells-active" : ""}`,
   { "pinned-left": responsive === "scroll" && isPinnedLeft },
-   isLastHeaderCell ? "last-header-cell" : ""
+   isLastHeaderCell ? "last-header-cell" : "",
+  stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft ? 'sticky-left' : "",
+
 ); 
 
 const cellId = `${loading ? 
@@ -111,6 +114,13 @@ const isToggleExpansionEnabled =
         colSpan={header?.colSpan}
         id={cellId}
         key={`${header?.id}-header`}
+        style={{
+          left: isPinnedLeft
+            ? header?.index === 1 //Accounting for set min-width for first column
+              ? '180px'
+              : `${header?.column.getStart("left")}px`
+            : undefined,
+        }}
     >
       {header?.isPlaceholder ? null : headerChildren && header?.index === 0 ? (
         <Flex alignItems="center">

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

@@ -8,6 +8,7 @@
 @import "../tokens/screen_sizes";
 @import "../tokens/shadows";
 @import "../tokens/positioning";
+@import "./scss_partials/advanced_table_sticky_mixin";
 
 .pb_advanced_table {
   $border-color: 1px solid $border_light;
@@ -93,8 +94,8 @@
       border-right: 1px solid $border_light !important;
     }
     .table-header-cells-custom {
-      text-align:center;
-      [class^=pb_checkbox_kit] .pb_checkbox_label {
+      text-align: center;
+      [class^="pb_checkbox_kit"] .pb_checkbox_label {
         padding-left: 0px;
       }
     }
@@ -104,7 +105,7 @@
     }
     // Right align header content of first data column in selectable row no subrow setup
     &.selectable-rows-enabled {
-      tr { 
+      tr {
         th:nth-child(2),
         .pb_flex_kit_orientation_row_justify_content_start_align_items_center_spacing_none.gap_none {
           justify-content: flex-end;
@@ -122,7 +123,7 @@
       }
 
       // Set fixed width for checkbox column
-      &.table-header-cells-custom, 
+      &.table-header-cells-custom,
       &.checkbox-cell.checkbox-cell-header {
         width: 40px !important;
         min-width: 40px !important;
@@ -145,7 +146,7 @@
     .checkbox-cell {
       display: flex;
       justify-content: center;
-      [class^=pb_checkbox_kit] .pb_checkbox_label {
+      [class^="pb_checkbox_kit"] .pb_checkbox_label {
         padding-left: 0px;
       }
     }
@@ -173,7 +174,7 @@
       }
     }
     td {
-      [class^=pb_text_input_kit] .text_input_wrapper input {
+      [class^="pb_text_input_kit"] .text_input_wrapper input {
         padding: 0 $space_xxs;
         font-size: 14px;
         text-align: right;
@@ -230,12 +231,12 @@
     max-height: 1920px;
     overflow-y: auto;
   }
-  
+
   // Fullscreen
   &.advanced-table-allow-fullscreen {
     transition: all 0.3s ease;
   }
-  
+
   &.advanced-table-fullscreen {
     background-color: $bg_light;
     box-sizing: border-box;
@@ -248,7 +249,10 @@
     z-index: $z_10;
 
     .pb_table {
-      th, td, div, button {
+      th,
+      td,
+      div,
+      button {
         font-size: calc(100%);
       }
       box-sizing: border-box;
@@ -266,7 +270,7 @@
       }
     }
   }
-  
+
   .advanced-table-fullscreen-header {
     background-color: $white;
     height: 44px;
@@ -372,78 +376,32 @@
     width: 2px;
   }
 
+  // Sticky Left Columns Styling
+  &[class*="advanced-table-sticky-left-columns"] {
+    overflow-x: scroll;
+    .sticky-left {
+      position: sticky !important;
+      z-index: 2;
+      background-color: $white;
+      box-shadow: $shadow_deep;
+    }
+    @include advanced-table-sticky-mixin(
+      $border_light,
+      $white,
+      lighten($silver, $opacity_7)
+    );
+  }
+
   // Responsive Styles
   @media only screen and (max-width: $screen-xl-min) {
     &[class*="advanced-table-responsive-scroll"] {
-      border-radius: 4px;
-      box-shadow: 1px 0 0 0px $border_light,
-                  -1px 0 0 0px $border_light;
-      display: block;
       overflow-x: auto;
       width: 100%;
-      [class^=pb_table].table-sm.table-card thead tr th:first-child,
-      [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
-        border-left-width: 0px !important;
-      }
-      [class^=pb_table].table-sm.table-card thead tr th:last-child,
-      [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
-        border-right-width: 0px;
-      }
-      [class^=pb_table].table-sm.table-card tbody tr:last-child td:first-child,
-      [class^=pb_table].table-sm.table-card tbody tr:last-child td:last-child {
-          border-radius: 0 0 0 0;
-        }
-      .table-header-cells:first-child,
-      td:first-child,
-      .pb_table_td:first-child,
-      .checkbox-cell.checkbox-cell-header:first-child,
-      [class*="pinned-left"] {
-          background-color: $white;
-          box-shadow: $shadow_deep !important;
-          position: sticky !important;
-          left: 0;
-          z-index: 2;
-      }
-      .bg-silver td:first-child {
-        background-color: lighten($silver, $opacity_7);
-      }
-      .bg-white td:first-child {
-          background-color: $white;
-      }
-
-      .virtualized-table-row {
-        &.bg-silver td:first-child {
-          background-color: lighten($silver, $opacity_7);
-        }
-        &.bg-white td:first-child {
-          background-color: $white;
-        }
-        &.bg-row-selection td:first-child {
-          background-color: $info_subtle;
-        }
-      }
-
-      .row-selection-actions-card {
-        border-right-width: 0px;
-        border-left-width: 0px;
-        position: sticky;
-        top: 0;
-        left: 0;
-        border-radius: unset;
-      }
-      .checkbox-cell {
-        display: table-cell !important;
-      }
-      .sticky-header {
-        thead {
-          th:first-child {
-            box-shadow: 1px 0 10px -2px $border_light !important;
-          }
-        }
-        .pb_advanced_table_header {
-          box-shadow: none !important;
-        }
-      }
+      @include advanced-table-sticky-mixin(
+        $border_light,
+        $white,
+        lighten($silver, $opacity_7)
+      );
     }
   }
   @media only screen and (min-width: $screen-xl-min) {
@@ -480,7 +438,9 @@
       }
     }
 
-    .table-header-cells:first-child, td:first-child, .pb_table_td:first-child {
+    .table-header-cells:first-child,
+    td:first-child,
+    .pb_table_td:first-child {
       box-shadow: 1px 0px 0px 0px $border_dark !important;
     }
 
@@ -488,12 +448,14 @@
       background-color: $border_dark !important;
     }
 
-    .sort-button-icon, .header-sort-button > div, .pb_th_link {
+    .sort-button-icon,
+    .header-sort-button > div,
+    .pb_th_link {
       color: $white !important;
     }
 
     .gray-icon {
-      color:  $text_dk_light !important;
+      color: $text_dk_light !important;
     }
 
     .sticky-header {
@@ -536,63 +498,33 @@
       z-index: $z_10;
     }
 
+    &[class*="advanced-table-sticky-left-columns"] {
+      .sticky-left {
+        background-color: $bg_dark;
+      }
+      @include advanced-table-sticky-mixin(
+        $border_dark,
+        $bg_dark_card,
+        $bg_dark
+      );
+    }
+
     // Dark Mode Responsive Styles
     @media only screen and (max-width: $screen-xl-min) {
       &[class*="advanced-table-responsive-scroll"] {
-        border-radius: 4px;
-        box-shadow: 1px 0 0 0px $border_dark,
-                    -1px 0 0 0px $border_dark;
-        display: block;
-        overflow-x: scroll;
-        width: 100%;
-        [class^=pb_table].table-sm.table-card thead tr th:first-child,
-        [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
-          border-left-width: 0px;
-        }
-        [class^=pb_table].table-sm.table-card thead tr th:last-child,
-        [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
-          border-right-width: 0px;
-        }
-        [class^=pb_table].table-sm.table-card tbody tr:last-child td:first-child,
-        [class^=pb_table].table-sm.table-card tbody tr:last-child td:last-child {
-            border-radius: 0 0 0 0;
-        }
-        .table-header-cells:first-child,
-        td:first-child,
-        .pb_table_td:first-child,
-        .checkbox-cell.checkbox-cell-header:first-child,
-        [class*="pinned-left"] {
-          background: $bg_dark_card;
-          border-right: $border_dark;
-          box-shadow: $shadow_deep !important;
-          position: sticky !important;
-        }
-        .bg-silver td:first-child {
-          background-color: $bg_dark;
-        }
-        .bg-white td:first-child {
-          background-color: $bg_dark_card;
-        }
-
-        // Dark mode virtualized rows
-        .virtualized-table-row {
-          &.bg-silver td:first-child {
-            background-color: $bg_dark;
-          }
-          &.bg-white td:first-child {
-            background-color: $bg_dark_card;
-          }
-        }
-
         .sticky-header {
           thead {
             th:first-child {
-              background: $bg_dark;
-              box-shadow: 1px 0 10px -2px $border_dark !important;
+              background: $bg_dark_card;
             }
           }
         }
+        @include advanced-table-sticky-mixin(
+          $border_dark,
+          $bg_dark_card,
+          $bg_dark
+        );
       }
     }
   }
-}
+}

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

@@ -87,6 +87,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     showActionsBar = true,
     selectableRows,
     sortControl,
+    stickyLeftColumn,
     tableData,
     tableOptions,
     tableProps,
@@ -233,6 +234,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       'advanced-table-fullscreen': isFullscreen,
       'advanced-table-allow-fullscreen': allowFullScreen
     },
+    {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
     globalProps(props),
     className
   );
@@ -291,6 +293,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             setExpanded={setExpanded}
             showActionsBar={showActionsBar}
             sortControl={sortControl}
+            stickyLeftColumn={stickyLeftColumn}
             subRowHeaders={tableOptions?.subRowHeaders}
             table={table}
             tableContainerRef={tableWrapperRef}

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

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

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

@@ -0,0 +1,6 @@
+To render sticky columns for the Advanced Table, you can use the `stickyLeftColumn` prop. This prop expects an array of the column ids you want to be sticky.
+
+To achieve this:
+- Make sure to provide an id for each column via columnDefinitions as shown below. Id can be any string. 
+- One or multiple columns can be made sticky, it is recommended to set the ids within `stickyLeftColumn` in the order in which the columns are rendered.
+- It is recommended to set `responsive` to none when using `stickyLeftColumn` since responsive just makes the first column sticky and the slightly different styling for `responsive` and `stickyLeftColumn` may override each other in unexpected ways.

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

@@ -25,6 +25,7 @@ examples:
   - advanced_table_collapsible_trail: Collapsible Trail
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props
+  - advanced_table_sticky_columns: Sticky Columns
   - advanced_table_table_props_sticky_header: Table Props Sticky Header
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables

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

@@ -22,4 +22,5 @@ export { default as AdvancedTableSelectableRowsActions } from './_advanced_table
 export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
 export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
 export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
-export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
+export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
+export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'

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

@@ -0,0 +1,97 @@
+@mixin advanced-table-sticky-mixin(
+  $border-color,
+  $bg-main,
+  $bg-secondary,
+  $highlight: $info_subtle
+) {
+  border-radius: 4px;
+  box-shadow: 1px 0 0 0px $border-color, -1px 0 0 0px $border-color;
+  display: block;
+  [class^="pb_table"].table-sm.table-card thead tr th:first-child,
+  [class^="pb_table"].table-sm:not(.no-hover).table-card
+    tbody
+    tr
+    td:first-child {
+    border-left-width: 0px !important;
+  }
+  [class^="pb_table"].table-sm.table-card thead tr th:last-child,
+  [class^="pb_table"].table-sm:not(.no-hover).table-card
+    tbody
+    tr
+    td:last-child {
+    border-right-width: 0px;
+  }
+  [class^="pb_table"].table-sm.table-card tbody tr:last-child td:first-child,
+  [class^="pb_table"].table-sm.table-card tbody tr:last-child td:last-child {
+    border-radius: 0 0 0 0;
+  }
+  .table-header-cells:first-child,
+  td:first-child,
+  .pb_table_td:first-child,
+  .checkbox-cell.checkbox-cell-header:first-child,
+  .table-header-cells.sticky-left,
+  [class*="pinned-left"] {
+    background-color: $bg-main;
+    box-shadow: $shadow_deep !important;
+    position: sticky !important;
+    left: 0;
+    z-index: 2;
+  }
+
+  .bg-silver {
+    td:first-child,
+    .sticky-left {
+      background-color: $bg-secondary;
+    }
+  }
+  .bg-row-selection {
+    td:first-child,
+    .sticky-left {
+      background-color: $highlight;
+    }
+  }
+
+  .bg-white {
+    td:first-child,
+    .sticky-left {
+      background-color: $bg-main;
+    }
+  }
+
+  .virtualized-table-row {
+    &.bg-silver td:first-child {
+      background-color: $bg-secondary;
+    }
+    &.bg-white td:first-child {
+      background-color: $bg-main;
+    }
+    &.bg-row-selection td:first-child {
+      background-color: $highlight;
+    }
+  }
+
+  .row-selection-actions-card {
+    border-right-width: 0px;
+    border-left-width: 0px;
+    position: sticky;
+    top: 0;
+    left: 0;
+    border-radius: unset;
+  }
+
+  .checkbox-cell {
+    display: table-cell !important;
+  }
+
+  .sticky-header {
+    thead {
+      th:first-child {
+        box-shadow: 1px 0 10px -2px $border-color !important;
+      }
+    }
+
+    .pb_advanced_table_header {
+      box-shadow: none !important;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_layout/_layout.scss

@@ -210,51 +210,10 @@ $bracket-border-width: 4px;
       border-right: $bracket-border-width solid $border_light;
     }
 
-    .polygon_node {
-      position: absolute;
-      top: calc(50% - 5px);
-      right: -10px;
-
-      width: 0;
-      height: 0;
-      border-top: 5px solid transparent;
-      border-bottom: 5px solid transparent;
-      border-left: 10px solid $border_light;
-    }
-
     .layout_round_label {
       display: none;
     }
 
-    .layout_participant,
-    .layout_participant_winner,
-    .layout_participant_self {
-      height: 60px;
-    }
-
-    .layout_participant_winner,
-    .layout_participant_self {
-      position: relative;
-
-      &::after {
-        content: "";
-        position: absolute;
-        top: 0;
-        width: 4px;
-        height: 100%;
-      }
-    }
-
-    .layout_participant_winner::after {
-      right: 0;
-      background: $product_6_highlight;
-    }
-
-    .layout_participant_self::after {
-      left: 0;
-      background: $category_1;
-    }
-
     @media (max-width: $screen-md-max) {
       flex-direction: column;
       .layout_round_label {
@@ -262,8 +221,7 @@ $bracket-border-width: 4px;
       }
       .layout_round .layout_game::after,
       .connector_container,
-      .half_box,
-      .polygon_node {
+      .half_box {
         display: none !important;
       }
     }

data/app/pb_kits/playbook/pb_layout/_layout.tsx

@@ -6,7 +6,6 @@ import { GlobalProps, globalProps, globalInlineProps } from '../utilities/global
 
 import { Round, RoundLabel } from "./subcomponents/_round";
 import Game from "./subcomponents/_game";
-import Participant from "./subcomponents/_participant";
 
 type LayoutPropTypes = {
   aria?: {[key: string]: string},
@@ -220,6 +219,5 @@ Layout.Footer = Footer
 Layout.Round = Round
 Layout.Game = Game
 Layout.RoundLabel = RoundLabel
-Layout.Participant = Participant
 
 export default Layout