Controls is not visible/shown in canvas/addons (only in docs)

[pixelass]

Describe the bug
I added controls to my story but it only shows in the docs tab not on the canvas/addons

To Reproduce
Steps to reproduce the behavior:

1. Go to https://everdevs.github.io/design-system/?path=/story/design-system-atoms-button--with-label
2. Controls-tab is not visible
3. Go to https://everdevs.github.io/design-system/?path=/docs/design-system-atoms-button--with-label
4. Controls are visible

Expected behavior
As a user I expect the controls tab to be visible after following this guide

Screenshots

canvas

docs

Code snippets

STORY

import { Meta, Story } from "@storybook/react";
import React from "react";
import { Button } from "../src";

const Template: Story = args => {
	return <Button {...args} />;
};

export const WithLabel = Template.bind({});

WithLabel.args = {
	children: "I am a Button",
};

const story: Meta = {
	component: Button,
	title: "Design System/Atoms/Button",
	argTypes: {
		children: { control: "text" },
		variation: { control: "select" },
		size: { control: "select" },
		theme: { control: false },
	},
};

export default story;

CONFIG

.storybook/main.js

module.exports = {
	stories: ["../**/stories/*.stories.@(tsx|mdx)"],
	addons: [
		"@storybook/addon-a11y",
		"@storybook/addon-backgrounds",
		"@storybook/addon-jest",
		"@storybook/addon-docs",
	],
	webpackFinal: async config => {
		config.module.rules.push({
			test: /\.(ts|tsx)$/,
			use: [
				{
					loader: require.resolve("babel-loader"),
					options: {
						presets: [
							"@babel/preset-env",
							"@babel/preset-typescript",
							"@babel/preset-react",
						],
					},
				},
				{
					loader: require.resolve("react-docgen-typescript-loader"),
					options: {
						// Provide the path to your tsconfig.json so that your stories can
						// display types from outside each individual story.
						tsconfigPath: path.resolve(__dirname, "../tsconfig.json"),
					},
				},
			],
		});
		config.resolve.extensions.push(".ts", ".tsx");
		return config;
	},
};

.storybook/manager.js

import { addons } from "@storybook/addons";
import theme from "./theme";

addons.setConfig({
	theme,
});

.storybook/preview.js

import { addDecorator, addParameters } from "@storybook/react";
import { withA11y } from "@storybook/addon-a11y";

const backgrounds = {
	default: "light",
	values: [
		{
			name: "light",
			value: "#dedede",
		},
		{
			name: "dark",
			value: "#232323",
		},
	],
};

const a11y = {
	element: "#root *",
};

addParameters({
	backgrounds,
	a11y,
});

addDecorator(withA11y);

.storybook/theme.js

import { create } from "@storybook/theming/create";

export default create({
/* theme definitions */
});

System:

Environment Info:

  System:
    OS: macOS 10.15.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 12.18.0 - ~/.nvm/versions/node/v12.18.0/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v12.18.0/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.18.0/bin/npm
  Browsers:
    Chrome: 85.0.4183.102
    Safari: 13.1.1
  npmPackages:
    @storybook/addon-a11y: ^6.0.21 => 6.0.21 
    @storybook/addon-actions: ^6.0.21 => 6.0.21 
    @storybook/addon-backgrounds: ^6.0.21 => 6.0.21 
    @storybook/addon-docs: ^6.1.0-alpha.9 => 6.1.0-alpha.9 
    @storybook/addon-info: ^5.3.21 => 5.3.21 
    @storybook/addon-jest: ^6.0.21 => 6.0.21 
    @storybook/addon-knobs: ^6.0.21 => 6.0.21 
    @storybook/addon-links: ^6.0.21 => 6.0.21 
    @storybook/addon-viewport: ^6.0.21 => 6.0.21 
    @storybook/addons: ^6.0.21 => 6.0.21 
    @storybook/cli: ^6.0.21 => 6.0.21 
    @storybook/preset-typescript: ^3.0.0 => 3.0.0 
    @storybook/react: ^6.0.21 => 6.0.21 
    @storybook/theming: ^6.0.21 => 6.0.21 

Additional context

[shilman]

This section of the docs assumes that you've installed addon-essentials. If you want to install it manually you need to add addon-controls to your dependencies and to your main.js configuration.

[jonniebigodes]

@pixelass sorry for taking a bit more time. I've just merged a pull request to address the issue. Going to close this if you don't mind. If further developments arise. Leave a comment here and reopen the issue and we'll continue on working the issue.

Stay safe

[pixelass]

@jonniebigodes thanks for the help so far. I'll check it out.

[Aid19801]

Hey love Storybook. Much love.

Buuuuuut... It's March 2021 and i've hit the same issue^^ 😂 I feel like it should state clearly in the controls documentation that you need to adjust config to use this feature, or update, or "If you cannot see the controls panel, make sure you have upgraded to the latest version of Storybook / installed 'essentials' etc "

Happy to raise a PR if you have a link to the docs or something. x

[pixelass]

@Aid19801
Edit here: https://github.com/storybookjs/storybook/blob/next/docs/essentials/controls.md
(via https://storybook.js.org/docs/react/essentials/controls link on the bottom of the page)

[nickofthyme]

None of the controls docs nor this issue mentions the shortcut A to hide and show the panels as mentioned here. Even starting storybook (v6.3.2) fresh or refreshing the browser does not restore the default showPanel value as it was done in previous versions (i.e. ~5.0.0). Can there be a toggle in the UI for this because this is super frustrating wasting hours to find why the panels are not visible.

cc: @shilman

[shilman]

@nickofthyme on it #13646 cc @MichaelArestad

[olegKusov]

Having same issue. Controls not showing. They work in Edge but not in Chrome

[nickofthyme]

@olegKusov does pressing a toggle the controls panel to show?

[dsasko]

What solved it for me was to:

1. make sure the addons panel is turned on either by using the A keyboard shortcut or by using the dropdown menu next to the storybook logo
2. toggle the position of the addons panel either by using the D keyboard shortcut or by using the dropdown menu next to the storybook logo

After toggling the panel position twice the panel appeared at the bottom and stayed there.

[dav1app]

• Says "Develop durable UIs in edge cases."
• This. 🤡

Sorry for the edgy joke, but this illustrates my whole experience with this. Installing and enabling it to work was almost unbearable. I spent exactly 6h14 trying to fix a mismatch version over one of my systems. Lots of bad error messages, lots of webpack problems, lots of dependency issues.

[hspaay]

I had the same issue that the Actions/Controls area never shows up. After toggling 'change addon orientation' the actions and controls tab shows up again.

The issue can be reproduced by reducing the storybook window height (resize browser window) to the point where there is no remaining space in the Canvas/Docs tab. At this point the Actions/Controls area disappears. If the Action/Controls area is large to begin with it doesn't take much resizing to make this happen.

I speculate that the internal persisted height of the Actions/Control area is too large to begin with (or maybe 0) causing it never to show up.

@jonniebigodes Maybe reopen this issue as the problem still exists and it is now reproducible. (assuming this is the same issue)

[MichaelArestad]

None of the controls docs nor this issue mentions the shortcut A to hide and show the panels as mentioned here. Even starting storybook (v6.3.2) fresh or refreshing the browser does not restore the default showPanel value as it was done in previous versions (i.e. ~5.0.0). Can there be a toggle in the UI for this because this is super frustrating wasting hours to find why the panels are not visible.

cc: @shilman

I think there is a likely more durable solution where we add a minimum height to the panel so that it can never completely disappear. I occasionally encounter this when working with the panel and dev tools.

[vegemite4me]

@dsasko's post was very helpful. It seems that something happened (a height change?), and the controls were made to hide, but adjusting the height again did not restore the controls. Maybe I missed it, but I could not see any indicator/icon to show that the controls were hidden.

But great product, and I am enjoying using it.

[nedredmond]

Great product, but there needs to be a UI button equivalent of pressing "a" so that I don't have to Google for this issue every time my controls vanish.

[lougreenwood]

Wasted multiple hours on this thinking that argTypes was broken since I could only see controls in Docs (and apparently that is broken on Ember).

Found this thread, toggled orientation and the controls suddenly appeared... 🤦

[shilman]

@MichaelArestad can we show some UI when the addons panel is hidden, similar to what we did for the sidebar in #15369

[lougreenwood]

@shilman maybe this issue could be re-opened until something like what you suggested is implemented?

[MalikBagwala]

What solved it for me was to:

1. make sure the addons panel is turned on either by using the A keyboard shortcut or by using the dropdown menu next to the storybook logo
2. toggle the position of the addons panel either by using the D keyboard shortcut or by using the dropdown menu next to the storybook logo

After toggling the panel position twice the panel appeared at the bottom and stayed there.

Terrible UX for such basic features. But thanks to your answer this is what worked for me as well 👍🏼

[krzysztofradomski]

I run into this issue today, on macOS and latest Chrome. I solved it by opening the devtools and deleting the storybook related local storage entries.

[sir-captainmorgan21]

@krzysztofradomski cant believe this was it haha. Same exact thing for me. Clearing localStorage did the trick

[alanrodriguezdotme]

Is there a way to just define the behavior of the controls and override the localStorage values? I'd like to be able to define whether it's show, position, and size of the panel for each story.

[xorinzor]

@krzysztofradomski that fixed it for me too, I guess it was resized to a position that it couldn't be restored after a page refresh. Perhaps a bug?

[giniedp]

Had the same problem. Cleared local storage entries -> fixed.

Now upgraded to 6.5.7 and the addons are gone again. Hotkeys do work, but toolbar does not show addon controls. Clearing local storage does not bring addons back.

[giniedp]

Upgraded to 6.5.8 -> no fix.

Changed configuration -> i can finally work now

  addons: [
+    '@storybook/addon-viewport',
+    '@storybook/addon-controls',
+    '@storybook/addon-outline',
-    {
-      name: '@storybook/addon-essentials',
-      options: {
-        docs: false,
-        background: false,
-        actions: false,
-        controls: true,
-      },
-    },
  ],

[gaurav5430]

facing a similar issue on 6.4.20

In the canvas tab, the addons panel is visible, but the controls panel is not visible
the controls are visible in docs though

[RBurrage]

For me, using the dropdown next to the Storybook logo and choosing 'Show addons' worked, but it placed the panel on the right side of the screen. In the menu at the top of that panel, there's an option to place it across the bottom of the screen -- the same way you can relocate browser dev tools. Now I'm seeing the Actions, Interactions and Controls just fine in Chrome, Firefox and Edge.

[alexgleason]

After upgrading to 7.0 beta, controls disappeared.

using the dropdown next to the Storybook logo and choosing 'Show addons' worked, but it placed the panel on the right side of the screen.

That option was already checked... so I clicked "change addons orientation" and it finally appeared. 👀

[dkilgore-eightfold]

The browser height also causes these to disappear. Perhaps that should not happen? :)

[onurhan1337]

I run into this issue today, on macOS and latest Chrome. I solved it by opening the devtools and deleting the storybook related local storage entries.

It worked on me 👍

[paddotk]

This is an interesting bug. I'm not sure how to reproduce this, but I'll describe Storybook's behavior to hopefully give a little more insight. I'm using Storybook 7.5.2.
I think I intially removed the panel on a docs (.mdx) page by clicking the x button. A bit later I noticed I was missing it everywhere, including story pages, so I was trying to get it back. I discovered the icon (top right) for this earlier but now that wasn't there. No way to get the panel back.
After reading the comments here, I tried using the shortcut 'a' which toggled the toggle icon, but not the panel. After reading on I saw that there's the shortcut 'd' as well and that fixed it. Now I can close it and bring it back without shortcuts, i.e. the bug doesn't present itself anymore.

I should add that I restarted storybook multiple times in between closing it intially and trying to get it back.

[XavierChevalier]

Yes, it's a bug still present in v7.6.10.

To fix it, go to the browser Developer Tools > Application > Clear site data, and then refresh the page. The Controls panel should appear again.