@patternfly/patternfly 4.205.1 → 4.206.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 (49) hide show
  1. package/base/_common.scss +9 -0
  2. package/base/patternfly-common.css +7 -0
  3. package/docs/components/AppLauncher/examples/application-launcher.md +69 -22
  4. package/docs/components/DataList/examples/DataList.md +30 -30
  5. package/docs/components/DatePicker/examples/DatePicker.md +4 -4
  6. package/docs/components/LabelGroup/examples/LabelGroup.md +19 -19
  7. package/docs/components/LogViewer/examples/LogViewer.md +46 -37
  8. package/docs/components/Masthead/examples/masthead.md +1 -1
  9. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +54 -27
  10. package/docs/components/Nav/examples/Navigation.md +12 -6
  11. package/docs/components/Pagination/examples/Pagination.md +47 -14
  12. package/docs/components/Popover/examples/Popover.md +36 -24
  13. package/docs/components/SearchInput/examples/SearchInput.md +12 -12
  14. package/docs/components/Select/examples/Select.md +8 -8
  15. package/docs/components/Table/examples/Table.md +1 -1
  16. package/docs/components/Tabs/examples/Tabs.md +64 -70
  17. package/docs/components/TextInputGroup/examples/TextInputGroup.md +60 -60
  18. package/docs/components/Tile/examples/Tile.md +0 -2
  19. package/docs/demos/AboutModal/examples/AboutModal.md +1 -1
  20. package/docs/demos/Alert/examples/Alert.md +3 -3
  21. package/docs/demos/BackToTop/examples/BackToTop.md +1 -1
  22. package/docs/demos/Banner/examples/Banner.md +2 -2
  23. package/docs/demos/CardView/examples/CardView.md +1 -1
  24. package/docs/demos/ContextSelector/examples/ContextSelector.md +3 -3
  25. package/docs/demos/Dashboard/examples/Dashboard.md +1 -1
  26. package/docs/demos/DataList/examples/DataList.md +4 -4
  27. package/docs/demos/DescriptionList/examples/DescriptionList.md +3 -3
  28. package/docs/demos/Drawer/examples/Drawer.md +5 -5
  29. package/docs/demos/JumpLinks/examples/JumpLinks.md +6 -6
  30. package/docs/demos/Masthead/examples/Masthead.md +2 -2
  31. package/docs/demos/Modal/examples/Modal.md +6 -6
  32. package/docs/demos/Nav/examples/Nav.md +8 -8
  33. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
  34. package/docs/demos/Page/examples/Page.md +8 -8
  35. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +7 -7
  36. package/docs/demos/Skeleton/examples/Skeleton.md +1 -1
  37. package/docs/demos/Table/examples/Table.md +14 -14
  38. package/docs/demos/Tabs/examples/Tabs.md +8 -8
  39. package/docs/demos/Toolbar/examples/Toolbar.md +55 -37
  40. package/docs/demos/Wizard/examples/Wizard.md +8 -8
  41. package/docs/layouts/Flex/examples/Flex.md +1 -1
  42. package/docs/layouts/Grid/examples/Grid.md +1 -1
  43. package/package.json +1 -1
  44. package/patternfly-base-no-reset.css +7 -0
  45. package/patternfly-base.css +7 -0
  46. package/patternfly-no-reset.css +7 -0
  47. package/patternfly.css +7 -0
  48. package/patternfly.min.css +1 -1
  49. package/patternfly.min.css.map +1 -1
@@ -14,7 +14,8 @@ cssPrefix: pf-c-log-viewer
14
14
  class="pf-c-log-viewer"
15
15
  style="--pf-c-log-viewer__index--Width: 75px"
16
16
  tabindex="0"
17
- aria-label="Log viewer"
17
+ role="region"
18
+ aria-label="Basic log viewer"
18
19
  >
19
20
  <div class="pf-c-log-viewer__header">
20
21
  <div
@@ -563,7 +564,8 @@ cssPrefix: pf-c-log-viewer
563
564
  class="pf-c-log-viewer pf-m-line-numbers"
564
565
  style="--pf-c-log-viewer__index--Width: 75px"
565
566
  tabindex="0"
566
- aria-label="Log viewer"
567
+ role="region"
568
+ aria-label="Log viewer with line numbers"
567
569
  >
568
570
  <div class="pf-c-log-viewer__header">
569
571
  <div
@@ -1112,7 +1114,8 @@ cssPrefix: pf-c-log-viewer
1112
1114
  class="pf-c-log-viewer pf-m-line-numbers pf-m-wrap-text"
1113
1115
  style="--pf-c-log-viewer__index--Width: 75px"
1114
1116
  tabindex="0"
1115
- aria-label="Log viewer"
1117
+ role="region"
1118
+ aria-label="Log viewer with text wrapping"
1116
1119
  >
1117
1120
  <div class="pf-c-log-viewer__header">
1118
1121
  <div
@@ -1661,7 +1664,8 @@ cssPrefix: pf-c-log-viewer
1661
1664
  class="pf-c-log-viewer pf-m-line-numbers pf-m-nowrap"
1662
1665
  style="--pf-c-log-viewer__index--Width: 75px"
1663
1666
  tabindex="0"
1664
- aria-label="Log viewer"
1667
+ role="region"
1668
+ aria-label="Log viewer without text wrapping"
1665
1669
  >
1666
1670
  <div class="pf-c-log-viewer__header">
1667
1671
  <div
@@ -2210,7 +2214,8 @@ cssPrefix: pf-c-log-viewer
2210
2214
  class="pf-c-log-viewer pf-m-line-numbers"
2211
2215
  style="--pf-c-log-viewer__index--Width: 75px;"
2212
2216
  tabindex="0"
2213
- aria-label="Log viewer"
2217
+ role="region"
2218
+ aria-label="Log viewer with search results"
2214
2219
  >
2215
2220
  <div class="pf-c-log-viewer__header">
2216
2221
  <div
@@ -2839,7 +2844,8 @@ cssPrefix: pf-c-log-viewer
2839
2844
  class="pf-c-log-viewer pf-m-line-numbers"
2840
2845
  style="--pf-c-log-viewer__index--Width: 75px; --pf-c-log-viewer--MaxHeight: 300px;"
2841
2846
  tabindex="0"
2842
- aria-label="Log viewer"
2847
+ role="region"
2848
+ aria-label="Log viewer with max height"
2843
2849
  >
2844
2850
  <div class="pf-c-log-viewer__header">
2845
2851
  <div
@@ -3388,7 +3394,8 @@ cssPrefix: pf-c-log-viewer
3388
3394
  class="pf-c-log-viewer pf-m-line-numbers"
3389
3395
  style="--pf-c-log-viewer__index--Width: 75px"
3390
3396
  tabindex="0"
3391
- aria-label="Log viewer"
3397
+ role="region"
3398
+ aria-label="Log viewer with dropdown, drilldown, search expanded"
3392
3399
  >
3393
3400
  <div class="pf-c-log-viewer__header">
3394
3401
  <div
@@ -3935,7 +3942,8 @@ cssPrefix: pf-c-log-viewer
3935
3942
  class="pf-c-log-viewer pf-m-line-numbers"
3936
3943
  style="--pf-c-log-viewer__index--Width: 75px"
3937
3944
  tabindex="0"
3938
- aria-label="Log viewer"
3945
+ role="region"
3946
+ aria-label="Log viewer with popover open"
3939
3947
  >
3940
3948
  <div class="pf-c-log-viewer__header">
3941
3949
  <div
@@ -4507,12 +4515,13 @@ cssPrefix: pf-c-log-viewer
4507
4515
  class="pf-c-log-viewer pf-m-line-numbers pf-m-dark"
4508
4516
  style="--pf-c-log-viewer__index--Width: 75px"
4509
4517
  tabindex="0"
4510
- aria-label="Log viewer"
4518
+ role="region"
4519
+ aria-label="Dark log viewer"
4511
4520
  >
4512
4521
  <div class="pf-c-log-viewer__header">
4513
4522
  <div
4514
4523
  class="pf-c-toolbar"
4515
- id="log-viewer-line-number-example-toolbar"
4524
+ id="log-viewer-dark-example-toolbar"
4516
4525
  role="toolbar"
4517
4526
  >
4518
4527
  <div class="pf-c-toolbar__content">
@@ -4520,17 +4529,17 @@ cssPrefix: pf-c-log-viewer
4520
4529
  <div class="pf-c-toolbar__item pf-m-search-filter">
4521
4530
  <div class="pf-c-select">
4522
4531
  <span
4523
- id="log-viewer-line-number-example-select-menu-label"
4532
+ id="log-viewer-dark-example-select-menu-label"
4524
4533
  hidden
4525
4534
  >Choose one</span>
4526
4535
 
4527
4536
  <button
4528
4537
  class="pf-c-select__toggle"
4529
4538
  type="button"
4530
- id="log-viewer-line-number-example-select-menu-toggle"
4539
+ id="log-viewer-dark-example-select-menu-toggle"
4531
4540
  aria-haspopup="true"
4532
4541
  aria-expanded="false"
4533
- aria-labelledby="log-viewer-line-number-example-select-menu-label log-viewer-line-number-example-select-menu-toggle"
4542
+ aria-labelledby="log-viewer-dark-example-select-menu-label log-viewer-dark-example-select-menu-toggle"
4534
4543
  >
4535
4544
  <div class="pf-c-select__toggle-wrapper">
4536
4545
  <span class="pf-c-select__toggle-text">System log</span>
@@ -4542,7 +4551,7 @@ cssPrefix: pf-c-log-viewer
4542
4551
  <ul
4543
4552
  class="pf-c-select__menu"
4544
4553
  role="listbox"
4545
- aria-labelledby="log-viewer-line-number-example-select-menu-label"
4554
+ aria-labelledby="log-viewer-dark-example-select-menu-label"
4546
4555
  hidden
4547
4556
  >
4548
4557
  <li role="presentation">
@@ -4573,7 +4582,7 @@ cssPrefix: pf-c-log-viewer
4573
4582
  type="button"
4574
4583
  aria-label="Show filters"
4575
4584
  aria-expanded="false"
4576
- aria-controls="log-viewer-line-number-example-toolbar-expandable-content"
4585
+ aria-controls="log-viewer-dark-example-toolbar-expandable-content"
4577
4586
  >
4578
4587
  <i class="fas fa-search" aria-hidden="true"></i>
4579
4588
  </button>
@@ -4645,7 +4654,7 @@ cssPrefix: pf-c-log-viewer
4645
4654
  <div class="pf-c-dropdown">
4646
4655
  <button
4647
4656
  class="pf-c-dropdown__toggle pf-m-plain"
4648
- id="log-viewer-line-number-example-dropdown-button"
4657
+ id="log-viewer-dark-example-dropdown-button"
4649
4658
  aria-expanded="false"
4650
4659
  type="button"
4651
4660
  aria-label="Actions"
@@ -4682,13 +4691,13 @@ cssPrefix: pf-c-log-viewer
4682
4691
  <input
4683
4692
  class="pf-c-check__input"
4684
4693
  type="checkbox"
4685
- id="log-viewer-line-number-example-desktop-check-wrap-lines"
4686
- name="log-viewer-line-number-example-desktop-check-wrap-lines"
4694
+ id="log-viewer-dark-example-desktop-check-wrap-lines"
4695
+ name="log-viewer-dark-example-desktop-check-wrap-lines"
4687
4696
  />
4688
4697
 
4689
4698
  <label
4690
4699
  class="pf-c-check__label"
4691
- for="log-viewer-line-number-example-desktop-check-wrap-lines"
4700
+ for="log-viewer-dark-example-desktop-check-wrap-lines"
4692
4701
  >Wrap lines</label>
4693
4702
  </div>
4694
4703
  </span>
@@ -4705,13 +4714,13 @@ cssPrefix: pf-c-log-viewer
4705
4714
  <input
4706
4715
  class="pf-c-check__input"
4707
4716
  type="checkbox"
4708
- id="log-viewer-line-number-example-desktop-check-show-timestamps"
4709
- name="log-viewer-line-number-example-desktop-check-show-timestamps"
4717
+ id="log-viewer-dark-example-desktop-check-show-timestamps"
4718
+ name="log-viewer-dark-example-desktop-check-show-timestamps"
4710
4719
  />
4711
4720
 
4712
4721
  <label
4713
4722
  class="pf-c-check__label"
4714
- for="log-viewer-line-number-example-desktop-check-show-timestamps"
4723
+ for="log-viewer-dark-example-desktop-check-show-timestamps"
4715
4724
  >Show timestamps</label>
4716
4725
  </div>
4717
4726
  </span>
@@ -4728,13 +4737,13 @@ cssPrefix: pf-c-log-viewer
4728
4737
  <input
4729
4738
  class="pf-c-check__input"
4730
4739
  type="checkbox"
4731
- id="log-viewer-line-number-example-desktop-check-line-number"
4732
- name="log-viewer-line-number-example-desktop-check-line-number"
4740
+ id="log-viewer-dark-example-desktop-check-line-number"
4741
+ name="log-viewer-dark-example-desktop-check-line-number"
4733
4742
  />
4734
4743
 
4735
4744
  <label
4736
4745
  class="pf-c-check__label"
4737
- for="log-viewer-line-number-example-desktop-check-line-number"
4746
+ for="log-viewer-dark-example-desktop-check-line-number"
4738
4747
  >Display line number</label>
4739
4748
  </div>
4740
4749
  </span>
@@ -4857,7 +4866,7 @@ cssPrefix: pf-c-log-viewer
4857
4866
  <div class="pf-c-dropdown">
4858
4867
  <button
4859
4868
  class="pf-c-dropdown__toggle pf-m-plain"
4860
- id="log-viewer-line-number-example-settings-dropdown-button"
4869
+ id="log-viewer-dark-example-settings-dropdown-button"
4861
4870
  aria-expanded="false"
4862
4871
  type="button"
4863
4872
  aria-label="Settings"
@@ -4866,20 +4875,20 @@ cssPrefix: pf-c-log-viewer
4866
4875
  </button>
4867
4876
  <ul
4868
4877
  class="pf-c-dropdown__menu pf-m-align-right"
4869
- aria-labelledby="log-viewer-line-number-example-settings-dropdown-button"
4878
+ aria-labelledby="log-viewer-dark-example-settings-dropdown-button"
4870
4879
  hidden
4871
4880
  >
4872
4881
  <li>
4873
4882
  <div class="pf-c-dropdown__menu-item">
4874
4883
  <label
4875
4884
  class="pf-c-check"
4876
- for="log-viewer-line-number-example-check-wrap-lines"
4885
+ for="log-viewer-dark-example-check-wrap-lines"
4877
4886
  >
4878
4887
  <input
4879
4888
  class="pf-c-check__input"
4880
4889
  type="checkbox"
4881
- id="log-viewer-line-number-example-check-wrap-lines"
4882
- name="log-viewer-line-number-example-check-wrap-lines"
4890
+ id="log-viewer-dark-example-check-wrap-lines"
4891
+ name="log-viewer-dark-example-check-wrap-lines"
4883
4892
  />
4884
4893
 
4885
4894
  <span class="pf-c-check__label">Wrap lines</span>
@@ -4890,13 +4899,13 @@ cssPrefix: pf-c-log-viewer
4890
4899
  <div class="pf-c-dropdown__menu-item">
4891
4900
  <label
4892
4901
  class="pf-c-check"
4893
- for="log-viewer-line-number-example-check-show-timestamps"
4902
+ for="log-viewer-dark-example-check-show-timestamps"
4894
4903
  >
4895
4904
  <input
4896
4905
  class="pf-c-check__input"
4897
4906
  type="checkbox"
4898
- id="log-viewer-line-number-example-check-show-timestamps"
4899
- name="log-viewer-line-number-example-check-show-timestamps"
4907
+ id="log-viewer-dark-example-check-show-timestamps"
4908
+ name="log-viewer-dark-example-check-show-timestamps"
4900
4909
  />
4901
4910
 
4902
4911
  <span class="pf-c-check__label">Show timestamps</span>
@@ -4907,13 +4916,13 @@ cssPrefix: pf-c-log-viewer
4907
4916
  <div class="pf-c-dropdown__menu-item">
4908
4917
  <label
4909
4918
  class="pf-c-check"
4910
- for="log-viewer-line-number-example-check-line-number"
4919
+ for="log-viewer-dark-example-check-line-number"
4911
4920
  >
4912
4921
  <input
4913
4922
  class="pf-c-check__input"
4914
4923
  type="checkbox"
4915
- id="log-viewer-line-number-example-check-line-number"
4916
- name="log-viewer-line-number-example-check-line-number"
4924
+ id="log-viewer-dark-example-check-line-number"
4925
+ name="log-viewer-dark-example-check-line-number"
4917
4926
  />
4918
4927
 
4919
4928
  <span class="pf-c-check__label">Display line number</span>
@@ -4954,7 +4963,7 @@ cssPrefix: pf-c-log-viewer
4954
4963
  </div>
4955
4964
  <div
4956
4965
  class="pf-c-toolbar__expandable-content pf-m-hidden"
4957
- id="log-viewer-line-number-example-toolbar-expandable-content"
4966
+ id="log-viewer-dark-example-toolbar-expandable-content"
4958
4967
  hidden
4959
4968
  >
4960
4969
  <div
@@ -155,7 +155,7 @@ cssPrefix: pf-c-masthead
155
155
  ### Light 200 variant
156
156
 
157
157
  ```html
158
- <header class="pf-c-masthead pf-m-light-200" id="light-masthead">
158
+ <header class="pf-c-masthead pf-m-light-200" id="light-200-masthead">
159
159
  <span class="pf-c-masthead__toggle">
160
160
  <button
161
161
  class="pf-c-button pf-m-plain"
@@ -154,10 +154,13 @@ cssPrefix: pf-c-multiple-file-upload
154
154
  <i class="fas fa-file" aria-hidden="true"></i>
155
155
  </div>
156
156
  <div class="pf-c-multiple-file-upload__status-item-main">
157
- <div class="pf-c-progress" id="multiple-file-upload-progress-png">
157
+ <div
158
+ class="pf-c-progress"
159
+ id="multiple-file-upload-status-progress-png"
160
+ >
158
161
  <div
159
162
  class="pf-c-progress__description"
160
- id="multiple-file-upload-progress-png-description"
163
+ id="multiple-file-upload-status-progress-png-description"
161
164
  >
162
165
  <span class="pf-c-multiple-file-upload__status-item-progress">
163
166
  <span
@@ -177,7 +180,7 @@ cssPrefix: pf-c-multiple-file-upload
177
180
  aria-valuemin="0"
178
181
  aria-valuemax="100"
179
182
  aria-valuenow="35"
180
- aria-labelledby="multiple-file-upload-progress-png-description"
183
+ aria-labelledby="multiple-file-upload-status-progress-png-description"
181
184
  >
182
185
  <div class="pf-c-progress__indicator" style="width:35%;"></div>
183
186
  </div>
@@ -198,10 +201,13 @@ cssPrefix: pf-c-multiple-file-upload
198
201
  <i class="fas fa-file" aria-hidden="true"></i>
199
202
  </div>
200
203
  <div class="pf-c-multiple-file-upload__status-item-main">
201
- <div class="pf-c-progress" id="multiple-file-upload-progress-doc">
204
+ <div
205
+ class="pf-c-progress"
206
+ id="multiple-file-upload-status-progress-doc"
207
+ >
202
208
  <div
203
209
  class="pf-c-progress__description"
204
- id="multiple-file-upload-progress-doc-description"
210
+ id="multiple-file-upload-status-progress-doc-description"
205
211
  >
206
212
  <span class="pf-c-multiple-file-upload__status-item-progress">
207
213
  <span
@@ -221,7 +227,7 @@ cssPrefix: pf-c-multiple-file-upload
221
227
  aria-valuemin="0"
222
228
  aria-valuemax="100"
223
229
  aria-valuenow="70"
224
- aria-labelledby="multiple-file-upload-progress-doc-description"
230
+ aria-labelledby="multiple-file-upload-status-progress-doc-description"
225
231
  >
226
232
  <div class="pf-c-progress__indicator" style="width:70%;"></div>
227
233
  </div>
@@ -242,10 +248,13 @@ cssPrefix: pf-c-multiple-file-upload
242
248
  <i class="fas fa-file" aria-hidden="true"></i>
243
249
  </div>
244
250
  <div class="pf-c-multiple-file-upload__status-item-main">
245
- <div class="pf-c-progress" id="multiple-file-upload-progress-pdf">
251
+ <div
252
+ class="pf-c-progress"
253
+ id="multiple-file-upload-status-progress-pdf"
254
+ >
246
255
  <div
247
256
  class="pf-c-progress__description"
248
- id="multiple-file-upload-progress-pdf-description"
257
+ id="multiple-file-upload-status-progress-pdf-description"
249
258
  >
250
259
  <span class="pf-c-multiple-file-upload__status-item-progress">
251
260
  <span
@@ -265,7 +274,7 @@ cssPrefix: pf-c-multiple-file-upload
265
274
  aria-valuemin="0"
266
275
  aria-valuemax="100"
267
276
  aria-valuenow="50"
268
- aria-labelledby="multiple-file-upload-progress-pdf-description"
277
+ aria-labelledby="multiple-file-upload-status-progress-pdf-description"
269
278
  >
270
279
  <div class="pf-c-progress__indicator" style="width:50%;"></div>
271
280
  </div>
@@ -338,10 +347,13 @@ cssPrefix: pf-c-multiple-file-upload
338
347
  <i class="fas fa-file" aria-hidden="true"></i>
339
348
  </div>
340
349
  <div class="pf-c-multiple-file-upload__status-item-main">
341
- <div class="pf-c-progress" id="multiple-file-upload-progress-png">
350
+ <div
351
+ class="pf-c-progress"
352
+ id="multiple-file-upload-status-expanded-progress-png"
353
+ >
342
354
  <div
343
355
  class="pf-c-progress__description"
344
- id="multiple-file-upload-progress-png-description"
356
+ id="multiple-file-upload-status-expanded-progress-png-description"
345
357
  >
346
358
  <span class="pf-c-multiple-file-upload__status-item-progress">
347
359
  <span
@@ -361,7 +373,7 @@ cssPrefix: pf-c-multiple-file-upload
361
373
  aria-valuemin="0"
362
374
  aria-valuemax="100"
363
375
  aria-valuenow="35"
364
- aria-labelledby="multiple-file-upload-progress-png-description"
376
+ aria-labelledby="multiple-file-upload-status-expanded-progress-png-description"
365
377
  >
366
378
  <div class="pf-c-progress__indicator" style="width:35%;"></div>
367
379
  </div>
@@ -382,10 +394,13 @@ cssPrefix: pf-c-multiple-file-upload
382
394
  <i class="fas fa-file" aria-hidden="true"></i>
383
395
  </div>
384
396
  <div class="pf-c-multiple-file-upload__status-item-main">
385
- <div class="pf-c-progress" id="multiple-file-upload-progress-doc">
397
+ <div
398
+ class="pf-c-progress"
399
+ id="multiple-file-upload-status-expanded-progress-doc"
400
+ >
386
401
  <div
387
402
  class="pf-c-progress__description"
388
- id="multiple-file-upload-progress-doc-description"
403
+ id="multiple-file-upload-status-expanded-progress-doc-description"
389
404
  >
390
405
  <span class="pf-c-multiple-file-upload__status-item-progress">
391
406
  <span
@@ -405,7 +420,7 @@ cssPrefix: pf-c-multiple-file-upload
405
420
  aria-valuemin="0"
406
421
  aria-valuemax="100"
407
422
  aria-valuenow="70"
408
- aria-labelledby="multiple-file-upload-progress-doc-description"
423
+ aria-labelledby="multiple-file-upload-status-expanded-progress-doc-description"
409
424
  >
410
425
  <div class="pf-c-progress__indicator" style="width:70%;"></div>
411
426
  </div>
@@ -426,10 +441,13 @@ cssPrefix: pf-c-multiple-file-upload
426
441
  <i class="fas fa-file" aria-hidden="true"></i>
427
442
  </div>
428
443
  <div class="pf-c-multiple-file-upload__status-item-main">
429
- <div class="pf-c-progress" id="multiple-file-upload-progress-pdf">
444
+ <div
445
+ class="pf-c-progress"
446
+ id="multiple-file-upload-status-expanded-progress-pdf"
447
+ >
430
448
  <div
431
449
  class="pf-c-progress__description"
432
- id="multiple-file-upload-progress-pdf-description"
450
+ id="multiple-file-upload-status-expanded-progress-pdf-description"
433
451
  >
434
452
  <span class="pf-c-multiple-file-upload__status-item-progress">
435
453
  <span
@@ -449,7 +467,7 @@ cssPrefix: pf-c-multiple-file-upload
449
467
  aria-valuemin="0"
450
468
  aria-valuemax="100"
451
469
  aria-valuenow="50"
452
- aria-labelledby="multiple-file-upload-progress-pdf-description"
470
+ aria-labelledby="multiple-file-upload-status-expanded-progress-pdf-description"
453
471
  >
454
472
  <div class="pf-c-progress__indicator" style="width:50%;"></div>
455
473
  </div>
@@ -522,10 +540,13 @@ cssPrefix: pf-c-multiple-file-upload
522
540
  <i class="fas fa-file" aria-hidden="true"></i>
523
541
  </div>
524
542
  <div class="pf-c-multiple-file-upload__status-item-main">
525
- <div class="pf-c-progress" id="multiple-file-upload-progress-png">
543
+ <div
544
+ class="pf-c-progress"
545
+ id="multiple-file-upload-status-horizontal-expanded-progress-png"
546
+ >
526
547
  <div
527
548
  class="pf-c-progress__description"
528
- id="multiple-file-upload-progress-png-description"
549
+ id="multiple-file-upload-status-horizontal-expanded-progress-png-description"
529
550
  >
530
551
  <span class="pf-c-multiple-file-upload__status-item-progress">
531
552
  <span
@@ -545,7 +566,7 @@ cssPrefix: pf-c-multiple-file-upload
545
566
  aria-valuemin="0"
546
567
  aria-valuemax="100"
547
568
  aria-valuenow="35"
548
- aria-labelledby="multiple-file-upload-progress-png-description"
569
+ aria-labelledby="multiple-file-upload-status-horizontal-expanded-progress-png-description"
549
570
  >
550
571
  <div class="pf-c-progress__indicator" style="width:35%;"></div>
551
572
  </div>
@@ -566,10 +587,13 @@ cssPrefix: pf-c-multiple-file-upload
566
587
  <i class="fas fa-file" aria-hidden="true"></i>
567
588
  </div>
568
589
  <div class="pf-c-multiple-file-upload__status-item-main">
569
- <div class="pf-c-progress" id="multiple-file-upload-progress-doc">
590
+ <div
591
+ class="pf-c-progress"
592
+ id="multiple-file-upload-status-horizontal-expanded-progress-doc"
593
+ >
570
594
  <div
571
595
  class="pf-c-progress__description"
572
- id="multiple-file-upload-progress-doc-description"
596
+ id="multiple-file-upload-status-horizontal-expanded-progress-doc-description"
573
597
  >
574
598
  <span class="pf-c-multiple-file-upload__status-item-progress">
575
599
  <span
@@ -589,7 +613,7 @@ cssPrefix: pf-c-multiple-file-upload
589
613
  aria-valuemin="0"
590
614
  aria-valuemax="100"
591
615
  aria-valuenow="70"
592
- aria-labelledby="multiple-file-upload-progress-doc-description"
616
+ aria-labelledby="multiple-file-upload-status-horizontal-expanded-progress-doc-description"
593
617
  >
594
618
  <div class="pf-c-progress__indicator" style="width:70%;"></div>
595
619
  </div>
@@ -610,10 +634,13 @@ cssPrefix: pf-c-multiple-file-upload
610
634
  <i class="fas fa-file" aria-hidden="true"></i>
611
635
  </div>
612
636
  <div class="pf-c-multiple-file-upload__status-item-main">
613
- <div class="pf-c-progress" id="multiple-file-upload-progress-pdf">
637
+ <div
638
+ class="pf-c-progress"
639
+ id="multiple-file-upload-status-horizontal-expanded-progress-pdf"
640
+ >
614
641
  <div
615
642
  class="pf-c-progress__description"
616
- id="multiple-file-upload-progress-pdf-description"
643
+ id="multiple-file-upload-status-horizontal-expanded-progress-pdf-description"
617
644
  >
618
645
  <span class="pf-c-multiple-file-upload__status-item-progress">
619
646
  <span
@@ -633,7 +660,7 @@ cssPrefix: pf-c-multiple-file-upload
633
660
  aria-valuemin="0"
634
661
  aria-valuemax="100"
635
662
  aria-valuenow="50"
636
- aria-labelledby="multiple-file-upload-progress-pdf-description"
663
+ aria-labelledby="multiple-file-upload-status-horizontal-expanded-progress-pdf-description"
637
664
  >
638
665
  <div class="pf-c-progress__indicator" style="width:50%;"></div>
639
666
  </div>
@@ -698,7 +698,7 @@ cssPrefix: pf-c-nav
698
698
  <li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
699
699
  <button
700
700
  class="pf-c-nav__link"
701
- id="expandable-example1"
701
+ id="expandable-light-example1"
702
702
  aria-expanded="true"
703
703
  >
704
704
  Link 1 (current and expanded example)
@@ -708,7 +708,10 @@ cssPrefix: pf-c-nav
708
708
  </span>
709
709
  </span>
710
710
  </button>
711
- <section class="pf-c-nav__subnav" aria-labelledby="expandable-example1">
711
+ <section
712
+ class="pf-c-nav__subnav"
713
+ aria-labelledby="expandable-light-example1"
714
+ >
712
715
  <ul class="pf-c-nav__list">
713
716
  <li class="pf-c-nav__item">
714
717
  <a href="#" class="pf-c-nav__link">Current link</a>
@@ -730,7 +733,7 @@ cssPrefix: pf-c-nav
730
733
  <li class="pf-c-nav__item pf-m-expandable pf-m-expanded">
731
734
  <button
732
735
  class="pf-c-nav__link"
733
- id="expandable-example2"
736
+ id="expandable-light-example2"
734
737
  aria-expanded="true"
735
738
  >
736
739
  Link 2 (expanded, but not current example)
@@ -742,7 +745,10 @@ cssPrefix: pf-c-nav
742
745
  </span>
743
746
  </span>
744
747
  </button>
745
- <section class="pf-c-nav__subnav" aria-labelledby="expandable-example2">
748
+ <section
749
+ class="pf-c-nav__subnav"
750
+ aria-labelledby="expandable-light-example2"
751
+ >
746
752
  <ul class="pf-c-nav__list">
747
753
  <li class="pf-c-nav__item">
748
754
  <a href="#" class="pf-c-nav__link">Subnav link 1</a>
@@ -756,7 +762,7 @@ cssPrefix: pf-c-nav
756
762
  <li class="pf-c-nav__item pf-m-expandable">
757
763
  <button
758
764
  class="pf-c-nav__link"
759
- id="expandable-example3"
765
+ id="expandable-light-example3"
760
766
  aria-expanded="false"
761
767
  >
762
768
  Link 3
@@ -768,7 +774,7 @@ cssPrefix: pf-c-nav
768
774
  </button>
769
775
  <section
770
776
  class="pf-c-nav__subnav"
771
- aria-labelledby="expandable-example3"
777
+ aria-labelledby="expandable-light-example3"
772
778
  hidden
773
779
  >
774
780
  <ul class="pf-c-nav__list">