Merge pull request #14897 from Tomastomaslol/issue-14617-provide-option-to-hide-default-toolbar-tools

UI: Provide option to hide default toolbar tools

docs/configure/features-and-behavior.md

@@ -28,6 +28,7 @@ The following table details how to use the API values:
 | **selectedPanel**     | String        |Id to select an addon panel                                    |`my-panel`                                      |
 | **initialActive**     | String        |Select the default active tab on Mobile                        |`sidebar` or `canvas` or `addons`               |
 | **sidebar**           | Object        |Sidebar options, see below                                     |`{ showRoots: false }`                          |
+| **toolbar**           | Object        |Modify the tools in the toolbar using the addon id             |`{ fullscreen: { hidden: false } } }`           |
 
 The following options are configurable under the `sidebar` namespace:
 
@@ -36,3 +37,9 @@ The following options are configurable under the `sidebar` namespace:
 | **showRoots**         | Boolean       |Display the top-level nodes as a "root" in the sidebar         |`false`                                         |
 | **collapsedRoots**    | Array         |Set of root node IDs to visually collapse by default           |`['misc', 'other']`                             |
 | **renderLabel**       | Function      |Create a custom label for tree nodes; must return a ReactNode  |`(item) => <abbr title="...">{item.name}</abbr>`|
+
+The following options are configurable under the `toolbar` namespace:
+
+| Name                  | Type          | Description                                                   | Example Value                                  |
+| ----------------------|:-------------:|:-------------------------------------------------------------:|:----------------------------------------------:|
+| **id**                | String        |Toggle visibility for toolbar item                             |`{ hidden: false }`                            |

docs/snippets/common/storybook-config-layout.js.mdx

@@ -17,5 +17,12 @@ addons.setConfig({
     showRoots: false,
     collapsedRoots: ['other'],
   },
+  toolbar: {
+    title: { hidden: false, },
+    zoom: { hidden: false, },
+    eject: { hidden: false, },
+    copy: { hidden: false, },
+    fullscreen: { hidden: false, },
+  },
 });
-```
+```

examples/official-storybook/manager.js

@@ -25,6 +25,13 @@ addons.setConfig({
     graphiql: {
       hidden: true,
     },
+    toolbar: {
+      title: { hidden: false },
+      zoom: { hidden: false },
+      eject: { hidden: false },
+      copy: { hidden: false },
+      fullscreen: { hidden: false },
+    },
   },
   sidebar: {
     collapsedRoots: ['other'],

lib/addons/src/index.ts

@@ -37,9 +37,14 @@ export interface Collection {
 interface Elements {
   [key: string]: Collection;
 }
-
+interface ToolbarConfig {
+  hidden?: boolean;
+}
 export interface Config {
   theme?: ThemeVars;
+  toolbar?: {
+    [id: string]: ToolbarConfig;
+  };
   [key: string]: any;
 }
 

lib/ui/src/components/preview/preview.stories.tsx

@@ -50,6 +50,44 @@ export const noTabs = () => (
   </Consumer>
 );
 
+export const hideFullscreen = () => (
+  <Consumer>
+    {({ api }: Combo) => {
+      return (
+        <Preview
+          {...previewProps}
+          api={{ ...api, getElements: () => ({}) }}
+          story={{ parameters: { toolbar: { fullscreen: { hidden: true } } } }}
+        />
+      );
+    }}
+  </Consumer>
+);
+
+export const hideAllDefaultTools = () => (
+  <Consumer>
+    {({ api }: Combo) => {
+      return (
+        <Preview
+          {...previewProps}
+          api={{ ...api, getElements: () => ({}) }}
+          story={{
+            parameters: {
+              toolbar: {
+                title: { hidden: true },
+                zoom: { hidden: true },
+                eject: { hidden: true },
+                copy: { hidden: true },
+                fullscreen: { hidden: true },
+              },
+            },
+          }}
+        />
+      );
+    }}
+  </Consumer>
+);
+
 export const withCanvasTab = () => (
   <Consumer>
     {({ api }: Combo) => {

lib/ui/src/components/preview/toolbar.tsx

@@ -3,9 +3,9 @@ import React, { Fragment, useMemo, FunctionComponent } from 'react';
 import { styled } from '@storybook/theming';
 
 import { FlexBar, IconButton, Icons, Separator, TabButton, TabBar } from '@storybook/components';
-import { Consumer, Combo, API, Story, Group, State } from '@storybook/api';
+import { Consumer, Combo, API, Story, Group, State, merge } from '@storybook/api';
 import { shortcutToHumanString } from '@storybook/api/shortcut';
-import { Addon, types } from '@storybook/addons';
+import addons, { Addon, types } from '@storybook/addons';
 
 import { Location, RenderData } from '@storybook/router';
 import { zoomTool } from './tools/zoom';
@@ -46,6 +46,7 @@ const fullScreenMapper = ({ api, state }: Combo) => ({
 
 export const fullScreenTool: Addon = {
   title: 'fullscreen',
+  id: 'fullscreen',
   match: (p) => ['story', 'docs'].includes(p.viewMode),
   render: () => (
     <Consumer filter={fullScreenMapper}>
@@ -74,6 +75,7 @@ const tabsMapper = ({ state }: Combo) => ({
 
 export const createTabsTool = (tabs: Addon[]): Addon => ({
   title: 'title',
+  id: 'title',
   render: () => (
     <Consumer filter={tabsMapper}>
       {(rp) => (
@@ -165,6 +167,16 @@ export const Tools = React.memo<{ list: Addon[] }>(({ list }) => (
   </>
 ));
 
+function toolbarItemHasBeenExcluded(item: Partial<Addon>, story: PreviewProps['story']) {
+  const toolbarItemsFromStoryParameters =
+    'toolbar' in story.parameters ? story.parameters.toolbar : undefined;
+  const { toolbar: toolbarItemsFromAddonsConfig } = addons.getConfig();
+
+  const toolbarItems = merge(toolbarItemsFromAddonsConfig, toolbarItemsFromStoryParameters);
+
+  return toolbarItems ? !!toolbarItems[item.id]?.hidden : false;
+}
+
 export function filterTools(
   tools: Addon[],
   toolsExtra: Addon[],
@@ -193,7 +205,8 @@ export function filterTools(
         viewMode,
         location,
         path,
-      }));
+      })) &&
+    !toolbarItemHasBeenExcluded(item, story);
 
   const left = toolsLeft.filter(filter);
   const right = toolsRight.filter(filter);

lib/ui/src/components/preview/tools/copy.tsx

@@ -20,6 +20,7 @@ const copyMapper = ({ state }: Combo) => {
 
 export const copyTool: Addon = {
   title: 'copy',
+  id: 'copy',
   match: ({ viewMode }) => viewMode === 'story',
   render: () => (
     <Consumer filter={copyMapper}>

lib/ui/src/components/preview/tools/eject.tsx

@@ -19,6 +19,7 @@ const ejectMapper = ({ state }: Combo) => {
 
 export const ejectTool: Addon = {
   title: 'eject',
+  id: 'eject',
   match: ({ viewMode }) => viewMode === 'story',
   render: () => (
     <Consumer filter={ejectMapper}>

lib/ui/src/components/preview/tools/zoom.tsx

@@ -75,6 +75,7 @@ const ZoomWrapper = React.memo<{ set: Function; value: number }>(({ set, value }
 
 export const zoomTool: Addon = {
   title: 'zoom',
+  id: 'zoom',
   match: ({ viewMode }) => viewMode === 'story',
   render: React.memo(() => (
     <>