storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
83.94k stars 9.21k forks source link

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

Open PrinceJohn opened 3 months ago

PrinceJohn commented 3 months ago

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

shilman commented 2 months ago

@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