[Bug]: TableOfContents doesnt take custom options from .mdx Meta component

[kasparsuvi1]

Describe the bug

When setting parameters.docs.toc.headingSelectors in button.stories.tsx, it gets custom TOC settings for this component. example (stories/button.stories.tsx in example):

export default {
  title: 'components/component',
  component: Component,
  parameters: {
    docs: { toc: { headingSelector: 'h1, h2' } },
  }
} as Meta;

But when setting the same way in changelog.mdx stories file, then it doesn't apply for TOC. (Look under documentation/changelog from example)

import { Meta } from '@storybook/blocks';
import { Markdown } from '@storybook/addon-docs';
import ChangelogMDX from '../../../../CHANGELOG.md?raw';

<Meta name="Changelog" title="Documentation/Changelog" parameters={{ docs: { toc: { headingSelector: 'h1, h2' } } }} />

# Changelog

<Markdown>{ChangelogMDX}</Markdown>

But according to the documentation this should work.

To Reproduce

https://stackblitz.com/edit/github-gmbd6l?file=CHANGELOG.md

System

Storybook Environment Info:
(node:72459) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)

  System:
    OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD Ryzen 7 PRO 4750U with Radeon Graphics
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 21.6.1 - ~/.nvm/versions/node/v21.6.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v21.6.1/bin/yarn
    npm: 10.5.0 - ~/work-wsl/tehik-react-components/node_modules/.bin/npm <----- active
    pnpm: 8.3.1 - ~/.nvm/versions/node/v21.6.1/bin/pnpm
  Browsers:
    Chrome: 113.0.5672.92
  npmPackages:
    @storybook/addon-a11y: ^8.0.0 => 8.0.0 
    @storybook/addon-docs: ^8.0.0 => 8.0.0 
    @storybook/addon-essentials: ^8.0.0 => 8.0.0 
    @storybook/addon-mdx-gfm: ^8.0.0 => 8.0.0 
    @storybook/blocks: ^8.0.0 => 8.0.0 
    @storybook/builder-vite: ^8.0.0 => 8.0.0 
    @storybook/core-server: ^8.0.0 => 8.0.0 
    @storybook/manager-api: ^8.0.0 => 8.0.0 
    @storybook/preview-api: ^8.0.0 => 8.0.0 
    @storybook/react: ^8.0.0 => 8.0.0 
    @storybook/react-vite: ^8.0.0 => 8.0.0 
    @storybook/theming: ^8.0.0 => 8.0.0 
    eslint-plugin-storybook: ^0.6.12 => 0.6.15 
    storybook: ^8.0.0 => 8.0.0

Additional context

No response

[vanessayuenn]

@shilman was this supposed to work? if not, i think we should update the docs.

[shilman]

This worked prior to the v7 changes. I'll delete the docs.

[kasparsuvi1]

Sorry did not understand should it work or it is not meant to work this way? When not, is there any good solutions to not show toc for .mdx stories?

[Merri]

My workaround for disabling TOC currently is to have this global CSS:

.sbdocs-wrapper:has(#disable-toc) > .sbdocs + div {
  display: none;
}

And then have <Unstyled id="disable-toc"> as I'm wrapping all pages with Unstyled.

But I would greatly prefer that <Meta title="" parameters={{ docs: { toc: false } }} /> would work.

And this of course does not help anyone who wants to control the heading selectors.

[alexrigby]

I am also facing a similar issue, except unfortunately I can only define the TOC config globally. When I try an configure the TOC in Meta in the .mdx docs file or in the .tsx story file it is like the config is ignored and all pages use the default TOC config 🤔 .

So for Accordion (bellow) the TOC is still generated even though it is set to false. And if I try any other configuration it is still not picked up by the Accordion component.

preview.tsx;

const preview: Preview = {
    parameters: { 
        docs: {
            toc: {
                headingSelector: 'h3, h4',
                ignoreSelector: '.docs-story *',
            },
        },
    },
};

export default preview;

Accordion.stories.tsx;

const meta = {
    title: 'Components/Accordion',
    component: Accordion,
    parameters: {
        docs: {
            toc: false
        },
    },
}satisfies Meta<typeof Accordion>;

export default meta;

[iyinchao]

Experiencing the same issue when I upgraded to v8.

@vanessayuenn @shilman I think this feature (override docs plugin parameters in .MDX files) suppose to work because the .MDX file may have different options from story files, like TOC heading selectors. Or is there any alternative way to achieve this?