From 1422323b055b04e509e32eb45893fb2660fb32a4 Mon Sep 17 00:00:00 2001 From: Jono Kolnik <1164060+JonathanKolnik@users.noreply.github.com> Date: Tue, 3 May 2022 14:59:10 -0400 Subject: [PATCH] deprecate isToolshown, rename to showToolbar --- docs/addons/addons-api.md | 2 +- docs/configure/features-and-behavior.md | 2 +- .../snippets/common/storybook-config-layout.js.mdx | 2 +- lib/api/src/index.tsx | 2 +- lib/api/src/modules/layout.ts | 14 ++++++++++---- lib/api/src/tests/layout.test.js | 2 +- lib/ui/src/app.stories.tsx | 4 ++-- lib/ui/src/components/layout/app.mockdata.tsx | 4 ++-- lib/ui/src/components/layout/container.tsx | 8 ++++---- lib/ui/src/components/layout/mobile.tsx | 4 ++-- lib/ui/src/components/preview/preview.mockdata.tsx | 2 +- lib/ui/src/components/preview/preview.tsx | 6 +++--- lib/ui/src/components/preview/utils/types.tsx | 2 +- lib/ui/src/containers/menu.tsx | 6 +++--- lib/ui/src/containers/sidebar.tsx | 4 ++-- 15 files changed, 35 insertions(+), 29 deletions(-) diff --git a/docs/addons/addons-api.md b/docs/addons/addons-api.md index 26decd0e386b..5c0e5b2a6463 100644 --- 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 index 42d791c02226..9351f9efa29b 100644 --- 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 index 550254d31dd3..41c1197ef8ca 100644 --- 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 index 78ce1ffb15a3..20180733964a 100644 --- a/lib/api/src/index.tsx +++ b/lib/api/src/index.tsx @@ -178,7 +178,7 @@ class ManagerProvider extends Component { // 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 index a51ee56f0b37..b69278b53360 100644 --- 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 index 6e863ae1a62c..fb4c791437bb 100644 --- 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 index 29cce7d842b4..def3165a3237 100644 --- 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 index 90b60171efc1..4fb34ee1d967 100644 --- 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 index 6a1f8b1e4754..845e3a3d0754 100644 --- 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 { 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 { 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 index e04387bf3888..185d261e63a3 100644 --- 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; @@ -181,7 +181,7 @@ class Mobile extends Component {
{pages.map(({ key, route: Route, render: Content }) => ( diff --git a/lib/ui/src/components/preview/preview.mockdata.tsx b/lib/ui/src/components/preview/preview.mockdata.tsx index 83b437c6e067..55481375c214 100644 --- 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 index de966bc29b46..b9a0ffa64bac 100644 --- a/lib/ui/src/components/preview/preview.tsx +++ b/lib/ui/src/components/preview/preview.tsx @@ -147,7 +147,7 @@ const Preview = React.memo((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((props) => { )} - - + + {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 index edc557a4d36c..3e1c4def1b6f 100644 --- 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 index 48c08c399695..4b4aa9111b47 100644 --- 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 ? : null, - left: isToolshown ? : , + left: showToolbar ? : , }), - [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 index b548d8235c12..44c094d9d8c6 100755 --- 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,