@patternfly/patternfly 4.198.0 → 4.199.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/base/_variables.scss +7 -0
- package/base/patternfly-variables.css +5 -0
- package/components/Page/page.css +154 -24
- package/components/Page/page.scss +23 -14
- package/components/ProgressStepper/progress-stepper.css +1 -0
- package/components/ProgressStepper/progress-stepper.scss +1 -0
- package/components/Table/table.css +25 -9
- package/components/Table/table.scss +46 -11
- package/components/Tabs/tabs.css +30 -0
- package/components/Tabs/tabs.scss +37 -0
- package/docs/components/Page/examples/Page.md +2 -2
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +7 -13
- package/docs/components/Table/examples/Table.md +1176 -5
- package/docs/components/Tabs/examples/Tabs.md +214 -0
- package/docs/demos/Page/examples/Page.md +1044 -0
- package/package.json +1 -1
- package/patternfly-base-no-reset.css +5 -0
- package/patternfly-base.css +5 -0
- package/patternfly-no-reset.css +215 -33
- package/patternfly.css +215 -33
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/functions.scss +37 -1
- package/sass-utilities/mixins.scss +75 -7
- package/sass-utilities/scss-variables.scss +16 -0
|
@@ -193,6 +193,217 @@ cssPrefix: pf-c-tabs
|
|
|
193
193
|
| `.pf-m-scrollable` | `.pf-c-tabs` | Enables the directional scroll buttons. |
|
|
194
194
|
| `.pf-c-tabs__scroll-button` | `<button>` | Initiates a tabs component scroll button. |
|
|
195
195
|
|
|
196
|
+
### Horizontal overflow
|
|
197
|
+
|
|
198
|
+
```html isBeta
|
|
199
|
+
<div class="pf-c-tabs" id="horizontal-overflow-example">
|
|
200
|
+
<ul class="pf-c-tabs__list">
|
|
201
|
+
<li class="pf-c-tabs__item">
|
|
202
|
+
<button
|
|
203
|
+
class="pf-c-tabs__link"
|
|
204
|
+
id="horizontal-overflow-example-users-link"
|
|
205
|
+
>
|
|
206
|
+
<span class="pf-c-tabs__item-text">Users</span>
|
|
207
|
+
</button>
|
|
208
|
+
</li>
|
|
209
|
+
<li class="pf-c-tabs__item pf-m-current">
|
|
210
|
+
<button
|
|
211
|
+
class="pf-c-tabs__link"
|
|
212
|
+
id="horizontal-overflow-example-containers-link"
|
|
213
|
+
>
|
|
214
|
+
<span class="pf-c-tabs__item-text">Containers</span>
|
|
215
|
+
</button>
|
|
216
|
+
</li>
|
|
217
|
+
<li class="pf-c-tabs__item">
|
|
218
|
+
<button
|
|
219
|
+
class="pf-c-tabs__link"
|
|
220
|
+
id="horizontal-overflow-example-database-link"
|
|
221
|
+
>
|
|
222
|
+
<span class="pf-c-tabs__item-text">Database</span>
|
|
223
|
+
</button>
|
|
224
|
+
</li>
|
|
225
|
+
|
|
226
|
+
<li class="pf-c-tabs__item">
|
|
227
|
+
<button
|
|
228
|
+
class="pf-c-tabs__link"
|
|
229
|
+
id="horizontal-overflow-example-server-link"
|
|
230
|
+
>
|
|
231
|
+
<span class="pf-c-tabs__item-text">Server</span>
|
|
232
|
+
</button>
|
|
233
|
+
</li>
|
|
234
|
+
<li class="pf-c-tabs__item">
|
|
235
|
+
<button
|
|
236
|
+
class="pf-c-tabs__link"
|
|
237
|
+
id="horizontal-overflow-example-system-link"
|
|
238
|
+
>
|
|
239
|
+
<span class="pf-c-tabs__item-text">System</span>
|
|
240
|
+
</button>
|
|
241
|
+
</li>
|
|
242
|
+
<li class="pf-c-tabs__item">
|
|
243
|
+
<button
|
|
244
|
+
class="pf-c-tabs__link"
|
|
245
|
+
id="horizontal-overflow-example-network-wired-link"
|
|
246
|
+
>
|
|
247
|
+
<span class="pf-c-tabs__item-text">Network</span>
|
|
248
|
+
</button>
|
|
249
|
+
</li>
|
|
250
|
+
<li class="pf-c-tabs__item pf-m-overflow">
|
|
251
|
+
<button
|
|
252
|
+
class="pf-c-tabs__link"
|
|
253
|
+
id="horizontal-overflow-example-more-link"
|
|
254
|
+
>
|
|
255
|
+
<span class="pf-c-tabs__item-text">More</span>
|
|
256
|
+
<span class="pf-c-tabs__link-toggle-icon">
|
|
257
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
258
|
+
</span>
|
|
259
|
+
</button>
|
|
260
|
+
</li>
|
|
261
|
+
</ul>
|
|
262
|
+
</div>
|
|
263
|
+
|
|
264
|
+
```
|
|
265
|
+
|
|
266
|
+
### Horizontal overflow expanded
|
|
267
|
+
|
|
268
|
+
```html isBeta
|
|
269
|
+
<div class="pf-c-tabs" id="horizontal-overflow-expanded-example">
|
|
270
|
+
<ul class="pf-c-tabs__list">
|
|
271
|
+
<li class="pf-c-tabs__item">
|
|
272
|
+
<button
|
|
273
|
+
class="pf-c-tabs__link"
|
|
274
|
+
id="horizontal-overflow-expanded-example-users-link"
|
|
275
|
+
>
|
|
276
|
+
<span class="pf-c-tabs__item-text">Users</span>
|
|
277
|
+
</button>
|
|
278
|
+
</li>
|
|
279
|
+
<li class="pf-c-tabs__item pf-m-current">
|
|
280
|
+
<button
|
|
281
|
+
class="pf-c-tabs__link"
|
|
282
|
+
id="horizontal-overflow-expanded-example-containers-link"
|
|
283
|
+
>
|
|
284
|
+
<span class="pf-c-tabs__item-text">Containers</span>
|
|
285
|
+
</button>
|
|
286
|
+
</li>
|
|
287
|
+
<li class="pf-c-tabs__item">
|
|
288
|
+
<button
|
|
289
|
+
class="pf-c-tabs__link"
|
|
290
|
+
id="horizontal-overflow-expanded-example-database-link"
|
|
291
|
+
>
|
|
292
|
+
<span class="pf-c-tabs__item-text">Database</span>
|
|
293
|
+
</button>
|
|
294
|
+
</li>
|
|
295
|
+
|
|
296
|
+
<li class="pf-c-tabs__item">
|
|
297
|
+
<button
|
|
298
|
+
class="pf-c-tabs__link"
|
|
299
|
+
id="horizontal-overflow-expanded-example-server-link"
|
|
300
|
+
>
|
|
301
|
+
<span class="pf-c-tabs__item-text">Server</span>
|
|
302
|
+
</button>
|
|
303
|
+
</li>
|
|
304
|
+
<li class="pf-c-tabs__item">
|
|
305
|
+
<button
|
|
306
|
+
class="pf-c-tabs__link"
|
|
307
|
+
id="horizontal-overflow-expanded-example-system-link"
|
|
308
|
+
>
|
|
309
|
+
<span class="pf-c-tabs__item-text">System</span>
|
|
310
|
+
</button>
|
|
311
|
+
</li>
|
|
312
|
+
<li class="pf-c-tabs__item">
|
|
313
|
+
<button
|
|
314
|
+
class="pf-c-tabs__link"
|
|
315
|
+
id="horizontal-overflow-expanded-example-network-wired-link"
|
|
316
|
+
>
|
|
317
|
+
<span class="pf-c-tabs__item-text">Network</span>
|
|
318
|
+
</button>
|
|
319
|
+
</li>
|
|
320
|
+
<li class="pf-c-tabs__item pf-m-overflow">
|
|
321
|
+
<button
|
|
322
|
+
class="pf-c-tabs__link pf-m-expanded"
|
|
323
|
+
aria-expanded="true"
|
|
324
|
+
id="horizontal-overflow-expanded-example-more-link"
|
|
325
|
+
>
|
|
326
|
+
<span class="pf-c-tabs__item-text">More</span>
|
|
327
|
+
<span class="pf-c-tabs__link-toggle-icon">
|
|
328
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
329
|
+
</span>
|
|
330
|
+
</button>
|
|
331
|
+
</li>
|
|
332
|
+
</ul>
|
|
333
|
+
</div>
|
|
334
|
+
|
|
335
|
+
```
|
|
336
|
+
|
|
337
|
+
### Horizontal overflow selected
|
|
338
|
+
|
|
339
|
+
```html isBeta
|
|
340
|
+
<div class="pf-c-tabs" id="horizontal-overflow-selected-example">
|
|
341
|
+
<ul class="pf-c-tabs__list">
|
|
342
|
+
<li class="pf-c-tabs__item">
|
|
343
|
+
<button
|
|
344
|
+
class="pf-c-tabs__link"
|
|
345
|
+
id="horizontal-overflow-selected-example-users-link"
|
|
346
|
+
>
|
|
347
|
+
<span class="pf-c-tabs__item-text">Users</span>
|
|
348
|
+
</button>
|
|
349
|
+
</li>
|
|
350
|
+
<li class="pf-c-tabs__item">
|
|
351
|
+
<button
|
|
352
|
+
class="pf-c-tabs__link"
|
|
353
|
+
id="horizontal-overflow-selected-example-containers-link"
|
|
354
|
+
>
|
|
355
|
+
<span class="pf-c-tabs__item-text">Containers</span>
|
|
356
|
+
</button>
|
|
357
|
+
</li>
|
|
358
|
+
<li class="pf-c-tabs__item">
|
|
359
|
+
<button
|
|
360
|
+
class="pf-c-tabs__link"
|
|
361
|
+
id="horizontal-overflow-selected-example-database-link"
|
|
362
|
+
>
|
|
363
|
+
<span class="pf-c-tabs__item-text">Database</span>
|
|
364
|
+
</button>
|
|
365
|
+
</li>
|
|
366
|
+
|
|
367
|
+
<li class="pf-c-tabs__item">
|
|
368
|
+
<button
|
|
369
|
+
class="pf-c-tabs__link"
|
|
370
|
+
id="horizontal-overflow-selected-example-server-link"
|
|
371
|
+
>
|
|
372
|
+
<span class="pf-c-tabs__item-text">Server</span>
|
|
373
|
+
</button>
|
|
374
|
+
</li>
|
|
375
|
+
<li class="pf-c-tabs__item">
|
|
376
|
+
<button
|
|
377
|
+
class="pf-c-tabs__link"
|
|
378
|
+
id="horizontal-overflow-selected-example-system-link"
|
|
379
|
+
>
|
|
380
|
+
<span class="pf-c-tabs__item-text">System</span>
|
|
381
|
+
</button>
|
|
382
|
+
</li>
|
|
383
|
+
<li class="pf-c-tabs__item">
|
|
384
|
+
<button
|
|
385
|
+
class="pf-c-tabs__link"
|
|
386
|
+
id="horizontal-overflow-selected-example-network-wired-link"
|
|
387
|
+
>
|
|
388
|
+
<span class="pf-c-tabs__item-text">Network</span>
|
|
389
|
+
</button>
|
|
390
|
+
</li>
|
|
391
|
+
<li class="pf-c-tabs__item pf-m-current pf-m-overflow">
|
|
392
|
+
<button
|
|
393
|
+
class="pf-c-tabs__link"
|
|
394
|
+
id="horizontal-overflow-selected-example-more-link"
|
|
395
|
+
>
|
|
396
|
+
<span class="pf-c-tabs__item-text">More</span>
|
|
397
|
+
<span class="pf-c-tabs__link-toggle-icon">
|
|
398
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
399
|
+
</span>
|
|
400
|
+
</button>
|
|
401
|
+
</li>
|
|
402
|
+
</ul>
|
|
403
|
+
</div>
|
|
404
|
+
|
|
405
|
+
```
|
|
406
|
+
|
|
196
407
|
### Vertical
|
|
197
408
|
|
|
198
409
|
```html
|
|
@@ -3463,6 +3674,7 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
|
|
|
3463
3674
|
| `disabled` | `button.pf-c-tabs__link` | Indicates that a tabs link is disabled. **Required when disabled** |
|
|
3464
3675
|
| `aria-disabled="true"` | `a.pf-c-tabs__link.pf-m-disabled`, `.pf-c-tabs__link.pf-m-aria-disabled` | Indicates to assistive technology that a tabs link is disabled. **Required when disabled** |
|
|
3465
3676
|
| `disabled` | `.pf-c-tabs__scroll-button` | Indicates that a scroll button is disable, typically when at the first or last item of a list or scroll buttons are hidden. **Required** |
|
|
3677
|
+
| `aria-expanded="true"` | `.pf-c-tabs__item` | Indicates that the overflow menu tab is expanded. **Required when expanded** |
|
|
3466
3678
|
|
|
3467
3679
|
### Usage
|
|
3468
3680
|
|
|
@@ -3490,6 +3702,8 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
|
|
|
3490
3702
|
| `.pf-m-fill` | `.pf-c-tabs` | Modifies the tabs to fill the available space. |
|
|
3491
3703
|
| `.pf-m-current` | `.pf-c-tabs__item` | Indicates that a tab item is currently selected. |
|
|
3492
3704
|
| `.pf-m-action` | `.pf-c-tabs__item` | Indicates that a tab item contains actions other than the tab link. |
|
|
3705
|
+
| `.pf-m-overflow` | `.pf-c-tabs__item` | Applies overflow menu styling to a tab item. |
|
|
3706
|
+
| `.pf-m-expanded` | `.pf-c-tabs__item` | Applies expanded styling to the overflow menu tab item. |
|
|
3493
3707
|
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of other adjacent components. |
|
|
3494
3708
|
| `.pf-m-page-insets` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |
|
|
3495
3709
|
| `.pf-m-color-scheme--light-300` | `.pf-c-tabs` | Modifies the tabs component tab background colors. |
|