From 6b6f42fb296fc525eacc299d98dd52c8691641d7 Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Tue, 31 Mar 2020 12:46:42 +0900 Subject: [PATCH 1/3] fix(data-table): update skeleton style for v10 Fixes #3032. --- .../data-table/_data-table-skeleton.scss | 57 ++++++--- .../src/components/skeleton/skeleton.hbs | 121 +++++++++++------- .../DataTableSkeleton-story.js | 8 +- .../DataTableSkeleton/DataTableSkeleton.js | 76 ++++++----- 4 files changed, 166 insertions(+), 96 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..19e6d7a795f8 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,44 @@ } } - .#{$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}--search, + .#{$prefix}--data-table-container.#{$prefix}--skeleton + .#{$prefix}--toolbar-action { + background-color: transparent; + border: none; + justify-content: center; + width: rem(48px); + } + + .#{$prefix}--data-table-container.#{$prefix}--skeleton + .#{$prefix}--toolbar-action:hover { + background-color: transparent; + } + + .#{$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..4eaa46ac6507 100644 --- a/packages/components/src/components/skeleton/skeleton.hbs +++ b/packages/components/src/components/skeleton/skeleton.hbs @@ -114,51 +114,76 @@

Data Table

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

+

+
+
+
+ + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
\ No newline at end of file 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.js b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.js index 099f14be1265..7aab7393feb5 100644 --- a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.js +++ b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.js @@ -8,6 +8,11 @@ import PropTypes from 'prop-types'; import React from 'react'; import cx from 'classnames'; +import { + Search16 as Search, + Edit16 as Edit, + Settings16 as Settings, +} from '@carbon/icons-react'; import { settings } from 'carbon-components'; const { prefix } = settings; @@ -17,7 +22,6 @@ const DataTableSkeleton = ({ columnCount, zebra, compact, - headers, className, ...rest }) => { @@ -28,47 +32,58 @@ 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 +116,6 @@ DataTableSkeleton.propTypes = { PropTypes.array, PropTypes.shape({ key: PropTypes.string, - header: PropTypes.node, }), ]), From 1fabb2388f1df0288fe9e178e62ecabb701d41af Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Tue, 31 Mar 2020 17:36:46 +0900 Subject: [PATCH 2/3] test(DataTableSkeleton): update tests --- .../__snapshots__/PublicAPI-test.js.snap | 3 --- .../DataTableSkeleton-test.js | 22 +++++++++---------- 2 files changed, 11 insertions(+), 14 deletions(-) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 1e9014600bea..8cf1a85b38bc 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-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); }); }); }); From 10c9cfe4da7f0d24b564c3528d6b2e8a21d80329 Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Wed, 1 Apr 2020 11:19:44 +0900 Subject: [PATCH 3/3] chore(skeleton): remove toolbar icons in table --- .../data-table/_data-table-skeleton.scss | 14 -------------- .../src/components/skeleton/skeleton.hbs | 14 -------------- .../DataTableSkeleton/DataTableSkeleton.js | 14 -------------- 3 files changed, 42 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 19e6d7a795f8..76786525fc9d 100644 --- a/packages/components/src/components/data-table/_data-table-skeleton.scss +++ b/packages/components/src/components/data-table/_data-table-skeleton.scss @@ -48,20 +48,6 @@ background: $skeleton-01; } - .#{$prefix}--data-table-container.#{$prefix}--skeleton .#{$prefix}--search, - .#{$prefix}--data-table-container.#{$prefix}--skeleton - .#{$prefix}--toolbar-action { - background-color: transparent; - border: none; - justify-content: center; - width: rem(48px); - } - - .#{$prefix}--data-table-container.#{$prefix}--skeleton - .#{$prefix}--toolbar-action:hover { - background-color: transparent; - } - .#{$prefix}--data-table-container.#{$prefix}--skeleton .#{$prefix}--data-table-header__title { @include skeleton; diff --git a/packages/components/src/components/skeleton/skeleton.hbs b/packages/components/src/components/skeleton/skeleton.hbs index 4eaa46ac6507..75f6acc5bef1 100644 --- a/packages/components/src/components/skeleton/skeleton.hbs +++ b/packages/components/src/components/skeleton/skeleton.hbs @@ -121,20 +121,6 @@
- - -
diff --git a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.js b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.js index 7aab7393feb5..8568dca3d222 100644 --- a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.js +++ b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.js @@ -8,11 +8,6 @@ import PropTypes from 'prop-types'; import React from 'react'; import cx from 'classnames'; -import { - Search16 as Search, - Edit16 as Edit, - Settings16 as Settings, -} from '@carbon/icons-react'; import { settings } from 'carbon-components'; const { prefix } = settings; @@ -57,15 +52,6 @@ const DataTableSkeleton = ({ aria-label="data table toolbar" className={`${prefix}--table-toolbar`}>
- - -