From 5e13f04e3cf98ee462c41dd7feb0c9d732dcb9b3 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 30 Oct 2020 10:22:39 -0700
Subject: [PATCH] docs(code-snippet): add examples for dynnamic, hidden code
 snippets

---
 docs/src/pages/components/CodeSnippet.svx     | 14 +++++++
 .../CodeSnippet/DynamicCodeSnippet.svelte     | 15 ++++++++
 .../CodeSnippet/HiddenCodeSnippet.svelte      | 38 +++++++++++++++++++
 3 files changed, 67 insertions(+)
 create mode 100644 docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte
 create mode 100644 docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte

diff --git a/docs/src/pages/components/CodeSnippet.svx b/docs/src/pages/components/CodeSnippet.svx
index 0eaffda1..fb0a6bbc 100644
--- a/docs/src/pages/components/CodeSnippet.svx
+++ b/docs/src/pages/components/CodeSnippet.svx
@@ -51,6 +51,20 @@ let comment = `
 
 <CodeSnippet wrapText type="multi" code="{comment}" />
 
+### Dynamic multi-line code
+
+For dynamically updated code, you must use the `code` prop instead of the default slot.
+
+<FileSource src="/framed/CodeSnippet/DynamicCodeSnippet" />
+
+### Hidden multi-line code
+
+There may be cases where your code snippet is visually hidden. The logic to render the "Show more" button relies on the element's computed height. For visually hidden content, the button will not appear because the height is `0`.
+
+The recommended workaround is to re-render the component. See the example below.
+
+<FileSource src="/framed/CodeSnippet/HiddenCodeSnippet" />
+
 ### Skeleton
 
 The default skeleton type is `"single"`.
diff --git a/docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte b/docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte
new file mode 100644
index 00000000..30332096
--- /dev/null
+++ b/docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte
@@ -0,0 +1,15 @@
+<script>
+  import { ToggleSmall, CodeSnippet } from "carbon-components-svelte";
+
+  let toggled = false;
+
+  $: length = toggled ? 20 : 10;
+  $: code = Array.from({ length }, (_, i) => i + 1).join("\n");
+</script>
+
+<ToggleSmall
+  style="margin-bottom: var(--cds-spacing-05)"
+  labelText="Trigger snippet overflow"
+  bind:toggled
+/>
+<CodeSnippet type="multi" code="{code}" />
diff --git a/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte b/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
new file mode 100644
index 00000000..29987a3c
--- /dev/null
+++ b/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
@@ -0,0 +1,38 @@
+<script>
+  import { CodeSnippet, Tabs, Tab, TabContent } from "carbon-components-svelte";
+
+  let selected = 0;
+
+  const code = Array.from({ length: 20 }, (_, i) => i + 1).join("\n");
+</script>
+
+<style>
+  p {
+    margin-bottom: var(--cds-spacing-05);
+  }
+</style>
+
+<Tabs bind:selected>
+  <Tab label="Tab 1" />
+  <Tab label="Tab 2" />
+  <div slot="content">
+    <TabContent>
+      <p>Tab 2 contains a multi-line code snippet.</p>
+      <p>
+        Inactive tab content is visually hidden but still rendered in the DOM.
+        As a result, the "Show more" button will not appear because the computed
+        height of the code element is 0.
+      </p>
+      <p>
+        To work around this, you can force the code snippet to be re-rendered
+        when the tab content is active.
+      </p>
+    </TabContent>
+    <TabContent>
+      <p>The "Show more" button should appear.</p>
+      {#if selected === 1}
+        <CodeSnippet type="multi" code="{code}" />
+      {/if}
+    </TabContent>
+  </div>
+</Tabs>