@patternfly/patternfly 4.180.0 → 4.180.1

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.
Files changed (21) hide show
  1. package/components/MenuToggle/menu-toggle.css +6 -6
  2. package/components/MenuToggle/menu-toggle.scss +7 -6
  3. package/docs/components/Page/examples/Page.md +11 -2
  4. package/docs/components/Table/examples/Table.md +8 -0
  5. package/docs/components/Wizard/examples/Wizard.md +6 -6
  6. package/docs/demos/Alert/examples/Alert.md +20 -40
  7. package/docs/demos/BackToTop/examples/BackToTop.md +149 -249
  8. package/docs/demos/ContextSelector/examples/ContextSelector.md +80 -160
  9. package/docs/demos/Drawer/examples/Drawer.md +60 -120
  10. package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -31
  11. package/docs/demos/Masthead/examples/Masthead.md +140 -280
  12. package/docs/demos/Nav/examples/Nav.md +203 -343
  13. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +100 -200
  14. package/docs/demos/Page/examples/Page.md +575 -1123
  15. package/docs/demos/Tabs/examples/Tabs.md +11 -19
  16. package/docs/demos/Wizard/examples/Wizard.md +6 -2
  17. package/package.json +1 -1
  18. package/patternfly-no-reset.css +6 -6
  19. package/patternfly.css +6 -6
  20. package/patternfly.min.css +1 -1
  21. package/patternfly.min.css.map +1 -1
package/docs/demos/ContextSelector/examples/ContextSelector.md CHANGED
@@ -264,55 +264,35 @@ section: components
264
264
  <section class="pf-c-page__main-section pf-m-limit-width">
265
265
  <div class="pf-c-page__main-body">
266
266
  <div class="pf-l-gallery pf-m-gutter">
267
- <div class="pf-l-gallery__item">
268
- <div class="pf-c-card">
269
- <div class="pf-c-card__body">This is a card</div>
270
- </div>
267
+ <div class="pf-c-card">
268
+ <div class="pf-c-card__body">This is a card</div>
271
269
  </div>
272
- <div class="pf-l-gallery__item">
273
- <div class="pf-c-card">
274
- <div class="pf-c-card__body">This is a card</div>
275
- </div>
270
+ <div class="pf-c-card">
271
+ <div class="pf-c-card__body">This is a card</div>
276
272
  </div>
277
- <div class="pf-l-gallery__item">
278
- <div class="pf-c-card">
279
- <div class="pf-c-card__body">This is a card</div>
280
- </div>
273
+ <div class="pf-c-card">
274
+ <div class="pf-c-card__body">This is a card</div>
281
275
  </div>
282
- <div class="pf-l-gallery__item">
283
- <div class="pf-c-card">
284
- <div class="pf-c-card__body">This is a card</div>
285
- </div>
276
+ <div class="pf-c-card">
277
+ <div class="pf-c-card__body">This is a card</div>
286
278
  </div>
287
- <div class="pf-l-gallery__item">
288
- <div class="pf-c-card">
289
- <div class="pf-c-card__body">This is a card</div>
290
- </div>
279
+ <div class="pf-c-card">
280
+ <div class="pf-c-card__body">This is a card</div>
291
281
  </div>
292
- <div class="pf-l-gallery__item">
293
- <div class="pf-c-card">
294
- <div class="pf-c-card__body">This is a card</div>
295
- </div>
282
+ <div class="pf-c-card">
283
+ <div class="pf-c-card__body">This is a card</div>
296
284
  </div>
297
- <div class="pf-l-gallery__item">
298
- <div class="pf-c-card">
299
- <div class="pf-c-card__body">This is a card</div>
300
- </div>
285
+ <div class="pf-c-card">
286
+ <div class="pf-c-card__body">This is a card</div>
301
287
  </div>
302
- <div class="pf-l-gallery__item">
303
- <div class="pf-c-card">
304
- <div class="pf-c-card__body">This is a card</div>
305
- </div>
288
+ <div class="pf-c-card">
289
+ <div class="pf-c-card__body">This is a card</div>
306
290
  </div>
307
- <div class="pf-l-gallery__item">
308
- <div class="pf-c-card">
309
- <div class="pf-c-card__body">This is a card</div>
310
- </div>
291
+ <div class="pf-c-card">
292
+ <div class="pf-c-card__body">This is a card</div>
311
293
  </div>
312
- <div class="pf-l-gallery__item">
313
- <div class="pf-c-card">
314
- <div class="pf-c-card__body">This is a card</div>
315
- </div>
294
+ <div class="pf-c-card">
295
+ <div class="pf-c-card__body">This is a card</div>
316
296
  </div>
317
297
  </div>
318
298
  </div>
@@ -1356,55 +1336,35 @@ section: components
1356
1336
  >
1357
1337
  <div class="pf-c-page__main-body">
1358
1338
  <div class="pf-l-gallery pf-m-gutter">
1359
- <div class="pf-l-gallery__item">
1360
- <div class="pf-c-card">
1361
- <div class="pf-c-card__body">This is a card</div>
1362
- </div>
1339
+ <div class="pf-c-card">
1340
+ <div class="pf-c-card__body">This is a card</div>
1363
1341
  </div>
1364
- <div class="pf-l-gallery__item">
1365
- <div class="pf-c-card">
1366
- <div class="pf-c-card__body">This is a card</div>
1367
- </div>
1342
+ <div class="pf-c-card">
1343
+ <div class="pf-c-card__body">This is a card</div>
1368
1344
  </div>
1369
- <div class="pf-l-gallery__item">
1370
- <div class="pf-c-card">
1371
- <div class="pf-c-card__body">This is a card</div>
1372
- </div>
1345
+ <div class="pf-c-card">
1346
+ <div class="pf-c-card__body">This is a card</div>
1373
1347
  </div>
1374
- <div class="pf-l-gallery__item">
1375
- <div class="pf-c-card">
1376
- <div class="pf-c-card__body">This is a card</div>
1377
- </div>
1348
+ <div class="pf-c-card">
1349
+ <div class="pf-c-card__body">This is a card</div>
1378
1350
  </div>
1379
- <div class="pf-l-gallery__item">
1380
- <div class="pf-c-card">
1381
- <div class="pf-c-card__body">This is a card</div>
1382
- </div>
1351
+ <div class="pf-c-card">
1352
+ <div class="pf-c-card__body">This is a card</div>
1383
1353
  </div>
1384
- <div class="pf-l-gallery__item">
1385
- <div class="pf-c-card">
1386
- <div class="pf-c-card__body">This is a card</div>
1387
- </div>
1354
+ <div class="pf-c-card">
1355
+ <div class="pf-c-card__body">This is a card</div>
1388
1356
  </div>
1389
- <div class="pf-l-gallery__item">
1390
- <div class="pf-c-card">
1391
- <div class="pf-c-card__body">This is a card</div>
1392
- </div>
1357
+ <div class="pf-c-card">
1358
+ <div class="pf-c-card__body">This is a card</div>
1393
1359
  </div>
1394
- <div class="pf-l-gallery__item">
1395
- <div class="pf-c-card">
1396
- <div class="pf-c-card__body">This is a card</div>
1397
- </div>
1360
+ <div class="pf-c-card">
1361
+ <div class="pf-c-card__body">This is a card</div>
1398
1362
  </div>
1399
- <div class="pf-l-gallery__item">
1400
- <div class="pf-c-card">
1401
- <div class="pf-c-card__body">This is a card</div>
1402
- </div>
1363
+ <div class="pf-c-card">
1364
+ <div class="pf-c-card__body">This is a card</div>
1403
1365
  </div>
1404
- <div class="pf-l-gallery__item">
1405
- <div class="pf-c-card">
1406
- <div class="pf-c-card__body">This is a card</div>
1407
- </div>
1366
+ <div class="pf-c-card">
1367
+ <div class="pf-c-card__body">This is a card</div>
1408
1368
  </div>
1409
1369
  </div>
1410
1370
  </div>
@@ -2457,55 +2417,35 @@ section: components
2457
2417
  >
2458
2418
  <div class="pf-c-page__main-body">
2459
2419
  <div class="pf-l-gallery pf-m-gutter">
2460
- <div class="pf-l-gallery__item">
2461
- <div class="pf-c-card">
2462
- <div class="pf-c-card__body">This is a card</div>
2463
- </div>
2420
+ <div class="pf-c-card">
2421
+ <div class="pf-c-card__body">This is a card</div>
2464
2422
  </div>
2465
- <div class="pf-l-gallery__item">
2466
- <div class="pf-c-card">
2467
- <div class="pf-c-card__body">This is a card</div>
2468
- </div>
2423
+ <div class="pf-c-card">
2424
+ <div class="pf-c-card__body">This is a card</div>
2469
2425
  </div>
2470
- <div class="pf-l-gallery__item">
2471
- <div class="pf-c-card">
2472
- <div class="pf-c-card__body">This is a card</div>
2473
- </div>
2426
+ <div class="pf-c-card">
2427
+ <div class="pf-c-card__body">This is a card</div>
2474
2428
  </div>
2475
- <div class="pf-l-gallery__item">
2476
- <div class="pf-c-card">
2477
- <div class="pf-c-card__body">This is a card</div>
2478
- </div>
2429
+ <div class="pf-c-card">
2430
+ <div class="pf-c-card__body">This is a card</div>
2479
2431
  </div>
2480
- <div class="pf-l-gallery__item">
2481
- <div class="pf-c-card">
2482
- <div class="pf-c-card__body">This is a card</div>
2483
- </div>
2432
+ <div class="pf-c-card">
2433
+ <div class="pf-c-card__body">This is a card</div>
2484
2434
  </div>
2485
- <div class="pf-l-gallery__item">
2486
- <div class="pf-c-card">
2487
- <div class="pf-c-card__body">This is a card</div>
2488
- </div>
2435
+ <div class="pf-c-card">
2436
+ <div class="pf-c-card__body">This is a card</div>
2489
2437
  </div>
2490
- <div class="pf-l-gallery__item">
2491
- <div class="pf-c-card">
2492
- <div class="pf-c-card__body">This is a card</div>
2493
- </div>
2438
+ <div class="pf-c-card">
2439
+ <div class="pf-c-card__body">This is a card</div>
2494
2440
  </div>
2495
- <div class="pf-l-gallery__item">
2496
- <div class="pf-c-card">
2497
- <div class="pf-c-card__body">This is a card</div>
2498
- </div>
2441
+ <div class="pf-c-card">
2442
+ <div class="pf-c-card__body">This is a card</div>
2499
2443
  </div>
2500
- <div class="pf-l-gallery__item">
2501
- <div class="pf-c-card">
2502
- <div class="pf-c-card__body">This is a card</div>
2503
- </div>
2444
+ <div class="pf-c-card">
2445
+ <div class="pf-c-card__body">This is a card</div>
2504
2446
  </div>
2505
- <div class="pf-l-gallery__item">
2506
- <div class="pf-c-card">
2507
- <div class="pf-c-card__body">This is a card</div>
2508
- </div>
2447
+ <div class="pf-c-card">
2448
+ <div class="pf-c-card__body">This is a card</div>
2509
2449
  </div>
2510
2450
  </div>
2511
2451
  </div>
@@ -3616,55 +3556,35 @@ section: components
3616
3556
  <section class="pf-c-page__main-section pf-m-limit-width">
3617
3557
  <div class="pf-c-page__main-body">
3618
3558
  <div class="pf-l-gallery pf-m-gutter">
3619
- <div class="pf-l-gallery__item">
3620
- <div class="pf-c-card">
3621
- <div class="pf-c-card__body">This is a card</div>
3622
- </div>
3559
+ <div class="pf-c-card">
3560
+ <div class="pf-c-card__body">This is a card</div>
3623
3561
  </div>
3624
- <div class="pf-l-gallery__item">
3625
- <div class="pf-c-card">
3626
- <div class="pf-c-card__body">This is a card</div>
3627
- </div>
3562
+ <div class="pf-c-card">
3563
+ <div class="pf-c-card__body">This is a card</div>
3628
3564
  </div>
3629
- <div class="pf-l-gallery__item">
3630
- <div class="pf-c-card">
3631
- <div class="pf-c-card__body">This is a card</div>
3632
- </div>
3565
+ <div class="pf-c-card">
3566
+ <div class="pf-c-card__body">This is a card</div>
3633
3567
  </div>
3634
- <div class="pf-l-gallery__item">
3635
- <div class="pf-c-card">
3636
- <div class="pf-c-card__body">This is a card</div>
3637
- </div>
3568
+ <div class="pf-c-card">
3569
+ <div class="pf-c-card__body">This is a card</div>
3638
3570
  </div>
3639
- <div class="pf-l-gallery__item">
3640
- <div class="pf-c-card">
3641
- <div class="pf-c-card__body">This is a card</div>
3642
- </div>
3571
+ <div class="pf-c-card">
3572
+ <div class="pf-c-card__body">This is a card</div>
3643
3573
  </div>
3644
- <div class="pf-l-gallery__item">
3645
- <div class="pf-c-card">
3646
- <div class="pf-c-card__body">This is a card</div>
3647
- </div>
3574
+ <div class="pf-c-card">
3575
+ <div class="pf-c-card__body">This is a card</div>
3648
3576
  </div>
3649
- <div class="pf-l-gallery__item">
3650
- <div class="pf-c-card">
3651
- <div class="pf-c-card__body">This is a card</div>
3652
- </div>
3577
+ <div class="pf-c-card">
3578
+ <div class="pf-c-card__body">This is a card</div>
3653
3579
  </div>
3654
- <div class="pf-l-gallery__item">
3655
- <div class="pf-c-card">
3656
- <div class="pf-c-card__body">This is a card</div>
3657
- </div>
3580
+ <div class="pf-c-card">
3581
+ <div class="pf-c-card__body">This is a card</div>
3658
3582
  </div>
3659
- <div class="pf-l-gallery__item">
3660
- <div class="pf-c-card">
3661
- <div class="pf-c-card__body">This is a card</div>
3662
- </div>
3583
+ <div class="pf-c-card">
3584
+ <div class="pf-c-card__body">This is a card</div>
3663
3585
  </div>
3664
- <div class="pf-l-gallery__item">
3665
- <div class="pf-c-card">
3666
- <div class="pf-c-card__body">This is a card</div>
3667
- </div>
3586
+ <div class="pf-c-card">
3587
+ <div class="pf-c-card__body">This is a card</div>
3668
3588
  </div>
3669
3589
  </div>
3670
3590
  </div>
package/docs/demos/Drawer/examples/Drawer.md CHANGED
@@ -246,55 +246,35 @@ wrapperTag: div
246
246
  <section class="pf-c-page__main-section pf-m-limit-width">
247
247
  <div class="pf-c-page__main-body">
248
248
  <div class="pf-l-gallery pf-m-gutter">
249
- <div class="pf-l-gallery__item">
250
- <div class="pf-c-card">
251
- <div class="pf-c-card__body">This is a card</div>
252
- </div>
249
+ <div class="pf-c-card">
250
+ <div class="pf-c-card__body">This is a card</div>
253
251
  </div>
254
- <div class="pf-l-gallery__item">
255
- <div class="pf-c-card">
256
- <div class="pf-c-card__body">This is a card</div>
257
- </div>
252
+ <div class="pf-c-card">
253
+ <div class="pf-c-card__body">This is a card</div>
258
254
  </div>
259
- <div class="pf-l-gallery__item">
260
- <div class="pf-c-card">
261
- <div class="pf-c-card__body">This is a card</div>
262
- </div>
255
+ <div class="pf-c-card">
256
+ <div class="pf-c-card__body">This is a card</div>
263
257
  </div>
264
- <div class="pf-l-gallery__item">
265
- <div class="pf-c-card">
266
- <div class="pf-c-card__body">This is a card</div>
267
- </div>
258
+ <div class="pf-c-card">
259
+ <div class="pf-c-card__body">This is a card</div>
268
260
  </div>
269
- <div class="pf-l-gallery__item">
270
- <div class="pf-c-card">
271
- <div class="pf-c-card__body">This is a card</div>
272
- </div>
261
+ <div class="pf-c-card">
262
+ <div class="pf-c-card__body">This is a card</div>
273
263
  </div>
274
- <div class="pf-l-gallery__item">
275
- <div class="pf-c-card">
276
- <div class="pf-c-card__body">This is a card</div>
277
- </div>
264
+ <div class="pf-c-card">
265
+ <div class="pf-c-card__body">This is a card</div>
278
266
  </div>
279
- <div class="pf-l-gallery__item">
280
- <div class="pf-c-card">
281
- <div class="pf-c-card__body">This is a card</div>
282
- </div>
267
+ <div class="pf-c-card">
268
+ <div class="pf-c-card__body">This is a card</div>
283
269
  </div>
284
- <div class="pf-l-gallery__item">
285
- <div class="pf-c-card">
286
- <div class="pf-c-card__body">This is a card</div>
287
- </div>
270
+ <div class="pf-c-card">
271
+ <div class="pf-c-card__body">This is a card</div>
288
272
  </div>
289
- <div class="pf-l-gallery__item">
290
- <div class="pf-c-card">
291
- <div class="pf-c-card__body">This is a card</div>
292
- </div>
273
+ <div class="pf-c-card">
274
+ <div class="pf-c-card__body">This is a card</div>
293
275
  </div>
294
- <div class="pf-l-gallery__item">
295
- <div class="pf-c-card">
296
- <div class="pf-c-card__body">This is a card</div>
297
- </div>
276
+ <div class="pf-c-card">
277
+ <div class="pf-c-card__body">This is a card</div>
298
278
  </div>
299
279
  </div>
300
280
  </div>
@@ -556,55 +536,35 @@ wrapperTag: div
556
536
  <section class="pf-c-page__main-section pf-m-limit-width">
557
537
  <div class="pf-c-page__main-body">
558
538
  <div class="pf-l-gallery pf-m-gutter">
559
- <div class="pf-l-gallery__item">
560
- <div class="pf-c-card">
561
- <div class="pf-c-card__body">This is a card</div>
562
- </div>
539
+ <div class="pf-c-card">
540
+ <div class="pf-c-card__body">This is a card</div>
563
541
  </div>
564
- <div class="pf-l-gallery__item">
565
- <div class="pf-c-card">
566
- <div class="pf-c-card__body">This is a card</div>
567
- </div>
542
+ <div class="pf-c-card">
543
+ <div class="pf-c-card__body">This is a card</div>
568
544
  </div>
569
- <div class="pf-l-gallery__item">
570
- <div class="pf-c-card">
571
- <div class="pf-c-card__body">This is a card</div>
572
- </div>
545
+ <div class="pf-c-card">
546
+ <div class="pf-c-card__body">This is a card</div>
573
547
  </div>
574
- <div class="pf-l-gallery__item">
575
- <div class="pf-c-card">
576
- <div class="pf-c-card__body">This is a card</div>
577
- </div>
548
+ <div class="pf-c-card">
549
+ <div class="pf-c-card__body">This is a card</div>
578
550
  </div>
579
- <div class="pf-l-gallery__item">
580
- <div class="pf-c-card">
581
- <div class="pf-c-card__body">This is a card</div>
582
- </div>
551
+ <div class="pf-c-card">
552
+ <div class="pf-c-card__body">This is a card</div>
583
553
  </div>
584
- <div class="pf-l-gallery__item">
585
- <div class="pf-c-card">
586
- <div class="pf-c-card__body">This is a card</div>
587
- </div>
554
+ <div class="pf-c-card">
555
+ <div class="pf-c-card__body">This is a card</div>
588
556
  </div>
589
- <div class="pf-l-gallery__item">
590
- <div class="pf-c-card">
591
- <div class="pf-c-card__body">This is a card</div>
592
- </div>
557
+ <div class="pf-c-card">
558
+ <div class="pf-c-card__body">This is a card</div>
593
559
  </div>
594
- <div class="pf-l-gallery__item">
595
- <div class="pf-c-card">
596
- <div class="pf-c-card__body">This is a card</div>
597
- </div>
560
+ <div class="pf-c-card">
561
+ <div class="pf-c-card__body">This is a card</div>
598
562
  </div>
599
- <div class="pf-l-gallery__item">
600
- <div class="pf-c-card">
601
- <div class="pf-c-card__body">This is a card</div>
602
- </div>
563
+ <div class="pf-c-card">
564
+ <div class="pf-c-card__body">This is a card</div>
603
565
  </div>
604
- <div class="pf-l-gallery__item">
605
- <div class="pf-c-card">
606
- <div class="pf-c-card__body">This is a card</div>
607
- </div>
566
+ <div class="pf-c-card">
567
+ <div class="pf-c-card__body">This is a card</div>
608
568
  </div>
609
569
  </div>
610
570
  </div>
@@ -866,55 +826,35 @@ wrapperTag: div
866
826
  <section class="pf-c-page__main-section pf-m-limit-width">
867
827
  <div class="pf-c-page__main-body">
868
828
  <div class="pf-l-gallery pf-m-gutter">
869
- <div class="pf-l-gallery__item">
870
- <div class="pf-c-card">
871
- <div class="pf-c-card__body">This is a card</div>
872
- </div>
829
+ <div class="pf-c-card">
830
+ <div class="pf-c-card__body">This is a card</div>
873
831
  </div>
874
- <div class="pf-l-gallery__item">
875
- <div class="pf-c-card">
876
- <div class="pf-c-card__body">This is a card</div>
877
- </div>
832
+ <div class="pf-c-card">
833
+ <div class="pf-c-card__body">This is a card</div>
878
834
  </div>
879
- <div class="pf-l-gallery__item">
880
- <div class="pf-c-card">
881
- <div class="pf-c-card__body">This is a card</div>
882
- </div>
835
+ <div class="pf-c-card">
836
+ <div class="pf-c-card__body">This is a card</div>
883
837
  </div>
884
- <div class="pf-l-gallery__item">
885
- <div class="pf-c-card">
886
- <div class="pf-c-card__body">This is a card</div>
887
- </div>
838
+ <div class="pf-c-card">
839
+ <div class="pf-c-card__body">This is a card</div>
888
840
  </div>
889
- <div class="pf-l-gallery__item">
890
- <div class="pf-c-card">
891
- <div class="pf-c-card__body">This is a card</div>
892
- </div>
841
+ <div class="pf-c-card">
842
+ <div class="pf-c-card__body">This is a card</div>
893
843
  </div>
894
- <div class="pf-l-gallery__item">
895
- <div class="pf-c-card">
896
- <div class="pf-c-card__body">This is a card</div>
897
- </div>
844
+ <div class="pf-c-card">
845
+ <div class="pf-c-card__body">This is a card</div>
898
846
  </div>
899
- <div class="pf-l-gallery__item">
900
- <div class="pf-c-card">
901
- <div class="pf-c-card__body">This is a card</div>
902
- </div>
847
+ <div class="pf-c-card">
848
+ <div class="pf-c-card__body">This is a card</div>
903
849
  </div>
904
- <div class="pf-l-gallery__item">
905
- <div class="pf-c-card">
906
- <div class="pf-c-card__body">This is a card</div>
907
- </div>
850
+ <div class="pf-c-card">
851
+ <div class="pf-c-card__body">This is a card</div>
908
852
  </div>
909
- <div class="pf-l-gallery__item">
910
- <div class="pf-c-card">
911
- <div class="pf-c-card__body">This is a card</div>
912
- </div>
853
+ <div class="pf-c-card">
854
+ <div class="pf-c-card__body">This is a card</div>
913
855
  </div>
914
- <div class="pf-l-gallery__item">
915
- <div class="pf-c-card">
916
- <div class="pf-c-card__body">This is a card</div>
917
- </div>
856
+ <div class="pf-c-card">
857
+ <div class="pf-c-card__body">This is a card</div>
918
858
  </div>
919
859
  </div>
920
860
  </div>