@patternfly/patternfly 4.180.0 → 4.182.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.
Files changed (33) hide show
  1. package/assets/images/status-icon-sprite.svg +38 -0
  2. package/components/FormControl/form-control.css +26 -0
  3. package/components/FormControl/form-control.scss +30 -1
  4. package/components/Masthead/masthead.css +21 -27
  5. package/components/Masthead/masthead.scss +21 -27
  6. package/components/Menu/menu.css +10 -0
  7. package/components/Menu/menu.scss +14 -0
  8. package/components/MenuToggle/menu-toggle.css +141 -7
  9. package/components/MenuToggle/menu-toggle.scss +208 -8
  10. package/docs/components/FormControl/examples/FormControl.md +151 -0
  11. package/docs/components/Menu/examples/Menu.md +67 -2
  12. package/docs/components/MenuToggle/examples/MenuToggle.md +552 -20
  13. package/docs/components/Page/examples/Page.md +11 -2
  14. package/docs/components/Table/examples/Table.md +8 -0
  15. package/docs/components/Wizard/examples/Wizard.md +6 -6
  16. package/docs/demos/Alert/examples/Alert.md +20 -40
  17. package/docs/demos/BackToTop/examples/BackToTop.md +149 -249
  18. package/docs/demos/ContextSelector/examples/ContextSelector.md +86 -166
  19. package/docs/demos/DescriptionList/examples/DescriptionList.md +3358 -0
  20. package/docs/demos/Drawer/examples/Drawer.md +60 -120
  21. package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -31
  22. package/docs/demos/Masthead/examples/Masthead.md +144 -284
  23. package/docs/demos/Nav/examples/Nav.md +203 -343
  24. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +100 -200
  25. package/docs/demos/Page/examples/Page.md +589 -1137
  26. package/docs/demos/Table/examples/Table.md +26 -26
  27. package/docs/demos/Tabs/examples/Tabs.md +11 -19
  28. package/docs/demos/Wizard/examples/Wizard.md +6 -2
  29. package/package.json +1 -1
  30. package/patternfly-no-reset.css +198 -34
  31. package/patternfly.css +198 -34
  32. package/patternfly.min.css +1 -1
  33. 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>
@@ -390,7 +370,7 @@ section: components
390
370
  <button
391
371
  class="pf-c-app-launcher__toggle"
392
372
  type="button"
393
- id="-button"
373
+ id="-icon-group--app-launcher-button"
394
374
  aria-expanded="false"
395
375
  aria-label="Application launcher"
396
376
  >
@@ -1120,7 +1100,7 @@ section: components
1120
1100
  </div>
1121
1101
  <div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1122
1102
  <div
1123
- class="pf-c-dropdown"
1103
+ class="pf-c-dropdown pf-m-full-height"
1124
1104
  style="--pf-c-dropdown--MaxWidth: 20ch;"
1125
1105
  >
1126
1106
  <button
@@ -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>
@@ -1489,7 +1449,7 @@ section: components
1489
1449
  <button
1490
1450
  class="pf-c-app-launcher__toggle"
1491
1451
  type="button"
1492
- id="-button"
1452
+ id="-icon-group--app-launcher-button"
1493
1453
  aria-expanded="false"
1494
1454
  aria-label="Application launcher"
1495
1455
  >
@@ -2219,7 +2179,7 @@ section: components
2219
2179
  </div>
2220
2180
  <div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2221
2181
  <div
2222
- class="pf-c-dropdown"
2182
+ class="pf-c-dropdown pf-m-full-height"
2223
2183
  style="--pf-c-dropdown--MaxWidth: 20ch;"
2224
2184
  >
2225
2185
  <button
@@ -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>
@@ -2595,7 +2535,7 @@ section: components
2595
2535
  <button
2596
2536
  class="pf-c-app-launcher__toggle"
2597
2537
  type="button"
2598
- id="-button"
2538
+ id="context-selector-in-page-content-demo-masthead-icon-group--app-launcher-button"
2599
2539
  aria-expanded="false"
2600
2540
  aria-label="Application launcher"
2601
2541
  >
@@ -3272,7 +3212,7 @@ section: components
3272
3212
  </div>
3273
3213
  <div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
3274
3214
  <div
3275
- class="pf-c-dropdown"
3215
+ class="pf-c-dropdown pf-m-full-height"
3276
3216
  style="--pf-c-dropdown--MaxWidth: 20ch;"
3277
3217
  >
3278
3218
  <button
@@ -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>