Skip to content

Commit

Permalink
fix(data-table): update skeleton style for v10 (#5752)
Browse files Browse the repository at this point in the history 
Fixes #3032.
  • Loading branch information
@asudoh
asudoh authored Apr 2, 2020
1 parent 9e5e8ab commit 10c5f7f
Show file tree
Hide file tree
Showing 6 changed files with 135 additions and 110 deletions.
43 changes: 27 additions & 16 deletions packages/components/src/components/data-table/_data-table-skeleton.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand All @@ -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);
}
}
107 changes: 59 additions & 48 deletions packages/components/src/components/skeleton/skeleton.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,51 +114,62 @@
</div>

<p>Data Table</p>
<table class="{{@root.prefix}}--skeleton {{@root.prefix}}--data-table-v2">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div class="{{@root.prefix}}--skeleton {{@root.prefix}}--data-table-container">
<div class="{{@root.prefix}}--data-table-header">
<h4 class="{{@root.prefix}}--data-table-header__title"></h4>
<p class="{{@root.prefix}}--data-table-header__description"></p>
</div>
<section aria-label="data table toolbar" class="{{@root.prefix}}--table-toolbar">
<div class="{{@root.prefix}}--toolbar-content">
<button class="{{@root.prefix}}--skeleton {{@root.prefix}}--btn {{@root.prefix}}--btn--sm" type="button"></button>
</div>
</section>
<table class="{{@root.prefix}}--skeleton {{@root.prefix}}--data-table">
<thead>
<tr>
<th><span></span></th>
<th><span></span></th>
<th><span></span></th>
<th><span></span></th>
<th><span></span></th>
</tr>
</thead>
<tbody>
<tr>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
<tr>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
<tr>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
<tr>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
<tr>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
</tbody>
</table>
</div>
3 changes: 0 additions & 3 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5872,9 +5872,6 @@ Map {
Object {
"args": Array [
Object {
"header": Object {
"type": "node",
},
"key": Object {
"type": "string",
},
Expand Down
8 changes: 7 additions & 1 deletion packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down
22 changes: 11 additions & 11 deletions packages/react/src/components/DataTableSkeleton/DataTableSkeleton-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand All @@ -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]));
});
});
});

Expand All @@ -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);
});
});
});
Expand All @@ -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);
});
});
});
62 changes: 31 additions & 31 deletions packages/react/src/components/DataTableSkeleton/DataTableSkeleton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ const DataTableSkeleton = ({
columnCount,
zebra,
compact,
headers,
className,
...rest
}) => {
Expand All @@ -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] = (
<tr key={i}>
{columnsArray.map(j => (
<td key={j} />
<td key={j}>
<span />
</td>
))}
</tr>
);
}

return (
<table className={dataTableSkeletonClasses} {...rest}>
<thead>
<tr>
{columnsArray.map(i => (
<th key={i}>{normalizedHeaders[i]}</th>
))}
</tr>
</thead>
<tbody>
<tr>
{columnsArray.map(i => (
<td key={i}>
<span />
</td>
))}
</tr>
{rows}
</tbody>
</table>
<div className={`${prefix}--skeleton ${prefix}--data-table-container`}>
<div className={`${prefix}--data-table-header`}>
<div className={`${prefix}--data-table-header__title`}></div>
<div className={`${prefix}--data-table-header__description`}></div>
</div>
<section
aria-label="data table toolbar"
className={`${prefix}--table-toolbar`}>
<div className={`${prefix}--toolbar-content`}>
<button
className={`${prefix}--skeleton ${prefix}--btn ${prefix}--btn--sm`}
type="button"></button>
</div>
</section>
<table className={dataTableSkeletonClasses} {...rest}>
<thead>
<tr>
{columnsArray.map(i => (
<th key={i}>
<span></span>
</th>
))}
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
</div>
);
};

Expand Down Expand Up @@ -101,7 +102,6 @@ DataTableSkeleton.propTypes = {
PropTypes.array,
PropTypes.shape({
key: PropTypes.string,
header: PropTypes.node,
}),
]),

Expand Down

0 comments on commit 10c5f7f

Please sign in to comment.