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.

Sign up for GitHub

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

Jump to bottom

Dynamic tabs: use buttons rather than links (backport to v4) #33163

Merged
merged 21 commits into from
May 24, 2022
Merged

Dynamic tabs: use buttons rather than links (backport to v4) #33163

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
1d9e3fb
Manually backport 32630
patrickhlauke Feb 20, 2021
72d8864
Tweak unit test
patrickhlauke Mar 2, 2021
d476cfa
Tweak unit tests
patrickhlauke Mar 3, 2021
3b40fdf
More tweakage
patrickhlauke Mar 3, 2021
884a698
show() should also bail if `disabled` attribute is set
patrickhlauke Mar 3, 2021
df71e26
Tweak tests
patrickhlauke Mar 3, 2021
387e2fb
Simplify test for relatedTarget
patrickhlauke Mar 3, 2021
3235353
Temporarily remove problematic test
patrickhlauke Mar 3, 2021
ca76557
Revert previous
patrickhlauke Mar 3, 2021
4fa07bd
Merge branch 'v4-dev' into patrickhlauke-navs-tabs-v4
patrickhlauke Apr 11, 2021
1fd5766
Merge branch 'v4-dev' into patrickhlauke-navs-tabs-v4
patrickhlauke May 8, 2021
2052f21
test: fix broken test cases for tab.js
alpadev May 8, 2021
0824e3e
test: fix role=tablist invalid on nav element
alpadev May 8, 2021
0a2e1ed
test: prefer <div/> over <div></div>
alpadev May 8, 2021
f926077
Manually backport 32630
patrickhlauke Feb 20, 2021
be6a61a
test: fix broken test cases for tab.js
alpadev May 8, 2021
2f5e705
Merge branch 'v4-dev' into patrickhlauke-navs-tabs-v4
patrickhlauke Mar 24, 2022
4fde590
Merge branch 'patrickhlauke-navs-tabs-v4' of https://github.com/twbs/…
patrickhlauke Mar 24, 2022
70fa543
Fixes
patrickhlauke Mar 24, 2022
fea2f87
Merge branch 'v4-dev' into patrickhlauke-navs-tabs-v4
mdo May 24, 2022
2c08560
Remove and ignore lock file
mdo May 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
# Ignore docs files
/_site/
# Hugo folders
# Hugo files
/resources/
/.hugo_build.lock

# Numerous always-ignore extensions
*.diff
Expand Down
3 changes: 2 additions & 1 deletion js/src/tab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,8 @@ class Tab {
if (this._element.parentNode &&
this._element.parentNode.nodeType === Node.ELEMENT_NODE &&
$(this._element).hasClass(CLASS_NAME_ACTIVE) ||
$(this._element).hasClass(CLASS_NAME_DISABLED)) {
$(this._element).hasClass(CLASS_NAME_DISABLED) ||
this._element.hasAttribute('disabled')) {
return
}

Expand Down
211 changes: 102 additions & 109 deletions js/tests/unit/tab.js
View file
Open in desktop

Large diffs are not rendered by default.

57 changes: 27 additions & 30 deletions js/tests/visual/tab.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,16 @@ <h4>Tabs without fade</h4>

<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
<button type="button" class="nav-link active" data-toggle="tab" data-target="#home" role="tab" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
<button type="button" class="nav-link" data-toggle="tab" data-target="#profile" role="tab">Profile</button>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#fat" role="tab">@fat</a>
<button type="button" class="nav-link" data-toggle="tab" data-target="#fat" role="tab">@fat</button>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#mdo" role="tab">@mdo</a>
<button type="button" class="nav-link" data-toggle="tab" data-target="#mdo" role="tab">@mdo</button>
</li>
</ul>

Expand All @@ -55,16 +55,16 @@ <h4>Tabs with fade</h4>

<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" data-toggle="tab" href="#home2" role="tab">Home</a>
<button type="button" class="nav-link active" data-toggle="tab" data-target="#home2" role="tab" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#profile2" role="tab">Profile</a>
<button type="button" class="nav-link" data-toggle="tab" data-target="#profile2" role="tab">Profile</button>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#fat2" role="tab">@fat</a>
<button type="button" class="nav-link" data-toggle="tab" data-target="#fat2" role="tab">@fat</button>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#mdo2" role="tab">@mdo</a>
<button type="button" class="nav-link" data-toggle="tab" data-target="#mdo2" role="tab">@mdo</button>
</li>
</ul>

Expand All @@ -91,16 +91,16 @@ <h4>Tabs without fade (no initially active pane)</h4>

<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#home3" role="tab">Home</a>
<button type="button" class="nav-link" data-toggle="tab" data-target="#home3" role="tab">Home</button>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#profile3" role="tab">Profile</a>
<button type="button" class="nav-link" data-toggle="tab" data-target="#profile3" role="tab">Profile</button>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#fat3" role="tab">@fat</a>
<button type="button" class="nav-link" data-toggle="tab" data-target="#fat3" role="tab">@fat</button>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#mdo3" role="tab">@mdo</a>
<button type="button" class="nav-link" data-toggle="tab" data-target="#mdo3" role="tab">@mdo</button>
</li>
</ul>

Expand Down Expand Up @@ -159,26 +159,23 @@ <h4>Tabs with fade (no initially active pane)</h4>
</div>
</div>

<h4>Tabs with nav (with fade)</h4>
<nav class="nav nav-pills">
<a class="nav-link nav-item active" data-toggle="tab" href="#home5">Home</a>
<a class="nav-link nav-item" data-toggle="tab" href="#profile5">Profile</a>
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown5" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown5">
<a class="dropdown-item" data-toggle="tab" href="#fat5">@fat</a>
<a class="dropdown-item" data-toggle="tab" href="#mdo5">@mdo</a>
</div>
<h4>Tabs with nav and using links (with fade)</h4>
<nav>
<div class="nav nav-pills" id="nav-tab" role="tablist">
<a class="nav-link nav-item active" role="tab" data-toggle="tab" href="#home5">Home</a>
<a class="nav-link nav-item" role="tab" data-toggle="tab" href="#profile5">Profile</a>
<a class="nav-link nav-item" role="tab" data-toggle="tab" href="#fat5">@fat</a>
<a class="nav-link nav-item" role="tab" data-toggle="tab" href="#mdo5">@mdo</a>
<a class="nav-link nav-item disabled" role="tab" href="#">Disabled</a>
</div>
<a class="nav-link nav-item disabled" href="#">Disabled</a>
</nav>

<div class="tab-content" role="tabpanel">
<div role="tabpanel" class="tab-pane fade show active" id="home5">
<div class="tab-content">
<div class="tab-pane fade show active" id="home5" role="tabpanel">
<p>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.</p>
<p>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.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="profile5">
<div class="tab-pane fade" id="profile5" role="tabpanel">
<p>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.</p>
<p>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.</p>
</div>
Expand All @@ -196,10 +193,10 @@ <h4>Tabs with list-group (with fade)</h4>
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="tab" href="#list-home" role="tab" aria-controls="list-home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="tab" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="tab" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
<button type="button" class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="tab" data-target="#list-home" role="tab" aria-controls="list-home" aria-selected="true">Home</button>
<button type="button" class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" data-target="#list-profile" role="tab" aria-controls="list-profile">Profile</button>
<button type="button" class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="tab" data-target="#list-messages" role="tab" aria-controls="list-messages">Messages</button>
<button type="button" class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="tab" data-target="#list-settings" role="tab" aria-controls="list-settings">Settings</button>
</div>
</div>
<div class="col-8">
Expand Down
5 changes: 5 additions & 0 deletions scss/_nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,13 @@

.nav-link {
margin-bottom: -$nav-tabs-border-width;
background-color: transparent;
border: $nav-tabs-border-width solid transparent;
@include border-top-radius($nav-tabs-border-radius);

@include hover-focus() {
// Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
isolation: isolate;
border-color: $nav-tabs-link-hover-border-color;
}

Expand Down Expand Up @@ -73,6 +76,8 @@

.nav-pills {
.nav-link {
background: none;
border: 0;
@include border-radius($nav-pills-border-radius);
}

Expand Down
Loading