@patternfly/patternfly 5.0.0-alpha.32 → 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 (20) 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/docs/components/DatePicker/examples/DatePicker.md +14 -3
  6. package/docs/components/FileUpload/examples/FileUpload.md +9 -5
  7. package/docs/components/Form/examples/Form.md +94 -73
  8. package/docs/components/HelperText/examples/HelperText.md +13 -24
  9. package/docs/components/Login/examples/Login.md +67 -30
  10. package/docs/components/Progress/examples/Progress.md +1 -1
  11. package/docs/demos/Alert/examples/Alert.md +105 -58
  12. package/docs/demos/Form/examples/BasicForms.md +129 -140
  13. package/docs/demos/HelperText/examples/HelperText.md +11 -8
  14. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +87 -53
  15. package/docs/demos/Toolbar/examples/Toolbar.md +17 -5
  16. package/package.json +2 -2
  17. package/patternfly-no-reset.css +4 -8
  18. package/patternfly.css +4 -8
  19. package/patternfly.min.css +1 -1
  20. package/patternfly.min.css.map +1 -1
package/docs/demos/PasswordStrength/examples/PasswordStrength.md CHANGED
@@ -48,9 +48,9 @@ section: demos
48
48
  </button>
49
49
  </div>
50
50
  </div>
51
- <div class="pf-c-form__helper-text">
51
+ <div class="pf-c-form__helper-text" aria-live="polite">
52
52
  <div class="pf-c-helper-text">
53
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-indeterminate">
53
+ <div class="pf-c-helper-text__item pf-m-indeterminate pf-m-dynamic">
54
54
  <span class="pf-c-helper-text__item-icon">
55
55
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
56
56
  </span>
@@ -58,7 +58,7 @@ section: demos
58
58
  class="pf-c-helper-text__item-text"
59
59
  >Must be at least 14 characters</span>
60
60
  </div>
61
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-indeterminate">
61
+ <div class="pf-c-helper-text__item pf-m-indeterminate pf-m-dynamic">
62
62
  <span class="pf-c-helper-text__item-icon">
63
63
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
64
64
  </span>
@@ -66,7 +66,7 @@ section: demos
66
66
  class="pf-c-helper-text__item-text"
67
67
  >Cannot contain the word "redhat"</span>
68
68
  </div>
69
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-indeterminate">
69
+ <div class="pf-c-helper-text__item pf-m-indeterminate pf-m-dynamic">
70
70
  <span class="pf-c-helper-text__item-icon">
71
71
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
72
72
  </span>
@@ -84,47 +84,81 @@ section: demos
84
84
 
85
85
  ### Invalid password
86
86
 
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}}
106
- <i class="fas fa-eye-slash" aria-hidden="true"></i>
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}}
87
+ ```html
88
+ <form class="pf-c-form" novalidate>
89
+ <div class="pf-c-form__group">
90
+ <div class="pf-c-form__group-label pf-m-info">
91
+ <div class="pf-c-form__group-label-main"><label
92
+ class="pf-c-form__label"
93
+ for="password-strength-demo--invalid-password"
94
+ >
95
+ <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
96
+ class="pf-c-form__group-label-help"
97
+ aria-label="More information for password field"
98
+ aria-describedby="password-strength-demo--invalid-password"
99
+ role="button"
100
+ type="button"
101
+ tabindex="0"
102
+ ><i class="pficon pf-icon-help" aria-hidden="true"></i></span>
103
+ </div>
104
+ <div class="pf-c-form__group-label-info"></div>
105
+ </div>
106
+ <div class="pf-c-form__group-control">
107
+ <div class="pf-c-input-group">
108
+ <div class="pf-c-input-group__item pf-m-fill">
109
+ <input
110
+ class="pf-c-form-control"
111
+ required
112
+ type="text"
113
+ id="password-strength-demo--invalid-password"
114
+ name="password-strength-demo--invalid-password"
115
+ aria-label="Password input"
116
+ value="Marie$RedHat78"
117
+ placeholder="Password"
118
+ />
119
+ </div>
120
+ <div class="pf-c-input-group__item">
121
+ <button
122
+ class="pf-c-button pf-m-control"
123
+ type="button"
124
+ aria-label="Show password"
125
+ >
126
+ <i class="fas fa-eye-slash" aria-hidden="true"></i>
127
+ </button>
128
+ </div>
129
+ </div>
130
+ <div class="pf-c-form__helper-text" aria-live="polite">
131
+ <div class="pf-c-helper-text">
132
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
133
+ <span class="pf-c-helper-text__item-icon">
134
+ <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
135
+ </span>
136
+ <span
137
+ class="pf-c-helper-text__item-text"
138
+ >Must be at least 14 characters</span>
139
+ </div>
140
+ <div class="pf-c-helper-text__item pf-m-error pf-m-dynamic">
141
+ <span class="pf-c-helper-text__item-icon">
142
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
143
+ </span>
144
+ <span
145
+ class="pf-c-helper-text__item-text"
146
+ >Cannot contain the word "redhat"</span>
147
+ </div>
148
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
149
+ <span class="pf-c-helper-text__item-icon">
150
+ <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
151
+ </span>
152
+ <span
153
+ class="pf-c-helper-text__item-text"
154
+ >Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols</span>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </form>
161
+
128
162
  ```
129
163
 
130
164
  ### Valid, weak password
@@ -181,9 +215,9 @@ section: demos
181
215
  </button>
182
216
  </div>
183
217
  </div>
184
- <div class="pf-c-form__helper-text">
218
+ <div class="pf-c-form__helper-text" aria-live="polite">
185
219
  <div class="pf-c-helper-text">
186
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
220
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
187
221
  <span class="pf-c-helper-text__item-icon">
188
222
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
189
223
  </span>
@@ -191,7 +225,7 @@ section: demos
191
225
  class="pf-c-helper-text__item-text"
192
226
  >Must be at least 14 characters</span>
193
227
  </div>
194
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
228
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
195
229
  <span class="pf-c-helper-text__item-icon">
196
230
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
197
231
  </span>
@@ -199,7 +233,7 @@ section: demos
199
233
  class="pf-c-helper-text__item-text"
200
234
  >Cannot contain the word "redhat"</span>
201
235
  </div>
202
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
236
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
203
237
  <span class="pf-c-helper-text__item-icon">
204
238
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
205
239
  </span>
@@ -269,9 +303,9 @@ section: demos
269
303
  </button>
270
304
  </div>
271
305
  </div>
272
- <div class="pf-c-form__helper-text">
306
+ <div class="pf-c-form__helper-text" aria-live="polite">
273
307
  <div class="pf-c-helper-text">
274
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
308
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
275
309
  <span class="pf-c-helper-text__item-icon">
276
310
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
277
311
  </span>
@@ -279,7 +313,7 @@ section: demos
279
313
  class="pf-c-helper-text__item-text"
280
314
  >Must be at least 14 characters</span>
281
315
  </div>
282
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
316
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
283
317
  <span class="pf-c-helper-text__item-icon">
284
318
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
285
319
  </span>
@@ -287,7 +321,7 @@ section: demos
287
321
  class="pf-c-helper-text__item-text"
288
322
  >Cannot contain the word "redhat"</span>
289
323
  </div>
290
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
324
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
291
325
  <span class="pf-c-helper-text__item-icon">
292
326
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
293
327
  </span>
package/docs/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -1233,7 +1233,13 @@ section: components
1233
1233
  </button>
1234
1234
  </div>
1235
1235
  </div>
1236
- <div class="pf-c-date-picker__helper-text">MM/DD/YYYY</div>
1236
+ <div class="pf-c-date-picker__helper-text">
1237
+ <div class="pf-c-helper-text">
1238
+ <div class="pf-c-helper-text__item">
1239
+ <span class="pf-c-helper-text__item-text">MM/DD/YYYY</span>
1240
+ </div>
1241
+ </div>
1242
+ </div>
1237
1243
  </div>
1238
1244
  <div class="pf-c-date-picker">
1239
1245
  <div class="pf-c-date-picker__input">
@@ -1259,11 +1265,17 @@ section: components
1259
1265
  <i class="fas fa-calendar-alt" aria-hidden="true"></i>
1260
1266
  </button>
1261
1267
  </div>
1262
- <div class="pf-c-date-picker__helper-text">MM/DD/YYYY</div>
1268
+ <div class="pf-c-date-picker__helper-text"></div>
1269
+ </div>
1270
+ <div class="pf-c-date-picker__helper-text">
1271
+ <div class="pf-c-helper-text">
1272
+ <div class="pf-c-helper-text__item">
1273
+ <span
1274
+ class="pf-c-helper-text__item-text"
1275
+ >Max: 08/10/2022</span>
1276
+ </div>
1277
+ </div>
1263
1278
  </div>
1264
- <div
1265
- class="pf-c-date-picker__helper-text pf-m-error"
1266
- >Max: 08/10/2022</div>
1267
1279
  </div>
1268
1280
  </div>
1269
1281
  </div>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "5.0.0-alpha.32",
4
+ "version": "5.0.0-alpha.33",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -42,7 +42,7 @@
42
42
  "@commitlint/config-conventional": "^17.4.2",
43
43
  "@fortawesome/fontawesome": "^1.1.8",
44
44
  "@octokit/rest": "^19.0.7",
45
- "@patternfly/documentation-framework": "1.10.2",
45
+ "@patternfly/documentation-framework": "1.10.3",
46
46
  "@patternfly/patternfly-a11y": "4.3.1",
47
47
  "@patternfly/react-code-editor": "4.82.113",
48
48
  "@patternfly/react-core": "4.276.6",
package/patternfly-no-reset.css CHANGED
@@ -12335,9 +12335,6 @@ label.pf-c-check, .pf-c-check__label,
12335
12335
  --pf-c-date-picker--m-top__calendar--Top: 0;
12336
12336
  --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
12337
12337
  --pf-c-date-picker__helper-text--MarginTop: var(--pf-global--spacer--xs);
12338
- --pf-c-date-picker__helper-text--FontSize: var(--pf-global--FontSize--sm);
12339
- --pf-c-date-picker__helper-text--Color: var(--pf-global--Color--100);
12340
- --pf-c-date-picker__helper-text--m-error--Color: var(--pf-global--danger-color--100);
12341
12338
  --pf-c-date-picker__input--c-form-control--Width: calc(var(--pf-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-c-date-picker__input--c-form-control--width-base));
12342
12339
  --pf-c-date-picker__input--c-form-control--width-base: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
12343
12340
  --pf-c-date-picker__input--c-form-control--width-chars: 10;
@@ -12355,11 +12352,6 @@ label.pf-c-check, .pf-c-check__label,
12355
12352
 
12356
12353
  .pf-c-date-picker__helper-text {
12357
12354
  margin-top: var(--pf-c-date-picker__helper-text--MarginTop);
12358
- font-size: var(--pf-c-date-picker__helper-text--FontSize);
12359
- color: var(--pf-c-date-picker__helper-text--Color);
12360
- }
12361
- .pf-c-date-picker__helper-text.pf-m-error {
12362
- --pf-c-date-picker__helper-text--Color: var(--pf-c-date-picker__helper-text--m-error--Color);
12363
12355
  }
12364
12356
 
12365
12357
  .pf-c-date-picker__input .pf-c-form-control {
@@ -15659,6 +15651,10 @@ textarea.pf-c-form-control {
15659
15651
  gap: var(--pf-c-helper-text--Gap);
15660
15652
  font-size: var(--pf-c-helper-text--FontSize);
15661
15653
  }
15654
+ .pf-c-helper-text.pf-m-hidden {
15655
+ visibility: hidden;
15656
+ opacity: 0;
15657
+ }
15662
15658
 
15663
15659
  .pf-c-helper-text__item {
15664
15660
  display: flex;
package/patternfly.css CHANGED
@@ -12458,9 +12458,6 @@ label.pf-c-check, .pf-c-check__label,
12458
12458
  --pf-c-date-picker--m-top__calendar--Top: 0;
12459
12459
  --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
12460
12460
  --pf-c-date-picker__helper-text--MarginTop: var(--pf-global--spacer--xs);
12461
- --pf-c-date-picker__helper-text--FontSize: var(--pf-global--FontSize--sm);
12462
- --pf-c-date-picker__helper-text--Color: var(--pf-global--Color--100);
12463
- --pf-c-date-picker__helper-text--m-error--Color: var(--pf-global--danger-color--100);
12464
12461
  --pf-c-date-picker__input--c-form-control--Width: calc(var(--pf-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-c-date-picker__input--c-form-control--width-base));
12465
12462
  --pf-c-date-picker__input--c-form-control--width-base: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
12466
12463
  --pf-c-date-picker__input--c-form-control--width-chars: 10;
@@ -12478,11 +12475,6 @@ label.pf-c-check, .pf-c-check__label,
12478
12475
 
12479
12476
  .pf-c-date-picker__helper-text {
12480
12477
  margin-top: var(--pf-c-date-picker__helper-text--MarginTop);
12481
- font-size: var(--pf-c-date-picker__helper-text--FontSize);
12482
- color: var(--pf-c-date-picker__helper-text--Color);
12483
- }
12484
- .pf-c-date-picker__helper-text.pf-m-error {
12485
- --pf-c-date-picker__helper-text--Color: var(--pf-c-date-picker__helper-text--m-error--Color);
12486
12478
  }
12487
12479
 
12488
12480
  .pf-c-date-picker__input .pf-c-form-control {
@@ -15782,6 +15774,10 @@ textarea.pf-c-form-control {
15782
15774
  gap: var(--pf-c-helper-text--Gap);
15783
15775
  font-size: var(--pf-c-helper-text--FontSize);
15784
15776
  }
15777
+ .pf-c-helper-text.pf-m-hidden {
15778
+ visibility: hidden;
15779
+ opacity: 0;
15780
+ }
15785
15781
 
15786
15782
  .pf-c-helper-text__item {
15787
15783
  display: flex;