Skip to content

Commit

Permalink
fix(data-table): update skeleton style for v10
Browse files Browse the repository at this point in the history 
Fixes carbon-design-system#3032.
  • Loading branch information
@asudoh
asudoh committed Mar 31, 2020
1 parent b86bf7a commit 6b6f42f
Show file tree
Hide file tree
Showing 4 changed files with 166 additions and 96 deletions.
57 changes: 41 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,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);
}
}
121 changes: 73 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,76 @@
</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}}--search">
{{ carbon-icon 'Search16' }}
</button>
<button
class="{{@root.prefix}}--toolbar-action"
title="Edit">
{{ carbon-icon 'Edit16' }}
</button>
<button
class="{{@root.prefix}}--toolbar-action"
title="Settings">
{{ carbon-icon 'Settings16' }}
</button>
<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>
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
76 changes: 45 additions & 31 deletions packages/react/src/components/DataTableSkeleton/DataTableSkeleton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -17,7 +22,6 @@ const DataTableSkeleton = ({
columnCount,
zebra,
compact,
headers,
className,
...rest
}) => {
Expand All @@ -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] = (
<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}--search`}>
<Search />
</button>
<button className={`${prefix}--toolbar-action`} title="Edit">
<Edit />
</button>
<button className={`${prefix}--toolbar-action`} title="Settings">
<Settings />
</button>
<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 +116,6 @@ DataTableSkeleton.propTypes = {
PropTypes.array,
PropTypes.shape({
key: PropTypes.string,
header: PropTypes.node,
}),
]),

Expand Down

0 comments on commit 6b6f42f

Please sign in to comment.