v11 styles datatable

docs/src/COMPONENT_API.json

@@ -2451,7 +2451,8 @@
           "name": "size",
           "kind": "let",
           "description": "Set the size of the data table",
-          "type": "\"compact\" | \"short\" | \"medium\" | \"tall\"",
+          "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"",
+          "value": "\"lg\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -2844,7 +2845,8 @@
           "name": "size",
           "kind": "let",
           "description": "Set the size of the data table",
-          "type": "\"compact\" | \"short\" | \"tall\"",
+          "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"",
+          "value": "\"lg\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -12069,7 +12071,8 @@
           "name": "size",
           "kind": "let",
           "description": "Set the size of the table",
-          "type": "\"compact\" | \"short\" | \"medium\" | \"tall\"",
+          "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"",
+          "value": "\"lg\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,

docs/src/pages/components/DataTable.svx

@@ -432,7 +432,7 @@ A maximum height will applied to the datatable to force a scrollbar.
 
 ## With toolbar (small size)
 
-<DataTable size="short" title="Load balancers" description="Your organization's active load balancers."
+<DataTable size="sm" title="Load balancers" description="Your organization's active load balancers."
   headers="{[
     { key: "name", value: "Name" },
     { key: "protocol", value: "Protocol" },
@@ -570,9 +570,64 @@ Note that in-memory filtering is not optimal for large data sets, where you migh
   ]}"
 />
 
-## Tall rows
+## Extra large rows
 
-<DataTable size="tall"
+<DataTable size="xl"
+  headers="{[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" }
+  ]}"
+  rows="{[
+    {
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+    {
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin"
+    },
+    {
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin"
+    },
+    {
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation"
+    },
+  ]}"
+/>
+
+## Large rows (default)
+
+<DataTable size="lg"
   headers="{[
     { key: "name", value: "Name" },
     { key: "protocol", value: "Protocol" },
@@ -627,7 +682,7 @@ Note that in-memory filtering is not optimal for large data sets, where you migh
 
 ## Medium rows
 
-<DataTable size="medium"
+<DataTable size="md"
   headers="{[
     { key: "name", value: "Name" },
     { key: "protocol", value: "Protocol" },
@@ -680,9 +735,9 @@ Note that in-memory filtering is not optimal for large data sets, where you migh
   ]}"
 />
 
-## Short rows
+## Small rows
 
-<DataTable size="short"
+<DataTable size="sm"
   headers="{[
     { key: "name", value: "Name" },
     { key: "protocol", value: "Protocol" },
@@ -735,9 +790,9 @@ Note that in-memory filtering is not optimal for large data sets, where you migh
   ]}"
 />
 
-## Compact rows
+## Extra small rows
 
-<DataTable size="compact"
+<DataTable size="xs"
   headers="{[
     { key: "name", value: "Name" },
     { key: "protocol", value: "Protocol" },
@@ -1138,9 +1193,9 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
 
 <FileSource src="/framed/DataTable/DataTableExpandableZebra" />
 
-## Expandable (compact size)
+## Expandable (extra small size)
 
-<DataTable size="compact" expandable
+<DataTable size="xs" expandable
   headers="{[
     { key: "name", value: "Name" },
     { key: "protocol", value: "Protocol" },
@@ -1197,9 +1252,9 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
   </svelte:fragment>
 </DataTable>
 
-## Expandable (short size)
+## Expandable (small size)
 
-<DataTable size="short" expandable
+<DataTable size="sm" expandable
   headers="{[
     { key: "name", value: "Name" },
     { key: "protocol", value: "Protocol" },
@@ -1256,9 +1311,9 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
   </svelte:fragment>
 </DataTable>
 
-## Expandable (tall size)
+## Expandable (extra tall size)
 
-<DataTable size="tall" expandable
+<DataTable size="xl" expandable
   headers="{[
     { key: "name", value: "Name" },
     { key: "protocol", value: "Protocol" },
@@ -1406,14 +1461,22 @@ Pass an object with `"empty"` set to `true` to render an empty table header colu
 
 <DataTableSkeleton showHeader={false} showToolbar={false} />
 
-## Skeleton (tall size)
+## Skeleton (extra large size)
+
+<DataTableSkeleton showHeader={false} showToolbar={false} size="xl" />
+
+## Skeleton (large size)
+
+<DataTableSkeleton showHeader={false} showToolbar={false} size="lg" />
+
+## Skeleton (medium size)
 
-<DataTableSkeleton showHeader={false} showToolbar={false} size="tall" />
+<DataTableSkeleton showHeader={false} showToolbar={false} size="md" />
 
-## Skeleton (short size)
+## Skeleton (small size)
 
-<DataTableSkeleton showHeader={false} showToolbar={false} size="short" />
+<DataTableSkeleton showHeader={false} showToolbar={false} size="sm" />
 
-## Skeleton (compact size)
+## Skeleton (extra small size)
 
-<DataTableSkeleton showHeader={false} showToolbar={false} size="compact" />
+<DataTableSkeleton showHeader={false} showToolbar={false} size="xs" />

docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte

@@ -9,7 +9,7 @@
     { key: "name", value: "Name" },
     { key: "port", value: "Port" },
     { key: "rule", value: "Rule" },
-    { key: "overflow", empty: true },
+    { key: "overflow", empty: true, columnMenu: true },
   ];
 
   const rows = [
@@ -25,7 +25,7 @@
 <DataTable sortable headers="{headers}" rows="{rows}">
   <svelte:fragment slot="cell" let:cell>
     {#if cell.key === "overflow"}
-      <OverflowMenu flipped>
+      <OverflowMenu size="sm" flipped>
         <OverflowMenuItem text="Restart" />
         <OverflowMenuItem
           href="https://cloud.ibm.com/docs/loadbalancer-service"

src/DataTable/DataTable.svelte

@@ -39,9 +39,9 @@
 
   /**
    * Set the size of the data table
-   * @type {"compact" | "short" | "medium" | "tall"}
+   * @type {"xs" | "sm" | "md" | "lg" | "xl"}
    */
-  export let size = undefined;
+  export let size = "lg";
 
   /** Specify the title of the data table */
   export let title = "";
@@ -307,7 +307,7 @@
           </th>
         {/if}
         {#if selectable && !batchSelection}
-          <th scope="col"></th>
+          <th scope="col" class:bx--table-column-checkbox="{true}"></th>
         {/if}
         {#if batchSelection && !radio}
           <th scope="col" class:bx--table-column-checkbox="{true}">

src/DataTable/DataTableSkeleton.svelte

@@ -12,9 +12,9 @@
 
   /**
    * Set the size of the data table
-   * @type {"compact" | "short" | "tall"}
+   * @type {"xs" | "sm" | "md" | "lg" | "xl"}
    */
-  export let size = undefined;
+  export let size = "lg";
 
   /** Set to `true` to apply zebra styles to the datatable rows */
   export let zebra = false;
@@ -68,9 +68,11 @@
   <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--xs="{size === 'xs'}"
+    class:bx--data-table--sm="{size === 'sm'}"
+    class:bx--data-table--md="{size === 'md'}"
+    class:bx--data-table--lg="{size === 'lg'}"
+    class:bx--data-table--xl="{size === 'xl'}"
     class:bx--data-table--zebra="{zebra}"
     on:click
     on:mouseover

src/DataTable/Table.svelte

@@ -1,9 +1,9 @@
 <script>
   /**
    * Set the size of the table
-   * @type {"compact" | "short" | "medium" | "tall"}
+   * @type {"xs" | "sm" | "md" | "lg" | "xl"}
    */
-  export let size = undefined;
+  export let size = "lg";
 
   /** Set to `true` to use zebra styles */
   export let zebra = false;
@@ -28,14 +28,16 @@
   <section class:bx--data-table_inner-container="{true}" {...$$restProps}>
     <table
       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--md="{size === 'medium'}"
+      class:bx--data-table--xs="{size === 'xs'}"
+      class:bx--data-table--sm="{size === 'sm'}"
+      class:bx--data-table--md="{size === 'md'}"
+      class:bx--data-table--lg="{size === 'lg'}"
+      class:bx--data-table--xl="{size === 'xl'}"
       class:bx--data-table--sort="{sortable}"
       class:bx--data-table--zebra="{zebra}"
       class:bx--data-table--static="{useStaticWidth}"
       class:bx--data-table--sticky-header="{stickyHeader}"
+      class:bx--data-table--visible-overflow-menu="{true}"
       style="{tableStyle}"
     >
       <slot />
@@ -44,14 +46,16 @@
 {:else}
   <table
     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--md="{size === 'medium'}"
+    class:bx--data-table--xs="{size === 'xs'}"
+    class:bx--data-table--sm="{size === 'sm'}"
+    class:bx--data-table--md="{size === 'md'}"
+    class:bx--data-table--lg="{size === 'lg'}"
+    class:bx--data-table--xl="{size === 'xl'}"
     class:bx--data-table--sort="{sortable}"
     class:bx--data-table--zebra="{zebra}"
     class:bx--data-table--static="{useStaticWidth}"
     class:bx--data-table--sticky-header="{stickyHeader}"
+    class:bx--data-table--visible-overflow-menu="{true}"
     {...$$restProps}
     style="{tableStyle}"
   >

src/DataTable/Toolbar.svelte

@@ -25,8 +25,7 @@
   bind:this="{ref}"
   aria-label="data table toolbar"
   class:bx--table-toolbar="{true}"
-  class:bx--table-toolbar--small="{size === 'sm'}"
-  class:bx--table-toolbar--normal="{size === 'default'}"
+  class:bx--table-toolbar--sm="{size === 'sm'}"
   style:z-index="{1}"
   {...$$restProps}
 >

src/DataTable/ToolbarMenu.svelte

@@ -17,7 +17,7 @@
   bind:menuRef
   icon="{Settings}"
   {...$$restProps}
-  class="bx--toolbar-action bx--overflow-menu {$$restProps.class}"
+  class="bx--toolbar-action bx--overflow-menu bx--btn bx--btn--primary {$$restProps.class}"
   flipped
 >
   <slot />

src/DataTable/ToolbarSearch.svelte

@@ -99,6 +99,7 @@
   disabled="{disabled}"
   {...$$restProps}
   searchClass="{classes} {$$restProps.class}"
+  size="lg"
   bind:ref
   bind:value
   on:clear

tests/DataTable.test.svelte

@@ -137,7 +137,7 @@
 </DataTable>
 
 <DataTable
-  size="short"
+  size="sm"
   title="Load balancers"
   description="Your organization's active load balancers."
   headers="{headers}"
@@ -160,11 +160,13 @@
 
 <DataTable zebra headers="{headers}" rows="{rows}" />
 
-<DataTable size="tall" headers="{headers}" rows="{rows}" />
+<DataTable size="xl" headers="{headers}" rows="{rows}" />
 
-<DataTable size="short" headers="{headers}" rows="{rows}" />
+<DataTable size="md" headers="{headers}" rows="{rows}" />
 
-<DataTable size="compact" headers="{headers}" rows="{rows}" />
+<DataTable size="sm" headers="{headers}" rows="{rows}" />
+
+<DataTable size="xs" headers="{headers}" rows="{rows}" />
 
 <DataTable sortable headers="{headers}" rows="{rows}" />
 
@@ -279,8 +281,10 @@
 
 <DataTableSkeleton showHeader="{false}" showToolbar="{false}" />
 
-<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="tall" />
+<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="xl" />
+
+<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="md" />
 
-<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="short" />
+<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="sm" />
 
-<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="compact" />
+<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="xs" />