@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/demos/PasswordStrength/examples/PasswordStrength.md CHANGED
@@ -26,23 +26,27 @@ section: demos
26
26
  </div>
27
27
  <div class="pf-c-form__group-control">
28
28
  <div class="pf-c-input-group">
29
- <input
30
- class="pf-c-form-control"
31
- required
32
- type="text"
33
- id="password-strength-demo--initial-password"
34
- name="password-strength-demo--initial-password"
35
- aria-label="Password input"
36
- value
37
- placeholder="Password"
38
- />
39
- <button
40
- class="pf-c-button pf-m-control"
41
- type="button"
42
- aria-label="Show password"
43
- >
44
- <i class="fas fa-eye-slash" aria-hidden="true"></i>
45
- </button>
29
+ <div class="pf-c-input-group__item pf-m-fill">
30
+ <input
31
+ class="pf-c-form-control"
32
+ required
33
+ type="text"
34
+ id="password-strength-demo--initial-password"
35
+ name="password-strength-demo--initial-password"
36
+ aria-label="Password input"
37
+ value
38
+ placeholder="Password"
39
+ />
40
+ </div>
41
+ <div class="pf-c-input-group__item">
42
+ <button
43
+ class="pf-c-button pf-m-control"
44
+ type="button"
45
+ aria-label="Show password"
46
+ >
47
+ <i class="fas fa-eye-slash" aria-hidden="true"></i>
48
+ </button>
49
+ </div>
46
50
  </div>
47
51
  <div class="pf-c-form__helper-text">
48
52
  <div class="pf-c-helper-text">
@@ -80,77 +84,47 @@ section: demos
80
84
 
81
85
  ### Invalid password
82
86
 
83
- ```html
84
- <form class="pf-c-form" novalidate>
85
- <div class="pf-c-form__group">
86
- <div class="pf-c-form__group-label pf-m-info">
87
- <div class="pf-c-form__group-label-main"><label
88
- class="pf-c-form__label"
89
- for="password-strength-demo--invalid-password"
90
- >
91
- <span class="pf-c-form__label-text">Password</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
92
- class="pf-c-form__group-label-help"
93
- aria-label="More information for password field"
94
- aria-describedby="password-strength-demo--invalid-password"
95
- role="button"
96
- type="button"
97
- tabindex="0"
98
- ><i class="pficon pf-icon-help" aria-hidden="true"></i></span>
99
- </div>
100
- <div class="pf-c-form__group-label-info"></div>
101
- </div>
102
- <div class="pf-c-form__group-control">
103
- <div class="pf-c-input-group">
104
- <input
105
- class="pf-c-form-control"
106
- required
107
- type="text"
108
- id="password-strength-demo--invalid-password"
109
- name="password-strength-demo--invalid-password"
110
- aria-label="Password input"
111
- value="Marie$RedHat78"
112
- placeholder="Password"
113
- />
114
- <button
115
- class="pf-c-button pf-m-control"
116
- type="button"
117
- aria-label="Show password"
118
- >
87
+ ```hbs
88
+ {{#> form form--id="password-strength-demo--invalid"}}
89
+ {{#> form-group form-group--id="-password"}}
90
+ {{#> form-group-label form-group-label-info="true"}}
91
+ {{#> form-group-label-main}}
92
+ {{#> form-label form-label--attribute=(concat 'for="' form--id form-group--id '"') required="true"}}Password{{/form-label}}
93
+ {{> form-group-label-help form-group-label-help--aria-label="More information for password field" form-group-label-help--aria-describedby=(concat form--id form-group--id)}}
94
+ {{/form-group-label-main}}
95
+ {{#> form-group-label-info}}
96
+ {{/form-group-label-info}}
97
+ {{/form-group-label}}
98
+ {{#> form-group-control}}
99
+ {{#> input-group}}
100
+ {{#> input-group-item input-group-item--IsFill=true}}
101
+ {{> form-control controlType="input" input="true" form-control--attribute=(concat 'required type="text" id="' form--id form-group--id '" name="' form--id form-group--id '" aria-label="Password input" value="Marie$RedHat78" placeholder="Password"')}}
102
+ {{/input-group-item}}
103
+ {{#> input-group-item}}
104
+ {{#> button button--modifier="pf-m-control" button--attribute='aria-label="Show password"'}}
105
+ {{/input-group-item}}
119
106
  <i class="fas fa-eye-slash" aria-hidden="true"></i>
120
- </button>
121
- </div>
122
- <div class="pf-c-form__helper-text">
123
- <div class="pf-c-helper-text">
124
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
125
- <span class="pf-c-helper-text__item-icon">
126
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
127
- </span>
128
- <span
129
- class="pf-c-helper-text__item-text"
130
- >Must be at least 14 characters</span>
131
- </div>
132
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-error">
133
- <span class="pf-c-helper-text__item-icon">
134
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
135
- </span>
136
- <span
137
- class="pf-c-helper-text__item-text"
138
- >Cannot contain the word "redhat"</span>
139
- </div>
140
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
141
- <span class="pf-c-helper-text__item-icon">
142
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
143
- </span>
144
- <span
145
- class="pf-c-helper-text__item-text"
146
- >Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols</span>
147
- </div>
148
- </div>
149
- </div>
150
- </div>
151
- </div>
152
- </form>
153
-
107
+ {{/button}}
108
+ {{/input-group}}
109
+ {{#> form-helper-text form-helper-text--type="div"}}
110
+ {{#> helper-text helper-text--type="ul" helper-text-item--type="li"}}
111
+ {{#> helper-text-item helper-text-item--modifier="pf-m-dynamic pf-m-success"}}
112
+ {{> helper-text-item-icon helper-text-item-icon--type="check-circle"}}
113
+ {{#> helper-text-item-text}}Must be at least 14 characters{{/helper-text-item-text}}
114
+ {{/helper-text-item}}
115
+ {{#> helper-text-item helper-text-item--modifier="pf-m-dynamic pf-m-error"}}
116
+ {{> helper-text-item-icon helper-text-item-icon--type="exclamation-circle"}}
117
+ {{#> helper-text-item-text}}Cannot contain the word "redhat"{{/helper-text-item-text}}
118
+ {{/helper-text-item}}
119
+ {{#> helper-text-item helper-text-item--modifier="pf-m-dynamic pf-m-success"}}
120
+ {{> helper-text-item-icon helper-text-item-icon--type="check-circle"}}
121
+ {{#> helper-text-item-text}}Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols{{/helper-text-item-text}}
122
+ {{/helper-text-item}}
123
+ {{/helper-text}}
124
+ {{/form-helper-text}}
125
+ {{/form-group-control}}
126
+ {{/form-group}}
127
+ {{/form}}
154
128
  ```
155
129
 
156
130
  ### Valid, weak password
@@ -185,23 +159,27 @@ section: demos
185
159
  </div>
186
160
  <div class="pf-c-form__group-control">
187
161
  <div class="pf-c-input-group">
188
- <input
189
- class="pf-c-form-control"
190
- required
191
- type="text"
192
- id="password-strength-demo--weak-password"
193
- name="password-strength-demo--weak-password"
194
- aria-label="Password input"
195
- value="Marie$Can3Read"
196
- placeholder="Password"
197
- />
198
- <button
199
- class="pf-c-button pf-m-control"
200
- type="button"
201
- aria-label="Show password"
202
- >
203
- <i class="fas fa-eye-slash" aria-hidden="true"></i>
204
- </button>
162
+ <div class="pf-c-input-group__item pf-m-fill">
163
+ <input
164
+ class="pf-c-form-control"
165
+ required
166
+ type="text"
167
+ id="password-strength-demo--weak-password"
168
+ name="password-strength-demo--weak-password"
169
+ aria-label="Password input"
170
+ value="Marie$Can3Read"
171
+ placeholder="Password"
172
+ />
173
+ </div>
174
+ <div class="pf-c-input-group__item">
175
+ <button
176
+ class="pf-c-button pf-m-control"
177
+ type="button"
178
+ aria-label="Show password"
179
+ >
180
+ <i class="fas fa-eye-slash" aria-hidden="true"></i>
181
+ </button>
182
+ </div>
205
183
  </div>
206
184
  <div class="pf-c-form__helper-text">
207
185
  <div class="pf-c-helper-text">
@@ -269,23 +247,27 @@ section: demos
269
247
  </div>
270
248
  <div class="pf-c-form__group-control">
271
249
  <div class="pf-c-input-group">
272
- <input
273
- class="pf-c-form-control"
274
- required
275
- type="text"
276
- id="password-strength-demo--strong-password"
277
- name="password-strength-demo--strong-password"
278
- aria-label="Password input"
279
- value="Marie$Can8Read3Pass@Word"
280
- placeholder="Password"
281
- />
282
- <button
283
- class="pf-c-button pf-m-control"
284
- type="button"
285
- aria-label="Show password"
286
- >
287
- <i class="fas fa-eye-slash" aria-hidden="true"></i>
288
- </button>
250
+ <div class="pf-c-input-group__item pf-m-fill">
251
+ <input
252
+ class="pf-c-form-control"
253
+ required
254
+ type="text"
255
+ id="password-strength-demo--strong-password"
256
+ name="password-strength-demo--strong-password"
257
+ aria-label="Password input"
258
+ value="Marie$Can8Read3Pass@Word"
259
+ placeholder="Password"
260
+ />
261
+ </div>
262
+ <div class="pf-c-input-group__item">
263
+ <button
264
+ class="pf-c-button pf-m-control"
265
+ type="button"
266
+ aria-label="Show password"
267
+ >
268
+ <i class="fas fa-eye-slash" aria-hidden="true"></i>
269
+ </button>
270
+ </div>
289
271
  </div>
290
272
  <div class="pf-c-form__helper-text">
291
273
  <div class="pf-c-helper-text">