@patternfly/patternfly 6.0.0-alpha.17 → 6.0.0-alpha.19

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 (68) hide show
  1. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  2. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  3. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  4. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  5. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  6. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  7. package/assets/images/pf_logo_white.hbs +35 -0
  8. package/assets/images/pf_logo_white.svg +38 -0
  9. package/base/_globals.scss +1 -1
  10. package/base/patternfly-variables.css +1 -1
  11. package/base/tokens/_tokens-font.scss +2 -2
  12. package/components/Accordion/accordion.css +10 -1
  13. package/components/Accordion/accordion.scss +13 -1
  14. package/components/Alert/alert.css +1 -1
  15. package/components/Alert/alert.scss +1 -1
  16. package/components/Button/button.css +1 -1
  17. package/components/Button/button.scss +1 -3
  18. package/components/Check/check.css +10 -8
  19. package/components/Check/check.scss +15 -10
  20. package/components/Dropdown/dropdown.css +1 -3
  21. package/components/Dropdown/dropdown.scss +2 -6
  22. package/components/Login/login.css +70 -97
  23. package/components/Login/login.scss +56 -64
  24. package/components/Menu/menu.css +3 -0
  25. package/components/Menu/menu.scss +7 -3
  26. package/components/MenuToggle/menu-toggle.css +2 -3
  27. package/components/MenuToggle/menu-toggle.scss +2 -6
  28. package/components/Page/page.css +1 -1
  29. package/components/Page/page.scss +1 -1
  30. package/components/Radio/radio.css +13 -10
  31. package/components/Radio/radio.scss +17 -11
  32. package/components/Switch/switch.css +1 -1
  33. package/components/Switch/switch.scss +1 -1
  34. package/components/Table/table.css +6 -2
  35. package/components/Table/table.scss +7 -2
  36. package/components/Toolbar/toolbar.css +9 -1
  37. package/components/Toolbar/toolbar.scss +16 -3
  38. package/docs/components/Accordion/examples/Accordion.md +95 -0
  39. package/docs/components/Brand/examples/Brand.css +12 -0
  40. package/docs/components/Brand/examples/Brand.md +75 -32
  41. package/docs/components/Card/examples/Card.md +110 -2
  42. package/docs/components/LogViewer/examples/LogViewer.md +130 -130
  43. package/docs/components/Login/examples/Login.md +5 -0
  44. package/docs/components/Menu/examples/Menu.md +507 -473
  45. package/docs/components/MenuToggle/examples/MenuToggle.md +106 -114
  46. package/docs/components/Nav/examples/Navigation.md +140 -113
  47. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  48. package/docs/components/Toolbar/examples/Toolbar.md +480 -2807
  49. package/docs/demos/CardView/examples/CardView.md +32 -51
  50. package/docs/demos/DataList/examples/DataList.md +184 -320
  51. package/docs/demos/Masthead/examples/Masthead.md +51 -210
  52. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +2 -1
  53. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +83 -271
  54. package/docs/demos/Table/examples/Table.md +1017 -1800
  55. package/docs/demos/Tabs/examples/Tabs.md +2 -2
  56. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  57. package/docs/demos/Toolbar/examples/Toolbar.md +703 -1027
  58. package/package.json +2 -2
  59. package/patternfly-base-no-globals-theme-dark-unversioned.css +1 -1
  60. package/patternfly-base-no-globals.css +1 -1
  61. package/patternfly-base-theme-dark-unversioned.css +1 -1
  62. package/patternfly-base.css +1 -1
  63. package/patternfly-no-globals.css +176 -207
  64. package/patternfly-theme-dark-unversioned.css +176 -207
  65. package/patternfly.css +176 -207
  66. package/patternfly.min.css +1 -1
  67. package/patternfly.min.css.map +1 -1
  68. package/components/Login/themes/dark/login.scss +0 -12
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -292,10 +292,10 @@ wrapperTag: div
292
292
  >
293
293
  <div class="pf-v5-c-toolbar__toggle">
294
294
  <button
295
- class="pf-v5-c-button pf-m-plain"
295
+ class="pf-v5-c-menu-toggle pf-m-plain"
296
296
  type="button"
297
- aria-label="Show filters"
298
297
  aria-expanded="false"
298
+ aria-label="Show filters"
299
299
  aria-controls="primary-detail-expanded-example-drawer-toolbar-expandable-content"
300
300
  >
301
301
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -309,83 +309,25 @@ wrapperTag: div
309
309
  role="group"
310
310
  >
311
311
  <div class="pf-v5-c-input-group__item">
312
- <div class="pf-v5-c-select" style="width: 124px">
313
- <span
314
- id="primary-detail-expanded-example-drawer-toolbar-select-name-label"
315
- hidden
316
- >Choose one</span>
317
-
318
- <button
319
- class="pf-v5-c-select__toggle"
320
- type="button"
321
- id="primary-detail-expanded-example-drawer-toolbar-select-name-toggle"
322
- aria-haspopup="true"
323
- aria-expanded="false"
324
- aria-labelledby="primary-detail-expanded-example-drawer-toolbar-select-name-label primary-detail-expanded-example-drawer-toolbar-select-name-toggle"
325
- >
326
- <div class="pf-v5-c-select__toggle-wrapper">
327
- <span class="pf-v5-c-select__toggle-icon">
328
- <i class="fas fa-filter" aria-hidden="true"></i>
329
- </span>
330
- <span class="pf-v5-c-select__toggle-text">Name</span>
331
- </div>
332
- <span class="pf-v5-c-select__toggle-arrow">
312
+ <button
313
+ class="pf-v5-c-menu-toggle"
314
+ type="button"
315
+ aria-expanded="false"
316
+ id="primary-detail-expanded-example-drawer-toolbar-search-filter-menu"
317
+ >
318
+ <span class="pf-v5-c-menu-toggle__icon">
319
+ <i class="fas fa-filter" aria-hidden="true"></i>
320
+ </span>
321
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
322
+ <span class="pf-v5-c-menu-toggle__controls">
323
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
333
324
  <i
334
- class="fas fa-caret-down"
325
+ class="fas fa-angle-down"
335
326
  aria-hidden="true"
336
327
  ></i>
337
328
  </span>
338
- </button>
339
-
340
- <ul
341
- class="pf-v5-c-select__menu"
342
- role="listbox"
343
- aria-labelledby="primary-detail-expanded-example-drawer-toolbar-select-name-label"
344
- hidden
345
- >
346
- <li role="presentation">
347
- <button
348
- class="pf-v5-c-select__menu-item"
349
- role="option"
350
- >Running</button>
351
- </li>
352
- <li role="presentation">
353
- <button
354
- class="pf-v5-c-select__menu-item pf-m-selected"
355
- role="option"
356
- aria-selected="true"
357
- >
358
- Stopped
359
- <span
360
- class="pf-v5-c-select__menu-item-icon"
361
- >
362
- <i
363
- class="fas fa-check"
364
- aria-hidden="true"
365
- ></i>
366
- </span>
367
- </button>
368
- </li>
369
- <li role="presentation">
370
- <button
371
- class="pf-v5-c-select__menu-item"
372
- role="option"
373
- >Down</button>
374
- </li>
375
- <li role="presentation">
376
- <button
377
- class="pf-v5-c-select__menu-item"
378
- role="option"
379
- >Degraded</button>
380
- </li>
381
- <li role="presentation">
382
- <button
383
- class="pf-v5-c-select__menu-item"
384
- role="option"
385
- >Needs maintenance</button>
386
- </li>
387
- </ul>
388
- </div>
329
+ </span>
330
+ </button>
389
331
  </div>
390
332
  <div class="pf-v5-c-input-group__item pf-m-fill">
391
333
  <div class="pf-v5-c-text-input-group">
@@ -1636,10 +1578,10 @@ wrapperTag: div
1636
1578
  >
1637
1579
  <div class="pf-v5-c-toolbar__toggle">
1638
1580
  <button
1639
- class="pf-v5-c-button pf-m-plain"
1581
+ class="pf-v5-c-menu-toggle pf-m-plain"
1640
1582
  type="button"
1641
- aria-label="Show filters"
1642
1583
  aria-expanded="false"
1584
+ aria-label="Show filters"
1643
1585
  aria-controls="primary-detail-collapsed-example-drawer-toolbar-expandable-content"
1644
1586
  >
1645
1587
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -1653,83 +1595,25 @@ wrapperTag: div
1653
1595
  role="group"
1654
1596
  >
1655
1597
  <div class="pf-v5-c-input-group__item">
1656
- <div class="pf-v5-c-select" style="width: 124px">
1657
- <span
1658
- id="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
1659
- hidden
1660
- >Choose one</span>
1661
-
1662
- <button
1663
- class="pf-v5-c-select__toggle"
1664
- type="button"
1665
- id="primary-detail-collapsed-example-drawer-toolbar-select-name-toggle"
1666
- aria-haspopup="true"
1667
- aria-expanded="false"
1668
- aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-name-label primary-detail-collapsed-example-drawer-toolbar-select-name-toggle"
1669
- >
1670
- <div class="pf-v5-c-select__toggle-wrapper">
1671
- <span class="pf-v5-c-select__toggle-icon">
1672
- <i class="fas fa-filter" aria-hidden="true"></i>
1673
- </span>
1674
- <span class="pf-v5-c-select__toggle-text">Name</span>
1675
- </div>
1676
- <span class="pf-v5-c-select__toggle-arrow">
1598
+ <button
1599
+ class="pf-v5-c-menu-toggle"
1600
+ type="button"
1601
+ aria-expanded="false"
1602
+ id="primary-detail-collapsed-example-drawer-toolbar-search-filter-menu"
1603
+ >
1604
+ <span class="pf-v5-c-menu-toggle__icon">
1605
+ <i class="fas fa-filter" aria-hidden="true"></i>
1606
+ </span>
1607
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
1608
+ <span class="pf-v5-c-menu-toggle__controls">
1609
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1677
1610
  <i
1678
- class="fas fa-caret-down"
1611
+ class="fas fa-angle-down"
1679
1612
  aria-hidden="true"
1680
1613
  ></i>
1681
1614
  </span>
1682
- </button>
1683
-
1684
- <ul
1685
- class="pf-v5-c-select__menu"
1686
- role="listbox"
1687
- aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
1688
- hidden
1689
- >
1690
- <li role="presentation">
1691
- <button
1692
- class="pf-v5-c-select__menu-item"
1693
- role="option"
1694
- >Running</button>
1695
- </li>
1696
- <li role="presentation">
1697
- <button
1698
- class="pf-v5-c-select__menu-item pf-m-selected"
1699
- role="option"
1700
- aria-selected="true"
1701
- >
1702
- Stopped
1703
- <span
1704
- class="pf-v5-c-select__menu-item-icon"
1705
- >
1706
- <i
1707
- class="fas fa-check"
1708
- aria-hidden="true"
1709
- ></i>
1710
- </span>
1711
- </button>
1712
- </li>
1713
- <li role="presentation">
1714
- <button
1715
- class="pf-v5-c-select__menu-item"
1716
- role="option"
1717
- >Down</button>
1718
- </li>
1719
- <li role="presentation">
1720
- <button
1721
- class="pf-v5-c-select__menu-item"
1722
- role="option"
1723
- >Degraded</button>
1724
- </li>
1725
- <li role="presentation">
1726
- <button
1727
- class="pf-v5-c-select__menu-item"
1728
- role="option"
1729
- >Needs maintenance</button>
1730
- </li>
1731
- </ul>
1732
- </div>
1615
+ </span>
1616
+ </button>
1733
1617
  </div>
1734
1618
  <div class="pf-v5-c-input-group__item pf-m-fill">
1735
1619
  <div class="pf-v5-c-text-input-group">
@@ -2901,10 +2785,10 @@ wrapperTag: div
2901
2785
  >
2902
2786
  <div class="pf-v5-c-toolbar__toggle">
2903
2787
  <button
2904
- class="pf-v5-c-button pf-m-plain"
2788
+ class="pf-v5-c-menu-toggle pf-m-plain"
2905
2789
  type="button"
2906
- aria-label="Show filters"
2907
2790
  aria-expanded="false"
2791
+ aria-label="Show filters"
2908
2792
  aria-controls="primary-detail-content-body-padding-example-drawer-toolbar-expandable-content"
2909
2793
  >
2910
2794
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -4054,65 +3938,46 @@ wrapperTag: div
4054
3938
  >
4055
3939
  <div class="pf-v5-c-toolbar__toggle">
4056
3940
  <button
4057
- class="pf-v5-c-button pf-m-plain"
3941
+ class="pf-v5-c-menu-toggle pf-m-plain"
4058
3942
  type="button"
4059
- aria-label="Show filters"
4060
3943
  aria-expanded="false"
3944
+ aria-label="Show filters"
4061
3945
  aria-controls="primary-detail-card-view-expanded-example-drawer-toolbar-expandable-content"
4062
3946
  >
4063
3947
  <i class="fas fa-filter" aria-hidden="true"></i>
4064
3948
  </button>
4065
3949
  </div>
4066
3950
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
4067
- <div class="pf-v5-c-dropdown">
4068
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
4069
- <label
4070
- class="pf-v5-c-dropdown__toggle-check"
4071
- for="primary-detail-card-view-expanded-example-drawer-toolbar-bulk-select-toggle-check"
4072
- >
4073
- <div class="pf-v5-c-check pf-m-standalone">
4074
- <input
4075
- class="pf-v5-c-check__input"
4076
- type="checkbox"
4077
- id="primary-detail-card-view-expanded-example-drawer-toolbar-bulk-select-toggle-check"
4078
- aria-label="Select all"
4079
- />
4080
- </div>
4081
- </label>
4082
-
4083
- <button
4084
- class="pf-v5-c-dropdown__toggle-button"
4085
- type="button"
4086
- aria-expanded="false"
4087
- id="primary-detail-card-view-expanded-example-drawer-toolbar-bulk-select-toggle-button"
4088
- aria-label="Dropdown toggle"
4089
- >
4090
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4091
- </button>
4092
- </div>
4093
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
4094
- <li role="none">
4095
- <button
4096
- class="pf-v5-c-dropdown__menu-item"
4097
- role="menuitem"
4098
- type="button"
4099
- >Select all</button>
4100
- </li>
4101
- <li role="none">
4102
- <button
4103
- class="pf-v5-c-dropdown__menu-item"
4104
- role="menuitem"
4105
- type="button"
4106
- >Select none</button>
4107
- </li>
4108
- <li role="none">
4109
- <button
4110
- class="pf-v5-c-dropdown__menu-item"
4111
- role="menuitem"
4112
- type="button"
4113
- >Other action</button>
4114
- </li>
4115
- </ul>
3951
+ <div
3952
+ class="pf-v5-c-menu-toggle pf-m-split-button"
3953
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-check"
3954
+ >
3955
+ <label
3956
+ class="pf-v5-c-check pf-m-standalone"
3957
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-check-check"
3958
+ for="primary-detail-card-view-expanded-example-drawer-toolbar-check-check-input"
3959
+ >
3960
+ <input
3961
+ class="pf-v5-c-check__input"
3962
+ type="checkbox"
3963
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-check-check-input"
3964
+ name="primary-detail-card-view-expanded-example-drawer-toolbar-check-check-input"
3965
+ aria-label="Standalone check"
3966
+ />
3967
+ </label>
3968
+ <button
3969
+ class="pf-v5-c-menu-toggle__button"
3970
+ type="button"
3971
+ aria-expanded="false"
3972
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-menu-toggle-toggle-button"
3973
+ aria-label="Menu toggle"
3974
+ >
3975
+ <span class="pf-v5-c-menu-toggle__controls">
3976
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3977
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3978
+ </span>
3979
+ </span>
3980
+ </button>
4116
3981
  </div>
4117
3982
  </div>
4118
3983
 
@@ -4123,75 +3988,22 @@ wrapperTag: div
4123
3988
  role="group"
4124
3989
  >
4125
3990
  <div class="pf-v5-c-input-group__item">
4126
- <div class="pf-v5-c-select" style="width: 124px">
4127
- <span
4128
- id="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
4129
- hidden
4130
- >Choose one</span>
4131
-
4132
- <button
4133
- class="pf-v5-c-select__toggle"
4134
- type="button"
4135
- id="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-toggle"
4136
- aria-haspopup="true"
4137
- aria-expanded="false"
4138
- aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label primary-detail-card-view-expanded-example-drawer-toolbar-select-name-toggle"
4139
- >
4140
- <div class="pf-v5-c-select__toggle-wrapper">
4141
- <span class="pf-v5-c-select__toggle-icon">
4142
- <i class="fas fa-filter" aria-hidden="true"></i>
4143
- </span>
4144
- <span class="pf-v5-c-select__toggle-text">Name</span>
4145
- </div>
4146
- <span class="pf-v5-c-select__toggle-arrow">
4147
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3991
+ <button
3992
+ class="pf-v5-c-menu-toggle"
3993
+ type="button"
3994
+ aria-expanded="false"
3995
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-search-filter-menu"
3996
+ >
3997
+ <span class="pf-v5-c-menu-toggle__icon">
3998
+ <i class="fas fa-filter" aria-hidden="true"></i>
3999
+ </span>
4000
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
4001
+ <span class="pf-v5-c-menu-toggle__controls">
4002
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
4003
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
4148
4004
  </span>
4149
- </button>
4150
-
4151
- <ul
4152
- class="pf-v5-c-select__menu"
4153
- role="listbox"
4154
- aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
4155
- hidden
4156
- >
4157
- <li role="presentation">
4158
- <button
4159
- class="pf-v5-c-select__menu-item"
4160
- role="option"
4161
- >Running</button>
4162
- </li>
4163
- <li role="presentation">
4164
- <button
4165
- class="pf-v5-c-select__menu-item pf-m-selected"
4166
- role="option"
4167
- aria-selected="true"
4168
- >
4169
- Stopped
4170
- <span class="pf-v5-c-select__menu-item-icon">
4171
- <i class="fas fa-check" aria-hidden="true"></i>
4172
- </span>
4173
- </button>
4174
- </li>
4175
- <li role="presentation">
4176
- <button
4177
- class="pf-v5-c-select__menu-item"
4178
- role="option"
4179
- >Down</button>
4180
- </li>
4181
- <li role="presentation">
4182
- <button
4183
- class="pf-v5-c-select__menu-item"
4184
- role="option"
4185
- >Degraded</button>
4186
- </li>
4187
- <li role="presentation">
4188
- <button
4189
- class="pf-v5-c-select__menu-item"
4190
- role="option"
4191
- >Needs maintenance</button>
4192
- </li>
4193
- </ul>
4194
- </div>
4005
+ </span>
4006
+ </button>
4195
4007
  </div>
4196
4008
  <div class="pf-v5-c-input-group__item pf-m-fill">
4197
4009
  <div class="pf-v5-c-text-input-group">