From a5710e55324b20ea7727b0707c41ecd49608debb Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 21 Sep 2023 16:41:00 +0100 Subject: [PATCH 1/3] Move layout to use isDesktop and isMobile --- code/ui/manager/src/App.tsx | 4 ++-- .../src/components/layout/Layout.stories.tsx | 4 ++-- .../LayoutProvider.tsx} | 21 +++++++++++++------ .../mobile/about/MobileAbout.stories.tsx | 8 +++---- .../components/mobile/about/MobileAbout.tsx | 4 ++-- .../mobile/navigation/MobileAddonsDrawer.tsx | 4 ++-- .../mobile/navigation/MobileMenuDrawer.tsx | 4 ++-- .../navigation/MobileNavigation.stories.tsx | 8 +++---- .../mobile/navigation/MobileNavigation.tsx | 4 ++-- .../ui/manager/src/components/panel/Panel.tsx | 4 ++-- .../manager/src/components/sidebar/Tree.tsx | 4 ++-- code/ui/manager/src/index.tsx | 6 +++--- 12 files changed, 42 insertions(+), 33 deletions(-) rename code/ui/manager/src/components/{mobile/MobileLayoutProvider.tsx => layout/LayoutProvider.tsx} (66%) diff --git a/code/ui/manager/src/App.tsx b/code/ui/manager/src/App.tsx index 7b8adb7f3cd7..c2dc3ad7c80b 100644 --- a/code/ui/manager/src/App.tsx +++ b/code/ui/manager/src/App.tsx @@ -11,7 +11,7 @@ import Preview from './container/Preview'; import Panel from './container/Panel'; import { Layout } from './components/layout/Layout'; -import { useMobileLayoutContext } from './components/mobile/MobileLayoutProvider'; +import { useLayout } from './components/layout/LayoutProvider'; type Props = { managerLayoutState: ComponentProps['managerLayoutState']; @@ -20,7 +20,7 @@ type Props = { }; export const App = ({ managerLayoutState, setManagerLayoutState, pages }: Props) => { - const { setMobileAboutOpen } = useMobileLayoutContext(); + const { setMobileAboutOpen } = useLayout(); return ( <> diff --git a/code/ui/manager/src/components/layout/Layout.stories.tsx b/code/ui/manager/src/components/layout/Layout.stories.tsx index d5bf6a4b6cb3..c56728f5edc7 100644 --- a/code/ui/manager/src/components/layout/Layout.stories.tsx +++ b/code/ui/manager/src/components/layout/Layout.stories.tsx @@ -5,7 +5,7 @@ import React, { useState } from 'react'; import { styled } from '@storybook/theming'; import type { Meta, StoryObj } from '@storybook/react'; import { Layout } from './Layout'; -import { MobileLayoutProvider } from '../mobile/MobileLayoutProvider'; +import { LayoutProvider } from './LayoutProvider'; import MobileNavigationStoriesMeta from '../mobile/navigation/MobileNavigation.stories'; const PlaceholderBlock = styled.div({ @@ -65,7 +65,7 @@ const meta = { }, decorators: [ MobileNavigationStoriesMeta.decorators[0] as any, - (storyFn) => {storyFn()}, + (storyFn) => {storyFn()}, ], render: (args) => { const [managerLayoutState, setManagerLayoutState] = useState(args.managerLayoutState); diff --git a/code/ui/manager/src/components/mobile/MobileLayoutProvider.tsx b/code/ui/manager/src/components/layout/LayoutProvider.tsx similarity index 66% rename from code/ui/manager/src/components/mobile/MobileLayoutProvider.tsx rename to code/ui/manager/src/components/layout/LayoutProvider.tsx index c93c14ec6cf6..97474f25bf1c 100644 --- a/code/ui/manager/src/components/mobile/MobileLayoutProvider.tsx +++ b/code/ui/manager/src/components/layout/LayoutProvider.tsx @@ -1,31 +1,38 @@ import type { FC } from 'react'; import React, { createContext, useContext, useState } from 'react'; +import { useMediaQuery } from '../hooks/useMedia'; -type MobileLayoutContextType = { +type LayoutContextType = { isMobileMenuOpen: boolean; setMobileMenuOpen: React.Dispatch>; isMobileAboutOpen: boolean; setMobileAboutOpen: React.Dispatch>; isMobilePanelOpen: boolean; setMobilePanelOpen: React.Dispatch>; + isDesktop: boolean; + isMobile: boolean; }; -const MobileLayoutContext = createContext({ +const LayoutContext = createContext({ isMobileMenuOpen: false, setMobileMenuOpen: () => {}, isMobileAboutOpen: false, setMobileAboutOpen: () => {}, isMobilePanelOpen: false, setMobilePanelOpen: () => {}, + isDesktop: false, + isMobile: false, }); -export const MobileLayoutProvider: FC = ({ children }) => { +export const LayoutProvider: FC = ({ children }) => { const [isMobileMenuOpen, setMobileMenuOpen] = useState(false); const [isMobileAboutOpen, setMobileAboutOpen] = useState(false); const [isMobilePanelOpen, setMobilePanelOpen] = useState(false); + const isDesktop = useMediaQuery('(min-width: 600px)'); + const isMobile = !isDesktop; return ( - { setMobileAboutOpen, isMobilePanelOpen, setMobilePanelOpen, + isDesktop, + isMobile, }} > {children} - + ); }; -export const useMobileLayoutContext = () => useContext(MobileLayoutContext); +export const useLayout = () => useContext(LayoutContext); diff --git a/code/ui/manager/src/components/mobile/about/MobileAbout.stories.tsx b/code/ui/manager/src/components/mobile/about/MobileAbout.stories.tsx index beb385596663..7ef6f9d89f92 100644 --- a/code/ui/manager/src/components/mobile/about/MobileAbout.stories.tsx +++ b/code/ui/manager/src/components/mobile/about/MobileAbout.stories.tsx @@ -3,13 +3,13 @@ import { ManagerContext } from '@storybook/manager-api'; import React, { useEffect } from 'react'; import { within } from '@storybook/testing-library'; import { MobileAbout } from './MobileAbout'; -import { MobileLayoutProvider, useMobileLayoutContext } from '../MobileLayoutProvider'; +import { LayoutProvider, useLayout } from '../../layout/LayoutProvider'; /** * A helper component to open the about page via the MobileLayoutContext */ const OpenAboutHelper = ({ children }: { children: any }) => { - const { setMobileAboutOpen } = useMobileLayoutContext(); + const { setMobileAboutOpen } = useLayout(); useEffect(() => { setMobileAboutOpen(true); }, [setMobileAboutOpen]); @@ -41,9 +41,9 @@ const meta = { } as any } > - + {storyFn()} - + ); }, diff --git a/code/ui/manager/src/components/mobile/about/MobileAbout.tsx b/code/ui/manager/src/components/mobile/about/MobileAbout.tsx index a2354aa11783..6c13c1ea01a1 100644 --- a/code/ui/manager/src/components/mobile/about/MobileAbout.tsx +++ b/code/ui/manager/src/components/mobile/about/MobileAbout.tsx @@ -5,10 +5,10 @@ import { styled } from '@storybook/theming'; import { Icons, Link } from '@storybook/components'; import { UpgradeBlock } from '../../upgrade/UpgradeBlock'; import { MOBILE_TRANSITION_DURATION } from '../../../constants'; -import { useMobileLayoutContext } from '../MobileLayoutProvider'; +import { useLayout } from '../../layout/LayoutProvider'; export const MobileAbout: FC = () => { - const { isMobileAboutOpen, setMobileAboutOpen } = useMobileLayoutContext(); + const { isMobileAboutOpen, setMobileAboutOpen } = useLayout(); const aboutRef = useRef(null); return ( diff --git a/code/ui/manager/src/components/mobile/navigation/MobileAddonsDrawer.tsx b/code/ui/manager/src/components/mobile/navigation/MobileAddonsDrawer.tsx index fbd2f6960d72..b05dff4c3d25 100644 --- a/code/ui/manager/src/components/mobile/navigation/MobileAddonsDrawer.tsx +++ b/code/ui/manager/src/components/mobile/navigation/MobileAddonsDrawer.tsx @@ -3,7 +3,7 @@ import React, { useRef } from 'react'; import { styled } from '@storybook/theming'; import { Transition } from 'react-transition-group'; import type { TransitionStatus } from 'react-transition-group/Transition'; -import { useMobileLayoutContext } from '../MobileLayoutProvider'; +import { useLayout } from '../../layout/LayoutProvider'; interface MobileAddonsDrawerProps { children: ReactNode; @@ -38,7 +38,7 @@ const Container = styled.div<{ state: TransitionStatus }>(({ theme, state }) => })); export const MobileAddonsDrawer: FC = ({ children }) => { - const { isMobilePanelOpen } = useMobileLayoutContext(); + const { isMobilePanelOpen } = useLayout(); const containerRef = useRef(null); return ( diff --git a/code/ui/manager/src/components/mobile/navigation/MobileMenuDrawer.tsx b/code/ui/manager/src/components/mobile/navigation/MobileMenuDrawer.tsx index 1dcefed3a5d0..bd3d0cf46f25 100644 --- a/code/ui/manager/src/components/mobile/navigation/MobileMenuDrawer.tsx +++ b/code/ui/manager/src/components/mobile/navigation/MobileMenuDrawer.tsx @@ -5,7 +5,7 @@ import { Transition } from 'react-transition-group'; import type { TransitionStatus } from 'react-transition-group/Transition'; import { MobileAbout } from '../about/MobileAbout'; import { MOBILE_TRANSITION_DURATION } from '../../../constants'; -import { useMobileLayoutContext } from '../MobileLayoutProvider'; +import { useLayout } from '../../layout/LayoutProvider'; interface MobileMenuDrawerProps { children?: React.ReactNode; @@ -16,7 +16,7 @@ export const MobileMenuDrawer: FC = ({ children }) => { const sidebarRef = useRef(null); const overlayRef = useRef(null); const { isMobileMenuOpen, setMobileMenuOpen, isMobileAboutOpen, setMobileAboutOpen } = - useMobileLayoutContext(); + useLayout(); return ( <> diff --git a/code/ui/manager/src/components/mobile/navigation/MobileNavigation.stories.tsx b/code/ui/manager/src/components/mobile/navigation/MobileNavigation.stories.tsx index 52f3d52110d4..63e48dc366da 100644 --- a/code/ui/manager/src/components/mobile/navigation/MobileNavigation.stories.tsx +++ b/code/ui/manager/src/components/mobile/navigation/MobileNavigation.stories.tsx @@ -4,10 +4,10 @@ import { ManagerContext } from '@storybook/manager-api'; import { within } from '@storybook/testing-library'; import { startCase } from 'lodash'; import { MobileNavigation } from './MobileNavigation'; -import { MobileLayoutProvider, useMobileLayoutContext } from '../MobileLayoutProvider'; +import { LayoutProvider, useLayout } from '../../layout/LayoutProvider'; const MockPanel = () => { - const { setMobilePanelOpen } = useMobileLayoutContext(); + const { setMobilePanelOpen } = useLayout(); return (
panel @@ -67,12 +67,12 @@ const meta = { decorators: [ (storyFn) => ( - +
{storyFn()}
- + ), ], diff --git a/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx b/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx index e402982ae612..c165478e9048 100644 --- a/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx +++ b/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx @@ -5,7 +5,7 @@ import { IconButton, Icons } from '@storybook/components'; import { useStorybookApi, useStorybookState } from '@storybook/manager-api'; import { MobileMenuDrawer } from './MobileMenuDrawer'; import { MobileAddonsDrawer } from './MobileAddonsDrawer'; -import { useMobileLayoutContext } from '../MobileLayoutProvider'; +import { useLayout } from '../../layout/LayoutProvider'; interface MobileNavigationProps { menu?: React.ReactNode; @@ -35,7 +35,7 @@ const useFullStoryName = () => { }; export const MobileNavigation: FC = ({ menu, panel, showPanel }) => { - const { isMobileMenuOpen, setMobileMenuOpen, setMobilePanelOpen } = useMobileLayoutContext(); + const { isMobileMenuOpen, setMobileMenuOpen, setMobilePanelOpen } = useLayout(); const fullStoryName = useFullStoryName(); return ( diff --git a/code/ui/manager/src/components/panel/Panel.tsx b/code/ui/manager/src/components/panel/Panel.tsx index 4d85c8692f3a..96ea12c44b62 100644 --- a/code/ui/manager/src/components/panel/Panel.tsx +++ b/code/ui/manager/src/components/panel/Panel.tsx @@ -5,7 +5,7 @@ import { shortcutToHumanString } from '@storybook/manager-api'; import type { Addon_BaseType } from '@storybook/types'; import { useMediaQuery } from '../hooks/useMedia'; import { BREAKPOINT_MIN_600 } from '../../constants'; -import { useMobileLayoutContext } from '../mobile/MobileLayoutProvider'; +import { useLayout } from '../layout/LayoutProvider'; export interface SafeTabProps { title: Addon_BaseType['title']; @@ -52,7 +52,7 @@ export const AddonPanel = React.memo<{ absolute = true, }) => { const isDesktop = useMediaQuery(BREAKPOINT_MIN_600); - const { setMobilePanelOpen } = useMobileLayoutContext(); + const { setMobilePanelOpen } = useLayout(); return ( ( ({ theme, height, width }) => ({ @@ -205,7 +205,7 @@ const Node = React.memo(function Node({ api, }) { const isDesktop = useMediaQuery(BREAKPOINT_MIN_600); - const { setMobileMenuOpen } = useMobileLayoutContext(); + const { setMobileMenuOpen } = useLayout(); if (!isDisplayed) { return null; diff --git a/code/ui/manager/src/index.tsx b/code/ui/manager/src/index.tsx index 8ea7096dc3de..31b0ed271cdc 100644 --- a/code/ui/manager/src/index.tsx +++ b/code/ui/manager/src/index.tsx @@ -16,7 +16,7 @@ import { App } from './App'; import Provider from './provider'; import { settingsPageAddon } from './settings/index'; -import { MobileLayoutProvider } from './components/mobile/MobileLayoutProvider'; +import { LayoutProvider } from './components/layout/LayoutProvider'; // @ts-expect-error (Converted from ts-ignore) ThemeProvider.displayName = 'ThemeProvider'; @@ -65,14 +65,14 @@ const Main: FC<{ provider: Provider }> = ({ provider }) => { return ( - + - + ); }} From 7b6026a474f34e0e4741498b2bf86f6f817e22a6 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 21 Sep 2023 16:45:13 +0100 Subject: [PATCH 2/3] Replace isDeskop by the provider --- code/ui/manager/src/components/layout/Layout.tsx | 5 ++--- code/ui/manager/src/components/panel/Panel.tsx | 5 +---- code/ui/manager/src/components/preview/Toolbar.tsx | 11 +++++------ code/ui/manager/src/components/sidebar/Menu.tsx | 5 ++--- code/ui/manager/src/components/sidebar/Tree.tsx | 5 +---- 5 files changed, 11 insertions(+), 20 deletions(-) diff --git a/code/ui/manager/src/components/layout/Layout.tsx b/code/ui/manager/src/components/layout/Layout.tsx index 111e4598da8c..2792a85a7780 100644 --- a/code/ui/manager/src/components/layout/Layout.tsx +++ b/code/ui/manager/src/components/layout/Layout.tsx @@ -2,9 +2,9 @@ import React, { useEffect, useLayoutEffect, useState } from 'react'; import { styled } from '@storybook/theming'; import type { API_Layout, API_ViewMode } from '@storybook/types'; import { useDragging } from './useDragging'; -import { useMediaQuery } from '../hooks/useMedia'; import { MobileNavigation } from '../mobile/navigation/MobileNavigation'; import { BREAKPOINT_MIN_600 } from '../../constants'; +import { useLayout } from './LayoutProvider'; interface InternalLayoutState { isDragging: boolean; @@ -119,8 +119,7 @@ const useLayoutSyncingState = ({ }; export const Layout = ({ managerLayoutState, setManagerLayoutState, ...slots }: Props) => { - const isDesktop = useMediaQuery(BREAKPOINT_MIN_600); - const isMobile = !isDesktop; + const { isDesktop, isMobile } = useLayout(); const { navSize, diff --git a/code/ui/manager/src/components/panel/Panel.tsx b/code/ui/manager/src/components/panel/Panel.tsx index 96ea12c44b62..561edd77ff35 100644 --- a/code/ui/manager/src/components/panel/Panel.tsx +++ b/code/ui/manager/src/components/panel/Panel.tsx @@ -3,8 +3,6 @@ import { Tabs, Icons, IconButton } from '@storybook/components'; import type { State } from '@storybook/manager-api'; import { shortcutToHumanString } from '@storybook/manager-api'; import type { Addon_BaseType } from '@storybook/types'; -import { useMediaQuery } from '../hooks/useMedia'; -import { BREAKPOINT_MIN_600 } from '../../constants'; import { useLayout } from '../layout/LayoutProvider'; export interface SafeTabProps { @@ -51,8 +49,7 @@ export const AddonPanel = React.memo<{ panelPosition = 'right', absolute = true, }) => { - const isDesktop = useMediaQuery(BREAKPOINT_MIN_600); - const { setMobilePanelOpen } = useLayout(); + const { isDesktop, setMobilePanelOpen } = useLayout(); return ( Object.values(getFn(types.TOOL)); export const getToolsExtra = (getFn: API['getElements']) => Object.values(getFn(types.TOOLEXTRA)); @@ -50,10 +49,10 @@ export const fullScreenTool: Addon_BaseType = { type: types.TOOL, match: (p) => ['story', 'docs'].includes(p.viewMode), render: () => { - const isDesktop = useMediaQuery(BREAKPOINT_MIN_600); - if (!isDesktop) { - return null; - } + const { isDesktop } = useLayout(); + + if (!isDesktop) return null; + return ( {({ toggle, isFullscreen, shortcut, hasPanel, singleStory }) => diff --git a/code/ui/manager/src/components/sidebar/Menu.tsx b/code/ui/manager/src/components/sidebar/Menu.tsx index cf741da026ee..44133e04fadb 100644 --- a/code/ui/manager/src/components/sidebar/Menu.tsx +++ b/code/ui/manager/src/components/sidebar/Menu.tsx @@ -5,8 +5,7 @@ import { styled } from '@storybook/theming'; import { transparentize } from 'polished'; import type { Button, TooltipLinkListLink } from '@storybook/components'; import { WithTooltip, TooltipLinkList, Icons, IconButton } from '@storybook/components'; -import { useMediaQuery } from '../hooks/useMedia'; -import { BREAKPOINT_MIN_600 } from '../../constants'; +import { useLayout } from '../layout/LayoutProvider'; export type MenuList = ComponentProps['links']; @@ -115,7 +114,7 @@ export interface SidebarMenuProps { export const SidebarMenu: FC = ({ menu, isHighlighted, onClick }) => { const [isTooltipVisible, setIsTooltipVisible] = useState(false); - const isDesktop = useMediaQuery(BREAKPOINT_MIN_600); + const { isDesktop } = useLayout(); if (!isDesktop) { return ( diff --git a/code/ui/manager/src/components/sidebar/Tree.tsx b/code/ui/manager/src/components/sidebar/Tree.tsx index 10cc866e5c76..7c8e140ef966 100644 --- a/code/ui/manager/src/components/sidebar/Tree.tsx +++ b/code/ui/manager/src/components/sidebar/Tree.tsx @@ -36,8 +36,6 @@ import { getLink, } from '../../utils/tree'; import { statusMapping, getHighestStatus, getGroupStatus } from '../../utils/status'; -import { useMediaQuery } from '../hooks/useMedia'; -import { BREAKPOINT_MIN_600 } from '../../constants'; import { useLayout } from '../layout/LayoutProvider'; export const Action = styled.button<{ height?: number; width?: number }>( @@ -204,8 +202,7 @@ const Node = React.memo(function Node({ onSelectStoryId, api, }) { - const isDesktop = useMediaQuery(BREAKPOINT_MIN_600); - const { setMobileMenuOpen } = useLayout(); + const { isDesktop, setMobileMenuOpen } = useLayout(); if (!isDisplayed) { return null; From 591550e9f54f63d9818fb9a5eca697fa95e19959 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 21 Sep 2023 16:50:43 +0100 Subject: [PATCH 3/3] Rename breakpoint --- code/ui/manager/src/components/layout/Layout.tsx | 6 +++--- code/ui/manager/src/components/layout/LayoutProvider.tsx | 3 ++- code/ui/manager/src/components/sidebar/Sidebar.tsx | 4 ++-- code/ui/manager/src/components/upgrade/UpgradeBlock.tsx | 4 ++-- code/ui/manager/src/constants.ts | 3 ++- 5 files changed, 11 insertions(+), 9 deletions(-) diff --git a/code/ui/manager/src/components/layout/Layout.tsx b/code/ui/manager/src/components/layout/Layout.tsx index 2792a85a7780..3ccf7018a1c4 100644 --- a/code/ui/manager/src/components/layout/Layout.tsx +++ b/code/ui/manager/src/components/layout/Layout.tsx @@ -3,7 +3,7 @@ import { styled } from '@storybook/theming'; import type { API_Layout, API_ViewMode } from '@storybook/types'; import { useDragging } from './useDragging'; import { MobileNavigation } from '../mobile/navigation/MobileNavigation'; -import { BREAKPOINT_MIN_600 } from '../../constants'; +import { MEDIA_MIN_BREAKPOINT } from '../../constants'; import { useLayout } from './LayoutProvider'; interface InternalLayoutState { @@ -178,7 +178,7 @@ const LayoutContainer = styled.div( display: 'flex', flexDirection: 'column', - [`@media ${BREAKPOINT_MIN_600}`]: { + [MEDIA_MIN_BREAKPOINT]: { display: 'grid', gap: 0, gridTemplateColumns: `minmax(0, ${navSize}px) minmax(${MINIMUM_CONTENT_WIDTH_PX}px, 1fr) minmax(0, ${rightPanelWidth}px)`, @@ -214,7 +214,7 @@ const ContentContainer = styled.div(({ theme }) => ({ backgroundColor: theme.background.content, display: 'grid', // This is needed to make the content container fill the available space - [`@media ${BREAKPOINT_MIN_600}`]: { + [MEDIA_MIN_BREAKPOINT]: { flex: 'auto', gridArea: 'content', }, diff --git a/code/ui/manager/src/components/layout/LayoutProvider.tsx b/code/ui/manager/src/components/layout/LayoutProvider.tsx index 97474f25bf1c..1e9d7cf983a3 100644 --- a/code/ui/manager/src/components/layout/LayoutProvider.tsx +++ b/code/ui/manager/src/components/layout/LayoutProvider.tsx @@ -1,6 +1,7 @@ import type { FC } from 'react'; import React, { createContext, useContext, useState } from 'react'; import { useMediaQuery } from '../hooks/useMedia'; +import { BREAKPOINT } from '../../constants'; type LayoutContextType = { isMobileMenuOpen: boolean; @@ -28,7 +29,7 @@ export const LayoutProvider: FC = ({ children }) => { const [isMobileMenuOpen, setMobileMenuOpen] = useState(false); const [isMobileAboutOpen, setMobileAboutOpen] = useState(false); const [isMobilePanelOpen, setMobilePanelOpen] = useState(false); - const isDesktop = useMediaQuery('(min-width: 600px)'); + const isDesktop = useMediaQuery(`(min-width: ${BREAKPOINT}px)`); const isMobile = !isDesktop; return ( diff --git a/code/ui/manager/src/components/sidebar/Sidebar.tsx b/code/ui/manager/src/components/sidebar/Sidebar.tsx index 068e28d42808..c8c46bc42163 100644 --- a/code/ui/manager/src/components/sidebar/Sidebar.tsx +++ b/code/ui/manager/src/components/sidebar/Sidebar.tsx @@ -20,7 +20,7 @@ import { Search } from './Search'; import { SearchResults } from './SearchResults'; import type { Refs, CombinedDataset, Selection } from './types'; import { useLastViewed } from './useLastViewed'; -import { BREAKPOINT_MIN_600 } from '../../constants'; +import { MEDIA_MIN_BREAKPOINT } from '../../constants'; export const DEFAULT_REF_ID = 'storybook_internal'; @@ -37,7 +37,7 @@ const Container = styled.nav(({ theme }) => ({ flexDirection: 'column', background: theme.background.content, - [`@media ${BREAKPOINT_MIN_600}`]: { + [MEDIA_MIN_BREAKPOINT]: { background: theme.background.app, }, })); diff --git a/code/ui/manager/src/components/upgrade/UpgradeBlock.tsx b/code/ui/manager/src/components/upgrade/UpgradeBlock.tsx index feb54ff3c7e4..e09c820e0f55 100644 --- a/code/ui/manager/src/components/upgrade/UpgradeBlock.tsx +++ b/code/ui/manager/src/components/upgrade/UpgradeBlock.tsx @@ -3,7 +3,7 @@ import React, { useState } from 'react'; import { styled } from '@storybook/theming'; import { useStorybookApi } from '@storybook/manager-api'; import { Link } from '@storybook/components'; -import { BREAKPOINT_MIN_600 } from '../../constants'; +import { MEDIA_MIN_BREAKPOINT } from '../../constants'; interface UpgradeBlockProps { onNavigateToWhatsNew?: () => void; @@ -45,7 +45,7 @@ const Container = styled.div(({ theme }) => ({ fontSize: theme.typography.size.s2, width: '100%', - [`@media ${BREAKPOINT_MIN_600}`]: { + [MEDIA_MIN_BREAKPOINT]: { maxWidth: 400, }, })); diff --git a/code/ui/manager/src/constants.ts b/code/ui/manager/src/constants.ts index 16d266f5941f..51c620aac46f 100644 --- a/code/ui/manager/src/constants.ts +++ b/code/ui/manager/src/constants.ts @@ -1,2 +1,3 @@ -export const BREAKPOINT_MIN_600 = '(min-width: 600px)'; +export const BREAKPOINT = 600; +export const MEDIA_MIN_BREAKPOINT = `@media (min-width: ${BREAKPOINT}px)`; export const MOBILE_TRANSITION_DURATION = 300;