From 78a333dc5d047674ce2b838859b31fe4321a1527 Mon Sep 17 00:00:00 2001 From: Dylan <99700808+dkilgore-eightfold@users.noreply.github.com> Date: Thu, 1 Jun 2023 09:43:58 -0700 Subject: [PATCH] feat: table: adds column border and disable row bg hover color props (#624) --- src/components/Table/Internal/OcTable.tsx | 4 ++ .../Table/Internal/OcTable.types.ts | 5 ++ .../ExpandRow.childrencolname.shot | 2 +- .../__snapshots__/ExpandRow.expandable1.shot | 2 +- .../__snapshots__/ExpandRow.expandable2.shot | 2 +- .../ExpandRow.nonestinvalidchildren.shot | 2 +- .../ExpandRow.renderfixedcol.shot | 2 +- .../__snapshots__/ExpandRow.rendertree.shot | 2 +- .../ExpandRow.rendertreechildren.shot | 2 +- .../__snapshots__/ExpandRow.scrollunset1.shot | 2 +- .../__snapshots__/ExpandRow.scrollunset2.shot | 2 +- .../FixedColumn.renderwithdata.shot | 4 +- .../FixedColumn.renderwithoutdata.shot | 4 +- .../Tests/__snapshots__/FixedColumn.rtl.shot | 2 +- .../Table.colchildrenundefined.shot | 2 +- .../__snapshots__/Table.customcomponents.shot | 2 +- .../Tests/__snapshots__/Table.falseycols.shot | 2 +- .../Tests/__snapshots__/Table.nocols.shot | 2 +- .../__snapshots__/Table.renderbasic.shot | 2 +- .../__snapshots__/Table.rendercolspan.shot | 2 +- .../Table.renderfixedcolheader.shot | 2 +- .../__snapshots__/Table.renderrowspan.shot | 2 +- .../Tests/__snapshots__/Table.rtl.shot | 2 +- .../__snapshots__/Table.scrollcontent.shot | 2 +- .../Tests/__snapshots__/Table.sugar.shot | 2 +- .../__snapshots__/Table.transformcols.shot | 2 +- .../Table/Internal/octable.module.scss | 48 +++++++------ src/components/Table/Styles/bordered.scss | 71 +++++++++++++++++++ src/components/Table/Styles/table.module.scss | 54 +++++++++----- src/components/Table/Table.stories.tsx | 16 ++++- src/components/Table/Table.tsx | 20 +++++- src/components/Table/Table.types.tsx | 10 +++ .../__snapshots__/Table.expand.test.tsx.snap | 4 +- .../__snapshots__/Table.filter.test.js.snap | 6 +- .../Table.fixselectionexpandonleft.shot | 2 +- .../__snapshots__/Table.fixselectionleft.shot | 2 +- .../Table.fixselectionwithcols.shot | 2 +- .../Table.pagination.accepttrue.shot | 4 +- .../Table.pagination.nocrashonchange.shot | 4 +- .../Table.pagination.position.shot | 4 +- .../Table.pagination.renders.shot | 4 +- .../__snapshots__/Table.sorter.test.js.snap | 12 ++-- .../Tests/__snapshots__/Table.test.js.snap | 2 +- .../Table.usecolselectionwithkey.shot | 2 +- .../Tests/__snapshots__/empty.render.shot | 2 +- .../__snapshots__/empty.renderfixedcols.shot | 2 +- 46 files changed, 238 insertions(+), 94 deletions(-) diff --git a/src/components/Table/Internal/OcTable.tsx b/src/components/Table/Internal/OcTable.tsx index f8e043e8..e1a603b7 100644 --- a/src/components/Table/Internal/OcTable.tsx +++ b/src/components/Table/Internal/OcTable.tsx @@ -113,6 +113,7 @@ function OcTable( onRow, onHeaderRow, transformColumns, + rowHoverBackgroundEnabled = true, sticky, headerClassName, onRowHoverEnter, @@ -713,6 +714,9 @@ function OcTable( 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 index 5adf84d2..193d1740 100644 --- a/src/components/Table/Internal/OcTable.types.ts +++ b/src/components/Table/Internal/OcTable.types.ts @@ -502,6 +502,11 @@ export interface OcTableProps { * The custom class name of Table row. */ rowClassName?: string | RowClassName; + /** + * 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 index a6415244..ce24620d 100644 --- 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 index 0e483fae..cbbeba8f 100644 --- 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 index 0e483fae..cbbeba8f 100644 --- 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 index aca781d9..0094d50e 100644 --- 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 index 06598e18..047e7214 100644 --- 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 index 5f2b2a48..24894114 100644 --- 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 index 54bef170..3fa0241a 100644 --- 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 index 916d7c3c..a803bb2a 100644 --- 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 index 916d7c3c..a803bb2a 100644 --- 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 index 8e1b6b4b..65f0fe08 100644 --- 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 index d8905d89..49f24ce0 100644 --- 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 index 51563c31..bacca5ba 100644 --- 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 index 5c28808f..f6ae5ae0 100644 --- 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 index c1c4d302..8b424575 100644 --- 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 index 0769a532..c3fdfed8 100644 --- 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 index 93617b7a..308aac45 100644 --- 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 index 3495c739..9b11884e 100644 --- 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 index 769c61ed..6e530b46 100644 --- 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 index 7ac93601..7b0d65a8 100644 --- 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 index 16cb10a8..f1c3067c 100644 --- 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 index c0f0f102..94ece347 100644 --- 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 index 5d1b0dc3..5ffa940c 100644 --- 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 index a3e798b5..ce182c2c 100644 --- 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 index 2fe88203..089fd441 100644 --- 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 index 040e5984..43fea861 100644 --- 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; + } } } } diff --git a/src/components/Table/Styles/bordered.scss b/src/components/Table/Styles/bordered.scss index 59096812..3b4f9061 100644 --- a/src/components/Table/Styles/bordered.scss +++ b/src/components/Table/Styles/bordered.scss @@ -570,5 +570,76 @@ } } } + + &-column-bordered { + .table-title:not(:last-of-type) { + border-right: $table-border; + } + + table { + border-collapse: separate; + border-spacing: 0; + + thead { + tr th:not(:last-of-type) { + border-right: $table-border; + } + + tr th { + &:before { + background-color: transparent !important; + } + } + } + + tbody { + tr td:not(:last-of-type) { + border-right: $table-border; + } + } + } + + &.table-middle { + .table-container { + .table-content, + .table-body { + table tbody tr td { + .table-expanded-row-fixed { + margin: -$table-padding-vertical-md + calc(calc($table-padding-horizontal-md - 1px) * -1); + } + } + } + } + } + + &.table-small { + .table-container { + .table-content, + .table-body { + table tbody tr td { + .table-expanded-row-fixed { + margin: -$table-padding-vertical-sm + calc(calc($table-padding-horizontal-sm - 1px) * -1); + } + } + } + } + } + + .table-footer { + border-right: $table-border; + } + + .table-cell { + .table-container:first-child { + border-right: 0; + } + + &-scrollbar:not([rowspan]) { + box-shadow: 0 1px 0 1px $table-header-background-color; + } + } + } } } diff --git a/src/components/Table/Styles/table.module.scss b/src/components/Table/Styles/table.module.scss index bef8afd6..7bda3fd3 100644 --- a/src/components/Table/Styles/table.module.scss +++ b/src/components/Table/Styles/table.module.scss @@ -132,22 +132,11 @@ } } - &.table-row:hover td, - td.table-cell-row-hover { - background: $table-row-hover-background-color; - } - &.table-row-selected { td { background: $table-row-selected-background-color; border-color: rgba(0, 0, 0, 0.03); } - - &:hover { - td { - background: $table-row-selected-hover-background-color; - } - } } } } @@ -333,6 +322,10 @@ width: $table-selection-column-width + 18px; } + &-column-bordered &-selection-col { + width: $table-selection-column-width + 18px; + } + table tr th, table tr td { &.table-selection-column { @@ -375,12 +368,6 @@ td { background-color: $table-background-alternate-color; } - - &:hover { - td { - background-color: $table-row-hover-background-color; - } - } } } } @@ -697,6 +684,39 @@ } } } + + &-row-hover { + .table-tbody { + tr { + &.table-row:hover td, + td.table-cell-row-hover { + background: $table-row-hover-background-color; + } + + &.table-row-selected { + &:hover { + td { + background: $table-row-selected-hover-background-color; + } + } + } + } + } + + &.table-alternate { + tbody { + tr { + &:nth-child(odd) { + &:hover { + td { + background-color: $table-row-hover-background-color; + } + } + } + } + } + } + } } } diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx index 86197540..f156e3f2 100644 --- a/src/components/Table/Table.stories.tsx +++ b/src/components/Table/Table.stories.tsx @@ -1252,7 +1252,8 @@ const VirtualTable = (props: Parameters[0]) => { columnCount={mergedColumns.length} columnWidth={(index: number) => { const { width } = mergedColumns[index]; - return totalHeight > scroll!.y! && index === mergedColumns.length - 1 + return totalHeight > Number(scroll!.y!) && + index === mergedColumns.length - 1 ? (width as number) - scrollbarSize - 1 : (width as number); }} @@ -1369,6 +1370,8 @@ export const Header_Bordered = Table_Base_Story.bind({}); export const Inner_Bordered = Table_Base_Story.bind({}); export const Outer_Bordered = Table_Base_Story.bind({}); export const Row_Bordered = Table_Base_Story.bind({}); +export const Column_Bordered = Table_Base_Story.bind({}); +export const Row_Hover_Background_Disabled = Table_Base_Story.bind({}); export const Small = Table_Base_Story.bind({}); export const Medium = Table_Base_Story.bind({}); export const Large = Table_Base_Story.bind({}); @@ -1471,6 +1474,17 @@ Row_Bordered.args = { rowBordered: true, }; +Column_Bordered.args = { + ...tableArgs, + bordered: false, + columnBordered: true, +}; + +Row_Hover_Background_Disabled.args = { + ...tableArgs, + rowHoverBackgroundEnabled: false, +}; + Small.args = { ...tableArgs, size: TableSize.Small, diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 23d23aa8..e164b20c 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -78,6 +78,7 @@ function InternalTable( children, classNames, collapseText: defaultCollapseText, + columnBordered = false, columns, dataSource, emptyText: defaultEmptyText, @@ -103,6 +104,7 @@ function InternalTable( pagination, rowBordered = false, rowClassName, + rowHoverBackgroundEnabled = true, rowKey, rowSelection, scroll, @@ -756,7 +758,11 @@ function InternalTable( { [styles.tableBordered]: bordered }, { [styles.tableCellBordered]: - !bordered && !rowBordered && !innerBordered && cellBordered, + !bordered && + !rowBordered && + !innerBordered && + !columnBordered && + cellBordered, }, { [styles.tableHeaderBordered]: @@ -775,7 +781,10 @@ function InternalTable( }, { [styles.tableInnerBordered]: - !bordered && !rowBordered && innerBordered, + !bordered && + !rowBordered && + !columnBordered && + innerBordered, }, { [styles.tableOuterBordered]: !bordered && outerBordered, @@ -784,6 +793,13 @@ function InternalTable( [styles.tableRowBordered]: !bordered && !innerBordered && rowBordered, }, + { + [styles.tableColumnBordered]: + !bordered && !innerBordered && columnBordered, + }, + { + [styles.tableRowHover]: rowHoverBackgroundEnabled, + }, { [styles.tableEmpty]: rawData.length === 0 }, ])} bordered={bordered} diff --git a/src/components/Table/Table.types.tsx b/src/components/Table/Table.types.tsx index aa840b3e..1432d609 100644 --- a/src/components/Table/Table.types.tsx +++ b/src/components/Table/Table.types.tsx @@ -394,6 +394,11 @@ export interface TableProps * @default 'Collapse row' */ collapseText?: string; + /** + * Show only the Table column borders. + * @default false + */ + columnBordered?: boolean; /** * The Table columns. */ @@ -491,6 +496,11 @@ export interface TableProps * Show only the Table cell bottom borders. */ rowBordered?: boolean; + /** + * Enables row background hover color. + * @default true + */ + rowHoverBackgroundEnabled?: boolean; /** * Configure Table Row selection. */ diff --git a/src/components/Table/Tests/__snapshots__/Table.expand.test.tsx.snap b/src/components/Table/Tests/__snapshots__/Table.expand.test.tsx.snap index a158a16c..525e8986 100644 --- a/src/components/Table/Tests/__snapshots__/Table.expand.test.tsx.snap +++ b/src/components/Table/Tests/__snapshots__/Table.expand.test.tsx.snap @@ -9,7 +9,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { - "class": "table table table-medium table-alternate", + "class": "table table-row-hover table table-medium table-alternate table-row-hover", }, "children": Array [ Node { @@ -2296,7 +2296,7 @@ LoadedCheerio { "parent": [Circular], "prev": Node { "attribs": Object { - "class": "table table table-medium table-alternate", + "class": "table table-row-hover table table-medium table-alternate table-row-hover", }, "children": Array [ Node { diff --git a/src/components/Table/Tests/__snapshots__/Table.filter.test.js.snap b/src/components/Table/Tests/__snapshots__/Table.filter.test.js.snap index 1e41f78d..28e3a358 100644 --- a/src/components/Table/Tests/__snapshots__/Table.filter.test.js.snap +++ b/src/components/Table/Tests/__snapshots__/Table.filter.test.js.snap @@ -9,7 +9,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { - "class": "table table table-medium table-alternate", + "class": "table table-row-hover table table-medium table-alternate table-row-hover", }, "children": Array [ Node { @@ -3695,7 +3695,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { - "class": "table table table-medium table-alternate", + "class": "table table-row-hover table table-medium table-alternate table-row-hover", }, "children": Array [ Node { @@ -7381,7 +7381,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { - "class": "table table table-medium table-alternate", + "class": "table table-row-hover table table-medium table-alternate table-row-hover", }, "children": Array [ Node { diff --git a/src/components/Table/Tests/__snapshots__/Table.fixselectionexpandonleft.shot b/src/components/Table/Tests/__snapshots__/Table.fixselectionexpandonleft.shot index 727252b6..f976a3aa 100644 --- a/src/components/Table/Tests/__snapshots__/Table.fixselectionexpandonleft.shot +++ b/src/components/Table/Tests/__snapshots__/Table.fixselectionexpandonleft.shot @@ -9,7 +9,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { - "class": "table table-fixed-column table-scroll-horizontal table-has-fix-left table table-medium table-alternate", + "class": "table table-row-hover table-fixed-column table-scroll-horizontal table-has-fix-left table table-medium table-alternate table-row-hover", }, "children": Array [ Node { diff --git a/src/components/Table/Tests/__snapshots__/Table.fixselectionleft.shot b/src/components/Table/Tests/__snapshots__/Table.fixselectionleft.shot index 92a3173c..53a54a66 100644 --- a/src/components/Table/Tests/__snapshots__/Table.fixselectionleft.shot +++ b/src/components/Table/Tests/__snapshots__/Table.fixselectionleft.shot @@ -9,7 +9,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { - "class": "table table-fixed-column table-scroll-horizontal table-has-fix-left table table-medium table-alternate", + "class": "table table-row-hover table-fixed-column table-scroll-horizontal table-has-fix-left table table-medium table-alternate table-row-hover", }, "children": Array [ Node { diff --git a/src/components/Table/Tests/__snapshots__/Table.fixselectionwithcols.shot b/src/components/Table/Tests/__snapshots__/Table.fixselectionwithcols.shot index 7ba1648c..0095cfd1 100644 --- a/src/components/Table/Tests/__snapshots__/Table.fixselectionwithcols.shot +++ b/src/components/Table/Tests/__snapshots__/Table.fixselectionwithcols.shot @@ -9,7 +9,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { - "class": "table table-fixed-column table-scroll-horizontal table-has-fix-left table table-medium table-alternate", + "class": "table table-row-hover table-fixed-column table-scroll-horizontal table-has-fix-left table table-medium table-alternate table-row-hover", }, "children": Array [ Node { diff --git a/src/components/Table/Tests/__snapshots__/Table.pagination.accepttrue.shot b/src/components/Table/Tests/__snapshots__/Table.pagination.accepttrue.shot index 1fbe1be5..b1365165 100644 --- a/src/components/Table/Tests/__snapshots__/Table.pagination.accepttrue.shot +++ b/src/components/Table/Tests/__snapshots__/Table.pagination.accepttrue.shot @@ -9,7 +9,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { - "class": "table table table-medium table-alternate", + "class": "table table-row-hover table table-medium table-alternate table-row-hover", }, "children": Array [ Node { @@ -1324,7 +1324,7 @@ LoadedCheerio { "parent": [Circular], "prev": Node { "attribs": Object { - "class": "table table table-medium table-alternate", + "class": "table table-row-hover table table-medium table-alternate table-row-hover", }, "children": Array [ Node { diff --git a/src/components/Table/Tests/__snapshots__/Table.pagination.nocrashonchange.shot b/src/components/Table/Tests/__snapshots__/Table.pagination.nocrashonchange.shot index fffa958b..fec0983d 100644 --- a/src/components/Table/Tests/__snapshots__/Table.pagination.nocrashonchange.shot +++ b/src/components/Table/Tests/__snapshots__/Table.pagination.nocrashonchange.shot @@ -9,7 +9,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { - "class": "table table table-medium table-alternate", + "class": "table table-row-hover table table-medium table-alternate table-row-hover", }, "children": Array [ Node { @@ -1324,7 +1324,7 @@ LoadedCheerio { "parent": [Circular], "prev": Node { "attribs": Object { - "class": "table table table-medium table-alternate", + "class": "table table-row-hover table table-medium table-alternate table-row-hover", }, "children": Array [ Node { diff --git a/src/components/Table/Tests/__snapshots__/Table.pagination.position.shot b/src/components/Table/Tests/__snapshots__/Table.pagination.position.shot index ebb604ea..bd79ac9c 100644 --- a/src/components/Table/Tests/__snapshots__/Table.pagination.position.shot +++ b/src/components/Table/Tests/__snapshots__/Table.pagination.position.shot @@ -9,7 +9,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { - "class": "table table table-medium table-alternate", + "class": "table table-row-hover table table-medium table-alternate table-row-hover", }, "children": Array [ Node { @@ -1324,7 +1324,7 @@ LoadedCheerio { "parent": [Circular], "prev": Node { "attribs": Object { - "class": "table table table-medium table-alternate", + "class": "table table-row-hover table table-medium table-alternate table-row-hover", }, "children": Array [ Node { diff --git a/src/components/Table/Tests/__snapshots__/Table.pagination.renders.shot b/src/components/Table/Tests/__snapshots__/Table.pagination.renders.shot index 5c426bbd..2c35e036 100644 --- a/src/components/Table/Tests/__snapshots__/Table.pagination.renders.shot +++ b/src/components/Table/Tests/__snapshots__/Table.pagination.renders.shot @@ -9,7 +9,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { - "class": "table table table-medium table-alternate", + "class": "table table-row-hover table table-medium table-alternate table-row-hover", }, "children": Array [ Node { @@ -1324,7 +1324,7 @@ LoadedCheerio { "parent": [Circular], "prev": Node { "attribs": Object { - "class": "table table table-medium table-alternate", + "class": "table table-row-hover table table-medium table-alternate table-row-hover", }, "children": Array [ Node { diff --git a/src/components/Table/Tests/__snapshots__/Table.sorter.test.js.snap b/src/components/Table/Tests/__snapshots__/Table.sorter.test.js.snap index c7d90537..599dc0bf 100644 --- a/src/components/Table/Tests/__snapshots__/Table.sorter.test.js.snap +++ b/src/components/Table/Tests/__snapshots__/Table.sorter.test.js.snap @@ -1586,7 +1586,7 @@ LoadedCheerio { "next": null, "parent": Node { "attribs": Object { - "class": "table table table-medium table-alternate", + "class": "table table-row-hover table table-medium table-alternate table-row-hover", }, "children": Array [ [Circular], @@ -2487,7 +2487,7 @@ LoadedCheerio { "next": null, "parent": Node { "attribs": Object { - "class": "table table table-medium table-alternate", + "class": "table table-row-hover table table-medium table-alternate table-row-hover", }, "children": Array [ [Circular], @@ -3374,7 +3374,7 @@ LoadedCheerio { "next": null, "parent": Node { "attribs": Object { - "class": "table table table-medium table-alternate", + "class": "table table-row-hover table table-medium table-alternate table-row-hover", }, "children": Array [ [Circular], @@ -3550,7 +3550,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { - "class": "table table table-medium table-alternate", + "class": "table table-row-hover table table-medium table-alternate table-row-hover", }, "children": Array [ Node { @@ -8452,7 +8452,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { - "class": "table table table-medium table-alternate", + "class": "table table-row-hover table table-medium table-alternate table-row-hover", }, "children": Array [ Node { @@ -11531,7 +11531,7 @@ LoadedCheerio { "parent": [Circular], "prev": Node { "attribs": Object { - "class": "table table table-medium table-alternate", + "class": "table table-row-hover table table-medium table-alternate table-row-hover", }, "children": Array [ Node { diff --git a/src/components/Table/Tests/__snapshots__/Table.test.js.snap b/src/components/Table/Tests/__snapshots__/Table.test.js.snap index 0cc12169..fd44dc9c 100644 --- a/src/components/Table/Tests/__snapshots__/Table.test.js.snap +++ b/src/components/Table/Tests/__snapshots__/Table.test.js.snap @@ -9,7 +9,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { - "class": "table table table-medium table-alternate", + "class": "table table-row-hover table table-medium table-alternate table-row-hover", }, "children": Array [ Node { diff --git a/src/components/Table/Tests/__snapshots__/Table.usecolselectionwithkey.shot b/src/components/Table/Tests/__snapshots__/Table.usecolselectionwithkey.shot index 8f4b2ac2..a147accf 100644 --- a/src/components/Table/Tests/__snapshots__/Table.usecolselectionwithkey.shot +++ b/src/components/Table/Tests/__snapshots__/Table.usecolselectionwithkey.shot @@ -9,7 +9,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { - "class": "table table table-medium table-alternate", + "class": "table table-row-hover table table-medium table-alternate table-row-hover", }, "children": Array [ Node { diff --git a/src/components/Table/Tests/__snapshots__/empty.render.shot b/src/components/Table/Tests/__snapshots__/empty.render.shot index 85a6921d..a7971d90 100644 --- a/src/components/Table/Tests/__snapshots__/empty.render.shot +++ b/src/components/Table/Tests/__snapshots__/empty.render.shot @@ -9,7 +9,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { - "class": "table table table-medium table-alternate table-empty", + "class": "table table-row-hover table table-medium table-alternate table-row-hover table-empty", }, "children": Array [ Node { diff --git a/src/components/Table/Tests/__snapshots__/empty.renderfixedcols.shot b/src/components/Table/Tests/__snapshots__/empty.renderfixedcols.shot index 36187374..69573475 100644 --- a/src/components/Table/Tests/__snapshots__/empty.renderfixedcols.shot +++ b/src/components/Table/Tests/__snapshots__/empty.renderfixedcols.shot @@ -9,7 +9,7 @@ LoadedCheerio { "children": Array [ Node { "attribs": Object { - "class": "table table-fixed-column table-scroll-horizontal table-has-fix-left table table-medium table-alternate table-empty", + "class": "table table-row-hover table-fixed-column table-scroll-horizontal table-has-fix-left table table-medium table-alternate table-row-hover table-empty", }, "children": Array [ Node {