Skip to content

Commit 6965df7

Browse files
castastrophekylebuch8
castastrophe
and
kylebuch8
authored
fix: Get nested accordions and tabs working inside the content-set (#975)
* fix Get nested accordions and nested tabs working inside the content-set * Remove test code from demo page * fix Revert prettier updates and add changelog * fix Update pfe-content-set to use pfe-id * fix add pfe-id to the query to fix failing test * fix Revert package-lock updates * using setAttribute instead of pfeId since this setter doesn't exist on the parent container Co-authored-by: Kyle Buchanan <[email protected]>
1 parent a413f5e commit 6965df7

File tree

7 files changed

+667
-235
lines changed

7 files changed

+667
-235
lines changed

‎CHANGELOG-prerelease.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
## Prerelease 51 ( TBD )
2+
3+
- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Support nested tabs or accordions inside pfe-content-set
4+
15
## Prerelease 50 ( 2020-06-26 )
26

37
- [3eecba0](https://github.com/patternfly/patternfly-elements/commit/3eecba06102bd3a92cdcd61780aafebb27175a95) fix: fixed offset to work more reliably and added some docs (#908)

‎elements/pfe-content-set/demo/index.html‎

Lines changed: 200 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<head>
55
<meta charset="utf-8">
66
<title>PatternFly Element | pfe-content-set Demo</title>
7-
<link rel="stylesheet" href="https://static.redhat.com/libs/redhat/redhat-font/2/webfonts/red-hat-font.css">
7+
<link rel="stylesheet" href="https://static.redhat.com/libs/redhat/redhat-font/2/webfonts/red-hat-font.css">
88
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0" />
99
<title>PatternFly Element | pfe-content-set Demo</title>
1010

@@ -55,6 +55,7 @@
5555
section h1 {
5656
font-size: 30px;
5757
}
58+
5859
section h3 {
5960
font-size: 20px;
6061
max-width: 1000px;
@@ -66,10 +67,11 @@
6667
margin: 0 10px 30px 10px;
6768
max-width: 1200px;
6869
}
70+
6971
@media (min-width: 768px) {
70-
.faux-container {
71-
margin: 0 30px 30px 30px;
72-
}
72+
.faux-container {
73+
margin: 0 30px 30px 30px;
74+
}
7375
}
7476

7577
.label {
@@ -89,10 +91,11 @@
8991
color: white;
9092
float: right;
9193
}
94+
9295
.floating-card {
9396
float: left;
94-
width:48%;
95-
margin-right:2%;
97+
width: 48%;
98+
margin-right: 2%;
9699
border: #eee solid 1px;
97100
padding: 20px;
98101
}
@@ -126,12 +129,19 @@ <h4 pfe-content-set--header>Heading 2</h4>
126129
mollis interdum.</div>
127130
<h4 pfe-content-set--header>Heading 3</h4>
128131
<div pfe-content-set--panel>
129-
<div class="floating-card">
130-
<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>
131-
</div>
132-
<div class="floating-card">
133-
<p>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-
</div>
132+
<div class="floating-card">
133+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
134+
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
135+
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
136+
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
137+
anim id est laborum.</p>
138+
</div>
139+
<div class="floating-card">
140+
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
141+
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
142+
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
143+
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
144+
</div>
135145
</div>
136146
</pfe-content-set>
137147
</section>
@@ -395,6 +405,184 @@ <h4 pfe-content-set--header>Heading 1</h4>
395405
</div>
396406
</section>
397407

408+
<section>
409+
<h3>Accordion nested inside a content-set component</h3>
410+
</section>
411+
<section class="faux-container" style="width: 600px;">
412+
<h4 class="label">pfe-content set with nested accordion, fixed width</h4>
413+
<pfe-content-set pfe-tab-history id="test-custom-id">
414+
<h4 pfe-content-set--header id="id1">Nested accordion, assigned to panel</h4>
415+
<pfe-accordion pfe-content-set--panel>
416+
<pfe-accordion-header>
417+
<h3>Heading 1</h3>
418+
</pfe-accordion-header>
419+
<pfe-accordion-panel>
420+
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
421+
et dolore magna aliquyam erat, sed diam voluptua.</p>
422+
<pfe-cta><a href="#">Foo</a></pfe-cta>
423+
</pfe-accordion-panel>
424+
<pfe-accordion-header>
425+
<h3>Heading 2</h3>
426+
</pfe-accordion-header>
427+
<pfe-accordion-panel>
428+
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
429+
est Lorem ipsum dolor sit amet.</p>
430+
</pfe-accordion-panel>
431+
<pfe-accordion-header>
432+
<h3>Heading 3</h3>
433+
</pfe-accordion-header>
434+
<pfe-accordion-panel>
435+
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
436+
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
437+
</p>
438+
</pfe-accordion-panel>
439+
</pfe-accordion>
440+
<h4 pfe-content-set--header id="id2">Nested accordion, inside a div</h4>
441+
<div pfe-content-set--panel>
442+
<pfe-accordion>
443+
<pfe-accordion-header>
444+
<h3>Heading 1</h3>
445+
</pfe-accordion-header>
446+
<pfe-accordion-panel>
447+
<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
448+
</pfe-accordion-panel>
449+
<pfe-accordion-header>
450+
<h3>Heading 2</h3>
451+
</pfe-accordion-header>
452+
<pfe-accordion-panel>
453+
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
454+
labore et dolore magna aliquyam erat, sed diam voluptua.</p>
455+
</pfe-accordion-panel>
456+
<pfe-accordion-header>
457+
<h3>Heading 3</h3>
458+
</pfe-accordion-header>
459+
<pfe-accordion-panel>
460+
<p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
461+
sanctus est Lorem ipsum dolor sit amet.</p>
462+
</pfe-accordion-panel>
463+
</pfe-accordion>
464+
</div>
465+
<h4 pfe-content-set--header id="id3">Nested tabs</h4>
466+
<pfe-tabs pfe-content-set--panel id="tabs">
467+
<pfe-tab role="heading" slot="tab" id="tab1">
468+
<h2>Tab 1</h2>
469+
</pfe-tab>
470+
<pfe-tab-panel role="region" slot="panel">
471+
<h2>Content 1</h2>
472+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
473+
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
474+
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
475+
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
476+
anim id est laborum.</p>
477+
</pfe-tab-panel>
478+
<pfe-tab role="heading" slot="tab" id="tab2">
479+
<h3>Tab</h3>
480+
<h4>2</h4>
481+
</pfe-tab>
482+
<pfe-tab-panel role="region" slot="panel">
483+
<h2>Content 2</h2>
484+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
485+
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
486+
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
487+
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
488+
anim id est laborum.</p>
489+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
490+
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
491+
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
492+
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
493+
anim id est laborum.</p>
494+
</pfe-tab-panel>
495+
</pfe-tabs>
496+
</pfe-content-set>
497+
</section>
498+
<section class="faux-container">
499+
<h4 class="label">pfe-content set with nested accordion</h4>
500+
<pfe-content-set pfe-tab-history id="test-custom-id">
501+
<h4 pfe-content-set--header id="newHeader">Nested accordion, assigned to panel</h4>
502+
<pfe-accordion pfe-content-set--panel>
503+
<pfe-accordion-header>
504+
<h3>Heading 1</h3>
505+
</pfe-accordion-header>
506+
<pfe-accordion-panel>
507+
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
508+
et dolore magna aliquyam erat, sed diam voluptua.</p>
509+
<pfe-cta><a href="#">Foo</a></pfe-cta>
510+
</pfe-accordion-panel>
511+
<pfe-accordion-header>
512+
<h3>Heading 2</h3>
513+
</pfe-accordion-header>
514+
<pfe-accordion-panel>
515+
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
516+
est Lorem ipsum dolor sit amet.</p>
517+
</pfe-accordion-panel>
518+
<pfe-accordion-header>
519+
<h3>Heading 3</h3>
520+
</pfe-accordion-header>
521+
<pfe-accordion-panel>
522+
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
523+
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
524+
</p>
525+
</pfe-accordion-panel>
526+
</pfe-accordion>
527+
<h4 pfe-content-set--header id="newPanel">Nested accordion, inside a div</h4>
528+
<div pfe-content-set--panel>
529+
<pfe-accordion>
530+
<pfe-accordion-header>
531+
<h3>Heading 1</h3>
532+
</pfe-accordion-header>
533+
<pfe-accordion-panel>
534+
<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
535+
</pfe-accordion-panel>
536+
<pfe-accordion-header>
537+
<h3>Heading 2</h3>
538+
</pfe-accordion-header>
539+
<pfe-accordion-panel>
540+
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
541+
labore et dolore magna aliquyam erat, sed diam voluptua.</p>
542+
</pfe-accordion-panel>
543+
<pfe-accordion-header>
544+
<h3>Heading 3</h3>
545+
</pfe-accordion-header>
546+
<pfe-accordion-panel>
547+
<p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
548+
sanctus est Lorem ipsum dolor sit amet.</p>
549+
</pfe-accordion-panel>
550+
</pfe-accordion>
551+
</div>
552+
<h4 pfe-content-set--header id="id3">Nested tabs</h4>
553+
<pfe-tabs pfe-content-set--panel id="tabs">
554+
<pfe-tab role="heading" slot="tab" id="tab1">
555+
<h2>Tab 1</h2>
556+
</pfe-tab>
557+
<pfe-tab-panel role="region" slot="panel">
558+
<h2>Content 1</h2>
559+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
560+
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
561+
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
562+
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
563+
anim id est laborum.</p>
564+
</pfe-tab-panel>
565+
<pfe-tab role="heading" slot="tab" id="tab2">
566+
<h3>Tab</h3>
567+
<h4>2</h4>
568+
</pfe-tab>
569+
<pfe-tab-panel role="region" slot="panel">
570+
<h2>Content 2</h2>
571+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
572+
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
573+
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
574+
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
575+
anim id est laborum.</p>
576+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
577+
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
578+
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
579+
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
580+
anim id est laborum.</p>
581+
</pfe-tab-panel>
582+
</pfe-tabs>
583+
</pfe-content-set>
584+
</section>
585+
398586
<script>
399587
var btn = document.querySelector("#addHeaderAndPanelBtn");
400588
var pfeContentSet = document.querySelector("#dynamic");

‎elements/pfe-content-set/src/pfe-content-set.js‎

Lines changed: 33 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,10 @@ class PfeContentSet extends PFElement {
4646
: window.outerWidth > breakpointValue;
4747
}
4848

49+
get contentSetId() {
50+
return this.id || this.getAttribute("pfe-id") || this.randomId;
51+
}
52+
4953
constructor() {
5054
super(PfeContentSet, { delayRender: true });
5155

@@ -89,12 +93,24 @@ class PfeContentSet extends PFElement {
8993
}
9094

9195
_buildAccordion() {
92-
const existingAccordion = this.querySelector("pfe-accordion");
96+
let accordion;
97+
98+
// Use the existing accordion if it exists
99+
const existingAccordion = this.querySelector(
100+
`[pfe-id="${this.contentSetId}"]`
101+
);
102+
93103
// Use a document fragment for efficiency
94104
const fragment = document.createDocumentFragment();
95-
// Use the existing accordion or create the accordion wrapper component
96-
const accordion =
97-
existingAccordion || document.createElement("pfe-accordion");
105+
106+
// Create the accordion wrapper component or use the existing component
107+
if (!existingAccordion) {
108+
// Create the accordion wrapper component with a unique ID
109+
accordion = document.createElement("pfe-accordion");
110+
accordion.setAttribute("pfe-id", this.contentSetId);
111+
} else {
112+
accordion = existingAccordion;
113+
}
98114

99115
// Iterate over each element in the light DOM
100116
[...this.children].forEach(child => {
@@ -116,19 +132,26 @@ class PfeContentSet extends PFElement {
116132

117133
if (!existingAccordion) {
118134
fragment.appendChild(accordion);
119-
}
120-
121-
if (!existingAccordion) {
122135
this.appendChild(fragment);
123136
}
124137
}
125138

126139
_buildTabs() {
127-
const existingTabs = this.querySelector("pfe-tabs");
140+
let tabs;
141+
142+
// Use the existing tabs if they exist
143+
let existingTabs = this.querySelector(`[pfe-id="${this.contentSetId}"]`);
144+
128145
// Use a document fragment for efficiency
129146
const fragment = document.createDocumentFragment();
130-
// Use the existing tabs or create the tabs wrapper component
131-
const tabs = existingTabs || document.createElement("pfe-tabs");
147+
148+
// Create the tabs wrapper component or use the existing tabs
149+
if (!existingTabs) {
150+
tabs = document.createElement("pfe-tabs");
151+
tabs.setAttribute("pfe-id", this.contentSetId);
152+
} else {
153+
tabs = existingTabs;
154+
}
132155

133156
// Iterate over each element in the light DOM
134157
[...this.children].forEach(child => {
@@ -178,10 +201,6 @@ class PfeContentSet extends PFElement {
178201
tabs.setAttribute("pfe-tab-align", this.align.value);
179202
}
180203

181-
if (this.id) {
182-
tabs.setAttribute("pfe-id", this.id);
183-
}
184-
185204
if (this.hasAttribute("pfe-tab-history")) {
186205
tabs.setAttribute("pfe-tab-history", true);
187206
}

‎elements/pfe-content-set/src/pfe-content-set.json‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -49,13 +49,6 @@
4949
"enum": ["center"],
5050
"prefixed": true
5151
},
52-
"on": {
53-
"title": "Context",
54-
"type": "string",
55-
"enum": ["light", "dark"],
56-
"default": "light",
57-
"prefixed": false
58-
},
5952
"breakpoint": {
6053
"title": "Custom breakpoint",
6154
"type": "string",

0 commit comments

Comments
 (0)