Tab JS and .active class

[mdo]

There are a ton of issues all surrounding the .active class applied via our tab JS. I'm collecting all of them here to try to de-dupe them and figure out a path forward.

Here's what I have so far (checked indicates closed issue):

• Tabs plugin adds .active class to wrong element of correct tab when switching #18566, class="active" managed improperly with data-toggle="tab" #19374, .active Tab state is never removed on navigation #20523, Tabs JavaScript not removing 'active' class from nav-pills nav-stacked #20797: .active tab state isn't removed on tab switch with <nav>-based structure (but does work on <ul> one). Fixing bug described here: Multiple Tabs can become .active at once #20027 #20039 tries to fix this with some new JS, but perhaps not the right direction we want to go (see below).
• Scrollspy and active item/link #20451: Scrollspy adds .active to .nav-link, but the nav docs have it on .nav-item.
• v4 list-group not work correctly with tabs #20620: Tabs JS doesn't work with list groups unless you add .nav-item to the parent.
• Follow up #20982 w/ active/open nav fixes #21021, Rename .active to .show #21036: Rename .active to .show (previously .open) for dropdowns.

Seems like this is all stemming from the flexibility I was trying to provide by allowing .active to be placed on parent items (e.g., <li>s) or the .nav-link itself. To resolve this, I think we need to only allow .active on the .nav-link (or in the case of list groups, .list-group-item). With dropdowns, we also need to have a separate class that is added to the parent or menu to properly show that.

My proposal is this:

• Let's allow this to be flexible for any markup by applying the .active class only to the item itself, and not the parent.
• Nav links, list group items, and dropdown triggers get .active on the <a> or <button> for their active state.
• Dropdown triggers get .active to indicate their associated menu is shown, and the .dropdown-menu gets .shown to indicate it is visible.

That last part is a deviation from the current behavior, and might require more work. I'd be fine keeping .show or .shown on the parent of the dropdown trigger and menu if that'd be easier.

Thoughts @cvrebert, @bardiharborow, @Johann-S?

---

Potentially related tabs issues and PRs for context:

• Dropdown items in nav tabs can get stuck in .active mode #17371, [Fix #17371][V4] Deactivating dropdown links in nav tab #17642, Fixing bug described here: Multiple Tabs can become .active at once #20027 #20039, .active Tab state is never removed on navigation #20523: Dropdown items get stuck in .active state.
• Click on disabled tab still shows corresponding pane #19849, do not show tab when disabled #20174, [Fix #19849] Tabs are opened even if disabled. #20795: Tabs are opened even if disabled.
• ScrollSpy clears active nav-item on Safari when rubber-band scrolling past the top of page #21055, Closes #21055: Prevents ScrollSpy from clearing item when Safari rubberbands #21056: Rubber band scrolling can remove active nav link.

[mdo]

I've pushed a branch to add a basic <nav>-based demo (currently broken as the linked issues indicate) to the docs fwiw. See b05f148.

[mdo]

Also /cc @Starsam80 because his PR at #21036 addresses the double active state problem outlined in #21021. His PR addresses the proper class naming for that issue, and could likely be built upon further after merge with the issues outlined here.

[Starsam80]

EDIT:  I forgot that PR 20982 changed more than just `.in`, so I guess my PR is still valid. 

[pvdlg]

See PR #21807 for all the fixes mentioned above, including #20620.