Merge pull request #23677 from vmizg/fix-toc-heading-leak

Addon-docs: Fix Table of Contents heading leak (cherry picked from commit 17e7244)
storybookjs · Feb 19, 2024 · e57ff91 · e57ff91
1 parent 8ed55cb
commit e57ff91
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 12 deletions.
diff --git a/code/ui/blocks/src/components/TableOfContents.tsx b/code/ui/blocks/src/components/TableOfContents.tsx
@@ -142,14 +142,13 @@ export const TableOfContents = ({
       tocSelector: '.toc-wrapper',
       contentSelector: contentsSelector ?? '.sbdocs-content',
       headingSelector: headingSelector ?? 'h3',
-      ignoreSelector: ignoreSelector ?? '.skip-toc',
-      headingsOffset: 40,
-      scrollSmoothOffset: -40,
       /**
        * Ignore headings that did not
        * come from the main markdown code.
        */
-      // ignoreSelector: ':not(.sbdocs), .hide-from-toc',
+      ignoreSelector: ignoreSelector ?? '.docs-story *, .skip-toc',
+      headingsOffset: 40,
+      scrollSmoothOffset: -40,
       orderedList: false,
       /**
        * Prevent default linking behavior,

diff --git a/docs/writing-docs/autodocs.md b/docs/writing-docs/autodocs.md
@@ -133,14 +133,14 @@ Storybook's auto-generated documentation pages can be quite long and difficult t
 
 By default, the table of contents on the documentation page will only show the `h3` headings that are automatically generated. However, if you want to customize the table of contents, you can add more parameters to the `toc` property. The following options and examples of how to use them are available.
 
-| Option                | Description                                                                                                                                          |
-| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `contentsSelector`    | Defines the container's CSS selector for search for the headings <br/> `toc: { contentsSelector: '.sbdocs-content' }`                                |
-| `disable`             | Hides the table of contents for the documentation pages <br/> `toc: { disable: true }`                                                               |
-| `headingSelector`     | Defines the list of headings to feature in the table of contents <br/> `toc: { headingSelector: 'h1, h2, h3' }`                                      |
-| `ignoreSelector`      | Configures the table of contents to ignore specific headings or stories <br/> `toc: { ignoreSelector: 'h2' }`                                        |
-| `title`               | Defines a title caption for the table of contents. <br/>Accepts one of: `string`, `null`, React element <br/> `toc: { title: 'Table of Contents' }`  |
-| `unsafeTocbotOptions` | Provides additional [`TocBot`](https://tscanlin.github.io/tocbot/) configuration options <br/> `toc: { unsafeTocbotOptions: { orderedList: true } }` |
+| Option                | Description                                                                                                                                                                                                     |
+| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `contentsSelector`    | Defines the container's CSS selector for search for the headings <br/> `toc: { contentsSelector: '.sbdocs-content' }`                                                                                           |
+| `disable`             | Hides the table of contents for the documentation pages <br/> `toc: { disable: true }`                                                                                                                          |
+| `headingSelector`     | Defines the list of headings to feature in the table of contents <br/> `toc: { headingSelector: 'h1, h2, h3' }`                                                                                                 |
+| `ignoreSelector`      | Configures the table of contents to ignore specific headings or stories. By default, the table of contents will ignore all content placed within Story blocks <br/> `toc: { ignoreSelector: '.docs-story h2' }` |
+| `title`               | Defines a title caption for the table of contents. <br/>Accepts one of: `string`, `null`, React element <br/> `toc: { title: 'Table of Contents' }`                                                             |
+| `unsafeTocbotOptions` | Provides additional [`TocBot`](https://tscanlin.github.io/tocbot/) configuration options <br/> `toc: { unsafeTocbotOptions: { orderedList: true } }`                                                            |
 
 <Callout variant="info">