From 399f5601a913fdb090d471363834b77e24e5cba5 Mon Sep 17 00:00:00 2001
From: Michael Arestad <marestad@gmail.com>
Date: Wed, 17 Aug 2022 12:46:55 -0600
Subject: [PATCH 01/22] Initial update to layout

---
 code/lib/blocks/src/components/Toolbar.tsx      | 1 +
 code/lib/builder-manager/templates/template.ejs | 9 +++++----
 code/lib/ui/src/components/layout/container.tsx | 7 ++++---
 code/lib/ui/src/components/layout/draggers.tsx  | 6 +++---
 4 files changed, 13 insertions(+), 10 deletions(-)
diff --git a/code/lib/blocks/src/components/Toolbar.tsx b/code/lib/blocks/src/components/Toolbar.tsx
index a5dfeeec4812..fa0ed7de5a23 100644
--- a/code/lib/blocks/src/components/Toolbar.tsx
+++ b/code/lib/blocks/src/components/Toolbar.tsx
@@ -75,6 +75,7 @@ const Eject: FC<EjectProps> = ({ baseUrl, storyId }) => (
 );
 
 const Bar = styled(FlexBar)({
+  borderRadius: 40,
   position: 'absolute',
   left: 0,
   right: 0,
diff --git a/code/lib/builder-manager/templates/template.ejs b/code/lib/builder-manager/templates/template.ejs
index 046d109199ee..8e9974e33707 100644
--- a/code/lib/builder-manager/templates/template.ejs
+++ b/code/lib/builder-manager/templates/template.ejs
@@ -2,13 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <meta name="theme-color" content="<%= themeColor %>" />
+
     <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 +21,6 @@
     <% files.css.forEach(file => { %>
     <link href="<%= file %>" rel="stylesheet" />
     <% }); %>
-
   </head>
   <body>
     <div id="root"></div>
@@ -34,11 +35,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/ui/src/components/layout/container.tsx b/code/lib/ui/src/components/layout/container.tsx
index 6418925b0134..1ece8cb4ccc3 100644
--- a/code/lib/ui/src/components/layout/container.tsx
+++ b/code/lib/ui/src/components/layout/container.tsx
@@ -95,7 +95,8 @@ const Paper = styled.div<{ isFullscreen: boolean }>(
           borderRadius: 0,
         }
       : {
-          borderRadius: theme.appBorderRadius,
+          borderTopLeftRadius: theme.appBorderRadius,
+          borderBottomLeftRadius: theme.appBorderRadius,
           overflow: 'hidden',
           boxShadow: '0 1px 5px 0 rgba(0, 0, 0, 0.1)',
         }
@@ -492,7 +493,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,7 +560,7 @@ class Layout extends Component<LayoutProps, LayoutState> {
                   ? {
                       left: navX + margin,
                       width: bounds.width - navX - 2 * margin,
-                      marginTop: -margin,
+                      marginTop: -10,
                     }
                   : {
                       marginLeft: 1,
diff --git a/code/lib/ui/src/components/layout/draggers.tsx b/code/lib/ui/src/components/layout/draggers.tsx
index 6fe6dfed7a32..4dc8dddec594 100644
--- a/code/lib/ui/src/components/layout/draggers.tsx
+++ b/code/lib/ui/src/components/layout/draggers.tsx
@@ -29,11 +29,11 @@ const Handle = styled.div<{ isDragging: boolean; axis: Axis; reverse?: boolean }
     axis === 'x'
       ? {
           height: '100%',
-          width: theme.layoutMargin,
-          marginLeft: 0,
+          width: 10,
+          marginLeft: -10,
         }
       : {
-          height: theme.layoutMargin,
+          height: 10,
           width: '100%',
           marginTop: 0,
         },

From bd59f8ca76a3f2139d04e385da7a40d62ac208c4 Mon Sep 17 00:00:00 2001
From: Michael Arestad <marestad@gmail.com>
Date: Mon, 8 Aug 2022 14:29:55 -0600
Subject: [PATCH 02/22] Removed test code and fixed panel width

---
 code/lib/blocks/src/components/Toolbar.tsx      | 1 -
 code/lib/ui/src/components/layout/container.tsx | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/code/lib/blocks/src/components/Toolbar.tsx b/code/lib/blocks/src/components/Toolbar.tsx
index fa0ed7de5a23..a5dfeeec4812 100644
--- a/code/lib/blocks/src/components/Toolbar.tsx
+++ b/code/lib/blocks/src/components/Toolbar.tsx
@@ -75,7 +75,6 @@ const Eject: FC<EjectProps> = ({ baseUrl, storyId }) => (
 );
 
 const Bar = styled(FlexBar)({
-  borderRadius: 40,
   position: 'absolute',
   left: 0,
   right: 0,
diff --git a/code/lib/ui/src/components/layout/container.tsx b/code/lib/ui/src/components/layout/container.tsx
index 1ece8cb4ccc3..fae614ed50d8 100644
--- a/code/lib/ui/src/components/layout/container.tsx
+++ b/code/lib/ui/src/components/layout/container.tsx
@@ -9,9 +9,9 @@ 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_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_WIDTH = 220; // 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 DEFAULT_NAV_WIDTH = 230;
 const DEFAULT_PANEL_WIDTH = 400;
 
 const Pane = styled.div<{

From 121b3933f4b6d2f3cc4e16bed38677a95c32279a Mon Sep 17 00:00:00 2001
From: Michael Arestad <marestad@gmail.com>
Date: Mon, 8 Aug 2022 15:06:54 -0600
Subject: [PATCH 03/22] Fixes border radius clipping

---
 code/lib/ui/src/components/layout/container.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/code/lib/ui/src/components/layout/container.tsx b/code/lib/ui/src/components/layout/container.tsx
index fae614ed50d8..49c9be5d0859 100644
--- a/code/lib/ui/src/components/layout/container.tsx
+++ b/code/lib/ui/src/components/layout/container.tsx
@@ -99,6 +99,7 @@ const Paper = styled.div<{ isFullscreen: boolean }>(
           borderBottomLeftRadius: theme.appBorderRadius,
           overflow: 'hidden',
           boxShadow: '0 1px 5px 0 rgba(0, 0, 0, 0.1)',
+          transform: 'translateZ(0)',
         }
 );
 

From da0cb9bab7a3639904e700ca61aab474cf7b56c1 Mon Sep 17 00:00:00 2001
From: domyen <dom@hichroma.com>
Date: Wed, 10 Aug 2022 17:19:29 -0400
Subject: [PATCH 04/22] Fine tune the drag handles & fix a regression

---
 code/lib/ui/src/components/layout/container.tsx | 17 +++++++++--------
 code/lib/ui/src/components/layout/draggers.tsx  | 15 +++++----------
 2 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/code/lib/ui/src/components/layout/container.tsx b/code/lib/ui/src/components/layout/container.tsx
index 49c9be5d0859..b1cd7c7b6a79 100644
--- a/code/lib/ui/src/components/layout/container.tsx
+++ b/code/lib/ui/src/components/layout/container.tsx
@@ -7,10 +7,10 @@ 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 = 220; // 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 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;
 
@@ -95,10 +95,12 @@ const Paper = styled.div<{ isFullscreen: boolean }>(
           borderRadius: 0,
         }
       : {
-          borderTopLeftRadius: theme.appBorderRadius,
-          borderBottomLeftRadius: 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 0 rgba(0, 0, 0, 0.05), 0px 0 0px 1px rgba(0, 0, 0, 0.1)',
           transform: 'translateZ(0)',
         }
 );
@@ -564,11 +566,10 @@ class Layout extends Component<LayoutProps, LayoutState> {
                       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
index 4dc8dddec594..35cd32c4d41a 100644
--- 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,19 +13,14 @@ 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%',
@@ -35,9 +30,9 @@ const Handle = styled.div<{ isDragging: boolean; axis: Axis; reverse?: boolean }
       : {
           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

From ff0e4c5e887f3281c5243ca7b8944b367e79681f Mon Sep 17 00:00:00 2001
From: domyen <dom@hichroma.com>
Date: Wed, 10 Aug 2022 22:05:23 -0400
Subject: [PATCH 05/22] Tweak search styling

---
 code/lib/ui/src/components/sidebar/Search.tsx | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/code/lib/ui/src/components/sidebar/Search.tsx b/code/lib/ui/src/components/sidebar/Search.tsx
index 02ed05e93764..7dcb3f9ab9a9 100644
--- a/code/lib/ui/src/components/sidebar/Search.tsx
+++ b/code/lib/ui/src/components/sidebar/Search.tsx
@@ -56,8 +56,8 @@ const SearchIcon = styled(Icons)(({ theme }) => ({
   width: 12,
   height: 12,
   position: 'absolute',
-  top: 8,
-  left: 10,
+  top: 10,
+  left: 12,
   zIndex: 1,
   pointerEvents: 'none',
   color: theme.textMutedColor,
@@ -74,13 +74,13 @@ const SearchField = styled.div(({ theme }) => ({
 
 const Input = styled.input(({ theme }) => ({
   appearance: 'none',
-  height: 28,
-  paddingLeft: 28,
-  paddingRight: 28,
+  height: 32,
+  paddingLeft: 30,
+  paddingRight: 32,
   border: `1px solid ${transparentize(0.6, theme.color.mediumdark)}`,
   background: 'transparent',
-  borderRadius: 28,
-  fontSize: `${theme.typography.size.s1}px`,
+  borderRadius: 32,
+  fontSize: `${theme.typography.size.s1 + 1}px`,
   fontFamily: 'inherit',
   transition: 'all 150ms',
   color: theme.color.defaultText,
@@ -112,8 +112,8 @@ const Input = styled.input(({ theme }) => ({
 
 const FocusKey = styled.code(({ theme }) => ({
   position: 'absolute',
-  top: 6,
-  right: 12,
+  top: 8,
+  right: 16,
   width: 16,
   height: 16,
   zIndex: 1,
@@ -122,7 +122,7 @@ const FocusKey = styled.code(({ theme }) => ({
   fontSize: '11px',
   background: 'rgba(0,0,0,0.1)',
   color: theme.textMutedColor,
-  borderRadius: 2,
+  borderRadius: 3,
   userSelect: 'none',
   pointerEvents: 'none',
 }));
@@ -132,8 +132,8 @@ const ClearIcon = styled(Icons)(({ theme }) => ({
   height: 16,
   padding: 4,
   position: 'absolute',
-  top: 6,
-  right: 8,
+  top: 8,
+  right: 16,
   zIndex: 1,
   background: 'rgba(0,0,0,0.1)',
   borderRadius: 16,

From 455a55514f6e8caac11ca1cea64beaf3f6eefa20 Mon Sep 17 00:00:00 2001
From: Michael Arestad <marestad@gmail.com>
Date: Wed, 17 Aug 2022 12:49:43 -0600
Subject: [PATCH 06/22] Update MenuButton to use IconButton instead

---
 code/lib/ui/src/components/sidebar/Menu.tsx | 53 ++++-----------------
 1 file changed, 9 insertions(+), 44 deletions(-)

diff --git a/code/lib/ui/src/components/sidebar/Menu.tsx b/code/lib/ui/src/components/sidebar/Menu.tsx
index e15b4fc9fb22..d0151e419697 100644
--- a/code/lib/ui/src/components/sidebar/Menu.tsx
+++ b/code/lib/ui/src/components/sidebar/Menu.tsx
@@ -17,6 +17,11 @@ const Icon = styled(Icons)(sharedStyles, ({ theme }) => ({
   color: theme.color.secondary,
 }));
 
+const SidebarIconButton = styled(IconButton)(({ theme }) => ({
+  color: theme.color.mediumdark,
+  marginTop: 0,
+}));
+
 const Img = styled.img(sharedStyles);
 const Placeholder = styled.div(sharedStyles);
 
@@ -35,47 +40,6 @@ export const MenuItemIcon = ({ icon, imgSrc }: ListItemIconProps) => {
   return <Placeholder />;
 };
 
-export const MenuButton: FC<ComponentProps<typeof Button> & { highlighted: boolean }> = styled(
-  Button
-)<
-  ComponentProps<typeof Button> & {
-    highlighted: boolean;
-  }
->(({ highlighted, theme }) => ({
-  position: 'relative',
-  overflow: 'visible',
-  padding: 8,
-  transition: 'none', // prevents button border from flashing when focused/blurred
-  '&:focus': {
-    background: theme.barBg,
-    boxShadow: 'none',
-  },
-  // creates a pseudo border that does not affect the box model, but is accessible in high contrast mode
-  '&:focus:before': {
-    content: '""',
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    borderRadius: '100%',
-    border: `1px solid ${theme.color.secondary}`,
-  },
-
-  ...(highlighted && {
-    '&:after': {
-      content: '""',
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      width: 8,
-      height: 8,
-      borderRadius: 8,
-      background: theme.color.positive,
-    },
-  }),
-}));
-
 type ClickHandler = ComponentProps<typeof TooltipLinkList>['links'][number]['onClick'];
 
 export const SidebarMenuList: FC<{
@@ -107,9 +71,10 @@ export const SidebarMenu: FC<{
       closeOnClick
       tooltip={({ onHide }) => <SidebarMenuList onHide={onHide} menu={menu} />}
     >
-      <MenuButton outline small containsIcon highlighted={isHighlighted} title="Shortcuts">
-        <Icons icon="ellipsis" />
-      </MenuButton>
+      {/* FIXME: when button is clicked, set "active" prop to true, isHighlighted doesn't work */}
+      <SidebarIconButton title="Shortcuts" aria-label="Shortcuts" active={isHighlighted}>
+        <Icons icon="cog" />
+      </SidebarIconButton>
     </WithTooltip>
   );
 };

From 5d588dc592f405d6b186f4f0a5dcca432d07c76a Mon Sep 17 00:00:00 2001
From: domyen <dom@hichroma.com>
Date: Wed, 10 Aug 2022 22:26:59 -0400
Subject: [PATCH 07/22] Refine shadow/border on container.tsx

---
 code/lib/ui/src/components/layout/container.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/lib/ui/src/components/layout/container.tsx b/code/lib/ui/src/components/layout/container.tsx
index b1cd7c7b6a79..7cc44ef9627b 100644
--- a/code/lib/ui/src/components/layout/container.tsx
+++ b/code/lib/ui/src/components/layout/container.tsx
@@ -100,7 +100,7 @@ const Paper = styled.div<{ isFullscreen: boolean }>(
           borderBottomLeftRadius:
             theme.appBorderRadius === 0 ? theme.appBorderRadius : theme.appBorderRadius + 1,
           overflow: 'hidden',
-          boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.05), 0px 0 0px 1px 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)',
         }
 );

From 0e471ab8d2bd8eeba2961a0a6cde7340a86012ee Mon Sep 17 00:00:00 2001
From: domyen <dom@hichroma.com>
Date: Thu, 11 Aug 2022 17:11:46 -0400
Subject: [PATCH 08/22] MenuButton: remove isHighlighted and fix stories

---
 .../lib/ui/src/components/sidebar/Heading.tsx |  2 +-
 .../src/components/sidebar/Menu.stories.tsx   | 31 +++++++------------
 code/lib/ui/src/components/sidebar/Menu.tsx   | 10 +++---
 3 files changed, 16 insertions(+), 27 deletions(-)

diff --git a/code/lib/ui/src/components/sidebar/Heading.tsx b/code/lib/ui/src/components/sidebar/Heading.tsx
index 7017231c1e87..7d9ec9d3f0fc 100644
--- a/code/lib/ui/src/components/sidebar/Heading.tsx
+++ b/code/lib/ui/src/components/sidebar/Heading.tsx
@@ -71,7 +71,7 @@ export const Heading: FC<HeadingProps & ComponentProps<typeof HeadingWrapper>> =
         <Brand />
       </BrandArea>
 
-      <SidebarMenu menu={menu} isHighlighted={menuHighlighted} />
+      <SidebarMenu menu={menu} />
     </HeadingWrapper>
   );
 };
diff --git a/code/lib/ui/src/components/sidebar/Menu.stories.tsx b/code/lib/ui/src/components/sidebar/Menu.stories.tsx
index c5abe034dcac..edced8199cba 100644
--- a/code/lib/ui/src/components/sidebar/Menu.stories.tsx
+++ b/code/lib/ui/src/components/sidebar/Menu.stories.tsx
@@ -2,7 +2,8 @@ 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 } from '@storybook/testing-library';
+import { MenuItemIcon, SidebarMenu, ToolbarMenu } from './Menu';
 import { useMenu } from '../../containers/menu';
 
 export default {
@@ -29,7 +30,7 @@ const fakemenu = [
 
 export const Items = () => <TooltipLinkList links={fakemenu} />;
 
-export const Real = () => <SidebarMenu menu={fakemenu} isHighlighted />;
+export const Real = () => <SidebarMenu menu={fakemenu} />;
 
 export const Toolbar = () => <ToolbarMenu menu={fakemenu} />;
 
@@ -39,22 +40,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 +55,12 @@ export const Expanded = () => {
     false,
     false
   );
-  return <ExpandedMenu menu={menu} />;
+  return <SidebarMenu menu={menu} />;
+};
+Expanded.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const menuButton = await canvas.getByRole('button');
+  await userEvent.click(menuButton);
 };
 
 export const ExpandedWithoutReleaseNotes = () => {
@@ -88,5 +78,6 @@ export const ExpandedWithoutReleaseNotes = () => {
     false,
     false
   );
-  return <ExpandedMenu menu={menu} />;
+  return <SidebarMenu menu={menu} />;
 };
+ExpandedWithoutReleaseNotes.play = Expanded.play;
diff --git a/code/lib/ui/src/components/sidebar/Menu.tsx b/code/lib/ui/src/components/sidebar/Menu.tsx
index d0151e419697..e6051c73b70a 100644
--- a/code/lib/ui/src/components/sidebar/Menu.tsx
+++ b/code/lib/ui/src/components/sidebar/Menu.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, ComponentProps, FC } from 'react';
+import React, { useMemo, useState, ComponentProps, FC } from 'react';
 
 import { styled } from '@storybook/theming';
 import { WithTooltip, TooltipLinkList, Button, Icons, IconButton } from '@storybook/components';
@@ -42,7 +42,7 @@ export const MenuItemIcon = ({ icon, imgSrc }: ListItemIconProps) => {
 
 type ClickHandler = ComponentProps<typeof TooltipLinkList>['links'][number]['onClick'];
 
-export const SidebarMenuList: FC<{
+const SidebarMenuList: FC<{
   menu: MenuList;
   onHide: () => void;
 }> = ({ menu, onHide }) => {
@@ -62,8 +62,7 @@ export const SidebarMenuList: FC<{
 
 export const SidebarMenu: FC<{
   menu: MenuList;
-  isHighlighted: boolean;
-}> = ({ isHighlighted, menu }) => {
+}> = ({ menu }) => {
   return (
     <WithTooltip
       placement="top"
@@ -71,8 +70,7 @@ export const SidebarMenu: FC<{
       closeOnClick
       tooltip={({ onHide }) => <SidebarMenuList onHide={onHide} menu={menu} />}
     >
-      {/* FIXME: when button is clicked, set "active" prop to true, isHighlighted doesn't work */}
-      <SidebarIconButton title="Shortcuts" aria-label="Shortcuts" active={isHighlighted}>
+      <SidebarIconButton title="Shortcuts" aria-label="Shortcuts">
         <Icons icon="cog" />
       </SidebarIconButton>
     </WithTooltip>

From 44488e6b4b1ea5f6fdd3305a75237f2f503ac3ec Mon Sep 17 00:00:00 2001
From: domyen <dom@hichroma.com>
Date: Thu, 11 Aug 2022 17:12:09 -0400
Subject: [PATCH 09/22] Expand height of menu tooltip list to prevent
 scrollbars

---
 code/lib/components/src/tooltip/TooltipLinkList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/lib/components/src/tooltip/TooltipLinkList.tsx b/code/lib/components/src/tooltip/TooltipLinkList.tsx
index ef005c420c19..8a998e4c1d19 100644
--- 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,

From 6cffc6601da76ddebeb272258c9c017094bde56d Mon Sep 17 00:00:00 2001
From: domyen <dom@hichroma.com>
Date: Thu, 11 Aug 2022 17:29:51 -0400
Subject: [PATCH 10/22] Add back styling for theme visual testing

---
 code/lib/ui/src/components/sidebar/Menu.stories.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/code/lib/ui/src/components/sidebar/Menu.stories.tsx b/code/lib/ui/src/components/sidebar/Menu.stories.tsx
index edced8199cba..f73a5fe661e8 100644
--- a/code/lib/ui/src/components/sidebar/Menu.stories.tsx
+++ b/code/lib/ui/src/components/sidebar/Menu.stories.tsx
@@ -55,7 +55,11 @@ export const Expanded = () => {
     false,
     false
   );
-  return <SidebarMenu menu={menu} />;
+  return (
+    <DoubleThemeRenderingHack>
+      <SidebarMenu menu={menu} />
+    </DoubleThemeRenderingHack>
+  );
 };
 Expanded.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
@@ -78,6 +82,10 @@ export const ExpandedWithoutReleaseNotes = () => {
     false,
     false
   );
-  return <SidebarMenu menu={menu} />;
+  return (
+    <DoubleThemeRenderingHack>
+      <SidebarMenu menu={menu} />
+    </DoubleThemeRenderingHack>
+  );
 };
 ExpandedWithoutReleaseNotes.play = Expanded.play;

From 126017cd321e1e69608eee07ff096a22a16a445b Mon Sep 17 00:00:00 2001
From: domyen <dom@hichroma.com>
Date: Thu, 11 Aug 2022 17:49:11 -0400
Subject: [PATCH 11/22] Fix interaction test

---
 code/lib/ui/src/components/sidebar/Menu.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/lib/ui/src/components/sidebar/Menu.stories.tsx b/code/lib/ui/src/components/sidebar/Menu.stories.tsx
index f73a5fe661e8..2968056caf6b 100644
--- a/code/lib/ui/src/components/sidebar/Menu.stories.tsx
+++ b/code/lib/ui/src/components/sidebar/Menu.stories.tsx
@@ -63,7 +63,7 @@ export const Expanded = () => {
 };
 Expanded.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  const menuButton = await canvas.getByRole('button');
+  const menuButton = await canvas.findByRole('button');
   await userEvent.click(menuButton);
 };
 

From b8e52153e4a0592e50975da8abf25f44efe2c217 Mon Sep 17 00:00:00 2001
From: Michael Arestad <marestad@gmail.com>
Date: Wed, 17 Aug 2022 12:50:51 -0600
Subject: [PATCH 12/22] Remove theme color from meta

---
 code/lib/builder-manager/templates/template.ejs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/code/lib/builder-manager/templates/template.ejs b/code/lib/builder-manager/templates/template.ejs
index 8e9974e33707..1eaad092f2a9 100644
--- a/code/lib/builder-manager/templates/template.ejs
+++ b/code/lib/builder-manager/templates/template.ejs
@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="theme-color" content="<%= themeColor %>" />
 
     <title><%= typeof title !== 'undefined'? title : 'Storybook'%></title>
 

From 0d86b4e0a06b45ff8ee30a12dd6d1542df86ef01 Mon Sep 17 00:00:00 2001
From: Michael Arestad <marestad@gmail.com>
Date: Wed, 17 Aug 2022 14:46:34 -0600
Subject: [PATCH 13/22] Tweak icon size in examples manager.js

---
 code/examples/official-storybook/manager.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/code/examples/official-storybook/manager.js b/code/examples/official-storybook/manager.js
index 642d6e7bfb23..77104c4f6326 100644
--- 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',
 }));

From 55f93f077df0a2ce976e7448944ec8f4ac4fa566 Mon Sep 17 00:00:00 2001
From: Michael Arestad <marestad@gmail.com>
Date: Wed, 17 Aug 2022 15:56:33 -0600
Subject: [PATCH 14/22] Added highlight circle back in

---
 .../src/components/sidebar/Menu.stories.tsx   |  2 +-
 code/lib/ui/src/components/sidebar/Menu.tsx   | 47 ++++++++++++++++---
 2 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/code/lib/ui/src/components/sidebar/Menu.stories.tsx b/code/lib/ui/src/components/sidebar/Menu.stories.tsx
index 2968056caf6b..d10e49d3dfbc 100644
--- a/code/lib/ui/src/components/sidebar/Menu.stories.tsx
+++ b/code/lib/ui/src/components/sidebar/Menu.stories.tsx
@@ -30,7 +30,7 @@ const fakemenu = [
 
 export const Items = () => <TooltipLinkList links={fakemenu} />;
 
-export const Real = () => <SidebarMenu menu={fakemenu} />;
+export const Real = () => <SidebarMenu menu={fakemenu} isHighlighted />;
 
 export const Toolbar = () => <ToolbarMenu menu={fakemenu} />;
 
diff --git a/code/lib/ui/src/components/sidebar/Menu.tsx b/code/lib/ui/src/components/sidebar/Menu.tsx
index e6051c73b70a..01730871edbd 100644
--- a/code/lib/ui/src/components/sidebar/Menu.tsx
+++ b/code/lib/ui/src/components/sidebar/Menu.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo, useState, ComponentProps, FC } from 'react';
 
 import { styled } from '@storybook/theming';
+import { transparentize } from 'polished';
 import { WithTooltip, TooltipLinkList, Button, Icons, IconButton } from '@storybook/components';
 
 export type MenuList = ComponentProps<typeof TooltipLinkList>['links'];
@@ -17,10 +18,43 @@ const Icon = styled(Icons)(sharedStyles, ({ theme }) => ({
   color: theme.color.secondary,
 }));
 
-const SidebarIconButton = styled(IconButton)(({ theme }) => ({
-  color: theme.color.mediumdark,
-  marginTop: 0,
-}));
+export const SidebarIconButton: FC<ComponentProps<typeof Button> & { highlighted: boolean }> =
+  styled(IconButton)<
+    ComponentProps<typeof Button> & {
+      highlighted: boolean;
+    }
+  >(({ highlighted, theme }) => ({
+    position: 'relative',
+    overflow: 'visible',
+    color: theme.color.mediumdark,
+    marginTop: 0,
+    zIndex: 1,
+
+    ...(highlighted && {
+      '&:before, &:after': {
+        content: '""',
+        position: 'absolute',
+        top: 6,
+        right: 6,
+        width: 5,
+        height: 5,
+        zIndex: 2,
+        borderRadius: '50%',
+        background: theme.background.app,
+        border: `1px solid ${theme.background.app}`,
+        boxShadow: `0 0 0 2px ${theme.background.app}`,
+      },
+      '&:after': {
+        background: theme.color.positive,
+        border: `1px solid rgba(0, 0, 0, 0.1)`,
+        boxShadow: `0 0 0 2px ${theme.background.app}`,
+      },
+
+      '&:hover:after, &:focus-visible:after': {
+        boxShadow: `0 0 0 2px ${transparentize(0.88, theme.color.secondary)}`,
+      },
+    }),
+  }));
 
 const Img = styled.img(sharedStyles);
 const Placeholder = styled.div(sharedStyles);
@@ -62,7 +96,8 @@ const SidebarMenuList: FC<{
 
 export const SidebarMenu: FC<{
   menu: MenuList;
-}> = ({ menu }) => {
+  isHighlighted?: boolean;
+}> = ({ menu, isHighlighted }) => {
   return (
     <WithTooltip
       placement="top"
@@ -70,7 +105,7 @@ export const SidebarMenu: FC<{
       closeOnClick
       tooltip={({ onHide }) => <SidebarMenuList onHide={onHide} menu={menu} />}
     >
-      <SidebarIconButton title="Shortcuts" aria-label="Shortcuts">
+      <SidebarIconButton title="Shortcuts" aria-label="Shortcuts" highlighted={isHighlighted}>
         <Icons icon="cog" />
       </SidebarIconButton>
     </WithTooltip>

From b3b288018c9b044e60eaaee78d3ed4244571df9a Mon Sep 17 00:00:00 2001
From: Michael Arestad <marestad@gmail.com>
Date: Wed, 17 Aug 2022 16:14:22 -0600
Subject: [PATCH 15/22] Bumped up z-index of Skip to Canvas button

---
 code/lib/ui/src/components/sidebar/Heading.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/lib/ui/src/components/sidebar/Heading.tsx b/code/lib/ui/src/components/sidebar/Heading.tsx
index 7d9ec9d3f0fc..74f9db84ea2d 100644
--- 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)',

From a9958cf0f88eeda84ae5bf4f46ec72c14ad107a3 Mon Sep 17 00:00:00 2001
From: Michael Arestad <marestad@gmail.com>
Date: Wed, 17 Aug 2022 16:52:06 -0600
Subject: [PATCH 16/22] Added highlighted menu

---
 code/lib/ui/src/components/sidebar/Heading.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/lib/ui/src/components/sidebar/Heading.tsx b/code/lib/ui/src/components/sidebar/Heading.tsx
index 74f9db84ea2d..c6642b5f9c25 100644
--- a/code/lib/ui/src/components/sidebar/Heading.tsx
+++ b/code/lib/ui/src/components/sidebar/Heading.tsx
@@ -71,7 +71,7 @@ export const Heading: FC<HeadingProps & ComponentProps<typeof HeadingWrapper>> =
         <Brand />
       </BrandArea>
 
-      <SidebarMenu menu={menu} />
+      <SidebarMenu menu={menu} isHighlighted={menuHighlighted} />
     </HeadingWrapper>
   );
 };

From 69e46b58109d6fd2a7a9a459c9f8298195c2bfd0 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Thu, 18 Aug 2022 07:31:43 +0800
Subject: [PATCH 17/22] Menu: Wait for the menu to show in expanded story

---
 code/lib/ui/src/components/sidebar/Menu.stories.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/code/lib/ui/src/components/sidebar/Menu.stories.tsx b/code/lib/ui/src/components/sidebar/Menu.stories.tsx
index d10e49d3dfbc..9f8ea4833521 100644
--- a/code/lib/ui/src/components/sidebar/Menu.stories.tsx
+++ b/code/lib/ui/src/components/sidebar/Menu.stories.tsx
@@ -2,7 +2,7 @@ import React, { Fragment, FunctionComponent } from 'react';
 
 import { WithTooltip, TooltipLinkList, Icons } from '@storybook/components';
 import { styled } from '@storybook/theming';
-import { within, userEvent } from '@storybook/testing-library';
+import { within, userEvent, screen, waitFor } from '@storybook/testing-library';
 import { MenuItemIcon, SidebarMenu, ToolbarMenu } from './Menu';
 import { useMenu } from '../../containers/menu';
 
@@ -65,6 +65,10 @@ Expanded.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   const menuButton = await canvas.findByRole('button');
   await userEvent.click(menuButton);
+  // force wait for the menu to show
+  await waitFor(async () => {
+    await screen.findByText(/Release notes/);
+  })
 };
 
 export const ExpandedWithoutReleaseNotes = () => {

From 37a80bcb3362b24c230a074f41bc927c35c0901a Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Thu, 18 Aug 2022 08:00:54 +0800
Subject: [PATCH 18/22] Force sleep

---
 code/lib/ui/src/components/sidebar/Menu.stories.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/code/lib/ui/src/components/sidebar/Menu.stories.tsx b/code/lib/ui/src/components/sidebar/Menu.stories.tsx
index 9f8ea4833521..db41e333f27d 100644
--- a/code/lib/ui/src/components/sidebar/Menu.stories.tsx
+++ b/code/lib/ui/src/components/sidebar/Menu.stories.tsx
@@ -2,7 +2,7 @@ import React, { Fragment, FunctionComponent } from 'react';
 
 import { WithTooltip, TooltipLinkList, Icons } from '@storybook/components';
 import { styled } from '@storybook/theming';
-import { within, userEvent, screen, waitFor } from '@storybook/testing-library';
+import { within, userEvent, screen } from '@storybook/testing-library';
 import { MenuItemIcon, SidebarMenu, ToolbarMenu } from './Menu';
 import { useMenu } from '../../containers/menu';
 
@@ -66,9 +66,9 @@ Expanded.play = async ({ canvasElement }) => {
   const menuButton = await canvas.findByRole('button');
   await userEvent.click(menuButton);
   // force wait for the menu to show
-  await waitFor(async () => {
-    await screen.findByText(/Release notes/);
-  })
+  await screen.findByText(/About your Storybook/);
+  // sleep
+  await new Promise((resolve) => setTimeout(resolve, 100));
 };
 
 export const ExpandedWithoutReleaseNotes = () => {

From c45074f4da40c5d9e22ddd702557592b6c830ffc Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 18 Aug 2022 09:49:45 +0200
Subject: [PATCH 19/22] improve play fuctions

---
 .../ui/src/components/sidebar/Menu.stories.tsx  | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/code/lib/ui/src/components/sidebar/Menu.stories.tsx b/code/lib/ui/src/components/sidebar/Menu.stories.tsx
index db41e333f27d..8cf9c966103c 100644
--- a/code/lib/ui/src/components/sidebar/Menu.stories.tsx
+++ b/code/lib/ui/src/components/sidebar/Menu.stories.tsx
@@ -1,3 +1,4 @@
+import { expect } from '@storybook/jest';
 import React, { Fragment, FunctionComponent } from 'react';
 
 import { WithTooltip, TooltipLinkList, Icons } from '@storybook/components';
@@ -57,7 +58,7 @@ export const Expanded = () => {
   );
   return (
     <DoubleThemeRenderingHack>
-      <SidebarMenu menu={menu} />
+      <SidebarMenu menu={menu} isHighlighted />
     </DoubleThemeRenderingHack>
   );
 };
@@ -65,10 +66,8 @@ Expanded.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   const menuButton = await canvas.findByRole('button');
   await userEvent.click(menuButton);
-  // force wait for the menu to show
-  await screen.findByText(/About your Storybook/);
-  // sleep
-  await new Promise((resolve) => setTimeout(resolve, 100));
+  const aboutStorybookBtn = await screen.findByText(/About your Storybook/);
+  await expect(aboutStorybookBtn).toBeInTheDocument();
 };
 
 export const ExpandedWithoutReleaseNotes = () => {
@@ -86,10 +85,16 @@ export const ExpandedWithoutReleaseNotes = () => {
     false,
     false
   );
+
   return (
     <DoubleThemeRenderingHack>
       <SidebarMenu menu={menu} />
     </DoubleThemeRenderingHack>
   );
 };
-ExpandedWithoutReleaseNotes.play = Expanded.play;
+ExpandedWithoutReleaseNotes.play = async (context) => {
+  const canvas = within(context.canvasElement);
+  await Expanded.play(context);
+  const releaseNotes = await canvas.getByText(/Release notes/);
+  await expect(releaseNotes).not.toBeInTheDocument();
+};

From f0547089b84e92ba23bb408a90170ee217c9a3db Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 18 Aug 2022 09:50:21 +0200
Subject: [PATCH 20/22] play-fn-proof multi-theme decorator (for chromatic
 only)

---
 code/examples/official-storybook/preview.js | 30 +++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/code/examples/official-storybook/preview.js b/code/examples/official-storybook/preview.js
index 638d31b1af82..5c0ae631a5a1 100644
--- 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 theme =
+      globals.theme || parameters.theme || (isChromatic() && !playFunction ? 'stacked' : 'light');
 
     switch (theme) {
       case 'side-by-side': {
@@ -137,6 +157,12 @@ export const decorators = [
             <Symbols icons={['folder', 'component', 'document', 'bookmarkhollow']} />
             <Global styles={createReset} />
             <ThemedSetRoot />
+            {isChromatic() && playFunction && (
+              <PlayFnNotice>
+                <span>Detected play function.</span>
+                <span>Rendering in a single theme</span>
+              </PlayFnNotice>
+            )}
             <StoryFn />
           </ThemeProvider>
         );

From 829b806065d87f1c054cdf26dc5ebf4137d96f7c Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 18 Aug 2022 10:26:36 +0200
Subject: [PATCH 21/22] fix theme logic

---
 code/examples/official-storybook/preview.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/code/examples/official-storybook/preview.js b/code/examples/official-storybook/preview.js
index 5c0ae631a5a1..e4e0ef7fa7d9 100644
--- a/code/examples/official-storybook/preview.js
+++ b/code/examples/official-storybook/preview.js
@@ -107,8 +107,8 @@ const ThemedSetRoot = () => {
 
 export const decorators = [
   (StoryFn, { globals, parameters, playFunction }) => {
-    const theme =
-      globals.theme || parameters.theme || (isChromatic() && !playFunction ? 'stacked' : 'light');
+    const defaultTheme = isChromatic() && !playFunction ? 'stacked' : 'light';
+    const theme = globals.theme || parameters.theme || defaultTheme;
 
     switch (theme) {
       case 'side-by-side': {
@@ -157,7 +157,7 @@ export const decorators = [
             <Symbols icons={['folder', 'component', 'document', 'bookmarkhollow']} />
             <Global styles={createReset} />
             <ThemedSetRoot />
-            {isChromatic() && playFunction && (
+            {!parameters.theme && isChromatic() && playFunction && (
               <PlayFnNotice>
                 <span>Detected play function.</span>
                 <span>Rendering in a single theme</span>

From b0b41fb27497c921b84df09c72ef5ffc0d85e883 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 18 Aug 2022 11:47:24 +0200
Subject: [PATCH 22/22] fix play fn

---
 code/lib/ui/src/components/sidebar/Menu.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/lib/ui/src/components/sidebar/Menu.stories.tsx b/code/lib/ui/src/components/sidebar/Menu.stories.tsx
index 8cf9c966103c..0d158a0327f9 100644
--- a/code/lib/ui/src/components/sidebar/Menu.stories.tsx
+++ b/code/lib/ui/src/components/sidebar/Menu.stories.tsx
@@ -95,6 +95,6 @@ export const ExpandedWithoutReleaseNotes = () => {
 ExpandedWithoutReleaseNotes.play = async (context) => {
   const canvas = within(context.canvasElement);
   await Expanded.play(context);
-  const releaseNotes = await canvas.getByText(/Release notes/);
+  const releaseNotes = await canvas.queryByText(/Release notes/);
   await expect(releaseNotes).not.toBeInTheDocument();
 };
