From d4dd33e28c5413e227b84dbe028b41675e14eade Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 12 Jan 2022 16:12:14 -1000
Subject: [PATCH] Update docs (#1001)

* docs(tree-view): avoid redundant copy

* docs(search): "clear" is dispatched when pressing "Escape"

* docs(search): refactor "Expandable variant" to demonstrate reactivity
---
 docs/src/pages/components/Search.svx                 |  6 ++++--
 docs/src/pages/components/TreeView.svx               |  2 +-
 .../framed/Search/SearchExpandableReactive.svelte    | 12 ++++++++++++
 3 files changed, 17 insertions(+), 3 deletions(-)
 create mode 100644 docs/src/pages/framed/Search/SearchExpandableReactive.svelte

diff --git a/docs/src/pages/components/Search.svx b/docs/src/pages/components/Search.svx
index 3b398cc5..631c992a 100644
--- a/docs/src/pages/components/Search.svx
+++ b/docs/src/pages/components/Search.svx
@@ -20,13 +20,15 @@ The `Search` component size is extra-large by default. There are [large](#large-
 
 ### on:clear
 
-The "clear" event is dispatched when clicking the "X" button in the search input element.
+The "clear" event is dispatched when clicking the "X" button or when pressing the "Escape" key.
 
 <Search value="Cloud functions" on:clear={() => console.log('clear')}/>
 
 ### Expandable variant
 
-<Search expandable on:expand on:collapse />
+Set `expandable` to `true` to use the expandable variant.
+
+<FileSource src="/framed/Search/SearchExpandableReactive" />
 
 ### Light variant
 
diff --git a/docs/src/pages/components/TreeView.svx b/docs/src/pages/components/TreeView.svx
index daaf5205..d97b5057 100644
--- a/docs/src/pages/components/TreeView.svx
+++ b/docs/src/pages/components/TreeView.svx
@@ -49,7 +49,7 @@ Initial multiple selected nodes can be set using `selectedIds`.
 
 ### Expand all nodes
 
-To programmatically expand all nodes, access the component instance using the [bind:this](https://svelte.dev/docs#bind_element) directive and invoke the `TreeView.expandAll()` method to expand all nodes.
+To programmatically expand all nodes, access the component instance using the [bind:this](https://svelte.dev/docs#bind_element) directive and invoke the `TreeView.expandAll()` accessor.
 
 <FileSource src="/framed/TreeView/TreeViewExpandAll" />
 
diff --git a/docs/src/pages/framed/Search/SearchExpandableReactive.svelte b/docs/src/pages/framed/Search/SearchExpandableReactive.svelte
new file mode 100644
index 00000000..cc18f09c
--- /dev/null
+++ b/docs/src/pages/framed/Search/SearchExpandableReactive.svelte
@@ -0,0 +1,12 @@
+<script>
+  import { Search } from "carbon-components-svelte";
+
+  let expanded = false;
+</script>
+
+<Search expandable bind:expanded on:expand on:collapse />
+
+<br />
+
+<strong>Expanded:</strong>
+{expanded}