Skip to content

Commit

Permalink
fix(Table): enhance borders
Browse files Browse the repository at this point in the history
  • Loading branch information
@tujoworker
tujoworker committed Nov 28, 2022
1 parent 667059b commit 22c5431
Show file tree
Hide file tree
Showing 7 changed files with 123 additions and 104 deletions.
128 changes: 70 additions & 58 deletions packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/Table.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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); }
"
`;

Expand Down Expand Up @@ -158,75 +155,86 @@ 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;
top: 0;
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; }
Expand All @@ -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); }
/*
Expand Down
Binary file modified ...test-tsx-table-screenshot-have-to-match-a-complex-table-layout-1-c8007.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 0 additions & 12 deletions packages/dnb-eufemia/src/components/table/style/_table-container.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
49 changes: 27 additions & 22 deletions packages/dnb-eufemia/src/components/table/style/_table-td.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -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();

Expand All @@ -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();
Expand All @@ -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();

Expand All @@ -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,
Expand Down
10 changes: 8 additions & 2 deletions packages/dnb-eufemia/src/components/table/style/_table-tr.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
12 changes: 12 additions & 0 deletions packages/dnb-eufemia/src/components/table/style/_table.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
16 changes: 6 additions & 10 deletions packages/dnb-eufemia/src/components/table/style/themes/dnb-table-theme-ui.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

0 comments on commit 22c5431

Please sign in to comment.