@patternfly/patternfly 5.0.0-alpha.53 → 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 (39) hide show
  1. package/components/FormControl/form-control.css +164 -214
  2. package/components/FormControl/form-control.scss +175 -281
  3. package/components/FormControl/themes/dark/form-control.scss +1 -2
  4. package/components/NumberInput/number-input.css +0 -1
  5. package/components/NumberInput/number-input.scss +0 -1
  6. package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -28
  7. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +52 -46
  8. package/docs/components/DatePicker/examples/DatePicker.md +55 -49
  9. package/docs/components/FileUpload/examples/FileUpload.md +105 -93
  10. package/docs/components/Form/examples/Form.md +165 -145
  11. package/docs/components/FormControl/examples/FormControl.md +439 -475
  12. package/docs/components/InlineEdit/examples/InlineEdit.md +87 -76
  13. package/docs/components/InputGroup/examples/InputGroup.md +84 -74
  14. package/docs/components/Login/examples/Login.md +92 -82
  15. package/docs/components/NumberInput/examples/NumberInput.md +99 -87
  16. package/docs/components/Pagination/examples/Pagination.md +100 -89
  17. package/docs/components/Select/examples/Select.md +77 -68
  18. package/docs/components/Slider/examples/Slider.md +31 -44
  19. package/docs/components/TextInputGroup/examples/TextInputGroup.md +60 -52
  20. package/docs/components/Toolbar/examples/Toolbar.md +18 -16
  21. package/docs/components/Wizard/examples/Wizard.md +280 -245
  22. package/docs/demos/Alert/examples/Alert.md +69 -57
  23. package/docs/demos/Button/examples/Button.md +54 -48
  24. package/docs/demos/CardView/examples/CardView.md +9 -8
  25. package/docs/demos/DataList/examples/DataList.md +36 -32
  26. package/docs/demos/Form/examples/BasicForms.md +247 -227
  27. package/docs/demos/HelperText/examples/HelperText.md +37 -33
  28. package/docs/demos/Modal/examples/Modal.md +14 -21
  29. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +11 -10
  30. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -40
  31. package/docs/demos/Table/examples/Table.md +99 -88
  32. package/docs/demos/Toolbar/examples/Toolbar.md +28 -25
  33. package/docs/demos/Wizard/examples/Wizard.md +448 -392
  34. package/package.json +3 -3
  35. package/patternfly-no-globals.css +161 -212
  36. package/patternfly.css +161 -212
  37. package/patternfly.min.css +1 -1
  38. package/patternfly.min.css.map +1 -1
  39. package/docs/components/FormControl/examples/FormControl.css +0 -5
package/components/FormControl/themes/dark/form-control.scss CHANGED
@@ -2,7 +2,6 @@
2
2
 
3
3
  @mixin pf-v5-theme-dark-form-control() {
4
4
  .#{$form-control} {
5
- --#{$form-control}__select--BackgroundUrl: #{pf-bg-svg($pf-v5-c-form-control__select--Coordinates, $pf-v5-c-form-control__select--ViewBox, $pf-v5-global--Color--100)};
6
5
  --#{$form-control}--BorderTopColor: transparent;
7
6
  --#{$form-control}--BorderRightColor: transparent;
8
7
  --#{$form-control}--BorderBottomColor: var(--#{$pf-global}--BorderColor--400);
@@ -19,7 +18,7 @@
19
18
  filter: #{"invert(1)"};
20
19
  }
21
20
 
22
- &[readonly] {
21
+ &.pf-m-readonly {
23
22
  border-bottom-color: var(--#{$pf-global}--palette--black-700); // should be a var?
24
23
  }
25
24
  }
package/components/NumberInput/number-input.css CHANGED
@@ -26,7 +26,6 @@
26
26
  --pf-v5-c-number-input--c-form-control--width-icon: var(--pf-v5-c-number-input--m-status--c-form-control--width-icon);
27
27
  }
28
28
  .pf-v5-c-number-input .pf-v5-c-form-control {
29
- display: inline-flex;
30
29
  width: var(--pf-v5-c-number-input--c-form-control--Width);
31
30
  text-align: right;
32
31
  }
package/components/NumberInput/number-input.scss CHANGED
@@ -30,7 +30,6 @@
30
30
  }
31
31
 
32
32
  .#{$form-control} {
33
- display: inline-flex;
34
33
  width: var(--#{$number-input}--c-form-control--Width);
35
34
  text-align: right;
36
35
 
package/docs/components/CalendarMonth/examples/CalendarMonth.md CHANGED
@@ -83,13 +83,14 @@ cssPrefix: pf-v5-c-calendar-month
83
83
  </div>
84
84
  <div class="pf-v5-c-input-group__item">
85
85
  <div class="pf-v5-c-calendar-month__header-year">
86
- <input
87
- class="pf-v5-c-form-control"
88
- type="number"
89
- value="2020"
90
- id="calendar-month-date-selected-year"
91
- aria-label="Select year"
92
- />
86
+ <div class="pf-v5-c-form-control">
87
+ <input
88
+ type="number"
89
+ value="2020"
90
+ id="calendar-month-date-selected-year"
91
+ aria-label="Select year"
92
+ />
93
+ </div>
93
94
  </div>
94
95
  </div>
95
96
  </div>
@@ -476,13 +477,14 @@ cssPrefix: pf-v5-c-calendar-month
476
477
  </div>
477
478
  <div class="pf-v5-c-input-group__item">
478
479
  <div class="pf-v5-c-calendar-month__header-year">
479
- <input
480
- class="pf-v5-c-form-control"
481
- type="number"
482
- value="2020"
483
- id="calendar-month-range-start-date-selected-year"
484
- aria-label="Select year"
485
- />
480
+ <div class="pf-v5-c-form-control">
481
+ <input
482
+ type="number"
483
+ value="2020"
484
+ id="calendar-month-range-start-date-selected-year"
485
+ aria-label="Select year"
486
+ />
487
+ </div>
486
488
  </div>
487
489
  </div>
488
490
  </div>
@@ -894,13 +896,14 @@ cssPrefix: pf-v5-c-calendar-month
894
896
  </div>
895
897
  <div class="pf-v5-c-input-group__item">
896
898
  <div class="pf-v5-c-calendar-month__header-year">
897
- <input
898
- class="pf-v5-c-form-control"
899
- type="number"
900
- value="2020"
901
- id="calendar-month-range-end-date-selected-year"
902
- aria-label="Select year"
903
- />
899
+ <div class="pf-v5-c-form-control">
900
+ <input
901
+ type="number"
902
+ value="2020"
903
+ id="calendar-month-range-end-date-selected-year"
904
+ aria-label="Select year"
905
+ />
906
+ </div>
904
907
  </div>
905
908
  </div>
906
909
  </div>
@@ -1312,13 +1315,14 @@ cssPrefix: pf-v5-c-calendar-month
1312
1315
  </div>
1313
1316
  <div class="pf-v5-c-input-group__item">
1314
1317
  <div class="pf-v5-c-calendar-month__header-year">
1315
- <input
1316
- class="pf-v5-c-form-control"
1317
- type="number"
1318
- value="2020"
1319
- id="calendar-month-range-start-and-end-dates-selected-year"
1320
- aria-label="Select year"
1321
- />
1318
+ <div class="pf-v5-c-form-control">
1319
+ <input
1320
+ type="number"
1321
+ value="2020"
1322
+ id="calendar-month-range-start-and-end-dates-selected-year"
1323
+ aria-label="Select year"
1324
+ />
1325
+ </div>
1322
1326
  </div>
1323
1327
  </div>
1324
1328
  </div>
package/docs/components/ClipboardCopy/examples/ClipboardCopy.md CHANGED
@@ -9,13 +9,14 @@ cssPrefix: pf-v5-c-clipboard-copy
9
9
  ```html
10
10
  <div class="pf-v5-c-clipboard-copy">
11
11
  <div class="pf-v5-c-clipboard-copy__group">
12
- <input
13
- class="pf-v5-c-form-control"
14
- type="text"
15
- value="This is editable"
16
- id="basic-editable-text-input"
17
- aria-label="Copyable input"
18
- />
12
+ <div class="pf-v5-c-form-control">
13
+ <input
14
+ type="text"
15
+ value="This is editable"
16
+ id="basic-editable-text-input"
17
+ aria-label="Copyable input"
18
+ />
19
+ </div>
19
20
  <button
20
21
  class="pf-v5-c-button pf-m-control"
21
22
  type="button"
@@ -30,14 +31,15 @@ cssPrefix: pf-v5-c-clipboard-copy
30
31
  <br />
31
32
  <div class="pf-v5-c-clipboard-copy">
32
33
  <div class="pf-v5-c-clipboard-copy__group">
33
- <input
34
- class="pf-v5-c-form-control"
35
- readonly
36
- type="text"
37
- value="This is read-only"
38
- id="basic-readonly-text-input"
39
- aria-label="Copyable input"
40
- />
34
+ <div class="pf-v5-c-form-control">
35
+ <input
36
+ readonly
37
+ type="text"
38
+ value="This is read-only"
39
+ id="basic-readonly-text-input"
40
+ aria-label="Copyable input"
41
+ />
42
+ </div>
41
43
  <button
42
44
  class="pf-v5-c-button pf-m-control"
43
45
  type="button"
@@ -69,13 +71,14 @@ cssPrefix: pf-v5-c-clipboard-copy
69
71
  <i class="fas fa-angle-right" aria-hidden="true"></i>
70
72
  </div>
71
73
  </button>
72
- <input
73
- class="pf-v5-c-form-control"
74
- type="text"
75
- value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
76
- id="expandable-not-expanded-editable-text-input"
77
- aria-label="Copyable input"
78
- />
74
+ <div class="pf-v5-c-form-control">
75
+ <input
76
+ type="text"
77
+ value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
78
+ id="expandable-not-expanded-editable-text-input"
79
+ aria-label="Copyable input"
80
+ />
81
+ </div>
79
82
  <button
80
83
  class="pf-v5-c-button pf-m-control"
81
84
  type="button"
@@ -106,14 +109,15 @@ cssPrefix: pf-v5-c-clipboard-copy
106
109
  <i class="fas fa-angle-right" aria-hidden="true"></i>
107
110
  </div>
108
111
  </button>
109
- <input
110
- class="pf-v5-c-form-control"
111
- readonly
112
- type="text"
113
- value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
114
- id="expandable-expanded-editable-text-input"
115
- aria-label="Copyable input"
116
- />
112
+ <div class="pf-v5-c-form-control">
113
+ <input
114
+ readonly
115
+ type="text"
116
+ value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
117
+ id="expandable-expanded-editable-text-input"
118
+ aria-label="Copyable input"
119
+ />
120
+ </div>
117
121
  <button
118
122
  class="pf-v5-c-button pf-m-control"
119
123
  type="button"
@@ -145,14 +149,15 @@ cssPrefix: pf-v5-c-clipboard-copy
145
149
  <i class="fas fa-angle-right" aria-hidden="true"></i>
146
150
  </div>
147
151
  </button>
148
- <input
149
- class="pf-v5-c-form-control"
150
- readonly
151
- type="text"
152
- value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
153
- id="expandable-not-expanded-readonly-text-input"
154
- aria-label="Copyable input"
155
- />
152
+ <div class="pf-v5-c-form-control">
153
+ <input
154
+ readonly
155
+ type="text"
156
+ value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
157
+ id="expandable-not-expanded-readonly-text-input"
158
+ aria-label="Copyable input"
159
+ />
160
+ </div>
156
161
  <button
157
162
  class="pf-v5-c-button pf-m-control"
158
163
  type="button"
@@ -183,14 +188,15 @@ cssPrefix: pf-v5-c-clipboard-copy
183
188
  <i class="fas fa-angle-right" aria-hidden="true"></i>
184
189
  </div>
185
190
  </button>
186
- <input
187
- class="pf-v5-c-form-control"
188
- readonly
189
- type="text"
190
- value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
191
- id="expandable-expanded-readonly-text-input"
192
- aria-label="Copyable input"
193
- />
191
+ <div class="pf-v5-c-form-control">
192
+ <input
193
+ readonly
194
+ type="text"
195
+ value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
196
+ id="expandable-expanded-readonly-text-input"
197
+ aria-label="Copyable input"
198
+ />
199
+ </div>
194
200
  <button
195
201
  class="pf-v5-c-button pf-m-control"
196
202
  type="button"
package/docs/components/DatePicker/examples/DatePicker.md CHANGED
@@ -14,14 +14,15 @@ cssPrefix: pf-v5-c-date-picker
14
14
  <div class="pf-v5-c-date-picker__input">
15
15
  <div class="pf-v5-c-input-group">
16
16
  <div class="pf-v5-c-input-group__item pf-m-fill">
17
- <input
18
- class="pf-v5-c-form-control"
19
- type="text"
20
- value="2020-03-05"
21
- id="basic-input"
22
- name="basic-input"
23
- aria-label="Date picker"
24
- />
17
+ <div class="pf-v5-c-form-control">
18
+ <input
19
+ type="text"
20
+ value="2020-03-05"
21
+ id="basic-input"
22
+ name="basic-input"
23
+ aria-label="Date picker"
24
+ />
25
+ </div>
25
26
  </div>
26
27
  <div class="pf-v5-c-input-group__item">
27
28
  <button
@@ -45,14 +46,15 @@ cssPrefix: pf-v5-c-date-picker
45
46
  <div class="pf-v5-c-date-picker__input">
46
47
  <div class="pf-v5-c-input-group">
47
48
  <div class="pf-v5-c-input-group__item pf-m-fill">
48
- <input
49
- class="pf-v5-c-form-control"
50
- type="text"
51
- value="2020-03-05"
52
- id="helper-text-input"
53
- name="helper-text-input"
54
- aria-label="Date picker"
55
- />
49
+ <div class="pf-v5-c-form-control">
50
+ <input
51
+ type="text"
52
+ value="2020-03-05"
53
+ id="helper-text-input"
54
+ name="helper-text-input"
55
+ aria-label="Date picker"
56
+ />
57
+ </div>
56
58
  </div>
57
59
  <div class="pf-v5-c-input-group__item">
58
60
  <button
@@ -83,15 +85,16 @@ cssPrefix: pf-v5-c-date-picker
83
85
  <div class="pf-v5-c-date-picker__input">
84
86
  <div class="pf-v5-c-input-group">
85
87
  <div class="pf-v5-c-input-group__item pf-m-fill">
86
- <input
87
- class="pf-v5-c-form-control"
88
- aria-invalid="true"
89
- type="text"
90
- value="2020-03-05"
91
- id="invalid-input"
92
- name="invalid-input"
93
- aria-label="Date picker"
94
- />
88
+ <div class="pf-v5-c-form-control">
89
+ <input
90
+ aria-invalid="true"
91
+ type="text"
92
+ value="2020-03-05"
93
+ id="invalid-input"
94
+ name="invalid-input"
95
+ aria-label="Date picker"
96
+ />
97
+ </div>
95
98
  </div>
96
99
  <div class="pf-v5-c-input-group__item">
97
100
  <button
@@ -122,14 +125,15 @@ cssPrefix: pf-v5-c-date-picker
122
125
  <div class="pf-v5-c-date-picker__input">
123
126
  <div class="pf-v5-c-input-group">
124
127
  <div class="pf-v5-c-input-group__item pf-m-fill">
125
- <input
126
- class="pf-v5-c-form-control"
127
- type="text"
128
- value="2020-03-05"
129
- id="expanded-input"
130
- name="expanded-input"
131
- aria-label="Date picker"
132
- />
128
+ <div class="pf-v5-c-form-control">
129
+ <input
130
+ type="text"
131
+ value="2020-03-05"
132
+ id="expanded-input"
133
+ name="expanded-input"
134
+ aria-label="Date picker"
135
+ />
136
+ </div>
133
137
  </div>
134
138
  <div class="pf-v5-c-input-group__item">
135
139
  <button
@@ -157,14 +161,15 @@ cssPrefix: pf-v5-c-date-picker
157
161
  <div class="pf-v5-c-date-picker__input">
158
162
  <div class="pf-v5-c-input-group">
159
163
  <div class="pf-v5-c-input-group__item pf-m-fill">
160
- <input
161
- class="pf-v5-c-form-control"
162
- type="text"
163
- value="November 20, 2020"
164
- id="custom-width-input-input"
165
- name="custom-width-input-input"
166
- aria-label="Date picker"
167
- />
164
+ <div class="pf-v5-c-form-control">
165
+ <input
166
+ type="text"
167
+ value="November 20, 2020"
168
+ id="custom-width-input-input"
169
+ name="custom-width-input-input"
170
+ aria-label="Date picker"
171
+ />
172
+ </div>
168
173
  </div>
169
174
  <div class="pf-v5-c-input-group__item">
170
175
  <button
@@ -191,14 +196,15 @@ cssPrefix: pf-v5-c-date-picker
191
196
  <div class="pf-v5-c-date-picker__input">
192
197
  <div class="pf-v5-c-input-group">
193
198
  <div class="pf-v5-c-input-group__item pf-m-fill">
194
- <input
195
- class="pf-v5-c-form-control"
196
- type="text"
197
- value="November 20, 2020"
198
- id="custom-width-input-based-on-number-of-characters-input"
199
- name="custom-width-input-based-on-number-of-characters-input"
200
- aria-label="Date picker"
201
- />
199
+ <div class="pf-v5-c-form-control">
200
+ <input
201
+ type="text"
202
+ value="November 20, 2020"
203
+ id="custom-width-input-based-on-number-of-characters-input"
204
+ name="custom-width-input-based-on-number-of-characters-input"
205
+ aria-label="Date picker"
206
+ />
207
+ </div>
202
208
  </div>
203
209
  <div class="pf-v5-c-input-group__item">
204
210
  <button