docs: add note that items object requires a unique id

This commit is contained in:
Eric Liu 2022-03-19 09:58:54 -07:00
commit 2725982e0c
4 changed files with 20 additions and 2 deletions

View file

@ -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>.

View file

@ -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>

View file

@ -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>.

View file

@ -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).