@patternfly/patternfly 5.2.0-prerelease.3 → 5.2.0-prerelease.5

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 (28) hide show
  1. package/base/_globals.scss +2 -4
  2. package/base/patternfly-globals.css +2 -2
  3. package/components/Accordion/accordion.css +10 -1
  4. package/components/Accordion/accordion.scss +13 -1
  5. package/docs/components/Accordion/examples/Accordion.md +95 -0
  6. package/docs/components/LogViewer/examples/LogViewer.md +130 -130
  7. package/docs/components/Menu/examples/Menu.md +507 -473
  8. package/docs/components/MenuToggle/examples/MenuToggle.md +106 -114
  9. package/docs/components/Nav/examples/Navigation.md +140 -113
  10. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  11. package/docs/components/Toolbar/examples/Toolbar.md +462 -2791
  12. package/docs/demos/CardView/examples/CardView.md +32 -51
  13. package/docs/demos/DataList/examples/DataList.md +182 -318
  14. package/docs/demos/Masthead/examples/Masthead.md +48 -207
  15. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +2 -1
  16. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +80 -268
  17. package/docs/demos/Table/examples/Table.md +1004 -1787
  18. package/docs/demos/Tabs/examples/Tabs.md +2 -2
  19. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  20. package/docs/demos/Toolbar/examples/Toolbar.md +691 -1015
  21. package/package.json +2 -2
  22. package/patternfly-base-theme-dark-unversioned.css +2 -2
  23. package/patternfly-base.css +2 -2
  24. package/patternfly-no-globals.css +10 -1
  25. package/patternfly-theme-dark-unversioned.css +12 -3
  26. package/patternfly.css +12 -3
  27. package/patternfly.min.css +1 -1
  28. package/patternfly.min.css.map +1 -1
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -217,10 +217,10 @@ wrapperTag: div
217
217
  >
218
218
  <div class="pf-v5-c-toolbar__toggle">
219
219
  <button
220
- class="pf-v5-c-button pf-m-plain"
220
+ class="pf-v5-c-menu-toggle pf-m-plain"
221
221
  type="button"
222
- aria-label="Show filters"
223
222
  aria-expanded="false"
223
+ aria-label="Show filters"
224
224
  aria-controls="primary-detail-expanded-example-drawer-toolbar-expandable-content"
225
225
  >
226
226
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -234,83 +234,25 @@ wrapperTag: div
234
234
  role="group"
235
235
  >
236
236
  <div class="pf-v5-c-input-group__item">
237
- <div class="pf-v5-c-select" style="width: 124px">
238
- <span
239
- id="primary-detail-expanded-example-drawer-toolbar-select-name-label"
240
- hidden
241
- >Choose one</span>
242
-
243
- <button
244
- class="pf-v5-c-select__toggle"
245
- type="button"
246
- id="primary-detail-expanded-example-drawer-toolbar-select-name-toggle"
247
- aria-haspopup="true"
248
- aria-expanded="false"
249
- aria-labelledby="primary-detail-expanded-example-drawer-toolbar-select-name-label primary-detail-expanded-example-drawer-toolbar-select-name-toggle"
250
- >
251
- <div class="pf-v5-c-select__toggle-wrapper">
252
- <span class="pf-v5-c-select__toggle-icon">
253
- <i class="fas fa-filter" aria-hidden="true"></i>
254
- </span>
255
- <span class="pf-v5-c-select__toggle-text">Name</span>
256
- </div>
257
- <span class="pf-v5-c-select__toggle-arrow">
237
+ <button
238
+ class="pf-v5-c-menu-toggle"
239
+ type="button"
240
+ aria-expanded="false"
241
+ id="primary-detail-expanded-example-drawer-toolbar-search-filter-menu"
242
+ >
243
+ <span class="pf-v5-c-menu-toggle__icon">
244
+ <i class="fas fa-filter" aria-hidden="true"></i>
245
+ </span>
246
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
247
+ <span class="pf-v5-c-menu-toggle__controls">
248
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
258
249
  <i
259
250
  class="fas fa-caret-down"
260
251
  aria-hidden="true"
261
252
  ></i>
262
253
  </span>
263
- </button>
264
-
265
- <ul
266
- class="pf-v5-c-select__menu"
267
- role="listbox"
268
- aria-labelledby="primary-detail-expanded-example-drawer-toolbar-select-name-label"
269
- hidden
270
- >
271
- <li role="presentation">
272
- <button
273
- class="pf-v5-c-select__menu-item"
274
- role="option"
275
- >Running</button>
276
- </li>
277
- <li role="presentation">
278
- <button
279
- class="pf-v5-c-select__menu-item pf-m-selected"
280
- role="option"
281
- aria-selected="true"
282
- >
283
- Stopped
284
- <span
285
- class="pf-v5-c-select__menu-item-icon"
286
- >
287
- <i
288
- class="fas fa-check"
289
- aria-hidden="true"
290
- ></i>
291
- </span>
292
- </button>
293
- </li>
294
- <li role="presentation">
295
- <button
296
- class="pf-v5-c-select__menu-item"
297
- role="option"
298
- >Down</button>
299
- </li>
300
- <li role="presentation">
301
- <button
302
- class="pf-v5-c-select__menu-item"
303
- role="option"
304
- >Degraded</button>
305
- </li>
306
- <li role="presentation">
307
- <button
308
- class="pf-v5-c-select__menu-item"
309
- role="option"
310
- >Needs maintenance</button>
311
- </li>
312
- </ul>
313
- </div>
254
+ </span>
255
+ </button>
314
256
  </div>
315
257
  <div class="pf-v5-c-input-group__item pf-m-fill">
316
258
  <div class="pf-v5-c-text-input-group">
@@ -1486,10 +1428,10 @@ wrapperTag: div
1486
1428
  >
1487
1429
  <div class="pf-v5-c-toolbar__toggle">
1488
1430
  <button
1489
- class="pf-v5-c-button pf-m-plain"
1431
+ class="pf-v5-c-menu-toggle pf-m-plain"
1490
1432
  type="button"
1491
- aria-label="Show filters"
1492
1433
  aria-expanded="false"
1434
+ aria-label="Show filters"
1493
1435
  aria-controls="primary-detail-collapsed-example-drawer-toolbar-expandable-content"
1494
1436
  >
1495
1437
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -1503,83 +1445,25 @@ wrapperTag: div
1503
1445
  role="group"
1504
1446
  >
1505
1447
  <div class="pf-v5-c-input-group__item">
1506
- <div class="pf-v5-c-select" style="width: 124px">
1507
- <span
1508
- id="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
1509
- hidden
1510
- >Choose one</span>
1511
-
1512
- <button
1513
- class="pf-v5-c-select__toggle"
1514
- type="button"
1515
- id="primary-detail-collapsed-example-drawer-toolbar-select-name-toggle"
1516
- aria-haspopup="true"
1517
- aria-expanded="false"
1518
- aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-name-label primary-detail-collapsed-example-drawer-toolbar-select-name-toggle"
1519
- >
1520
- <div class="pf-v5-c-select__toggle-wrapper">
1521
- <span class="pf-v5-c-select__toggle-icon">
1522
- <i class="fas fa-filter" aria-hidden="true"></i>
1523
- </span>
1524
- <span class="pf-v5-c-select__toggle-text">Name</span>
1525
- </div>
1526
- <span class="pf-v5-c-select__toggle-arrow">
1448
+ <button
1449
+ class="pf-v5-c-menu-toggle"
1450
+ type="button"
1451
+ aria-expanded="false"
1452
+ id="primary-detail-collapsed-example-drawer-toolbar-search-filter-menu"
1453
+ >
1454
+ <span class="pf-v5-c-menu-toggle__icon">
1455
+ <i class="fas fa-filter" aria-hidden="true"></i>
1456
+ </span>
1457
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
1458
+ <span class="pf-v5-c-menu-toggle__controls">
1459
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1527
1460
  <i
1528
1461
  class="fas fa-caret-down"
1529
1462
  aria-hidden="true"
1530
1463
  ></i>
1531
1464
  </span>
1532
- </button>
1533
-
1534
- <ul
1535
- class="pf-v5-c-select__menu"
1536
- role="listbox"
1537
- aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
1538
- hidden
1539
- >
1540
- <li role="presentation">
1541
- <button
1542
- class="pf-v5-c-select__menu-item"
1543
- role="option"
1544
- >Running</button>
1545
- </li>
1546
- <li role="presentation">
1547
- <button
1548
- class="pf-v5-c-select__menu-item pf-m-selected"
1549
- role="option"
1550
- aria-selected="true"
1551
- >
1552
- Stopped
1553
- <span
1554
- class="pf-v5-c-select__menu-item-icon"
1555
- >
1556
- <i
1557
- class="fas fa-check"
1558
- aria-hidden="true"
1559
- ></i>
1560
- </span>
1561
- </button>
1562
- </li>
1563
- <li role="presentation">
1564
- <button
1565
- class="pf-v5-c-select__menu-item"
1566
- role="option"
1567
- >Down</button>
1568
- </li>
1569
- <li role="presentation">
1570
- <button
1571
- class="pf-v5-c-select__menu-item"
1572
- role="option"
1573
- >Degraded</button>
1574
- </li>
1575
- <li role="presentation">
1576
- <button
1577
- class="pf-v5-c-select__menu-item"
1578
- role="option"
1579
- >Needs maintenance</button>
1580
- </li>
1581
- </ul>
1582
- </div>
1465
+ </span>
1466
+ </button>
1583
1467
  </div>
1584
1468
  <div class="pf-v5-c-input-group__item pf-m-fill">
1585
1469
  <div class="pf-v5-c-text-input-group">
@@ -2676,10 +2560,10 @@ wrapperTag: div
2676
2560
  >
2677
2561
  <div class="pf-v5-c-toolbar__toggle">
2678
2562
  <button
2679
- class="pf-v5-c-button pf-m-plain"
2563
+ class="pf-v5-c-menu-toggle pf-m-plain"
2680
2564
  type="button"
2681
- aria-label="Show filters"
2682
2565
  aria-expanded="false"
2566
+ aria-label="Show filters"
2683
2567
  aria-controls="primary-detail-content-body-padding-example-drawer-toolbar-expandable-content"
2684
2568
  >
2685
2569
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -3754,65 +3638,46 @@ wrapperTag: div
3754
3638
  >
3755
3639
  <div class="pf-v5-c-toolbar__toggle">
3756
3640
  <button
3757
- class="pf-v5-c-button pf-m-plain"
3641
+ class="pf-v5-c-menu-toggle pf-m-plain"
3758
3642
  type="button"
3759
- aria-label="Show filters"
3760
3643
  aria-expanded="false"
3644
+ aria-label="Show filters"
3761
3645
  aria-controls="primary-detail-card-view-expanded-example-drawer-toolbar-expandable-content"
3762
3646
  >
3763
3647
  <i class="fas fa-filter" aria-hidden="true"></i>
3764
3648
  </button>
3765
3649
  </div>
3766
3650
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
3767
- <div class="pf-v5-c-dropdown">
3768
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
3769
- <label
3770
- class="pf-v5-c-dropdown__toggle-check"
3771
- for="primary-detail-card-view-expanded-example-drawer-toolbar-bulk-select-toggle-check"
3772
- >
3773
- <div class="pf-v5-c-check pf-m-standalone">
3774
- <input
3775
- class="pf-v5-c-check__input"
3776
- type="checkbox"
3777
- id="primary-detail-card-view-expanded-example-drawer-toolbar-bulk-select-toggle-check"
3778
- aria-label="Select all"
3779
- />
3780
- </div>
3781
- </label>
3782
-
3783
- <button
3784
- class="pf-v5-c-dropdown__toggle-button"
3785
- type="button"
3786
- aria-expanded="false"
3787
- id="primary-detail-card-view-expanded-example-drawer-toolbar-bulk-select-toggle-button"
3788
- aria-label="Dropdown toggle"
3789
- >
3790
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3791
- </button>
3792
- </div>
3793
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
3794
- <li role="none">
3795
- <button
3796
- class="pf-v5-c-dropdown__menu-item"
3797
- role="menuitem"
3798
- type="button"
3799
- >Select all</button>
3800
- </li>
3801
- <li role="none">
3802
- <button
3803
- class="pf-v5-c-dropdown__menu-item"
3804
- role="menuitem"
3805
- type="button"
3806
- >Select none</button>
3807
- </li>
3808
- <li role="none">
3809
- <button
3810
- class="pf-v5-c-dropdown__menu-item"
3811
- role="menuitem"
3812
- type="button"
3813
- >Other action</button>
3814
- </li>
3815
- </ul>
3651
+ <div
3652
+ class="pf-v5-c-menu-toggle pf-m-split-button"
3653
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-check"
3654
+ >
3655
+ <label
3656
+ class="pf-v5-c-check pf-m-standalone"
3657
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-check-check"
3658
+ for="primary-detail-card-view-expanded-example-drawer-toolbar-check-check-input"
3659
+ >
3660
+ <input
3661
+ class="pf-v5-c-check__input"
3662
+ type="checkbox"
3663
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-check-check-input"
3664
+ name="primary-detail-card-view-expanded-example-drawer-toolbar-check-check-input"
3665
+ aria-label="Standalone check"
3666
+ />
3667
+ </label>
3668
+ <button
3669
+ class="pf-v5-c-menu-toggle__button"
3670
+ type="button"
3671
+ aria-expanded="false"
3672
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-menu-toggle-toggle-button"
3673
+ aria-label="Menu toggle"
3674
+ >
3675
+ <span class="pf-v5-c-menu-toggle__controls">
3676
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3677
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3678
+ </span>
3679
+ </span>
3680
+ </button>
3816
3681
  </div>
3817
3682
  </div>
3818
3683
 
@@ -3823,75 +3688,22 @@ wrapperTag: div
3823
3688
  role="group"
3824
3689
  >
3825
3690
  <div class="pf-v5-c-input-group__item">
3826
- <div class="pf-v5-c-select" style="width: 124px">
3827
- <span
3828
- id="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
3829
- hidden
3830
- >Choose one</span>
3831
-
3832
- <button
3833
- class="pf-v5-c-select__toggle"
3834
- type="button"
3835
- id="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-toggle"
3836
- aria-haspopup="true"
3837
- aria-expanded="false"
3838
- aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label primary-detail-card-view-expanded-example-drawer-toolbar-select-name-toggle"
3839
- >
3840
- <div class="pf-v5-c-select__toggle-wrapper">
3841
- <span class="pf-v5-c-select__toggle-icon">
3842
- <i class="fas fa-filter" aria-hidden="true"></i>
3843
- </span>
3844
- <span class="pf-v5-c-select__toggle-text">Name</span>
3845
- </div>
3846
- <span class="pf-v5-c-select__toggle-arrow">
3691
+ <button
3692
+ class="pf-v5-c-menu-toggle"
3693
+ type="button"
3694
+ aria-expanded="false"
3695
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-search-filter-menu"
3696
+ >
3697
+ <span class="pf-v5-c-menu-toggle__icon">
3698
+ <i class="fas fa-filter" aria-hidden="true"></i>
3699
+ </span>
3700
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
3701
+ <span class="pf-v5-c-menu-toggle__controls">
3702
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3847
3703
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3848
3704
  </span>
3849
- </button>
3850
-
3851
- <ul
3852
- class="pf-v5-c-select__menu"
3853
- role="listbox"
3854
- aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
3855
- hidden
3856
- >
3857
- <li role="presentation">
3858
- <button
3859
- class="pf-v5-c-select__menu-item"
3860
- role="option"
3861
- >Running</button>
3862
- </li>
3863
- <li role="presentation">
3864
- <button
3865
- class="pf-v5-c-select__menu-item pf-m-selected"
3866
- role="option"
3867
- aria-selected="true"
3868
- >
3869
- Stopped
3870
- <span class="pf-v5-c-select__menu-item-icon">
3871
- <i class="fas fa-check" aria-hidden="true"></i>
3872
- </span>
3873
- </button>
3874
- </li>
3875
- <li role="presentation">
3876
- <button
3877
- class="pf-v5-c-select__menu-item"
3878
- role="option"
3879
- >Down</button>
3880
- </li>
3881
- <li role="presentation">
3882
- <button
3883
- class="pf-v5-c-select__menu-item"
3884
- role="option"
3885
- >Degraded</button>
3886
- </li>
3887
- <li role="presentation">
3888
- <button
3889
- class="pf-v5-c-select__menu-item"
3890
- role="option"
3891
- >Needs maintenance</button>
3892
- </li>
3893
- </ul>
3894
- </div>
3705
+ </span>
3706
+ </button>
3895
3707
  </div>
3896
3708
  <div class="pf-v5-c-input-group__item pf-m-fill">
3897
3709
  <div class="pf-v5-c-text-input-group">