Skip to content

Commit

Permalink
feat(Table): add table "border" and "outline" property
Browse files Browse the repository at this point in the history
  • Loading branch information
@tujoworker
tujoworker committed Nov 21, 2022
1 parent ce00552 commit ab4eea6
Show file tree
Hide file tree
Showing 7 changed files with 228 additions and 28 deletions.
10 changes: 2 additions & 8 deletions packages/dnb-design-system-portal/src/docs/uilib/components/table/Examples.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ export const TableVariantComplex = () => (
scope={{ MaxWidth }}
>
<MaxWidth>
<Table>
<Table border outline>
<caption>A Table Caption</caption>
<thead>
<Tr noWrap>
Expand Down Expand Up @@ -138,15 +138,9 @@ export const TableVariantComplex = () => (
<Tr>
<Td>Row 4</Td>
<Td>Row 4</Td>
<Td>Row 4</Td>
<Td>Row 4</Td>
<Td colSpan={2}>Row 4</Td>
</Tr>
</tbody>
<tfoot>
<Tr variant="odd">
<Td colSpan={4}>Footer</Td>
</Tr>
</tfoot>
</Table>
</MaxWidth>
</ComponentBox>
Expand Down
2 changes: 2 additions & 0 deletions packages/dnb-design-system-portal/src/docs/uilib/components/table/properties.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ showTabs: true

| Properties | Description |
| ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `border` | _(optional)_ use `true` to show borders between table data cells. Defaults to `false`. |
| `outline` | _(optional)_ use `true` to show a outline border around the table. Defaults to `false`. |
| `sticky` | _(optional)_ use `true` to enable a sticky Table header. Defaults to `false`. |
| `stickyOffset` | _(optional)_ defines the offset (top) in `rem` from where the header should start to stick. You may define your app header height here, if you have a sticky header on your page. Defaults to `0`. |
| ~~`variant`~~ (not implemented yet) | _(coming)_ defines the style variant of the table. Options: `basis` . Defaults to `generic`. |
Expand Down
16 changes: 16 additions & 0 deletions packages/dnb-eufemia/src/components/table/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,18 @@ export type TableProps = {
*/
variant?: TableVariants

/**
* Use `true` to show borders between table data cell
* Default: false
*/
border?: boolean

/**
* Use `true` to show a outline border around the table
* Default: false
*/
outline?: boolean

/**
* Defines if the table should behave with a fixed table layout, using: "table-layout: fixed;"
* Default: null.
Expand Down Expand Up @@ -87,6 +99,8 @@ const Table = (componentProps: TableAllProps) => {
sticky,
stickyOffset, // eslint-disable-line
fixed,
border,
outline,
...props
} = allProps

Expand Down Expand Up @@ -124,6 +138,8 @@ const Table = (componentProps: TableAllProps) => {
size && `dnb-table__size--${size}`,
sticky && `dnb-table--sticky`,
fixed && `dnb-table--fixed`,
border && `dnb-table--border`,
outline && `dnb-table--outline`,
spacingClasses,
skeletonClasses,
className
Expand Down
101 changes: 85 additions & 16 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 @@ -13,10 +13,10 @@ exports[`Table scss have to match default theme snapshot 1`] = `
/*
* Utilities
*/
.dnb-table > thead > tr > th::after,
.dnb-table > tbody > tr:last-of-type > td::after,
.dnb-table > thead > .dnb-table__tr > .dnb-table__th::after,
.dnb-table > tbody > .dnb-table__tr:last-of-type > .dnb-table__td::after {
.dnb-table:not(.dnb-table--border) > thead > tr > th::after,
.dnb-table:not(.dnb-table--border) > tbody > tr:last-of-type > td::after,
.dnb-table:not(.dnb-table--border) > thead > .dnb-table__tr > .dnb-table__th::after,
.dnb-table:not(.dnb-table--border) > tbody > .dnb-table__tr:last-of-type > .dnb-table__td::after {
content: '';
position: absolute;
left: 0;
Expand Down Expand Up @@ -126,18 +126,87 @@ exports[`Table scss have to match snapshot 1`] = `
* Table component
*
*/
.dnb-table > tr > td,
.dnb-table > tbody > tr > td, .dnb-table__td,
.dnb-table > tr > th[scope='row'] {
padding: var(--spacing-small);
padding-top: calc(var(--spacing-small) * 1.25);
padding-bottom: calc(var(--spacing-small) * 1.25);
color: var(--theme-color-black-80, currentColor);
vertical-align: baseline; }
.dnb-table__td--no-spacing,
.dnb-table td.dnb-table__td--no-spacing {
padding: 0; }
.dnb-table {
--border: 0.0625rem solid var(--color-black-8);
--outline: 0.0625rem solid var(--color-black-8); }
.dnb-table > tr > td,
.dnb-table > tbody > tr > td, .dnb-table__td,
.dnb-table > tr > th[scope='row'] {
padding: var(--spacing-small);
padding-top: calc(var(--spacing-small) * 1.25);
padding-bottom: calc(var(--spacing-small) * 1.25);
color: var(--theme-color-black-80, currentColor);
vertical-align: baseline; }
.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--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 tbody .dnb-table__td {
z-index: 2; }
.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;
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 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 {
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 {
border-radius: 0 0 0.5rem 0; }
.dnb-table__td--no-spacing,
.dnb-table td.dnb-table__td--no-spacing {
padding: 0; }
/*
* Table component
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.
98 changes: 98 additions & 0 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,6 +5,18 @@

@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 {
& > tr > td,
& > tbody > tr > td,
Expand All @@ -19,6 +31,92 @@
vertical-align: baseline;
}

// table border
--border: 0.0625rem solid var(--color-black-8);
&--border tbody &__td {
z-index: 2; // ensure border is behind content

&::after {
@include tableBorder();

border: var(--border);
border-right: none;
border-bottom: none;
}

&:first-of-type::after {
border-left: none;
}
}

// table outline
--outline: 0.0625rem solid var(--color-black-8);
&--outline thead &__th {
z-index: 2; // ensure border is behind content

&::after {
@include tableBorder();

border-top: var(--outline);
}

&:first-of-type::after {
border-left: var(--outline);
}
&:last-of-type::after {
border-right: var(--outline);
}
}
&--outline tbody &__td {
z-index: 2; // ensure border is behind content

&:first-of-type::after,
&:last-of-type::after {
@include tableBorder();
}

&:first-of-type::after {
border-left: var(--outline);
}
&:last-of-type::after {
border-right: var(--outline);
}
}
&--outline tbody &__tr:last-of-type &__td {
z-index: 2; // ensure border is behind content

&::after {
@include tableBorder();

border-bottom: var(--outline);
}
}
&--outline thead &__th:first-of-type {
&,
&::after {
border-radius: 0.5rem 0 0 0;
}
}
&--outline thead &__th:last-of-type {
&,
&::after {
border-radius: 0 0.5rem 0 0;
}
}
&--outline tbody &__tr:last-of-type &__td:first-of-type {
&,
&::after {
border-radius: 0 0 0 0.5rem;
}
}
&--outline tbody &__tr:last-of-type &__td:last-of-type {
&,
&::after {
border-radius: 0 0 0.5rem 0;
}
}

// Omit spacing
&__td--no-spacing,
td#{&}__td--no-spacing {
padding: 0;
Expand Down
29 changes: 25 additions & 4 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 @@ -7,10 +7,10 @@

.dnb-table {
// Border
& > thead > tr > th::after,
& > tbody > tr:last-of-type > td::after,
& > thead > &__tr > &__th::after,
& > tbody > &__tr:last-of-type > &__td::after {
&:not(#{&}--border) > thead > tr > th::after,
&:not(#{&}--border) > tbody > tr:last-of-type > td::after,
&:not(#{&}--border) > thead > &__tr > &__th::after,
&:not(#{&}--border) > tbody > &__tr:last-of-type > &__td::after {
content: '';
position: absolute;
left: 0;
Expand All @@ -20,4 +20,25 @@
height: 1px;
background-color: var(--color-black-8);
}

&--outline {
// border-radius: 0.5rem;
// clip-path: inset(0 round 0.5rem);

// position: relative;

// &::after {
// content: '';
// position: absolute;
// top: 0;
// left: 0;
// right: 0;
// bottom: 0;

// pointer-events: none;

// @include fakeBorder(var(--color-black-8));
// @include fakeBorder(blue);
// }
}
}

0 comments on commit ab4eea6

Please sign in to comment.