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

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 (27) hide show
  1. package/components/InputGroup/input-group.css +61 -85
  2. package/components/InputGroup/input-group.scss +55 -61
  3. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  4. package/components/OptionsMenu/options-menu.css +0 -5
  5. package/components/OptionsMenu/options-menu.scss +0 -6
  6. package/docs/components/CalendarMonth/examples/CalendarMonth.md +268 -252
  7. package/docs/components/DatePicker/examples/DatePicker.md +115 -91
  8. package/docs/components/FileUpload/examples/FileUpload.md +127 -91
  9. package/docs/components/InputGroup/examples/InputGroup.md +219 -169
  10. package/docs/components/NumberInput/examples/NumberInput.md +299 -227
  11. package/docs/components/SearchInput/examples/SearchInput.md +151 -113
  12. package/docs/components/Slider/examples/Slider.md +60 -38
  13. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -132
  14. package/docs/components/Toolbar/examples/Toolbar.md +374 -345
  15. package/docs/demos/DataList/examples/DataList.md +158 -150
  16. package/docs/demos/Form/examples/BasicForms.md +77 -66
  17. package/docs/demos/Masthead/examples/Masthead.md +279 -258
  18. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +21 -17
  19. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +103 -121
  20. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +266 -232
  21. package/docs/demos/Table/examples/Table.md +950 -902
  22. package/docs/demos/Toolbar/examples/Toolbar.md +313 -294
  23. package/package.json +1 -1
  24. package/patternfly-no-reset.css +60 -79
  25. package/patternfly.css +60 -79
  26. package/patternfly.min.css +1 -1
  27. 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,21 +44,25 @@ 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>
58
66
  </div>
59
67
  </div>
60
68
  <div class="pf-c-date-picker__helper-text">Select a date.</div>
@@ -68,22 +76,26 @@ cssPrefix: pf-c-date-picker
68
76
  <div class="pf-c-date-picker">
69
77
  <div class="pf-c-date-picker__input">
70
78
  <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>
79
+ <div class="pf-c-input-group__item pf-m-fill">
80
+ <input
81
+ class="pf-c-form-control"
82
+ aria-invalid="true"
83
+ type="text"
84
+ value="2020-03-05"
85
+ id="invalid-input"
86
+ name="invalid-input"
87
+ aria-label="Date picker"
88
+ />
89
+ </div>
90
+ <div class="pf-c-input-group__item">
91
+ <button
92
+ class="pf-c-button pf-m-control"
93
+ type="button"
94
+ aria-label="Toggle date picker"
95
+ >
96
+ <i class="fas fa-calendar-alt" aria-hidden="true"></i>
97
+ </button>
98
+ </div>
87
99
  </div>
88
100
  </div>
89
101
  <div class="pf-c-date-picker__helper-text pf-m-error">Invalid date</div>
@@ -97,21 +109,25 @@ cssPrefix: pf-c-date-picker
97
109
  <div class="pf-c-date-picker">
98
110
  <div class="pf-c-date-picker__input">
99
111
  <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>
112
+ <div class="pf-c-input-group__item pf-m-fill">
113
+ <input
114
+ class="pf-c-form-control"
115
+ type="text"
116
+ value="2020-03-05"
117
+ id="expanded-input"
118
+ name="expanded-input"
119
+ aria-label="Date picker"
120
+ />
121
+ </div>
122
+ <div class="pf-c-input-group__item">
123
+ <button
124
+ class="pf-c-button pf-m-control"
125
+ type="button"
126
+ aria-label="Toggle date picker"
127
+ >
128
+ <i class="fas fa-calendar-alt" aria-hidden="true"></i>
129
+ </button>
130
+ </div>
115
131
  </div>
116
132
  </div>
117
133
  <div class="pf-c-date-picker__calendar">Calendar</div>
@@ -128,21 +144,25 @@ cssPrefix: pf-c-date-picker
128
144
  >
129
145
  <div class="pf-c-date-picker__input">
130
146
  <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>
147
+ <div class="pf-c-input-group__item pf-m-fill">
148
+ <input
149
+ class="pf-c-form-control"
150
+ type="text"
151
+ value="November 20, 2020"
152
+ id="custom-width-input-input"
153
+ name="custom-width-input-input"
154
+ aria-label="Date picker"
155
+ />
156
+ </div>
157
+ <div class="pf-c-input-group__item">
158
+ <button
159
+ class="pf-c-button pf-m-control"
160
+ type="button"
161
+ aria-label="Toggle date picker"
162
+ >
163
+ <i class="fas fa-calendar-alt" aria-hidden="true"></i>
164
+ </button>
165
+ </div>
146
166
  </div>
147
167
  </div>
148
168
  </div>
@@ -158,21 +178,25 @@ cssPrefix: pf-c-date-picker
158
178
  >
159
179
  <div class="pf-c-date-picker__input">
160
180
  <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>
181
+ <div class="pf-c-input-group__item pf-m-fill">
182
+ <input
183
+ class="pf-c-form-control"
184
+ type="text"
185
+ value="November 20, 2020"
186
+ id="custom-width-input-based-on-number-of-characters-input"
187
+ name="custom-width-input-based-on-number-of-characters-input"
188
+ aria-label="Date picker"
189
+ />
190
+ </div>
191
+ <div class="pf-c-input-group__item">
192
+ <button
193
+ class="pf-c-button pf-m-control"
194
+ type="button"
195
+ aria-label="Toggle date picker"
196
+ >
197
+ <i class="fas fa-calendar-alt" aria-hidden="true"></i>
198
+ </button>
199
+ </div>
176
200
  </div>
177
201
  </div>
178
202
  </div>
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
@@ -205,22 +235,28 @@ cssPrefix: pf-c-file-upload
205
235
  <div class="pf-c-file-upload pf-m-loading">
206
236
  <div class="pf-c-file-upload__file-select">
207
237
  <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>
238
+ <div class="pf-c-input-group__item pf-m-fill">
239
+ <input
240
+ class="pf-c-form-control"
241
+ id="file-upload-loading-text-input"
242
+ name="file-upload-loading"
243
+ aria-label="Read only filename"
244
+ readonly
245
+ value="Sample.png"
246
+ aria-describedby="file-upload-loading-browse"
247
+ />
248
+ </div>
249
+ <div class="pf-c-input-group__item">
250
+ <button
251
+ class="pf-c-button pf-m-control"
252
+ type="button"
253
+ disabled
254
+ id="file-upload-loading-browse"
255
+ >Upload</button>
256
+ </div>
257
+ <div class="pf-c-input-group__item">
258
+ <button class="pf-c-button pf-m-control" type="button">Clear</button>
259
+ </div>
224
260
  </div>
225
261
  </div>
226
262
  <div class="pf-c-file-upload__file-details">