Merge pull request #18131 from storybookjs/jono/sb-334-deprecate-isto…

…olshown-storybook API: Deprecate isToolshown, rename to showToolbar
storybookjs · May 9, 2022 · a108352 · a108352
2 parents 56b5552 + aad962b
commit a108352
Show file tree

Hide file tree

Showing 16 changed files with 66 additions and 35 deletions.
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -2,6 +2,7 @@
 
 - [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
   - [React18 new root API](#react18-new-root-api)
+  - [Renamed isToolshown to showToolbar](#renamed-istoolshown-to-showtoolbar)
   - [Deprecated register.js](#deprecated-registerjs)
   - [Dropped support for addon-actions addDecorators](#dropped-support-for-addon-actions-adddecorators)
   - [Vite builder renamed](#vite-builder-renamed)
@@ -213,6 +214,21 @@ module.exports = {
 };
 ```
 
+### Renamed isToolshown to showToolbar
+
+Storybook's [manager API](docs/addons/addons-api.md) has deprecated the `isToolshown` option (to show/hide the toolbar) and renamed it to `showToolbar` for consistency with other similar UI options.
+
+Example:
+
+```js
+// .storybook/manager.js
+import { addons } from '@storybook/addons';
+
+addons.setConfig({
+  showToolbar: false,
+});
+```
+
 ### Deprecated register.js
 
 In ancient versions of Storybook, addons were registered by referring to `addon-name/register.js`. This is going away in SB7.0. Instead you should just add `addon-name` to the `addons` array in `.storybook/main.js`.

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',
@@ -18,11 +18,11 @@ addons.setConfig({
     collapsedRoots: ['other'],
   },
   toolbar: {
-    title: { hidden: false, },
-    zoom: { hidden: false, },
-    eject: { hidden: false, },
-    copy: { hidden: false, },
-    fullscreen: { hidden: false, },
+    title: { hidden: false },
+    zoom: { hidden: false },
+    eject: { hidden: false },
+    copy: { hidden: false },
+    fullscreen: { hidden: false },
   },
 });
-```
+```
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
@@ -3,6 +3,8 @@ import pick from 'lodash/pick';
 import deepEqual from 'fast-deep-equal';
 import { themes } from '@storybook/theming';
 import type { ThemeVars } from '@storybook/theming';
+import { once } from '@storybook/client-logger';
+import dedent from 'ts-dedent';
 
 import merge from '../lib/merge';
 import type { State, ModuleFn } from '../index';
@@ -23,8 +25,12 @@ export interface Layout {
   showPanel: boolean;
   panelPosition: PanelPositions;
   showNav: boolean;
-  isToolshown: boolean;
   showTabs: boolean;
+  showToolbar: boolean;
+  /**
+   * @deprecated
+   */
+  isToolshown?: boolean;
 }
 
 export interface UI {
@@ -70,7 +76,7 @@ const defaultState: SubState = {
   },
   layout: {
     initialActive: ActiveTabs.CANVAS,
-    isToolshown: !DOCS_MODE,
+    showToolbar: !DOCS_MODE,
     isFullscreen: false,
     showPanel: true,
     showNav: true,
@@ -177,12 +183,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,
             },
           };
         },
@@ -220,6 +226,15 @@ export const init: ModuleFn = ({ store, provider, singleStory }) => {
     getInitialOptions() {
       const { theme, selectedPanel, ...options } = provider.getConfig();
 
+      if (options?.layout?.isToolshown !== undefined) {
+        once.warn(dedent`
+          The "isToolshown" option is deprecated. Please use "showToolbar" instead.
+
+          See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#renamed-istoolshown-to-showtoolbar
+        `);
+        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,
@@ -67,7 +67,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',
     showTabs: true,
   },
@@ -183,7 +183,7 @@ export const realProps: DesktopProps = {
     showNav: true,
     showPanel: true,
     panelPosition: 'right',
-    isToolshown: true,
+    showToolbar: true,
     initialActive: 'canvas',
     showTabs: true,
   },

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,8 +46,8 @@ export const previewProps: PreviewProps = {
   queryParams: {},
   options: {
     isFullscreen: false,
-    isToolshown: true,
     showTabs: 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, showTabs = true } = options;
+  const { showToolbar, showTabs = true } = options;
   const visibleTabsInToolbar = showTabs ? tabs : [];
 
   const previousStoryId = useRef(storyId);
@@ -186,10 +186,10 @@ const Preview = React.memo<PreviewProps>((props) => {
           key="tools"
           story={story}
           api={api}
-          isShown={isToolshown}
+          isShown={showToolbar}
           tabs={visibleTabsInToolbar}
         />
-        <S.FrameWrap key="frame" offset={isToolshown ? 40 : 0}>
+        <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,8 +12,8 @@ export interface PreviewProps {
   docsOnly: boolean;
   options: {
     isFullscreen: boolean;
-    isToolshown: boolean;
     showTabs: 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,