playbook_ui 15.5.0 → 15.6.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a883729bcc3b37b0d4b1d155e4a7a27a6a598c8a0ceb563b0eb5516b56e3dff4
-  data.tar.gz: 2a3fef178d8aa3c10a6f91f66b5b2f8bcce5c63314b9c2a26a676877b0fa7c5d
+  metadata.gz: 2851c07d23768f59137cd7cb0ba34884e25960c1bc8700573a62c3aaa1004f83
+  data.tar.gz: 74e6d86e0807f31e01ece7b7f3d620cea86367dfee7150493273543fb1ed682d
 SHA512:
-  metadata.gz: b14d4934f5ee87c4513676c1d35fd7fce4187222567d2d516379b6dcf536183afc946d4264b8448ff91038e3b5f9a9492b06fd0229c74b462fb16f4ebb0fc0b4
-  data.tar.gz: bac6a862cb3f18a38877933a07c9abab89165f721867aba4eb0672bb0cc5448ec793fd2dfdd606d9e99b11b06fa60ab3e4ed4090cb95ac4a1f786f8afb9066c8
+  metadata.gz: a38283f21f3c2b2f2bb7132f27f6cf8fc161cd9f1fd3476f4521df857859c15960bd1e5b82857839d214b8c531adcf0082834eb6daf6a0fbc3df1ffb93b26d08
+  data.tar.gz: 3e9aff80d60e0f20a4ce59810a631d167798f0abe3a3d54962b0ba66c9d9267dfc1bbcddbb3d9b6a03c66d3467cf1c6f0be574254344773b04b47359fc90a564

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

@@ -791,6 +791,28 @@
       box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
     }
 
+    // Override last-header-cell border color in dark mode
+    .pb_advanced_table_header {
+      > tr:not(:first-child) {
+        .last-header-cell {
+          border-right: 1px solid $border_dark !important;
+        }
+      }
+
+      th[colspan]:not([colspan="1"]) {
+        border-right: 1px solid $border_dark !important;
+      }
+    }
+
+    // Override last-cell border color in dark mode for body cells
+    .pb_advanced_table_body {
+      tr {
+        .last-cell:not(:last-of-type) {
+          border-right: 1px solid $border_dark !important;
+        }
+      }
+    }
+
     // Apply border colors in dark mode
     &[class*="column-group-border-"] {
       // For top-level column groups (ENROLLMENT DATA, PERFORMANCE DATA)
@@ -850,7 +872,7 @@
     // Restore vertical border styling in dark mode when verticalBorder is true
     .pb_table[data-vertical-border="true"] {
       .pb_advanced_table_header {
-        > tr:not(:first-child) {
+        > tr {
           th:not(:last-child) {
             border-right: 1px solid $border_dark !important;
           }
@@ -864,11 +886,17 @@
         }
       }
 
+      tr.virtualized-table-row {
+        td:not(:last-child) {
+          border-right: 1px solid $border_dark !important;
+        }
+      }
+
       // When both verticalBorder AND columnGroupBorderColor are set in dark mode,
       // override the default border-dark with the custom color
       &.pb_advanced_table[class*="column-group-border-"] {
         .pb_advanced_table_header {
-          > tr:not(:first-child) {
+          > tr {
             th:not(:last-child) {
               border-right: 1px solid var(--column-border-color) !important;
             }
@@ -881,6 +909,12 @@
             border-right: 1px solid var(--column-border-color) !important;
           }
         }
+
+        tr.virtualized-table-row {
+          td:not(:last-child) {
+            border-right: 1px solid var(--column-border-color) !important;
+          }
+        }
       }
     }
 
@@ -985,34 +1019,90 @@
   // Firefox-specific fix for last-header-cell and last-cell vertical borders
   @-moz-document url-prefix() {
     .pb_advanced_table_header {
-      .last-header-cell:not(:last-child) {
+      th[colspan]:not([colspan="1"]):not(:last-child) {
+        border-right: none !important;
+        box-shadow: 1px 0 0 0 $border_light !important;
+      }
+
+      .last-header-cell:not(:last-child),
+      > tr:last-child .last-header-cell:not(:last-child) {
         border-right: none !important;
         box-shadow: 1px 0 0 0 $border_light !important;
       }
     }
 
     .pb_advanced_table_body {
-      .last-cell:not(:last-child) {
+      tr .last-cell:not(:last-of-type),
+      td.last-cell:not(:last-child),
+      .pb_table_td.last-cell:not(:last-child) {
         border-right: none !important;
         box-shadow: 1px 0 0 0 $border_light !important;
       }
     }
 
+    &[class*="column-group-border-"] {
+      .pb_advanced_table_header {
+        th[colspan]:not([colspan="1"]):not(:last-child),
+        .last-header-cell:not(:last-child),
+        > tr:last-child .last-header-cell:not(:last-child) {
+          box-shadow: 1px 0 0 0 var(--column-border-color) !important;
+        }
+      }
+
+      .pb_advanced_table_body {
+        tr .last-cell:not(:last-of-type),
+        td.last-cell:not(:last-child),
+        .pb_table_td.last-cell:not(:last-child) {
+          box-shadow: 1px 0 0 0 var(--column-border-color) !important;
+        }
+      }
+    }
+
     // Dark mode Firefox fixes
     &.dark {
       .pb_advanced_table_header {
-        .last-header-cell:not(:last-child) {
+        // Convert all colspan headers to box-shadow with dark color
+        th[colspan]:not([colspan="1"]) {
+          border-right: none !important;
+          box-shadow: 1px 0 0 0 $border_dark !important;
+        }
+
+        // Convert all last-header-cell borders to box-shadow with dark color
+        .last-header-cell:not(:last-child),
+        > tr:last-child .last-header-cell:not(:last-child),
+        > tr:not(:first-child) .last-header-cell:not(:last-child),
+        > tr:not(:first-child) .last-header-cell:last-child {
           border-right: none !important;
           box-shadow: 1px 0 0 0 $border_dark !important;
         }
       }
 
       .pb_advanced_table_body {
-        .last-cell:not(:last-child) {
+        tr .last-cell:not(:last-of-type),
+        td.last-cell:not(:last-child),
+        .pb_table_td.last-cell:not(:last-child) {
           border-right: none !important;
           box-shadow: 1px 0 0 0 $border_dark !important;
         }
       }
+
+      &[class*="column-group-border-"] {
+        .pb_advanced_table_header {
+          th[colspan]:not([colspan="1"]):not(:last-child),
+          .last-header-cell:not(:last-child),
+          > tr:last-child .last-header-cell:not(:last-child) {
+            box-shadow: 1px 0 0 0 var(--column-border-color) !important;
+          }
+        }
+
+        .pb_advanced_table_body {
+          tr .last-cell:not(:last-of-type),
+          td.last-cell:not(:last-child),
+          .pb_table_td.last-cell:not(:last-child) {
+            box-shadow: 1px 0 0 0 var(--column-border-color) !important;
+          }
+        }
+      }
     }
   }
 }

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

@@ -29,5 +29,167 @@
       label: "Graduated Students",
     }
 ] %>
+<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Table Props" }) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, margin_bottom: "md", column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
+<% column_definitions_two = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        accessor: "newEnrollments",
+        label: "New Enrollments",
+      },
+      {
+        accessor: "scheduledMeetings",
+        label: "Scheduled Meetings",
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        accessor: "attendanceRate",
+        label: "Attendance Rate",
+      },
+      {
+        accessor: "completedClasses",
+        label: "Completed Classes",
+      },
+      {
+        accessor: "classCompletionRate",
+        label: "Class Completion Rate",
+      },
+      {
+        accessor: "graduatedStudents",
+        label: "Graduated Students",
+      },
+    ],
+  },
+] %>
+<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header" }) %>
+<%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", margin_bottom: "md", table_data: @table_data, column_definitions: column_definitions_two, table_props: { vertical_border: true } }) %>
+
+<% column_definitions_three = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        label: "Enrollment Stats",
+        columns: [
+          {
+            accessor: "newEnrollments",
+            label: "New Enrollments",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        label: "Completion Metrics",
+        columns: [
+          {
+            accessor: "completedClasses",
+            label: "Completed Classes",
+          },
+          {
+            accessor: "classCompletionRate",
+            label: "Class Completion Rate",
+          },
+        ],
+      },
+      {
+        label: "Attendance",
+        columns: [
+          {
+            accessor: "attendanceRate",
+            label: "Attendance Rate",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+] %>
+<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header with Column Group Border Color" }) %>
+<%= pb_rails("advanced_table", props: { id: "beta_table_with_color_headers", margin_bottom: "md", table_data: @table_data, column_definitions: column_definitions_three, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>
+
+<% column_definitions_four = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        label: "Enrollment Stats",
+        columns: [
+          {
+            accessor: "newEnrollments",
+            label: "New Enrollments",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        label: "Completion Metrics",
+        columns: [
+          {
+            accessor: "completedClasses",
+            label: "Completed Classes",
+          },
+          {
+            accessor: "classCompletionRate",
+            label: "Class Completion Rate",
+          },
+        ],
+      },
+      {
+        label: "Attendance",
+        columns: [
+          {
+            accessor: "attendanceRate",
+            label: "Attendance Rate",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+] %>
+<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header No Vertical Border" }) %>
+<%= pb_rails("advanced_table", props: {id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions_four }) %>

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

@@ -1,6 +1,7 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
+import Caption from "../../pb_caption/_caption"
 
 const AdvancedTableTableProps = (props) => {
   const columnDefinitions = [
@@ -40,14 +41,203 @@ const AdvancedTableTableProps = (props) => {
     verticalBorder: true
   }
 
+  const columnDefinitionsTwo = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          accessor: "newEnrollments",
+          label: "New Enrollments",
+        },
+        {
+          accessor: "scheduledMeetings",
+          label: "Scheduled Meetings",
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          accessor: "attendanceRate",
+          label: "Attendance Rate",
+        },
+        {
+          accessor: "completedClasses",
+          label: "Completed Classes",
+        },
+        {
+          accessor: "classCompletionRate",
+          label: "Class Completion Rate",
+        },
+        {
+          accessor: "graduatedStudents",
+          label: "Graduated Students",
+        },
+      ],
+    },
+  ];
+
+  const tablePropsTwo = {
+    verticalBorder: true,
+  }
+
+  const columnDefinitionsThree = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          label: "Enrollment Stats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              label: "New Enrollments",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          label: "Completion Metrics",
+          columns: [
+            {
+              accessor: "completedClasses",
+              label: "Completed Classes",
+            },
+            {
+              accessor: "classCompletionRate",
+              label: "Class Completion Rate",
+            },
+          ],
+        },
+        {
+          label: "Attendance",
+          columns: [
+            {
+              accessor: "attendanceRate",
+              label: "Attendance Rate",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  const tablePropsThree = {
+    verticalBorder: true
+  }
+
+  const columnDefinitionsFour = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          label: "Enrollment Stats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              label: "New Enrollments",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          label: "Completion Metrics",
+          columns: [
+            {
+              accessor: "completedClasses",
+              label: "Completed Classes",
+            },
+            {
+              accessor: "classCompletionRate",
+              label: "Class Completion Rate",
+            },
+          ],
+        },
+        {
+          label: "Attendance",
+          columns: [
+            {
+              accessor: "attendanceRate",
+              label: "Attendance Rate",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
   return (
     <div>
+      <Caption text="Advanced Table Vertical Border Table Props" />
       <AdvancedTable
           columnDefinitions={columnDefinitions}
+          marginBottom="md"
           tableData={MOCK_DATA}
           tableProps={tableProps}
           {...props}
       />
+      <Caption text="Advanced Table Vertical Border Multi Header" />
+      <AdvancedTable
+          columnDefinitions={columnDefinitionsTwo}
+          marginBottom="md"
+          tableData={MOCK_DATA}
+          tableProps={tablePropsTwo}
+          {...props}
+      />
+      <Caption text="Advanced Table Vertical Border Multi Header with Column Group Border Color" />
+      <AdvancedTable
+          columnDefinitions={columnDefinitionsThree}
+          columnGroupBorderColor="text_lt_default"
+          marginBottom="md"
+          tableData={MOCK_DATA}
+          tableProps={tablePropsThree}
+          {...props}
+      />
+      <Caption text="Advanced Table Vertical Border Multi Header No Vertical Border" />
+      <AdvancedTable
+          columnDefinitions={columnDefinitionsFour}
+          tableData={MOCK_DATA}
+          {...props}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss

@@ -8,6 +8,25 @@
       border-right: 1px solid $border_light !important;
     }
 
+    // **Advanced Table** specific rules to eliminate double borders when vertical-border is active
+    .pb_advanced_table &,
+    &[data-vertical-border="true"] {
+      // Remove first column box-shadow (preserve border-right in Chrome and use CSS var to respect column group border colors)
+      .table-header-cells:first-child,
+      .table-header-cells-custom:first-child,
+      td:first-child,
+      .pb_table_td:first-child,
+      .checkbox-cell.checkbox-cell-header:first-child {
+        box-shadow: none !important;
+        border-right: 1px solid var(--column-border-color, #{$border_light}) !important;
+      }
+
+      .pb_table_td:nth-child(2) {
+        box-shadow: none !important;
+      }
+    }
+    // --- End Advanced Table First Column Code Section ---
+
     @media screen and (min-width: $screen-xs-min) {
       tr:hover, .pb_table_tr:hover {
         td:last-child, .pb_table_td:last-child {
@@ -63,5 +82,35 @@
         }
       }
     }
+
+    // Dark mode support for advanced tables
+    .pb_advanced_table.dark & {
+      td, th, .pb_table_td, .pb_table_th {
+        border-right: 1px solid $border_dark !important;
+      }
+
+      thead tr th {
+        border-right: 1px solid $border_dark !important;
+      }
+
+      &[data-vertical-border="true"] {
+        .table-header-cells:first-child,
+        .table-header-cells-custom:first-child,
+        td:first-child,
+        .pb_table_td:first-child,
+        .checkbox-cell.checkbox-cell-header:first-child {
+          border-right: 1px solid var(--column-border-color, #{$border_dark}) !important;
+        }
+      }
+
+      @media screen and (min-width: $screen-xs-min) {
+        tr:hover, .pb_table_tr:hover {
+          td:last-child, .pb_table_td:last-child {
+            border-right-color: darken($border_dark, 10%) !important;
+          }
+        }
+      }
+    }
+    // --- End Advanced Table Dark Mode Code Section ---
   }
 }