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-docs: Fix Table of Contents heading leak #23677

Merged
merged 5 commits into from Feb 19, 2024

Conversation

vmizg
Copy link
Contributor

@vmizg vmizg commented Aug 2, 2023

Closes #23541

What I did

Exclude all content from Story blocks from being indexed by the Table of Contents (TOC) component by default. The user can still override the ignoreSelector to adjust this behaviour.

IMO, the default headingSelector should be h2, h3 instead of just h3, but this is not in the scope of this fix. Worth considering?

How to test

  1. Set up the following TOC config in the sandbox/.storybook/preview.ts file:
    import type { Preview } from '@storybook/react';
    
    const preview: Preview = {
      parameters: {
        ...
        docs: {
          toc: {
            disable: false,
            headingSelector: 'h1, h2, h3',
          },
        },
      },
    };
    
    export default preview;
  2. Run the default sandbox, yarn start
  3. Open Storybook in your browser
  4. Go to the Header Docs page
  5. See that the Acme headings from the sample component do not bleed into the generated Table of Contents

To test the previous behaviour, do the same thing and note the difference in Table of Contents.

Checklist

  • Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
  • Make sure to add/update documentation regarding your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD (N/A)

Maintainers

  • When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts
  • Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "build", "documentation", "maintenance", "dependencies", "other"]

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

/**
* Ignore headings that did not
* come from the main markdown code.
*/
// ignoreSelector: ':not(.sbdocs), .hide-from-toc',
ignoreSelector: ignoreSelector ?? '.docs-story *, .skip-toc',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shilman — This approach seems sound to me, but you're the one who left the commented-out version to seemingly accomplish the same thing, so thought you'd like to chime in.

Copy link
Contributor

@JReinhold JReinhold left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great, thanks!

@cdedreuille
Copy link
Contributor

cdedreuille commented Feb 19, 2024

What's the status on this one @JReinhold @shilman? Any reason why this is not merged?

@shilman shilman changed the title Fix: Table of Contents heading leak Addon-docs: Fix Table of Contents heading leak Feb 19, 2024
@shilman shilman added the patch:yes Bugfix & documentation PR that need to be picked to main branch label Feb 19, 2024
@shilman shilman merged commit 17e7244 into storybookjs:next Feb 19, 2024
52 of 55 checks passed
storybook-bot pushed a commit that referenced this pull request Feb 19, 2024
Addon-docs: Fix Table of Contents heading leak
(cherry picked from commit 17e7244)
storybook-bot pushed a commit that referenced this pull request Feb 19, 2024
Addon-docs: Fix Table of Contents heading leak
(cherry picked from commit 17e7244)
storybook-bot pushed a commit that referenced this pull request Feb 19, 2024
Addon-docs: Fix Table of Contents heading leak
(cherry picked from commit 17e7244)
storybook-bot pushed a commit that referenced this pull request Feb 19, 2024
Addon-docs: Fix Table of Contents heading leak
(cherry picked from commit 17e7244)
storybook-bot pushed a commit that referenced this pull request Feb 19, 2024
Addon-docs: Fix Table of Contents heading leak
(cherry picked from commit 17e7244)
storybook-bot pushed a commit that referenced this pull request Feb 19, 2024
Addon-docs: Fix Table of Contents heading leak
(cherry picked from commit 17e7244)
@github-actions github-actions bot added the patch:done Patch/release PRs already cherry-picked to main/release branch label Feb 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
addon: docs bug ci:normal patch:done Patch/release PRs already cherry-picked to main/release branch patch:yes Bugfix & documentation PR that need to be picked to main branch
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: 7.1 Stories are leaking headers into table of contents
8 participants