[PBNTR-716] Table kit: "Sticky Left Column" variant styling - React a…

…nd Rails (#4027) **What does this PR do?** A clear and concise description with your runway ticket url. [PBNTR-716](https://runway.powerhrg.com/backlog_items/PBNTR-716) As a Playbook dev, I want to add a dynamically rendering shadow to the right column of the "Sticky Left Column" doc example, So that we can ensure continuity in our table kit design. #### Checklist: - [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new kit`, `deprecated`, or `breaking`. See [Changelog & Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels) for details. - [x] **DEPLOY** I have added the `milano` label to show I'm ready for a review.
powerhome · Dec 20, 2024 · e26a60f · e26a60f
1 parent 87b2580
commit e26a60f
Show file tree

Hide file tree

Showing 12 changed files with 89 additions and 68 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss b/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss
@@ -120,7 +120,7 @@
 
   // Responsive Styles
   @media only screen and (max-width: $screen-xl-min) {  
-    &[class*="table-responsive-scroll"] {
+    &[class*="advanced-table-responsive-scroll"] {
       border-radius: 4px;
       box-shadow: 1px 0 0 0px $border_light,
                   -1px 0 0 0px $border_light;
@@ -158,7 +158,7 @@
     }
   }
   @media only screen and (min-width: $screen-xl-min) {
-    &[class*="table-responsive-scroll"] {
+    &[class*="advanced-table-responsive-scroll"] {
       overflow-x: visible;
     }
   }
@@ -208,7 +208,7 @@
     }
     // Dark Mode Responsive Styles
     @media only screen and (max-width: $screen-xl-min) {
-      &[class*="table-responsive-scroll"] {
+      &[class*="advanced-table-responsive-scroll"] {
         border-radius: 4px;
         box-shadow: 1px 0 0 0px $border_dark,
                     -1px 0 0 0px $border_dark;

diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx b/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx
@@ -240,7 +240,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss("pb_advanced_table"),
-    `table-responsive-${responsive}`,
+    `advanced-table-responsive-${responsive}`,
     globalProps(props),
     className
   )

diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx b/playbook/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx
@@ -468,7 +468,7 @@ test("responsive prop functions as expected", () => {
   )
 
   const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass("pb_advanced_table table-responsive-scroll")
+  expect(kit).toHaveClass("pb_advanced_table advanced-table-responsive-scroll")
 })
 
 test("responsive none prop functions as expected", () => {
@@ -483,7 +483,7 @@ test("responsive none prop functions as expected", () => {
   )
 
   const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass("pb_advanced_table table-responsive-none")
+  expect(kit).toHaveClass("pb_advanced_table advanced-table-responsive-none")
 })
 
 test("customRenderer prop functions as expected", () => {

diff --git a/playbook/app/pb_kits/playbook/pb_table/_table.tsx b/playbook/app/pb_kits/playbook/pb_table/_table.tsx
@@ -92,31 +92,31 @@ const Table = (props: TableProps): React.ReactElement => {
     useEffect(() => {
         const handleStickyColumns = () => {
             let accumulatedWidth = 0;
-    
+
             stickyLeftcolumn.forEach((colId, index) => {
                 const isLastColumn = index === stickyLeftcolumn.length - 1;
                 const header = document.querySelector(`th[id="${colId}"]`);
                 const cells = document.querySelectorAll(`td[id="${colId}"]`);
-    
+
                 if (header) {
                     header.classList.add('sticky');
                     (header as HTMLElement).style.left = `${accumulatedWidth}px`;
-    
+
                     if (!isLastColumn) {
                         header.classList.add('with-border');
                         header.classList.remove('sticky-shadow');
                     } else {
                         header.classList.remove('with-border');
                         header.classList.add('sticky-shadow');
                     }
-    
+
                     accumulatedWidth += (header as HTMLElement).offsetWidth;
                 }
-    
+
                 cells.forEach((cell) => {
                     cell.classList.add('sticky');
                     (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
-                    
+
                     if (!isLastColumn) {
                         cell.classList.add('with-border');
                         cell.classList.remove('sticky-shadow');

diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb b/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb
@@ -25,16 +25,16 @@
       <td id="3">Value 3</td>
       <td>Value 4</td>
       <td>Value 5</td>
-      <td>Column 6</td>
-      <td>Column 7</td>
-      <td>Column 8</td>
-      <td>Column 9</td>
-      <td>Column 10</td>
-      <td>Column 11</td>
-      <td>Column 12</td>
-      <td>Column 13</td>
-      <td>Column 14</td>
-      <td>Column 15</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td>Value 13</td>
+      <td>Value 14</td>
+      <td>Value 15</td>
 
     </tr>
     <tr>
@@ -43,16 +43,16 @@
       <td id="3">Value 3</td>
       <td>Value 4</td>
       <td>Value 5</td>
-      <td>Column 6</td>
-      <td>Column 7</td>
-      <td>Column 8</td>
-      <td>Column 9</td>
-      <td>Column 10</td>
-      <td>Column 11</td>
-      <td>Column 12</td>
-      <td>Column 13</td>
-      <td>Column 14</td>
-      <td>Column 15</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td>Value 13</td>
+      <td>Value 14</td>
+      <td>Value 15</td>
 
     </tr>
     <tr>
@@ -61,34 +61,16 @@
       <td id="3">Value 3</td>
       <td>Value 4</td>
       <td>Value 5</td>
-      <td>Column 6</td>
-      <td>Column 7</td>
-      <td>Column 8</td>
-      <td>Column 9</td>
-      <td>Column 10</td>
-      <td>Column 11</td>
-      <td>Column 12</td>
-      <td>Column 13</td>
-      <td>Column 14</td>
-      <td>Column 15</td>
-
-    </tr>
-    <tr>
-      <td id="1">Value 1</td>
-      <td id="2">Value 2</td>
-      <td id="3">Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-      <td>Column 6</td>
-      <td>Column 7</td>
-      <td>Column 8</td>
-      <td>Column 9</td>
-      <td>Column 10</td>
-      <td>Column 11</td>
-      <td>Column 12</td>
-      <td>Column 13</td>
-      <td>Column 14</td>
-      <td>Column 15</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td>Value 13</td>
+      <td>Value 14</td>
+      <td>Value 15</td>
 
     </tr>
   </tbody>

diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md b/playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md
@@ -0,0 +1 @@
+The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/example.yml b/playbook/app/pb_kits/playbook/pb_table/docs/example.yml
@@ -4,6 +4,7 @@ examples:
     - table_md: Medium
     - table_lg: Large
     - table_sticky: Sticky Header
+    - table_sticky_left_columns: Sticky Left Column
     - table_header: Table Header
     - table_alignment_row_rails: Row Alignment
     - table_alignment_column_rails: Cell Alignment
@@ -33,6 +34,7 @@ examples:
     - table_md: Medium
     - table_lg: Large
     - table_sticky: Sticky Header
+    - table_sticky_left_columns: Sticky Left Column
     - table_alignment_row: Row Alignment
     - table_alignment_column: Cell Alignment
     - table_alignment_shift_row: Row Shift

diff --git a/playbook/app/pb_kits/playbook/pb_table/index.ts b/playbook/app/pb_kits/playbook/pb_table/index.ts
@@ -51,9 +51,11 @@ export default class PbTable extends PbEnhancedElement {
               .split('-');
 
           if (this.stickyLeftColumns.length > 0) {
-            this.handleStickyColumnsRef = this.handleStickyColumns.bind(this);
-            this.handleStickyColumns();
-            window.addEventListener('resize', this.handleStickyColumnsRef);
+            setTimeout(() => {
+              this.handleStickyColumnsRef = this.handleStickyColumns.bind(this);
+              this.handleStickyColumns();
+              window.addEventListener('resize', this.handleStickyColumnsRef);
+            }, 10);
           }
         }
       });

diff --git a/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss b/playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss
@@ -1,4 +1,29 @@
-    .table-responsive-scroll {
-        display: block;
-        overflow-x: auto;
+@import "../../tokens/screen_sizes";
+
+.table-responsive-scroll {
+    display: block;
+    overflow-x: scroll;
+
+    // Responsive Styles
+    @media (max-width: 1600px) {
+        &[class*="table-responsive-scroll"] {
+            border-radius: 4px;
+            box-shadow: 1px 0 0 0px $border_light
+          }
+
+        &[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-md.table-card thead tr th:last-child,
+        &[class^=pb_table].table-md:not(.no-hover).table-card tbody tr td:last-child {
+            border-right-width: 0px;
+        }
+
+        &[class^=pb_table].table-lg.table-card thead tr th:last-child,
+        &[class^=pb_table].table-lg:not(.no-hover).table-card tbody tr td:last-child {
+            border-right-width: 0px;
+        }
     }
+}
diff --git a/playbook/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss b/playbook/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss
@@ -3,7 +3,6 @@
 [class^="pb_table"] {
     .sticky {
         position: sticky !important;
-        left: 0;
         z-index: 1;
         background-color: white;
     }

diff --git a/playbook/app/pb_kits/playbook/pb_table/table.html.erb b/playbook/app/pb_kits/playbook/pb_table/table.html.erb
@@ -1,4 +1,10 @@
-<%= content_tag(:div) do %>
+<% if object.responsive_classname %>
+  <% responsive_class = object.responsive_classname %>
+<% else %>
+  <% responsive_class = nil %>
+<% end %>
+
+<%= content_tag(:div, class: responsive_class) do %>
   <% if object.tag == "table" %>
     <%= content_tag(:table,
       aria: object.aria,

diff --git a/playbook/app/pb_kits/playbook/pb_table/table.rb b/playbook/app/pb_kits/playbook/pb_table/table.rb
@@ -45,6 +45,10 @@ def classname
         )
       end
 
+      def responsive_classname
+        responsive ? "table-responsive-#{responsive}" : nil
+      end
+
     private
 
       def dark_class
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
-Original file line number
+Diff line change
@@ Expand Up / @@ -45,6 +45,10 @@ def classname @@
             )
           end
+          def responsive_classname
+            responsive ? "table-responsive-#{responsive}" : nil
+          end
         private
           def dark_class
@@ Expand Down @@