Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

addon-backgrounds doesn't affect docs-mode #7978

Closed
Couto opened this issue Sep 3, 2019 · 17 comments
Closed

addon-backgrounds doesn't affect docs-mode #7978

Couto opened this issue Sep 3, 2019 · 17 comments

Comments

@Couto
Copy link

Couto commented Sep 3, 2019

Describe the bug
addon-backgrounds only works in canvas mode, and has no effect whatsoever in docs-mode.

To Reproduce

  1. Setup storybook v5.2.0-beta/rc
  2. Add and configure addon-docs
  3. Add and configure addon-backgrounds
  4. addParameters({}) on config.js with some default backgrounds (As per the addon-backgrounds instructions)
  5. Run storybook
  6. Switch background color on canvas mode
  7. Go to docs-mode and notice that there's no way to switch the background-color and the color defined in canvas mode has no effect

Expected behavior
Preview blocks with toolbars should display a button to switch the background color of that block

Screenshots
N/A

Code snippets
N/A

System:

Environment Info:

  System:
    OS: macOS 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Binaries:
    Node: 12.4.0 - ~/.asdf/installs/nodejs/12.4.0/bin/node
    Yarn: 1.16.0 - ~/.asdf/installs/nodejs/12.4.0/.npm/bin/yarn
    npm: 6.9.0 - ~/.asdf/installs/nodejs/12.4.0/bin/npm
  Browsers:
    Safari: 12.1.2
  npmPackages:
    @storybook/addon-a11y: 5.2.0-beta.45 => 5.2.0-beta.45
    @storybook/addon-actions: 5.2.0-beta.45 => 5.2.0-beta.45
    @storybook/addon-backgrounds: 5.2.0-beta.45 => 5.2.0-beta.45
    @storybook/addon-docs: 5.2.0-beta.45 => 5.2.0-beta.45
    @storybook/addon-knobs: 5.2.0-beta.45 => 5.2.0-beta.45
    @storybook/addon-links: 5.2.0-beta.45 => 5.2.0-beta.45
    @storybook/addon-viewport: ^5.1.11 => 5.1.11
    @storybook/addons: 5.2.0-beta.45 => 5.2.0-beta.45
    @storybook/preset-typescript: ^1.1.0 => 1.1.0
    @storybook/react: 5.2.0-beta.45 => 5.2.0-beta.45

Additional context
N/A

@shilman
Copy link
Member

shilman commented Sep 3, 2019

@Couto Docs can be configured via the theming API: https://storybook.js.org/docs/configurations/theming/

Docs doesn't support currently interface with addons in the same way as the canvas, so I don't expect this to happen. There's an open issue at #6700

@Couto
Copy link
Author

Couto commented Sep 3, 2019

I might be wrong here, so please correct me if I'm wrong (which is likely) but your solution will change the entire background for docs-mode.

I expressed myself wrong on the issue, but I meant a way to only change the Preview block's background, and not the entire page.

@shilman
Copy link
Member

shilman commented Sep 3, 2019

Ok that makes more sense to me. For now, we'll do that via theming as well. Once we have figure out addon support for the Preview in #6700 then we might get backgrounds support "for free". I'll re-open this in the meantime. Thanks!

@shilman shilman reopened this Sep 3, 2019
@shilman shilman added the todo label Sep 3, 2019
@TurtleWolfe
Copy link

I just figured out how to add dark theme a few days ago and then added docs this morning.. not sure if it's related, but I have dark theme everywhere else in my storybook. But docs are just a plain white background

@shilman
Copy link
Member

shilman commented May 20, 2020

@TurtleWolf Docs are themed separately from the rest of the app as of 5.3

https://github.com/storybookjs/storybook/blob/master/addons/docs/docs/theming.md#storybook-theming

@deadcoder0904
Copy link

deadcoder0904 commented Aug 4, 2020

@shilman It isn't working for me. I want to give a background color to docs.

I have the following code:

import { addParameters } from '@storybook/react';

const themes = {
  dark: '#33354C',
};

addParameters({
  options: {
    theme: themes.dark,
  },
  backgrounds: [{ name: 'dark', value: themes.dark, default: true }],
});

I even tried directly:

import { addParameters } from '@storybook/react';

addParameters({
  options: {
    theme: '#33354C',
  },
  backgrounds: [{ name: 'dark', value: '#33354C', default: true }],
});

Am I doing anything wrong?

I get the error:

Error: Passed an incorrect argument to a color function, please pass a string representation of a color.

at parseToRgb (http://localhost:6006/vendors~main.a4321a35f2910f1804b5.bundle.js:113474:11)
at opacify (http://localhost:6006/vendors~main.a4321a35f2910f1804b5.bundle.js:114381:21)
at fn (http://localhost:6006/vendors~main.a4321a35f2910f1804b5.bundle.js:113908:42)
at convert (http://localhost:6006/vendors~main.a4321a35f2910f1804b5.bundle.js:21344:42)
at ensure (http://localhost:6006/vendors~main.a4321a35f2910f1804b5.bundle.js:21468:31)
at DocsContainer (http://localhost:6006/vendors~main.a4321a35f2910f1804b5.bundle.js:3481:35)
at renderWithHooks (http://localhost:6006/vendors~main.a4321a35f2910f1804b5.bundle.js:136067:18)
at mountIndeterminateComponent (http://localhost:6006/vendors~main.a4321a35f2910f1804b5.bundle.js:138746:13)
at beginWork (http://localhost:6006/vendors~main.a4321a35f2910f1804b5.bundle.js:139860:16)
at HTMLUnknownElement.callCallback (http://localhost:6006/vendors~main.a4321a35f2910f1804b5.bundle.js:121452:14)

@deadcoder0904
Copy link

Alright, I got it. Gotta create a theme myself as said in https://storybook.js.org/docs/configurations/theming/ :)

@deadcoder0904
Copy link

deadcoder0904 commented Aug 4, 2020

Apparently, it doesn't work for me. Not sure if I'm doing anything wrong. It's the same error:

Error: Passed an incorrect argument to a color function, please pass a string representation of a color.

Here are my files:

.storybook/main.js

module.exports = {
  stories: ['../stories/**/*.stories.(ts|tsx)'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-docs',
    '@storybook/addon-backgrounds/register',
  ],
  webpackFinal: async config => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: require.resolve('ts-loader'),
          options: {
            transpileOnly: true,
          },
        },
        {
          loader: require.resolve('react-docgen-typescript-loader'),
        },
      ],
    });

    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 { addParameters } from '@storybook/react';
import { themes } from '@storybook/theming';

addParameters({
  options: {
    theme: {
      base: themes.dark,
    },
  },
  backgrounds: [{ name: 'dark', value: themes.dark, default: true }],
});

.storybook/theme.js

import { create } from '@storybook/theming/create';
import { typography, color } from '@storybook/theming';

const theme = create({
  base: 'dark',

  // Storybook-specific color palette
  colorPrimary: '#FF4785', // coral
  colorSecondary: '#1EA7FD', // ocean

  // UI
  appBg: '#33354C',
  appContentBg: '#33354C',
  appBorderColor: '#FBDB47',
  appBorderRadius: 10,

  // Fonts
  fontBase: typography.fonts.base,
  fontCode: typography.fonts.mono,

  // Text colors
  textColor: color.lightest,
  textInverseColor: color.darkest,

  // Toolbar default and active colors
  barTextColor: '#999999',
  barSelectedColor: color.secondary,
  barBg: color.darkest,

  // Form colors
  inputBg: '#3f3f3f',
  inputBorder: 'rgba(0,0,0,.3)',
  inputTextColor: color.lightest,
  inputBorderRadius: 4,
});

export default theme;

Exactly followed the guide above so Idk what I am doing wrong? 🤔

@deadcoder0904
Copy link

Alright finally got it.

I was using preview.js wrong. Finally focused on the error till it clicked. Had to do the following:

.storybook/preview.js

import { addParameters } from '@storybook/react';
import theme from './theme';

addParameters({
  options: {
    theme,
  },
  backgrounds: [{ name: 'dark', value: '#33354C', default: true }],
});

@shilman
Copy link
Member

shilman commented Aug 14, 2020

@yannbf any chance you can contribute this for 6.1?

@yannbf
Copy link
Member

yannbf commented Aug 14, 2020

Hey @shilman I can definitely try, just gotta understand exactly what to do.

Is it so that every preview in docs uses the background defined via the backgrounds addon + bring the addon button to the docs tab?

@shilman
Copy link
Member

shilman commented Aug 14, 2020

Sounds about right. FYI we changed the name from Preview to Canvas in 6.0!

@shilman
Copy link
Member

shilman commented Sep 25, 2020

Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.16 containing PR #12368 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

@shilman shilman closed this as completed Sep 25, 2020
@angryzor
Copy link

Hi @shilman ,

Your PR fixes the problem for DocsPage generated documentation, but not for manually written MDX stories in the style described here.

The code in the PR tries to set styles on the CSS selector #anchor--${context.id} .docs-story here

This works for DocsPage since it generates Anchor components for every story.
However this pattern is not documented in the MDX guide above, and actually seems to conflict with the behaviour of the Meta tag here, which generates a single Anchor component at the top of the page for the first Story encountered (which is a bit strange tbh).

Would it be possible to make the background selection work on any story regardless of whether they are contained in an anchor?

@shilman
Copy link
Member

shilman commented Nov 13, 2020

Cc @yannbf

@laddi-netapp
Copy link

Your PR fixes the problem for DocsPage generated documentation, but not for manually written MDX stories in the style described here.

I can confirm that I'm having the exact same problem. Works fine for CSF stories, not for MDX stories...

@aharris
Copy link

aharris commented Mar 23, 2021

Having the same issue here with it not working in MDX. Can (should) this issue be reopened?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

8 participants