From 6ce25807e7e83e45f7778b553894310a3ff157e4 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sun, 27 Dec 2020 21:10:31 +0000 Subject: [PATCH 01/11] Dynamic tabs: use buttons rather than links - change docs - tweak styles to neutralise border and background --- scss/_nav.scss | 3 + site/content/docs/5.0/components/navs-tabs.md | 70 +++++++++---------- 2 files changed, 38 insertions(+), 35 deletions(-) diff --git a/scss/_nav.scss b/scss/_nav.scss index 30c2c819bd5e..7d83a29c70ea 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -43,6 +43,7 @@ .nav-link { margin-bottom: -$nav-tabs-border-width; + background: none; border: $nav-tabs-border-width solid transparent; @include border-top-radius($nav-tabs-border-radius); @@ -80,6 +81,8 @@ .nav-pills { .nav-link { + background: none; + border: 0; @include border-radius($nav-pills-border-radius); } diff --git a/site/content/docs/5.0/components/navs-tabs.md b/site/content/docs/5.0/components/navs-tabs.md index 314dd47a6c45..d05a22134057 100644 --- a/site/content/docs/5.0/components/navs-tabs.md +++ b/site/content/docs/5.0/components/navs-tabs.md @@ -315,13 +315,13 @@ Note that dynamic tabbed interfaces should not contain dropdown menus,
@@ -340,13 +340,13 @@ Note that dynamic tabbed interfaces should not contain dropdown menus, ```html
@@ -361,9 +361,9 @@ To help fit your needs, this works with `
    `-based markup, as shown above, or
    @@ -382,9 +382,9 @@ To help fit your needs, this works with `
      `-based markup, as shown above, or ```html
      @@ -399,13 +399,13 @@ The tabs plugin also works with pills.
      @@ -424,13 +424,13 @@ The tabs plugin also works with pills. ```html
      @@ -445,10 +445,10 @@ And with vertical pills.
      @@ -470,10 +470,10 @@ And with vertical pills. ```html
      ...
      @@ -492,16 +492,16 @@ You can activate a tab or pill navigation without writing any JavaScript by simp @@ -561,21 +561,21 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a #### constructor -Activates a tab element and content container. Tab should have either a `data-bs-target` or an `href` targeting a container node in the DOM. +Activates a tab element and content container. Tab should have either a `data-bs-target` or, if using a link, an `href` attribute, targeting a container node in the DOM. ```html From fe7577a3b621d23594bd9df2ee15404820d7a297 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Tue, 5 Jan 2021 21:16:36 +0000 Subject: [PATCH 02/11] Add mention that tabs should be ', + '
      • ', + '
    ', + '
      ', + '
    • ', + '
    • ', + '
    ' + ].join('') + + const profileTriggerEl = fixtureEl.querySelector('#triggerProfile') + const tab = new Tab(profileTriggerEl) + + profileTriggerEl.addEventListener('shown.bs.tab', () => { + expect(fixtureEl.querySelector('#profile').classList.contains('active')).toEqual(true) + expect(profileTriggerEl.getAttribute('aria-selected')).toEqual('true') + done() + }) + + tab.show() + }) + + it('should activate element by tab id (using links for tabs - not ideal, but still supported)', done => { + fixtureEl.innerHTML = [ + '', '
      ', - '
    • ', - '
    • ', + '
    • ', + '
    • ', '
    ' ].join('') @@ -48,12 +72,12 @@ describe('Tab', () => { it('should activate element by tab id in ordered list', done => { fixtureEl.innerHTML = [ '
      ', - '
    1. Home
      2. ', - '
    2. Profile
      3. ', + '
      4. ', + '
      5. ', '
    ', '
      ', - '
    1. ', - '
    2. ', + '
    3. ', + '
    4. ', '
    ' ].join('') @@ -71,10 +95,10 @@ describe('Tab', () => { it('should activate element by tab id in nav list', done => { fixtureEl.innerHTML = [ '', - '' + '
    ' ].join('') const profileTriggerEl = fixtureEl.querySelector('#triggerProfile') @@ -90,11 +114,11 @@ describe('Tab', () => { it('should activate element by tab id in list group', done => { fixtureEl.innerHTML = [ - '
    ', - ' Home', - ' Profile', + '
    ', + ' ', + ' ', '
    ', - '' + '
    ' ].join('') const profileTriggerEl = fixtureEl.querySelector('#triggerProfile') @@ -135,8 +159,8 @@ describe('Tab', () => { it('should not fire shown when tab is already active', done => { fixtureEl.innerHTML = [ '', '
    ', '
    ', @@ -161,8 +185,8 @@ describe('Tab', () => { it('should not fire shown when tab is disabled', done => { fixtureEl.innerHTML = [ '', '
    ', '
    ', @@ -187,8 +211,8 @@ describe('Tab', () => { it('show and shown events should reference correct relatedTarget', done => { fixtureEl.innerHTML = [ '', '
    ', '
    ', @@ -215,9 +239,9 @@ describe('Tab', () => { it('should fire hide and hidden events', done => { fixtureEl.innerHTML = [ - '
      ', - '
    • Home
      • ', - '
    • Profile
      • ', + '
        ', + '
        • ', + '
        • ', '
      ' ].join('') @@ -246,9 +270,9 @@ describe('Tab', () => { it('should not fire hidden when hide is prevented', done => { fixtureEl.innerHTML = [ - '
        ', - '
      • Home
        • ', - '
      • Profile
        • ', + '
          ', + '
          • ', + '
          • ', '
        ' ].join('') @@ -282,19 +306,19 @@ describe('Tab', () => { fixtureEl.innerHTML = [ '', '
        ', @@ -425,8 +449,8 @@ describe('Tab', () => { it('should create dynamically a tab', done => { fixtureEl.innerHTML = [ '', '
        ', '
        ', @@ -445,41 +469,18 @@ describe('Tab', () => { secondTabTrigger.click() }) - it('selected tab should deactivate previous selected link in dropdown', () => { - fixtureEl.innerHTML = [ - '' - ].join('') - - const firstLiLinkEl = fixtureEl.querySelector('li:first-child a') - - firstLiLinkEl.click() - expect(firstLiLinkEl.classList.contains('active')).toEqual(true) - expect(fixtureEl.querySelector('li:last-child a').classList.contains('active')).toEqual(false) - expect(fixtureEl.querySelector('li:last-child .dropdown-menu a:first-child').classList.contains('active')).toEqual(false) - }) - it('should handle nested tabs', done => { fixtureEl.innerHTML = [ '', '
        ', '
        ', ' ', '
        ', '
        Nested Tab1 Content
        ', @@ -511,8 +512,8 @@ describe('Tab', () => { it('should not remove fade class if no active pane is present', done => { fixtureEl.innerHTML = [ '', '
        ', '
        ', @@ -549,10 +550,10 @@ describe('Tab', () => { fixtureEl.innerHTML = [ '
          ', ' ', ' ', '
        ', '
        ', @@ -575,10 +576,10 @@ describe('Tab', () => { fixtureEl.innerHTML = [ '
          ', ' ', ' ', '
        ', '
        ', diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html index 0f7b734e7699..4c8e348ba3c5 100644 --- a/js/tests/visual/tab.html +++ b/js/tests/visual/tab.html @@ -19,16 +19,16 @@

        Tabs without fade

        @@ -55,16 +55,16 @@

        Tabs with fade

        @@ -91,16 +91,16 @@

        Tabs without fade (no initially active pane)

        @@ -127,16 +127,16 @@

        Tabs with fade (no initially active pane)

        @@ -159,47 +159,14 @@

        Tabs with fade (no initially active pane)

        -

        Tabs with nav (with fade)

        - - -
        -
        -

        Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

        -

        Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

        -
        -
        -

        Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

        -

        Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

        -
        -
        -

        Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

        -

        Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

        -
        -
        -

        Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

        -

        Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

        -
        -
        -

        Tabs with list-group (with fade)

        - Home - Profile - Messages - Settings + + + +
        From 26afac930e4e4bc52f8401eb25d8b0a73a6c9102 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Tue, 5 Jan 2021 22:23:54 +0000 Subject: [PATCH 04/11] Tweak tests --- js/tests/unit/tab.spec.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index f9dd1e352898..478a41742fc6 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -224,13 +224,13 @@ describe('Tab', () => { const secondTab = new Tab(secondTabTrigger) secondTabTrigger.addEventListener('show.bs.tab', ev => { - expect(ev.relatedTarget.hash).toEqual('#home') + expect(ev.relatedTarget).toEqual(fixtureEl.querySelector('#home')) }) secondTabTrigger.addEventListener('shown.bs.tab', ev => { - expect(ev.relatedTarget.hash).toEqual('#home') + expect(ev.relatedTarget).toEqual(fixtureEl.querySelector('#home')) expect(secondTabTrigger.getAttribute('aria-selected')).toEqual('true') - expect(fixtureEl.querySelector('a:not(.active)').getAttribute('aria-selected')).toEqual('false') + expect(fixtureEl.querySelector('button:not(.active)').getAttribute('aria-selected')).toEqual('false') done() }) @@ -245,7 +245,7 @@ describe('Tab', () => { '
      ' ].join('') - const triggerList = fixtureEl.querySelectorAll('a') + const triggerList = fixtureEl.querySelectorAll('button') const firstTab = new Tab(triggerList[0]) const secondTab = new Tab(triggerList[1]) @@ -256,12 +256,12 @@ describe('Tab', () => { triggerList[0].addEventListener('hide.bs.tab', ev => { hideCalled = true - expect(ev.relatedTarget.hash).toEqual('#profile') + expect(ev.relatedTarget).toEqual(fixtureEl.querySelector('#profile')) }) triggerList[0].addEventListener('hidden.bs.tab', ev => { expect(hideCalled).toEqual(true) - expect(ev.relatedTarget.hash).toEqual('#profile') + expect(ev.relatedTarget).toEqual(fixtureEl.querySelector('#profile')) done() }) @@ -276,7 +276,7 @@ describe('Tab', () => { '
    ' ].join('') - const triggerList = fixtureEl.querySelectorAll('a') + const triggerList = fixtureEl.querySelectorAll('button') const firstTab = new Tab(triggerList[0]) const secondTab = new Tab(triggerList[1]) const expectDone = () => { @@ -340,7 +340,7 @@ describe('Tab', () => { btnCloseEl.addEventListener('click', () => { const linkEl = btnCloseEl.parentNode const liEl = linkEl.parentNode - const tabId = linkEl.getAttribute('href') + const tabId = linkEl.getAttribute('data-bs-target') const tabIdEl = fixtureEl.querySelector(tabId) liEl.parentNode.removeChild(liEl) From 64d47aaf993565652b7ffe1db447ce7f2c837e61 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Tue, 5 Jan 2021 22:32:39 +0000 Subject: [PATCH 05/11] Fix tests --- js/tests/unit/tab.spec.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index 478a41742fc6..4a8708129a47 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -194,7 +194,7 @@ describe('Tab', () => { '
    ' ].join('') - const triggerDisabled = fixtureEl.querySelector('a.disabled') + const triggerDisabled = fixtureEl.querySelector('button.disabled') const tab = new Tab(triggerDisabled) triggerDisabled.addEventListener('shown.bs.tab', () => { @@ -224,11 +224,11 @@ describe('Tab', () => { const secondTab = new Tab(secondTabTrigger) secondTabTrigger.addEventListener('show.bs.tab', ev => { - expect(ev.relatedTarget).toEqual(fixtureEl.querySelector('#home')) + expect(ev.relatedTarget.getAttribute('data-bs-target')).toEqual('#home') }) secondTabTrigger.addEventListener('shown.bs.tab', ev => { - expect(ev.relatedTarget).toEqual(fixtureEl.querySelector('#home')) + expect(ev.relatedTarget.getAttribute('data-bs-target')).toEqual('#home') expect(secondTabTrigger.getAttribute('aria-selected')).toEqual('true') expect(fixtureEl.querySelector('button:not(.active)').getAttribute('aria-selected')).toEqual('false') done() @@ -256,12 +256,12 @@ describe('Tab', () => { triggerList[0].addEventListener('hide.bs.tab', ev => { hideCalled = true - expect(ev.relatedTarget).toEqual(fixtureEl.querySelector('#profile')) + expect(ev.relatedTarget.getAttribute('data-bs-target')).toEqual('#profile') }) triggerList[0].addEventListener('hidden.bs.tab', ev => { expect(hideCalled).toEqual(true) - expect(ev.relatedTarget).toEqual(fixtureEl.querySelector('#profile')) + expect(ev.relatedTarget.getAttribute('data-bs-target')).toEqual('#profile') done() }) From cb657f98374e8c270667516ee53a69d42fa721f6 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Tue, 5 Jan 2021 22:42:31 +0000 Subject: [PATCH 06/11] Tests --- js/tests/unit/tab.spec.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index 4a8708129a47..eaa82f1cd0c3 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -168,7 +168,7 @@ describe('Tab', () => { '
    ' ].join('') - const triggerActive = fixtureEl.querySelector('a.active') + const triggerActive = fixtureEl.querySelector('button.active') const tab = new Tab(triggerActive) triggerActive.addEventListener('shown.bs.tab', () => { @@ -338,9 +338,9 @@ describe('Tab', () => { }) btnCloseEl.addEventListener('click', () => { - const linkEl = btnCloseEl.parentNode - const liEl = linkEl.parentNode - const tabId = linkEl.getAttribute('data-bs-target') + const tabEl = btnCloseEl.parentNode + const liEl = tabEl.parentNode + const tabId = tabEl.getAttribute('data-bs-target') const tabIdEl = fixtureEl.querySelector(tabId) liEl.parentNode.removeChild(liEl) From f5c8e2f18326f86b9e667e6656a487cba334ff88 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Tue, 5 Jan 2021 23:22:48 +0000 Subject: [PATCH 07/11] Remove test for unusued and frankly inappropriate structure/handling --- js/tests/unit/tab.spec.js | 49 --------------------------------------- 1 file changed, 49 deletions(-) diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index eaa82f1cd0c3..a644360fe800 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -301,55 +301,6 @@ describe('Tab', () => { firstTab.show() }) - - it('should handle removed tabs', done => { - fixtureEl.innerHTML = [ - '
      ', - ' ', - ' ', - ' ', - '
    ', - '
    ', - '
    test 1
    ', - '
    test 2
    ', - '
    test 3
    ', - '
    ' - ].join('') - - const secondNavEl = fixtureEl.querySelector('#secondNav') - const btnCloseEl = fixtureEl.querySelector('#btnClose') - const secondNavTab = new Tab(secondNavEl) - - secondNavEl.addEventListener('shown.bs.tab', () => { - expect(fixtureEl.querySelectorAll('.nav-tab').length).toEqual(2) - done() - }) - - btnCloseEl.addEventListener('click', () => { - const tabEl = btnCloseEl.parentNode - const liEl = tabEl.parentNode - const tabId = tabEl.getAttribute('data-bs-target') - const tabIdEl = fixtureEl.querySelector(tabId) - - liEl.parentNode.removeChild(liEl) - tabIdEl.parentNode.removeChild(tabIdEl) - secondNavTab.show() - }) - - btnCloseEl.click() - }) }) describe('dispose', () => { From c03553df4e64d6ecb54b0cae6118350a71066ff1 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Tue, 5 Jan 2021 23:41:42 +0000 Subject: [PATCH 08/11] Tweak code example in events part of the docs --- site/content/docs/5.0/components/navs-tabs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.0/components/navs-tabs.md b/site/content/docs/5.0/components/navs-tabs.md index 4029be7b1765..822aec14c484 100644 --- a/site/content/docs/5.0/components/navs-tabs.md +++ b/site/content/docs/5.0/components/navs-tabs.md @@ -657,7 +657,7 @@ If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events ```js -var tabEl = document.querySelector('a[data-bs-toggle="tab"]') +var tabEl = document.querySelector('button[data-bs-toggle="tab"]') tabEl.addEventListener('shown.bs.tab', function (event) { event.target // newly activated tab event.relatedTarget // previous active tab From 9e27cc065ae4b4dfeccdbc8ea1325dd09323f8b0 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 9 Jan 2021 22:18:50 +0000 Subject: [PATCH 09/11] Add isolation:isolate to prevent focus being overlapped https://github.com/twbs/bootstrap/pull/32630#issuecomment-756015766 --- scss/_nav.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/scss/_nav.scss b/scss/_nav.scss index 7d83a29c70ea..2534f7f77ba1 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -50,6 +50,8 @@ &:hover, &:focus { border-color: $nav-tabs-link-hover-border-color; + // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link + isolation: isolate; } &.disabled { From 229a4afc6c7a65db2ae1dbf13017669860887f61 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Mon, 8 Feb 2021 12:37:48 +0000 Subject: [PATCH 10/11] Put back 2 of the removed tests Leaving these here for now. The test for removed tabs should be redone so that tabs are removed programmatically (as the approach of having that close button inside the link is invalid and broken markup). The test for dropdowns should be removed together we actually ripping out the handling for dropdowns in the tab.js code (arguably a breaking change, though we discouraged this for a few versions and effectively "deprecated" it) --- js/tests/unit/tab.spec.js | 72 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index 5ef3d798eda1..463fb79afd40 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -301,6 +301,55 @@ describe('Tab', () => { firstTab.show() }) + + it('should handle removed tabs', done => { + fixtureEl.innerHTML = [ + '', + '
    ', + '
    test 1
    ', + '
    test 2
    ', + '
    test 3
    ', + '
    ' + ].join('') + + const secondNavEl = fixtureEl.querySelector('#secondNav') + const btnCloseEl = fixtureEl.querySelector('#btnClose') + const secondNavTab = new Tab(secondNavEl) + + secondNavEl.addEventListener('shown.bs.tab', () => { + expect(fixtureEl.querySelectorAll('.nav-tab').length).toEqual(2) + done() + }) + + btnCloseEl.addEventListener('click', () => { + const linkEl = btnCloseEl.parentNode + const liEl = linkEl.parentNode + const tabId = linkEl.getAttribute('href') + const tabIdEl = fixtureEl.querySelector(tabId) + + liEl.parentNode.removeChild(liEl) + tabIdEl.parentNode.removeChild(tabIdEl) + secondNavTab.show() + }) + + btnCloseEl.click() + }) }) describe('dispose', () => { @@ -418,6 +467,29 @@ describe('Tab', () => { secondTabTrigger.click() }) + it('selected tab should deactivate previous selected link in dropdown', () => { + fixtureEl.innerHTML = [ + '' + ].join('') + + const firstLiLinkEl = fixtureEl.querySelector('li:first-child a') + + firstLiLinkEl.click() + expect(firstLiLinkEl.classList.contains('active')).toEqual(true) + expect(fixtureEl.querySelector('li:last-child a').classList.contains('active')).toEqual(false) + expect(fixtureEl.querySelector('li:last-child .dropdown-menu a:first-child').classList.contains('active')).toEqual(false) + }) + it('should handle nested tabs', done => { fixtureEl.innerHTML = [ '
    +

    Tabs with nav and using links (with fade)

    + + +
    +
    +

    Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

    +

    Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

    +
    +
    +

    Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

    +

    Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

    +
    +
    +

    Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

    +

    Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

    +
    +
    +

    Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

    +

    Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

    +
    +
    +

    Tabs with list-group (with fade)