diff --git a/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/Table.test.tsx.snap b/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/Table.test.tsx.snap index 59ea9eb59f4..80cbf373cb1 100644 --- a/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/Table.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/Table.test.tsx.snap @@ -56,18 +56,15 @@ exports[`Table scss have to match default theme snapshot 1`] = ` font-size: var(--font-size-small); line-height: var(--line-height-small); } -.dnb-table:not(.dnb-table--border):not(.dnb-table--outline) > tbody -> tr:last-of-type -> td::after, -.dnb-table:not(.dnb-table--border):not(.dnb-table--outline) > tbody -> .dnb-table__tr:last-of-type > .dnb-table__td::after { +.dnb-table > tbody > .dnb-table__tr:last-of-type > .dnb-table__td::after, +.dnb-table > tbody +> .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) td::after { content: ''; position: absolute; left: 0; right: 0; - bottom: -0.0625rem; - height: 0.0625rem; - background-color: var(--color-black-8); } + bottom: 0; + border-bottom: var(--outline); } " `; @@ -158,42 +155,39 @@ exports[`Table scss have to match snapshot 1`] = ` .dnb-table { --border: 0.0625rem solid var(--color-black-8); --outline: 0.0625rem solid var(--color-black-8); } - .dnb-table--border tbody .dnb-table__td { - z-index: 2; } - .dnb-table--border tbody .dnb-table__td::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: -1; - pointer-events: none; - border: var(--border); - border-right: none; - border-bottom: none; } - .dnb-table--border tbody .dnb-table__td:first-of-type::after { - border-left: none; } + .dnb-table--border tbody .dnb-table__td::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1; + pointer-events: none; + border: var(--border); + border-right: none; + border-bottom: none; } + .dnb-table--border tbody .dnb-table__td:first-of-type::after { + border-left: none; } .dnb-table:not(.dnb-table--outline) tbody .dnb-table__tr:last-of-type .dnb-table__td::after { border-bottom: var(--border); } - .dnb-table--outline thead .dnb-table__th { - z-index: 2; } - .dnb-table--outline thead .dnb-table__th::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: -1; - pointer-events: none; - border-top: var(--outline); } - .dnb-table--outline thead .dnb-table__th:first-of-type::after { - border-left: var(--outline); } - .dnb-table--outline thead .dnb-table__th:last-of-type::after { - border-right: var(--outline); } + .dnb-table--outline thead .dnb-table__th::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1; + pointer-events: none; + border-top: var(--outline); } + .dnb-table--outline thead .dnb-table__th:first-of-type::after { + border-left: var(--outline); } + .dnb-table--outline thead .dnb-table__th:last-of-type::after { + border-right: var(--outline); } .dnb-table--outline tbody .dnb-table__td { - z-index: 2; } + /* stylelint-disable */ + /* stylelint-enable */ } .dnb-table--outline tbody .dnb-table__td:first-of-type::after, .dnb-table--outline tbody .dnb-table__td:last-of-type::after { content: ''; position: absolute; @@ -201,32 +195,46 @@ exports[`Table scss have to match snapshot 1`] = ` left: 0; right: 0; bottom: 0; - z-index: -1; + z-index: 1; pointer-events: none; } .dnb-table--outline tbody .dnb-table__td:first-of-type::after { border-left: var(--outline); } .dnb-table--outline tbody .dnb-table__td:last-of-type::after { border-right: var(--outline); } - .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td { - z-index: 2; } - .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: -1; - pointer-events: none; - border-bottom: var(--outline); } + .dnb-table--outline tbody .dnb-table__td, .dnb-table--outline tbody .dnb-table__td::before, .dnb-table--outline tbody .dnb-table__td::after { + transition: border-radius 400ms var(--easing-default); } + .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1; + pointer-events: none; + border-bottom: var(--outline); } .dnb-table--outline thead .dnb-table__th:first-of-type, .dnb-table--outline thead .dnb-table__th:first-of-type::after { border-radius: 0.5rem 0 0 0; } .dnb-table--outline thead .dnb-table__th:last-of-type, .dnb-table--outline thead .dnb-table__th:last-of-type::after { border-radius: 0 0.5rem 0 0; } - .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:first-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:first-of-type::after { + .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:first-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:first-of-type::before, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:first-of-type::after, + .dnb-table--outline tbody +.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type, + .dnb-table--outline tbody +.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type::before, + .dnb-table--outline tbody +.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type::after { border-radius: 0 0 0 0.5rem; } - .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type::after { + .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type::before, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type::after, + .dnb-table--outline tbody +.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type, + .dnb-table--outline tbody +.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type::before, + .dnb-table--outline tbody +.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type::after { border-radius: 0 0 0.5rem 0; } + .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td::before, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td::after { + border-radius: 0 0 0.5rem 0.5rem; } .dnb-table__td--no-spacing, .dnb-table td.dnb-table__td--no-spacing { padding: 0; } @@ -249,10 +257,14 @@ exports[`Table scss have to match snapshot 1`] = ` .dnb-table .dnb-table__tr--odd { background-color: var(--color-white); } -.dnb-table--outline thead .dnb-table__tr:first-of-type { +.dnb-table--outline thead .dnb-table__tr:first-of-type, +.dnb-table--outline tbody +.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) { clip-path: inset(0 round 0.5rem 0.5rem 0 0); } -.dnb-table--outline tbody .dnb-table__tr:last-of-type { +.dnb-table--outline tbody .dnb-table__tr:last-of-type, +.dnb-table--outline tbody +.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) { clip-path: inset(0 round 0 0 0.5rem 0.5rem); } /* diff --git a/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/table-screenshot-test-tsx-table-screenshot-have-to-match-a-complex-table-layout-1-c8007.snap.png b/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/table-screenshot-test-tsx-table-screenshot-have-to-match-a-complex-table-layout-1-c8007.snap.png index d1937f7c476..da335719537 100644 Binary files a/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/table-screenshot-test-tsx-table-screenshot-have-to-match-a-complex-table-layout-1-c8007.snap.png and b/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/table-screenshot-test-tsx-table-screenshot-have-to-match-a-complex-table-layout-1-c8007.snap.png differ diff --git a/packages/dnb-eufemia/src/components/table/style/_table-container.scss b/packages/dnb-eufemia/src/components/table/style/_table-container.scss index 5d8df70faaf..e03a25d0163 100644 --- a/packages/dnb-eufemia/src/components/table/style/_table-container.scss +++ b/packages/dnb-eufemia/src/components/table/style/_table-container.scss @@ -3,18 +3,6 @@ * */ -@mixin tableBorder { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 1; - - pointer-events: none; -} - .dnb-table__container { position: relative; diff --git a/packages/dnb-eufemia/src/components/table/style/_table-td.scss b/packages/dnb-eufemia/src/components/table/style/_table-td.scss index 965a92b4f6d..f577647dfce 100644 --- a/packages/dnb-eufemia/src/components/table/style/_table-td.scss +++ b/packages/dnb-eufemia/src/components/table/style/_table-td.scss @@ -5,24 +5,10 @@ @import './_table-header-buttons.scss'; -@mixin tableBorder { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: -1; - - pointer-events: none; -} - .dnb-table { // table border --border: 0.0625rem solid var(--color-black-8); &--border tbody &__td { - z-index: 2; // ensure border is behind content - &::after { @include tableBorder(); @@ -42,8 +28,6 @@ // table outline --outline: 0.0625rem solid var(--color-black-8); &--outline thead &__th { - z-index: 2; // ensure border is behind content - &::after { @include tableBorder(); @@ -58,8 +42,6 @@ } } &--outline tbody &__td { - z-index: 2; // ensure border is behind content - &:first-of-type::after, &:last-of-type::after { @include tableBorder(); @@ -71,10 +53,16 @@ &:last-of-type::after { border-right: var(--outline); } + + /* stylelint-disable */ + &, + &::before, + &::after { + transition: border-radius 400ms var(--easing-default); + } + /* stylelint-enable */ } &--outline tbody &__tr:last-of-type &__td { - z-index: 2; // ensure border is behind content - &::after { @include tableBorder(); @@ -93,18 +81,35 @@ border-radius: 0 0.5rem 0 0; } } - &--outline tbody &__tr:last-of-type &__td:first-of-type { + &--outline tbody &__tr:last-of-type &__td:first-of-type, + &--outline + tbody + &__tr#{&}__tr--has-accordion-content:not(#{&}__tr--expanded):nth-last-child(2) + &__td:first-of-type { &, + &::before, &::after { border-radius: 0 0 0 0.5rem; } } - &--outline tbody &__tr:last-of-type &__td:last-of-type { + &--outline tbody &__tr:last-of-type &__td:last-of-type, + &--outline + tbody + &__tr#{&}__tr--has-accordion-content:not(#{&}__tr--expanded):nth-last-child(2) + &__td:last-of-type { &, + &::before, &::after { border-radius: 0 0 0.5rem 0; } } + &--outline tbody &__tr#{&}__tr__accordion_content:last-of-type &__td { + &, + &::before, + &::after { + border-radius: 0 0 0.5rem 0.5rem; + } + } // spacing &__td--no-spacing, diff --git a/packages/dnb-eufemia/src/components/table/style/_table-tr.scss b/packages/dnb-eufemia/src/components/table/style/_table-tr.scss index e1725fab6de..ebbaab54e87 100644 --- a/packages/dnb-eufemia/src/components/table/style/_table-tr.scss +++ b/packages/dnb-eufemia/src/components/table/style/_table-tr.scss @@ -20,11 +20,17 @@ background-color: var(--color-white); } - &--outline thead &__tr:first-of-type { + &--outline thead &__tr:first-of-type, + &--outline + tbody + &__tr#{&}__tr--has-accordion-content:not(#{&}__tr--expanded):nth-last-child(2) { // use clip-path, because border-radius does not clip on tr's clip-path: inset(0 round 0.5rem 0.5rem 0 0); } - &--outline tbody &__tr:last-of-type { + &--outline tbody &__tr:last-of-type, + &--outline + tbody + &__tr#{&}__tr--has-accordion-content:not(#{&}__tr--expanded):nth-last-child(2) { // use clip-path, because border-radius does not clip on tr's clip-path: inset(0 round 0 0 0.5rem 0.5rem); } diff --git a/packages/dnb-eufemia/src/components/table/style/_table.scss b/packages/dnb-eufemia/src/components/table/style/_table.scss index 039503b0e74..d1144a35d9d 100644 --- a/packages/dnb-eufemia/src/components/table/style/_table.scss +++ b/packages/dnb-eufemia/src/components/table/style/_table.scss @@ -3,6 +3,18 @@ * */ +@mixin tableBorder { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1; + + pointer-events: none; +} + @import './_table-header-buttons.scss'; @import './_table-th.scss'; @import './_table-td.scss'; diff --git a/packages/dnb-eufemia/src/components/table/style/themes/dnb-table-theme-ui.scss b/packages/dnb-eufemia/src/components/table/style/themes/dnb-table-theme-ui.scss index dd7056785cb..c9d476e1995 100644 --- a/packages/dnb-eufemia/src/components/table/style/themes/dnb-table-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/table/style/themes/dnb-table-theme-ui.scss @@ -89,21 +89,17 @@ // &:not(#{&}--border):not(#{&}--outline) > thead > &__tr > &__th::after, // border - &:not(#{&}--border):not(#{&}--outline) + & > tbody > &__tr:last-of-type > &__td::after, + & > tbody - > tr:last-of-type - > td::after, - &:not(#{&}--border):not(#{&}--outline) - > tbody - > &__tr:last-of-type - > &__td::after { + > &__tr#{&}__tr--has-accordion-content:not(#{&}__tr--expanded):nth-last-child(2) + td::after { content: ''; position: absolute; left: 0; right: 0; - bottom: -0.0625rem; + bottom: 0; // don't use negative value, else it will be hidden when accordion - height: 0.0625rem; - background-color: var(--color-black-8); + border-bottom: var(--outline); } }