From a4aefad0e4e6ca1ba3bc6d718a2f95d1f69d2d39 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 9 Mar 2025 13:59:36 -0700
Subject: [PATCH] docs(ui-shell): add "Header with multiple switchers" example
 (#2112)

---
 docs/src/pages/components/UIShell.svx         | 10 +++
 .../UIShell/HeaderMultipleSwitcher.svelte     | 85 +++++++++++++++++++
 2 files changed, 95 insertions(+)
 create mode 100644 docs/src/pages/framed/UIShell/HeaderMultipleSwitcher.svelte

diff --git a/docs/src/pages/components/UIShell.svx b/docs/src/pages/components/UIShell.svx
index 507338c3..d5c650ef 100644
--- a/docs/src/pages/components/UIShell.svx
+++ b/docs/src/pages/components/UIShell.svx
@@ -59,6 +59,16 @@ You can disable the `transition` by setting it to `false`.
 
 <FileSource src="/framed/UIShell/HeaderSwitcher" />
 
+## Header with multiple switchers
+
+Multiple switchers can be used, and the switcher button can be customized. For example, display a tooltip using `iconDescription`.
+
+Control the tooltip alignment using `tooltipAlignment`.
+
+Note that providing `text` overrides the tooltip.
+
+<FileSource src="/framed/UIShell/HeaderMultipleSwitcher" />
+
 ## Header with global search
 
 <FileSource src="/framed/UIShell/HeaderSearch" />
diff --git a/docs/src/pages/framed/UIShell/HeaderMultipleSwitcher.svelte b/docs/src/pages/framed/UIShell/HeaderMultipleSwitcher.svelte
new file mode 100644
index 00000000..6a9efdb6
--- /dev/null
+++ b/docs/src/pages/framed/UIShell/HeaderMultipleSwitcher.svelte
@@ -0,0 +1,85 @@
+<script>
+  import {
+    Header,
+    HeaderUtilities,
+    HeaderAction,
+    HeaderPanelLinks,
+    HeaderPanelDivider,
+    HeaderPanelLink,
+    SkipToContent,
+    Content,
+    Grid,
+    Row,
+    Column,
+  } from "carbon-components-svelte";
+  import SettingsAdjust from "carbon-icons-svelte/lib/SettingsAdjust.svelte";
+  import UserAvatarFilledAlt from "carbon-icons-svelte/lib/UserAvatarFilledAlt.svelte";
+
+  let isOpen1 = false;
+  let isOpen2 = false;
+  let isOpen3 = false;
+</script>
+
+<Header company="IBM" platformName="Carbon Svelte" isSideNavOpen>
+  <svelte:fragment slot="skip-to-content">
+    <SkipToContent />
+  </svelte:fragment>
+  <HeaderUtilities>
+    <HeaderAction
+      bind:isOpen={isOpen1}
+      iconDescription="Settings"
+      tooltipAlignment="start"
+      icon={SettingsAdjust}
+      on:open={() => {
+        isOpen2 = false;
+        isOpen3 = false;
+      }}
+    >
+      <HeaderPanelLinks>
+        <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
+        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
+        <HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
+        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
+      </HeaderPanelLinks>
+    </HeaderAction>
+    <HeaderAction
+      bind:isOpen={isOpen2}
+      iconDescription="Profile"
+      icon={UserAvatarFilledAlt}
+      on:open={() => {
+        isOpen1 = false;
+        isOpen3 = false;
+      }}
+    >
+      <HeaderPanelLinks>
+        <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
+        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
+        <HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
+        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
+      </HeaderPanelLinks>
+    </HeaderAction>
+    <HeaderAction
+      bind:isOpen={isOpen3}
+      text="Switcher text"
+      on:open={() => {
+        isOpen1 = false;
+        isOpen2 = false;
+      }}
+    >
+      <HeaderPanelLinks>
+        <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
+        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
+      </HeaderPanelLinks>
+    </HeaderAction>
+  </HeaderUtilities>
+</Header>
+
+<Content>
+  <Grid>
+    <Row>
+      <Column>
+        <h1>Welcome</h1>
+      </Column>
+    </Row>
+  </Grid>
+</Content>