From 10c5f7fe6b9e006b4b7436b8f41a59ba475620f3 Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Fri, 3 Apr 2020 07:35:59 +0900 Subject: [PATCH] fix(data-table): update skeleton style for v10 (#5752) Fixes #3032. --- .../data-table/_data-table-skeleton.scss | 43 ++++--- .../src/components/skeleton/skeleton.hbs | 107 ++++++++++-------- .../__snapshots__/PublicAPI-test.js.snap | 3 - .../DataTableSkeleton-story.js | 8 +- .../DataTableSkeleton-test.js | 22 ++-- .../DataTableSkeleton/DataTableSkeleton.js | 62 +++++----- 6 files changed, 135 insertions(+), 110 deletions(-) diff --git a/packages/components/src/components/data-table/_data-table-skeleton.scss b/packages/components/src/components/data-table/_data-table-skeleton.scss index ad522410c0bc..76786525fc9d 100644 --- a/packages/components/src/components/data-table/_data-table-skeleton.scss +++ b/packages/components/src/components/data-table/_data-table-skeleton.scss @@ -9,29 +9,17 @@ @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once'; @import '../../globals/scss/vars'; -@include exports('data-table-v2-skeleton') { +@include exports('data-table-skeleton') { .#{$prefix}--data-table.#{$prefix}--skeleton { th { vertical-align: middle; - - &:nth-child(3n + 1) { - width: 10%; - } - - &:nth-child(3n + 2) { - width: 30%; - } - - &:nth-child(3n + 3) { - width: 15%; - } } th span, td span { @include skeleton; - width: 75%; - height: 1rem; + width: rem(64px); + height: rem(16px); display: block; } @@ -48,7 +36,30 @@ } } - .#{$prefix}--data-table-v2.#{$prefix}--skeleton .#{$prefix}--table-sort-v2 { + .#{$prefix}--data-table.#{$prefix}--skeleton .#{$prefix}--table-sort-v2 { pointer-events: none; } + + .#{$prefix}--data-table.#{$prefix}--skeleton th span { + background: $skeleton-02; + } + + .#{$prefix}--data-table.#{$prefix}--skeleton th span::before { + background: $skeleton-01; + } + + .#{$prefix}--data-table-container.#{$prefix}--skeleton + .#{$prefix}--data-table-header__title { + @include skeleton; + width: rem(120px); + height: rem(24px); + } + + .#{$prefix}--data-table-container.#{$prefix}--skeleton + .#{$prefix}--data-table-header__description { + @include skeleton; + margin-top: $spacing-03; + width: rem(160px); + height: rem(16px); + } } diff --git a/packages/components/src/components/skeleton/skeleton.hbs b/packages/components/src/components/skeleton/skeleton.hbs index 3b35a8117d8a..75f6acc5bef1 100644 --- a/packages/components/src/components/skeleton/skeleton.hbs +++ b/packages/components/src/components/skeleton/skeleton.hbs @@ -114,51 +114,62 @@

Data Table

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+
+

+

+
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
\ No newline at end of file diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 8b422ea023a7..928802538e54 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -5872,9 +5872,6 @@ Map { Object { "args": Array [ Object { - "header": Object { - "type": "node", - }, "key": Object { "type": "string", }, diff --git a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js index 048b766cae70..01f1a56a66ab 100644 --- a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js +++ b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js @@ -16,7 +16,13 @@ import DataTableSkeleton from '../DataTableSkeleton'; const props = () => ({ headers: array( 'Optional table headers (headers)', - ['Name', 'Protocol', 'Port', 'Rule', 'Attached Groups'], + [ + { key: 'name' }, + { key: 'protocol' }, + { key: 'port' }, + { key: 'rule' }, + { key: 'attached-groups' }, + ], ',' ), zebra: boolean('Use zebra stripe (zebra)', false), diff --git a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-test.js b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-test.js index 7f1f40389ed4..a65a3194fbd5 100644 --- a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-test.js +++ b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-test.js @@ -28,7 +28,7 @@ describe('DataTableSkeleton', () => { it('Has the expected classes', () => { expect(wrapper.hasClass(`${prefix}--skeleton`)).toEqual(true); - expect(wrapper.hasClass(`${prefix}--data-table`)).toEqual(true); + expect(wrapper.hasClass(`${prefix}--data-table-container`)).toEqual(true); }); it('Has the correct number of rows and columns', () => { @@ -38,12 +38,6 @@ describe('DataTableSkeleton', () => { rowCount * columnCount ); }); - - it('Has the correct headers', () => { - wrapper - .find('thead > tr > th') - .forEach((header, index) => expect(header.text()).toBe(headers[index])); - }); }); }); @@ -53,8 +47,11 @@ describe('DataTableSkeleton Compact', () => { it('Has the expected classes', () => { expect(wrapper.hasClass(`${prefix}--skeleton`)).toEqual(true); - expect(wrapper.hasClass(`${prefix}--data-table`)).toEqual(true); - expect(wrapper.hasClass(`${prefix}--data-table--compact`)).toEqual(true); + expect( + wrapper + .find(`.${prefix}--data-table`) + .hasClass(`${prefix}--data-table--compact`) + ).toEqual(true); }); }); }); @@ -65,8 +62,11 @@ describe('DataTableSkeleton Zebra', () => { it('Has the expected classes', () => { expect(wrapper.hasClass(`${prefix}--skeleton`)).toEqual(true); - expect(wrapper.hasClass(`${prefix}--data-table`)).toEqual(true); - expect(wrapper.hasClass(`${prefix}--data-table--zebra`)).toEqual(true); + expect( + wrapper + .find(`.${prefix}--data-table`) + .hasClass(`${prefix}--data-table--zebra`) + ).toEqual(true); }); }); }); diff --git a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.js b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.js index 099f14be1265..8568dca3d222 100644 --- a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.js +++ b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.js @@ -17,7 +17,6 @@ const DataTableSkeleton = ({ columnCount, zebra, compact, - headers, className, ...rest }) => { @@ -28,47 +27,49 @@ const DataTableSkeleton = ({ [`${prefix}--data-table--compact`]: compact, }); - let normalizedHeaders; - - if (headers[0] === Object(headers[0]) && !Array.isArray(headers[0])) { - normalizedHeaders = headers.map(current => current.header); - } else { - normalizedHeaders = headers; - } - - const rowRepeat = rowCount - 1; + const rowRepeat = rowCount; const rows = Array(rowRepeat); const columnsArray = Array.from({ length: columnCount }, (_, index) => index); for (let i = 0; i < rowRepeat; i++) { rows[i] = ( {columnsArray.map(j => ( - + + + ))} ); } return ( - - - - {columnsArray.map(i => ( - - ))} - - - - - {columnsArray.map(i => ( - - ))} - - {rows} - -
{normalizedHeaders[i]}
- -
+
+
+
+
+
+
+
+ +
+
+ + + + {columnsArray.map(i => ( + + ))} + + + {rows} +
+ +
+
); }; @@ -101,7 +102,6 @@ DataTableSkeleton.propTypes = { PropTypes.array, PropTypes.shape({ key: PropTypes.string, - header: PropTypes.node, }), ]),