@patternfly/patternfly 4.205.1 → 4.206.2

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 (54) hide show
  1. package/base/_common.scss +9 -0
  2. package/base/patternfly-common.css +7 -0
  3. package/components/Page/page.css +50 -0
  4. package/components/Page/page.scss +20 -6
  5. package/components/TreeView/tree-view.css +6 -12
  6. package/components/TreeView/tree-view.scss +4 -8
  7. package/docs/components/AppLauncher/examples/application-launcher.md +69 -22
  8. package/docs/components/DataList/examples/DataList.md +30 -30
  9. package/docs/components/DatePicker/examples/DatePicker.md +4 -4
  10. package/docs/components/LabelGroup/examples/LabelGroup.md +19 -19
  11. package/docs/components/LogViewer/examples/LogViewer.md +46 -37
  12. package/docs/components/Masthead/examples/masthead.md +1 -1
  13. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +54 -27
  14. package/docs/components/Nav/examples/Navigation.md +12 -6
  15. package/docs/components/Pagination/examples/Pagination.md +47 -14
  16. package/docs/components/Popover/examples/Popover.md +36 -24
  17. package/docs/components/SearchInput/examples/SearchInput.md +12 -12
  18. package/docs/components/Select/examples/Select.md +8 -8
  19. package/docs/components/Table/examples/Table.md +1 -1
  20. package/docs/components/Tabs/examples/Tabs.md +64 -70
  21. package/docs/components/TextInputGroup/examples/TextInputGroup.md +60 -60
  22. package/docs/components/Tile/examples/Tile.md +0 -2
  23. package/docs/components/TreeView/examples/TreeView.md +257 -217
  24. package/docs/demos/AboutModal/examples/AboutModal.md +1 -1
  25. package/docs/demos/Alert/examples/Alert.md +3 -3
  26. package/docs/demos/BackToTop/examples/BackToTop.md +1 -1
  27. package/docs/demos/Banner/examples/Banner.md +2 -2
  28. package/docs/demos/CardView/examples/CardView.md +1 -1
  29. package/docs/demos/ContextSelector/examples/ContextSelector.md +3 -3
  30. package/docs/demos/Dashboard/examples/Dashboard.md +1 -1
  31. package/docs/demos/DataList/examples/DataList.md +4 -4
  32. package/docs/demos/DescriptionList/examples/DescriptionList.md +3 -3
  33. package/docs/demos/Drawer/examples/Drawer.md +5 -5
  34. package/docs/demos/JumpLinks/examples/JumpLinks.md +6 -6
  35. package/docs/demos/Masthead/examples/Masthead.md +2 -2
  36. package/docs/demos/Modal/examples/Modal.md +6 -6
  37. package/docs/demos/Nav/examples/Nav.md +8 -8
  38. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
  39. package/docs/demos/Page/examples/Page.md +8 -8
  40. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +7 -7
  41. package/docs/demos/Skeleton/examples/Skeleton.md +1 -1
  42. package/docs/demos/Table/examples/Table.md +14 -14
  43. package/docs/demos/Tabs/examples/Tabs.md +8 -8
  44. package/docs/demos/Toolbar/examples/Toolbar.md +55 -37
  45. package/docs/demos/Wizard/examples/Wizard.md +8 -8
  46. package/docs/layouts/Flex/examples/Flex.md +1 -1
  47. package/docs/layouts/Grid/examples/Grid.md +1 -1
  48. package/package.json +1 -1
  49. package/patternfly-base-no-reset.css +7 -0
  50. package/patternfly-base.css +7 -0
  51. package/patternfly-no-reset.css +63 -12
  52. package/patternfly.css +63 -12
  53. package/patternfly.min.css +1 -1
  54. package/patternfly.min.css.map +1 -1
@@ -790,9 +790,9 @@ In addition to the JavaScript management of [editable labels](/components/label#
790
790
  <button
791
791
  class="pf-c-button pf-m-plain"
792
792
  type="button"
793
- id="static-labels-editable-group-example-editable-label-static-1-button"
793
+ id="static-labels-dynamic-label-group-example-editable-label-static-1-button"
794
794
  aria-label="Remove"
795
- aria-labelledby="static-labels-editable-group-example-editable-label-static-1-button static-labels-editable-group-example-editable-label-static-1-text"
795
+ aria-labelledby="static-labels-dynamic-label-group-example-editable-label-static-1-button static-labels-dynamic-label-group-example-editable-label-static-1-text"
796
796
  >
797
797
  <i class="fas fa-times" aria-hidden="true"></i>
798
798
  </button>
@@ -804,9 +804,9 @@ In addition to the JavaScript management of [editable labels](/components/label#
804
804
  <button
805
805
  class="pf-c-button pf-m-plain"
806
806
  type="button"
807
- id="static-labels-editable-group-example-editable-label-static-2-button"
807
+ id="static-labels-dynamic-label-group-example-editable-label-static-2-button"
808
808
  aria-label="Remove"
809
- aria-labelledby="static-labels-editable-group-example-editable-label-static-2-button static-labels-editable-group-example-editable-label-static-2-text"
809
+ aria-labelledby="static-labels-dynamic-label-group-example-editable-label-static-2-button static-labels-dynamic-label-group-example-editable-label-static-2-text"
810
810
  >
811
811
  <i class="fas fa-times" aria-hidden="true"></i>
812
812
  </button>
@@ -818,9 +818,9 @@ In addition to the JavaScript management of [editable labels](/components/label#
818
818
  <button
819
819
  class="pf-c-button pf-m-plain"
820
820
  type="button"
821
- id="static-labels-editable-group-example-editable-label-static-3-button"
821
+ id="static-labels-dynamic-label-group-example-editable-label-static-3-button"
822
822
  aria-label="Remove"
823
- aria-labelledby="static-labels-editable-group-example-editable-label-static-3-button static-labels-editable-group-example-editable-label-static-3-text"
823
+ aria-labelledby="static-labels-dynamic-label-group-example-editable-label-static-3-button static-labels-dynamic-label-group-example-editable-label-static-3-text"
824
824
  >
825
825
  <i class="fas fa-times" aria-hidden="true"></i>
826
826
  </button>
@@ -852,9 +852,9 @@ In addition to the JavaScript management of [editable labels](/components/label#
852
852
  <button
853
853
  class="pf-c-button pf-m-plain"
854
854
  type="button"
855
- id="static-labels-editable-group-example-editable-label-static-1-button"
855
+ id="mixed-labels-dynamic-label-group-example-editable-label-static-1-button"
856
856
  aria-label="Remove"
857
- aria-labelledby="static-labels-editable-group-example-editable-label-static-1-button static-labels-editable-group-example-editable-label-static-1-text"
857
+ aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-static-1-button mixed-labels-dynamic-label-group-example-editable-label-static-1-text"
858
858
  >
859
859
  <i class="fas fa-times" aria-hidden="true"></i>
860
860
  </button>
@@ -866,9 +866,9 @@ In addition to the JavaScript management of [editable labels](/components/label#
866
866
  <button
867
867
  class="pf-c-button pf-m-plain"
868
868
  type="button"
869
- id="static-labels-editable-group-example-editable-label-static-2-button"
869
+ id="mixed-labels-dynamic-label-group-example-editable-label-static-2-button"
870
870
  aria-label="Remove"
871
- aria-labelledby="static-labels-editable-group-example-editable-label-static-2-button static-labels-editable-group-example-editable-label-static-2-text"
871
+ aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-static-2-button mixed-labels-dynamic-label-group-example-editable-label-static-2-text"
872
872
  >
873
873
  <i class="fas fa-times" aria-hidden="true"></i>
874
874
  </button>
@@ -878,7 +878,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
878
878
  <span class="pf-c-label pf-m-blue pf-m-editable">
879
879
  <button
880
880
  class="pf-c-label__content"
881
- id="static-labels-editable-group-example-editable-label-dynamic-1-editable-content"
881
+ id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-editable-content"
882
882
  currvalue=" Dynamic, editable label 1
883
883
  "
884
884
  aria-label="Editable text"
@@ -887,9 +887,9 @@ In addition to the JavaScript management of [editable labels](/components/label#
887
887
  <button
888
888
  class="pf-c-button pf-m-plain"
889
889
  type="button"
890
- id="static-labels-editable-group-example-editable-label-dynamic-1-button"
890
+ id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-button"
891
891
  aria-label="Remove"
892
- aria-labelledby="static-labels-editable-group-example-editable-label-dynamic-1-button static-labels-editable-group-example-editable-label-dynamic-1-text"
892
+ aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-button mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-text"
893
893
  >
894
894
  <i class="fas fa-times" aria-hidden="true"></i>
895
895
  </button>
@@ -899,7 +899,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
899
899
  <span class="pf-c-label pf-m-blue pf-m-editable">
900
900
  <button
901
901
  class="pf-c-label__content"
902
- id="static-labels-editable-group-example-editable-label-dynamic-2-editable-content"
902
+ id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-editable-content"
903
903
  currvalue=" Dynamic, editable label 2
904
904
  "
905
905
  aria-label="Editable text"
@@ -908,9 +908,9 @@ In addition to the JavaScript management of [editable labels](/components/label#
908
908
  <button
909
909
  class="pf-c-button pf-m-plain"
910
910
  type="button"
911
- id="static-labels-editable-group-example-editable-label-dynamic-2-button"
911
+ id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-button"
912
912
  aria-label="Remove"
913
- aria-labelledby="static-labels-editable-group-example-editable-label-dynamic-2-button static-labels-editable-group-example-editable-label-dynamic-2-text"
913
+ aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-button mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-text"
914
914
  >
915
915
  <i class="fas fa-times" aria-hidden="true"></i>
916
916
  </button>
@@ -920,7 +920,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
920
920
  <span class="pf-c-label pf-m-blue pf-m-active pf-m-editable">
921
921
  <button
922
922
  class="pf-c-label__content"
923
- id="static-labels-editable-group-example-editable-label-dynamic-3-editable-content"
923
+ id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-editable-content"
924
924
  currvalue=" Dynamic, editable label 3
925
925
  "
926
926
  aria-label="Editable text"
@@ -929,9 +929,9 @@ In addition to the JavaScript management of [editable labels](/components/label#
929
929
  <button
930
930
  class="pf-c-button pf-m-plain"
931
931
  type="button"
932
- id="static-labels-editable-group-example-editable-label-dynamic-3-button"
932
+ id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-button"
933
933
  aria-label="Remove"
934
- aria-labelledby="static-labels-editable-group-example-editable-label-dynamic-3-button static-labels-editable-group-example-editable-label-dynamic-3-text"
934
+ aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-button mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-text"
935
935
  >
936
936
  <i class="fas fa-times" aria-hidden="true"></i>
937
937
  </button>
@@ -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>