@patternfly/patternfly 5.0.0-alpha.66 → 5.0.0-alpha.68

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 (99) hide show
  1. package/base/_variables.scss +1 -1
  2. package/base/patternfly-globals.css +1 -1
  3. package/base/patternfly-variables.css +2 -2
  4. package/components/AboutModalBox/about-modal-box.css +2 -2
  5. package/components/Accordion/accordion.css +1 -1
  6. package/components/Alert/alert.css +1 -1
  7. package/components/AppLauncher/app-launcher.css +1 -1
  8. package/components/Badge/badge.css +1 -1
  9. package/components/Banner/banner.css +3 -3
  10. package/components/Button/button.css +2 -2
  11. package/components/CalendarMonth/calendar-month.css +3 -3
  12. package/components/Card/card.css +2 -2
  13. package/components/Chip/chip.css +1 -1
  14. package/components/ClipboardCopy/clipboard-copy.css +3 -3
  15. package/components/CodeEditor/code-editor.css +1 -1
  16. package/components/ContextSelector/context-selector.css +5 -5
  17. package/components/DataList/data-list.css +1 -1
  18. package/components/DatePicker/date-picker.css +1 -1
  19. package/components/DragDrop/drag-drop.css +1 -1
  20. package/components/Drawer/drawer.css +2 -2
  21. package/components/Dropdown/dropdown.css +3 -3
  22. package/components/DualListSelector/dual-list-selector.css +1 -1
  23. package/components/Form/form.css +1 -1
  24. package/components/FormControl/form-control.css +3 -3
  25. package/components/HelperText/helper-text.css +1 -1
  26. package/components/Hint/hint.css +1 -1
  27. package/components/InputGroup/input-group.css +2 -4
  28. package/components/InputGroup/input-group.scss +0 -4
  29. package/components/Label/label.css +1 -1
  30. package/components/LogViewer/log-viewer.css +2 -2
  31. package/components/Login/login.css +5 -5
  32. package/components/Masthead/masthead.css +3 -3
  33. package/components/Menu/menu.css +1 -1
  34. package/components/MenuToggle/menu-toggle.css +2 -2
  35. package/components/ModalBox/modal-box.css +1 -1
  36. package/components/Nav/nav.css +6 -6
  37. package/components/NotificationBadge/notification-badge.css +1 -1
  38. package/components/NotificationDrawer/notification-drawer.css +1 -1
  39. package/components/NumberInput/number-input.css +4 -2
  40. package/components/NumberInput/number-input.scss +5 -2
  41. package/components/OptionsMenu/options-menu.css +2 -2
  42. package/components/Page/page.css +14 -14
  43. package/components/Pagination/pagination.css +6 -4
  44. package/components/Pagination/pagination.scss +7 -1
  45. package/components/Panel/panel.css +1 -1
  46. package/components/Popover/popover.css +1 -1
  47. package/components/Progress/progress.css +1 -1
  48. package/components/Select/select.css +2 -2
  49. package/components/SimpleList/simple-list.css +1 -1
  50. package/components/Skeleton/skeleton.css +1 -1
  51. package/components/Switch/switch.css +1 -1
  52. package/components/Table/table.css +2 -2
  53. package/components/Tabs/tabs.css +1 -1
  54. package/components/TextInputGroup/text-input-group.css +1 -1
  55. package/components/Tile/tile.css +1 -1
  56. package/components/ToggleGroup/toggle-group.css +1 -1
  57. package/components/Tooltip/tooltip.css +1 -1
  58. package/components/TreeView/tree-view.css +1 -1
  59. package/components/Wizard/wizard.css +3 -3
  60. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +4 -4
  61. package/docs/components/DatePicker/examples/DatePicker.md +6 -1
  62. package/docs/components/FileUpload/examples/FileUpload.md +21 -16
  63. package/docs/components/Form/examples/Form.md +51 -31
  64. package/docs/components/FormControl/examples/FormControl.md +1 -1
  65. package/docs/components/InlineEdit/examples/InlineEdit.md +11 -156
  66. package/docs/components/InputGroup/examples/InputGroup.md +9 -4
  67. package/docs/components/Login/examples/Login.md +20 -17
  68. package/docs/components/NumberInput/examples/NumberInput.md +7 -2
  69. package/docs/components/Pagination/examples/Pagination.md +1 -1
  70. package/docs/components/Select/examples/Select.md +4 -2
  71. package/docs/components/Wizard/examples/Wizard.md +7 -70
  72. package/docs/demos/Alert/examples/Alert.md +26 -8
  73. package/docs/demos/Button/examples/Button.md +12 -12
  74. package/docs/demos/Form/examples/BasicForms.md +18 -18
  75. package/docs/demos/HelperText/examples/HelperText.md +18 -3
  76. package/docs/demos/Modal/examples/Modal.md +6 -6
  77. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +1 -1
  78. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
  79. package/docs/demos/Toolbar/examples/Toolbar.md +11 -1
  80. package/docs/demos/Wizard/examples/Wizard.md +0 -56
  81. package/package.json +1 -1
  82. package/patternfly-addons.css +78 -78
  83. package/patternfly-base-no-globals-theme-dark-unversioned.css +3 -3
  84. package/patternfly-base-no-globals.css +3 -3
  85. package/patternfly-base-theme-dark-unversioned.css +3 -3
  86. package/patternfly-base.css +3 -3
  87. package/patternfly-charts-theme-dark-unversioned.css +1 -1
  88. package/patternfly-charts-theme-dark.css +1 -1
  89. package/patternfly-charts.css +1 -1
  90. package/patternfly-charts.scss +1 -1
  91. package/patternfly-no-globals.css +314 -312
  92. package/patternfly-theme-dark-unversioned.css +314 -312
  93. package/patternfly.css +314 -312
  94. package/patternfly.min.css +1 -1
  95. package/patternfly.min.css.map +1 -1
  96. package/sass-utilities/_init.scss +2 -2
  97. package/themes/dark/_patternfly-charts-theme-dark.scss +1 -1
  98. package/utilities/BackgroundColor/BackgroundColor.css +30 -30
  99. package/utilities/Text/text.css +48 -48
package/docs/demos/Form/examples/BasicForms.md CHANGED
@@ -13,7 +13,7 @@ subsection: forms
13
13
  <span class="pf-v5-c-form__label-text">Full name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
14
14
  </div>
15
15
  <div class="pf-v5-c-form__group-control">
16
- <div class="pf-v5-c-form-control">
16
+ <div class="pf-v5-c-form-control pf-m-required">
17
17
  <input
18
18
  required
19
19
  type="text"
@@ -56,7 +56,7 @@ subsection: forms
56
56
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
57
57
  </div>
58
58
  <div class="pf-v5-c-form__group-control">
59
- <div class="pf-v5-c-form-control">
59
+ <div class="pf-v5-c-form-control pf-m-required">
60
60
  <input
61
61
  required
62
62
  type="tel"
@@ -173,7 +173,7 @@ subsection: forms
173
173
  <span class="pf-v5-c-form__label-text">Full name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
174
174
  </div>
175
175
  <div class="pf-v5-c-form__group-control">
176
- <div class="pf-v5-c-form-control">
176
+ <div class="pf-v5-c-form-control pf-m-required">
177
177
  <input
178
178
  required
179
179
  type="text"
@@ -307,7 +307,7 @@ subsection: forms
307
307
  <span class="pf-v5-c-form__label-text">Full name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
308
308
  </div>
309
309
  <div class="pf-v5-c-form__group-control">
310
- <div class="pf-v5-c-form-control">
310
+ <div class="pf-v5-c-form-control pf-m-required">
311
311
  <input
312
312
  required
313
313
  type="text"
@@ -333,7 +333,7 @@ subsection: forms
333
333
  <span class="pf-v5-c-form__label-text">Job title</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
334
334
  </div>
335
335
  <div class="pf-v5-c-form__group-control">
336
- <div class="pf-v5-c-form-control">
336
+ <div class="pf-v5-c-form-control pf-m-required">
337
337
  <input
338
338
  required
339
339
  type="text"
@@ -507,7 +507,7 @@ subsection: forms
507
507
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
508
508
  </div>
509
509
  <div class="pf-v5-c-form__group-control">
510
- <div class="pf-v5-c-form-control">
510
+ <div class="pf-v5-c-form-control pf-m-required">
511
511
  <input
512
512
  required
513
513
  type="text"
@@ -532,7 +532,7 @@ subsection: forms
532
532
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
533
533
  </div>
534
534
  <div class="pf-v5-c-form__group-control">
535
- <div class="pf-v5-c-form-control">
535
+ <div class="pf-v5-c-form-control pf-m-required">
536
536
  <input
537
537
  required
538
538
  type="text"
@@ -557,7 +557,7 @@ subsection: forms
557
557
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
558
558
  </div>
559
559
  <div class="pf-v5-c-form__group-control">
560
- <div class="pf-v5-c-form-control">
560
+ <div class="pf-v5-c-form-control pf-m-required">
561
561
  <input
562
562
  required
563
563
  type="text"
@@ -593,7 +593,7 @@ subsection: forms
593
593
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
594
594
  </div>
595
595
  <div class="pf-v5-c-form__group-control">
596
- <div class="pf-v5-c-form-control">
596
+ <div class="pf-v5-c-form-control pf-m-required">
597
597
  <input
598
598
  required
599
599
  type="text"
@@ -620,7 +620,7 @@ subsection: forms
620
620
  <div class="pf-v5-c-form__group-control pf-m-stack">
621
621
  <div class="pf-v5-c-input-group">
622
622
  <div class="pf-v5-c-input-group__item pf-m-fill">
623
- <div class="pf-v5-c-form-control">
623
+ <div class="pf-v5-c-form-control pf-m-required">
624
624
  <input
625
625
  required
626
626
  type="text"
@@ -642,7 +642,7 @@ subsection: forms
642
642
  </div>
643
643
  <div class="pf-v5-c-input-group">
644
644
  <div class="pf-v5-c-input-group__item pf-m-fill">
645
- <div class="pf-v5-c-form-control">
645
+ <div class="pf-v5-c-form-control pf-m-required">
646
646
  <input
647
647
  required
648
648
  type="text"
@@ -664,7 +664,7 @@ subsection: forms
664
664
  </div>
665
665
  <div class="pf-v5-c-input-group">
666
666
  <div class="pf-v5-c-input-group__item pf-m-fill">
667
- <div class="pf-v5-c-form-control">
667
+ <div class="pf-v5-c-form-control pf-m-required">
668
668
  <input
669
669
  required
670
670
  type="text"
@@ -707,7 +707,7 @@ subsection: forms
707
707
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
708
708
  </div>
709
709
  <div class="pf-v5-c-form__group-control">
710
- <div class="pf-v5-c-form-control">
710
+ <div class="pf-v5-c-form-control pf-m-required">
711
711
  <input
712
712
  required
713
713
  type="text"
@@ -741,12 +741,12 @@ subsection: forms
741
741
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
742
742
  </div>
743
743
  <div class="pf-v5-c-form__group-control">
744
- <div class="pf-v5-c-form-control">
744
+ <div class="pf-v5-c-form-control pf-m-required">
745
745
  <input
746
+ required
746
747
  type="text"
747
748
  id="form-demo-sections-complex-form-name"
748
749
  name="form-demo-sections-complex-form-name"
749
- required
750
750
  />
751
751
  </div>
752
752
  </div>
@@ -1075,7 +1075,7 @@ subsection: forms
1075
1075
  <div class="pf-v5-c-form__group-control pf-m-stack">
1076
1076
  <div class="pf-v5-c-input-group">
1077
1077
  <div class="pf-v5-c-input-group__item pf-m-fill">
1078
- <div class="pf-v5-c-form-control">
1078
+ <div class="pf-v5-c-form-control pf-m-required">
1079
1079
  <input
1080
1080
  required
1081
1081
  type="text"
@@ -1253,13 +1253,13 @@ subsection: forms
1253
1253
  <span class="pf-v5-c-form__label-text">Path</span></label>
1254
1254
  </div>
1255
1255
  <div class="pf-v5-c-form__group-control">
1256
- <div class="pf-v5-c-form-control">
1256
+ <div class="pf-v5-c-form-control pf-m-required">
1257
1257
  <input
1258
+ required
1258
1259
  type="text"
1259
1260
  placeholder="/"
1260
1261
  id="form-demo-sections-complex-form-routing-path"
1261
1262
  name="form-demo-sections-complex-form-routing-path"
1262
- required
1263
1263
  />
1264
1264
  </div>
1265
1265
 
package/docs/demos/HelperText/examples/HelperText.md CHANGED
@@ -12,7 +12,7 @@ section: components
12
12
  <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
13
13
  </div>
14
14
  <div class="pf-v5-c-form__group-control">
15
- <div class="pf-v5-c-form-control">
15
+ <div class="pf-v5-c-form-control pf-m-required">
16
16
  <input
17
17
  required
18
18
  type="text"
@@ -41,7 +41,7 @@ section: components
41
41
  <span class="pf-v5-c-form__label-text">E-mail</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
42
42
  </div>
43
43
  <div class="pf-v5-c-form__group-control">
44
- <div class="pf-v5-c-form-control pf-m-warning">
44
+ <div class="pf-v5-c-form-control pf-m-required pf-m-warning">
45
45
  <input
46
46
  required
47
47
  type="text"
@@ -49,6 +49,11 @@ section: components
49
49
  name="helper-text-form-email"
50
50
  aria-describedby="helper-text-form-email-helper"
51
51
  />
52
+ <div class="pf-v5-c-form-control__utilities">
53
+ <div class="pf-v5-c-form-control__icon pf-m-status">
54
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
55
+ </div>
56
+ </div>
52
57
  </div>
53
58
 
54
59
  <div
@@ -71,7 +76,7 @@ section: components
71
76
  <span class="pf-v5-c-form__label-text">Address</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
72
77
  </div>
73
78
  <div class="pf-v5-c-form__group-control">
74
- <div class="pf-v5-c-form-control">
79
+ <div class="pf-v5-c-form-control pf-m-required pf-m-error">
75
80
  <input
76
81
  required
77
82
  type="text"
@@ -80,6 +85,11 @@ section: components
80
85
  aria-invalid="true"
81
86
  aria-describedby="helper-text-form-address-helper"
82
87
  />
88
+ <div class="pf-v5-c-form-control__utilities">
89
+ <div class="pf-v5-c-form-control__icon pf-m-status">
90
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
91
+ </div>
92
+ </div>
83
93
  </div>
84
94
 
85
95
  <div
@@ -129,6 +139,11 @@ section: components
129
139
  name="helper-text-form-comment"
130
140
  aria-describedby="helper-text-form-comment-helper"
131
141
  />
142
+ <div class="pf-v5-c-form-control__utilities">
143
+ <div class="pf-v5-c-form-control__icon pf-m-status">
144
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
145
+ </div>
146
+ </div>
132
147
  </div>
133
148
 
134
149
  <div
package/docs/demos/Modal/examples/Modal.md CHANGED
@@ -6072,8 +6072,8 @@ section: components
6072
6072
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
6073
6073
  </div>
6074
6074
  <div class="pf-v5-c-form__group-control">
6075
- <div class="pf-v5-c-form-control">
6076
- <input type="text" id="-form-name" name="-form-name" required />
6075
+ <div class="pf-v5-c-form-control pf-m-required">
6076
+ <input required type="text" id="-form-name" name="-form-name" />
6077
6077
  </div>
6078
6078
  </div>
6079
6079
  </div>
@@ -6092,8 +6092,8 @@ section: components
6092
6092
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
6093
6093
  </div>
6094
6094
  <div class="pf-v5-c-form__group-control">
6095
- <div class="pf-v5-c-form-control">
6096
- <input type="text" id="-form-email" name="-form-email" required />
6095
+ <div class="pf-v5-c-form-control pf-m-required">
6096
+ <input required type="text" id="-form-email" name="-form-email" />
6097
6097
  </div>
6098
6098
  </div>
6099
6099
  </div>
@@ -6112,12 +6112,12 @@ section: components
6112
6112
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
6113
6113
  </div>
6114
6114
  <div class="pf-v5-c-form__group-control">
6115
- <div class="pf-v5-c-form-control">
6115
+ <div class="pf-v5-c-form-control pf-m-required">
6116
6116
  <input
6117
+ required
6117
6118
  type="text"
6118
6119
  id="-form-address"
6119
6120
  name="-form-address"
6120
- required
6121
6121
  />
6122
6122
  </div>
6123
6123
  </div>
package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md CHANGED
@@ -27,7 +27,7 @@ section: components
27
27
  <div class="pf-v5-c-form__group-control">
28
28
  <div class="pf-v5-c-input-group">
29
29
  <div class="pf-v5-c-input-group__item pf-m-fill">
30
- <div class="pf-v5-c-form-control">
30
+ <div class="pf-v5-c-form-control pf-m-required">
31
31
  <input
32
32
  required
33
33
  type="password"
package/docs/demos/PasswordStrength/examples/PasswordStrength.md CHANGED
@@ -27,7 +27,7 @@ section: components
27
27
  <div class="pf-v5-c-form__group-control">
28
28
  <div class="pf-v5-c-input-group">
29
29
  <div class="pf-v5-c-input-group__item pf-m-fill">
30
- <div class="pf-v5-c-form-control">
30
+ <div class="pf-v5-c-form-control pf-m-required">
31
31
  <input
32
32
  required
33
33
  type="text"
@@ -113,7 +113,7 @@ section: components
113
113
  <div class="pf-v5-c-form__group-control">
114
114
  <div class="pf-v5-c-input-group">
115
115
  <div class="pf-v5-c-input-group__item pf-m-fill">
116
- <div class="pf-v5-c-form-control">
116
+ <div class="pf-v5-c-form-control pf-m-required">
117
117
  <input
118
118
  required
119
119
  type="text"
@@ -202,7 +202,7 @@ section: components
202
202
  <div class="pf-v5-c-form__group-control">
203
203
  <div class="pf-v5-c-input-group">
204
204
  <div class="pf-v5-c-input-group__item pf-m-fill">
205
- <div class="pf-v5-c-form-control">
205
+ <div class="pf-v5-c-form-control pf-m-required">
206
206
  <input
207
207
  required
208
208
  type="text"
@@ -291,7 +291,7 @@ section: components
291
291
  <div class="pf-v5-c-form__group-control">
292
292
  <div class="pf-v5-c-input-group">
293
293
  <div class="pf-v5-c-input-group__item pf-m-fill">
294
- <div class="pf-v5-c-form-control">
294
+ <div class="pf-v5-c-form-control pf-m-required">
295
295
  <input
296
296
  required
297
297
  type="text"
package/docs/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -1322,7 +1322,7 @@ section: components
1322
1322
  aria-label="search filter"
1323
1323
  role="group"
1324
1324
  >
1325
- <div class="pf-v5-c-form-control">
1325
+ <div class="pf-v5-c-form-control pf-m-error">
1326
1326
  <input
1327
1327
  aria-invalid="true"
1328
1328
  type="text"
@@ -1331,6 +1331,16 @@ section: components
1331
1331
  name="toolbar-with-validation-example-invalid-input"
1332
1332
  aria-label="Date picker"
1333
1333
  />
1334
+ <div class="pf-v5-c-form-control__utilities">
1335
+ <div
1336
+ class="pf-v5-c-form-control__icon pf-m-status"
1337
+ >
1338
+ <i
1339
+ class="fas fa-exclamation-circle"
1340
+ aria-hidden="true"
1341
+ ></i>
1342
+ </div>
1343
+ </div>
1334
1344
  </div>
1335
1345
  <button
1336
1346
  class="pf-v5-c-button pf-m-control"