storybookjs · shilman · Aug 18, 2022 · Aug 17, 2022 · Aug 8, 2022 · Aug 8, 2022
diff --git a/code/examples/official-storybook/manager.js b/code/examples/official-storybook/manager.js
@@ -8,10 +8,11 @@ import addHeadWarning from './head-warning';
 addHeadWarning('manager-head-not-loaded', 'Manager head not loaded');
 
 const PrefixIcon = styled(Icons)(({ theme }) => ({
-  marginRight: 8,
+  marginRight: 5,
   fontSize: 'inherit',
-  height: '1em',
-  width: '1em',
+  height: 12,
+  width: 12,
+  paddingTop: 1,
   display: 'inline',
   alignSelf: 'center',
 }));

diff --git a/code/examples/official-storybook/preview.js b/code/examples/official-storybook/preview.js
@@ -72,6 +72,25 @@ const ThemeStack = styled.div(
   })
 );
 
+const PlayFnNotice = styled.div(
+  {
+    position: 'absolute',
+    bottom: '1rem',
+    right: '1rem',
+    border: '1px solid #ccc',
+    borderRadius: '5px',
+    padding: '1rem',
+    fontSize: '12px',
+    '> *': {
+      display: 'block',
+    },
+  },
+  ({ theme }) => ({
+    background: theme.background.app,
+    color: theme.color.defaultText,
+  })
+);
+
 const ThemedSetRoot = () => {
   const theme = useTheme();
 
@@ -87,8 +106,9 @@ const ThemedSetRoot = () => {
 };
 
 export const decorators = [
-  (StoryFn, { globals, parameters }) => {
-    const theme = globals.theme || parameters.theme || (isChromatic() ? 'stacked' : 'light');
+  (StoryFn, { globals, parameters, playFunction }) => {
+    const defaultTheme = isChromatic() && !playFunction ? 'stacked' : 'light';
+    const theme = globals.theme || parameters.theme || defaultTheme;
 
     switch (theme) {
       case 'side-by-side': {
@@ -137,6 +157,12 @@ export const decorators = [
             <Symbols icons={['folder', 'component', 'document', 'bookmarkhollow']} />
             <Global styles={createReset} />
             <ThemedSetRoot />
+            {!parameters.theme && isChromatic() && playFunction && (
+              <PlayFnNotice>
+                <span>Detected play function.</span>
+                <span>Rendering in a single theme</span>
+              </PlayFnNotice>
+            )}
             <StoryFn />
           </ThemeProvider>
         );

diff --git a/code/lib/builder-manager/templates/template.ejs b/code/lib/builder-manager/templates/template.ejs
@@ -2,13 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+
     <title><%= typeof title !== 'undefined'? title : 'Storybook'%></title>
 
     <link rel="shortcut icon" href="./favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <% if (typeof head !== 'undefined') { %> <%- head %> <% } %>
-    
+
     <style>
       #root[hidden],
       #docs-root[hidden] {
@@ -19,7 +20,6 @@
     <% files.css.forEach(file => { %>
     <link href="<%= file %>" rel="stylesheet" />
     <% }); %>
-
   </head>
   <body>
     <div id="root"></div>
@@ -34,11 +34,11 @@
       <% } %>
     </script>
     <% } %>
-    
+
     <script src="./sb-manager/runtime.mjs" type="module"></script>
 
     <% files.js.forEach(file => { %>
-      <script src="<%= file %>" type="module"></script>
+    <script src="<%= file %>" type="module"></script>
     <% }); %>
   </body>
 </html>
diff --git a/code/lib/components/src/tooltip/TooltipLinkList.tsx b/code/lib/components/src/tooltip/TooltipLinkList.tsx
@@ -8,7 +8,7 @@ const List = styled.div(
     minWidth: 180,
     overflow: 'hidden',
     overflowY: 'auto',
-    maxHeight: 13.5 * 32, // 11.5 items
+    maxHeight: 15.5 * 32, // 11.5 items
   },
   ({ theme }) => ({
     borderRadius: theme.appBorderRadius * 2,

diff --git a/code/lib/ui/src/components/layout/container.tsx b/code/lib/ui/src/components/layout/container.tsx
@@ -7,11 +7,11 @@ import * as persistence from './persist';
 import { Draggable, Handle, DraggableData, DraggableEvent } from './draggers';
 
 const MIN_NAV_WIDTH = 200; // visually there's an additional 10px due to the canvas' left margin
-const MIN_CANVAS_WIDTH = 200; // visually it's 10px less due to the canvas' left margin
+const MIN_CANVAS_WIDTH = 200;
 const MIN_CANVAS_HEIGHT = 200; // visually it's 50px less due to the canvas toolbar and top margin
-const MIN_PANEL_WIDTH = 200; // visually it's 10px less due to the canvas' right margin
-const MIN_PANEL_HEIGHT = 200; // visually it's 50px less due to the panel toolbar and bottom margin
-const DEFAULT_NAV_WIDTH = 220;
+const MIN_PANEL_WIDTH = 220;
+const MIN_PANEL_HEIGHT = 200; // visually it's 50px less due to the panel toolbar
+const DEFAULT_NAV_WIDTH = 230;
 const DEFAULT_PANEL_WIDTH = 400;
 
 const Pane = styled.div<{
@@ -95,9 +95,13 @@ const Paper = styled.div<{ isFullscreen: boolean }>(
           borderRadius: 0,
         }
       : {
-          borderRadius: theme.appBorderRadius,
+          borderTopLeftRadius:
+            theme.appBorderRadius === 0 ? theme.appBorderRadius : theme.appBorderRadius + 1,
+          borderBottomLeftRadius:
+            theme.appBorderRadius === 0 ? theme.appBorderRadius : theme.appBorderRadius + 1,
           overflow: 'hidden',
-          boxShadow: '0 1px 5px 0 rgba(0, 0, 0, 0.1)',
+          boxShadow: '0 1px 3px 1px rgba(0, 0, 0, 0.05), 0px 0 0px 1px rgba(0, 0, 0, 0.05)',
+          transform: 'translateZ(0)',
         }
 );
 
@@ -492,7 +496,7 @@ class Layout extends Component<LayoutProps, LayoutState> {
     const { children, bounds, options, theme, viewMode, panelCount } = this.props;
     const { isDragging, resizerNav, resizerPanel } = this.state;
 
-    const margin = theme.layoutMargin;
+    const margin = 0;
     const isNavHidden = options.isFullscreen || !options.showNav;
     const isPanelHidden =
       options.isFullscreen || !options.showPanel || viewMode !== 'story' || panelCount === 0;
@@ -559,14 +563,13 @@ class Layout extends Component<LayoutProps, LayoutState> {
                   ? {
                       left: navX + margin,
                       width: bounds.width - navX - 2 * margin,
-                      marginTop: -margin,
+                      marginTop: -10,
                     }
                   : {
-                      marginLeft: 1,
+                      marginLeft: -10,
                     }
               }
               axis={isPanelBottom ? 'y' : 'x'}
-              reverse
             />
           </Draggable>
         )}

diff --git a/code/lib/ui/src/components/layout/draggers.tsx b/code/lib/ui/src/components/layout/draggers.tsx
@@ -4,7 +4,7 @@ import { styled } from '@storybook/theming';
 export type Axis = 'x' | 'y';
 
 const Handle = styled.div<{ isDragging: boolean; axis: Axis; reverse?: boolean }>(
-  ({ theme, isDragging }) => ({
+  ({ theme }) => ({
     zIndex: 10,
     position: 'absolute',
     top: 0,
@@ -13,31 +13,26 @@ const Handle = styled.div<{ isDragging: boolean; axis: Axis; reverse?: boolean }
     justifyContent: 'center',
     alignItems: 'center',
 
-    color: isDragging ? theme.color.secondary : theme.appBorderColor,
-
     overflow: 'hidden',
     transition:
       'color 0.2s linear, background-size 0.2s linear, background 0.2s linear, background-position 0s linear',
-    '&:hover': {
-      color: theme.color.secondary,
-    },
   }),
   ({ axis }) => ({
     cursor: axis === 'x' ? 'col-resize' : 'row-resize',
   }),
-  ({ theme, axis }) =>
+  ({ axis }) =>
     axis === 'x'
       ? {
           height: '100%',
-          width: theme.layoutMargin,
-          marginLeft: 0,
+          width: 10,
+          marginLeft: -10,
         }
       : {
-          height: theme.layoutMargin,
+          height: 10,
           width: '100%',
-          marginTop: 0,
+          marginTop: -10,
         },
-  ({ axis, isDragging, reverse = false }) => {
+  ({ axis, isDragging }) => {
     if (axis === 'y') {
       const style = {
         backgroundImage: `radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%)`,
@@ -57,7 +52,7 @@ const Handle = styled.div<{ isDragging: boolean; axis: Axis; reverse?: boolean }
       const style = {
         backgroundImage: `radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%)`,
         backgroundSize: '50px 100%',
-        backgroundPosition: reverse ? '100% 50%' : '0 50%',
+        backgroundPosition: '0 50%',
         backgroundRepeat: 'no-repeat',
       };
       return isDragging

diff --git a/code/lib/ui/src/components/sidebar/Heading.tsx b/code/lib/ui/src/components/sidebar/Heading.tsx
@@ -45,7 +45,7 @@ const SkipToCanvasLink = styled(Button)(({ theme }) => ({
     width: '100%',
     padding: '10px 15px',
     fontSize: theme.typography.size.s1,
-    zIndex: 1,
+    zIndex: 3,
     transform: 'translate(0,-100px)',
     '&:focus': {
       transform: 'translate(0)',

diff --git a/code/lib/ui/src/components/sidebar/Menu.stories.tsx b/code/lib/ui/src/components/sidebar/Menu.stories.tsx
@@ -1,8 +1,10 @@
+import { expect } from '@storybook/jest';
 import React, { Fragment, FunctionComponent } from 'react';
 
 import { WithTooltip, TooltipLinkList, Icons } from '@storybook/components';
 import { styled } from '@storybook/theming';
-import { MenuItemIcon, SidebarMenu, ToolbarMenu, MenuButton, SidebarMenuList } from './Menu';
+import { within, userEvent, screen } from '@storybook/testing-library';
+import { MenuItemIcon, SidebarMenu, ToolbarMenu } from './Menu';
 import { useMenu } from '../../containers/menu';
 
 export default {
@@ -39,22 +41,6 @@ const DoubleThemeRenderingHack = styled.div({
   },
 });
 
-const ExpandedMenu: FunctionComponent<{ menu: any }> = ({ menu }) => (
-  <DoubleThemeRenderingHack>
-    <WithTooltip
-      placement="bottom"
-      trigger="click"
-      closeOnClick
-      startOpen
-      tooltip={({ onHide }) => <SidebarMenuList onHide={onHide} menu={menu} />}
-    >
-      <MenuButton outline small containsIcon highlighted={false} title="Shortcuts">
-        <Icons icon="ellipsis" />
-      </MenuButton>
-    </WithTooltip>
-  </DoubleThemeRenderingHack>
-);
-
 export const Expanded = () => {
   const menu = useMenu(
     {
@@ -70,7 +56,18 @@ export const Expanded = () => {
     false,
     false
   );
-  return <ExpandedMenu menu={menu} />;
+  return (
+    <DoubleThemeRenderingHack>
+      <SidebarMenu menu={menu} isHighlighted />
+    </DoubleThemeRenderingHack>
+  );
+};
+Expanded.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const menuButton = await canvas.findByRole('button');
+  await userEvent.click(menuButton);
+  const aboutStorybookBtn = await screen.findByText(/About your Storybook/);
+  await expect(aboutStorybookBtn).toBeInTheDocument();
 };
 
 export const ExpandedWithoutReleaseNotes = () => {
@@ -88,5 +85,16 @@ export const ExpandedWithoutReleaseNotes = () => {
     false,
     false
   );
-  return <ExpandedMenu menu={menu} />;
+
+  return (
+    <DoubleThemeRenderingHack>
+      <SidebarMenu menu={menu} />
+    </DoubleThemeRenderingHack>
+  );
+};
+ExpandedWithoutReleaseNotes.play = async (context) => {
+  const canvas = within(context.canvasElement);
+  await Expanded.play(context);
+  const releaseNotes = await canvas.queryByText(/Release notes/);
+  await expect(releaseNotes).not.toBeInTheDocument();
 };