Skip to content

Commit 465fc16

Browse files
chrisdo1chrisdo1
committed
US198278 tab design updates
* set tab panels to receive parent theme attribute * added more content to all content-set panels * set tab panel color attribute for on=dark
1 parent 7cd85da commit 465fc16

File tree

3 files changed

+78
-32
lines changed

3 files changed

+78
-32
lines changed

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

Lines changed: 69 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -75,23 +75,21 @@ <h1>&lt;pfe-content-set&gt;</h1>
7575
<p>This component will render your content in either an <a href="#accordions">accordion</a> or a <a href="#tabs">tabset</a> depending on the available space.</p>
7676
<p>Note: <em>On mobile ( &lt;768px ), all examples should render as an Accordion.</em></p>
7777
<br>
78-
<h2><a name="accordions">Accordions</a></h2>
79-
<p>On desktop at sizes below 768px, this component should render as an accordion.</p>
8078
<h2>On desktop, example below should render as accordion on a light theme:</h2>
8179
<h3>Container max: 500px</h3>
8280
<div style="max-width: 500px">
8381
<pfe-content-set pfe-variant="wind">
8482
<h2 pfe-content-set--header>Heading 1</h2>
8583
<div pfe-content-set--panel>
86-
<p>Content for heading 1.</p>
84+
<p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
8785
<div class="cta">
8886
<a href="https://redhat.com">Primary CTA</a>
8987
</div>
9088
</div>
9189
<h2 pfe-content-set--header>Heading 2</h2>
92-
<div pfe-content-set--panel>Content for heading 2.</div>
90+
<div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</div>
9391
<h2 pfe-content-set--header>Heading 3</h2>
94-
<div pfe-content-set--panel>Content for heading 3.</div>
92+
<div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</div>
9593
</pfe-content-set>
9694
</div>
9795

@@ -102,15 +100,15 @@ <h3>Container max: 500px</h3>
102100
<pfe-content-set pfe-variant="earth" on="dark">
103101
<h2 pfe-content-set--header>Heading 1</h2>
104102
<div pfe-content-set--panel>
105-
<p>Content for heading 1.</p>
103+
<p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
106104
<div class="cta">
107105
<a href="https://redhat.com">Primary CTA</a>
108106
</div>
109107
</div>
110108
<h2 pfe-content-set--header>Heading 2</h2>
111-
<div pfe-content-set--panel>Content for heading 2.</div>
109+
<div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</div>
112110
<h2 pfe-content-set--header>Heading 3</h2>
113-
<div pfe-content-set--panel>Content for heading 3.</div>
111+
<div pfe-content-set--panel>Content for heading 3. </div>
114112
</pfe-content-set>
115113
</div>
116114
</div>
@@ -122,15 +120,15 @@ <h2>On desktop, example below should render as tabs (wind style) on a dark backg
122120
<pfe-content-set pfe-variant="wind" on="dark">
123121
<h2 pfe-content-set--header>Heading 1</h2>
124122
<div pfe-content-set--panel>
125-
<p>Content for heading 1.</p>
123+
<p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
126124
<div class="cta">
127125
<a href="https://redhat.com">Primary CTA</a>
128126
</div>
129127
</div>
130128
<h2 pfe-content-set--header>Heading 2</h2>
131-
<div pfe-content-set--panel>Content for heading 2.</div>
129+
<div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</div>
132130
<h2 pfe-content-set--header>Heading 3</h2>
133-
<div pfe-content-set--panel>Content for heading 3.</div>
131+
<div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</div>
134132
</pfe-content-set>
135133
</div>
136134

@@ -140,15 +138,15 @@ <h2>On desktop, example below should render as tabs (wind style):</h2>
140138
<pfe-content-set pfe-variant="wind">
141139
<h2 pfe-content-set--header>Heading 1</h2>
142140
<div pfe-content-set--panel>
143-
<p>Content for heading 1.</p>
141+
<p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
144142
<div class="cta">
145143
<a href="https://redhat.com">Primary CTA</a>
146144
</div>
147145
</div>
148146
<h2 pfe-content-set--header>Heading 2</h2>
149-
<div pfe-content-set--panel>Content for heading 2.</div>
147+
<div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</div>
150148
<h2 pfe-content-set--header>Heading 3</h2>
151-
<div pfe-content-set--panel>Content for heading 3.</div>
149+
<div pfe-content-set--panel>Content for heading 3. </div>
152150
</pfe-content-set>
153151
</div>
154152

@@ -159,51 +157,72 @@ <h2>On desktop, example below should render as tabs (earth style):</h2>
159157
<pfe-content-set pfe-variant="earth">
160158
<h2 pfe-content-set--header>Heading 1</h2>
161159
<div pfe-content-set--panel>
162-
<p>Content for heading 1.</p>
160+
<p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
163161
<div class="cta">
164162
<a href="https://redhat.com">Primary CTA</a>
165163
</div>
166164
</div>
167165
<h2 pfe-content-set--header>Heading 2</h2>
168-
<div pfe-content-set--panel>Content for heading 2.</div>
166+
<div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</div>
169167
<h2 pfe-content-set--header>Heading 3</h2>
170-
<div pfe-content-set--panel>Content for heading 3.</div>
168+
<div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</div>
171169
</pfe-content-set>
172170
</div>
173171

174172
<hr>
173+
<h2>On desktop, example below should render as tabs on a dark theme:</h2>
174+
<div class="dark-background">
175+
<div>
176+
<pfe-content-set pfe-variant="earth" on="dark">
177+
<h2 pfe-content-set--header>Heading 1</h2>
178+
<div pfe-content-set--panel>
179+
<p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
180+
<div class="cta">
181+
<a href="https://redhat.com">Primary CTA</a>
182+
</div>
183+
</div>
184+
<h2 pfe-content-set--header>Heading 2</h2>
185+
<div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</div>
186+
<h2 pfe-content-set--header>Heading 3</h2>
187+
<div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</div>
188+
</pfe-content-set>
189+
</div>
190+
</div>
191+
192+
<hr>
193+
175194
<h2>On desktop, example below should render as vertical tabs (wind style):</h2>
176195
<div>
177196
<pfe-content-set vertical pfe-variant="wind">
178197
<h2 pfe-content-set--header>Heading 1</h2>
179198
<div pfe-content-set--panel>
180-
<p>Content for heading 1.</p>
199+
<p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
181200
<div class="cta">
182201
<a href="https://redhat.com">Primary CTA</a>
183202
</div>
184203
</div>
185204
<h2 pfe-content-set--header>Heading 2</h2>
186-
<div pfe-content-set--panel>Content for heading 2.</div>
205+
<div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</div>
187206
<h2 pfe-content-set--header>Heading 3</h2>
188-
<div pfe-content-set--panel>Content for heading 3.</div>
207+
<div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</div>
189208
</pfe-content-set>
190209
</div>
191210

192211
<hr>
193-
<h2>On desktop, example below should render as vertical tabs (wind style):</h2>
194-
<div>
195-
<pfe-content-set vertical pfe-variant="wind">
212+
<h2>On desktop, example below should render as vertical tabs (wind style) on a dark background:</h2>
213+
<div class="dark-background">
214+
<pfe-content-set vertical pfe-variant="wind" on="dark">
196215
<h2 pfe-content-set--header>Heading 1</h2>
197216
<div pfe-content-set--panel>
198-
<p>Content for heading 1.</p>
217+
<p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
199218
<div class="cta">
200219
<a href="https://redhat.com">Primary CTA</a>
201220
</div>
202221
</div>
203222
<h2 pfe-content-set--header>Heading 2</h2>
204-
<div pfe-content-set--panel>Content for heading 2.</div>
223+
<div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</div>
205224
<h2 pfe-content-set--header>Heading 3</h2>
206-
<div pfe-content-set--panel>Content for heading 3.</div>
225+
<div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</div>
207226
</pfe-content-set>
208227
</div>
209228

@@ -213,28 +232,47 @@ <h2>On desktop, example below should render as vertical tabs (earth style):</h2>
213232
<pfe-content-set vertical pfe-variant="earth">
214233
<h2 pfe-content-set--header>Heading 1</h2>
215234
<div pfe-content-set--panel>
216-
<p>Content for heading 1.</p>
235+
<p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
236+
<div class="cta">
237+
<a href="https://redhat.com">Primary CTA</a>
238+
</div>
239+
</div>
240+
<h2 pfe-content-set--header>Heading 2</h2>
241+
<div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</div>
242+
<h2 pfe-content-set--header>Heading 3</h2>
243+
<div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</div>
244+
</pfe-content-set>
245+
</div>
246+
247+
<hr>
248+
<h2>On desktop, example below should render as vertical tabs (earth style):</h2>
249+
<div class="dark-background">
250+
<pfe-content-set vertical pfe-variant="earth" on="dark">
251+
<h2 pfe-content-set--header>Heading 1</h2>
252+
<div pfe-content-set--panel>
253+
<p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
217254
<div class="cta">
218255
<a href="https://redhat.com">Primary CTA</a>
219256
</div>
220257
</div>
221258
<h2 pfe-content-set--header>Heading 2</h2>
222-
<div pfe-content-set--panel>Content for heading 2.</div>
259+
<div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</div>
223260
<h2 pfe-content-set--header>Heading 3</h2>
224-
<div pfe-content-set--panel>Content for heading 3.</div>
261+
<div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</div>
225262
</pfe-content-set>
226263
</div>
227264

265+
<hr>
228266
<pfe-content-set pfe-variant="wind">
229267
<h2 pfe-content-set--header>Heading 1</h2>
230268
<div pfe-content-set--panel>
231-
<p>Content for heading 1.</p>
269+
<p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
232270
<div class="cta">
233271
<a href="https://redhat.com">Primary CTA</a>
234272
</div>
235273
</div>
236274
<h2 pfe-content-set--header>Heading 2</h2>
237-
<div pfe-content-set--panel>Content for heading 2.</div>
275+
<div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</div>
238276
</pfe-content-set>
239277

240278
<h2>This content set's markup is incorrect.</h2>

‎elements/pfe-tabs/src/pfe-tab-panel.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@
99
display: none;
1010
}
1111

12+
:host([on="dark"]) {
13+
color: #{pfe-colors(text--on-dark)};
14+
@include pfe-theme($theme: "dark");
15+
}
16+
1217
/* Horizontal */
1318
:host([pfe-variant="wind"]) .container {
1419
@include pfe-tab-panel-container;

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,10 @@ class PfeTabs extends PFElement {
212212
if (this.getAttribute("on") === "dark") {
213213
this._allTabs().forEach(tab =>
214214
tab.setAttribute("on", "dark")
215-
);
215+
);
216+
this._allPanels().forEach(panel =>
217+
panel.setAttribute("on", "dark")
218+
);
216219
}
217220
break;
218221

0 commit comments

Comments
 (0)