@patternfly/patternfly 4.180.0 → 4.182.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 (33) hide show
  1. package/assets/images/status-icon-sprite.svg +38 -0
  2. package/components/FormControl/form-control.css +26 -0
  3. package/components/FormControl/form-control.scss +30 -1
  4. package/components/Masthead/masthead.css +21 -27
  5. package/components/Masthead/masthead.scss +21 -27
  6. package/components/Menu/menu.css +10 -0
  7. package/components/Menu/menu.scss +14 -0
  8. package/components/MenuToggle/menu-toggle.css +141 -7
  9. package/components/MenuToggle/menu-toggle.scss +208 -8
  10. package/docs/components/FormControl/examples/FormControl.md +151 -0
  11. package/docs/components/Menu/examples/Menu.md +67 -2
  12. package/docs/components/MenuToggle/examples/MenuToggle.md +552 -20
  13. package/docs/components/Page/examples/Page.md +11 -2
  14. package/docs/components/Table/examples/Table.md +8 -0
  15. package/docs/components/Wizard/examples/Wizard.md +6 -6
  16. package/docs/demos/Alert/examples/Alert.md +20 -40
  17. package/docs/demos/BackToTop/examples/BackToTop.md +149 -249
  18. package/docs/demos/ContextSelector/examples/ContextSelector.md +86 -166
  19. package/docs/demos/DescriptionList/examples/DescriptionList.md +3358 -0
  20. package/docs/demos/Drawer/examples/Drawer.md +60 -120
  21. package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -31
  22. package/docs/demos/Masthead/examples/Masthead.md +144 -284
  23. package/docs/demos/Nav/examples/Nav.md +203 -343
  24. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +100 -200
  25. package/docs/demos/Page/examples/Page.md +589 -1137
  26. package/docs/demos/Table/examples/Table.md +26 -26
  27. package/docs/demos/Tabs/examples/Tabs.md +11 -19
  28. package/docs/demos/Wizard/examples/Wizard.md +6 -2
  29. package/package.json +1 -1
  30. package/patternfly-no-reset.css +198 -34
  31. package/patternfly.css +198 -34
  32. package/patternfly.min.css +1 -1
  33. package/patternfly.min.css.map +1 -1
package/docs/demos/Drawer/examples/Drawer.md CHANGED
@@ -246,55 +246,35 @@ wrapperTag: div
246
246
  <section class="pf-c-page__main-section pf-m-limit-width">
247
247
  <div class="pf-c-page__main-body">
248
248
  <div class="pf-l-gallery pf-m-gutter">
249
- <div class="pf-l-gallery__item">
250
- <div class="pf-c-card">
251
- <div class="pf-c-card__body">This is a card</div>
252
- </div>
249
+ <div class="pf-c-card">
250
+ <div class="pf-c-card__body">This is a card</div>
253
251
  </div>
254
- <div class="pf-l-gallery__item">
255
- <div class="pf-c-card">
256
- <div class="pf-c-card__body">This is a card</div>
257
- </div>
252
+ <div class="pf-c-card">
253
+ <div class="pf-c-card__body">This is a card</div>
258
254
  </div>
259
- <div class="pf-l-gallery__item">
260
- <div class="pf-c-card">
261
- <div class="pf-c-card__body">This is a card</div>
262
- </div>
255
+ <div class="pf-c-card">
256
+ <div class="pf-c-card__body">This is a card</div>
263
257
  </div>
264
- <div class="pf-l-gallery__item">
265
- <div class="pf-c-card">
266
- <div class="pf-c-card__body">This is a card</div>
267
- </div>
258
+ <div class="pf-c-card">
259
+ <div class="pf-c-card__body">This is a card</div>
268
260
  </div>
269
- <div class="pf-l-gallery__item">
270
- <div class="pf-c-card">
271
- <div class="pf-c-card__body">This is a card</div>
272
- </div>
261
+ <div class="pf-c-card">
262
+ <div class="pf-c-card__body">This is a card</div>
273
263
  </div>
274
- <div class="pf-l-gallery__item">
275
- <div class="pf-c-card">
276
- <div class="pf-c-card__body">This is a card</div>
277
- </div>
264
+ <div class="pf-c-card">
265
+ <div class="pf-c-card__body">This is a card</div>
278
266
  </div>
279
- <div class="pf-l-gallery__item">
280
- <div class="pf-c-card">
281
- <div class="pf-c-card__body">This is a card</div>
282
- </div>
267
+ <div class="pf-c-card">
268
+ <div class="pf-c-card__body">This is a card</div>
283
269
  </div>
284
- <div class="pf-l-gallery__item">
285
- <div class="pf-c-card">
286
- <div class="pf-c-card__body">This is a card</div>
287
- </div>
270
+ <div class="pf-c-card">
271
+ <div class="pf-c-card__body">This is a card</div>
288
272
  </div>
289
- <div class="pf-l-gallery__item">
290
- <div class="pf-c-card">
291
- <div class="pf-c-card__body">This is a card</div>
292
- </div>
273
+ <div class="pf-c-card">
274
+ <div class="pf-c-card__body">This is a card</div>
293
275
  </div>
294
- <div class="pf-l-gallery__item">
295
- <div class="pf-c-card">
296
- <div class="pf-c-card__body">This is a card</div>
297
- </div>
276
+ <div class="pf-c-card">
277
+ <div class="pf-c-card__body">This is a card</div>
298
278
  </div>
299
279
  </div>
300
280
  </div>
@@ -556,55 +536,35 @@ wrapperTag: div
556
536
  <section class="pf-c-page__main-section pf-m-limit-width">
557
537
  <div class="pf-c-page__main-body">
558
538
  <div class="pf-l-gallery pf-m-gutter">
559
- <div class="pf-l-gallery__item">
560
- <div class="pf-c-card">
561
- <div class="pf-c-card__body">This is a card</div>
562
- </div>
539
+ <div class="pf-c-card">
540
+ <div class="pf-c-card__body">This is a card</div>
563
541
  </div>
564
- <div class="pf-l-gallery__item">
565
- <div class="pf-c-card">
566
- <div class="pf-c-card__body">This is a card</div>
567
- </div>
542
+ <div class="pf-c-card">
543
+ <div class="pf-c-card__body">This is a card</div>
568
544
  </div>
569
- <div class="pf-l-gallery__item">
570
- <div class="pf-c-card">
571
- <div class="pf-c-card__body">This is a card</div>
572
- </div>
545
+ <div class="pf-c-card">
546
+ <div class="pf-c-card__body">This is a card</div>
573
547
  </div>
574
- <div class="pf-l-gallery__item">
575
- <div class="pf-c-card">
576
- <div class="pf-c-card__body">This is a card</div>
577
- </div>
548
+ <div class="pf-c-card">
549
+ <div class="pf-c-card__body">This is a card</div>
578
550
  </div>
579
- <div class="pf-l-gallery__item">
580
- <div class="pf-c-card">
581
- <div class="pf-c-card__body">This is a card</div>
582
- </div>
551
+ <div class="pf-c-card">
552
+ <div class="pf-c-card__body">This is a card</div>
583
553
  </div>
584
- <div class="pf-l-gallery__item">
585
- <div class="pf-c-card">
586
- <div class="pf-c-card__body">This is a card</div>
587
- </div>
554
+ <div class="pf-c-card">
555
+ <div class="pf-c-card__body">This is a card</div>
588
556
  </div>
589
- <div class="pf-l-gallery__item">
590
- <div class="pf-c-card">
591
- <div class="pf-c-card__body">This is a card</div>
592
- </div>
557
+ <div class="pf-c-card">
558
+ <div class="pf-c-card__body">This is a card</div>
593
559
  </div>
594
- <div class="pf-l-gallery__item">
595
- <div class="pf-c-card">
596
- <div class="pf-c-card__body">This is a card</div>
597
- </div>
560
+ <div class="pf-c-card">
561
+ <div class="pf-c-card__body">This is a card</div>
598
562
  </div>
599
- <div class="pf-l-gallery__item">
600
- <div class="pf-c-card">
601
- <div class="pf-c-card__body">This is a card</div>
602
- </div>
563
+ <div class="pf-c-card">
564
+ <div class="pf-c-card__body">This is a card</div>
603
565
  </div>
604
- <div class="pf-l-gallery__item">
605
- <div class="pf-c-card">
606
- <div class="pf-c-card__body">This is a card</div>
607
- </div>
566
+ <div class="pf-c-card">
567
+ <div class="pf-c-card__body">This is a card</div>
608
568
  </div>
609
569
  </div>
610
570
  </div>
@@ -866,55 +826,35 @@ wrapperTag: div
866
826
  <section class="pf-c-page__main-section pf-m-limit-width">
867
827
  <div class="pf-c-page__main-body">
868
828
  <div class="pf-l-gallery pf-m-gutter">
869
- <div class="pf-l-gallery__item">
870
- <div class="pf-c-card">
871
- <div class="pf-c-card__body">This is a card</div>
872
- </div>
829
+ <div class="pf-c-card">
830
+ <div class="pf-c-card__body">This is a card</div>
873
831
  </div>
874
- <div class="pf-l-gallery__item">
875
- <div class="pf-c-card">
876
- <div class="pf-c-card__body">This is a card</div>
877
- </div>
832
+ <div class="pf-c-card">
833
+ <div class="pf-c-card__body">This is a card</div>
878
834
  </div>
879
- <div class="pf-l-gallery__item">
880
- <div class="pf-c-card">
881
- <div class="pf-c-card__body">This is a card</div>
882
- </div>
835
+ <div class="pf-c-card">
836
+ <div class="pf-c-card__body">This is a card</div>
883
837
  </div>
884
- <div class="pf-l-gallery__item">
885
- <div class="pf-c-card">
886
- <div class="pf-c-card__body">This is a card</div>
887
- </div>
838
+ <div class="pf-c-card">
839
+ <div class="pf-c-card__body">This is a card</div>
888
840
  </div>
889
- <div class="pf-l-gallery__item">
890
- <div class="pf-c-card">
891
- <div class="pf-c-card__body">This is a card</div>
892
- </div>
841
+ <div class="pf-c-card">
842
+ <div class="pf-c-card__body">This is a card</div>
893
843
  </div>
894
- <div class="pf-l-gallery__item">
895
- <div class="pf-c-card">
896
- <div class="pf-c-card__body">This is a card</div>
897
- </div>
844
+ <div class="pf-c-card">
845
+ <div class="pf-c-card__body">This is a card</div>
898
846
  </div>
899
- <div class="pf-l-gallery__item">
900
- <div class="pf-c-card">
901
- <div class="pf-c-card__body">This is a card</div>
902
- </div>
847
+ <div class="pf-c-card">
848
+ <div class="pf-c-card__body">This is a card</div>
903
849
  </div>
904
- <div class="pf-l-gallery__item">
905
- <div class="pf-c-card">
906
- <div class="pf-c-card__body">This is a card</div>
907
- </div>
850
+ <div class="pf-c-card">
851
+ <div class="pf-c-card__body">This is a card</div>
908
852
  </div>
909
- <div class="pf-l-gallery__item">
910
- <div class="pf-c-card">
911
- <div class="pf-c-card__body">This is a card</div>
912
- </div>
853
+ <div class="pf-c-card">
854
+ <div class="pf-c-card__body">This is a card</div>
913
855
  </div>
914
- <div class="pf-l-gallery__item">
915
- <div class="pf-c-card">
916
- <div class="pf-c-card__body">This is a card</div>
917
- </div>
856
+ <div class="pf-c-card">
857
+ <div class="pf-c-card__body">This is a card</div>
918
858
  </div>
919
859
  </div>
920
860
  </div>
package/docs/demos/JumpLinks/examples/JumpLinks.md CHANGED
@@ -247,7 +247,22 @@ section: components
247
247
  <nav
248
248
  class="pf-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
249
249
  >
250
- <div class="pf-c-jump-links__label">Jump to section</div>
250
+ <div class="pf-c-jump-links__header">
251
+ <div class="pf-c-jump-links__toggle">
252
+ <button
253
+ class="pf-c-button pf-m-plain"
254
+ type="button"
255
+ aria-label="Toggle jump links"
256
+ aria-expanded="false"
257
+ >
258
+ <span class="pf-c-jump-links__toggle-icon">
259
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
260
+ </span>
261
+ <span class="pf-c-jump-links__toggle-text">Jump to section</span>
262
+ </button>
263
+ </div>
264
+ <div class="pf-c-jump-links__label">Jump to section</div>
265
+ </div>
251
266
  <ul class="pf-c-jump-links__list">
252
267
  <li class="pf-c-jump-links__item pf-m-current">
253
268
  <a
@@ -565,7 +580,22 @@ section: components
565
580
  <nav
566
581
  class="pf-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expanded pf-m-expandable"
567
582
  >
568
- <div class="pf-c-jump-links__label">Jump to section</div>
583
+ <div class="pf-c-jump-links__header">
584
+ <div class="pf-c-jump-links__toggle">
585
+ <button
586
+ class="pf-c-button pf-m-plain"
587
+ type="button"
588
+ aria-label="Toggle jump links"
589
+ aria-expanded="false"
590
+ >
591
+ <span class="pf-c-jump-links__toggle-icon">
592
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
593
+ </span>
594
+ <span class="pf-c-jump-links__toggle-text">Jump to section</span>
595
+ </button>
596
+ </div>
597
+ <div class="pf-c-jump-links__label">Jump to section</div>
598
+ </div>
569
599
  <ul class="pf-c-jump-links__list">
570
600
  <li class="pf-c-jump-links__item pf-m-current">
571
601
  <a
@@ -883,7 +913,22 @@ section: components
883
913
  <nav
884
914
  class="pf-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
885
915
  >
886
- <div class="pf-c-jump-links__label pf-m-toggle">Jump to section</div>
916
+ <div class="pf-c-jump-links__header">
917
+ <div class="pf-c-jump-links__toggle">
918
+ <button
919
+ class="pf-c-button pf-m-plain"
920
+ type="button"
921
+ aria-label="Toggle jump links"
922
+ aria-expanded="false"
923
+ >
924
+ <span class="pf-c-jump-links__toggle-icon">
925
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
926
+ </span>
927
+ <span class="pf-c-jump-links__toggle-text">Jump to section</span>
928
+ </button>
929
+ </div>
930
+ <div class="pf-c-jump-links__label">Jump to section</div>
931
+ </div>
887
932
  <ul class="pf-c-jump-links__list">
888
933
  <li class="pf-c-jump-links__item pf-m-current">
889
934
  <a
@@ -1187,34 +1232,38 @@ section: components
1187
1232
  </section>
1188
1233
  <section class="pf-c-page__main-section pf-m-sticky-top">
1189
1234
  <nav class="pf-c-jump-links pf-m-center">
1190
- <div class="pf-c-jump-links__label pf-m-toggle">Jump to section</div>
1191
- <ul class="pf-c-jump-links__list">
1192
- <li class="pf-c-jump-links__item pf-m-current">
1193
- <a class="pf-c-jump-links__link" href="#horizontal-first">
1194
- <span class="pf-c-jump-links__link-text">First section</span>
1195
- </a>
1196
- </li>
1197
- <li class="pf-c-jump-links__item">
1198
- <a class="pf-c-jump-links__link" href="#horizontal-second">
1199
- <span class="pf-c-jump-links__link-text">Second section</span>
1200
- </a>
1201
- </li>
1202
- <li class="pf-c-jump-links__item">
1203
- <a class="pf-c-jump-links__link" href="#horizontal-third">
1204
- <span class="pf-c-jump-links__link-text">Third section</span>
1205
- </a>
1206
- </li>
1207
- <li class="pf-c-jump-links__item">
1208
- <a class="pf-c-jump-links__link" href="#horizontal-fourth">
1209
- <span class="pf-c-jump-links__link-text">Fourth section</span>
1210
- </a>
1211
- </li>
1212
- <li class="pf-c-jump-links__item">
1213
- <a class="pf-c-jump-links__link" href="#horizontal-fifth">
1214
- <span class="pf-c-jump-links__link-text">Fifth section</span>
1215
- </a>
1216
- </li>
1217
- </ul>
1235
+ <div class="pf-c-jump-links__main">
1236
+ <div class="pf-c-jump-links__header">
1237
+ <div class="pf-c-jump-links__label">Jump to section</div>
1238
+ </div>
1239
+ <ul class="pf-c-jump-links__list">
1240
+ <li class="pf-c-jump-links__item pf-m-current">
1241
+ <a class="pf-c-jump-links__link" href="#horizontal-first">
1242
+ <span class="pf-c-jump-links__link-text">First section</span>
1243
+ </a>
1244
+ </li>
1245
+ <li class="pf-c-jump-links__item">
1246
+ <a class="pf-c-jump-links__link" href="#horizontal-second">
1247
+ <span class="pf-c-jump-links__link-text">Second section</span>
1248
+ </a>
1249
+ </li>
1250
+ <li class="pf-c-jump-links__item">
1251
+ <a class="pf-c-jump-links__link" href="#horizontal-third">
1252
+ <span class="pf-c-jump-links__link-text">Third section</span>
1253
+ </a>
1254
+ </li>
1255
+ <li class="pf-c-jump-links__item">
1256
+ <a class="pf-c-jump-links__link" href="#horizontal-fourth">
1257
+ <span class="pf-c-jump-links__link-text">Fourth section</span>
1258
+ </a>
1259
+ </li>
1260
+ <li class="pf-c-jump-links__item">
1261
+ <a class="pf-c-jump-links__link" href="#horizontal-fifth">
1262
+ <span class="pf-c-jump-links__link-text">Fifth section</span>
1263
+ </a>
1264
+ </li>
1265
+ </ul>
1266
+ </div>
1218
1267
  </nav>
1219
1268
  </section>
1220
1269
  <section class="pf-c-page__main-section">