Core: Testing Module UI

code/addons/a11y/package.json

@@ -60,7 +60,7 @@
   },
   "devDependencies": {
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "@testing-library/react": "^14.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

code/addons/backgrounds/package.json

@@ -60,7 +60,7 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.3.2"

code/addons/controls/package.json

@@ -56,7 +56,7 @@
   },
   "devDependencies": {
     "@storybook/blocks": "workspace:*",
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

code/addons/jest/package.json

@@ -58,7 +58,7 @@
     "upath": "^2.0.1"
   },
   "devDependencies": {
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-resize-detector": "^7.1.2",

code/addons/measure/package.json

@@ -71,7 +71,7 @@
     "tiny-invariant": "^1.3.1"
   },
   "devDependencies": {
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.3.2"

code/addons/onboarding/package.json

@@ -49,7 +49,7 @@
   },
   "devDependencies": {
     "@radix-ui/react-dialog": "^1.0.5",
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "@storybook/react": "workspace:*",
     "framer-motion": "^11.0.3",
     "react": "^18.2.0",

code/addons/outline/package.json

@@ -61,7 +61,7 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.3.2"

code/addons/test/package.json

@@ -71,7 +71,7 @@
   },
   "dependencies": {
     "@storybook/csf": "^0.1.11",
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "chalk": "^5.3.0"
   },
   "devDependencies": {

code/addons/test/src/manager.tsx

@@ -13,5 +13,7 @@ addons.register(ADDON_ID, () => {
     icon: <PointerHandIcon />,
     title: 'Component tests',
     description: () => 'Not yet run',
+    runnable: true,
+    watchable: true,
   });
 });

code/addons/themes/package.json

@@ -59,7 +59,7 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "typescript": "^5.3.2"
   },
   "peerDependencies": {

code/addons/viewport/package.json

@@ -55,7 +55,7 @@
   },
   "devDependencies": {
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.3.2"

code/core/package.json

@@ -313,7 +313,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@storybook/docs-mdx": "4.0.0-next.1",
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "@tanstack/react-virtual": "^3.3.0",
     "@testing-library/react": "^14.0.0",
     "@types/compression": "^1.7.0",
@@ -360,7 +360,7 @@
     "diff": "^5.2.0",
     "downshift": "^9.0.4",
     "ejs": "^3.1.10",
-    "es-toolkit": "^1.21.0",
+    "es-toolkit": "^1.22.0",
     "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0",
     "esbuild-plugin-alias": "^0.2.1",
     "execa": "^8.0.1",

code/core/src/manager/components/layout/Layout.tsx

@@ -146,7 +146,6 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, hasTab, ...s
       viewMode={managerLayoutState.viewMode}
       showPanel={showPanel}
     >
-      <Notifications />
       {showPages && <PagesContainer>{slots.slotPages}</PagesContainer>}
       <Match path={/(^\/story|docs|onboarding\/|^\/$)/} startsWith={false}>
         {({ match }) => <ContentContainer shown={!!match}>{slots.slotMain}</ContentContainer>}
@@ -170,7 +169,14 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, hasTab, ...s
         </>
       )}
       {isMobile && (
-        <MobileNavigation menu={slots.slotSidebar} panel={slots.slotPanel} showPanel={showPanel} />
+        <>
+          <Notifications />
+          <MobileNavigation
+            menu={slots.slotSidebar}
+            panel={slots.slotPanel}
+            showPanel={showPanel}
+          />
+        </>
       )}
     </LayoutContainer>
   );

code/core/src/manager/components/notifications/NotificationItem.stories.tsx

@@ -23,7 +23,7 @@ const meta = {
       </LocationProvider>
     ),
     (Story) => (
-      <div style={{ width: '240px', margin: '1rem' }}>
+      <div style={{ width: '240px' }}>
         <Story />
       </div>
     ),

code/core/src/manager/components/notifications/NotificationItem.tsx

@@ -11,6 +11,8 @@ import { type State } from '@storybook/core/manager-api';
 
 import { transparentize } from 'polished';
 
+import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants';
+
 const slideIn = keyframes({
   '0%': {
     opacity: 0,
@@ -35,17 +37,21 @@ const Notification = styled.div<{ duration?: number }>(
   ({ theme }) => ({
     position: 'relative',
     display: 'flex',
-    padding: 15,
-    width: 280,
-    borderRadius: 4,
+    border: `1px solid ${theme.appBorderColor}`,
+    padding: '12px 6px 12px 12px',
+    borderRadius: theme.appBorderRadius + 1,
     alignItems: 'center',
 
     animation: `${slideIn} 500ms`,
     background: theme.base === 'light' ? 'hsla(203, 50%, 20%, .97)' : 'hsla(203, 30%, 95%, .97)',
-    boxShadow: `0 2px 5px 0 rgba(0,0,0,0.05), 0 5px 15px 0 rgba(0,0,0,0.1)`,
+    boxShadow: `0 2px 5px 0 rgba(0, 0, 0, 0.05), 0 5px 15px 0 rgba(0, 0, 0, 0.1)`,
     color: theme.color.inverseText,
     textDecoration: 'none',
     overflow: 'hidden',
+    zIndex: 1,
+    [MEDIA_DESKTOP_BREAKPOINT]: {
+      boxShadow: `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px ${theme.background.app}`,
+    },
   }),
   ({ duration, theme }) =>
     duration && {
@@ -107,9 +113,8 @@ const NotificationTextWrapper = styled.div(({ theme }) => ({
 
 const Headline = styled.div<{ hasIcon: boolean }>(({ theme, hasIcon }) => ({
   height: '100%',
-  width: hasIcon ? 205 : 230,
   alignItems: 'center',
-  whiteSpace: 'nowrap',
+  whiteSpace: 'balance',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   fontSize: theme.typography.size.s1,
@@ -122,6 +127,7 @@ const SubHeadline = styled.div(({ theme }) => ({
   fontSize: theme.typography.size.s1 - 1,
   lineHeight: '14px',
   marginTop: 2,
+  whiteSpace: 'balance',
 }));
 
 const ItemContent: FC<Pick<State['notifications'][0], 'icon' | 'content'>> = ({
@@ -154,6 +160,7 @@ const ItemContent: FC<Pick<State['notifications'][0], 'icon' | 'content'>> = ({
 };
 
 const DismissButtonWrapper = styled(IconButton)(({ theme }) => ({
+  width: 28,
   alignSelf: 'center',
   marginTop: 0,
   color: theme.base === 'light' ? 'rgba(255,255,255,0.7)' : ' #999999',

code/core/src/manager/components/notifications/NotificationList.tsx

@@ -2,11 +2,10 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { styled } from '@storybook/core/theming';
-import type { CSSObject } from '@storybook/core/theming';
 
 import type { State } from '@storybook/core/manager-api';
 
-import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants';
+import { useLayout } from '../layout/LayoutProvider';
 import NotificationItem from './NotificationItem';
 
 interface NotificationListProps {
@@ -18,8 +17,9 @@ export const NotificationList: FC<NotificationListProps> = ({
   notifications,
   clearNotification,
 }) => {
+  const { isMobile } = useLayout();
   return (
-    <List>
+    <List isMobile={isMobile}>
       {notifications &&
         notifications.map((notification) => (
           <NotificationItem
@@ -32,21 +32,20 @@ export const NotificationList: FC<NotificationListProps> = ({
   );
 };
 
-const List = styled.div<{ placement?: CSSObject }>({
-  zIndex: 200,
-  position: 'fixed',
-  left: 20,
-  bottom: 60,
-
-  [MEDIA_DESKTOP_BREAKPOINT]: {
-    bottom: 20,
-  },
-
-  '> * + *': {
-    marginTop: 10,
-  },
-
-  '&:empty': {
-    display: 'none',
+const List = styled.div<{ isMobile?: boolean }>(
+  {
+    '> * + *': {
+      marginTop: 12,
+    },
+    '&:empty': {
+      display: 'none',
+    },
   },
-});
+  ({ isMobile }) =>
+    isMobile && {
+      zIndex: 200,
+      position: 'fixed',
+      bottom: 40,
+      margin: 20,
+    }
+);

code/core/src/manager/components/sidebar/Sidebar.stories.tsx

@@ -42,6 +42,7 @@ const managerContext: any = {
       'api::getShortcutKeys'
     ),
     getChannel: fn().mockName('api::getChannel'),
+    getElements: fn(() => ({})),
     selectStory: fn().mockName('api::selectStory'),
     experimental_setFilter: fn().mockName('api::experimental_setFilter'),
   },

code/core/src/manager/components/sidebar/Sidebar.tsx

@@ -1,18 +1,17 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 
 import { Button, ScrollArea, Spaced } from '@storybook/core/components';
 import { styled } from '@storybook/core/theming';
 import type { API_LoadedRefData, Addon_SidebarTopType } from '@storybook/core/types';
 
 import {
   TESTING_MODULE_RUN_ALL_REQUEST,
-  TESTING_MODULE_WATCH_MODE_REQUEST,
   type TestingModuleRunAllRequestPayload,
-  type TestingModuleWatchModeRequestPayload,
 } from '@storybook/core/core-events';
 import { type State, useStorybookApi } from '@storybook/core/manager-api';
 
 import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants';
+import { useLayout } from '../layout/LayoutProvider';
 import { Explorer } from './Explorer';
 import type { HeadingProps } from './Heading';
 import { Heading } from './Heading';
@@ -51,19 +50,6 @@ const Top = styled(Spaced)({
   flex: 1,
 });
 
-const Bottom = styled.div(({ theme }) => ({
-  borderTop: `1px solid ${theme.appBorderColor}`,
-  padding: theme.layoutMargin / 2,
-  display: 'flex',
-  flexWrap: 'wrap',
-  gap: theme.layoutMargin / 2,
-  backgroundColor: theme.barBg,
-
-  '&:empty': {
-    display: 'none',
-  },
-}));
-
 const Swap = React.memo(function Swap({
   children,
   condition,
@@ -140,15 +126,7 @@ export const Sidebar = React.memo(function Sidebar({
   const dataset = useCombination(index, indexError, previewInitialized, status, refs);
   const isLoading = !index && !indexError;
   const lastViewedProps = useLastViewed(selected);
-  const api = useStorybookApi();
-  const [watchMode, setWatchMode] = useState(false);
-
-  useEffect(() => {
-    api.emit(TESTING_MODULE_WATCH_MODE_REQUEST, {
-      providerId: TEST_PROVIDER_ID,
-      watchMode,
-    } as TestingModuleWatchModeRequestPayload);
-  }, [api, watchMode]);
+  const { isMobile } = useLayout();
 
   return (
     <Container className="container sidebar-container">
@@ -200,25 +178,8 @@ export const Sidebar = React.memo(function Sidebar({
             )}
           </Search>
         </Top>
+        {isMobile || isLoading ? null : <SidebarBottom />}
       </ScrollArea>
-      {isLoading ? null : (
-        <Bottom className="sb-bar">
-          <SidebarBottom />
-          <Button
-            onClick={() => {
-              api.emit(TESTING_MODULE_RUN_ALL_REQUEST, {
-                providerId: TEST_PROVIDER_ID,
-              } as TestingModuleRunAllRequestPayload);
-            }}
-          >
-            Run test for all Stories
-          </Button>
-          <label>
-            <input type="checkbox" checked={watchMode} onChange={() => setWatchMode(!watchMode)} />{' '}
-            Watch Mode
-          </label>
-        </Bottom>
-      )}
     </Container>
   );
 });