@patternfly/patternfly 5.0.0-alpha.31 → 5.0.0-alpha.33

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 (37) hide show
  1. package/components/DatePicker/date-picker.css +0 -8
  2. package/components/DatePicker/date-picker.scss +0 -9
  3. package/components/HelperText/helper-text.css +4 -0
  4. package/components/HelperText/helper-text.scss +5 -0
  5. package/components/InputGroup/input-group.css +61 -85
  6. package/components/InputGroup/input-group.scss +55 -61
  7. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  8. package/components/OptionsMenu/options-menu.css +0 -5
  9. package/components/OptionsMenu/options-menu.scss +0 -6
  10. package/docs/components/CalendarMonth/examples/CalendarMonth.md +268 -252
  11. package/docs/components/DatePicker/examples/DatePicker.md +129 -94
  12. package/docs/components/FileUpload/examples/FileUpload.md +136 -96
  13. package/docs/components/Form/examples/Form.md +94 -73
  14. package/docs/components/HelperText/examples/HelperText.md +13 -24
  15. package/docs/components/InputGroup/examples/InputGroup.md +219 -169
  16. package/docs/components/Login/examples/Login.md +67 -30
  17. package/docs/components/NumberInput/examples/NumberInput.md +299 -227
  18. package/docs/components/Progress/examples/Progress.md +1 -1
  19. package/docs/components/SearchInput/examples/SearchInput.md +151 -113
  20. package/docs/components/Slider/examples/Slider.md +60 -38
  21. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -132
  22. package/docs/components/Toolbar/examples/Toolbar.md +374 -345
  23. package/docs/demos/Alert/examples/Alert.md +105 -58
  24. package/docs/demos/DataList/examples/DataList.md +158 -150
  25. package/docs/demos/Form/examples/BasicForms.md +191 -191
  26. package/docs/demos/HelperText/examples/HelperText.md +11 -8
  27. package/docs/demos/Masthead/examples/Masthead.md +279 -258
  28. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +21 -17
  29. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +100 -84
  30. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +266 -232
  31. package/docs/demos/Table/examples/Table.md +950 -902
  32. package/docs/demos/Toolbar/examples/Toolbar.md +330 -299
  33. package/package.json +2 -2
  34. package/patternfly-no-reset.css +64 -87
  35. package/patternfly.css +64 -87
  36. package/patternfly.min.css +1 -1
  37. package/patternfly.min.css.map +1 -1
package/docs/demos/PasswordStrength/examples/PasswordStrength.md CHANGED
@@ -26,27 +26,31 @@ section: demos
26
26
  </div>
27
27
  <div class="pf-c-form__group-control">
28
28
  <div class="pf-c-input-group">
29
- <input
30
- class="pf-c-form-control"
31
- required
32
- type="text"
33
- id="password-strength-demo--initial-password"
34
- name="password-strength-demo--initial-password"
35
- aria-label="Password input"
36
- value
37
- placeholder="Password"
38
- />
39
- <button
40
- class="pf-c-button pf-m-control"
41
- type="button"
42
- aria-label="Show password"
43
- >
44
- <i class="fas fa-eye-slash" aria-hidden="true"></i>
45
- </button>
29
+ <div class="pf-c-input-group__item pf-m-fill">
30
+ <input
31
+ class="pf-c-form-control"
32
+ required
33
+ type="text"
34
+ id="password-strength-demo--initial-password"
35
+ name="password-strength-demo--initial-password"
36
+ aria-label="Password input"
37
+ value
38
+ placeholder="Password"
39
+ />
40
+ </div>
41
+ <div class="pf-c-input-group__item">
42
+ <button
43
+ class="pf-c-button pf-m-control"
44
+ type="button"
45
+ aria-label="Show password"
46
+ >
47
+ <i class="fas fa-eye-slash" aria-hidden="true"></i>
48
+ </button>
49
+ </div>
46
50
  </div>
47
- <div class="pf-c-form__helper-text">
51
+ <div class="pf-c-form__helper-text" aria-live="polite">
48
52
  <div class="pf-c-helper-text">
49
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-indeterminate">
53
+ <div class="pf-c-helper-text__item pf-m-indeterminate pf-m-dynamic">
50
54
  <span class="pf-c-helper-text__item-icon">
51
55
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
52
56
  </span>
@@ -54,7 +58,7 @@ section: demos
54
58
  class="pf-c-helper-text__item-text"
55
59
  >Must be at least 14 characters</span>
56
60
  </div>
57
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-indeterminate">
61
+ <div class="pf-c-helper-text__item pf-m-indeterminate pf-m-dynamic">
58
62
  <span class="pf-c-helper-text__item-icon">
59
63
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
60
64
  </span>
@@ -62,7 +66,7 @@ section: demos
62
66
  class="pf-c-helper-text__item-text"
63
67
  >Cannot contain the word "redhat"</span>
64
68
  </div>
65
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-indeterminate">
69
+ <div class="pf-c-helper-text__item pf-m-indeterminate pf-m-dynamic">
66
70
  <span class="pf-c-helper-text__item-icon">
67
71
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
68
72
  </span>
@@ -101,27 +105,31 @@ section: demos
101
105
  </div>
102
106
  <div class="pf-c-form__group-control">
103
107
  <div class="pf-c-input-group">
104
- <input
105
- class="pf-c-form-control"
106
- required
107
- type="text"
108
- id="password-strength-demo--invalid-password"
109
- name="password-strength-demo--invalid-password"
110
- aria-label="Password input"
111
- value="Marie$RedHat78"
112
- placeholder="Password"
113
- />
114
- <button
115
- class="pf-c-button pf-m-control"
116
- type="button"
117
- aria-label="Show password"
118
- >
119
- <i class="fas fa-eye-slash" aria-hidden="true"></i>
120
- </button>
108
+ <div class="pf-c-input-group__item pf-m-fill">
109
+ <input
110
+ class="pf-c-form-control"
111
+ required
112
+ type="text"
113
+ id="password-strength-demo--invalid-password"
114
+ name="password-strength-demo--invalid-password"
115
+ aria-label="Password input"
116
+ value="Marie$RedHat78"
117
+ placeholder="Password"
118
+ />
119
+ </div>
120
+ <div class="pf-c-input-group__item">
121
+ <button
122
+ class="pf-c-button pf-m-control"
123
+ type="button"
124
+ aria-label="Show password"
125
+ >
126
+ <i class="fas fa-eye-slash" aria-hidden="true"></i>
127
+ </button>
128
+ </div>
121
129
  </div>
122
- <div class="pf-c-form__helper-text">
130
+ <div class="pf-c-form__helper-text" aria-live="polite">
123
131
  <div class="pf-c-helper-text">
124
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
132
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
125
133
  <span class="pf-c-helper-text__item-icon">
126
134
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
127
135
  </span>
@@ -129,7 +137,7 @@ section: demos
129
137
  class="pf-c-helper-text__item-text"
130
138
  >Must be at least 14 characters</span>
131
139
  </div>
132
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-error">
140
+ <div class="pf-c-helper-text__item pf-m-error pf-m-dynamic">
133
141
  <span class="pf-c-helper-text__item-icon">
134
142
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
135
143
  </span>
@@ -137,7 +145,7 @@ section: demos
137
145
  class="pf-c-helper-text__item-text"
138
146
  >Cannot contain the word "redhat"</span>
139
147
  </div>
140
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
148
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
141
149
  <span class="pf-c-helper-text__item-icon">
142
150
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
143
151
  </span>
@@ -185,27 +193,31 @@ section: demos
185
193
  </div>
186
194
  <div class="pf-c-form__group-control">
187
195
  <div class="pf-c-input-group">
188
- <input
189
- class="pf-c-form-control"
190
- required
191
- type="text"
192
- id="password-strength-demo--weak-password"
193
- name="password-strength-demo--weak-password"
194
- aria-label="Password input"
195
- value="Marie$Can3Read"
196
- placeholder="Password"
197
- />
198
- <button
199
- class="pf-c-button pf-m-control"
200
- type="button"
201
- aria-label="Show password"
202
- >
203
- <i class="fas fa-eye-slash" aria-hidden="true"></i>
204
- </button>
196
+ <div class="pf-c-input-group__item pf-m-fill">
197
+ <input
198
+ class="pf-c-form-control"
199
+ required
200
+ type="text"
201
+ id="password-strength-demo--weak-password"
202
+ name="password-strength-demo--weak-password"
203
+ aria-label="Password input"
204
+ value="Marie$Can3Read"
205
+ placeholder="Password"
206
+ />
207
+ </div>
208
+ <div class="pf-c-input-group__item">
209
+ <button
210
+ class="pf-c-button pf-m-control"
211
+ type="button"
212
+ aria-label="Show password"
213
+ >
214
+ <i class="fas fa-eye-slash" aria-hidden="true"></i>
215
+ </button>
216
+ </div>
205
217
  </div>
206
- <div class="pf-c-form__helper-text">
218
+ <div class="pf-c-form__helper-text" aria-live="polite">
207
219
  <div class="pf-c-helper-text">
208
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
220
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
209
221
  <span class="pf-c-helper-text__item-icon">
210
222
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
211
223
  </span>
@@ -213,7 +225,7 @@ section: demos
213
225
  class="pf-c-helper-text__item-text"
214
226
  >Must be at least 14 characters</span>
215
227
  </div>
216
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
228
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
217
229
  <span class="pf-c-helper-text__item-icon">
218
230
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
219
231
  </span>
@@ -221,7 +233,7 @@ section: demos
221
233
  class="pf-c-helper-text__item-text"
222
234
  >Cannot contain the word "redhat"</span>
223
235
  </div>
224
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
236
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
225
237
  <span class="pf-c-helper-text__item-icon">
226
238
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
227
239
  </span>
@@ -269,27 +281,31 @@ section: demos
269
281
  </div>
270
282
  <div class="pf-c-form__group-control">
271
283
  <div class="pf-c-input-group">
272
- <input
273
- class="pf-c-form-control"
274
- required
275
- type="text"
276
- id="password-strength-demo--strong-password"
277
- name="password-strength-demo--strong-password"
278
- aria-label="Password input"
279
- value="Marie$Can8Read3Pass@Word"
280
- placeholder="Password"
281
- />
282
- <button
283
- class="pf-c-button pf-m-control"
284
- type="button"
285
- aria-label="Show password"
286
- >
287
- <i class="fas fa-eye-slash" aria-hidden="true"></i>
288
- </button>
284
+ <div class="pf-c-input-group__item pf-m-fill">
285
+ <input
286
+ class="pf-c-form-control"
287
+ required
288
+ type="text"
289
+ id="password-strength-demo--strong-password"
290
+ name="password-strength-demo--strong-password"
291
+ aria-label="Password input"
292
+ value="Marie$Can8Read3Pass@Word"
293
+ placeholder="Password"
294
+ />
295
+ </div>
296
+ <div class="pf-c-input-group__item">
297
+ <button
298
+ class="pf-c-button pf-m-control"
299
+ type="button"
300
+ aria-label="Show password"
301
+ >
302
+ <i class="fas fa-eye-slash" aria-hidden="true"></i>
303
+ </button>
304
+ </div>
289
305
  </div>
290
- <div class="pf-c-form__helper-text">
306
+ <div class="pf-c-form__helper-text" aria-live="polite">
291
307
  <div class="pf-c-helper-text">
292
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
308
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
293
309
  <span class="pf-c-helper-text__item-icon">
294
310
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
295
311
  </span>
@@ -297,7 +313,7 @@ section: demos
297
313
  class="pf-c-helper-text__item-text"
298
314
  >Must be at least 14 characters</span>
299
315
  </div>
300
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
316
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
301
317
  <span class="pf-c-helper-text__item-icon">
302
318
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
303
319
  </span>
@@ -305,7 +321,7 @@ section: demos
305
321
  class="pf-c-helper-text__item-text"
306
322
  >Cannot contain the word "redhat"</span>
307
323
  </div>
308
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
324
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
309
325
  <span class="pf-c-helper-text__item-icon">
310
326
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
311
327
  </span>