From 1100d8b04dfd42652420a70913ff958abe003132 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 19 Mar 2022 08:50:04 -0700
Subject: [PATCH] docs(dropdown): add "Custom slot" example

---
 docs/src/pages/components/Dropdown.svx        |  6 ++++
 .../pages/framed/Dropdown/DropdownSlot.svelte | 29 +++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 docs/src/pages/framed/Dropdown/DropdownSlot.svelte

diff --git a/docs/src/pages/components/Dropdown.svx b/docs/src/pages/components/Dropdown.svx
index d93ce89b..095002bb 100644
--- a/docs/src/pages/components/Dropdown.svx
+++ b/docs/src/pages/components/Dropdown.svx
@@ -19,6 +19,12 @@ components: ["Dropdown", "DropdownSkeleton"]
   {id: "1", text: "Email"},
   {id: "2", text: "Fax"}]}" />
 
+### Custom slot
+
+Override the default slot to customize the display of each item. Access the item and index through the `let:` directive.
+
+<FileSource src="/framed/Dropdown/DropdownSlot" />
+
 ### Hidden label
 
 <Dropdown hideLabel titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
diff --git a/docs/src/pages/framed/Dropdown/DropdownSlot.svelte b/docs/src/pages/framed/Dropdown/DropdownSlot.svelte
new file mode 100644
index 00000000..5d10635e
--- /dev/null
+++ b/docs/src/pages/framed/Dropdown/DropdownSlot.svelte
@@ -0,0 +1,29 @@
+<script>
+  import { Dropdown } from "carbon-components-svelte";
+</script>
+
+<Dropdown
+  titleText="Contact"
+  selectedId="0"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
+  let:item
+  let:index
+>
+  <div>
+    <strong>{item.text}</strong>
+  </div>
+  <div>
+    id: {item.id} - index:
+    {index}
+  </div>
+</Dropdown>
+
+<style>
+  :global(.bx--list-box__menu-item, .bx--list-box__menu-item__option) {
+    height: auto;
+  }
+</style>