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

Remove .show from panels dependent-less on the existence of .fade class #36622

Merged
merged 2 commits into from Jun 27, 2022
Merged

Remove .show from panels dependent-less on the existence of .fade class #36622

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
988d41b
ref(tab): remove show from panels dependent-less they have `.fade` cl…
GeoSot Jun 22, 2022
34e2672
Merge branch 'main' into gs/tabs-ref
julien-deramond Jun 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
16 changes: 4 additions & 12 deletions js/src/tab.js
View file
Open in desktop
Expand Up @@ -109,13 +109,9 @@ class Tab extends BaseComponent {

this._activate(getElementFromSelector(element)) // Search and activate/show the proper section

const isAnimated = element.classList.contains(CLASS_NAME_FADE)
const complete = () => {
if (isAnimated) { // todo: maybe is redundant
element.classList.add(CLASS_NAME_SHOW)
}

if (element.getAttribute('role') !== 'tab') {
element.classList.add(CLASS_NAME_SHOW)
return
}

Expand All @@ -128,7 +124,7 @@ class Tab extends BaseComponent {
})
}

this._queueCallback(complete, element, isAnimated)
this._queueCallback(complete, element, element.classList.contains(CLASS_NAME_FADE))
}

_deactivate(element, relatedElem) {
Expand All @@ -141,13 +137,9 @@ class Tab extends BaseComponent {

this._deactivate(getElementFromSelector(element)) // Search and deactivate the shown section too

const isAnimated = element.classList.contains(CLASS_NAME_FADE)
const complete = () => {
if (isAnimated) { // todo maybe is redundant
element.classList.remove(CLASS_NAME_SHOW)
}

if (element.getAttribute('role') !== 'tab') {
element.classList.remove(CLASS_NAME_SHOW)
return
}

Expand All @@ -157,7 +149,7 @@ class Tab extends BaseComponent {
EventHandler.trigger(element, EVENT_HIDDEN, { relatedTarget: relatedElem })
}

this._queueCallback(complete, element, isAnimated)
this._queueCallback(complete, element, element.classList.contains(CLASS_NAME_FADE))
}

_keydown(event) {
Expand Down
4 changes: 2 additions & 2 deletions js/tests/unit/tab.spec.js
View file
Open in desktop
Expand Up @@ -904,7 +904,7 @@ describe('Tab', () => {
})
})

it('should not add `show` class to tab panes if there is no `.fade` class', () => {
it('should add `show` class to tab panes if there is no `.fade` class', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<ul class="nav nav-tabs" role="tablist">',
Expand All @@ -924,7 +924,7 @@ describe('Tab', () => {
const secondNavEl = fixtureEl.querySelector('#secondNav')

secondNavEl.addEventListener('shown.bs.tab', () => {
expect(fixtureEl.querySelectorAll('.show')).toHaveSize(0)
expect(fixtureEl.querySelectorAll('.tab-content .show')).toHaveSize(1)
resolve()
})

Expand Down