fix(DataTableSkeleton): fix support for visible headers (#7855)

* fix(DataTableSkeleton): fix support for visible headers * chore(storybook): fix showHeader knob * chore(tests): update snapshots
carbon-design-system · Feb 24, 2021 · 3688fec · 3688fec
1 parent 58e48ff
commit 3688fec
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 21 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -6394,7 +6394,6 @@ Map {
     "defaultProps": Object {
       "columnCount": 5,
       "compact": false,
-      "headers": Array [],
       "rowCount": 5,
       "showHeader": true,
       "showToolbar": true,

diff --git a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js
@@ -9,21 +9,19 @@
 
 import React from 'react';
 
-import { withKnobs, boolean, array } from '@storybook/addon-knobs';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
 import DataTableSkeleton from '../DataTableSkeleton';
 
+const headers = [
+  { key: 'Name' },
+  { key: 'Protocol' },
+  { key: 'Port' },
+  { key: 'Rule' },
+  { key: 'Attached Groups' },
+];
+
 const props = () => ({
-  headers: array(
-    'Optional table headers (headers)',
-    [
-      { key: 'name' },
-      { key: 'protocol' },
-      { key: 'port' },
-      { key: 'rule' },
-      { key: 'attached-groups' },
-    ],
-    ','
-  ),
+  showHeaders: boolean('Show table headers', true),
   zebra: boolean('Use zebra stripe (zebra)', false),
   compact: boolean('Compact variant (compact)', false),
   showHeader: boolean('Show the Table Header (showHeader)', true),
@@ -39,12 +37,15 @@ export default {
   },
 };
 
-export const Skeleton = () => (
-  <div style={{ width: '800px' }}>
-    <DataTableSkeleton {...props()} />
-    <br />
-  </div>
-);
+export const Skeleton = () => {
+  const { showHeaders } = props();
+  return (
+    <div style={{ width: '800px' }}>
+      <DataTableSkeleton {...props()} headers={showHeaders ? headers : null} />
+      <br />
+    </div>
+  );
+};
 
 Skeleton.storyName = 'default';
 

diff --git a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.js b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.js
@@ -13,6 +13,7 @@ import { settings } from 'carbon-components';
 const { prefix } = settings;
 
 const DataTableSkeleton = ({
+  headers,
   rowCount,
   columnCount,
   zebra,
@@ -67,7 +68,13 @@ const DataTableSkeleton = ({
           <tr>
             {columnsArray.map((i) => (
               <th key={i}>
-                <span></span>
+                {headers ? (
+                  <div className="bx--table-header-label">
+                    {headers[i]?.key}
+                  </div>
+                ) : (
+                  <span></span>
+                )}
               </th>
             ))}
           </tr>
@@ -131,7 +138,6 @@ DataTableSkeleton.defaultProps = {
   columnCount: 5,
   zebra: false,
   compact: false,
-  headers: [],
   showHeader: true,
   showToolbar: true,
 };