Expose addon title as a function in the interface + add number of knobs

addons/controls/src/register.tsx

@@ -3,11 +3,12 @@ import addons, { types } from '@storybook/addons';
 import { AddonPanel } from '@storybook/components';
 import { API } from '@storybook/api';
 import { ControlsPanel } from './components/ControlsPanel';
+import { getTitle } from './title';
 import { ADDON_ID, PARAM_KEY } from './constants';
 
 addons.register(ADDON_ID, (api: API) => {
   addons.addPanel(ADDON_ID, {
-    title: 'Controls',
+    title: getTitle,
     type: types.PANEL,
     paramKey: PARAM_KEY,
     render: ({ key, active }) => {

addons/controls/src/title.ts

@@ -0,0 +1,13 @@
+import { useArgTypes } from '@storybook/api';
+
+export function getTitle(): string {
+  const rows = useArgTypes();
+
+  const controlsCount = Object.values(rows).filter((argType) => argType?.control?.type).length;
+
+  if (controlsCount === 0) {
+    return 'Controls';
+  }
+
+  return `Controls (${controlsCount})`;
+}

addons/knobs/src/register.tsx

@@ -2,10 +2,11 @@ import * as React from 'react';
 import addons from '@storybook/addons';
 import Panel from './components/Panel';
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './shared';
+import { createTitleListener } from './title';
 
 addons.register(ADDON_ID, (api) => {
   addons.addPanel(PANEL_ID, {
-    title: 'Knobs',
+    title: createTitleListener(api),
     render: ({ active, key }) => <Panel api={api} key={key} active={active} />,
     paramKey: PARAM_KEY,
   });

addons/knobs/src/title.ts

@@ -0,0 +1,13 @@
+import { API } from '@storybook/api';
+import { SET } from './shared';
+import { KnobStoreKnob } from './KnobStore';
+
+export function createTitleListener(api: API): () => string {
+  let knobsCount = 0;
+
+  api.on(SET, ({ knobs }: { knobs: Record<string, KnobStoreKnob> }) => {
+    knobsCount = Object.keys(knobs).length;
+  });
+
+  return () => (knobsCount === 0 ? 'Knobs' : `Knobs (${knobsCount})`);
+}

examples/react-ts/main.ts

@@ -2,7 +2,7 @@ import type { StorybookConfig } from '@storybook/core/types';
 
 module.exports = {
   stories: ['./src/*.stories.*'],
-  addons: ['@storybook/addon-essentials'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-controls'],
   typescript: {
     check: true,
     checkOptions: {},

examples/react-ts/package.json

@@ -8,6 +8,7 @@
     "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-dll"
   },
   "dependencies": {
+    "@storybook/addon-controls": "6.0.0-beta.22",
     "@storybook/addon-essentials": "6.0.0-beta.23",
     "@storybook/react": "6.0.0-beta.23",
     "@types/react": "^16.9.35",

lib/addons/src/index.ts

@@ -15,7 +15,7 @@ export interface RenderOptions {
 }
 
 export interface Addon {
-  title: string;
+  title: (() => string) | string;
   type?: Types;
   id?: string;
   route?: (routeOptions: RouterData) => string;

lib/ui/src/components/panel/panel.tsx

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component, Fragment, ReactElement } from 'react';
 import { styled } from '@storybook/theming';
 import { Tabs, Icons, IconButton } from '@storybook/components';
 
@@ -10,10 +10,13 @@ const DesktopOnlyIconButton = styled(IconButton)({
 });
 
 export interface SafeTabProps {
-  title: string;
+  title: (() => string) | string;
   id: string;
+  children: ReactElement;
 }
 
+const SafeTabContent = React.memo<SafeTabProps>(({ children }) => children);
+
 class SafeTab extends Component<SafeTabProps, { hasError: boolean }> {
   constructor(props: SafeTabProps) {
     super(props);
@@ -33,9 +36,9 @@ class SafeTab extends Component<SafeTabProps, { hasError: boolean }> {
       return <h1>Something went wrong.</h1>;
     }
     return (
-      <div id={id} title={title}>
+      <SafeTabContent id={id} title={title}>
         {children}
-      </div>
+      </SafeTabContent>
     );
   }
 }

yarn.lock

@@ -3877,6 +3877,18 @@
   resolved "https://registry.yarnpkg.com/@soda/get-current-script/-/get-current-script-1.0.0.tgz#623aa40623550e3b94767cffeb096a6fb597ed09"
   integrity sha512-9GvTek+7cVw7r+L7TNGOG1astZJWXz2h5q4BqMXl28KN+24iSCm1xo+RhZOZvwdT3bzNe9hD7riJc/lBoO7mgg==
 
+"@storybook/[email protected]":
+  version "6.0.0-beta.22"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-6.0.0-beta.22.tgz#c8de931530f63a70ccc81778ca96ee8bb051bd23"
+  integrity sha512-6xcjrL+4FLfPbIAec6XbbYKT1II+848CsGdmo3VhdmZ1hjihjcaRFMtFGdh6qDXuY1FvIbCQGpmeF7qelc8d6g==
+  dependencies:
+    "@storybook/addons" "6.0.0-beta.22"
+    "@storybook/api" "6.0.0-beta.22"
+    "@storybook/client-api" "6.0.0-beta.22"
+    "@storybook/components" "6.0.0-beta.22"
+    "@storybook/theming" "6.0.0-beta.22"
+    core-js "^3.0.1"
+
 "@storybook/[email protected]":
   version "6.0.0-alpha.0"
   resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.0.0-alpha.0.tgz#f4416a8c9c081961e5950a7962d7a5102138717e"
@@ -3890,6 +3902,21 @@
     global "^4.3.2"
     util-deprecate "^1.0.2"
 
+"@storybook/[email protected]":
+  version "6.0.0-beta.22"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.0.0-beta.22.tgz#625e30a213992cc07f3aee51c3f19adeef2cab82"
+  integrity sha512-CIQhs9hZLR8ReGXL0SH+fExbll7SrPsVlyhLMF+myQfiL3SHLhrRXh5Y/lbMcEE39MRYJc3V+0rGxgaoB8bNug==
+  dependencies:
+    "@storybook/api" "6.0.0-beta.22"
+    "@storybook/channels" "6.0.0-beta.22"
+    "@storybook/client-logger" "6.0.0-beta.22"
+    "@storybook/core-events" "6.0.0-beta.22"
+    "@storybook/router" "6.0.0-beta.22"
+    "@storybook/theming" "6.0.0-beta.22"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    regenerator-runtime "^0.13.3"
+
 "@storybook/[email protected]":
   version "6.0.0-alpha.0"
   resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.0.0-alpha.0.tgz#9b612f8c41fb8b1f9bbd3c990b5a1b3beb0eb82a"
@@ -3916,6 +3943,32 @@
     telejson "^3.2.0"
     util-deprecate "^1.0.2"
 
+"@storybook/[email protected]":
+  version "6.0.0-beta.22"
+  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.0.0-beta.22.tgz#cde8d76f88aaa756d308c18be0d1cc602b5bb006"
+  integrity sha512-o+Cplxr3UgtCnoNNoJdO//TOO8+vgg8cbO2zvqScC6zOtcIRiVOhnomQFqlrY2ZjCxLVZQuWGT/NInQbzSi/wg==
+  dependencies:
+    "@reach/router" "^1.3.3"
+    "@storybook/channels" "6.0.0-beta.22"
+    "@storybook/client-logger" "6.0.0-beta.22"
+    "@storybook/core-events" "6.0.0-beta.22"
+    "@storybook/csf" "0.0.1"
+    "@storybook/router" "6.0.0-beta.22"
+    "@storybook/semver" "^7.3.2"
+    "@storybook/theming" "6.0.0-beta.22"
+    "@types/reach__router" "^1.3.5"
+    core-js "^3.0.1"
+    fast-deep-equal "^3.1.1"
+    global "^4.3.2"
+    lodash "^4.17.15"
+    memoizerific "^1.11.3"
+    react "^16.8.3"
+    regenerator-runtime "^0.13.3"
+    store2 "^2.7.1"
+    telejson "^4.0.0"
+    ts-dedent "^1.1.1"
+    util-deprecate "^1.0.2"
+
 "@storybook/[email protected]":
   version "6.0.0-alpha.0"
   resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.0.0-alpha.0.tgz#dec7245e9be7b1303c8bd60e664134a56639ae54"
@@ -3927,6 +3980,18 @@
     global "^4.3.2"
     telejson "^3.2.0"
 
+"@storybook/[email protected]":
+  version "6.0.0-beta.22"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.0.0-beta.22.tgz#bb4733059d2bc5da6af26d37d063cf872d87a883"
+  integrity sha512-wSPFevhNvUB27dy5JJmapfguaZtZBxtL61UIibWKgn9oUYfc3ARFukrrEpi7ULLy/3aRK9E2uMS8uU/qIjLyCQ==
+  dependencies:
+    "@storybook/channels" "6.0.0-beta.22"
+    "@storybook/client-logger" "6.0.0-beta.22"
+    "@storybook/core-events" "6.0.0-beta.22"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    telejson "^4.0.0"
+
 "@storybook/[email protected]":
   version "6.0.0-alpha.0"
   resolved "https://registry.yarnpkg.com/@storybook/channel-websocket/-/channel-websocket-6.0.0-alpha.0.tgz#81d10287250b76b0ab5856cb96c4827714f31875"
@@ -3944,6 +4009,15 @@
   dependencies:
     core-js "^3.0.1"
 
+"@storybook/[email protected]":
+  version "6.0.0-beta.22"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.0.0-beta.22.tgz#147f6a6db071ba818ea4cf925ca5bcac97278dcf"
+  integrity sha512-C3c5XaAalsEr1sMGpujCO7v7AVNFcBIK/Wu3ytQ9kEzYgsGHIoHP+U+ngl3W2FERQFfNZWpXVjKlaNMrYqTbiw==
+  dependencies:
+    core-js "^3.0.1"
+    ts-dedent "^1.1.1"
+    util-deprecate "^1.0.2"
+
 "@storybook/[email protected]":
   version "6.0.0-alpha.0"
   resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.0.0-alpha.0.tgz#9a6766a9878ee1f41b35debd93d480fef50506c2"
@@ -3967,20 +4041,88 @@
     ts-dedent "^1.1.0"
     util-deprecate "^1.0.2"
 
+"@storybook/[email protected]":
+  version "6.0.0-beta.22"
+  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.0.0-beta.22.tgz#f45fdfcd9f7150480585e4403bd022c57b2e21f7"
+  integrity sha512-C+AQ7QKkgKl+MXduUGMbT78VmJSoY3Ds+FY5UqYFDoV7LAtwOWVlqCcOjzNs9cpL0yDZc+d0hBV8NQ74lXPo1w==
+  dependencies:
+    "@storybook/addons" "6.0.0-beta.22"
+    "@storybook/channel-postmessage" "6.0.0-beta.22"
+    "@storybook/channels" "6.0.0-beta.22"
+    "@storybook/client-logger" "6.0.0-beta.22"
+    "@storybook/core-events" "6.0.0-beta.22"
+    "@storybook/csf" "0.0.1"
+    "@types/webpack-env" "^1.15.2"
+    core-js "^3.0.1"
+    eventemitter3 "^4.0.0"
+    global "^4.3.2"
+    is-plain-object "^3.0.0"
+    lodash "^4.17.15"
+    memoizerific "^1.11.3"
+    qs "^6.6.0"
+    stable "^0.1.8"
+    ts-dedent "^1.1.1"
+
 "@storybook/[email protected]":
   version "6.0.0-alpha.0"
   resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.0.0-alpha.0.tgz#c8dd075d5a4a78158f6acb8ace14cf0492f2af16"
   integrity sha512-qiML4TiQCFosvxlVGqDbqSy2MA7DuBPclbocliaXEnYAlHzHy5LaQ7OK2SZzigMuim7LOr/eNmqaLAIDVfAjTg==
   dependencies:
     core-js "^3.0.1"
 
+"@storybook/[email protected]":
+  version "6.0.0-beta.22"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.0.0-beta.22.tgz#038ceb35298b3fa9549b085248ed2e5efad0a56c"
+  integrity sha512-mNHJxQWdqHoo+JPnm4bUtDvkojWuAYNdoBen7Wipg98d0GiY2yDW21biW5dz1WFze57/8XNn9GsbjzS3YmkZLA==
+  dependencies:
+    core-js "^3.0.1"
+    global "^4.3.2"
+    loglevel "^1.6.7"
+
+"@storybook/[email protected]":
+  version "6.0.0-beta.22"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.0.0-beta.22.tgz#cf6e4624d1bfac373ff179a0f683da9903ab7343"
+  integrity sha512-1GGe3w/NDXTF3Upmhih3pwGheipaJymNftZgT8Vj/yHXbBimDj23PSYHbhimZXFjmgPdlVm1P3/4J7glhC9Z+w==
+  dependencies:
+    "@storybook/client-logger" "6.0.0-beta.22"
+    "@storybook/csf" "0.0.1"
+    "@storybook/theming" "6.0.0-beta.22"
+    "@types/overlayscrollbars" "^1.9.0"
+    "@types/react-color" "^3.0.1"
+    "@types/react-syntax-highlighter" "11.0.4"
+    core-js "^3.0.1"
+    fast-deep-equal "^3.1.1"
+    global "^4.3.2"
+    lodash "^4.17.15"
+    markdown-to-jsx "^6.11.4"
+    memoizerific "^1.11.3"
+    overlayscrollbars "^1.10.2"
+    overlayscrollbars-react "^0.2.1"
+    polished "^3.4.4"
+    popper.js "^1.14.7"
+    react "^16.8.3"
+    react-color "^2.17.0"
+    react-dom "^16.8.3"
+    react-helmet-async "^1.0.2"
+    react-popper-tooltip "^2.11.0"
+    react-syntax-highlighter "^12.2.1"
+    react-textarea-autosize "^8.0.1"
+    ts-dedent "^1.1.1"
+
 "@storybook/[email protected]":
   version "6.0.0-alpha.0"
   resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.0.0-alpha.0.tgz#a35d2f96f6d38aba080d7f5f1ec67799325728de"
   integrity sha512-BvJvokog7ezWg0rMIYYUA1d1Bi14hy8iZeQyD0s/Q17EMjqZb1ATQ1cPr9lVJ0CpyYOYRJp8IPbvGDnMFkm8YA==
   dependencies:
     core-js "^3.0.1"
 
+"@storybook/[email protected]":
+  version "6.0.0-beta.22"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.0.0-beta.22.tgz#9dc6df102490e5a3793b4f73b6b07cc2d8b03cb9"
+  integrity sha512-msSN0H8k49VaYa34be9m7GP+LKYQjPZYAkRYie5yJJD/NWuH4TLJvmTogjo8jrygzJYKTLb9DtlkAIfgiFRt2Q==
+  dependencies:
+    core-js "^3.0.1"
+
 "@storybook/[email protected]":
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.1.tgz#95901507dc02f0bc6f9ac8ee1983e2fc5bb98ce6"
@@ -4087,6 +4229,20 @@
     qs "^6.6.0"
     util-deprecate "^1.0.2"
 
+"@storybook/[email protected]":
+  version "6.0.0-beta.22"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.0.0-beta.22.tgz#d6fbfa39beff6b247125414a4742d7143cb8a882"
+  integrity sha512-EF/N2VfHmkqzZVnbFgiBsA2QuIStFn2J7BQM2/Li5zk2V0zEw6IyY9Z1AuJtJ/OL5F8r0YNSrfsSWh62HMCY+g==
+  dependencies:
+    "@reach/router" "^1.3.3"
+    "@storybook/csf" "0.0.1"
+    "@types/reach__router" "^1.3.5"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    lodash "^4.17.15"
+    memoizerific "^1.11.3"
+    qs "^6.6.0"
+
 "@storybook/semver@^7.3.2":
   version "7.3.2"
   resolved "https://registry.yarnpkg.com/@storybook/semver/-/semver-7.3.2.tgz#f3b9c44a1c9a0b933c04e66d0048fcf2fa10dac0"
@@ -4114,6 +4270,24 @@
     resolve-from "^5.0.0"
     ts-dedent "^1.1.0"
 
+"@storybook/[email protected]":
+  version "6.0.0-beta.22"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.0.0-beta.22.tgz#477b78fa62c4a93ceda8d9e107c4748d6ef18fe7"
+  integrity sha512-hgT0kqkq51yH1mvONM0nxEBCjflCqK/LKChax1fqM6BbHt16laasAMPICE1JZWw1ZZ0DtgjgJuogYJjCeTvX8w==
+  dependencies:
+    "@emotion/core" "^10.0.20"
+    "@emotion/is-prop-valid" "^0.8.6"
+    "@emotion/styled" "^10.0.17"
+    "@storybook/client-logger" "6.0.0-beta.22"
+    core-js "^3.0.1"
+    deep-object-diff "^1.1.0"
+    emotion-theming "^10.0.19"
+    global "^4.3.2"
+    memoizerific "^1.11.3"
+    polished "^3.4.4"
+    resolve-from "^5.0.0"
+    ts-dedent "^1.1.1"
+
 "@stroncium/procfs@^1.0.0":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@stroncium/procfs/-/procfs-1.2.1.tgz#6b9be6fd20fb0a4c20e99a8695e083c699bb2b45"