From 2725982e0c70e0c5714d29f5246e079055cf5f75 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 19 Mar 2022 09:58:54 -0700
Subject: [PATCH] docs: add note that `items` object requires a unique `id`

---
 docs/src/pages/components/ComboBox.svx    | 6 ++++++
 docs/src/pages/components/DataTable.svx   | 2 +-
 docs/src/pages/components/Dropdown.svx    | 6 ++++++
 docs/src/pages/components/MultiSelect.svx | 8 +++++++-
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/ComboBox.svx b/docs/src/pages/components/ComboBox.svx
index b5d11af5..ada41d43 100644
--- a/docs/src/pages/components/ComboBox.svx
+++ b/docs/src/pages/components/ComboBox.svx
@@ -3,6 +3,12 @@
   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">Every <code>items</code> object must have a unique "id" property.</div>
+</InlineNotification>
+
 <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">
     Since version 0.53, <strong>selectedIndex</strong> has been replaced with <strong>selectedId</strong>.
diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index 8c206dca..0e9dd6d9 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/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>
diff --git a/docs/src/pages/components/Dropdown.svx b/docs/src/pages/components/Dropdown.svx
index d93ce89b..586f66bb 100644
--- a/docs/src/pages/components/Dropdown.svx
+++ b/docs/src/pages/components/Dropdown.svx
@@ -7,6 +7,12 @@ 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">Every <code>items</code> object must have a unique "id" property.</div>
+</InlineNotification>
+
 <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">
     Since version 0.53, <strong>selectedIndex</strong> has been replaced with <strong>selectedId</strong>.
diff --git a/docs/src/pages/components/MultiSelect.svx b/docs/src/pages/components/MultiSelect.svx
index 6af4b4dd..f88aa9ac 100644
--- a/docs/src/pages/components/MultiSelect.svx
+++ b/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).