feat: table: adds column border and disable row bg hover color props (#…

…624)
EightfoldAI · Jun 1, 2023 · 78a333d · 78a333d
1 parent 3576613
commit 78a333d
Show file tree

Hide file tree

Showing 46 changed files with 238 additions and 94 deletions.
diff --git a/src/components/Table/Internal/OcTable.tsx b/src/components/Table/Internal/OcTable.tsx
@@ -113,6 +113,7 @@ function OcTable<RecordType extends DefaultRecordType>(
     onRow,
     onHeaderRow,
     transformColumns,
+    rowHoverBackgroundEnabled = true,
     sticky,
     headerClassName,
     onRowHoverEnter,
@@ -713,6 +714,9 @@ function OcTable<RecordType extends DefaultRecordType>(
       className={mergeClasses([
         styles.table,
         { [styles.tableBordered]: bordered },
+        {
+          [styles.tableRowHover]: rowHoverBackgroundEnabled,
+        },
         { [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
@@ -502,6 +502,11 @@ export interface OcTableProps<RecordType = unknown> {
    * The custom class name of Table row.
    */
   rowClassName?: string | RowClassName<RecordType>;
+  /**
+   * Enables row background hover color.
+   * @default true
+   */
+  rowHoverBackgroundEnabled?: boolean;
   /**
    * Table Row's unique key.
    * May be a string or function that returns a string.

diff --git a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.childrencolname.shot b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.childrencolname.shot
@@ -4,7 +4,7 @@ exports[`Table.Expand childrenColumnName 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table",
+      "class": "table table-row-hover",
     },
     "children": Array [
       Node {

diff --git a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.expandable1.shot b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.expandable1.shot
@@ -4,7 +4,7 @@ exports[`Table.Expand work in expandable fix 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table table-fixed-column table-scroll-horizontal table-has-fix-left",
+      "class": "table table-row-hover table-fixed-column table-scroll-horizontal table-has-fix-left",
     },
     "children": Array [
       Node {

diff --git a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.expandable2.shot b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.expandable2.shot
@@ -4,7 +4,7 @@ exports[`Table.Expand work in expandable fix 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table table-fixed-column table-scroll-horizontal table-has-fix-left",
+      "class": "table table-row-hover table-fixed-column table-scroll-horizontal table-has-fix-left",
     },
     "children": Array [
       Node {

diff --git a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.nonestinvalidchildren.shot b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.nonestinvalidchildren.shot
@@ -4,7 +4,7 @@ exports[`Table.Expand not use nest when children is invalid 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table",
+      "class": "table table-row-hover",
     },
     "children": Array [
       Node {

diff --git a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.renderfixedcol.shot b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.renderfixedcol.shot
@@ -4,7 +4,7 @@ exports[`Table.Expand renders fixed column correctly work 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table table-fixed-column table-scroll-horizontal table-has-fix-left table-has-fix-right",
+      "class": "table table-row-hover table-fixed-column table-scroll-horizontal table-has-fix-left table-has-fix-right",
     },
     "children": Array [
       Node {

diff --git a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.rendertree.shot b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.rendertree.shot
@@ -4,7 +4,7 @@ exports[`Table.Expand renders tree row correctly 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table",
+      "class": "table table-row-hover",
     },
     "children": Array [
       Node {

diff --git a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.rendertreechildren.shot b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.rendertreechildren.shot
@@ -4,7 +4,7 @@ exports[`Table.Expand renders tree row correctly with different children 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table",
+      "class": "table table-row-hover",
     },
     "children": Array [
       Node {

diff --git a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.scrollunset1.shot b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.scrollunset1.shot
@@ -4,7 +4,7 @@ exports[`Table.Expand does not crash if scroll is not set 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table table-fixed-column table-scroll-horizontal table-has-fix-left",
+      "class": "table table-row-hover table-fixed-column table-scroll-horizontal table-has-fix-left",
     },
     "children": Array [
       Node {

diff --git a/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.scrollunset2.shot b/src/components/Table/Internal/Tests/__snapshots__/ExpandRow.scrollunset2.shot
@@ -4,7 +4,7 @@ exports[`Table.Expand does not crash if scroll is not set 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table table-fixed-column table-scroll-horizontal table-has-fix-left",
+      "class": "table table-row-hover table-fixed-column table-scroll-horizontal table-has-fix-left",
     },
     "children": Array [
       Node {

diff --git a/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.renderwithdata.shot b/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.renderwithdata.shot
@@ -4,7 +4,7 @@ exports[`Table.FixedColumn renders correctly scrollX - withdata 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table table-fixed-column table-scroll-horizontal table-has-fix-left table-has-fix-right",
+      "class": "table table-row-hover table-fixed-column table-scroll-horizontal table-has-fix-left table-has-fix-right",
     },
     "children": Array [
       Node {
@@ -5519,7 +5519,7 @@ exports[`Table.FixedColumn renders correctly scrollXY - withdata 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table table-fixed-header table-fixed-column table-scroll-horizontal table-has-fix-left table-has-fix-right",
+      "class": "table table-row-hover table-fixed-header table-fixed-column table-scroll-horizontal table-has-fix-left table-has-fix-right",
     },
     "children": Array [
       Node {

diff --git a/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.renderwithoutdata.shot b/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.renderwithoutdata.shot
@@ -4,7 +4,7 @@ exports[`Table.FixedColumn renders correctly scrollX - withoutdata 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table table-fixed-column table-scroll-horizontal table-has-fix-left table-has-fix-right",
+      "class": "table table-row-hover table-fixed-column table-scroll-horizontal table-has-fix-left table-has-fix-right",
     },
     "children": Array [
       Node {
@@ -4475,7 +4475,7 @@ exports[`Table.FixedColumn renders correctly scrollXY - withoutdata 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table table-fixed-header table-fixed-column table-scroll-horizontal table-has-fix-left table-has-fix-right",
+      "class": "table table-row-hover table-fixed-header table-fixed-column table-scroll-horizontal table-has-fix-left table-has-fix-right",
     },
     "children": Array [
       Node {

diff --git a/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.rtl.shot b/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.rtl.shot
@@ -4,7 +4,7 @@ exports[`Table.FixedColumn fixed column renders correctly RTL 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table table-rtl table-fixed-column table-scroll-horizontal table-has-fix-left",
+      "class": "table table-row-hover table-rtl table-fixed-column table-scroll-horizontal table-has-fix-left",
     },
     "children": Array [
       Node {

diff --git a/src/components/Table/Internal/Tests/__snapshots__/Table.colchildrenundefined.shot b/src/components/Table/Internal/Tests/__snapshots__/Table.colchildrenundefined.shot
@@ -4,7 +4,7 @@ exports[`Table.Basic renders correctly column children undefined 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table",
+      "class": "table table-row-hover",
     },
     "children": Array [
       Node {

diff --git a/src/components/Table/Internal/Tests/__snapshots__/Table.customcomponents.shot b/src/components/Table/Internal/Tests/__snapshots__/Table.customcomponents.shot
@@ -4,7 +4,7 @@ exports[`Table.Basic custom components renders correctly 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table",
+      "class": "table table-row-hover",
     },
     "children": Array [
       Node {

diff --git a/src/components/Table/Internal/Tests/__snapshots__/Table.falseycols.shot b/src/components/Table/Internal/Tests/__snapshots__/Table.falseycols.shot
@@ -4,7 +4,7 @@ exports[`Table.Basic renders correctly falsy columns 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table",
+      "class": "table table-row-hover",
     },
     "children": Array [
       Node {

diff --git a/src/components/Table/Internal/Tests/__snapshots__/Table.nocols.shot b/src/components/Table/Internal/Tests/__snapshots__/Table.nocols.shot
@@ -4,7 +4,7 @@ exports[`Table.Basic renders correctly no columns 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table",
+      "class": "table table-row-hover",
     },
     "children": Array [
       Node {

diff --git a/src/components/Table/Internal/Tests/__snapshots__/Table.renderbasic.shot b/src/components/Table/Internal/Tests/__snapshots__/Table.renderbasic.shot
@@ -4,7 +4,7 @@ exports[`Table.Basic renders correctly basic 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table test-class-name",
+      "class": "table table-row-hover test-class-name",
     },
     "children": Array [
       Node {

diff --git a/src/components/Table/Internal/Tests/__snapshots__/Table.rendercolspan.shot b/src/components/Table/Internal/Tests/__snapshots__/Table.rendercolspan.shot
@@ -4,7 +4,7 @@ exports[`Table.Basic renders colSpan correctly 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table",
+      "class": "table table-row-hover",
     },
     "children": Array [
       Node {

diff --git a/src/components/Table/Internal/Tests/__snapshots__/Table.renderfixedcolheader.shot b/src/components/Table/Internal/Tests/__snapshots__/Table.renderfixedcolheader.shot
@@ -4,7 +4,7 @@ exports[`Table.Basic custom components renders fixed column and header correctly
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table table-fixed-header table-fixed-column table-scroll-horizontal table-has-fix-left table-has-fix-right",
+      "class": "table table-row-hover table-fixed-header table-fixed-column table-scroll-horizontal table-has-fix-left table-has-fix-right",
     },
     "children": Array [
       Node {

diff --git a/src/components/Table/Internal/Tests/__snapshots__/Table.renderrowspan.shot b/src/components/Table/Internal/Tests/__snapshots__/Table.renderrowspan.shot
@@ -4,7 +4,7 @@ exports[`Table.Basic renders rowSpan correctly 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table",
+      "class": "table table-row-hover",
     },
     "children": Array [
       Node {

diff --git a/src/components/Table/Internal/Tests/__snapshots__/Table.rtl.shot b/src/components/Table/Internal/Tests/__snapshots__/Table.rtl.shot
@@ -4,7 +4,7 @@ exports[`Table.Basic renders correctly RTL 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table table-rtl test-class-name",
+      "class": "table table-row-hover table-rtl test-class-name",
     },
     "children": Array [
       Node {

diff --git a/src/components/Table/Internal/Tests/__snapshots__/Table.scrollcontent.shot b/src/components/Table/Internal/Tests/__snapshots__/Table.scrollcontent.shot
@@ -4,7 +4,7 @@ exports[`Table.Basic custom components scroll content with scroll 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table table-fixed-header table-scroll-horizontal",
+      "class": "table table-row-hover table-fixed-header table-scroll-horizontal",
     },
     "children": Array [
       Node {

diff --git a/src/components/Table/Internal/Tests/__snapshots__/Table.sugar.shot b/src/components/Table/Internal/Tests/__snapshots__/Table.sugar.shot
@@ -4,7 +4,7 @@ exports[`Table.Basic syntactic sugar 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table",
+      "class": "table table-row-hover",
     },
     "children": Array [
       Node {

diff --git a/src/components/Table/Internal/Tests/__snapshots__/Table.transformcols.shot b/src/components/Table/Internal/Tests/__snapshots__/Table.transformcols.shot
@@ -4,7 +4,7 @@ exports[`Table.Basic internal api transformColumns basic 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "table",
+      "class": "table table-row-hover",
     },
     "children": Array [
       Node {

diff --git a/src/components/Table/Internal/octable.module.scss b/src/components/Table/Internal/octable.module.scss
@@ -193,34 +193,38 @@
     &:last-of-type {
       border-right: none;
     }
+  }
 
-    &-row-hover {
-      background-color: $table-row-hover-background-color;
+  &-row-hover {
+    .table-cell {
+      &-row-hover {
+        background-color: $table-row-hover-background-color;
 
-      &:first-of-type {
-        &:before {
-          border-left: 2px solid $table-border-active-color;
+        &:first-of-type {
+          &:before {
+            border-left: 2px solid $table-border-active-color;
+          }
         }
-      }
 
-      &:last-of-type {
-        &:before {
-          border-right: 2px solid $table-border-active-color;
-          width: 100%;
+        &:last-of-type {
+          &:before {
+            border-right: 2px solid $table-border-active-color;
+            width: 100%;
+          }
         }
-      }
 
-      &:before {
-        border-bottom: 2px solid $table-border-active-color;
-        border-top: 2px solid $table-border-active-color;
-        content: '';
-        height: 100%;
-        left: 0;
-        pointer-events: none;
-        position: absolute;
-        top: 0;
-        width: calc(100% + 2px);
-        z-index: 2;
+        &:before {
+          border-bottom: 2px solid $table-border-active-color;
+          border-top: 2px solid $table-border-active-color;
+          content: '';
+          height: 100%;
+          left: 0;
+          pointer-events: none;
+          position: absolute;
+          top: 0;
+          width: calc(100% + 2px);
+          z-index: 2;
+        }
       }
     }
   }