fix(table-of-contents): ensure anchor is visible upon jump-to-content #4297
Conversation
Introduces `bx--tableofcontents__contents` CSS class that ensures `<a name="anchorname">` is visible upon getting scroll to by selection of an item in `<dds-table-of-contents>`. Refs carbon-design-system#4264.
asudoh
added
the
package: web components
|
Deploy preview created for package Built with commit: 65c4ba75b4063473dfb440a143b9f7c5d658032d |
|
Deploy preview created for package Built with commit: 65c4ba75b4063473dfb440a143b9f7c5d658032d |
| <a name="3" data-title="Section - 3"></a> | ||
| <h3>Section - 3</h3> | ||
| <p>Section 3 content</p> | ||
| <div class="bx--tableofcontents__contents"> |
There was a problem hiding this comment.
@asudoh are we replying on adopters to add this wrapper class? Anyway this element can be transcluded instead?
There was a problem hiding this comment.
@asudoh are we replying on adopters to add this wrapper class?
Yes. Seems that we need this kind of wrapper class for React, too, given navigating directly to hashbang URL fails there.
Anyway this element can be transcluded instead?
Do you have any more details here...? Thanks!
There was a problem hiding this comment.
What I mean is can we add the wrapper div for the user instead of asking them to add it?
There was a problem hiding this comment.
Thank you for clarifying @jeffchew! I thought of making it automatic, but the problem is that our style (shadow DOM style) doesn't have direct control over the content style, and we allow arbitrary content for <dds-table-of-contents>. Therefore it looks like it's more prudent for us to clearly document that user has to use our CSS class to adjust the anchor position. I used below wording as an explanation of what the example code does, but good to hear better wording, etc.:
💡
bx--tableofcontents__contentsclass in the content<div>ensures the<h3>is visible by navigating to a hashbang URL (e.g.https://yoursite.com/yourpage#2).
kennylam
added
the
Ready to merge
Related Ticket(s)
Refs #4264.
Description
Introduces
bx--tableofcontents__contentsCSS class that ensures<a name="anchorname">is visible upon getting scroll to by selection of an item in<dds-table-of-contents>.Changelog
New
bx--tableofcontents__contentsCSS class.Removed
InsersectionObserverfor scroll hijacking code. It's effectively replaced with the newbx--tableofcontents__contentsCSS class.