@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/components/Alert/examples/Alert.md CHANGED
@@ -493,7 +493,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
493
493
  >
494
494
  <div class="pf-v6-c-alert__toggle">
495
495
  <button
496
- class="pf-v6-c-button pf-m-expanded pf-m-plain"
496
+ class="pf-v6-c-button pf-m-plain"
497
497
  id="alert-expandable-example-2-toggle"
498
498
  type="button"
499
499
  aria-expanded="true"
@@ -594,7 +594,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
594
594
  >
595
595
  <div class="pf-v6-c-alert__toggle">
596
596
  <button
597
- class="pf-v6-c-button pf-m-expanded pf-m-plain"
597
+ class="pf-v6-c-button pf-m-plain"
598
598
  id="alert-expandable-example-4-toggle"
599
599
  type="button"
600
600
  aria-expanded="true"
@@ -798,8 +798,7 @@ For sighted users, interactive elements can be included in this message in one o
798
798
  </div>
799
799
  </div>
800
800
  </li>
801
-
802
- <li class="pf-v6-c-alert-group__item">
801
+ <li>
803
802
  <button
804
803
  class="pf-v6-c-alert-group__overflow-button"
805
804
  >View 3 more notifications</button>
package/docs/components/Button/examples/Button.md CHANGED
@@ -2116,7 +2116,6 @@ A favorite button should use a plain button with the star icon. Applying `.pf-m-
2116
2116
  <button
2117
2117
  class="pf-v6-c-button pf-m-hamburger pf-m-plain"
2118
2118
  type="button"
2119
- aria-expanded="false"
2120
2119
  aria-label="Hamburger"
2121
2120
  >
2122
2121
  <span class="pf-v6-c-button__icon">
@@ -2136,7 +2135,6 @@ A favorite button should use a plain button with the star icon. Applying `.pf-m-
2136
2135
  <button
2137
2136
  class="pf-v6-c-button pf-m-expand pf-m-hamburger pf-m-plain"
2138
2137
  type="button"
2139
- aria-expanded="false"
2140
2138
  aria-label="Hamburger"
2141
2139
  >
2142
2140
  <span class="pf-v6-c-button__icon">
@@ -2154,7 +2152,7 @@ A favorite button should use a plain button with the star icon. Applying `.pf-m-
2154
2152
  </span>
2155
2153
  </button>
2156
2154
  <button
2157
- class="pf-v6-c-button pf-m-collapse pf-m-hamburger pf-m-expanded pf-m-plain"
2155
+ class="pf-v6-c-button pf-m-collapse pf-m-hamburger pf-m-plain"
2158
2156
  type="button"
2159
2157
  aria-expanded="true"
2160
2158
  aria-label="Hamburger"
package/docs/components/ClipboardCopy/examples/ClipboardCopy.md CHANGED
@@ -21,8 +21,7 @@ cssPrefix: pf-v6-c-clipboard-copy
21
21
  class="pf-v6-c-button pf-m-control"
22
22
  id="basic-editable-copy-button"
23
23
  type="button"
24
- aria-labelledby="basic-editable-copy-button basic-editable-text-input"
25
- aria-label="Copy to clipboard"
24
+ aria-label="Copy to clipboard basic editable example"
26
25
  >
27
26
  <span class="pf-v6-c-button__icon">
28
27
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -46,8 +45,7 @@ cssPrefix: pf-v6-c-clipboard-copy
46
45
  class="pf-v6-c-button pf-m-control"
47
46
  id="basic-readonly-copy-button"
48
47
  type="button"
49
- aria-labelledby="basic-readonly-copy-button basic-readonly-text-input"
50
- aria-label="Copy to clipboard"
48
+ aria-label="Copy to clipboard basic read-only example"
51
49
  >
52
50
  <span class="pf-v6-c-button__icon">
53
51
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -68,7 +66,7 @@ cssPrefix: pf-v6-c-clipboard-copy
68
66
  class="pf-v6-c-button pf-m-control"
69
67
  type="button"
70
68
  id="expandable-not-expanded-editable-toggle"
71
- aria-labelledby="expandable-not-expanded-editable-toggle expandable-not-expanded-editable-text-input"
69
+ aria-label="Toggle unexpanded editable example"
72
70
  aria-controls="expandable-not-expanded-editable-content"
73
71
  >
74
72
  <span class="pf-v6-c-button__icon">
@@ -88,9 +86,8 @@ cssPrefix: pf-v6-c-clipboard-copy
88
86
  <button
89
87
  class="pf-v6-c-button pf-m-control"
90
88
  type="button"
91
- aria-label="Copy to clipboard"
89
+ aria-label="Copy to clipboard unexpanded editable example"
92
90
  id="expandable-not-expanded-editable-copy-button"
93
- aria-labelledby="expandable-not-expanded-editable-copy-button expandable-not-expanded-editable-text-input"
94
91
  >
95
92
  <span class="pf-v6-c-button__icon">
96
93
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -107,11 +104,11 @@ cssPrefix: pf-v6-c-clipboard-copy
107
104
  <div class="pf-v6-c-clipboard-copy pf-m-expanded">
108
105
  <div class="pf-v6-c-clipboard-copy__group">
109
106
  <button
110
- class="pf-v6-c-button pf-m-expanded pf-m-control"
107
+ class="pf-v6-c-button pf-m-control"
111
108
  type="button"
112
109
  aria-expanded="true"
113
110
  id="expandable-expanded-editable-toggle"
114
- aria-labelledby="expandable-expanded-editable-toggle expandable-expanded-editable-text-input"
111
+ aria-label="Toggle expanded editable example"
115
112
  aria-controls="expandable-expanded-editable-content"
116
113
  >
117
114
  <span class="pf-v6-c-button__icon">
@@ -132,9 +129,8 @@ cssPrefix: pf-v6-c-clipboard-copy
132
129
  <button
133
130
  class="pf-v6-c-button pf-m-control"
134
131
  type="button"
135
- aria-label="Copy to clipboard"
132
+ aria-label="Copy to clipboard expanded editable example"
136
133
  id="expandable-expanded-editable-copy-button"
137
- aria-labelledby="expandable-expanded-editable-copy-button expandable-expanded-editable-text-input"
138
134
  >
139
135
  <span class="pf-v6-c-button__icon">
140
136
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -155,7 +151,7 @@ cssPrefix: pf-v6-c-clipboard-copy
155
151
  class="pf-v6-c-button pf-m-control"
156
152
  type="button"
157
153
  id="expandable-not-expanded-readonly-toggle"
158
- aria-labelledby="expandable-not-expanded-readonly-toggle expandable-not-expanded-readonly-text-input"
154
+ aria-label="Toggle read-only unexpanded example"
159
155
  aria-controls="expandable-not-expanded-readonly-content"
160
156
  >
161
157
  <span class="pf-v6-c-button__icon">
@@ -176,9 +172,8 @@ cssPrefix: pf-v6-c-clipboard-copy
176
172
  <button
177
173
  class="pf-v6-c-button pf-m-control"
178
174
  type="button"
179
- aria-label="Copy to clipboard"
175
+ aria-label="Copy to clipboard read-only collapsed example"
180
176
  id="expandable-not-expanded-readonly-copy-button"
181
- aria-labelledby="expandable-not-expanded-readonly-copy-button expandable-not-expanded-readonly-text-input"
182
177
  >
183
178
  <span class="pf-v6-c-button__icon">
184
179
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -195,11 +190,11 @@ cssPrefix: pf-v6-c-clipboard-copy
195
190
  <div class="pf-v6-c-clipboard-copy pf-m-expanded">
196
191
  <div class="pf-v6-c-clipboard-copy__group">
197
192
  <button
198
- class="pf-v6-c-button pf-m-expanded pf-m-control"
193
+ class="pf-v6-c-button pf-m-control"
199
194
  type="button"
200
195
  aria-expanded="true"
201
196
  id="expandable-expanded-readonly-toggle"
202
- aria-labelledby="expandable-expanded-readonly-toggle expandable-expanded-readonly-text-input"
197
+ aria-label="Toggle read-only expanded example"
203
198
  aria-controls="expandable-expanded-readonly-content"
204
199
  >
205
200
  <span class="pf-v6-c-button__icon">
@@ -220,9 +215,8 @@ cssPrefix: pf-v6-c-clipboard-copy
220
215
  <button
221
216
  class="pf-v6-c-button pf-m-control"
222
217
  type="button"
223
- aria-label="Copy to clipboard"
218
+ aria-label="Copy to clipboard read-only expanded example"
224
219
  id="expandable-expanded-readonly-copy-button"
225
- aria-labelledby="expandable-expanded-readonly-copy-button expandable-expanded-readonly-text-input"
226
220
  >
227
221
  <span class="pf-v6-c-button__icon">
228
222
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -242,7 +236,7 @@ cssPrefix: pf-v6-c-clipboard-copy
242
236
  class="pf-v6-c-button pf-m-control"
243
237
  type="button"
244
238
  id="expandable-not-expanded-code-toggle"
245
- aria-labelledby="expandable-not-expanded-code-toggle expandable-not-expanded-code-text-input"
239
+ aria-label="Toggle code unexpanded example"
246
240
  aria-controls="expandable-not-expanded-code-content"
247
241
  >
248
242
  <span class="pf-v6-c-button__icon">
@@ -263,9 +257,8 @@ cssPrefix: pf-v6-c-clipboard-copy
263
257
  <button
264
258
  class="pf-v6-c-button pf-m-control"
265
259
  type="button"
266
- aria-label="Copy to clipboard"
260
+ aria-label="Copy to clipboard code unexpanded example"
267
261
  id="expandable-not-expanded-code-copy-button"
268
- aria-labelledby="expandable-not-expanded-code-copy-button expandable-not-expanded-code-text-input"
269
262
  >
270
263
  <span class="pf-v6-c-button__icon">
271
264
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -295,11 +288,11 @@ cssPrefix: pf-v6-c-clipboard-copy
295
288
  <div class="pf-v6-c-clipboard-copy pf-m-expanded">
296
289
  <div class="pf-v6-c-clipboard-copy__group">
297
290
  <button
298
- class="pf-v6-c-button pf-m-expanded pf-m-control"
291
+ class="pf-v6-c-button pf-m-control"
299
292
  type="button"
300
293
  aria-expanded="true"
301
294
  id="expandable-expanded-code-toggle"
302
- aria-labelledby="expandable-expanded-code-toggle expandable-expanded-code-text-input"
295
+ aria-label="Toggle code expanded example"
303
296
  aria-controls="expandable-expanded-code-content"
304
297
  >
305
298
  <span class="pf-v6-c-button__icon">
@@ -321,9 +314,8 @@ cssPrefix: pf-v6-c-clipboard-copy
321
314
  <button
322
315
  class="pf-v6-c-button pf-m-control"
323
316
  type="button"
324
- aria-label="Copy to clipboard"
317
+ aria-label="Copy to clipboard code expanded example"
325
318
  id="expandable-expanded-code-copy-button"
326
- aria-labelledby="expandable-expanded-code-copy-button expandable-expanded-code-text-input"
327
319
  >
328
320
  <span class="pf-v6-c-button__icon">
329
321
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -362,7 +354,7 @@ cssPrefix: pf-v6-c-clipboard-copy
362
354
  <button
363
355
  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
364
356
  type="button"
365
- aria-label="Copy to clipboard"
357
+ aria-label="Copy to clipboard inline compact example"
366
358
  >
367
359
  <span class="pf-v6-c-button__icon">
368
360
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -384,7 +376,7 @@ cssPrefix: pf-v6-c-clipboard-copy
384
376
  <button
385
377
  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
386
378
  type="button"
387
- aria-label="Copy to clipboard"
379
+ aria-label="Copy to clipboard inline compact code example"
388
380
  >
389
381
  <span class="pf-v6-c-button__icon">
390
382
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -406,7 +398,7 @@ cssPrefix: pf-v6-c-clipboard-copy
406
398
  <button
407
399
  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
408
400
  type="button"
409
- aria-label="Copy to clipboard"
401
+ aria-label="Copy to clipboard inline compact with additional action example"
410
402
  >
411
403
  <span class="pf-v6-c-button__icon">
412
404
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -442,7 +434,7 @@ cssPrefix: pf-v6-c-clipboard-copy
442
434
  <button
443
435
  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
444
436
  type="button"
445
- aria-label="Copy to clipboard"
437
+ aria-label="Copy to clipboard basic inline compact example"
446
438
  >
447
439
  <span class="pf-v6-c-button__icon">
448
440
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -467,7 +459,7 @@ cssPrefix: pf-v6-c-clipboard-copy
467
459
  <button
468
460
  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
469
461
  type="button"
470
- aria-label="Copy to clipboard"
462
+ aria-label="Copy to clipboard long inline compact example"
471
463
  >
472
464
  <span class="pf-v6-c-button__icon">
473
465
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -491,7 +483,7 @@ cssPrefix: pf-v6-c-clipboard-copy
491
483
  <button
492
484
  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
493
485
  type="button"
494
- aria-label="Copy to clipboard"
486
+ aria-label="Copy to clipboard long block compact example"
495
487
  >
496
488
  <span class="pf-v6-c-button__icon">
497
489
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -508,7 +500,7 @@ cssPrefix: pf-v6-c-clipboard-copy
508
500
  ```html
509
501
  <div class="pf-v6-c-clipboard-copy pf-m-inline pf-m-truncate">
510
502
  <span class="pf-v6-c-clipboard-copy__text">
511
- <span class="pf-v6-c-truncate">
503
+ <span class="pf-v6-c-truncate" tabindex="0">
512
504
  <span
513
505
  class="pf-v6-c-truncate__start"
514
506
  >This lengthy, copyable content will be truncated with default settings when the truncation prop is simply set to true. This is useful for quickly applying truncation without needing to worry about any other properties to set.</span>
@@ -519,7 +511,7 @@ cssPrefix: pf-v6-c-clipboard-copy
519
511
  <button
520
512
  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
521
513
  type="button"
522
- aria-label="Copy to clipboard"
514
+ aria-label="Copy to clipboard inline compact with truncation example"
523
515
  >
524
516
  <span class="pf-v6-c-button__icon">
525
517
  <i class="fas fa-copy" aria-hidden="true"></i>
package/docs/components/CodeBlock/examples/CodeBlock.md CHANGED
@@ -14,7 +14,7 @@ cssPrefix: pf-v6-c-code-block
14
14
  <button
15
15
  class="pf-v6-c-button pf-m-plain"
16
16
  type="button"
17
- aria-label="Copy to clipboard"
17
+ aria-label="Copy to clipboard basic example code content"
18
18
  >
19
19
  <span class="pf-v6-c-button__icon">
20
20
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -25,7 +25,7 @@ cssPrefix: pf-v6-c-code-block
25
25
  <button
26
26
  class="pf-v6-c-button pf-m-plain"
27
27
  type="button"
28
- aria-label="Run in Web Terminal"
28
+ aria-label="Run basic example code in Web Terminal"
29
29
  >
30
30
  <span class="pf-v6-c-button__icon">
31
31
  <i class="fas fa-play" aria-hidden="true"></i>
@@ -58,7 +58,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
58
58
  <button
59
59
  class="pf-v6-c-button pf-m-plain"
60
60
  type="button"
61
- aria-label="Copy to clipboard"
61
+ aria-label="Copy to clipboard expandable example code content"
62
62
  >
63
63
  <span class="pf-v6-c-button__icon">
64
64
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -69,7 +69,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
69
69
  <button
70
70
  class="pf-v6-c-button pf-m-plain"
71
71
  type="button"
72
- aria-label="Run in Web Terminal"
72
+ aria-label="Run expandable example code in Web Terminal"
73
73
  >
74
74
  <span class="pf-v6-c-button__icon">
75
75
  <i class="fas fa-play" aria-hidden="true"></i>
@@ -88,6 +88,8 @@ name: azure-sample-repo<div
88
88
  class="pf-v6-c-expandable-section__content"
89
89
  hidden
90
90
  id="code-block-expandable-content"
91
+ role="region"
92
+ aria-labelledby="code-block-expandable-toggle"
91
93
  >
92
94
  spec:
93
95
  connectionConfig:
@@ -99,6 +101,7 @@ name: azure-sample-repo<div
99
101
  <div class="pf-v6-c-expandable-section__toggle">
100
102
  <button
101
103
  class="pf-v6-c-button pf-m-link"
104
+ id="code-block-expandable-toggle"
102
105
  type="button"
103
106
  aria-controls="code-block-expandable-content"
104
107
  >
@@ -128,7 +131,7 @@ name: azure-sample-repo<div
128
131
  <button
129
132
  class="pf-v6-c-button pf-m-plain"
130
133
  type="button"
131
- aria-label="Copy to clipboard"
134
+ aria-label="Copy to clipboard expandable expanded example code content"
132
135
  >
133
136
  <span class="pf-v6-c-button__icon">
134
137
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -139,7 +142,7 @@ name: azure-sample-repo<div
139
142
  <button
140
143
  class="pf-v6-c-button pf-m-plain"
141
144
  type="button"
142
- aria-label="Run in Web Terminal"
145
+ aria-label="Run expandable expanded example code in Web Terminal"
143
146
  >
144
147
  <span class="pf-v6-c-button__icon">
145
148
  <i class="fas fa-play" aria-hidden="true"></i>
@@ -157,6 +160,8 @@ name: azure-sample-repo<div
157
160
  ><div
158
161
  class="pf-v6-c-expandable-section__content"
159
162
  id="code-block-expandable-expanded-content"
163
+ role="region"
164
+ aria-labelledby="code-block-expandable-expanded-toggle"
160
165
  >
161
166
  spec:
162
167
  connectionConfig:
@@ -168,8 +173,9 @@ name: azure-sample-repo<div
168
173
  <div class="pf-v6-c-expandable-section__toggle">
169
174
  <button
170
175
  class="pf-v6-c-button pf-m-link"
176
+ id="code-block-expandable-expanded-toggle"
171
177
  type="button"
172
- aria-expanded
178
+ aria-expanded="true"
173
179
  aria-controls="code-block-expandable-expanded-content"
174
180
  >
175
181
  <span class="pf-v6-c-button__icon pf-m-start">
package/docs/components/CodeEditor/examples/CodeEditor.md CHANGED
@@ -121,7 +121,6 @@ cssPrefix: pf-v6-c-code-editor
121
121
  ```html
122
122
  <div class="pf-v6-c-code-editor">
123
123
  <div class="pf-v6-c-code-editor__header">
124
- <div class="pf-v6-c-code-editor__header-main"></div>
125
124
  <div class="pf-v6-c-code-editor__tab">
126
125
  <span class="pf-v6-c-code-editor__tab-icon">
127
126
  <i class="fas fa-code" aria-hidden="true"></i>
@@ -138,7 +137,7 @@ cssPrefix: pf-v6-c-code-editor
138
137
  <i class="fas fa- fa-code" aria-hidden="true"></i>
139
138
  </div>
140
139
  <div class="pf-v6-c-empty-state__title">
141
- <h1 class="pf-v6-c-empty-state__title-text">Start editing</h1>
140
+ <h4 class="pf-v6-c-empty-state__title-text">Start editing</h4>
142
141
  </div>
143
142
  </div>
144
143
 
@@ -166,12 +165,27 @@ cssPrefix: pf-v6-c-code-editor
166
165
 
167
166
  ```
168
167
 
168
+ ### Without language tab
169
+
170
+ ```html
171
+ <div class="pf-v6-c-code-editor">
172
+ <div class="pf-v6-c-code-editor__header"></div>
173
+ <div class="pf-v6-c-code-editor__main">
174
+ <div dir="ltr" class="pf-v6-c-code-editor__code">
175
+ <pre class="pf-v6-c-code-editor__code-pre">
176
+ code goes here
177
+ </pre>
178
+ </div>
179
+ </div>
180
+ </div>
181
+
182
+ ```
183
+
169
184
  ### Drag file and hover over component
170
185
 
171
186
  ```html
172
187
  <div class="pf-v6-c-code-editor">
173
188
  <div class="pf-v6-c-code-editor__header">
174
- <div class="pf-v6-c-code-editor__header-main"></div>
175
189
  <div class="pf-v6-c-code-editor__tab">
176
190
  <span class="pf-v6-c-code-editor__tab-icon">
177
191
  <i class="fas fa-code" aria-hidden="true"></i>
@@ -188,7 +202,7 @@ cssPrefix: pf-v6-c-code-editor
188
202
  <i class="fas fa- fa-code" aria-hidden="true"></i>
189
203
  </div>
190
204
  <div class="pf-v6-c-empty-state__title">
191
- <h1 class="pf-v6-c-empty-state__title-text">Start editing</h1>
205
+ <h4 class="pf-v6-c-empty-state__title-text">Start editing</h4>
192
206
  </div>
193
207
  </div>
194
208
 
@@ -346,7 +360,7 @@ This is an extra container used in React to prevent event propagation if upload
346
360
  <i class="fas fa- fa-code" aria-hidden="true"></i>
347
361
  </div>
348
362
  <div class="pf-v6-c-empty-state__title">
349
- <h1 class="pf-v6-c-empty-state__title-text">Start editing</h1>
363
+ <h4 class="pf-v6-c-empty-state__title-text">Start editing</h4>
350
364
  </div>
351
365
  </div>
352
366
 
@@ -457,7 +471,7 @@ This is an extra container used in React to prevent event propagation if upload
457
471
  | Class | Applied to | Outcome |
458
472
  | ------------------------------------------ | ---------- | --------------------------------------------------------------------------------------------- |
459
473
  | `.pf-v6-c-code-editor` | `<div>` | Initiates the code editor component. **Required** |
460
- | `.pf-v6-c-code-editor__header` | `<div>` | Initiates the code editor header used for the controls and tab elements. **Required** |
474
+ | `.pf-v6-c-code-editor__header` | `<div>` | Initiates the code editor header used for the controls and tab elements. |
461
475
  | `.pf-v6-c-code-editor__header-content` | `<div>` | Initiates the code editor header content used for the controls and tab elements. **Required** |
462
476
  | `.pf-v6-c-code-editor__main` | `<div>` | Initiates the main container for a code editor e.g. Monaco **Required** |
463
477
  | `.pf-v6-c-code-editor__code` | `<div>` | Initiates the container for code without a JS code editor. Comes with PatternFly styling. |