diff --git a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
index d4698f53e6df..dcc6b06096c2 100644
--- a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
@@ -85,6 +85,7 @@ const meta = {
refs: {},
status: {},
showCreateStoryButton: true,
+ isDevelopment: true,
},
decorators: [
(storyFn) => (
diff --git a/code/core/src/manager/components/sidebar/Sidebar.tsx b/code/core/src/manager/components/sidebar/Sidebar.tsx
index 6f4cec12e686..bb3be73f425d 100644
--- a/code/core/src/manager/components/sidebar/Sidebar.tsx
+++ b/code/core/src/manager/components/sidebar/Sidebar.tsx
@@ -109,7 +109,6 @@ const useCombination = (
return useMemo(() => ({ hash, entries: Object.entries(hash) }), [hash]);
};
-const isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT';
const isRendererReact = global.STORYBOOK_RENDERER === 'react';
export interface SidebarProps extends API_LoadedRefData {
@@ -124,6 +123,7 @@ export interface SidebarProps extends API_LoadedRefData {
onMenuClick?: HeadingProps['onMenuClick'];
showCreateStoryButton?: boolean;
indexJson?: StoryIndex;
+ isDevelopment?: boolean;
}
export const Sidebar = React.memo(function Sidebar({
// @ts-expect-error (non strict)
@@ -138,6 +138,7 @@ export const Sidebar = React.memo(function Sidebar({
extra,
menuHighlighted = false,
enableShortcuts = true,
+ isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT',
refs = {},
onMenuClick,
showCreateStoryButton = isDevelopment && isRendererReact,
@@ -229,7 +230,7 @@ export const Sidebar = React.memo(function Sidebar({
)}
- {isMobile || isLoading ? null : }
+ {isMobile || isLoading ? null : }
);
diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx
index 18a9a83db9fb..8d7d2c42f488 100644
--- a/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx
+++ b/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx
@@ -6,6 +6,7 @@ import { SidebarBottomBase } from './SidebarBottom';
export default {
component: SidebarBottomBase,
args: {
+ isDevelopment: true,
api: {
clearNotification: fn(),
emit: fn(),
diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx
index b25defd9c4bd..f6aae845bee3 100644
--- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx
+++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx
@@ -92,9 +92,15 @@ interface SidebarBottomProps {
api: API;
notifications: State['notifications'];
status: State['status'];
+ isDevelopment?: boolean;
}
-export const SidebarBottomBase = ({ api, notifications = [], status = {} }: SidebarBottomProps) => {
+export const SidebarBottomBase = ({
+ api,
+ notifications = [],
+ status = {},
+ isDevelopment,
+}: SidebarBottomProps) => {
const spacerRef = useRef(null);
const wrapperRef = useRef(null);
const [warningsActive, setWarningsActive] = useState(false);
@@ -228,27 +234,36 @@ export const SidebarBottomBase = ({ api, notifications = [], status = {} }: Side
);
};
-export const SidebarBottom = () => {
+export const SidebarBottom = ({ isDevelopment }: { isDevelopment?: boolean }) => {
const api = useStorybookApi();
const { notifications, status } = useStorybookState();
- return ;
+ return (
+
+ );
};
diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx
index 5ca7bc8aa972..c020ebe53f09 100644
--- a/code/core/src/manager/components/sidebar/TestingModule.tsx
+++ b/code/core/src/manager/components/sidebar/TestingModule.tsx
@@ -229,7 +229,12 @@ export const TestingModule = ({
const testing = testProviders.length > 0;
return (
- 0}>
+ 0}
+ >