docs: add ClickableTile example, notes on keyed props (#1184)

* docs(clickable-tile): add "Prevent default behavior" example

* docs: add note that `items` object requires a unique `id`

* docs: remove note on selectedId

* docs(data-table): explain how header keys work

docs/src/pages/components/ClickableTile.svx

@@ -13,6 +13,20 @@ source: Tile/ClickableTile.svelte
 Carbon Design System
 </ClickableTile>
 
+### Prevent default behavior
+
+Use the forwarded `click` event and invoke `e.preventDefault()` to prevent the native link behavior.
+
+<ClickableTile
+  href="/"
+  on:click={(e) => {
+    e.preventDefault();
+    // custom behavior
+  }}
+>
+  Carbon Design System
+</ClickableTile>
+
 ### Light variant
 
 <ClickableTile light href="https://www.carbondesignsystem.com/">

docs/src/pages/components/ComboBox.svx

@@ -3,10 +3,10 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
+`ComboBox` is keyed for performance reasons.
+
 <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
-  <div class="body-short-01">
+  <div class="body-short-01">Every <code>items</code> object must have a unique "id" property.</div>
-    Since version 0.53, <strong>selectedIndex</strong> has been replaced with <strong>selectedId</strong>.
-  </div>
 </InlineNotification>
 
 ### Default

docs/src/pages/components/DataTable.svx

@@ -10,7 +10,7 @@ components: ["DataTable", "Pagination","Toolbar", "ToolbarContent", "ToolbarSear
   const pagination = { pageSize: 5, page: 1}
 </script>
 
-`DataTable` is keyed for both rendering and sorting purposes.
+`DataTable` is keyed for performance reasons.
 
 <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">Every <code>headers</code> object must have a unique "key" property.</div>
@@ -22,6 +22,10 @@ components: ["DataTable", "Pagination","Toolbar", "ToolbarContent", "ToolbarSear
 
 ### Default
 
+The key value in `headers` corresponds to the key value defined in `rows`.
+
+For example, the header key `"name"` will use the value of `rows[index].name`.
+
 <DataTable
   headers="{[
     { key: "name", value: "Name" },

docs/src/pages/components/Dropdown.svx

@@ -7,10 +7,10 @@ components: ["Dropdown", "DropdownSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
+`Dropdown` is keyed for performance reasons.
+
 <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
-  <div class="body-short-01">
+  <div class="body-short-01">Every <code>items</code> object must have a unique "id" property.</div>
-    Since version 0.53, <strong>selectedIndex</strong> has been replaced with <strong>selectedId</strong>.
-  </div>
 </InlineNotification>
 
 ### Default

docs/src/pages/components/MultiSelect.svx

@@ -1,8 +1,14 @@
 <script>
-  import { MultiSelect } from "carbon-components-svelte";
+  import { MultiSelect, InlineNotification } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
+`MultiSelect` is keyed for performance reasons.
+
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">Every <code>items</code> object must have a unique "id" property.</div>
+</InlineNotification>
+
 ### Default
 
 By default, items will be ordered alphabetically based on the `item.text` value. To prevent this, see [#no-alphabetical-ordering](#no-alphabetical-ordering).