@patternfly/patternfly 5.0.0-alpha.52 → 5.0.0-alpha.54

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 (47) hide show
  1. package/components/Divider/divider.css +12 -12
  2. package/components/FormControl/form-control.css +164 -214
  3. package/components/FormControl/form-control.scss +175 -281
  4. package/components/FormControl/themes/dark/form-control.scss +1 -2
  5. package/components/Masthead/masthead.css +12 -12
  6. package/components/NumberInput/number-input.css +0 -1
  7. package/components/NumberInput/number-input.scss +0 -1
  8. package/components/Pagination/pagination.css +12 -12
  9. package/components/Tabs/tabs.css +24 -24
  10. package/components/Toolbar/toolbar.css +54 -54
  11. package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -28
  12. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +52 -46
  13. package/docs/components/DatePicker/examples/DatePicker.md +55 -49
  14. package/docs/components/FileUpload/examples/FileUpload.md +105 -93
  15. package/docs/components/Form/examples/Form.md +165 -145
  16. package/docs/components/FormControl/examples/FormControl.md +439 -475
  17. package/docs/components/InlineEdit/examples/InlineEdit.md +87 -76
  18. package/docs/components/InputGroup/examples/InputGroup.md +84 -74
  19. package/docs/components/Login/examples/Login.md +92 -82
  20. package/docs/components/NumberInput/examples/NumberInput.md +99 -87
  21. package/docs/components/Pagination/examples/Pagination.md +100 -89
  22. package/docs/components/Select/examples/Select.md +77 -68
  23. package/docs/components/Slider/examples/Slider.md +31 -44
  24. package/docs/components/TextInputGroup/examples/TextInputGroup.md +60 -52
  25. package/docs/components/Toolbar/examples/Toolbar.md +18 -16
  26. package/docs/components/Wizard/examples/Wizard.md +280 -245
  27. package/docs/demos/Alert/examples/Alert.md +69 -57
  28. package/docs/demos/Button/examples/Button.md +54 -48
  29. package/docs/demos/CardView/examples/CardView.md +9 -8
  30. package/docs/demos/DataList/examples/DataList.md +36 -32
  31. package/docs/demos/Form/examples/BasicForms.md +247 -227
  32. package/docs/demos/HelperText/examples/HelperText.md +37 -33
  33. package/docs/demos/Modal/examples/Modal.md +14 -21
  34. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +11 -10
  35. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -40
  36. package/docs/demos/Table/examples/Table.md +99 -88
  37. package/docs/demos/Toolbar/examples/Toolbar.md +28 -25
  38. package/docs/demos/Wizard/examples/Wizard.md +448 -392
  39. package/layouts/Flex/flex.css +60 -120
  40. package/layouts/Flex/flex.scss +1 -1
  41. package/package.json +3 -3
  42. package/patternfly-no-globals.css +335 -446
  43. package/patternfly.css +335 -446
  44. package/patternfly.min.css +1 -1
  45. package/patternfly.min.css.map +1 -1
  46. package/sass-utilities/functions.scss +6 -9
  47. package/docs/components/FormControl/examples/FormControl.css +0 -5
package/docs/components/InlineEdit/examples/InlineEdit.md CHANGED
@@ -123,12 +123,13 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
123
123
  </div>
124
124
  <div class="pf-v5-c-inline-edit__group">
125
125
  <div class="pf-v5-c-inline-edit__input">
126
- <input
127
- class="pf-v5-c-form-control"
128
- type="text"
129
- value="Static value"
130
- aria-label="Editable text input"
131
- />
126
+ <div class="pf-v5-c-form-control">
127
+ <input
128
+ type="text"
129
+ value="Static value"
130
+ aria-label="Editable text input"
131
+ />
132
+ </div>
132
133
  </div>
133
134
  <div class="pf-v5-c-inline-edit__group pf-m-action-group pf-m-icon-group">
134
135
  <div class="pf-v5-c-inline-edit__action pf-m-valid">
@@ -181,12 +182,13 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
181
182
  </div>
182
183
  <div class="pf-v5-c-inline-edit__group">
183
184
  <div class="pf-v5-c-inline-edit__input">
184
- <input
185
- class="pf-v5-c-form-control"
186
- type="text"
187
- value="Static value"
188
- aria-label="Editable text input"
189
- />
185
+ <div class="pf-v5-c-form-control">
186
+ <input
187
+ type="text"
188
+ value="Static value"
189
+ aria-label="Editable text input"
190
+ />
191
+ </div>
190
192
  </div>
191
193
  <div class="pf-v5-c-inline-edit__group pf-m-action-group pf-m-icon-group">
192
194
  <div class="pf-v5-c-inline-edit__action pf-m-valid">
@@ -252,13 +254,14 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
252
254
  <div class="pf-v5-c-inline-edit__value">Static value</div>
253
255
  <div class="pf-v5-c-inline-edit__group">
254
256
  <div class="pf-v5-c-inline-edit__input">
255
- <input
256
- class="pf-v5-c-form-control"
257
- type="text"
258
- id="single-inline-edit-with-label-example-input"
259
- value="Static value"
260
- aria-label="Editable text input"
261
- />
257
+ <div class="pf-v5-c-form-control">
258
+ <input
259
+ type="text"
260
+ id="single-inline-edit-with-label-example-input"
261
+ value="Static value"
262
+ aria-label="Editable text input"
263
+ />
264
+ </div>
262
265
  </div>
263
266
  <div class="pf-v5-c-inline-edit__group pf-m-action-group pf-m-icon-group">
264
267
  <div class="pf-v5-c-inline-edit__action pf-m-valid">
@@ -313,12 +316,13 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
313
316
  <div class="pf-v5-c-inline-edit__value">Static value</div>
314
317
  <div class="pf-v5-c-inline-edit__group">
315
318
  <div class="pf-v5-c-inline-edit__input">
316
- <input
317
- class="pf-v5-c-form-control"
318
- type="text"
319
- value="Static value"
320
- aria-label="Editable text input"
321
- />
319
+ <div class="pf-v5-c-form-control">
320
+ <input
321
+ type="text"
322
+ value="Static value"
323
+ aria-label="Editable text input"
324
+ />
325
+ </div>
322
326
  </div>
323
327
  <div class="pf-v5-c-inline-edit__group pf-m-action-group pf-m-icon-group">
324
328
  <div class="pf-v5-c-inline-edit__action pf-m-valid">
@@ -373,13 +377,14 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
373
377
  <div class="pf-v5-c-inline-edit__value">Static value</div>
374
378
  <div class="pf-v5-c-inline-edit__group">
375
379
  <div class="pf-v5-c-inline-edit__input">
376
- <input
377
- class="pf-v5-c-form-control"
378
- required
379
- value="Invalid state"
380
- aria-invalid="true"
381
- aria-label="Error state input example"
382
- />
380
+ <div class="pf-v5-c-form-control">
381
+ <input
382
+ required
383
+ value="Invalid state"
384
+ aria-invalid="true"
385
+ aria-label="Error state input example"
386
+ />
387
+ </div>
383
388
  </div>
384
389
  <div class="pf-v5-c-inline-edit__group pf-m-action-group pf-m-icon-group">
385
390
  <div class="pf-v5-c-inline-edit__action">
@@ -436,13 +441,14 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
436
441
  <th role="columnheader" data-label="Text input">
437
442
  <div class="pf-v5-c-inline-edit__value">Text input description content</div>
438
443
  <div class="pf-v5-c-inline-edit__input">
439
- <input
440
- class="pf-v5-c-form-control"
441
- type="text"
442
- value="Text input description content"
443
- id="bulk-edit-table-example-row-1-text-input"
444
- aria-label="Text input"
445
- />
444
+ <div class="pf-v5-c-form-control">
445
+ <input
446
+ type="text"
447
+ value="Text input description content"
448
+ id="bulk-edit-table-example-row-1-text-input"
449
+ aria-label="Text input"
450
+ />
451
+ </div>
446
452
  </div>
447
453
  </th>
448
454
  <td role="cell" data-label="Disabled text input">
@@ -450,14 +456,15 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
450
456
  class="pf-v5-c-inline-edit__value"
451
457
  >Text input disabled, description content</div>
452
458
  <div class="pf-v5-c-inline-edit__input">
453
- <input
454
- class="pf-v5-c-form-control"
455
- type="text"
456
- value="Text input disabled, description content"
457
- id="bulk-edit-table-example-row-1-text-input-disabled"
458
- aria-label="Disabled text input"
459
- disabled
460
- />
459
+ <div class="pf-v5-c-form-control">
460
+ <input
461
+ type="text"
462
+ value="Text input disabled, description content"
463
+ id="bulk-edit-table-example-row-1-text-input-disabled"
464
+ aria-label="Disabled text input"
465
+ disabled
466
+ />
467
+ </div>
461
468
  </div>
462
469
  </td>
463
470
  <td role="cell" data-label="Checkboxes">
@@ -537,13 +544,14 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
537
544
  <td role="cell" data-label="Number">
538
545
  <div class="pf-v5-c-inline-edit__value">2</div>
539
546
  <div class="pf-v5-c-inline-edit__input">
540
- <input
541
- class="pf-v5-c-form-control"
542
- type="number"
543
- value="2"
544
- id="bulk-edit-table-example-row-1-number-input"
545
- aria-label="Number input"
546
- />
547
+ <div class="pf-v5-c-form-control">
548
+ <input
549
+ type="number"
550
+ value="2"
551
+ id="bulk-edit-table-example-row-1-number-input"
552
+ aria-label="Number input"
553
+ />
554
+ </div>
547
555
  </div>
548
556
  </td>
549
557
  <td class="pf-v5-c-table__inline-edit-action" role="cell">
@@ -631,13 +639,14 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
631
639
  <th role="columnheader" data-label="Text input">
632
640
  <div class="pf-v5-c-inline-edit__value">Text input description content</div>
633
641
  <div class="pf-v5-c-inline-edit__input">
634
- <input
635
- class="pf-v5-c-form-control"
636
- type="text"
637
- value="Text input description content"
638
- id="bulk-edit-table-example-row-2-text-input"
639
- aria-label="Text input"
640
- />
642
+ <div class="pf-v5-c-form-control">
643
+ <input
644
+ type="text"
645
+ value="Text input description content"
646
+ id="bulk-edit-table-example-row-2-text-input"
647
+ aria-label="Text input"
648
+ />
649
+ </div>
641
650
  </div>
642
651
  </th>
643
652
  <td role="cell" data-label="Disabled text input">
@@ -645,14 +654,15 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
645
654
  class="pf-v5-c-inline-edit__value"
646
655
  >Text input disabled, description content</div>
647
656
  <div class="pf-v5-c-inline-edit__input">
648
- <input
649
- class="pf-v5-c-form-control"
650
- type="text"
651
- value="Text input disabled, description content"
652
- id="bulk-edit-table-example-row-2-text-input-disabled"
653
- aria-label="Disabled text input"
654
- disabled
655
- />
657
+ <div class="pf-v5-c-form-control">
658
+ <input
659
+ type="text"
660
+ value="Text input disabled, description content"
661
+ id="bulk-edit-table-example-row-2-text-input-disabled"
662
+ aria-label="Disabled text input"
663
+ disabled
664
+ />
665
+ </div>
656
666
  </div>
657
667
  </td>
658
668
  <td role="cell" data-label="Checkboxes">
@@ -732,13 +742,14 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
732
742
  <td role="cell" data-label="Number">
733
743
  <div class="pf-v5-c-inline-edit__value">2</div>
734
744
  <div class="pf-v5-c-inline-edit__input">
735
- <input
736
- class="pf-v5-c-form-control"
737
- type="number"
738
- value="2"
739
- id="bulk-edit-table-example-row-2-number-input"
740
- aria-label="Number input"
741
- />
745
+ <div class="pf-v5-c-form-control">
746
+ <input
747
+ type="number"
748
+ value="2"
749
+ id="bulk-edit-table-example-row-2-number-input"
750
+ aria-label="Number input"
751
+ />
752
+ </div>
742
753
  </div>
743
754
  </td>
744
755
  <td class="pf-v5-c-table__inline-edit-action" role="cell">
package/docs/components/InputGroup/examples/InputGroup.md CHANGED
@@ -20,13 +20,14 @@ Use the input group to extend form controls by adding text, buttons, selects, et
20
20
  >Button</button>
21
21
  </div>
22
22
  <div class="pf-v5-c-input-group__item pf-m-fill">
23
- <textarea
24
- class="pf-v5-c-form-control"
25
- name="textarea1"
26
- id="textarea1"
27
- aria-label="Textarea with buttons"
28
- aria-describedby="textAreaButton1"
29
- ></textarea>
23
+ <div class="pf-v5-c-form-control">
24
+ <textarea
25
+ name="textarea1"
26
+ id="textarea1"
27
+ aria-label="Textarea with buttons"
28
+ aria-describedby="textAreaButton1"
29
+ ></textarea>
30
+ </div>
30
31
  </div>
31
32
  <div class="pf-v5-c-input-group__item">
32
33
  <button class="pf-v5-c-button pf-m-control" type="button">Button</button>
@@ -35,13 +36,14 @@ Use the input group to extend form controls by adding text, buttons, selects, et
35
36
  <br />
36
37
  <div class="pf-v5-c-input-group">
37
38
  <div class="pf-v5-c-input-group__item pf-m-fill">
38
- <textarea
39
- class="pf-v5-c-form-control"
40
- name="textarea2"
41
- id="textarea2"
42
- aria-label="Textarea with button"
43
- aria-describedby="textAreaButton2"
44
- ></textarea>
39
+ <div class="pf-v5-c-form-control">
40
+ <textarea
41
+ name="textarea2"
42
+ id="textarea2"
43
+ aria-label="Textarea with button"
44
+ aria-describedby="textAreaButton2"
45
+ ></textarea>
46
+ </div>
45
47
  </div>
46
48
  <div class="pf-v5-c-input-group__item">
47
49
  <button
@@ -64,13 +66,14 @@ Use the input group to extend form controls by adding text, buttons, selects, et
64
66
  <button class="pf-v5-c-button pf-m-control" type="button">Button</button>
65
67
  </div>
66
68
  <div class="pf-v5-c-input-group__item pf-m-fill">
67
- <textarea
68
- class="pf-v5-c-form-control"
69
- name="textarea3"
70
- id="textarea3"
71
- aria-label="Textarea with buttons"
72
- aria-describedby="textAreaButton3"
73
- ></textarea>
69
+ <div class="pf-v5-c-form-control">
70
+ <textarea
71
+ name="textarea3"
72
+ id="textarea3"
73
+ aria-label="Textarea with buttons"
74
+ aria-describedby="textAreaButton3"
75
+ ></textarea>
76
+ </div>
74
77
  </div>
75
78
  <div class="pf-v5-c-input-group__item">
76
79
  <button class="pf-v5-c-button pf-m-control" type="button">Button</button>
@@ -136,14 +139,15 @@ Use the input group to extend form controls by adding text, buttons, selects, et
136
139
  </div>
137
140
  </div>
138
141
  <div class="pf-v5-c-input-group__item pf-m-fill">
139
- <input
140
- class="pf-v5-c-form-control"
141
- type="text"
142
- id="textInput4"
143
- name="textInput4"
144
- aria-label="Input with select and button"
145
- aria-describedby="inputSelectButton1"
146
- />
142
+ <div class="pf-v5-c-form-control">
143
+ <input
144
+ type="text"
145
+ id="textInput4"
146
+ name="textInput4"
147
+ aria-label="Input with select and button"
148
+ aria-describedby="inputSelectButton1"
149
+ />
150
+ </div>
147
151
  </div>
148
152
  <div class="pf-v5-c-input-group__item">
149
153
  <button
@@ -161,13 +165,14 @@ Use the input group to extend form controls by adding text, buttons, selects, et
161
165
  </span>
162
166
  </div>
163
167
  <div class="pf-v5-c-input-group__item pf-m-fill">
164
- <input
165
- class="pf-v5-c-form-control"
166
- type="number"
167
- id="textInput5"
168
- name="textInput5"
169
- aria-label=" Dollar amount input example"
170
- />
168
+ <div class="pf-v5-c-form-control">
169
+ <input
170
+ type="number"
171
+ id="textInput5"
172
+ name="textInput5"
173
+ aria-label=" Dollar amount input example"
174
+ />
175
+ </div>
171
176
  </div>
172
177
  <div class="pf-v5-c-input-group__item pf-m-box">
173
178
  <span class="pf-v5-c-input-group__text">.00</span>
@@ -176,14 +181,15 @@ Use the input group to extend form controls by adding text, buttons, selects, et
176
181
  <br />
177
182
  <div class="pf-v5-c-input-group">
178
183
  <div class="pf-v5-c-input-group__item pf-m-fill">
179
- <input
180
- class="pf-v5-c-form-control"
181
- type="email"
182
- id="textInput6"
183
- name="textInput6"
184
- aria-label="Email input field"
185
- aria-describedby="email-example"
186
- />
184
+ <div class="pf-v5-c-form-control">
185
+ <input
186
+ type="email"
187
+ id="textInput6"
188
+ name="textInput6"
189
+ aria-label="Email input field"
190
+ aria-describedby="email-example"
191
+ />
192
+ </div>
187
193
  </div>
188
194
  <div class="pf-v5-c-input-group__item pf-m-box">
189
195
  <span class="pf-v5-c-input-group__text" id="email-example">@example.com</span>
@@ -197,27 +203,29 @@ Use the input group to extend form controls by adding text, buttons, selects, et
197
203
  </span>
198
204
  </div>
199
205
  <div class="pf-v5-c-input-group__item pf-m-fill">
200
- <input
201
- class="pf-v5-c-form-control"
202
- required
203
- type="email"
204
- id="textInput7"
205
- name="textInput7"
206
- aria-invalid="true"
207
- aria-label="Error state username example"
208
- />
206
+ <div class="pf-v5-c-form-control">
207
+ <input
208
+ required
209
+ type="email"
210
+ id="textInput7"
211
+ name="textInput7"
212
+ aria-invalid="true"
213
+ aria-label="Error state username example"
214
+ />
215
+ </div>
209
216
  </div>
210
217
  </div>
211
218
  <br />
212
219
  <div class="pf-v5-c-input-group">
213
220
  <div class="pf-v5-c-input-group__item pf-m-fill">
214
- <input
215
- class="pf-v5-c-form-control"
216
- type="text"
217
- id="textInput13"
218
- name="textInput13"
219
- aria-label="Input example with popover"
220
- />
221
+ <div class="pf-v5-c-form-control">
222
+ <input
223
+ type="text"
224
+ id="textInput13"
225
+ name="textInput13"
226
+ aria-label="Input example with popover"
227
+ />
228
+ </div>
221
229
  </div>
222
230
  <div class="pf-v5-c-input-group__item">
223
231
  <button
@@ -232,13 +240,14 @@ Use the input group to extend form controls by adding text, buttons, selects, et
232
240
  <br />
233
241
  <div class="pf-v5-c-input-group">
234
242
  <div class="pf-v5-c-input-group__item pf-m-fill">
235
- <input
236
- class="pf-v5-c-form-control"
237
- type="text"
238
- id="textInput12"
239
- name="textInput12"
240
- aria-label="Input example with popover"
241
- />
243
+ <div class="pf-v5-c-form-control">
244
+ <input
245
+ type="text"
246
+ id="textInput12"
247
+ name="textInput12"
248
+ aria-label="Input example with popover"
249
+ />
250
+ </div>
242
251
  </div>
243
252
  <div class="pf-v5-c-input-group__item pf-m-plain">
244
253
  <button
@@ -253,13 +262,14 @@ Use the input group to extend form controls by adding text, buttons, selects, et
253
262
  <br />
254
263
  <div class="pf-v5-c-input-group">
255
264
  <div class="pf-v5-c-input-group__item pf-m-fill">
256
- <input
257
- class="pf-v5-c-form-control"
258
- type="number"
259
- id="textInput14"
260
- name="textInput14"
261
- aria-label="Input example with plain unit"
262
- />
265
+ <div class="pf-v5-c-form-control">
266
+ <input
267
+ type="number"
268
+ id="textInput14"
269
+ name="textInput14"
270
+ aria-label="Input example with plain unit"
271
+ />
272
+ </div>
263
273
  </div>
264
274
  <div class="pf-v5-c-input-group__item pf-m-box pf-m-plain">
265
275
  <span class="pf-v5-c-input-group__text">%</span>