@patternfly/patternfly 6.3.1 → 6.4.0-prerelease.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 (140) hide show
  1. package/README.md +23 -15
  2. package/base/normalize.scss +4 -0
  3. package/base/patternfly-variables.css +1172 -1
  4. package/base/patternfly-variables.scss +10 -0
  5. package/base/tokens/tokens-charts-dark.scss +1 -1
  6. package/base/tokens/tokens-charts.scss +1 -1
  7. package/base/tokens/tokens-dark.scss +13 -1
  8. package/base/tokens/tokens-default.scss +60 -2
  9. package/base/tokens/tokens-highcontrast-dark.scss +396 -0
  10. package/base/tokens/tokens-highcontrast.scss +703 -0
  11. package/base/tokens/tokens-local.scss +1 -0
  12. package/base/tokens/tokens-palette.scss +9 -1
  13. package/components/Accordion/accordion.css +42 -15
  14. package/components/Accordion/accordion.scss +48 -18
  15. package/components/Alert/alert-group.css +17 -15
  16. package/components/Alert/alert-group.scss +22 -18
  17. package/components/Badge/badge.css +2 -0
  18. package/components/Badge/badge.scss +2 -0
  19. package/components/Banner/banner.css +4 -0
  20. package/components/Banner/banner.scss +4 -0
  21. package/components/Button/button.css +34 -4
  22. package/components/Button/button.scss +36 -6
  23. package/components/CalendarMonth/calendar-month.css +35 -4
  24. package/components/CalendarMonth/calendar-month.scss +38 -4
  25. package/components/Card/card.css +7 -4
  26. package/components/Card/card.scss +7 -4
  27. package/components/CodeBlock/code-block.css +3 -0
  28. package/components/CodeBlock/code-block.scss +3 -0
  29. package/components/CodeEditor/code-editor.css +23 -3
  30. package/components/CodeEditor/code-editor.scss +28 -5
  31. package/components/DatePicker/date-picker.css +3 -0
  32. package/components/DatePicker/date-picker.scss +4 -0
  33. package/components/Divider/divider.css +2 -0
  34. package/components/Divider/divider.scss +2 -0
  35. package/components/Drawer/drawer.css +46 -41
  36. package/components/Drawer/drawer.scss +45 -36
  37. package/components/DualListSelector/dual-list-selector.css +21 -4
  38. package/components/DualListSelector/dual-list-selector.scss +23 -4
  39. package/components/ExpandableSection/expandable-section.css +6 -2
  40. package/components/ExpandableSection/expandable-section.scss +7 -3
  41. package/components/FormControl/form-control.css +6 -7
  42. package/components/FormControl/form-control.scss +8 -10
  43. package/components/Label/label.css +20 -11
  44. package/components/Label/label.scss +21 -11
  45. package/components/Login/login.css +3 -0
  46. package/components/Login/login.scss +3 -0
  47. package/components/Menu/menu.css +18 -0
  48. package/components/Menu/menu.scss +19 -1
  49. package/components/MenuToggle/menu-toggle.css +13 -6
  50. package/components/MenuToggle/menu-toggle.scss +13 -6
  51. package/components/ModalBox/modal-box.css +3 -0
  52. package/components/ModalBox/modal-box.scss +3 -0
  53. package/components/Nav/nav.css +17 -0
  54. package/components/Nav/nav.scss +20 -0
  55. package/components/Page/page.css +73 -25
  56. package/components/Page/page.scss +60 -19
  57. package/components/Pagination/pagination.css +15 -2
  58. package/components/Pagination/pagination.scss +15 -2
  59. package/components/Panel/panel.css +14 -1
  60. package/components/Panel/panel.scss +14 -1
  61. package/components/Popover/popover.css +4 -0
  62. package/components/Popover/popover.scss +4 -0
  63. package/components/Progress/progress.css +19 -0
  64. package/components/Progress/progress.scss +22 -0
  65. package/components/Sidebar/sidebar.css +7 -0
  66. package/components/Sidebar/sidebar.scss +7 -0
  67. package/components/SimpleList/simple-list.css +15 -0
  68. package/components/SimpleList/simple-list.scss +17 -1
  69. package/components/Slider/slider.css +9 -0
  70. package/components/Slider/slider.scss +9 -0
  71. package/components/Switch/switch.css +7 -1
  72. package/components/Switch/switch.scss +7 -1
  73. package/components/Table/table.css +29 -0
  74. package/components/Table/table.scss +33 -0
  75. package/components/Tabs/tabs.css +18 -7
  76. package/components/Tabs/tabs.scss +19 -11
  77. package/components/TextInputGroup/text-input-group.css +3 -0
  78. package/components/TextInputGroup/text-input-group.scss +4 -1
  79. package/components/ToggleGroup/toggle-group.css +18 -9
  80. package/components/ToggleGroup/toggle-group.scss +24 -17
  81. package/components/Toolbar/toolbar.css +7 -0
  82. package/components/Toolbar/toolbar.scss +7 -0
  83. package/components/TreeView/tree-view.css +15 -0
  84. package/components/TreeView/tree-view.scss +17 -0
  85. package/components/Wizard/wizard.css +37 -6
  86. package/components/Wizard/wizard.scss +44 -10
  87. package/components/_index.css +615 -167
  88. package/docs/components/Alert/examples/Alert.md +3 -4
  89. package/docs/components/Button/examples/Button.md +1 -3
  90. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +25 -33
  91. package/docs/components/CodeBlock/examples/CodeBlock.md +13 -7
  92. package/docs/components/CodeEditor/examples/CodeEditor.md +20 -6
  93. package/docs/components/DataList/examples/DataList.md +66 -184
  94. package/docs/components/DatePicker/examples/DatePicker.md +4 -1
  95. package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
  96. package/docs/components/DualListSelector/examples/DualListSelector.md +0 -195
  97. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  98. package/docs/components/ExpandableSection/examples/ExpandableSection.md +92 -18
  99. package/docs/components/FileUpload/examples/FileUpload.md +4 -3
  100. package/docs/components/Form/examples/Form.md +19 -18
  101. package/docs/components/HelperText/examples/HelperText.md +65 -75
  102. package/docs/components/Hint/examples/Hint.md +3 -3
  103. package/docs/components/Icon/examples/Icon.md +0 -10
  104. package/docs/components/InlineEdit/examples/InlineEdit.md +0 -4
  105. package/docs/components/JumpLinks/examples/JumpLinks.md +164 -77
  106. package/docs/components/Label/examples/Label.md +2 -2
  107. package/docs/components/Login/examples/Login.md +42 -37
  108. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +32 -6
  109. package/docs/components/Pagination/examples/Pagination.md +111 -0
  110. package/docs/components/Popover/examples/Popover.md +0 -4
  111. package/docs/components/Progress/examples/Progress.md +223 -210
  112. package/docs/components/Skeleton/examples/Skeleton.md +21 -7
  113. package/docs/components/Table/examples/Table.md +947 -1423
  114. package/docs/components/TextInputGroup/examples/TextInputGroup.md +126 -47
  115. package/docs/components/Title/examples/Title.md +8 -8
  116. package/docs/components/Truncate/examples/Truncate.md +8 -6
  117. package/docs/components/Wizard/examples/Wizard.md +583 -0
  118. package/docs/demos/Alert/examples/Alert.md +28 -19
  119. package/docs/demos/Card/examples/Card.md +8 -5
  120. package/docs/demos/CardView/examples/CardView.md +81 -85
  121. package/docs/demos/Dashboard/examples/Dashboard.md +10 -22
  122. package/docs/demos/DataList/examples/DataList.md +528 -168
  123. package/docs/demos/DescriptionList/examples/DescriptionList.md +13 -3
  124. package/docs/demos/Drawer/examples/Drawer.md +0 -2
  125. package/docs/demos/Form/examples/BasicForms.md +93 -62
  126. package/docs/demos/HelperText/examples/HelperText.md +31 -23
  127. package/docs/demos/JumpLinks/examples/JumpLinks.md +0 -5
  128. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +4 -4
  129. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +56 -38
  130. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +726 -312
  131. package/docs/demos/Skeleton/examples/Skeleton.md +3 -1
  132. package/docs/demos/Table/examples/Table.md +5 -20
  133. package/docs/demos/Tabs/examples/Tabs.md +2 -1
  134. package/package.json +12 -7
  135. package/patternfly-base-no-globals.css +1172 -1
  136. package/patternfly-base.css +1176 -1
  137. package/patternfly-no-globals.css +1787 -168
  138. package/patternfly.css +1822 -199
  139. package/patternfly.min.css +1 -1
  140. package/patternfly.min.css.map +1 -1
package/docs/demos/PasswordStrength/examples/PasswordStrength.md CHANGED
@@ -52,9 +52,10 @@ section: components
52
52
  <span class="pf-v6-c-helper-text__item-icon">
53
53
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
54
54
  </span>
55
- <span
56
- class="pf-v6-c-helper-text__item-text"
57
- >Must be at least 14 characters</span>
55
+ <span class="pf-v6-c-helper-text__item-text">
56
+ <span class="pf-v6-screen-reader">Indeterminate:</span>
57
+ Must be at least 14 characters
58
+ </span>
58
59
  </div>
59
60
  <div
60
61
  class="pf-v6-c-helper-text__item pf-m-indeterminate pf-m-dynamic"
@@ -62,9 +63,10 @@ section: components
62
63
  <span class="pf-v6-c-helper-text__item-icon">
63
64
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
64
65
  </span>
65
- <span
66
- class="pf-v6-c-helper-text__item-text"
67
- >Cannot contain the word "redhat"</span>
66
+ <span class="pf-v6-c-helper-text__item-text">
67
+ <span class="pf-v6-screen-reader">Indeterminate:</span>
68
+ Cannot contain the word "redhat"
69
+ </span>
68
70
  </div>
69
71
  <div
70
72
  class="pf-v6-c-helper-text__item pf-m-indeterminate pf-m-dynamic"
@@ -72,9 +74,10 @@ section: components
72
74
  <span class="pf-v6-c-helper-text__item-icon">
73
75
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
74
76
  </span>
75
- <span
76
- class="pf-v6-c-helper-text__item-text"
77
- >Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols</span>
77
+ <span class="pf-v6-c-helper-text__item-text">
78
+ <span class="pf-v6-screen-reader">Indeterminate:</span>
79
+ Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols
80
+ </span>
78
81
  </div>
79
82
  </div>
80
83
  </div>
@@ -131,25 +134,28 @@ section: components
131
134
  <span class="pf-v6-c-helper-text__item-icon">
132
135
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
133
136
  </span>
134
- <span
135
- class="pf-v6-c-helper-text__item-text"
136
- >Must be at least 14 characters</span>
137
+ <span class="pf-v6-c-helper-text__item-text">
138
+ <span class="pf-v6-screen-reader">Success:</span>
139
+ Must be at least 14 characters
140
+ </span>
137
141
  </div>
138
142
  <div class="pf-v6-c-helper-text__item pf-m-error pf-m-dynamic">
139
143
  <span class="pf-v6-c-helper-text__item-icon">
140
144
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
141
145
  </span>
142
- <span
143
- class="pf-v6-c-helper-text__item-text"
144
- >Cannot contain the word "redhat"</span>
146
+ <span class="pf-v6-c-helper-text__item-text">
147
+ <span class="pf-v6-screen-reader">Error:</span>
148
+ Cannot contain the word "redhat"
149
+ </span>
145
150
  </div>
146
151
  <div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
147
152
  <span class="pf-v6-c-helper-text__item-icon">
148
153
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
149
154
  </span>
150
- <span
151
- class="pf-v6-c-helper-text__item-text"
152
- >Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols</span>
155
+ <span class="pf-v6-c-helper-text__item-text">
156
+ <span class="pf-v6-screen-reader">Success:</span>
157
+ Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols
158
+ </span>
153
159
  </div>
154
160
  </div>
155
161
  </div>
@@ -177,7 +183,10 @@ section: components
177
183
  <span class="pf-v6-c-helper-text__item-icon">
178
184
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
179
185
  </span>
180
- <span class="pf-v6-c-helper-text__item-text">Weak</span>
186
+ <span class="pf-v6-c-helper-text__item-text">
187
+ <span class="pf-v6-screen-reader">Error:</span>
188
+ Weak
189
+ </span>
181
190
  </div>
182
191
  </div>
183
192
  </div>
@@ -215,25 +224,28 @@ section: components
215
224
  <span class="pf-v6-c-helper-text__item-icon">
216
225
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
217
226
  </span>
218
- <span
219
- class="pf-v6-c-helper-text__item-text"
220
- >Must be at least 14 characters</span>
227
+ <span class="pf-v6-c-helper-text__item-text">
228
+ <span class="pf-v6-screen-reader">Success:</span>
229
+ Must be at least 14 characters
230
+ </span>
221
231
  </div>
222
232
  <div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
223
233
  <span class="pf-v6-c-helper-text__item-icon">
224
234
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
225
235
  </span>
226
- <span
227
- class="pf-v6-c-helper-text__item-text"
228
- >Cannot contain the word "redhat"</span>
236
+ <span class="pf-v6-c-helper-text__item-text">
237
+ <span class="pf-v6-screen-reader">Success:</span>
238
+ Cannot contain the word "redhat"
239
+ </span>
229
240
  </div>
230
241
  <div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
231
242
  <span class="pf-v6-c-helper-text__item-icon">
232
243
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
233
244
  </span>
234
- <span
235
- class="pf-v6-c-helper-text__item-text"
236
- >Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols</span>
245
+ <span class="pf-v6-c-helper-text__item-text">
246
+ <span class="pf-v6-screen-reader">Success:</span>
247
+ Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols
248
+ </span>
237
249
  </div>
238
250
  </div>
239
251
  </div>
@@ -261,7 +273,10 @@ section: components
261
273
  <span class="pf-v6-c-helper-text__item-icon">
262
274
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
263
275
  </span>
264
- <span class="pf-v6-c-helper-text__item-text">Strong</span>
276
+ <span class="pf-v6-c-helper-text__item-text">
277
+ <span class="pf-v6-screen-reader">Success:</span>
278
+ Strong
279
+ </span>
265
280
  </div>
266
281
  </div>
267
282
  </div>
@@ -299,25 +314,28 @@ section: components
299
314
  <span class="pf-v6-c-helper-text__item-icon">
300
315
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
301
316
  </span>
302
- <span
303
- class="pf-v6-c-helper-text__item-text"
304
- >Must be at least 14 characters</span>
317
+ <span class="pf-v6-c-helper-text__item-text">
318
+ <span class="pf-v6-screen-reader">Success:</span>
319
+ Must be at least 14 characters
320
+ </span>
305
321
  </div>
306
322
  <div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
307
323
  <span class="pf-v6-c-helper-text__item-icon">
308
324
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
309
325
  </span>
310
- <span
311
- class="pf-v6-c-helper-text__item-text"
312
- >Cannot contain the word "redhat"</span>
326
+ <span class="pf-v6-c-helper-text__item-text">
327
+ <span class="pf-v6-screen-reader">Success:</span>
328
+ Cannot contain the word "redhat"
329
+ </span>
313
330
  </div>
314
331
  <div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
315
332
  <span class="pf-v6-c-helper-text__item-icon">
316
333
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
317
334
  </span>
318
- <span
319
- class="pf-v6-c-helper-text__item-text"
320
- >Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols</span>
335
+ <span class="pf-v6-c-helper-text__item-text">
336
+ <span class="pf-v6-screen-reader">Success:</span>
337
+ Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols
338
+ </span>
321
339
  </div>
322
340
  </div>
323
341
  </div>