storybook: Controls is not visible/shown in canvas/addons (only in docs)
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:
- Go to https://everdevs.github.io/design-system/?path=/story/design-system-atoms-button--with-label
- Controls-tab is not visible
- Go to https://everdevs.github.io/design-system/?path=/docs/design-system-atoms-button--with-label
- 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
About this issue
- Original URL
- State: open
- Created 4 years ago
- Reactions: 6
- Comments: 32 (6 by maintainers)
Commits related to this issue
- adjusted faq to address issue #12481 — committed to storybookjs/storybook by jonniebigodes 4 years ago
- Merge pull request #12776 from storybookjs/fix_issue_12481 Chore: Docs updates for issue #12481 — committed to storybookjs/storybook by jonniebigodes 4 years ago
- Merge pull request #12776 from storybookjs/fix_issue_12481 Chore: Docs updates for issue #12481 — committed to storybookjs/storybook by jonniebigodes 4 years ago
What solved it for me was to:
Akeyboard shortcut or by using the dropdown menu next to the storybook logoDkeyboard shortcut or by using the dropdown menu next to the storybook logoAfter toggling the panel position twice the panel appeared at the bottom and stayed there.
None of the controls docs nor this issue mentions the shortcut <kbd>A</kbd> to hide and show the panels as mentioned here. Even starting storybook (
v6.3.2) fresh or refreshing the browser does not restore the defaultshowPanelvalue 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 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.
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
After upgrading to 7.0 beta, controls disappeared.
That option was already checked… so I clicked “change addons orientation” and it finally appeared. 👀
Having same issue. Controls not showing. They work in Edge but not in Chrome
This section of the docs assumes that you’ve installed
addon-essentials. If you want to install it manually you need to addaddon-controlsto your dependencies and to yourmain.jsconfiguration.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)
It worked on me 👍
Wasted multiple hours on this thinking that
argTypeswas broken since I could only see controls inDocs(and apparently that is broken on Ember).Found this thread, toggled orientation and the controls suddenly appeared… 🤦
@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.
@olegKusov does pressing <kbd>a</kbd> toggle the controls panel to show?
Upgraded to 6.5.8 -> no fix.
Changed configuration -> i can finally work now
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.
@MichaelArestad can we show some UI when the addons panel is hidden, similar to what we did for the sidebar in https://github.com/storybookjs/storybook/pull/15369
@nickofthyme on it https://github.com/storybookjs/storybook/issues/13646 cc @MichaelArestad
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.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.
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.
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.
@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)