Skip to content

Commit 36d31bf

Browse files
kylebuch8kylebuch8
authored
fix: make it so pfe-tabs inside pfe-tabs works (#806)
* fix: make it so pfe-tabs inside pfe-tabs works Fixes #805 * adding the element.prototype.matches polyfill for IE11
1 parent dad975f commit 36d31bf

File tree

5 files changed

+94
-2
lines changed

5 files changed

+94
-2
lines changed

‎CHANGELOG-prerelease.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
Tag: [v1.0.0-prerelease.42](https://github.com/patternfly/patternfly-elements/releases/tag/v1.0.0-prerelease.42)
44

55
- [fbc251b](https://github.com/patternfly/patternfly-elements/commit/fbc251b5180684da26a57c0941235d57f961990e) fix: set consistent line-height for pfe-nav triggers (#773)
6+
- []() fix: make it so pfe-tabs inside pfe-tabs works
67
- [29780ab](https://github.com/patternfly/patternfly-elements/commit/29780abfab1074aa05a021a43d79bee00afed31b) feat: adding event to pfe-cta component
78
- [](https://github.com/patternfly/patternfly-elements/commit/) fix: set pfe-cta's with the priority attribute relative to theme font-size
89

‎elements/pfe-tabs/demo/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -322,6 +322,31 @@ <h2>Content 3</h2>
322322

323323
</section>
324324

325+
<section class="example">
326+
<h2>Tabs in Tabs</h2>
327+
<pfe-tabs>
328+
<pfe-tab role="heading" slot="tab">Tab 1</pfe-tab>
329+
<pfe-tab-panel role="region" slot="panel">
330+
<pfe-tabs id="subtabset">
331+
<pfe-tab role="heading" slot="tab">Sub Tab 1</pfe-tab>
332+
<pfe-tab-panel role="region" slot="panel">
333+
<h2>Content for Sub Tab 1</h2>
334+
</pfe-tab-panel>
335+
<pfe-tab role="heading" slot="tab">Sub Tab 2</pfe-tab>
336+
<pfe-tab-panel role="region" slot="panel">
337+
<h2>Content for Sub Tab 2</h2>
338+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
339+
</pfe-tab-panel>
340+
</pfe-tabs>
341+
</pfe-tab-panel>
342+
<pfe-tab role="heading" slot="tab">Tab 2</pfe-tab>
343+
<pfe-tab-panel role="region" slot="panel">
344+
<h1>Tab 2 Content</h1>
345+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
346+
</pfe-tab-panel>
347+
</pfe-tabs>
348+
</section>
349+
325350
<section class="example">
326351

327352
<h2>Dynamically Adding a Tab and Tab Panel</h2>

‎elements/pfe-tabs/src/pfe-tabs.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -295,11 +295,11 @@ class PfeTabs extends PFElement {
295295
}
296296

297297
_allPanels() {
298-
return [...this.querySelectorAll("pfe-tab-panel")];
298+
return [...this.children].filter(child => child.matches("pfe-tab-panel"));
299299
}
300300

301301
_allTabs() {
302-
return [...this.querySelectorAll("pfe-tab")];
302+
return [...this.children].filter(child => child.matches("pfe-tab"));
303303
}
304304

305305
_panelForTab(tab) {
@@ -386,6 +386,8 @@ class PfeTabs extends PFElement {
386386
}
387387

388388
_onKeyDown(event) {
389+
event.stopPropagation();
390+
389391
if (event.target.getAttribute("role") !== "tab") {
390392
return;
391393
}
@@ -426,6 +428,8 @@ class PfeTabs extends PFElement {
426428
}
427429

428430
_onClick(event) {
431+
event.stopPropagation();
432+
429433
if (event.currentTarget.getAttribute("role") !== "tab") {
430434
return;
431435
}

‎elements/pfe-tabs/src/polyfills--pfe-tabs.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,3 +93,9 @@ if (!Array.prototype.findIndex) {
9393
writable: true
9494
});
9595
}
96+
97+
// @POLYFILL Element.prototype.matches
98+
// https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill
99+
if (!Element.prototype.matches) {
100+
Element.prototype.matches = Element.prototype.msMatchesSelector;
101+
}

‎elements/pfe-tabs/test/pfe-tabs_test.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,28 @@ <h2>Content 3</h2>
118118
<pfe-tab role="heading" slot="tab" id="historyTab2">Tab 1</pfe-tab>
119119
<pfe-tab-panel role="region" slot="panel">Content</pfe-tab-panel>
120120
</pfe-tabs>
121+
122+
<pfe-tabs id="tabs-in-tabs">
123+
<pfe-tab role="heading" slot="tab" id="tabs-in-tabs-1">Tab 1</pfe-tab>
124+
<pfe-tab-panel role="region" slot="panel">
125+
<pfe-tabs id="subtabset">
126+
<pfe-tab role="heading" slot="tab" id="subtab1">Sub Tab 1</pfe-tab>
127+
<pfe-tab-panel role="region" slot="panel">
128+
<h2>Content for Sub Tab 1</h2>
129+
</pfe-tab-panel>
130+
<pfe-tab role="heading" slot="tab" id="subtab2">Sub Tab 2</pfe-tab>
131+
<pfe-tab-panel role="region" slot="panel" id="subtab2panel">
132+
<h2>Content for Sub Tab 2</h2>
133+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
134+
</pfe-tab-panel>
135+
</pfe-tabs>
136+
</pfe-tab-panel>
137+
<pfe-tab role="heading" slot="tab" id="tabs-in-tabs-2">Tab 2</pfe-tab>
138+
<pfe-tab-panel role="region" slot="panel" id="tabs-in-tabs-panel2">
139+
<h1>Tab 2 Content</h1>
140+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
141+
</pfe-tab-panel>
142+
</pfe-tabs>
121143
<script>
122144
suite('<pfe-tabs>', () => {
123145
setup(() => {
@@ -358,6 +380,40 @@ <h2>Content 3</h2>
358380
assert.equal(tab.getAttribute("pfe-variant"), "earth");
359381
assert.equal(panel.getAttribute("pfe-variant"), "earth");
360382
});
383+
384+
test("it should function properly with tabs in tabs", done => {
385+
const tabset1 = document.querySelector("#tabs-in-tabs");
386+
const tabset1Tab1 = tabset1.querySelector("#tabs-in-tabs-1");
387+
const tabset1Tab2 = tabset1.querySelector("#tabs-in-tabs-2");
388+
const tabset1Tab2Panel = tabset1.querySelector("#tabs-in-tabs-panel2");
389+
const tabset2 = tabset1.querySelector("pfe-tabs");
390+
const tabset2SubTab1 = tabset2.querySelector("#subtab1");
391+
const tabset2SubTab2 = tabset2.querySelector("#subtab2");
392+
const tabset2SubTabPanel = tabset2.querySelector("#subtab2panel");
393+
394+
tabset2SubTab2.click();
395+
396+
flush(() => {
397+
assert.equal(tabset2SubTab2.getAttribute('aria-selected'), 'true');
398+
assert.isTrue(!tabset2SubTabPanel.hasAttribute('hidden'));
399+
400+
tabset1Tab2.click();
401+
402+
flush(() => {
403+
assert.equal(tabset1Tab2.getAttribute('aria-selected'), 'true');
404+
assert.isTrue(!tabset1Tab2Panel.hasAttribute('hidden'));
405+
406+
tabset1Tab1.click();
407+
408+
flush(() => {
409+
assert.equal(tabset2SubTab2.getAttribute('aria-selected'), 'true');
410+
assert.isTrue(!tabset2SubTabPanel.hasAttribute('hidden'));
411+
412+
done();
413+
});
414+
});
415+
});
416+
});
361417
});
362418

363419
suite('<pfe-tabs> Tab History', () => {

0 commit comments

Comments
 (0)