Merge pull request #279 from albertms10/datatable-skeleton-size

feat(datatable-skeleton): change to size prop

src/DataTableSkeleton/DataTable.stories.js

@@ -1,4 +1,10 @@
-import { withKnobs, array, boolean, number } from "@storybook/addon-knobs";
+import {
+  withKnobs,
+  array,
+  boolean,
+  number,
+  select,
+} from "@storybook/addon-knobs";
 import Component from "./DataTableSkeleton.Story.svelte";
 
 export default { title: "DataTableSkeleton", decorators: [withKnobs] };
@@ -9,7 +15,11 @@ export const Default = () => ({
     columns: number("Number of columns", 5),
     rows: number("Number of rows", 5),
     zebra: boolean("Use zebra stripe (zebra)", false),
-    compact: boolean("Compact variant (compact)", false),
+    size: select(
+      "Row height (size)",
+      { compact: "compact", short: "short", tall: "tall", none: null },
+      null
+    ),
     showHeader: boolean("Show header", true),
     headers: array(
       "Optional table headers (headers)",

src/DataTableSkeleton/DataTableSkeleton.svelte

@@ -12,10 +12,10 @@
   export let rows = 5;
 
   /**
-   * Set to `true` to use the compact variant
-   * @type {boolean} [compact=false]
+   * Set the size of the data table
+   * @type {"compact" | "short" | "tall"} [size]
    */
-  export let compact = false;
+   export let size = undefined;
 
   /**
    * Set to `true` to apply zebra styles to the datatable rows
@@ -68,8 +68,10 @@
   <table
     class:bx--skeleton="{true}"
     class:bx--data-table="{true}"
+    class:bx--data-table--compact="{size === 'compact'}"
+    class:bx--data-table--short="{size === 'short'}"
+    class:bx--data-table--tall="{size === 'tall'}"
     class:bx--data-table--zebra="{zebra}"
-    class:bx--data-table--compact="{compact}"
     {...$$restProps}
     on:click
     on:mouseover

types/index.d.ts

@@ -789,10 +789,9 @@ export class DataTableSkeleton extends CarbonSvelteComponent {
     rows?: number;
 
     /**
-     * Set to `true` to use the compact variant
-     * @default false
+     * Set the size of the data table
      */
-    compact?: boolean;
+    size?: "compact" | "short" | "tall";
 
     /**
      * Set to `true` to apply zebra styles to the datatable rows