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]: 7.1 Table of Contents active heading highlight broken #23584

Open
vmizgiris-equinix opened this issue Jul 25, 2023 · 5 comments
Open

[Bug]: 7.1 Table of Contents active heading highlight broken #23584

vmizgiris-equinix opened this issue Jul 25, 2023 · 5 comments

Comments

@vmizgiris-equinix
Copy link

Describe the bug

When there are subheadings (H3) with the same name under different headings (H2), the highlighting becomes broken, and only subheadings from the first H2 group get highlighted in the TOC as you scroll through the page.

To Reproduce

  1. Create a documentation page of a similar format:
## Button

### Properties

Lorem ipsum

### Slots

Lorem ipsum

### Events

Lorem ipsum

## Input

### Properties

Lorem ipsum

### Slots

Lorem ipsum

### Events

Lorem ipsum

## Tooltip

### Properties

Lorem ipsum

### Slots

Lorem ipsum

### Events

Lorem ipsum
  1. Add to a Storybook instance and enable TOC
  2. Observe TOC links becoming active, only links from the first group "Button" will be highlighted as you scroll past "Input" and "Tooltip"

System

System:
    OS: macOS 13.4.1
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
  Binaries:
    Node: 16.18.1 - ~/Library/Caches/fnm_multishells/66230_1690247671085/bin/node
    npm: 9.7.1 - ~/Library/Caches/fnm_multishells/66230_1690247671085/bin/npm
  Browsers:
    Chrome: 115.0.5790.102
    Edge: 114.0.1823.67
    Safari: 16.5.2
  npmPackages:
    @storybook/addon-a11y: ^7.1.0 => 7.1.0 
    @storybook/addon-essentials: ^7.1.0 => 7.1.0 
    @storybook/addon-links: ^7.1.0 => 7.1.0 
    @storybook/addons: ^7.1.0 => 7.1.0
    @storybook/theming: ^7.1.0 => 7.1.0 
    @storybook/web-components: ^7.1.0 => 7.1.0 
    @storybook/web-components-webpack5: ^7.1.0 => 7.1.0

Additional context

No response

@bijumuhammad
Copy link

Hi,id like to help out as this would be a great starting point,though im facing issues while setting up this in local to reproduce the issue, im trying to troubleshoot that,Thank you

@Ihor-Lavrov
Copy link

Hi,id like to help out as this would be a great starting point,though im facing issues while setting up this in local to reproduce the issue, im trying to troubleshoot that,Thank you

Hey, how are you doing? Any upd so far?

@bijumuhammad
Copy link

Yeah, sorry for the delay will give an update this weekend itself

@divyansh21jain
Copy link

@Ihor-Lavrov Please correct me if I am wrong, what i understood is the problem is that only subheadings from the first H2 group are getting highlighted in the TOC as you scroll through the page, right?

To fix this issue, i guess we need to ensure that each subheading (H3) has a unique anchor link assigned to it, even if they have the same name under different H2 headings. One way to achieve this is by appending some unique identifier (e.g., a slug or numerical value) to the anchor link of each subheading.

Hope this might help. Happy to contribute!

@bangank36
Copy link

bangank36 commented Aug 8, 2023

@vmizgiris-equinix Could you provide more info to reproduce the bug?
I tried to run the example on this folder /toc, and the toc is scrolled correctly
chrome-capture-2023-7-7
I can't enable the table of content for mdx stories to test, could you advice? Thanks 🙇


Update

I managed to test the toc against the given markdown, the reported issue can not be reproduced as I still can see the highlighting works as expected like in the video
chrome-capture-2023-7-8
Though I can see the issue where the TOC is too long and can not be scrolled, as reported here #23542

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants