Ability to rename Knobs / Actions Tab-Titles

[psi-4ward]

Would be cool to have the ability to use own title for Knobs and Actions tabs to make it more consistent with other frameworks like Vue: Props and Events.

If I look at the code it's hopefully not to difficult.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[Utzel-Butzel]

Hi psi-4ward, you can rename the Tab title by acessing the addons object in your config.

import addons from '@storybook/addons';

addons.elements.panel['storybookjs/knobs/panel'].title = 'Props';
addons.elements.panel['storybook/actions/panel'].title = 'Event';

[aviraminy]

Hi psi-4ward, you can rename the Tab title by acessing the addons object in your config.

import addons from '@storybook/addons';

addons.elements.panel['storybookjs/knobs/panel'].title = 'Props';
addons.elements.panel['storybook/actions/panel'].title = 'Event';

actually this doesn't work for me at all i get an empty addons.elements object.
It seems to me that the addon register is delayed and that is why it isn't adding the element yet during the configure phase.

PS - i am using storybook v5.2.1

[diamond-darrell]

Hi psi-4ward, you can rename the Tab title by acessing the addons object in your config.

import addons from '@storybook/addons';

addons.elements.panel['storybookjs/knobs/panel'].title = 'Props';
addons.elements.panel['storybook/actions/panel'].title = 'Event';

actually this doesn't work for me at all i get an empty addons.elements object.
It seems to me that the addon register is delayed and that is why it isn't adding the element yet during the configure phase.

PS - i am using storybook v5.2.1

wrapping assignment in setTimeout worked out for me

[mboudriga]

Hi psi-4ward, you can rename the Tab title by acessing the addons object in your config.

import addons from '@storybook/addons';

addons.elements.panel['storybookjs/knobs/panel'].title = 'Props';
addons.elements.panel['storybook/actions/panel'].title = 'Event';

actually this doesn't work for me at all i get an empty addons.elements object.
It seems to me that the addon register is delayed and that is why it isn't adding the element yet during the configure phase.
PS - i am using storybook v5.2.1

wrapping assignment in setTimeout worked out for me

This didn't work for me from the config.js file but did work from the addons.js file

import addons from "@storybook/addons";

setTimeout(function() {
  addons.elements.panel["storybookjs/knobs/panel"].title = "Props";
  addons.elements.panel["storybook/actions/panel"].title = "Events";
}, 0);

[aviraminy]

This is not such a good workaround and relies on runtime, i wish there was a proper config for this.

[diamond-darrell]

Hi psi-4ward, you can rename the Tab title by acessing the addons object in your config.

import addons from '@storybook/addons';

addons.elements.panel['storybookjs/knobs/panel'].title = 'Props';
addons.elements.panel['storybook/actions/panel'].title = 'Event';

actually this doesn't work for me at all i get an empty addons.elements object.
It seems to me that the addon register is delayed and that is why it isn't adding the element yet during the configure phase.
PS - i am using storybook v5.2.1

wrapping assignment in setTimeout worked out for me

This didn't work for me from the config.js file but did work from the addons.js file

import addons from "@storybook/addons";

setTimeout(function() {
  addons.elements.panel["storybookjs/knobs/panel"].title = "Props";
  addons.elements.panel["storybook/actions/panel"].title = "Events";
}, 0);

yes, I'm sorry, I should've mentioned it, I did this in the addons.js file as well as you are

[StanCreuna]

Is there a way to rename Addons like Controls/Actions in new Storybook?

[shilman]

@StanCreuna .storybook/addons.js has been renamed to .storybook/manager.js. The method above is not "officially supported" but you could give it a try in manager.js and I bet it would "just work."

[curtgrimes]

In recent versions of Storybook (I am on 6.5 alpha 48 currently) the workaround for changing the addon title changes slightly because the elements property is private.

This changes the Storysource addon's title to "Raw Source":

// in manager.js
setTimeout(() => {
    const sourceLoaderAddon = addons.getElements(types.PANEL)['storybook/source-loader/panel'];
    if (sourceLoaderAddon) {
        sourceLoaderAddon.title = 'Raw Source';
    }
}, 0);

[levaigabor]

@curtgrimes I just came across this problem, maybe you are looking for smth like this (from this PR #9095)?

   addon_id: string: {
    title?: string; // new title for the addon tab
    index?: number; // override the place/order of the tabs (by default the change uses the order of the addon_id keys but index can be used to override in the story parameyters
    hidden?: boolean; // wether to hide the addon tab
    disabled?: boolean; // wether to disable the addon tab
  }
}

[sag1v]

@levaigabor This doesn't seems to work, the only way that seems to work is the "workaround" suggested above.
(storybook v7)

In my case (trying to hide/remove a tab) i can't even use the suggested workaround, seems like the hidden property is ignored.

This is the only (ugly) way i managed to remove/hide a tab:

// .storybook/manager.js

setTimeout(() => {
  // removes the 'Code' tab from the panel
  const {
    ['storybook/source-loader/panel']: sourceTab,
    ...restOfTabs
  } = addons.elements.panel;
  addons.elements.panel = restOfTabs;
}, 0);