@patternfly/patternfly 6.3.0-prerelease.68 → 6.3.0-prerelease.69

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 (17) hide show
  1. package/components/DualListSelector/dual-list-selector.css +2 -3
  2. package/components/DualListSelector/dual-list-selector.scss +3 -3
  3. package/components/_index.css +2 -3
  4. package/docs/components/DatePicker/examples/DatePicker.md +4 -1
  5. package/docs/components/FileUpload/examples/FileUpload.md +4 -3
  6. package/docs/components/Form/examples/Form.md +16 -15
  7. package/docs/components/HelperText/examples/HelperText.md +65 -75
  8. package/docs/components/Login/examples/Login.md +20 -15
  9. package/docs/demos/Alert/examples/Alert.md +28 -19
  10. package/docs/demos/Form/examples/BasicForms.md +0 -21
  11. package/docs/demos/HelperText/examples/HelperText.md +31 -23
  12. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +56 -38
  13. package/package.json +1 -1
  14. package/patternfly-no-globals.css +2 -3
  15. package/patternfly.css +2 -3
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
package/docs/demos/HelperText/examples/HelperText.md CHANGED
@@ -63,9 +63,13 @@ section: components
63
63
  >
64
64
  <div class="pf-v6-c-helper-text">
65
65
  <div class="pf-v6-c-helper-text__item pf-m-warning">
66
- <span
67
- class="pf-v6-c-helper-text__item-text"
68
- >This is helper text for a warning.</span>
66
+ <span class="pf-v6-c-helper-text__item-icon">
67
+ <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
68
+ </span>
69
+ <span class="pf-v6-c-helper-text__item-text">
70
+ <span class="pf-v6-screen-reader">Warning:</span>
71
+ This is helper text for a warning.
72
+ </span>
69
73
  </div>
70
74
  </div>
71
75
  </div>
@@ -97,32 +101,35 @@ section: components
97
101
  aria-live="polite"
98
102
  id="helper-text-form-address-helper"
99
103
  >
100
- <div class="pf-v6-c-helper-text">
101
- <div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
104
+ <ul class="pf-v6-c-helper-text" role="list">
105
+ <li class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
102
106
  <span class="pf-v6-c-helper-text__item-icon">
103
107
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
104
108
  </span>
105
- <span
106
- class="pf-v6-c-helper-text__item-text"
107
- >This criteria has been met.</span>
108
- </div>
109
- <div class="pf-v6-c-helper-text__item pf-m-error pf-m-dynamic">
109
+ <span class="pf-v6-c-helper-text__item-text">
110
+ <span class="pf-v6-screen-reader">Success:</span>
111
+ This criteria has been met.
112
+ </span>
113
+ </li>
114
+ <li class="pf-v6-c-helper-text__item pf-m-error pf-m-dynamic">
110
115
  <span class="pf-v6-c-helper-text__item-icon">
111
116
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
112
117
  </span>
113
- <span
114
- class="pf-v6-c-helper-text__item-text"
115
- >This criteria has not been met.</span>
116
- </div>
117
- <div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
118
+ <span class="pf-v6-c-helper-text__item-text">
119
+ <span class="pf-v6-screen-reader">Error:</span>
120
+ This criteria has not been met.
121
+ </span>
122
+ </li>
123
+ <li class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
118
124
  <span class="pf-v6-c-helper-text__item-icon">
119
125
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
120
126
  </span>
121
- <span
122
- class="pf-v6-c-helper-text__item-text"
123
- >This criteria has been met.</span>
124
- </div>
125
- </div>
127
+ <span class="pf-v6-c-helper-text__item-text">
128
+ <span class="pf-v6-screen-reader">Success:</span>
129
+ This criteria has been met.
130
+ </span>
131
+ </li>
132
+ </ul>
126
133
  </div>
127
134
  </div>
128
135
  </div>
@@ -156,9 +163,10 @@ section: components
156
163
  <span class="pf-v6-c-helper-text__item-icon">
157
164
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
158
165
  </span>
159
- <span
160
- class="pf-v6-c-helper-text__item-text"
161
- >This is dynamic helper text with an icon showing success.</span>
166
+ <span class="pf-v6-c-helper-text__item-text">
167
+ <span class="pf-v6-screen-reader">Success:</span>
168
+ This is dynamic helper text with an icon showing success.
169
+ </span>
162
170
  </div>
163
171
  </div>
164
172
  </div>
package/docs/demos/PasswordStrength/examples/PasswordStrength.md CHANGED
@@ -52,9 +52,10 @@ section: components
52
52
  <span class="pf-v6-c-helper-text__item-icon">
53
53
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
54
54
  </span>
55
- <span
56
- class="pf-v6-c-helper-text__item-text"
57
- >Must be at least 14 characters</span>
55
+ <span class="pf-v6-c-helper-text__item-text">
56
+ <span class="pf-v6-screen-reader">Indeterminate:</span>
57
+ Must be at least 14 characters
58
+ </span>
58
59
  </div>
59
60
  <div
60
61
  class="pf-v6-c-helper-text__item pf-m-indeterminate pf-m-dynamic"
@@ -62,9 +63,10 @@ section: components
62
63
  <span class="pf-v6-c-helper-text__item-icon">
63
64
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
64
65
  </span>
65
- <span
66
- class="pf-v6-c-helper-text__item-text"
67
- >Cannot contain the word "redhat"</span>
66
+ <span class="pf-v6-c-helper-text__item-text">
67
+ <span class="pf-v6-screen-reader">Indeterminate:</span>
68
+ Cannot contain the word "redhat"
69
+ </span>
68
70
  </div>
69
71
  <div
70
72
  class="pf-v6-c-helper-text__item pf-m-indeterminate pf-m-dynamic"
@@ -72,9 +74,10 @@ section: components
72
74
  <span class="pf-v6-c-helper-text__item-icon">
73
75
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
74
76
  </span>
75
- <span
76
- class="pf-v6-c-helper-text__item-text"
77
- >Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols</span>
77
+ <span class="pf-v6-c-helper-text__item-text">
78
+ <span class="pf-v6-screen-reader">Indeterminate:</span>
79
+ Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols
80
+ </span>
78
81
  </div>
79
82
  </div>
80
83
  </div>
@@ -131,25 +134,28 @@ section: components
131
134
  <span class="pf-v6-c-helper-text__item-icon">
132
135
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
133
136
  </span>
134
- <span
135
- class="pf-v6-c-helper-text__item-text"
136
- >Must be at least 14 characters</span>
137
+ <span class="pf-v6-c-helper-text__item-text">
138
+ <span class="pf-v6-screen-reader">Success:</span>
139
+ Must be at least 14 characters
140
+ </span>
137
141
  </div>
138
142
  <div class="pf-v6-c-helper-text__item pf-m-error pf-m-dynamic">
139
143
  <span class="pf-v6-c-helper-text__item-icon">
140
144
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
141
145
  </span>
142
- <span
143
- class="pf-v6-c-helper-text__item-text"
144
- >Cannot contain the word "redhat"</span>
146
+ <span class="pf-v6-c-helper-text__item-text">
147
+ <span class="pf-v6-screen-reader">Error:</span>
148
+ Cannot contain the word "redhat"
149
+ </span>
145
150
  </div>
146
151
  <div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
147
152
  <span class="pf-v6-c-helper-text__item-icon">
148
153
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
149
154
  </span>
150
- <span
151
- class="pf-v6-c-helper-text__item-text"
152
- >Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols</span>
155
+ <span class="pf-v6-c-helper-text__item-text">
156
+ <span class="pf-v6-screen-reader">Success:</span>
157
+ Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols
158
+ </span>
153
159
  </div>
154
160
  </div>
155
161
  </div>
@@ -177,7 +183,10 @@ section: components
177
183
  <span class="pf-v6-c-helper-text__item-icon">
178
184
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
179
185
  </span>
180
- <span class="pf-v6-c-helper-text__item-text">Weak</span>
186
+ <span class="pf-v6-c-helper-text__item-text">
187
+ <span class="pf-v6-screen-reader">Error:</span>
188
+ Weak
189
+ </span>
181
190
  </div>
182
191
  </div>
183
192
  </div>
@@ -215,25 +224,28 @@ section: components
215
224
  <span class="pf-v6-c-helper-text__item-icon">
216
225
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
217
226
  </span>
218
- <span
219
- class="pf-v6-c-helper-text__item-text"
220
- >Must be at least 14 characters</span>
227
+ <span class="pf-v6-c-helper-text__item-text">
228
+ <span class="pf-v6-screen-reader">Success:</span>
229
+ Must be at least 14 characters
230
+ </span>
221
231
  </div>
222
232
  <div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
223
233
  <span class="pf-v6-c-helper-text__item-icon">
224
234
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
225
235
  </span>
226
- <span
227
- class="pf-v6-c-helper-text__item-text"
228
- >Cannot contain the word "redhat"</span>
236
+ <span class="pf-v6-c-helper-text__item-text">
237
+ <span class="pf-v6-screen-reader">Success:</span>
238
+ Cannot contain the word "redhat"
239
+ </span>
229
240
  </div>
230
241
  <div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
231
242
  <span class="pf-v6-c-helper-text__item-icon">
232
243
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
233
244
  </span>
234
- <span
235
- class="pf-v6-c-helper-text__item-text"
236
- >Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols</span>
245
+ <span class="pf-v6-c-helper-text__item-text">
246
+ <span class="pf-v6-screen-reader">Success:</span>
247
+ Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols
248
+ </span>
237
249
  </div>
238
250
  </div>
239
251
  </div>
@@ -261,7 +273,10 @@ section: components
261
273
  <span class="pf-v6-c-helper-text__item-icon">
262
274
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
263
275
  </span>
264
- <span class="pf-v6-c-helper-text__item-text">Strong</span>
276
+ <span class="pf-v6-c-helper-text__item-text">
277
+ <span class="pf-v6-screen-reader">Success:</span>
278
+ Strong
279
+ </span>
265
280
  </div>
266
281
  </div>
267
282
  </div>
@@ -299,25 +314,28 @@ section: components
299
314
  <span class="pf-v6-c-helper-text__item-icon">
300
315
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
301
316
  </span>
302
- <span
303
- class="pf-v6-c-helper-text__item-text"
304
- >Must be at least 14 characters</span>
317
+ <span class="pf-v6-c-helper-text__item-text">
318
+ <span class="pf-v6-screen-reader">Success:</span>
319
+ Must be at least 14 characters
320
+ </span>
305
321
  </div>
306
322
  <div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
307
323
  <span class="pf-v6-c-helper-text__item-icon">
308
324
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
309
325
  </span>
310
- <span
311
- class="pf-v6-c-helper-text__item-text"
312
- >Cannot contain the word "redhat"</span>
326
+ <span class="pf-v6-c-helper-text__item-text">
327
+ <span class="pf-v6-screen-reader">Success:</span>
328
+ Cannot contain the word "redhat"
329
+ </span>
313
330
  </div>
314
331
  <div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
315
332
  <span class="pf-v6-c-helper-text__item-icon">
316
333
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
317
334
  </span>
318
- <span
319
- class="pf-v6-c-helper-text__item-text"
320
- >Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols</span>
335
+ <span class="pf-v6-c-helper-text__item-text">
336
+ <span class="pf-v6-screen-reader">Success:</span>
337
+ Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols
338
+ </span>
321
339
  </div>
322
340
  </div>
323
341
  </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": "6.3.0-prerelease.68",
4
+ "version": "6.3.0-prerelease.69",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "engines": {
package/patternfly-no-globals.css CHANGED
@@ -13826,14 +13826,13 @@ ul) {
13826
13826
  --pf-v6-c-dual-list-selector__item-text--Color: var(--pf-v6-c-dual-list-selector__list-item-row--m-selected__text--Color);
13827
13827
  font-weight: var(--pf-v6-c-dual-list-selector__list-item-row--m-selected__text--FontWeight);
13828
13828
  }
13829
- .pf-v6-c-dual-list-selector__list-item-row:hover {
13829
+ .pf-v6-c-dual-list-selector__list-item-row:hover, .pf-v6-c-dual-list-selector__list-item-row:focus-within {
13830
13830
  --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor);
13831
13831
  --pf-v6-c-dual-list-selector__list-item-row--BorderWidth: var(--pf-v6-c-dual-list-selector__list-item-row--hover--BorderWidth);
13832
13832
  }
13833
13833
  .pf-v6-c-dual-list-selector__list-item-row.pf-m-check {
13834
13834
  --pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: transparent;
13835
- --pf-v6-c-dual-list-selector__list-item-row--m-selected--BorderColor: transparent;
13836
- --pf-v6-c-dual-list-selector__list-item-row--BorderWidth: revert;
13835
+ --pf-v6-c-dual-list-selector__list-item-row--m-selected--BorderWidth: 0;
13837
13836
  }
13838
13837
  .pf-v6-c-dual-list-selector__list-item-row.pf-m-ghost-row {
13839
13838
  --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor);
package/patternfly.css CHANGED
@@ -13966,14 +13966,13 @@ ul) {
13966
13966
  --pf-v6-c-dual-list-selector__item-text--Color: var(--pf-v6-c-dual-list-selector__list-item-row--m-selected__text--Color);
13967
13967
  font-weight: var(--pf-v6-c-dual-list-selector__list-item-row--m-selected__text--FontWeight);
13968
13968
  }
13969
- .pf-v6-c-dual-list-selector__list-item-row:hover {
13969
+ .pf-v6-c-dual-list-selector__list-item-row:hover, .pf-v6-c-dual-list-selector__list-item-row:focus-within {
13970
13970
  --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor);
13971
13971
  --pf-v6-c-dual-list-selector__list-item-row--BorderWidth: var(--pf-v6-c-dual-list-selector__list-item-row--hover--BorderWidth);
13972
13972
  }
13973
13973
  .pf-v6-c-dual-list-selector__list-item-row.pf-m-check {
13974
13974
  --pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: transparent;
13975
- --pf-v6-c-dual-list-selector__list-item-row--m-selected--BorderColor: transparent;
13976
- --pf-v6-c-dual-list-selector__list-item-row--BorderWidth: revert;
13975
+ --pf-v6-c-dual-list-selector__list-item-row--m-selected--BorderWidth: 0;
13977
13976
  }
13978
13977
  .pf-v6-c-dual-list-selector__list-item-row.pf-m-ghost-row {
13979
13978
  --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor);