Various features/fixes (#727)

* fix(data-table): export useStaticWidth prop

* docs(data-table): add static width example

* fix(data-table): do not render table header if title/description not provided

* feat(modal): dispatch "click:button--primary" as an alias to "submit"

* test: update DataTable types test

* test(modal): update modal type tests

* docs(data-table): add clear reminder to key headers/rows

docs/src/COMPONENT_API.json

@@ -1530,6 +1530,7 @@
         { "type": "forwarded", "name": "mouseenter", "element": "div" },
         { "type": "forwarded", "name": "mouseleave", "element": "div" },
         { "type": "dispatched", "name": "submit" },
+        { "type": "dispatched", "name": "click:button--primary" },
         { "type": "dispatched", "name": "close" },
         { "type": "dispatched", "name": "open" }
       ],
@@ -2095,6 +2096,16 @@
           "isFunction": false,
           "constant": false,
           "reactive": false
+        },
+        {
+          "name": "useStaticWidth",
+          "kind": "let",
+          "description": "Set to `true` to use static width",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "slots": [
@@ -5500,6 +5511,7 @@
         { "type": "forwarded", "name": "mouseenter", "element": "div" },
         { "type": "forwarded", "name": "mouseleave", "element": "div" },
         { "type": "dispatched", "name": "submit" },
+        { "type": "dispatched", "name": "click:button--primary" },
         { "type": "dispatched", "name": "close" },
         { "type": "dispatched", "name": "open" }
       ],

docs/src/pages/components/DataTable.svx

@@ -3,15 +3,23 @@ components: ["DataTable", "Toolbar", "ToolbarContent", "ToolbarSearch", "Toolbar
 ---
 
 <script>
-  import { DataTable, DataTableSkeleton, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
+  import { InlineNotification, DataTable, DataTableSkeleton, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
   import Launch16 from "carbon-icons-svelte/lib/Launch16";
   import Preview from "../../components/Preview.svelte";
 </script>
 
+`DataTable` is keyed for both rendering and sorting purposes.
+
+<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">Every <code>headers</code> object must have a unique "key" property.</div>
+</InlineNotification>
+
+<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">Every <code>rows</code> object must have a unique "id" property.</div>
+</InlineNotification>
+
 ### Default
 
-The `DataTable` is keyed for both rendering and sorting. You must define a "key" value per object in the `headers` property and an "id" value in `rows`.
-
 <DataTable
   headers="{[
     { key: "name", value: "Name" },
@@ -65,6 +73,63 @@ The `DataTable` is keyed for both rendering and sorting. You must define a "key"
   ]}"
 />
 
+### Static width
+
+Set `useStaticWidth` to `true` to render the table with a width of "auto" instead of "100%".
+
+<DataTable useStaticWidth
+  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"
+    },
+  ]}"
+/>
+
 ### Slotted cells
 
 Use the `"cell"` slot to control the display value per table cell. Individual row and cell data are provided through the `let:row` and `let:cell` directives.