fix: table�: groups header right border on last element in n+1 rows i…

…s 0 when bordered prop is true (#492) * fix: table�: groups header right border on last element in n+1 rows is 0 when bordered prop is true * chore: table: revert selector omission * chore: table: address pr feedback includes some more css cleanup
EightfoldAI · Jan 9, 2023 · 96150f8 · 96150f8
1 parent 3689147
commit 96150f8
Show file tree

Hide file tree

Showing 10 changed files with 160 additions and 78 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -18,7 +18,4 @@
         overflow: hidden;
         padding: 16px;
     }
-    .grouped-th {
-        border-bottom: none !important;
-    }
 </style>
diff --git a/src/components/Table/Internal/OcTable.tsx b/src/components/Table/Internal/OcTable.tsx
@@ -88,6 +88,7 @@ function OcTable<RecordType extends DefaultRecordType>(
   props: OcTableProps<RecordType>
 ) {
   const {
+    bordered,
     classNames,
     rowClassName,
     style,
@@ -671,6 +672,7 @@ function OcTable<RecordType extends DefaultRecordType>(
     <div
       className={mergeClasses([
         styles.table,
+        { [styles.tableBordered]: bordered },
         { [styles.tableRtl]: direction === 'rtl' },
         { [styles.tablePingLeft]: pingedLeft },
         { [styles.tablePingRight]: pingedRight },

diff --git a/src/components/Table/Internal/OcTable.types.ts b/src/components/Table/Internal/OcTable.types.ts
@@ -403,6 +403,10 @@ export interface MemoTableContentProps {
 }
 
 export interface OcTableProps<RecordType = unknown> {
+  /**
+   * Show all Table borders.
+   */
+  bordered?: boolean;
   /**
    * The Table custom class names.
    */

diff --git a/src/components/Table/Internal/octable.module.scss b/src/components/Table/Internal/octable.module.scss
@@ -3,8 +3,8 @@
 
   &::-webkit-scrollbar {
     background-color: transparent;
-    height: 16px;
-    width: 16px;
+    height: $space-m;
+    width: $space-m;
   }
 
   &::-webkit-scrollbar-corner {
@@ -29,8 +29,8 @@
     &:hover:focus {
       &::-webkit-scrollbar {
         display: block;
-        height: 16px;
-        width: 16px;
+        height: $space-m;
+        width: $space-m;
       }
 
       &::-webkit-scrollbar-button {
@@ -52,7 +52,7 @@
       &::-webkit-scrollbar-thumb {
         background-color: transparent;
         border: 5px solid transparent;
-        border-radius: 24px;
+        border-radius: $border-radius-xl;
         box-shadow: 4px 0px 0px 4px rgba(105, 113, 127, 0.7) inset;
       }
     }
@@ -70,8 +70,8 @@
 
       &::-webkit-scrollbar {
         background-color: $table-background-color;
-        height: 16px;
-        width: 16px;
+        height: $space-m;
+        width: $space-m;
       }
 
       &::-webkit-scrollbar-corner {
@@ -83,7 +83,7 @@
       &::-webkit-scrollbar-thumb {
         background-color: transparent;
         border: 5px solid transparent;
-        border-radius: 24px;
+        border-radius: $border-radius-xl;
         box-shadow: 4px 0px 0px 4px rgba(105, 113, 127, 0.7) inset;
       }
 
@@ -121,7 +121,7 @@
     white-space: normal;
     border-top: 0;
     border-left: 0;
-    transition: box-shadow 0.3s;
+    transition: box-shadow $motion-duration-extra-fast;
   }
 
   &-cell {
@@ -144,7 +144,7 @@
       bottom: -1px;
       width: 20px;
       transform: translateX(100%);
-      transition: box-shadow 0.3s;
+      transition: box-shadow $motion-duration-extra-fast;
       content: '';
       pointer-events: none;
     }
@@ -158,7 +158,7 @@
         left: -1px;
         width: 20px;
         transform: translateX(-100%);
-        transition: box-shadow 0.3s;
+        transition: box-shadow $motion-duration-extra-fast;
         content: '';
         pointer-events: none;
       }
@@ -239,6 +239,16 @@
     }
   }
 
+  &-bordered {
+    &.table-ping-right {
+      .table-cell-fix-right-first,
+      .table-cell-fix-right-last {
+        border-left: $table-border;
+        padding-left: calc($table-padding-horizontal-md - 1px);
+      }
+    }
+  }
+
   &-expand-icon-col {
     width: 84px;
   }
@@ -297,14 +307,6 @@
     color: $table-header-foreground-color;
   }
 
-  &-placeholder {
-    &:nth-child(odd) td {
-      background-color: $table-background-color !important;
-    }
-
-    text-align: center;
-  }
-
   tbody {
     tr {
       &:last-of-type {
@@ -327,6 +329,10 @@
     }
   }
 
+  &-placeholder {
+    text-align: center;
+  }
+
   &-container {
     color: $table-foreground-color;
   }
@@ -377,10 +383,10 @@
 
   &-row-expand-icon {
     display: inline-block;
-    width: 16px;
-    height: 16px;
+    width: $space-m;
+    height: $text-line-height-1;
     color: #aaa;
-    line-height: 16px;
+    line-height: $text-line-height-1;
     text-align: center;
     vertical-align: middle;
     border: 1px solid currentColor;
@@ -472,10 +478,6 @@
         border-left-color: transparent;
       }
 
-      &-fix-left-first {
-        box-shadow: 1px 0 0 $table-border-color;
-      }
-
       &-fix-right-first,
       &-fix-right-last {
         box-shadow: none;
@@ -525,6 +527,17 @@
       }
     }
 
+    // TODO: handle internal ping styles for other border props e.g. header-border
+    &.table-bordered {
+      &.table-ping-left {
+        .table-cell-fix-left-first:after,
+        .table-cell-fix-left-last:after {
+          border-left: $table-border;
+          right: 0;
+        }
+      }
+    }
+
     thead {
       td,
       th {

diff --git a/src/components/Table/Styles/bordered.scss b/src/components/Table/Styles/bordered.scss
@@ -21,7 +21,11 @@
         tfoot tr td {
           border-right: $table-border-width $table-border-style
             $table-border-color;
+        }
 
+        tbody tr td,
+        tfoot tr th,
+        tfoot tr td {
           &:last-of-type {
             border-right: none;
           }
@@ -61,7 +65,8 @@
 
       table tbody tr td {
         .table-expanded-row-fixed {
-          margin: -$table-padding-vertical (-$table-padding-horizontal - 1);
+          margin: -$table-padding-vertical
+            calc(calc($table-padding-horizontal - 1px) * -1);
 
           &:after {
             position: absolute;
@@ -94,7 +99,7 @@
             table tbody tr td {
               .table-expanded-row-fixed {
                 margin: -$table-padding-vertical-md
-                  (-$table-padding-horizontal-md - 1);
+                  calc(calc($table-padding-horizontal-md - 1px) * -1);
               }
             }
           }
@@ -108,7 +113,7 @@
             table tbody tr td {
               .table-expanded-row-fixed {
                 margin: -$table-padding-vertical-sm
-                  (-$table-padding-horizontal-sm - 1);
+                  calc(calc($table-padding-horizontal-sm - 1px) * -1);
               }
             }
           }
@@ -189,7 +194,8 @@
 
       table tbody tr td {
         .table-expanded-row-fixed {
-          margin: -$table-padding-vertical (-$table-padding-horizontal - 1);
+          margin: -$table-padding-vertical
+            calc(calc($table-padding-horizontal - 1px) * -1);
 
           &:after {
             position: absolute;
@@ -209,7 +215,7 @@
             table tbody tr td {
               .table-expanded-row-fixed {
                 margin: -$table-padding-vertical-md
-                  (-$table-padding-horizontal-md - 1);
+                  calc(calc($table-padding-horizontal-md - 1px) * -1);
               }
             }
           }
@@ -223,7 +229,7 @@
             table tbody tr td {
               .table-expanded-row-fixed {
                 margin: -$table-padding-vertical-sm
-                  (-$table-padding-horizontal-sm - 1);
+                  calc(calc($table-padding-horizontal-sm - 1px) * -1);
               }
             }
           }
@@ -264,10 +270,6 @@
 
           border-right: $table-border-width $table-border-style
             $table-border-color;
-
-          &:last-of-type {
-            border-right: none;
-          }
         }
 
         tbody tr td,
@@ -305,7 +307,8 @@
 
       table tbody tr td {
         .table-expanded-row-fixed {
-          margin: -$table-padding-vertical (-$table-padding-horizontal - 1);
+          margin: -$table-padding-vertical
+            calc(calc($table-padding-horizontal - 1px) * -1);
 
           &:after {
             position: absolute;
@@ -325,7 +328,7 @@
             table tbody tr td {
               .table-expanded-row-fixed {
                 margin: -$table-padding-vertical-md
-                  (-$table-padding-horizontal-md - 1);
+                  calc(calc($table-padding-horizontal-md - 1px) * -1);
               }
             }
           }
@@ -339,7 +342,7 @@
             table tbody tr td {
               .table-expanded-row-fixed {
                 margin: -$table-padding-vertical-sm
-                  (-$table-padding-horizontal-sm - 1);
+                  calc(calc($table-padding-horizontal-sm - 1px) * -1);
               }
             }
           }
@@ -388,14 +391,24 @@
           &:first-of-type {
             border-left: none;
           }
+        }
 
+        thead tr th,
+        tbody tr td,
+        tfoot tr th,
+        tfoot tr td {
           border-right: $table-border-width $table-border-style
             $table-border-color;
+        }
 
+        tbody tr td,
+        tfoot tr th,
+        tfoot tr td {
           &:last-of-type {
             border-right: none;
           }
         }
+
         thead {
           tr th {
             border-bottom: $table-border;
@@ -425,7 +438,8 @@
 
       table tbody tr td {
         .table-expanded-row-fixed {
-          margin: -$table-padding-vertical (-$table-padding-horizontal - 1);
+          margin: -$table-padding-vertical
+            calc(calc($table-padding-horizontal - 1px) * -1);
 
           &:after {
             position: absolute;
@@ -445,7 +459,7 @@
             table tbody tr td {
               .table-expanded-row-fixed {
                 margin: -$table-padding-vertical-md
-                  (-$table-padding-horizontal-md - 1);
+                  calc(calc($table-padding-horizontal-md - 1px) * -1);
               }
             }
           }
@@ -459,7 +473,7 @@
             table tbody tr td {
               .table-expanded-row-fixed {
                 margin: -$table-padding-vertical-sm
-                  (-$table-padding-horizontal-sm - 1);
+                  calc(calc($table-padding-horizontal-sm - 1px) * -1);
               }
             }
           }
@@ -521,7 +535,7 @@
             table tbody tr td {
               .table-expanded-row-fixed {
                 margin: -$table-padding-vertical-md
-                  (-$table-padding-horizontal-md - 1);
+                  calc(calc($table-padding-horizontal-md - 1px) * -1);
               }
             }
           }
@@ -535,7 +549,7 @@
             table tbody tr td {
               .table-expanded-row-fixed {
                 margin: -$table-padding-vertical-sm
-                  (-$table-padding-horizontal-sm - 1);
+                  calc(calc($table-padding-horizontal-sm - 1px) * -1);
               }
             }
           }

diff --git a/src/components/Table/Styles/mixins.scss b/src/components/Table/Styles/mixins.scss
@@ -7,7 +7,7 @@ $border: $border-width solid $border-color;
   text-decoration: none;
   outline: none;
   cursor: pointer;
-  transition: color 0.3s;
+  transition: color $motion-duration-extra-fast;
 
   &:focus,
   &:hover {