Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...)

[pvdlg]

Fixes #20451, fixes #19736, fixes #21223, fixes #18566, fixes #18409, fixes #20620, fixes #20156.

The intent in v4 is to support two type of markup for .nav, tab, scrollspy:

• The "<ul> markup":

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Item</a>
  </li>
</ul>

• The "<nav> markup":

<nav class="nav">
    <a class="nav-link" href="#">Item</a>
</nav>

This PR provide the necessary fixes:

• Make scrollspy works with both markup. It is not dependent of .nav-item or <li> anymore
• Add corresponding unit tests
• Fix .active .nav-link for both markup broken here
• Fix .nav-justified for both markup that was broken for "<nav> markup"
• Fix .nav-fill for both markup that was broken for "<nav> markup"
• Clarify scrollspy docs to mention both markup and that .nav-link receives the .active class
• Add a new scrollspy example in the docs with nested .nav-links
• Make tabs scss works with both <nav> and <ul> markup
• Make tabs plugin works with both markup. It is not dependent anymore of .nav-item or <li>, <a> etc...
• Revert PR Allow to use Tab.js with list-group #21756 to handle list-group with tabs in a more simple way with less specific class dependencies
• Fix tabs pane transition detection that was using an unnecessary additional selector
• Add example in docs for Tabs with JS with both markup
• Add examples for tab pills and tab pills vertical

In addition it adds the support of scrollspy and tab to 'list-group (per request in #20620):

• Change tab plugin to support .list-group
• Add tab example and documentation in list-group page
• Add unit test
• Change scrollspy plugin to support .list-group
• Add scrollspy example and documentation
• Add unit test

Both tab and scrollspy plugin now only depends on:

• Having.nav or 'list-group class on the parent or sub-parent in case of nested navs
• Having .nav-link or .list-group-item anywhere within to add the .active
• No other markup structure / element / class is necessary, allowing the maximum of flexibility

[wojtask9]

Not 100% sure but this change breaks navs with dropdowns.

[pvdlg]

Are you talking about this one?

&.active {
  color: $nav-pills-active-link-color;
  cursor: default;
  background-color: $nav-pills-active-link-bg;
}

Or that one?

.nav-link {
  @include border-radius($nav-pills-border-radius);
}

For info the second one wasn't modified in this PR.

Anyway in both cases I can't reproduce the problem you are reporting regarding navs with dropdown.
Could you clarify in which way it breaks it ? Or point me to an exemple in the docs that is broken? Or provide more details?

[pvdlg]

My bad, I see what you means now. I fixed it here. Thanks !

[Johann-S]

Maybe @vanduynslagerp can rebase his branch (instead of a merge) to fix the build issue

[Johann-S]

Sorry about that @vanduynslagerp but can you update your branch again 😄 thank you 👍

[pvdlg]

Done

[Johann-S]

Thank I'll review your PR asap 👍

[Johann-S]

Can you update this file : https://github.com/twbs/bootstrap/blob/v4-dev/js/tests/visual/tab.html#L199

Because in your branch it doesn't work the same as v4-dev

[pvdlg]

Can you update this file : https://github.com/twbs/bootstrap/blob/v4-dev/js/tests/visual/tab.html

Sure. I somehow always forget the visual tests. I'll do it tonight (EST time).

[Johann-S]

Sorry for the lack of details, the visual test about tabs with list group doesn't work same as v4-dev

[Johann-S]

I think you can remove this div (<div class="row">) from your example

[pvdlg]

Do you mean to make the sample code more concise ?

[Johann-S]

Yes exactly

[pvdlg]

Ok. Then I'll remove <div class="col-4"> as well I suppose. I thought it would be helpful for the user to see how to make the vertical menu with the grid. But thinking about it now, it's true it makes the sample bigger and it's not really the place for that anyway. I'll change it tonight

[Johann-S]

I cannot see this example working because they aren't scroll and when I scroll the main scroll no active class added

[pvdlg]

Works for me on Safari, Chrome and Firefox.
The scroll is set by the class .scrollspy-example-2 I added to docs/assets/scss/_component-examples.scss. I guess you have to recompile the docs with grunt docs.

[Johann-S]

Yes I thought about it after my comment my bad 👍

[Johann-S]

Same with this example no active class added

[pvdlg]

I updated the visuals tests and removed the row and col from doc examples.
The problematic visual test come from you PR #21756. I reversed all your code but I forgot the visual test. It's reversed and fixed.

A few explanation regarding the reversal of your code.
In #21756 you were referencing explicitly the list-group-item and applying active on the parent.
A few problems with that:

• It makes the plugin less generic as you reference a specific class (list-group-item) and it wasn't necessary. Without that, users can use any classes for the actionable item.
• You broke the module "pattern" which is to set active on the element that activated the tab (i.e the a on which the user click which make semantic sense). You were setting that on the parent.
• You were trying to handle a markup that is not supported according to the doc (in case of an actionable list item the a has to be the child of the list-group like in list-group/#links-and-buttons. Which explain V4 list-group with an active li, invisible link #21755 I imagine.

In the tabs visual the JS of my PR was actually working (the active class was changed properly) as your code were using the markup for tabs (with the actionable item wrapped in other element, itself child of the nav/list-group). The problem was the css as explain above, as it expect the active element as a child of the list-group.
Also in your visual test you had two tab-panel with exactly the same paragraphs, so switching tabs was not visible (it was actually changing but displaying the exact same text).

[Johann-S]

Thank you @vanduynslagerp 👍 I'll review your last changes later

[Johann-S]

(I runned grunt docs)
On the list group no active class added here (but it works fine on the visual test)

Here I think a scroll is missing and no class actives

[pvdlg]

Somehow you must not have the right version of the code. The scroll is created by the class here. So it seems you don't have a local documentation generated from the code of my branch.

Make sure you have pulled all the code from my branch then run:

• grunt
• grunt doc
• bundle exec jekyll server

[Johann-S]

I was up to date before you last commit and I did the grunt command you said.
But I'll try again later

[Johann-S]

Everything is fine but your branch is not up to date @vanduynslagerp