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

COMPONENT_INDEX.md

@@ -686,7 +686,7 @@ None.
 ### Events
 
 | Event name            | Type       | Detail                          |
-| :------------ | :--------- | :------------------------------ |
+| :-------------------- | :--------- | :------------------------------ |
 | transitionend         | dispatched | <code>{ open: boolean; }</code> |
 | keydown               | forwarded  | --                              |
 | click                 | forwarded  | --                              |
@@ -694,6 +694,7 @@ None.
 | mouseenter            | forwarded  | --                              |
 | mouseleave            | forwarded  | --                              |
 | submit                | dispatched | --                              |
+| click:button--primary | dispatched | --                              |
 | close                 | dispatched | --                              |
 | open                  | dispatched | --                              |
 
@@ -958,6 +959,7 @@ export interface DataTableCell {
 | radio          | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code> | Set to `true` for the radio selection variant                                                                       |
 | batchSelection | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code> | Set to `true` to enable batch selection                                                                             |
 | stickyHeader   | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code> | Set to `true` to enable a sticky header                                                                             |
+| useStaticWidth | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code> | Set to `true` to use static width                                                                                   |
 
 ### Slots
 
@@ -2269,6 +2271,7 @@ None.
 | mouseenter              | forwarded  | --                              |
 | mouseleave              | forwarded  | --                              |
 | submit                  | dispatched | --                              |
+| click:button--primary   | dispatched | --                              |
 | close                   | dispatched | --                              |
 | open                    | dispatched | --                              |
 

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.

src/ComposedModal/ComposedModal.svelte

@@ -53,6 +53,7 @@
     },
     submit: () => {
       dispatch("submit");
+      dispatch("click:button--primary");
     },
     declareRef: (ref) => {
       buttonRef = ref;

src/DataTable/DataTable.svelte

@@ -91,6 +91,9 @@
   /** Set to `true` to enable a sticky header */
   export let stickyHeader = false;
 
+  /** Set to `true` to use static width */
+  export let useStaticWidth = false;
+
   import { createEventDispatcher, setContext } from "svelte";
   import { writable, derived } from "svelte/store";
   import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16/ChevronRight16.svelte";
@@ -203,6 +206,7 @@
 </script>
 
 <TableContainer {...$$restProps}>
+  {#if title || $$slots.title || description || $$slots.description}
     <div class:bx--data-table-header="{true}">
       {#if title || $$slots.title}
         <h4 class:bx--data-table-header__title="{true}">
@@ -215,12 +219,14 @@
         </p>
       {/if}
     </div>
+  {/if}
   <slot />
   <Table
     zebra="{zebra}"
     size="{size}"
     stickyHeader="{stickyHeader}"
     sortable="{sortable}"
+    useStaticWidth="{useStaticWidth}"
   >
     <TableHead>
       <TableRow>

src/Modal/Modal.svelte

@@ -297,6 +297,7 @@
           disabled="{primaryButtonDisabled}"
           on:click="{() => {
             dispatch('submit');
+            dispatch('click:button--primary');
           }}"
         >
           {primaryButtonText}

tests/ComposedModal.test.svelte

@@ -10,7 +10,7 @@
   let checked = false;
 </script>
 
-<ComposedModal open>
+<ComposedModal open on:close on:click:button--primary>
   <ModalHeader title="Confirm changes" />
   <ModalBody hasForm>
     <Checkbox labelText="I have reviewed the changes" bind:checked />
@@ -19,6 +19,8 @@
     primaryButtonText="Proceed"
     primaryButtonDisabled="{!checked}"
     secondaryButtons="{[{ text: 'Cancel' }, { text: 'Duplicate' }]}"
-    on:click:button--secondary="{({ detail }) => {}}"
+    on:click:button--secondary="{({ detail }) => {
+      console.log(detail);
+    }}"
   />
 </ComposedModal>

tests/DataTable.test.svelte

@@ -98,6 +98,7 @@
   description="Your organization's active load balancers."
   headers="{headers}"
   rows="{rows}"
+  useStaticWidth
 />
 
 <DataTable

tests/Modal.test.svelte

@@ -16,6 +16,7 @@
   on:open
   on:close
   on:submit
+  on:click:button--primary
 >
   <p>Create a new Cloudant database in the US South region.</p>
 </Modal>

types/ComposedModal/ComposedModal.d.ts

@@ -55,6 +55,7 @@ export default class ComposedModal extends SvelteComponentTyped<
     mouseenter: WindowEventMap["mouseenter"];
     mouseleave: WindowEventMap["mouseleave"];
     submit: CustomEvent<any>;
+    ["click:button--primary"]: CustomEvent<any>;
     close: CustomEvent<any>;
     open: CustomEvent<any>;
   },

types/DataTable/DataTable.d.ts

@@ -129,6 +129,12 @@ export interface DataTableProps
    * @default false
    */
   stickyHeader?: boolean;
+
+  /**
+   * Set to `true` to use static width
+   * @default false
+   */
+  useStaticWidth?: boolean;
 }
 
 export default class DataTable extends SvelteComponentTyped<

types/Modal/Modal.d.ts

@@ -132,6 +132,7 @@ export default class Modal extends SvelteComponentTyped<
     mouseenter: WindowEventMap["mouseenter"];
     mouseleave: WindowEventMap["mouseleave"];
     submit: CustomEvent<any>;
+    ["click:button--primary"]: CustomEvent<any>;
     close: CustomEvent<any>;
     open: CustomEvent<any>;
   },