diff --git a/packages/dnb-design-system-portal/src/pages/uilib/elements/tables.md b/packages/dnb-design-system-portal/src/pages/uilib/elements/tables.md index fc3ef9ef1fd..c1ed9d90315 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/elements/tables.md +++ b/packages/dnb-design-system-portal/src/pages/uilib/elements/tables.md @@ -7,14 +7,16 @@ import { IconPrimary } from 'dnb-ui-lib/src' ## Tables - + +{` +
-
Column 1 + 2 Column 3 + Column 4 @@ -50,3 +52,49 @@ import { IconPrimary } from 'dnb-ui-lib/src'
+`} + + + diff --git a/packages/dnb-ui-lib/src/style/elements/__tests__/Table.screenshot.test.js b/packages/dnb-ui-lib/src/style/elements/__tests__/Table.screenshot.test.js new file mode 100644 index 00000000000..a8183646cfc --- /dev/null +++ b/packages/dnb-ui-lib/src/style/elements/__tests__/Table.screenshot.test.js @@ -0,0 +1,19 @@ +/** + * Screenshot Test + * This file will not run on "test:staged" because we dont require any related files + */ + +import { + testPageScreenshot, + setupPageScreenshot +} from '../../../core/jest/jestSetupScreenshots' + +describe('Table screenshot', () => { + setupPageScreenshot({ url: '/uilib/elements/tables' }) + it('have to match the default choice of table styles', async () => { + const screenshot = await testPageScreenshot({ + selector: '[data-dnb-test="table"]' + }) + expect(screenshot).toMatchImageSnapshot() + }) +}) diff --git a/packages/dnb-ui-lib/src/style/elements/__tests__/__snapshots__/table-screenshot-test-js-table-screenshot-have-to-match-the-default-choice-of-table-styles-1-b0b7d.snap.png b/packages/dnb-ui-lib/src/style/elements/__tests__/__snapshots__/table-screenshot-test-js-table-screenshot-have-to-match-the-default-choice-of-table-styles-1-b0b7d.snap.png new file mode 100644 index 00000000000..2065bd8bd26 Binary files /dev/null and b/packages/dnb-ui-lib/src/style/elements/__tests__/__snapshots__/table-screenshot-test-js-table-screenshot-have-to-match-the-default-choice-of-table-styles-1-b0b7d.snap.png differ diff --git a/packages/dnb-ui-lib/src/style/themes/theme-ui/table.scss b/packages/dnb-ui-lib/src/style/themes/theme-ui/table.scss index e97fb52442a..dbebc7a0fec 100644 --- a/packages/dnb-ui-lib/src/style/themes/theme-ui/table.scss +++ b/packages/dnb-ui-lib/src/style/themes/theme-ui/table.scss @@ -49,8 +49,13 @@ table td { padding-bottom: 1.1875rem; } table tr { - background-color: #fff; + background-color: var(--color-white); } -table tr:nth-child(2n) { +table tr:nth-of-type(2n) { background-color: var(--color-mint-green-12); } +table tr:last-of-type td { + // to get the perfect height of pixles, to this: + padding-bottom: calc(1.1875rem - 1px); + border-bottom: 1px solid var(--color-mint-green-50); +}