Merge pull request #25682 from ivoilic/feature/addon-themes/two-theme…

…-toggle UI: Updated the theme switcher to use toggle button for two themes
storybookjs · Feb 23, 2024 · 6bfc7e9 · 6bfc7e9
2 parents 2a8d0b9 + 6e29f59
commit 6bfc7e9
Showing 1 changed file with 50 additions and 28 deletions.
diff --git a/code/addons/themes/src/theme-switcher.tsx b/code/addons/themes/src/theme-switcher.tsx
@@ -15,10 +15,10 @@ import {
 
 const IconButtonLabel = styled.div(({ theme }) => ({
   fontSize: theme.typography.size.s2 - 1,
-  marginLeft: 10,
 }));
 
 const hasMultipleThemes = (themesList: ThemeAddonState['themesList']) => themesList.length > 1;
+const hasTwoThemes = (themesList: ThemeAddonState['themesList']) => themesList.length === 2;
 
 export const ThemeSwitcher = () => {
   const { themeOverride } = useParameter<ThemeParameters>(
@@ -52,33 +52,55 @@ export const ThemeSwitcher = () => {
     return themeName && <>{`${themeName} theme`}</>;
   }, [themeOverride, themeDefault, selected]);
 
-  return hasMultipleThemes(themesList) ? (
-    <Fragment>
-      <WithTooltip
-        placement="top"
-        trigger="click"
-        closeOnOutsideClick
-        tooltip={({ onHide }) => {
-          return (
-            <TooltipLinkList
-              links={themesList.map((theme) => ({
-                id: theme,
-                title: theme,
-                active: selected === theme,
-                onClick: () => {
-                  updateGlobals({ theme });
-                  onHide();
-                },
-              }))}
-            />
-          );
+  if (hasTwoThemes(themesList)) {
+    const currentTheme = selected || themeDefault;
+    const alternateTheme = themesList.find((theme) => theme !== currentTheme);
+    return (
+      <IconButton
+        key={THEME_SWITCHER_ID}
+        active={!themeOverride}
+        title="Theme"
+        onClick={() => {
+          updateGlobals({ theme: alternateTheme });
         }}
       >
-        <IconButton key={THEME_SWITCHER_ID} active={!themeOverride} title="Theme">
-          <PaintBrushIcon />
-          {label && <IconButtonLabel>{label}</IconButtonLabel>}
-        </IconButton>
-      </WithTooltip>
-    </Fragment>
-  ) : null;
+        <PaintBrushIcon />
+        {label && <IconButtonLabel>{label}</IconButtonLabel>}
+      </IconButton>
+    );
+  }
+
+  if (hasMultipleThemes(themesList)) {
+    return (
+      <Fragment>
+        <WithTooltip
+          placement="top"
+          trigger="click"
+          closeOnOutsideClick
+          tooltip={({ onHide }) => {
+            return (
+              <TooltipLinkList
+                links={themesList.map((theme) => ({
+                  id: theme,
+                  title: theme,
+                  active: selected === theme,
+                  onClick: () => {
+                    updateGlobals({ theme });
+                    onHide();
+                  },
+                }))}
+              />
+            );
+          }}
+        >
+          <IconButton key={THEME_SWITCHER_ID} active={!themeOverride} title="Theme">
+            <PaintBrushIcon />
+            {label && <IconButtonLabel>{label}</IconButtonLabel>}
+          </IconButton>
+        </WithTooltip>
+      </Fragment>
+    );
+  }
+
+  return null;
 };