From 0f6d42eb42b38ffab8f44356a3d0da14d4136f61 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 30 Oct 2020 10:14:08 -0700
Subject: [PATCH 1/4] fix(code-snippet): showMoreLess should update if code
 changes

---
 src/CodeSnippet/CodeSnippet.svelte | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte
index 0061cb84..0d3c52f8 100644
--- a/src/CodeSnippet/CodeSnippet.svelte
+++ b/src/CodeSnippet/CodeSnippet.svelte
@@ -99,15 +99,22 @@
    */
   export let ref = null;
 
+  import { tick } from "svelte";
   import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
   import { Button } from "../Button";
   import { Copy } from "../Copy";
   import { CopyButton } from "../CopyButton";
   import CodeSnippetSkeleton from "./CodeSnippet.Skeleton.svelte";
 
+  function setShowMoreLess() {
+    const { height } = ref.getBoundingClientRect();
+    if (height > 0) showMoreLess = ref.getBoundingClientRect().height > 255;
+  }
+
   $: expandText = expanded ? showLessText : showMoreText;
   $: if (type === "multi" && ref) {
-    showMoreLess = ref.getBoundingClientRect().height > 255;
+    if (code === undefined) setShowMoreLess();
+    if (code) tick().then(setShowMoreLess);
   }
 </script>
 

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 2/4] 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>

From 25a7ceacf89adfd1bda7e552d352bb684ced60a8 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 30 Oct 2020 10:43:30 -0700
Subject: [PATCH 3/4] docs(code-snippet): simplify hidden code snippet example

---
 .../CodeSnippet/HiddenCodeSnippet.svelte      | 50 ++++++++-----------
 1 file changed, 22 insertions(+), 28 deletions(-)

diff --git a/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte b/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
index 29987a3c..079d8b05 100644
--- a/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
+++ b/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
@@ -1,38 +1,32 @@
 <script>
-  import { CodeSnippet, Tabs, Tab, TabContent } from "carbon-components-svelte";
+  import { ToggleSmall, CodeSnippet } from "carbon-components-svelte";
 
-  let selected = 0;
+  let toggled = false;
 
   const code = Array.from({ length: 20 }, (_, i) => i + 1).join("\n");
 </script>
 
 <style>
-  p {
-    margin-bottom: var(--cds-spacing-05);
+  .hidden {
+    display: none;
   }
 </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>
+<ToggleSmall
+  style="margin-bottom: var(--cds-spacing-05)"
+  labelText="Show code snippets"
+  bind:toggled
+/>
+
+{#if toggled}
+  <h5>"Show more" will not render</h5><br />
+{/if}
+<div class:hidden="{!toggled}">
+  <CodeSnippet type="multi" code="{code}" />
+</div>
+
+{#if toggled}
+  <br /><br />
+  <h5>"Show more" will render</h5><br />
+  <CodeSnippet type="multi" code="{code}" />
+{/if}

From 882737c8b8c618a06dea762b5a4592d7cd86cda2 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 30 Oct 2020 10:48:12 -0700
Subject: [PATCH 4/4] docs(code-snippet): update hidden example copy

---
 docs/src/pages/components/CodeSnippet.svx                  | 2 +-
 docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/CodeSnippet.svx b/docs/src/pages/components/CodeSnippet.svx
index fb0a6bbc..d86f3894 100644
--- a/docs/src/pages/components/CodeSnippet.svx
+++ b/docs/src/pages/components/CodeSnippet.svx
@@ -59,7 +59,7 @@ For dynamically updated code, you must use the `code` prop instead of the defaul
 
 ### 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`.
+There may be cases where your code snippet is hidden in the DOM. The logic to render the "Show more" button relies on the element's computed height. For hidden content, the button will not appear because the computed height is `0`.
 
 The recommended workaround is to re-render the component. See the example below.
 
diff --git a/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte b/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
index 079d8b05..93251d83 100644
--- a/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
+++ b/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
@@ -28,5 +28,7 @@
 {#if toggled}
   <br /><br />
   <h5>"Show more" will render</h5><br />
-  <CodeSnippet type="multi" code="{code}" />
+  <div class:hidden="{!toggled}">
+    <CodeSnippet type="multi" code="{code}" />
+  </div>
 {/if}