From 45dfbb26cfeb97c58a0da813e96a137e23dfe548 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 30 Nov 2020 11:31:48 -0800
Subject: [PATCH] docs(tabs): add dynamic example

---
 docs/src/pages/components/Tabs.svx            |  8 +++
 docs/src/pages/framed/Tabs/TabsDynamic.svelte | 65 +++++++++++++++----
 2 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/docs/src/pages/components/Tabs.svx b/docs/src/pages/components/Tabs.svx
index 19f1e72f..bf6340f7 100644
--- a/docs/src/pages/components/Tabs.svx
+++ b/docs/src/pages/components/Tabs.svx
@@ -33,6 +33,14 @@ components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"]
   </div>
 </Tabs>
 
+### Re-rendering tabs
+
+Use the [`#key` block](https://svelte.dev/docs#key) to dynamically update tab items or content.
+
+The example below shows tabs and the bound `selected` index being programmatically updated.
+
+<FileSource src="/framed/Tabs/TabsDynamic" />
+
 ### Skeleton
 
 <TabsSkeleton count={3} />
\ No newline at end of file
diff --git a/docs/src/pages/framed/Tabs/TabsDynamic.svelte b/docs/src/pages/framed/Tabs/TabsDynamic.svelte
index 59344d8d..7af795c3 100644
--- a/docs/src/pages/framed/Tabs/TabsDynamic.svelte
+++ b/docs/src/pages/framed/Tabs/TabsDynamic.svelte
@@ -1,5 +1,12 @@
 <script>
-  import { Button, Tabs, Tab, TabContent } from "carbon-components-svelte";
+  import {
+    ButtonSet,
+    Button,
+    Tabs,
+    Tab,
+    TabContent,
+  } from "carbon-components-svelte";
+  import { afterUpdate } from "svelte";
 
   let tabs = [
     { title: "blue", visible: true },
@@ -7,17 +14,23 @@
     { title: "red", visible: true },
   ];
 
-  const toggleTab = (title) => {
-    for (const i in tabs) {
-      if (tabs[i].title === title) {
-        tabs[i].visible = !tabs[i].visible;
-      }
-    }
-  };
-
   let selected = 0;
+
+  afterUpdate(() => {
+    // if the selected tab is not visible
+    // reset the index to the next visible tab
+    if (tabs[selected].visible === false) {
+      selected = tabs.filter((tab) => tab.visible).length - 1;
+    }
+  });
 </script>
 
+<style>
+  div {
+    margin: var(--cds-layout-02) 0;
+  }
+</style>
+
 {#key tabs}
   <Tabs bind:selected>
     {#each tabs as tab (tab.title)}
@@ -37,6 +50,34 @@
 
 <p>Selected index: {selected}</p>
 
-{#each tabs as { title } (title)}
-  <Button on:click="{() => toggleTab(title)}">Toggle {title} tab</Button>
-{/each}
+<div>
+  <ButtonSet>
+    {#each tabs as { title } (title)}
+      <Button
+        kind="tertiary"
+        size="small"
+        on:click="{() => {
+          tabs = tabs.map((tab) => ({
+            ...tab,
+            visible: tab.title === title ? !tab.visible : tab.visible,
+          }));
+        }}"
+      >
+        Toggle
+        {title}
+        tab
+      </Button>
+    {/each}
+  </ButtonSet>
+</div>
+
+<div>
+  <Button
+    size="small"
+    on:click="{() => {
+      selected = 1;
+    }}"
+  >
+    Set selected to 1
+  </Button>
+</div>