Fix snapshot diff

storybookjs · Jan 27, 2023 · 81e410d · 81e410d
1 parent 0c27306
commit 81e410d
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 66 deletions.
diff --git a/code/ui/components/src/tabs/tabs.tsx b/code/ui/components/src/tabs/tabs.tsx
@@ -51,10 +51,23 @@ const WrapperChildren = styled.div<{ backgroundColor: string }>(({ theme, backgr
 
 export const TabBar = styled.div({
   overflow: 'hidden',
+
+  '&:first-of-type': {
+    marginLeft: -3,
+  },
+
   whiteSpace: 'nowrap',
   flexGrow: 1,
 });
 
+const TabBarSide = styled(Side)({
+  flexGrow: 1,
+  flexShrink: 1,
+  maxWidth: '100%',
+});
+
+TabBar.displayName = 'TabBar';
+
 export interface ContentProps {
   absolute?: boolean;
   bordered?: boolean;
@@ -147,31 +160,33 @@ export const Tabs: FC<TabsProps> = memo(
     return list.length ? (
       <Wrapper absolute={absolute} bordered={bordered} id={htmlId}>
         <WrapperChildren backgroundColor={backgroundColor}>
-          <TabBar ref={tabBarRef} role="tablist">
-            {visibleList.map(({ title, id, active, color }) => {
-              return (
-                <TabButton
-                  id={`tabbutton-${sanitize(title)}`}
-                  ref={(ref: HTMLButtonElement) => {
-                    tabRefs.current.set(id, ref);
-                  }}
-                  className={`tabbutton ${active ? 'tabbutton-active' : ''}`}
-                  type="button"
-                  key={id}
-                  active={active}
-                  textColor={color}
-                  onClick={(e: MouseEvent) => {
-                    e.preventDefault();
-                    actions.onSelect(id);
-                  }}
-                  role="tab"
-                >
-                  {title}
-                </TabButton>
-              );
-            })}
-            <AddonTab menuName={menuName} actions={actions} />
-          </TabBar>
+          <TabBarSide left>
+            <TabBar ref={tabBarRef} role="tablist">
+              {visibleList.map(({ title, id, active, color }) => {
+                return (
+                  <TabButton
+                    id={`tabbutton-${sanitize(title)}`}
+                    ref={(ref: HTMLButtonElement) => {
+                      tabRefs.current.set(id, ref);
+                    }}
+                    className={`tabbutton ${active ? 'tabbutton-active' : ''}`}
+                    type="button"
+                    key={id}
+                    active={active}
+                    textColor={color}
+                    onClick={(e: MouseEvent) => {
+                      e.preventDefault();
+                      actions.onSelect(id);
+                    }}
+                    role="tab"
+                  >
+                    {title}
+                  </TabButton>
+                );
+              })}
+              <AddonTab menuName={menuName} actions={actions} />
+            </TabBar>
+          </TabBarSide>
           {tools ? <Side right>{tools}</Side> : null}
         </WrapperChildren>
         <Content id="panel-tab-content" bordered={bordered} absolute={absolute}>

diff --git a/code/ui/manager/src/components/hooks/useMedia.tsx b/code/ui/manager/src/components/hooks/useMedia.tsx
@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+
+const useMediaQuery = (query: string) => {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => setMatches(media.matches);
+    window.addEventListener('resize', listener);
+    return () => window.removeEventListener('resize', listener);
+  }, [matches, query]);
+
+  return matches;
+};
+
+export default useMediaQuery;
diff --git a/code/ui/manager/src/components/panel/panel.tsx b/code/ui/manager/src/components/panel/panel.tsx
@@ -1,16 +1,9 @@
 import type { ReactElement } from 'react';
 import React, { Component, Fragment } from 'react';
-import { styled } from '@storybook/theming';
 import { Tabs, Icons, IconButton } from '@storybook/components';
 import type { State } from '@storybook/manager-api';
 import { shortcutToHumanString } from '@storybook/manager-api';
-
-const DesktopOnlyIconButton = styled(IconButton)({
-  // Hides full screen icon at mobile breakpoint defined in app.js
-  '@media (max-width: 599px)': {
-    display: 'none',
-  },
-});
+import useMediaQuery from '../hooks/useMedia';
 
 export interface SafeTabProps {
   title: (() => string) | string;
@@ -63,39 +56,46 @@ const AddonPanel = React.memo<{
     selectedPanel = null,
     panelPosition = 'right',
     absolute = true,
-  }) => (
-    <Tabs
-      absolute={absolute}
-      {...(selectedPanel ? { selected: selectedPanel } : {})}
-      menuName="Addons"
-      actions={actions}
-      tools={
-        <Fragment>
-          <DesktopOnlyIconButton
-            key="position"
-            onClick={actions.togglePosition}
-            title={`Change addon orientation [${shortcutToHumanString(shortcuts.panelPosition)}]`}
-          >
-            <Icons icon={panelPosition === 'bottom' ? 'sidebaralt' : 'bottombar'} />
-          </DesktopOnlyIconButton>
-          <DesktopOnlyIconButton
-            key="visibility"
-            onClick={actions.toggleVisibility}
-            title={`Hide addons [${shortcutToHumanString(shortcuts.togglePanel)}]`}
-          >
-            <Icons icon="close" />
-          </DesktopOnlyIconButton>
-        </Fragment>
-      }
-      id="storybook-panel-root"
-    >
-      {Object.entries(panels).map(([k, v]) => (
-        <SafeTab key={k} id={k} title={typeof v.title === 'function' ? v.title() : v.title}>
-          {v.render}
-        </SafeTab>
-      ))}
-    </Tabs>
-  )
+  }) => {
+    const isTablet = useMediaQuery('(min-width: 599px)');
+    return (
+      <Tabs
+        absolute={absolute}
+        {...(selectedPanel ? { selected: selectedPanel } : {})}
+        menuName="Addons"
+        actions={actions}
+        tools={
+          isTablet ? (
+            <Fragment>
+              <IconButton
+                key="position"
+                onClick={actions.togglePosition}
+                title={`Change addon orientation [${shortcutToHumanString(
+                  shortcuts.panelPosition
+                )}]`}
+              >
+                <Icons icon={panelPosition === 'bottom' ? 'sidebaralt' : 'bottombar'} />
+              </IconButton>
+              <IconButton
+                key="visibility"
+                onClick={actions.toggleVisibility}
+                title={`Hide addons [${shortcutToHumanString(shortcuts.togglePanel)}]`}
+              >
+                <Icons icon="close" />
+              </IconButton>
+            </Fragment>
+          ) : undefined
+        }
+        id="storybook-panel-root"
+      >
+        {Object.entries(panels).map(([k, v]) => (
+          <SafeTab key={k} id={k} title={typeof v.title === 'function' ? v.title() : v.title}>
+            {v.render}
+          </SafeTab>
+        ))}
+      </Tabs>
+    );
+  }
 );
 
 AddonPanel.displayName = 'AddonPanel';