@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/components/DatePicker/examples/DatePicker.md CHANGED
@@ -13,21 +13,25 @@ cssPrefix: pf-c-date-picker
13
13
  <div class="pf-c-date-picker">
14
14
  <div class="pf-c-date-picker__input">
15
15
  <div class="pf-c-input-group">
16
- <input
17
- class="pf-c-form-control"
18
- type="text"
19
- value="2020-03-05"
20
- id="basic-input"
21
- name="basic-input"
22
- aria-label="Date picker"
23
- />
24
- <button
25
- class="pf-c-button pf-m-control"
26
- type="button"
27
- aria-label="Toggle date picker"
28
- >
29
- <i class="fas fa-calendar-alt" aria-hidden="true"></i>
30
- </button>
16
+ <div class="pf-c-input-group__item pf-m-fill">
17
+ <input
18
+ class="pf-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
+ />
25
+ </div>
26
+ <div class="pf-c-input-group__item">
27
+ <button
28
+ class="pf-c-button pf-m-control"
29
+ type="button"
30
+ aria-label="Toggle date picker"
31
+ >
32
+ <i class="fas fa-calendar-alt" aria-hidden="true"></i>
33
+ </button>
34
+ </div>
31
35
  </div>
32
36
  </div>
33
37
  </div>
@@ -40,24 +44,34 @@ cssPrefix: pf-c-date-picker
40
44
  <div class="pf-c-date-picker">
41
45
  <div class="pf-c-date-picker__input">
42
46
  <div class="pf-c-input-group">
43
- <input
44
- class="pf-c-form-control"
45
- type="text"
46
- value="2020-03-05"
47
- id="helper-text-input"
48
- name="helper-text-input"
49
- aria-label="Date picker"
50
- />
51
- <button
52
- class="pf-c-button pf-m-control"
53
- type="button"
54
- aria-label="Toggle date picker"
55
- >
56
- <i class="fas fa-calendar-alt" aria-hidden="true"></i>
57
- </button>
47
+ <div class="pf-c-input-group__item pf-m-fill">
48
+ <input
49
+ class="pf-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
+ />
56
+ </div>
57
+ <div class="pf-c-input-group__item">
58
+ <button
59
+ class="pf-c-button pf-m-control"
60
+ type="button"
61
+ aria-label="Toggle date picker"
62
+ >
63
+ <i class="fas fa-calendar-alt" aria-hidden="true"></i>
64
+ </button>
65
+ </div>
66
+ </div>
67
+ </div>
68
+ <div class="pf-c-date-picker__helper-text">
69
+ <div class="pf-c-helper-text">
70
+ <div class="pf-c-helper-text__item">
71
+ <span class="pf-c-helper-text__item-text">Select a date.</span>
72
+ </div>
58
73
  </div>
59
74
  </div>
60
- <div class="pf-c-date-picker__helper-text">Select a date.</div>
61
75
  </div>
62
76
 
63
77
  ```
@@ -68,25 +82,35 @@ cssPrefix: pf-c-date-picker
68
82
  <div class="pf-c-date-picker">
69
83
  <div class="pf-c-date-picker__input">
70
84
  <div class="pf-c-input-group">
71
- <input
72
- class="pf-c-form-control"
73
- aria-invalid="true"
74
- type="text"
75
- value="2020-03-05"
76
- id="invalid-input"
77
- name="invalid-input"
78
- aria-label="Date picker"
79
- />
80
- <button
81
- class="pf-c-button pf-m-control"
82
- type="button"
83
- aria-label="Toggle date picker"
84
- >
85
- <i class="fas fa-calendar-alt" aria-hidden="true"></i>
86
- </button>
85
+ <div class="pf-c-input-group__item pf-m-fill">
86
+ <input
87
+ class="pf-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
+ />
95
+ </div>
96
+ <div class="pf-c-input-group__item">
97
+ <button
98
+ class="pf-c-button pf-m-control"
99
+ type="button"
100
+ aria-label="Toggle date picker"
101
+ >
102
+ <i class="fas fa-calendar-alt" aria-hidden="true"></i>
103
+ </button>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ <div class="pf-c-date-picker__helper-text">
108
+ <div class="pf-c-helper-text">
109
+ <div class="pf-c-helper-text__item pf-m-error">
110
+ <span class="pf-c-helper-text__item-text">Invalid date</span>
111
+ </div>
87
112
  </div>
88
113
  </div>
89
- <div class="pf-c-date-picker__helper-text pf-m-error">Invalid date</div>
90
114
  </div>
91
115
 
92
116
  ```
@@ -97,21 +121,25 @@ cssPrefix: pf-c-date-picker
97
121
  <div class="pf-c-date-picker">
98
122
  <div class="pf-c-date-picker__input">
99
123
  <div class="pf-c-input-group">
100
- <input
101
- class="pf-c-form-control"
102
- type="text"
103
- value="2020-03-05"
104
- id="expanded-input"
105
- name="expanded-input"
106
- aria-label="Date picker"
107
- />
108
- <button
109
- class="pf-c-button pf-m-control"
110
- type="button"
111
- aria-label="Toggle date picker"
112
- >
113
- <i class="fas fa-calendar-alt" aria-hidden="true"></i>
114
- </button>
124
+ <div class="pf-c-input-group__item pf-m-fill">
125
+ <input
126
+ class="pf-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
+ />
133
+ </div>
134
+ <div class="pf-c-input-group__item">
135
+ <button
136
+ class="pf-c-button pf-m-control"
137
+ type="button"
138
+ aria-label="Toggle date picker"
139
+ >
140
+ <i class="fas fa-calendar-alt" aria-hidden="true"></i>
141
+ </button>
142
+ </div>
115
143
  </div>
116
144
  </div>
117
145
  <div class="pf-c-date-picker__calendar">Calendar</div>
@@ -128,21 +156,25 @@ cssPrefix: pf-c-date-picker
128
156
  >
129
157
  <div class="pf-c-date-picker__input">
130
158
  <div class="pf-c-input-group">
131
- <input
132
- class="pf-c-form-control"
133
- type="text"
134
- value="November 20, 2020"
135
- id="custom-width-input-input"
136
- name="custom-width-input-input"
137
- aria-label="Date picker"
138
- />
139
- <button
140
- class="pf-c-button pf-m-control"
141
- type="button"
142
- aria-label="Toggle date picker"
143
- >
144
- <i class="fas fa-calendar-alt" aria-hidden="true"></i>
145
- </button>
159
+ <div class="pf-c-input-group__item pf-m-fill">
160
+ <input
161
+ class="pf-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
+ />
168
+ </div>
169
+ <div class="pf-c-input-group__item">
170
+ <button
171
+ class="pf-c-button pf-m-control"
172
+ type="button"
173
+ aria-label="Toggle date picker"
174
+ >
175
+ <i class="fas fa-calendar-alt" aria-hidden="true"></i>
176
+ </button>
177
+ </div>
146
178
  </div>
147
179
  </div>
148
180
  </div>
@@ -158,21 +190,25 @@ cssPrefix: pf-c-date-picker
158
190
  >
159
191
  <div class="pf-c-date-picker__input">
160
192
  <div class="pf-c-input-group">
161
- <input
162
- class="pf-c-form-control"
163
- type="text"
164
- value="November 20, 2020"
165
- id="custom-width-input-based-on-number-of-characters-input"
166
- name="custom-width-input-based-on-number-of-characters-input"
167
- aria-label="Date picker"
168
- />
169
- <button
170
- class="pf-c-button pf-m-control"
171
- type="button"
172
- aria-label="Toggle date picker"
173
- >
174
- <i class="fas fa-calendar-alt" aria-hidden="true"></i>
175
- </button>
193
+ <div class="pf-c-input-group__item pf-m-fill">
194
+ <input
195
+ class="pf-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
+ />
202
+ </div>
203
+ <div class="pf-c-input-group__item">
204
+ <button
205
+ class="pf-c-button pf-m-control"
206
+ type="button"
207
+ aria-label="Toggle date picker"
208
+ >
209
+ <i class="fas fa-calendar-alt" aria-hidden="true"></i>
210
+ </button>
211
+ </div>
176
212
  </div>
177
213
  </div>
178
214
  </div>
@@ -190,6 +226,5 @@ cssPrefix: pf-c-date-picker
190
226
  | `.pf-c-date-picker__helper-text` | `<div>` | Initiates the date picker helper text. |
191
227
  | `.pf-c-date-picker__calendar` | `<div>` | Initiates an optional date picker calendar container. **Note:** Required in the react date picker component. |
192
228
  | `.pf-m-top` | `.pf-c-date-picker` | Modifies to display the calendar above the date picker. |
193
- | `.pf-m-error` | `.pf-c-date-picker__helper-text` | Modifies the helper text for the invalid/error state. |
194
229
  | `.pf-m-align-right` | `.pf-c-date-picker__calendar` | Modifies the calendar to align the calendar to the right edge of the date picker. |
195
230
  | `.pf-m-static` | `.pf-c-date-picker__calendar` | Modifies the calendar to be statically positioned to support custom positioning. |
package/docs/components/FileUpload/examples/FileUpload.md CHANGED
@@ -10,21 +10,27 @@ cssPrefix: pf-c-file-upload
10
10
  <div class="pf-c-file-upload">
11
11
  <div class="pf-c-file-upload__file-select">
12
12
  <div class="pf-c-input-group">
13
- <input
14
- class="pf-c-form-control"
15
- id="basic-file-upload-text-input"
16
- name="basic-file-upload-text-input"
17
- aria-label="Drag and drop a file or upload one"
18
- readonly
19
- placeholder="Drag and drop a file or upload one"
20
- aria-describedby="basic-file-upload-browse"
21
- />
22
- <button
23
- class="pf-c-button pf-m-control"
24
- type="button"
25
- id="basic-file-upload-browse"
26
- >Upload</button>
27
- <button class="pf-c-button pf-m-control" type="button" disabled>Clear</button>
13
+ <div class="pf-c-input-group__item pf-m-fill">
14
+ <input
15
+ class="pf-c-form-control"
16
+ id="basic-file-upload-text-input"
17
+ name="basic-file-upload-text-input"
18
+ aria-label="Drag and drop a file or upload one"
19
+ readonly
20
+ placeholder="Drag and drop a file or upload one"
21
+ aria-describedby="basic-file-upload-browse"
22
+ />
23
+ </div>
24
+ <div class="pf-c-input-group__item">
25
+ <button
26
+ class="pf-c-button pf-m-control"
27
+ type="button"
28
+ id="basic-file-upload-browse"
29
+ >Upload</button>
30
+ </div>
31
+ <div class="pf-c-input-group__item">
32
+ <button class="pf-c-button pf-m-control" type="button" disabled>Clear</button>
33
+ </div>
28
34
  </div>
29
35
  </div>
30
36
  <div class="pf-c-file-upload__file-details">
@@ -45,21 +51,27 @@ cssPrefix: pf-c-file-upload
45
51
  <div class="pf-c-file-upload">
46
52
  <div class="pf-c-file-upload__file-select">
47
53
  <div class="pf-c-input-group">
48
- <input
49
- class="pf-c-form-control"
50
- id="browsed-file-upload-complete-text-input"
51
- name="browsed-file-upload-complete-text-input"
52
- aria-label="Read only filename"
53
- readonly
54
- value="Read only filename"
55
- aria-describedby="browsed-file-upload-complete-browse"
56
- />
57
- <button
58
- class="pf-c-button pf-m-control"
59
- type="button"
60
- id="browsed-file-upload-complete-browse"
61
- >Upload</button>
62
- <button class="pf-c-button pf-m-control" type="button">Clear</button>
54
+ <div class="pf-c-input-group__item pf-m-fill">
55
+ <input
56
+ class="pf-c-form-control"
57
+ id="browsed-file-upload-complete-text-input"
58
+ name="browsed-file-upload-complete-text-input"
59
+ aria-label="Read only filename"
60
+ readonly
61
+ value="Read only filename"
62
+ aria-describedby="browsed-file-upload-complete-browse"
63
+ />
64
+ </div>
65
+ <div class="pf-c-input-group__item">
66
+ <button
67
+ class="pf-c-button pf-m-control"
68
+ type="button"
69
+ id="browsed-file-upload-complete-browse"
70
+ >Upload</button>
71
+ </div>
72
+ <div class="pf-c-input-group__item">
73
+ <button class="pf-c-button pf-m-control" type="button">Clear</button>
74
+ </div>
63
75
  </div>
64
76
  </div>
65
77
  <div class="pf-c-file-upload__file-details" readonly>
@@ -83,21 +95,27 @@ cssPrefix: pf-c-file-upload
83
95
  <div class="pf-c-file-upload">
84
96
  <div class="pf-c-file-upload__file-select">
85
97
  <div class="pf-c-input-group">
86
- <input
87
- class="pf-c-form-control"
88
- id="drop-file-text-input"
89
- name="drop-file-text-input"
90
- aria-label="Read only filename"
91
- readonly
92
- value="Sample.txt"
93
- aria-describedby="drop-file-browse"
94
- />
95
- <button
96
- class="pf-c-button pf-m-control"
97
- type="button"
98
- id="drop-file-browse"
99
- >Upload</button>
100
- <button class="pf-c-button pf-m-control" type="button">Clear</button>
98
+ <div class="pf-c-input-group__item pf-m-fill">
99
+ <input
100
+ class="pf-c-form-control"
101
+ id="drop-file-text-input"
102
+ name="drop-file-text-input"
103
+ aria-label="Read only filename"
104
+ readonly
105
+ value="Sample.txt"
106
+ aria-describedby="drop-file-browse"
107
+ />
108
+ </div>
109
+ <div class="pf-c-input-group__item">
110
+ <button
111
+ class="pf-c-button pf-m-control"
112
+ type="button"
113
+ id="drop-file-browse"
114
+ >Upload</button>
115
+ </div>
116
+ <div class="pf-c-input-group__item">
117
+ <button class="pf-c-button pf-m-control" type="button">Clear</button>
118
+ </div>
101
119
  </div>
102
120
  </div>
103
121
  <div class="pf-c-file-upload__file-details">
@@ -120,21 +138,27 @@ cssPrefix: pf-c-file-upload
120
138
  <div class="pf-c-file-upload pf-m-drag-hover">
121
139
  <div class="pf-c-file-upload__file-select">
122
140
  <div class="pf-c-input-group">
123
- <input
124
- class="pf-c-form-control"
125
- id="drag-file-hover-component-text-input"
126
- name="drag-file-hover-component-text-input"
127
- aria-label="Drag and drop a file or upload one"
128
- readonly
129
- placeholder="Drag and drop a file or upload one"
130
- aria-describedby="drag-file-hover-component-browse"
131
- />
132
- <button
133
- class="pf-c-button pf-m-control"
134
- type="button"
135
- id="drag-file-hover-component-browse"
136
- >Upload</button>
137
- <button class="pf-c-button pf-m-control" type="button" disabled>Clear</button>
141
+ <div class="pf-c-input-group__item pf-m-fill">
142
+ <input
143
+ class="pf-c-form-control"
144
+ id="drag-file-hover-component-text-input"
145
+ name="drag-file-hover-component-text-input"
146
+ aria-label="Drag and drop a file or upload one"
147
+ readonly
148
+ placeholder="Drag and drop a file or upload one"
149
+ aria-describedby="drag-file-hover-component-browse"
150
+ />
151
+ </div>
152
+ <div class="pf-c-input-group__item">
153
+ <button
154
+ class="pf-c-button pf-m-control"
155
+ type="button"
156
+ id="drag-file-hover-component-browse"
157
+ >Upload</button>
158
+ </div>
159
+ <div class="pf-c-input-group__item">
160
+ <button class="pf-c-button pf-m-control" type="button" disabled>Clear</button>
161
+ </div>
138
162
  </div>
139
163
  </div>
140
164
  <div class="pf-c-file-upload__file-details">
@@ -157,21 +181,27 @@ cssPrefix: pf-c-file-upload
157
181
  <div class="pf-c-file-upload">
158
182
  <div class="pf-c-file-upload__file-select">
159
183
  <div class="pf-c-input-group">
160
- <input
161
- class="pf-c-form-control"
162
- id="file-upload-error-text-input"
163
- name="file-upload-error-text-input"
164
- aria-label="File upload error"
165
- required
166
- value="Sample.png"
167
- aria-describedby="file-upload-error-browse"
168
- />
169
- <button
170
- class="pf-c-button pf-m-control"
171
- type="button"
172
- id="file-upload-error-browse"
173
- >Upload</button>
174
- <button class="pf-c-button pf-m-control" type="button">Clear</button>
184
+ <div class="pf-c-input-group__item pf-m-fill">
185
+ <input
186
+ class="pf-c-form-control"
187
+ id="file-upload-error-text-input"
188
+ name="file-upload-error-text-input"
189
+ aria-label="File upload error"
190
+ required
191
+ value="Sample.png"
192
+ aria-describedby="file-upload-error-browse"
193
+ />
194
+ </div>
195
+ <div class="pf-c-input-group__item">
196
+ <button
197
+ class="pf-c-button pf-m-control"
198
+ type="button"
199
+ id="file-upload-error-browse"
200
+ >Upload</button>
201
+ </div>
202
+ <div class="pf-c-input-group__item">
203
+ <button class="pf-c-button pf-m-control" type="button">Clear</button>
204
+ </div>
175
205
  </div>
176
206
  </div>
177
207
  <div
@@ -189,11 +219,15 @@ cssPrefix: pf-c-file-upload
189
219
  ></textarea>
190
220
  </div>
191
221
  </div>
192
- <p
193
- class="pf-c-form__helper-text pf-m-error"
194
- id="textAreaHelperText1"
195
- aria-live="polite"
196
- >We don't support this file type. Try again with a different file type.</p>
222
+ <div class="pf-c-form__helper-text" aria-live="polite">
223
+ <div class="pf-c-helper-text">
224
+ <div class="pf-c-helper-text__item pf-m-error" id="textAreaHelperText1">
225
+ <span
226
+ class="pf-c-helper-text__item-text"
227
+ >We don't support this file type. Try again with a different file type.</span>
228
+ </div>
229
+ </div>
230
+ </div>
197
231
  </div>
198
232
  </form>
199
233
 
@@ -205,22 +239,28 @@ cssPrefix: pf-c-file-upload
205
239
  <div class="pf-c-file-upload pf-m-loading">
206
240
  <div class="pf-c-file-upload__file-select">
207
241
  <div class="pf-c-input-group">
208
- <input
209
- class="pf-c-form-control"
210
- id="file-upload-loading-text-input"
211
- name="file-upload-loading"
212
- aria-label="Read only filename"
213
- readonly
214
- value="Sample.png"
215
- aria-describedby="file-upload-loading-browse"
216
- />
217
- <button
218
- class="pf-c-button pf-m-control"
219
- type="button"
220
- disabled
221
- id="file-upload-loading-browse"
222
- >Upload</button>
223
- <button class="pf-c-button pf-m-control" type="button">Clear</button>
242
+ <div class="pf-c-input-group__item pf-m-fill">
243
+ <input
244
+ class="pf-c-form-control"
245
+ id="file-upload-loading-text-input"
246
+ name="file-upload-loading"
247
+ aria-label="Read only filename"
248
+ readonly
249
+ value="Sample.png"
250
+ aria-describedby="file-upload-loading-browse"
251
+ />
252
+ </div>
253
+ <div class="pf-c-input-group__item">
254
+ <button
255
+ class="pf-c-button pf-m-control"
256
+ type="button"
257
+ disabled
258
+ id="file-upload-loading-browse"
259
+ >Upload</button>
260
+ </div>
261
+ <div class="pf-c-input-group__item">
262
+ <button class="pf-c-button pf-m-control" type="button">Clear</button>
263
+ </div>
224
264
  </div>
225
265
  </div>
226
266
  <div class="pf-c-file-upload__file-details">