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

[Bug]: Backgrounds no longer working with Angular and MDX #27709

Open
PrinceJohn opened this issue Jun 5, 2024 · 1 comment
Open

[Bug]: Backgrounds no longer working with Angular and MDX #27709

PrinceJohn opened this issue Jun 5, 2024 · 1 comment

Comments

@PrinceJohn
Copy link

Describe the bug

Custom backgrounds set via the parameters object of a story does not apply to stories that are written in the MDX format. This was previously working in Storybook 7, but in Storybook 8 backgrounds only applies to canvas and auto docs pages.

Example code:

export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
  },
  parameters: {
    backgrounds: {
      default: 'black',
      values: [{ name: 'black', value: '#000' }],
    },
  },
};

Reproduction link

https://stackblitz.com/edit/github-5tcfvt?file=src%2Fstories%2Fbutton.mdx

Reproduction steps

  1. Go to the above link
  2. Go to the Button -> Docs page
  3. Inspect the background of the story with the heading "Canvas with custom background" (it is white, but is expected to be black)
  4. Go the Button -> Primary page (the background of this page is rendered correctly)

System

Storybook Environment Info:

  System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm <----- active
  npmPackages:
    @storybook/addon-a11y: ^8.0.2 => 8.1.5 
    @storybook/addon-essentials: ^8.0.2 => 8.1.5 
    @storybook/addon-links: ^8.0.2 => 8.1.5 
    @storybook/addon-mdx-gfm: ^8.0.2 => 8.1.5 
    @storybook/angular: ^8.0.2 => 8.1.5 
    @storybook/blocks: ^8.0.2 => 8.1.5 
    @storybook/core-server: ^8.0.2 => 8.1.5 
    @storybook/manager-api: ^8.0.2 => 8.1.5 
    @storybook/theming: ^8.0.2 => 8.1.5 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0

Additional context

No response

@PrinceJohn PrinceJohn changed the title [Bug]: Backgrounds not working with Angular and MDX [Bug]: Backgrounds no longer working with Angular and MDX Jun 11, 2024
@shilman
Copy link
Member

shilman commented Jun 14, 2024

@PrinceJohn Thanks for reporting! As a workaround you can add the following to Button.stories.ts:

const meta: Meta<ButtonComponent> = {
  title: 'Example/Button',
  component: ButtonComponent,
+  parameters: { docs: { story: { inline: false } } },
  ...
}

This iframes the stories, which has its own set of tradeoffs. We are working on a real fix as part of #26654

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Empathy Backlog
Development

No branches or pull requests

2 participants