deprecate isToolshown, rename to showToolbar

storybookjs · May 3, 2022 · 1422323 · 1422323
1 parent d08e7c3
commit 1422323
Show file tree

Hide file tree

Showing 15 changed files with 35 additions and 29 deletions.
diff --git a/docs/addons/addons-api.md b/docs/addons/addons-api.md
@@ -362,7 +362,7 @@ The following table details how to use the API values:
 | **showPanel**       |    Boolean    |   Display panel that shows addon configurations    |                `true`                 |
 | **panelPosition**   | String/Object |           Where to show the addon panel            |          `bottom` or `right`          |
 | **enableShortcuts** |    Boolean    |              Enable/disable shortcuts              |                `true`                 |
-| **isToolshown**     |    Boolean    |                 Show/hide tool bar                 |                `true`                 |
+| **showToolbar**     |    Boolean    |                 Show/hide tool bar                 |                `true`                 |
 | **theme**           |    Object     |         Storybook Theme, see next section          |              `undefined`              |
 | **selectedPanel**   |    String     |            Id to select an addon panel             |       `storybook/actions/panel`       |
 | **initialActive**   |    String     |      Select the default active tab on Mobile       |   `sidebar` or `canvas` or `addons`   |

diff --git a/docs/configure/features-and-behavior.md b/docs/configure/features-and-behavior.md
@@ -23,7 +23,7 @@ The following table details how to use the API values:
 | **showPanel**       |    Boolean    |   Display panel that shows addon configurations    |                `true`                 |
 | **panelPosition**   | String/Object |           Where to show the addon panel            |          `bottom` or `right`          |
 | **enableShortcuts** |    Boolean    |              Enable/disable shortcuts              |                `true`                 |
-| **isToolshown**     |    Boolean    |                 Show/hide tool bar                 |                `true`                 |
+| **showToolbar**     |    Boolean    |                 Show/hide tool bar                 |                `true`                 |
 | **theme**           |    Object     |         Storybook Theme, see next section          |              `undefined`              |
 | **selectedPanel**   |    String     |            Id to select an addon panel             |       `storybook/actions/panel`       |
 | **initialActive**   |    String     |      Select the default active tab on Mobile       |   `sidebar` or `canvas` or `addons`   |

diff --git a/docs/snippets/common/storybook-config-layout.js.mdx b/docs/snippets/common/storybook-config-layout.js.mdx
@@ -9,7 +9,7 @@ addons.setConfig({
   showPanel: true,
   panelPosition: 'bottom',
   enableShortcuts: true,
-  isToolshown: true,
+  showToolbar: true,
   theme: undefined,
   selectedPanel: undefined,
   initialActive: 'sidebar',

diff --git a/lib/api/src/index.tsx b/lib/api/src/index.tsx
@@ -178,7 +178,7 @@ class ManagerProvider extends Component<ManagerProviderProps, State> {
     // This gives the modules the chance to read the persisted state, apply their defaults
     // and override if necessary
     const docsModeState = {
-      layout: { isToolshown: false, showPanel: false },
+      layout: { showToolbar: false, showPanel: false },
       ui: { docsMode: true },
     };
 

diff --git a/lib/api/src/modules/layout.ts b/lib/api/src/modules/layout.ts
@@ -23,7 +23,8 @@ export interface Layout {
   showPanel: boolean;
   panelPosition: PanelPositions;
   showNav: boolean;
-  isToolshown: boolean;
+  showToolbar: boolean;
+  isToolshown?: boolean; // deprecated
 }
 
 export interface UI {
@@ -69,7 +70,7 @@ const defaultState: SubState = {
   },
   layout: {
     initialActive: ActiveTabs.CANVAS,
-    isToolshown: !DOCS_MODE,
+    showToolbar: !DOCS_MODE,
     isFullscreen: false,
     showPanel: true,
     showNav: true,
@@ -175,12 +176,12 @@ export const init: ModuleFn = ({ store, provider, singleStory }) => {
     toggleToolbar(toggled?: boolean) {
       return store.setState(
         (state: State) => {
-          const value = typeof toggled !== 'undefined' ? toggled : !state.layout.isToolshown;
+          const value = typeof toggled !== 'undefined' ? toggled : !state.layout.showToolbar;
 
           return {
             layout: {
               ...state.layout,
-              isToolshown: value,
+              showToolbar: value,
             },
           };
         },
@@ -218,6 +219,11 @@ export const init: ModuleFn = ({ store, provider, singleStory }) => {
     getInitialOptions() {
       const { theme, selectedPanel, ...options } = provider.getConfig();
 
+      // TODO: remove this when we deprecate isToolshown
+      if (options.layout.isToolshown !== undefined) {
+        options.layout.showToolbar = options.layout.isToolshown;
+      }
+
       return {
         ...defaultState,
         layout: {

diff --git a/lib/api/src/tests/layout.test.js b/lib/api/src/tests/layout.test.js
@@ -13,7 +13,7 @@ beforeEach(() => {
       docsMode: false,
     },
     layout: {
-      isToolshown: true,
+      showToolbar: true,
       isFullscreen: false,
       showPanel: true,
       showNav: true,

diff --git a/lib/ui/src/app.stories.tsx b/lib/ui/src/app.stories.tsx
@@ -39,7 +39,7 @@ export const Default = () => (
       layout={{
         initialActive: 'addons',
         isFullscreen: false,
-        isToolshown: true,
+        showToolbar: true,
         panelPosition: 'right',
         showNav: true,
         showPanel: true,
@@ -66,7 +66,7 @@ export const LoadingState = () => (
       layout={{
         initialActive: 'addons',
         isFullscreen: false,
-        isToolshown: true,
+        showToolbar: true,
         panelPosition: 'right',
         showNav: true,
         showPanel: true,

diff --git a/lib/ui/src/components/layout/app.mockdata.tsx b/lib/ui/src/components/layout/app.mockdata.tsx
@@ -152,7 +152,7 @@ export const mockProps: DesktopProps = {
     showNav: true,
     showPanel: true,
     panelPosition: 'right',
-    isToolshown: true,
+    showToolbar: true,
     initialActive: 'canvas',
   },
   viewMode: 'story',
@@ -182,7 +182,7 @@ export const realProps: DesktopProps = {
     showNav: true,
     showPanel: true,
     panelPosition: 'right',
-    isToolshown: true,
+    showToolbar: true,
     initialActive: 'canvas',
   },
   viewMode: 'story',

diff --git a/lib/ui/src/components/layout/container.tsx b/lib/ui/src/components/layout/container.tsx
@@ -300,7 +300,7 @@ export interface LayoutRenderProps {
   mainProps: BasePanelRenderProps;
   previewProps: BasePanelRenderProps & {
     docsOnly: boolean;
-    isToolshown: boolean;
+    showToolbar: boolean;
   };
   navProps: BasePanelRenderProps & {
     hidden: boolean;
@@ -330,7 +330,7 @@ export interface LayoutProps {
     showNav: boolean;
     showPanel: boolean;
     panelPosition: 'bottom' | 'right';
-    isToolshown: boolean;
+    showToolbar: boolean;
   };
   viewMode: State['viewMode'];
   docsOnly: boolean;
@@ -504,7 +504,7 @@ class Layout extends Component<LayoutProps, LayoutState> {
       viewMode !== 'story' ||
       panelCount === 0;
     const isFullscreen = options.isFullscreen || (isNavHidden && isPanelHidden);
-    const { isToolshown } = options;
+    const { showToolbar } = options;
 
     const { panelPosition } = options;
     const isPanelBottom = panelPosition === 'bottom';
@@ -590,7 +590,7 @@ class Layout extends Component<LayoutProps, LayoutState> {
             docsOnly,
             animate: !isDragging,
             isFullscreen,
-            isToolshown,
+            showToolbar,
             position: getPreviewPosition({
               isFullscreen,
               isNavHidden,

diff --git a/lib/ui/src/components/layout/mobile.tsx b/lib/ui/src/components/layout/mobile.tsx
@@ -135,7 +135,7 @@ export interface Page {
 export interface MobileProps {
   options: {
     initialActive: ActiveTabsType;
-    isToolshown: boolean;
+    showToolbar: boolean;
     isFullscreen: boolean;
   };
   Sidebar: ComponentType<any>;
@@ -181,7 +181,7 @@ class Mobile extends Component<MobileProps, MobileState> {
           <Sidebar />
           <div>
             <div hidden={!viewMode}>
-              <Preview isToolshown={options.isToolshown} id="main" viewMode={viewMode} />
+              <Preview showToolbar={options.showToolbar} id="main" viewMode={viewMode} />
             </div>
             {pages.map(({ key, route: Route, render: Content }) => (
               <Route key={key}>

diff --git a/lib/ui/src/components/preview/preview.mockdata.tsx b/lib/ui/src/components/preview/preview.mockdata.tsx
@@ -46,7 +46,7 @@ export const previewProps: PreviewProps = {
   queryParams: {},
   options: {
     isFullscreen: false,
-    isToolshown: true,
+    showToolbar: true,
   },
   withLoader: false,
   docsOnly: false,

diff --git a/lib/ui/src/components/preview/preview.tsx b/lib/ui/src/components/preview/preview.tsx
@@ -147,7 +147,7 @@ const Preview = React.memo<PreviewProps>((props) => {
   const tabs = useTabs(previewId, baseUrl, withLoader, getElements, story);
 
   const shouldScale = viewMode === 'story';
-  const { isToolshown } = options;
+  const { showToolbar } = options;
 
   const previousStoryId = useRef(storyId);
   const previousViewMode = useRef(viewMode);
@@ -181,8 +181,8 @@ const Preview = React.memo<PreviewProps>((props) => {
         </Helmet>
       )}
       <ZoomProvider shouldScale={shouldScale}>
-        <ToolbarComp key="tools" story={story} api={api} isShown={isToolshown} tabs={tabs} />
-        <S.FrameWrap key="frame" offset={isToolshown ? 40 : 0}>
+        <ToolbarComp key="tools" story={story} api={api} isShown={showToolbar} tabs={tabs} />
+        <S.FrameWrap key="frame" offset={showToolbar ? 40 : 0}>
           {tabs.map(({ render: Render, match, ...t }, i) => {
             // @ts-ignore
             const key = t.id || t.key || i;

diff --git a/lib/ui/src/components/preview/utils/types.tsx b/lib/ui/src/components/preview/utils/types.tsx
@@ -12,7 +12,7 @@ export interface PreviewProps {
   docsOnly: boolean;
   options: {
     isFullscreen: boolean;
-    isToolshown: boolean;
+    showToolbar: boolean;
   };
   id: string;
   path: string;

diff --git a/lib/ui/src/containers/menu.tsx b/lib/ui/src/containers/menu.tsx
@@ -40,7 +40,7 @@ const Shortcut: FunctionComponent<{ keys: string[] }> = ({ keys }) => (
 
 export const useMenu = (
   api: API,
-  isToolshown: boolean,
+  showToolbar: boolean,
   isFullscreen: boolean,
   showPanel: boolean,
   showNav: boolean,
@@ -101,9 +101,9 @@ export const useMenu = (
       title: 'Show toolbar',
       onClick: () => api.toggleToolbar(),
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.toolbar} /> : null,
-      left: isToolshown ? <MenuItemIcon icon="check" /> : <MenuItemIcon />,
+      left: showToolbar ? <MenuItemIcon icon="check" /> : <MenuItemIcon />,
     }),
-    [api, enableShortcuts, shortcutKeys, isToolshown]
+    [api, enableShortcuts, shortcutKeys, showToolbar]
   );
 
   const addonsToggle = useMemo(

diff --git a/lib/ui/src/containers/sidebar.tsx b/lib/ui/src/containers/sidebar.tsx
@@ -15,14 +15,14 @@ const Sidebar: FunctionComponent<{}> = React.memo(() => {
       viewMode,
       storyId,
       refId,
-      layout: { isToolshown, isFullscreen, showPanel, showNav },
+      layout: { showToolbar, isFullscreen, showPanel, showNav },
       storiesHash,
       storiesConfigured,
       storiesFailed,
       refs,
     } = state;
 
-    const menu = useMenu(api, isToolshown, isFullscreen, showPanel, showNav, enableShortcuts);
+    const menu = useMenu(api, showToolbar, isFullscreen, showPanel, showNav, enableShortcuts);
 
     return {
       title: name,