@patternfly/patternfly 5.0.0-alpha.30 → 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 (29) 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/components/Toolbar/toolbar.css +11 -4
  7. package/components/Toolbar/toolbar.scss +11 -5
  8. package/docs/components/CalendarMonth/examples/CalendarMonth.md +268 -252
  9. package/docs/components/DatePicker/examples/DatePicker.md +115 -91
  10. package/docs/components/FileUpload/examples/FileUpload.md +127 -91
  11. package/docs/components/InputGroup/examples/InputGroup.md +219 -169
  12. package/docs/components/NumberInput/examples/NumberInput.md +299 -227
  13. package/docs/components/SearchInput/examples/SearchInput.md +151 -113
  14. package/docs/components/Slider/examples/Slider.md +60 -38
  15. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -132
  16. package/docs/components/Toolbar/examples/Toolbar.md +374 -345
  17. package/docs/demos/DataList/examples/DataList.md +158 -150
  18. package/docs/demos/Form/examples/BasicForms.md +77 -66
  19. package/docs/demos/Masthead/examples/Masthead.md +279 -258
  20. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +21 -17
  21. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +103 -121
  22. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +266 -238
  23. package/docs/demos/Table/examples/Table.md +949 -901
  24. package/docs/demos/Toolbar/examples/Toolbar.md +313 -294
  25. package/package.json +1 -1
  26. package/patternfly-no-reset.css +71 -83
  27. package/patternfly.css +71 -83
  28. package/patternfly.min.css +1 -1
  29. package/patternfly.min.css.map +1 -1
package/docs/components/InputGroup/examples/InputGroup.md CHANGED
@@ -12,205 +12,255 @@ Use the input group to extend form controls by adding text, buttons, selects, et
12
12
 
13
13
  ```html
14
14
  <div class="pf-c-input-group">
15
- <button
16
- class="pf-c-button pf-m-control"
17
- type="button"
18
- id="textAreaButton1"
19
- >Button</button>
20
- <textarea
21
- class="pf-c-form-control"
22
- name="textarea1"
23
- id="textarea1"
24
- aria-label="Textarea with buttons"
25
- aria-describedby="textAreaButton1"
26
- ></textarea>
27
- <button class="pf-c-button pf-m-control" type="button">Button</button>
15
+ <div class="pf-c-input-group__item">
16
+ <button
17
+ class="pf-c-button pf-m-control"
18
+ type="button"
19
+ id="textAreaButton1"
20
+ >Button</button>
21
+ </div>
22
+ <div class="pf-c-input-group__item pf-m-fill">
23
+ <textarea
24
+ class="pf-c-form-control"
25
+ name="textarea1"
26
+ id="textarea1"
27
+ aria-label="Textarea with buttons"
28
+ aria-describedby="textAreaButton1"
29
+ ></textarea>
30
+ </div>
31
+ <div class="pf-c-input-group__item">
32
+ <button class="pf-c-button pf-m-control" type="button">Button</button>
33
+ </div>
28
34
  </div>
29
35
  <br />
30
36
  <div class="pf-c-input-group">
31
- <textarea
32
- class="pf-c-form-control"
33
- name="textarea2"
34
- id="textarea2"
35
- aria-label="Textarea with button"
36
- aria-describedby="textAreaButton2"
37
- ></textarea>
38
- <button
39
- class="pf-c-button pf-m-control"
40
- type="button"
41
- id="textAreaButton2"
42
- >Button</button>
37
+ <div class="pf-c-input-group__item pf-m-fill">
38
+ <textarea
39
+ class="pf-c-form-control"
40
+ name="textarea2"
41
+ id="textarea2"
42
+ aria-label="Textarea with button"
43
+ aria-describedby="textAreaButton2"
44
+ ></textarea>
45
+ </div>
46
+ <div class="pf-c-input-group__item">
47
+ <button
48
+ class="pf-c-button pf-m-control"
49
+ type="button"
50
+ id="textAreaButton2"
51
+ >Button</button>
52
+ </div>
43
53
  </div>
44
54
  <br />
45
55
  <div class="pf-c-input-group">
46
- <button
47
- class="pf-c-button pf-m-control"
48
- type="button"
49
- id="textAreaButton3"
50
- >Button</button>
51
- <button class="pf-c-button pf-m-control" type="button">Button</button>
52
- <textarea
53
- class="pf-c-form-control"
54
- name="textarea3"
55
- id="textarea3"
56
- aria-label="Textarea with buttons"
57
- aria-describedby="textAreaButton3"
58
- ></textarea>
59
- <button class="pf-c-button pf-m-control" type="button">Button</button>
56
+ <div class="pf-c-input-group__item">
57
+ <button
58
+ class="pf-c-button pf-m-control"
59
+ type="button"
60
+ id="textAreaButton3"
61
+ >Button</button>
62
+ </div>
63
+ <div class="pf-c-input-group__item">
64
+ <button class="pf-c-button pf-m-control" type="button">Button</button>
65
+ </div>
66
+ <div class="pf-c-input-group__item pf-m-fill">
67
+ <textarea
68
+ class="pf-c-form-control"
69
+ name="textarea3"
70
+ id="textarea3"
71
+ aria-label="Textarea with buttons"
72
+ aria-describedby="textAreaButton3"
73
+ ></textarea>
74
+ </div>
75
+ <div class="pf-c-input-group__item">
76
+ <button class="pf-c-button pf-m-control" type="button">Button</button>
77
+ </div>
60
78
  </div>
61
79
  <br />
62
80
  <div class="pf-c-input-group">
63
- <div class="pf-c-select" style="width: 100px;">
64
- <span id="select-example-collapsed1-label" hidden>Choose one</span>
81
+ <div class="pf-c-input-group__item">
82
+ <div class="pf-c-select" style="width: 100px;">
83
+ <span id="select-example-collapsed1-label" hidden>Choose one</span>
84
+
85
+ <button
86
+ class="pf-c-select__toggle"
87
+ type="button"
88
+ id="select-example-collapsed1-toggle"
89
+ aria-haspopup="true"
90
+ aria-expanded="false"
91
+ aria-labelledby="select-example-collapsed1-label select-example-collapsed1-toggle"
92
+ >
93
+ <div class="pf-c-select__toggle-wrapper">
94
+ <span class="pf-c-select__toggle-text">Select</span>
95
+ </div>
96
+ <span class="pf-c-select__toggle-arrow">
97
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
98
+ </span>
99
+ </button>
65
100
 
101
+ <ul
102
+ class="pf-c-select__menu"
103
+ role="listbox"
104
+ aria-labelledby="select-example-collapsed1-label"
105
+ hidden
106
+ style="width: 100px;"
107
+ >
108
+ <li role="presentation">
109
+ <button class="pf-c-select__menu-item" role="option">Running</button>
110
+ </li>
111
+ <li role="presentation">
112
+ <button
113
+ class="pf-c-select__menu-item pf-m-selected"
114
+ role="option"
115
+ aria-selected="true"
116
+ >
117
+ Stopped
118
+ <span class="pf-c-select__menu-item-icon">
119
+ <i class="fas fa-check" aria-hidden="true"></i>
120
+ </span>
121
+ </button>
122
+ </li>
123
+ <li role="presentation">
124
+ <button class="pf-c-select__menu-item" role="option">Down</button>
125
+ </li>
126
+ <li role="presentation">
127
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
128
+ </li>
129
+ <li role="presentation">
130
+ <button class="pf-c-select__menu-item" role="option">Needs maintenance</button>
131
+ </li>
132
+ </ul>
133
+ </div>
134
+ </div>
135
+ <div class="pf-c-input-group__item pf-m-fill">
136
+ <input
137
+ class="pf-c-form-control"
138
+ type="text"
139
+ id="textInput4"
140
+ name="textInput4"
141
+ aria-label="Input with select and button"
142
+ aria-describedby="inputSelectButton1"
143
+ />
144
+ </div>
145
+ <div class="pf-c-input-group__item">
66
146
  <button
67
- class="pf-c-select__toggle"
147
+ class="pf-c-button pf-m-control"
68
148
  type="button"
69
- id="select-example-collapsed1-toggle"
70
- aria-haspopup="true"
71
- aria-expanded="false"
72
- aria-labelledby="select-example-collapsed1-label select-example-collapsed1-toggle"
73
- >
74
- <div class="pf-c-select__toggle-wrapper">
75
- <span class="pf-c-select__toggle-text">Select</span>
76
- </div>
77
- <span class="pf-c-select__toggle-arrow">
78
- <i class="fas fa-caret-down" aria-hidden="true"></i>
79
- </span>
80
- </button>
81
-
82
- <ul
83
- class="pf-c-select__menu"
84
- role="listbox"
85
- aria-labelledby="select-example-collapsed1-label"
86
- hidden
87
- style="width: 100px;"
88
- >
89
- <li role="presentation">
90
- <button class="pf-c-select__menu-item" role="option">Running</button>
91
- </li>
92
- <li role="presentation">
93
- <button
94
- class="pf-c-select__menu-item pf-m-selected"
95
- role="option"
96
- aria-selected="true"
97
- >
98
- Stopped
99
- <span class="pf-c-select__menu-item-icon">
100
- <i class="fas fa-check" aria-hidden="true"></i>
101
- </span>
102
- </button>
103
- </li>
104
- <li role="presentation">
105
- <button class="pf-c-select__menu-item" role="option">Down</button>
106
- </li>
107
- <li role="presentation">
108
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
109
- </li>
110
- <li role="presentation">
111
- <button class="pf-c-select__menu-item" role="option">Needs maintenance</button>
112
- </li>
113
- </ul>
114
- </div>
115
- <input
116
- class="pf-c-form-control"
117
- type="text"
118
- id="textInput4"
119
- name="textInput4"
120
- aria-label="Input with select and button"
121
- aria-describedby="inputSelectButton1"
122
- />
123
- <button
124
- class="pf-c-button pf-m-control"
125
- type="button"
126
- id="inputSelectButton1"
127
- >Button</button>
149
+ id="inputSelectButton1"
150
+ >Button</button>
151
+ </div>
128
152
  </div>
129
153
  <br />
130
154
  <div class="pf-c-input-group">
131
- <span class="pf-c-input-group__text">
132
- <i class="fas fa-dollar-sign" aria-hidden="true"></i>
133
- </span>
134
- <input
135
- class="pf-c-form-control"
136
- type="number"
137
- id="textInput5"
138
- name="textInput5"
139
- aria-label=" Dollar amount input example"
140
- />
141
- <span class="pf-c-input-group__text">.00</span>
155
+ <div class="pf-c-input-group__item pf-m-box">
156
+ <span class="pf-c-input-group__text">
157
+ <i class="fas fa-dollar-sign" aria-hidden="true"></i>
158
+ </span>
159
+ </div>
160
+ <div class="pf-c-input-group__item pf-m-fill">
161
+ <input
162
+ class="pf-c-form-control"
163
+ type="number"
164
+ id="textInput5"
165
+ name="textInput5"
166
+ aria-label=" Dollar amount input example"
167
+ />
168
+ </div>
169
+ <div class="pf-c-input-group__item pf-m-box">
170
+ <span class="pf-c-input-group__text">.00</span>
171
+ </div>
142
172
  </div>
143
173
  <br />
144
174
  <div class="pf-c-input-group">
145
- <input
146
- class="pf-c-form-control"
147
- type="email"
148
- id="textInput6"
149
- name="textInput6"
150
- aria-label="Email input field"
151
- aria-describedby="email-example"
152
- />
153
- <span class="pf-c-input-group__text" id="email-example">@example.com</span>
175
+ <div class="pf-c-input-group__item pf-m-fill">
176
+ <input
177
+ class="pf-c-form-control"
178
+ type="email"
179
+ id="textInput6"
180
+ name="textInput6"
181
+ aria-label="Email input field"
182
+ aria-describedby="email-example"
183
+ />
184
+ </div>
185
+ <div class="pf-c-input-group__item pf-m-box">
186
+ <span class="pf-c-input-group__text" id="email-example">@example.com</span>
187
+ </div>
154
188
  </div>
155
189
  <br />
156
190
  <div class="pf-c-input-group">
157
- <span class="pf-c-input-group__text">
158
- <i class="fas fa-at" aria-hidden="true"></i>
159
- </span>
160
- <input
161
- class="pf-c-form-control"
162
- required
163
- type="email"
164
- id="textInput7"
165
- name="textInput7"
166
- aria-invalid="true"
167
- aria-label="Error state username example"
168
- />
191
+ <div class="pf-c-input-group__item pf-m-box">
192
+ <span class="pf-c-input-group__text">
193
+ <i class="fas fa-at" aria-hidden="true"></i>
194
+ </span>
195
+ </div>
196
+ <div class="pf-c-input-group__item pf-m-fill">
197
+ <input
198
+ class="pf-c-form-control"
199
+ required
200
+ type="email"
201
+ id="textInput7"
202
+ name="textInput7"
203
+ aria-invalid="true"
204
+ aria-label="Error state username example"
205
+ />
206
+ </div>
169
207
  </div>
170
208
  <br />
171
209
  <div class="pf-c-input-group">
172
- <input
173
- class="pf-c-form-control"
174
- type="text"
175
- id="textInput13"
176
- name="textInput13"
177
- aria-label="Input example with popover"
178
- />
179
- <button
180
- class="pf-c-button pf-m-control"
181
- type="button"
182
- aria-label="Popover for input"
183
- >
184
- <i class="fas fa-question-circle" aria-hidden="true"></i>
185
- </button>
210
+ <div class="pf-c-input-group__item pf-m-fill">
211
+ <input
212
+ class="pf-c-form-control"
213
+ type="text"
214
+ id="textInput13"
215
+ name="textInput13"
216
+ aria-label="Input example with popover"
217
+ />
218
+ </div>
219
+ <div class="pf-c-input-group__item">
220
+ <button
221
+ class="pf-c-button pf-m-control"
222
+ type="button"
223
+ aria-label="Popover for input"
224
+ >
225
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
226
+ </button>
227
+ </div>
186
228
  </div>
187
229
  <br />
188
230
  <div class="pf-c-input-group">
189
- <input
190
- class="pf-c-form-control"
191
- type="text"
192
- id="textInput12"
193
- name="textInput12"
194
- aria-label="Input example with popover"
195
- />
196
- <button
197
- class="pf-c-button pf-m-plain"
198
- type="button"
199
- aria-label="Popover for input"
200
- >
201
- <i class="fas fa-question-circle" aria-hidden="true"></i>
202
- </button>
231
+ <div class="pf-c-input-group__item pf-m-fill">
232
+ <input
233
+ class="pf-c-form-control"
234
+ type="text"
235
+ id="textInput12"
236
+ name="textInput12"
237
+ aria-label="Input example with popover"
238
+ />
239
+ </div>
240
+ <div class="pf-c-input-group__item pf-m-plain">
241
+ <button
242
+ class="pf-c-button pf-m-plain"
243
+ type="button"
244
+ aria-label="Popover for input"
245
+ >
246
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
247
+ </button>
248
+ </div>
203
249
  </div>
204
250
  <br />
205
251
  <div class="pf-c-input-group">
206
- <input
207
- class="pf-c-form-control"
208
- type="number"
209
- id="textInput14"
210
- name="textInput14"
211
- aria-label="Input example with plain unit"
212
- />
213
- <span class="pf-c-input-group__text pf-m-plain">%</span>
252
+ <div class="pf-c-input-group__item pf-m-fill">
253
+ <input
254
+ class="pf-c-form-control"
255
+ type="number"
256
+ id="textInput14"
257
+ name="textInput14"
258
+ aria-label="Input example with plain unit"
259
+ />
260
+ </div>
261
+ <div class="pf-c-input-group__item pf-m-box pf-m-plain">
262
+ <span class="pf-c-input-group__text">%</span>
263
+ </div>
214
264
  </div>
215
265
 
216
266
  ```