@patternfly/patternfly 4.216.1 → 4.216.3

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 (23) hide show
  1. package/components/Form/form.css +1 -0
  2. package/components/Form/form.scss +1 -0
  3. package/components/TreeView/tree-view.css +6 -0
  4. package/components/TreeView/tree-view.scss +5 -0
  5. package/docs/components/Form/examples/Form.md +90 -148
  6. package/docs/components/Login/examples/Login.md +20 -50
  7. package/docs/components/SearchInput/examples/SearchInput.md +16 -32
  8. package/docs/components/TextInputGroup/examples/TextInputGroup.md +16 -32
  9. package/docs/components/TreeView/examples/TreeView.md +21 -21
  10. package/docs/components/Wizard/examples/Wizard.md +105 -210
  11. package/docs/demos/Alert/examples/Alert.md +16 -40
  12. package/docs/demos/Button/examples/Button.md +12 -30
  13. package/docs/demos/Form/examples/BasicForms.md +97 -176
  14. package/docs/demos/HelperText/examples/HelperText.md +8 -19
  15. package/docs/demos/Modal/examples/Modal.md +18 -27
  16. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +6 -10
  17. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +24 -40
  18. package/docs/demos/Wizard/examples/Wizard.md +168 -336
  19. package/package.json +1 -1
  20. package/patternfly-no-reset.css +7 -0
  21. package/patternfly.css +7 -0
  22. package/patternfly.min.css +1 -1
  23. package/patternfly.min.css.map +1 -1
package/docs/components/Login/examples/Login.md CHANGED
@@ -56,11 +56,8 @@ wrapperTag: div
56
56
  </span>
57
57
  Invalid login credentials.
58
58
  </p>
59
- <div class="pf-c-form__group">
60
- <label class="pf-c-form__label" for="login-demo-form-username">
61
- <span class="pf-c-form__label-text">Username</span>
62
- <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
63
- </label>
59
+ <div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-username">
60
+ <span class="pf-c-form__label-text">Username</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
64
61
 
65
62
  <input
66
63
  class="pf-c-form-control"
@@ -71,11 +68,8 @@ wrapperTag: div
71
68
  name="login-demo-form-username"
72
69
  />
73
70
  </div>
74
- <div class="pf-c-form__group">
75
- <label class="pf-c-form__label" for="login-demo-form-password">
76
- <span class="pf-c-form__label-text">Password</span>
77
- <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
78
- </label>
71
+ <div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-password">
72
+ <span class="pf-c-form__label-text">Password</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
79
73
 
80
74
  <input
81
75
  class="pf-c-form-control"
@@ -278,14 +272,11 @@ wrapperTag: div
278
272
  </span>
279
273
  Invalid login credentials.
280
274
  </p>
281
- <div class="pf-c-form__group">
282
- <label
275
+ <div class="pf-c-form__group"><label
283
276
  class="pf-c-form__label"
284
277
  for="invalid-login-demo-form-username"
285
278
  >
286
- <span class="pf-c-form__label-text">Username</span>
287
- <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
288
- </label>
279
+ <span class="pf-c-form__label-text">Username</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
289
280
 
290
281
  <input
291
282
  class="pf-c-form-control"
@@ -296,14 +287,11 @@ wrapperTag: div
296
287
  aria-invalid="true"
297
288
  />
298
289
  </div>
299
- <div class="pf-c-form__group">
300
- <label
290
+ <div class="pf-c-form__group"><label
301
291
  class="pf-c-form__label"
302
292
  for="invalid-login-demo-form-password"
303
293
  >
304
- <span class="pf-c-form__label-text">Password</span>
305
- <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
306
- </label>
294
+ <span class="pf-c-form__label-text">Password</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
307
295
 
308
296
  <input
309
297
  class="pf-c-form-control"
@@ -506,11 +494,8 @@ wrapperTag: div
506
494
  </span>
507
495
  Invalid login credentials.
508
496
  </p>
509
- <div class="pf-c-form__group">
510
- <label class="pf-c-form__label" for="login-demo-form-username">
511
- <span class="pf-c-form__label-text">Username</span>
512
- <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
513
- </label>
497
+ <div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-username">
498
+ <span class="pf-c-form__label-text">Username</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
514
499
 
515
500
  <input
516
501
  class="pf-c-form-control"
@@ -521,11 +506,8 @@ wrapperTag: div
521
506
  name="login-demo-form-username"
522
507
  />
523
508
  </div>
524
- <div class="pf-c-form__group">
525
- <label class="pf-c-form__label" for="login-demo-form-password">
526
- <span class="pf-c-form__label-text">Password</span>
527
- <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
528
- </label>
509
+ <div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-password">
510
+ <span class="pf-c-form__label-text">Password</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
529
511
 
530
512
  <div class="pf-c-input-group">
531
513
  <input
@@ -739,11 +721,8 @@ wrapperTag: div
739
721
  </span>
740
722
  Invalid login credentials.
741
723
  </p>
742
- <div class="pf-c-form__group">
743
- <label class="pf-c-form__label" for="login-demo-form-username">
744
- <span class="pf-c-form__label-text">Username</span>
745
- <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
746
- </label>
724
+ <div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-username">
725
+ <span class="pf-c-form__label-text">Username</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
747
726
 
748
727
  <input
749
728
  class="pf-c-form-control"
@@ -754,11 +733,8 @@ wrapperTag: div
754
733
  name="login-demo-form-username"
755
734
  />
756
735
  </div>
757
- <div class="pf-c-form__group">
758
- <label class="pf-c-form__label" for="login-demo-form-password">
759
- <span class="pf-c-form__label-text">Password</span>
760
- <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
761
- </label>
736
+ <div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-password">
737
+ <span class="pf-c-form__label-text">Password</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
762
738
 
763
739
  <div class="pf-c-input-group">
764
740
  <input
@@ -1018,11 +994,8 @@ wrapperTag: div
1018
994
  </span>
1019
995
  Invalid login credentials.
1020
996
  </p>
1021
- <div class="pf-c-form__group">
1022
- <label class="pf-c-form__label" for="login-demo-form-username">
1023
- <span class="pf-c-form__label-text">Username</span>
1024
- <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
1025
- </label>
997
+ <div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-username">
998
+ <span class="pf-c-form__label-text">Username</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
1026
999
 
1027
1000
  <input
1028
1001
  class="pf-c-form-control"
@@ -1033,11 +1006,8 @@ wrapperTag: div
1033
1006
  name="login-demo-form-username"
1034
1007
  />
1035
1008
  </div>
1036
- <div class="pf-c-form__group">
1037
- <label class="pf-c-form__label" for="login-demo-form-password">
1038
- <span class="pf-c-form__label-text">Password</span>
1039
- <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
1040
- </label>
1009
+ <div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-password">
1010
+ <span class="pf-c-form__label-text">Password</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
1041
1011
 
1042
1012
  <input
1043
1013
  class="pf-c-form-control"
package/docs/components/SearchInput/examples/SearchInput.md CHANGED
@@ -252,13 +252,11 @@ cssPrefix: pf-c-search-input
252
252
  <div class="pf-c-search-input__menu-body">
253
253
  <form class="pf-c-form" novalidate>
254
254
  <div class="pf-c-form__group">
255
- <div class="pf-c-form__group-label">
256
- <label
255
+ <div class="pf-c-form__group-label"><label
257
256
  class="pf-c-form__label"
258
257
  for="advanced-search-input-form-username"
259
258
  >
260
- <span class="pf-c-form__label-text">Username</span>
261
- </label>
259
+ <span class="pf-c-form__label-text">Username</span></label>
262
260
  </div>
263
261
  <div class="pf-c-form__group-control">
264
262
  <input
@@ -271,13 +269,11 @@ cssPrefix: pf-c-search-input
271
269
  </div>
272
270
  </div>
273
271
  <div class="pf-c-form__group">
274
- <div class="pf-c-form__group-label">
275
- <label
272
+ <div class="pf-c-form__group-label"><label
276
273
  class="pf-c-form__label"
277
274
  for="advanced-search-input-form-firstname"
278
275
  >
279
- <span class="pf-c-form__label-text">First name</span>
280
- </label>
276
+ <span class="pf-c-form__label-text">First name</span></label>
281
277
  </div>
282
278
  <div class="pf-c-form__group-control">
283
279
  <input
@@ -290,13 +286,11 @@ cssPrefix: pf-c-search-input
290
286
  </div>
291
287
  </div>
292
288
  <div class="pf-c-form__group">
293
- <div class="pf-c-form__group-label">
294
- <label
289
+ <div class="pf-c-form__group-label"><label
295
290
  class="pf-c-form__label"
296
291
  for="advanced-search-input-form-group"
297
292
  >
298
- <span class="pf-c-form__label-text">Group</span>
299
- </label>
293
+ <span class="pf-c-form__label-text">Group</span></label>
300
294
  </div>
301
295
  <div class="pf-c-form__group-control">
302
296
  <input
@@ -308,13 +302,11 @@ cssPrefix: pf-c-search-input
308
302
  </div>
309
303
  </div>
310
304
  <div class="pf-c-form__group">
311
- <div class="pf-c-form__group-label">
312
- <label
305
+ <div class="pf-c-form__group-label"><label
313
306
  class="pf-c-form__label"
314
307
  for="advanced-search-input-form-email"
315
308
  >
316
- <span class="pf-c-form__label-text">Email</span>
317
- </label>
309
+ <span class="pf-c-form__label-text">Email</span></label>
318
310
  </div>
319
311
  <div class="pf-c-form__group-control">
320
312
  <input
@@ -485,13 +477,11 @@ cssPrefix: pf-c-search-input
485
477
  <div class="pf-c-search-input__menu-body">
486
478
  <form class="pf-c-form" novalidate>
487
479
  <div class="pf-c-form__group">
488
- <div class="pf-c-form__group-label">
489
- <label
480
+ <div class="pf-c-form__group-label"><label
490
481
  class="pf-c-form__label"
491
482
  for="advanced-search-autocomplete-input-form-username"
492
483
  >
493
- <span class="pf-c-form__label-text">Username</span>
494
- </label>
484
+ <span class="pf-c-form__label-text">Username</span></label>
495
485
  </div>
496
486
  <div class="pf-c-form__group-control">
497
487
  <input
@@ -504,13 +494,11 @@ cssPrefix: pf-c-search-input
504
494
  </div>
505
495
  </div>
506
496
  <div class="pf-c-form__group">
507
- <div class="pf-c-form__group-label">
508
- <label
497
+ <div class="pf-c-form__group-label"><label
509
498
  class="pf-c-form__label"
510
499
  for="advanced-search-autocomplete-input-form-firstname"
511
500
  >
512
- <span class="pf-c-form__label-text">First name</span>
513
- </label>
501
+ <span class="pf-c-form__label-text">First name</span></label>
514
502
  </div>
515
503
  <div class="pf-c-form__group-control">
516
504
  <input
@@ -523,13 +511,11 @@ cssPrefix: pf-c-search-input
523
511
  </div>
524
512
  </div>
525
513
  <div class="pf-c-form__group">
526
- <div class="pf-c-form__group-label">
527
- <label
514
+ <div class="pf-c-form__group-label"><label
528
515
  class="pf-c-form__label"
529
516
  for="advanced-search-autocomplete-input-form-group"
530
517
  >
531
- <span class="pf-c-form__label-text">Group</span>
532
- </label>
518
+ <span class="pf-c-form__label-text">Group</span></label>
533
519
  </div>
534
520
  <div class="pf-c-form__group-control">
535
521
  <input
@@ -541,13 +527,11 @@ cssPrefix: pf-c-search-input
541
527
  </div>
542
528
  </div>
543
529
  <div class="pf-c-form__group">
544
- <div class="pf-c-form__group-label">
545
- <label
530
+ <div class="pf-c-form__group-label"><label
546
531
  class="pf-c-form__label"
547
532
  for="advanced-search-autocomplete-input-form-email"
548
533
  >
549
- <span class="pf-c-form__label-text">Email</span>
550
- </label>
534
+ <span class="pf-c-form__label-text">Email</span></label>
551
535
  </div>
552
536
  <div class="pf-c-form__group-control">
553
537
  <input
package/docs/components/TextInputGroup/examples/TextInputGroup.md CHANGED
@@ -800,13 +800,11 @@ cssPrefix: pf-c-text-input-group
800
800
  <div class="pf-c-panel__main-body">
801
801
  <form class="pf-c-form" novalidate>
802
802
  <div class="pf-c-form__group">
803
- <div class="pf-c-form__group-label">
804
- <label
803
+ <div class="pf-c-form__group-label"><label
805
804
  class="pf-c-form__label"
806
805
  for="text-input-group-advanced-search-input-expanded-legacy-form-example-username"
807
806
  >
808
- <span class="pf-c-form__label-text">Username</span>
809
- </label>
807
+ <span class="pf-c-form__label-text">Username</span></label>
810
808
  </div>
811
809
  <div class="pf-c-form__group-control">
812
810
  <input
@@ -819,13 +817,11 @@ cssPrefix: pf-c-text-input-group
819
817
  </div>
820
818
  </div>
821
819
  <div class="pf-c-form__group">
822
- <div class="pf-c-form__group-label">
823
- <label
820
+ <div class="pf-c-form__group-label"><label
824
821
  class="pf-c-form__label"
825
822
  for="text-input-group-advanced-search-input-expanded-legacy-form-example-firstname"
826
823
  >
827
- <span class="pf-c-form__label-text">First name</span>
828
- </label>
824
+ <span class="pf-c-form__label-text">First name</span></label>
829
825
  </div>
830
826
  <div class="pf-c-form__group-control">
831
827
  <input
@@ -838,13 +834,11 @@ cssPrefix: pf-c-text-input-group
838
834
  </div>
839
835
  </div>
840
836
  <div class="pf-c-form__group">
841
- <div class="pf-c-form__group-label">
842
- <label
837
+ <div class="pf-c-form__group-label"><label
843
838
  class="pf-c-form__label"
844
839
  for="text-input-group-advanced-search-input-expanded-legacy-form-example-group"
845
840
  >
846
- <span class="pf-c-form__label-text">Group</span>
847
- </label>
841
+ <span class="pf-c-form__label-text">Group</span></label>
848
842
  </div>
849
843
  <div class="pf-c-form__group-control">
850
844
  <input
@@ -856,13 +850,11 @@ cssPrefix: pf-c-text-input-group
856
850
  </div>
857
851
  </div>
858
852
  <div class="pf-c-form__group">
859
- <div class="pf-c-form__group-label">
860
- <label
853
+ <div class="pf-c-form__group-label"><label
861
854
  class="pf-c-form__label"
862
855
  for="text-input-group-advanced-search-input-expanded-legacy-form-example-email"
863
856
  >
864
- <span class="pf-c-form__label-text">Email</span>
865
- </label>
857
+ <span class="pf-c-form__label-text">Email</span></label>
866
858
  </div>
867
859
  <div class="pf-c-form__group-control">
868
860
  <input
@@ -1049,13 +1041,11 @@ cssPrefix: pf-c-text-input-group
1049
1041
  <div class="pf-c-panel__main-body">
1050
1042
  <form class="pf-c-form" novalidate>
1051
1043
  <div class="pf-c-form__group">
1052
- <div class="pf-c-form__group-label">
1053
- <label
1044
+ <div class="pf-c-form__group-label"><label
1054
1045
  class="pf-c-form__label"
1055
1046
  for="text-input-group-advanced-search-input-form-with-autocomplete-example-username"
1056
1047
  >
1057
- <span class="pf-c-form__label-text">Username</span>
1058
- </label>
1048
+ <span class="pf-c-form__label-text">Username</span></label>
1059
1049
  </div>
1060
1050
  <div class="pf-c-form__group-control">
1061
1051
  <input
@@ -1068,13 +1058,11 @@ cssPrefix: pf-c-text-input-group
1068
1058
  </div>
1069
1059
  </div>
1070
1060
  <div class="pf-c-form__group">
1071
- <div class="pf-c-form__group-label">
1072
- <label
1061
+ <div class="pf-c-form__group-label"><label
1073
1062
  class="pf-c-form__label"
1074
1063
  for="text-input-group-advanced-search-input-form-with-autocomplete-example-firstname"
1075
1064
  >
1076
- <span class="pf-c-form__label-text">First name</span>
1077
- </label>
1065
+ <span class="pf-c-form__label-text">First name</span></label>
1078
1066
  </div>
1079
1067
  <div class="pf-c-form__group-control">
1080
1068
  <input
@@ -1087,13 +1075,11 @@ cssPrefix: pf-c-text-input-group
1087
1075
  </div>
1088
1076
  </div>
1089
1077
  <div class="pf-c-form__group">
1090
- <div class="pf-c-form__group-label">
1091
- <label
1078
+ <div class="pf-c-form__group-label"><label
1092
1079
  class="pf-c-form__label"
1093
1080
  for="text-input-group-advanced-search-input-form-with-autocomplete-example-group"
1094
1081
  >
1095
- <span class="pf-c-form__label-text">Group</span>
1096
- </label>
1082
+ <span class="pf-c-form__label-text">Group</span></label>
1097
1083
  </div>
1098
1084
  <div class="pf-c-form__group-control">
1099
1085
  <input
@@ -1105,13 +1091,11 @@ cssPrefix: pf-c-text-input-group
1105
1091
  </div>
1106
1092
  </div>
1107
1093
  <div class="pf-c-form__group">
1108
- <div class="pf-c-form__group-label">
1109
- <label
1094
+ <div class="pf-c-form__group-label"><label
1110
1095
  class="pf-c-form__label"
1111
1096
  for="text-input-group-advanced-search-input-form-with-autocomplete-example-email"
1112
1097
  >
1113
- <span class="pf-c-form__label-text">Email</span>
1114
- </label>
1098
+ <span class="pf-c-form__label-text">Email</span></label>
1115
1099
  </div>
1116
1100
  <div class="pf-c-form__group-control">
1117
1101
  <input
package/docs/components/TreeView/examples/TreeView.md CHANGED
@@ -2227,10 +2227,10 @@ beta: true
2227
2227
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2228
2228
  </span>
2229
2229
  </button>
2230
- <span
2230
+ <button
2231
2231
  class="pf-c-tree-view__node-text"
2232
2232
  id="text-tree-view-selectable-expandable-1"
2233
- >Application launcher</span>
2233
+ >Application launcher</button>
2234
2234
  </span>
2235
2235
  </div>
2236
2236
  </div>
@@ -2260,10 +2260,10 @@ beta: true
2260
2260
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2261
2261
  </span>
2262
2262
  </button>
2263
- <span
2263
+ <button
2264
2264
  class="pf-c-tree-view__node-text"
2265
2265
  id="text-tree-view-selectable-expandable-2"
2266
- >Application 1</span>
2266
+ >Application 1</button>
2267
2267
  </span>
2268
2268
  </div>
2269
2269
  </div>
@@ -2311,10 +2311,10 @@ beta: true
2311
2311
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2312
2312
  </span>
2313
2313
  </button>
2314
- <span
2314
+ <button
2315
2315
  class="pf-c-tree-view__node-text"
2316
2316
  id="text-tree-view-selectable-expandable-3"
2317
- >Loader</span>
2317
+ >Loader</button>
2318
2318
  </span>
2319
2319
  </div>
2320
2320
  </div>
@@ -2346,10 +2346,10 @@ beta: true
2346
2346
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2347
2347
  </span>
2348
2348
  </button>
2349
- <span
2349
+ <button
2350
2350
  class="pf-c-tree-view__node-text"
2351
2351
  id="text-tree-view-selectable-expandable-4"
2352
- >Application 2</span>
2352
+ >Application 2</button>
2353
2353
  </span>
2354
2354
  </div>
2355
2355
  </div>
@@ -2388,10 +2388,10 @@ beta: true
2388
2388
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2389
2389
  </span>
2390
2390
  </button>
2391
- <span
2391
+ <button
2392
2392
  class="pf-c-tree-view__node-text"
2393
2393
  id="text-tree-view-selectable-expandable-5"
2394
- >Settings</span>
2394
+ >Settings</button>
2395
2395
  </span>
2396
2396
  </div>
2397
2397
  </div>
@@ -2421,10 +2421,10 @@ beta: true
2421
2421
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2422
2422
  </span>
2423
2423
  </button>
2424
- <span
2424
+ <button
2425
2425
  class="pf-c-tree-view__node-text"
2426
2426
  id="text-tree-view-selectable-expandable-6"
2427
- >Loader</span>
2427
+ >Loader</button>
2428
2428
  </span>
2429
2429
  </div>
2430
2430
  </div>
@@ -2454,10 +2454,10 @@ beta: true
2454
2454
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2455
2455
  </span>
2456
2456
  </button>
2457
- <span
2457
+ <button
2458
2458
  class="pf-c-tree-view__node-text"
2459
2459
  id="text-tree-view-selectable-expandable-7"
2460
- >Loader app 1</span>
2460
+ >Loader app 1</button>
2461
2461
  </span>
2462
2462
  </div>
2463
2463
  </div>
@@ -2519,10 +2519,10 @@ beta: true
2519
2519
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2520
2520
  </span>
2521
2521
  </button>
2522
- <span
2522
+ <button
2523
2523
  class="pf-c-tree-view__node-text"
2524
2524
  id="text-tree-view-selectable-expandable-8"
2525
- >Cost management</span>
2525
+ >Cost management</button>
2526
2526
  </span>
2527
2527
  </div>
2528
2528
  </div>
@@ -2552,10 +2552,10 @@ beta: true
2552
2552
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2553
2553
  </span>
2554
2554
  </button>
2555
- <span
2555
+ <button
2556
2556
  class="pf-c-tree-view__node-text"
2557
2557
  id="text-tree-view-selectable-expandable-9"
2558
- >Sources</span>
2558
+ >Sources</button>
2559
2559
  </span>
2560
2560
  </div>
2561
2561
  </div>
@@ -2585,10 +2585,10 @@ beta: true
2585
2585
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2586
2586
  </span>
2587
2587
  </button>
2588
- <span
2588
+ <button
2589
2589
  class="pf-c-tree-view__node-text"
2590
2590
  id="text-tree-view-selectable-expandable-10"
2591
- >This is a really really really long folder name that overflows from the width of the container.</span>
2591
+ >This is a really really really long folder name that overflows from the width of the container.</button>
2592
2592
  </span>
2593
2593
  </div>
2594
2594
  </div>
@@ -3383,7 +3383,7 @@ beta: true
3383
3383
  | `.pf-c-tree-view__node-toggle` | `<span>`, `<button>` | Initiates a tree view toggle. |
3384
3384
  | `.pf-c-tree-view__node-toggle-icon` | `<span>` | Initiates a tree view toggle icon. |
3385
3385
  | `.pf-c-tree-view__node-title` | `<span>` | Initiates a tree view node title. |
3386
- | `.pf-c-tree-view__node-text` | `<span>` | Initiates tree view text. |
3386
+ | `.pf-c-tree-view__node-text` | `<span>`, `<button>` | Initiates tree view text. **Note:** Use a `<button>` when the node is expandable and selectable. |
3387
3387
  | `.pf-c-tree-view__node-icon` | `<span>` | Initiates a tree view icon. |
3388
3388
  | `.pf-c-tree-view__node-check` | `<span>` | Initiates a tree view check. |
3389
3389
  | `.pf-c-tree-view__action` | `<div>` | Initiates a tree view action wrapper. |