@patternfly/patternfly 4.182.0 → 4.183.0
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.
package/RELEASE-NOTES.md
CHANGED
|
@@ -3,6 +3,37 @@ id: Release notes
|
|
|
3
3
|
section: developer-resources
|
|
4
4
|
releaseNoteTOC: true
|
|
5
5
|
---
|
|
6
|
+
|
|
7
|
+
## 2022.03 release notes (2022-03-08)
|
|
8
|
+
Packages released:
|
|
9
|
+
- [@patternfly/patternfly@v4.182.2](https://www.npmjs.com/package/@patternfly/patternfly/v/4.182.2)
|
|
10
|
+
|
|
11
|
+
### Components
|
|
12
|
+
- **Description list:** Added description list demo ([#4715](https://github.com/patternfly/patternfly/pull/4715))
|
|
13
|
+
- **Form control:** Added icon sprite variation ([#4711](https://github.com/patternfly/patternfly/pull/4711))
|
|
14
|
+
- **Jump links:** Fixed outdated code in demos ([#4703](https://github.com/patternfly/patternfly/pull/4703))
|
|
15
|
+
- **Label group:** Added compact examples ([#4639](https://github.com/patternfly/patternfly/pull/4639))
|
|
16
|
+
- **Masthead:** Updated toggle borders ([#4706](https://github.com/patternfly/patternfly/pull/4706))
|
|
17
|
+
- **Menu:**
|
|
18
|
+
- Added aria attributes ([#4670](https://github.com/patternfly/patternfly/pull/4670))
|
|
19
|
+
- Added checkbox to menu ([#4696](https://github.com/patternfly/patternfly/pull/4696))
|
|
20
|
+
- Added image support ([#4701](https://github.com/patternfly/patternfly/pull/4701))
|
|
21
|
+
- **Menu toggle:**
|
|
22
|
+
- Fixed plain menu toggle state ([#4710](https://github.com/patternfly/patternfly/pull/4710))
|
|
23
|
+
- Added split button ([#4713](https://github.com/patternfly/patternfly/pull/4713))
|
|
24
|
+
- **Page:** Updated wording in centered examples ([#4698](https://github.com/patternfly/patternfly/pull/4698))
|
|
25
|
+
- **Select:** Fixed active focus states bottom border ([#4702](https://github.com/patternfly/patternfly/pull/4702))
|
|
26
|
+
- **Spinner:** Renamed examples so SVG is default, non-SVG is legacy ([#4697](https://github.com/patternfly/patternfly/pull/4697))
|
|
27
|
+
- **Table:**
|
|
28
|
+
- Added docs around z-index conflicts with use of sticky columns/headers ([#4709](https://github.com/patternfly/patternfly/pull/4709))
|
|
29
|
+
- Updated overflow menu examples ([#4719](https://github.com/patternfly/patternfly/pull/4719))
|
|
30
|
+
- **Tabs:** Updated tabs demos to use secondary tabs and standard styles ([#4712](https://github.com/patternfly/patternfly/pull/4712))
|
|
31
|
+
- **Wizard:** Updated docs/hbs for description to allow div ([#4708](https://github.com/patternfly/patternfly/pull/4708))
|
|
32
|
+
|
|
33
|
+
### Other
|
|
34
|
+
- **Demos:** Used search inputs in demos ([#4691](https://github.com/patternfly/patternfly/pull/4691))
|
|
35
|
+
|
|
36
|
+
|
|
6
37
|
## 2022.02 release notes (2022-02-17)
|
|
7
38
|
Packages released:
|
|
8
39
|
- [@patternfly/patternfly@v4.179.1](https://www.npmjs.com/package/@patternfly/patternfly/v/4.179.1)
|
|
Binary file
|
|
@@ -236,26 +236,89 @@ These classes can be used to ensure that the table changes between the tabular a
|
|
|
236
236
|
| `.fa-long-arrow-alt-up` | `.pf-c-table__sort > .pf-c-table__button > .pf-c-table__sort-indicator > .fas` | Initiates icon within ascending sorted and selected, sortable table header. **Required for sortable table columns** |
|
|
237
237
|
| `.fa-long-arrow-alt-down` | `.pf-c-table__sort > .pf-c-table__button > .pf-c-table__sort-indicator > .fas` | Initiates icon within descending sorted and selected, sortable table header. **Required for sortable table columns** |
|
|
238
238
|
|
|
239
|
-
### Overflow menu usage,
|
|
239
|
+
### Overflow menu usage, desktop
|
|
240
240
|
|
|
241
241
|
```html
|
|
242
242
|
<table
|
|
243
|
-
class="pf-c-table
|
|
243
|
+
class="pf-c-table"
|
|
244
|
+
aria-label="This is a simple table example"
|
|
245
|
+
id="table-with-expanded-overflow-menu"
|
|
246
|
+
>
|
|
247
|
+
<thead>
|
|
248
|
+
<tr>
|
|
249
|
+
<th scope="col">Repositories</th>
|
|
250
|
+
<th scope="col">Branches</th>
|
|
251
|
+
<th scope="col">Pull requests</th>
|
|
252
|
+
<td></td>
|
|
253
|
+
</tr>
|
|
254
|
+
</thead>
|
|
255
|
+
|
|
256
|
+
<tbody>
|
|
257
|
+
<tr>
|
|
258
|
+
<td role="cell" data-label="Repository name">Repository 1</td>
|
|
259
|
+
<td role="cell" data-label="Branches">10</td>
|
|
260
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
261
|
+
<td class="pf-c-table__action" role="cell">
|
|
262
|
+
<div
|
|
263
|
+
class="pf-c-overflow-menu"
|
|
264
|
+
id="table-with-expanded-overflow-menu-overflow-menu-1"
|
|
265
|
+
>
|
|
266
|
+
<div class="pf-c-overflow-menu__content">
|
|
267
|
+
<div class="pf-c-overflow-menu__group pf-m-button-group">
|
|
268
|
+
<div class="pf-c-overflow-menu__item">
|
|
269
|
+
<button class="pf-c-button pf-m-primary" type="button">Start</button>
|
|
270
|
+
</div>
|
|
271
|
+
<div class="pf-c-overflow-menu__item">
|
|
272
|
+
<button class="pf-c-button pf-m-secondary" type="button">Stop</button>
|
|
273
|
+
</div>
|
|
274
|
+
</div>
|
|
275
|
+
</div>
|
|
276
|
+
</div>
|
|
277
|
+
</td>
|
|
278
|
+
</tr>
|
|
279
|
+
|
|
280
|
+
<tr>
|
|
281
|
+
<td role="cell" data-label="Repository name">Repository 2</td>
|
|
282
|
+
<td role="cell" data-label="Branches">10</td>
|
|
283
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
284
|
+
<td class="pf-c-table__action" role="cell">
|
|
285
|
+
<div
|
|
286
|
+
class="pf-c-overflow-menu"
|
|
287
|
+
id="table-with-expanded-overflow-menu-overflow-menu-2"
|
|
288
|
+
>
|
|
289
|
+
<div class="pf-c-overflow-menu__content">
|
|
290
|
+
<div class="pf-c-overflow-menu__group pf-m-button-group">
|
|
291
|
+
<div class="pf-c-overflow-menu__item">
|
|
292
|
+
<button class="pf-c-button pf-m-primary" type="button">Start</button>
|
|
293
|
+
</div>
|
|
294
|
+
<div class="pf-c-overflow-menu__item">
|
|
295
|
+
<button class="pf-c-button pf-m-secondary" type="button">Stop</button>
|
|
296
|
+
</div>
|
|
297
|
+
</div>
|
|
298
|
+
</div>
|
|
299
|
+
</div>
|
|
300
|
+
</td>
|
|
301
|
+
</tr>
|
|
302
|
+
</tbody>
|
|
303
|
+
</table>
|
|
304
|
+
|
|
305
|
+
```
|
|
306
|
+
|
|
307
|
+
### Overflow menu usage, overflow menu collapsed
|
|
308
|
+
|
|
309
|
+
```html
|
|
310
|
+
<table
|
|
311
|
+
class="pf-c-table"
|
|
244
312
|
role="grid"
|
|
245
313
|
aria-label="This is a simple table example"
|
|
246
|
-
id="table-with-
|
|
314
|
+
id="table-with-overflow-menu-collapsed"
|
|
247
315
|
>
|
|
248
|
-
<caption>This is the table caption</caption>
|
|
249
316
|
<thead>
|
|
250
317
|
<tr role="row">
|
|
251
318
|
<th role="columnheader" scope="col">Repositories</th>
|
|
252
319
|
<th role="columnheader" scope="col">Branches</th>
|
|
253
320
|
<th role="columnheader" scope="col">Pull requests</th>
|
|
254
|
-
<
|
|
255
|
-
class="pf-m-action pf-m-fit-content pf-c-table__action"
|
|
256
|
-
role="columnheader"
|
|
257
|
-
scope="col"
|
|
258
|
-
>Overflow actions</th>
|
|
321
|
+
<td></td>
|
|
259
322
|
</tr>
|
|
260
323
|
</thead>
|
|
261
324
|
|
|
@@ -267,14 +330,14 @@ These classes can be used to ensure that the table changes between the tabular a
|
|
|
267
330
|
<td class="pf-c-table__action" role="cell">
|
|
268
331
|
<div
|
|
269
332
|
class="pf-c-overflow-menu"
|
|
270
|
-
id="table-with-
|
|
333
|
+
id="table-with-overflow-menu-collapsed-overflow-menu-1"
|
|
271
334
|
>
|
|
272
335
|
<div class="pf-c-overflow-menu__control">
|
|
273
336
|
<div class="pf-c-dropdown pf-m-expanded">
|
|
274
337
|
<button
|
|
275
338
|
class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
|
|
276
339
|
type="button"
|
|
277
|
-
id="table-with-
|
|
340
|
+
id="table-with-overflow-menu-collapsed-overflow-menu-1-dropdown-toggle"
|
|
278
341
|
aria-label="Generic options"
|
|
279
342
|
aria-expanded="true"
|
|
280
343
|
>
|
|
@@ -282,7 +345,7 @@ These classes can be used to ensure that the table changes between the tabular a
|
|
|
282
345
|
</button>
|
|
283
346
|
<ul
|
|
284
347
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
285
|
-
aria-labelledby="table-with-
|
|
348
|
+
aria-labelledby="table-with-overflow-menu-collapsed-overflow-menu-1-dropdown-toggle"
|
|
286
349
|
>
|
|
287
350
|
<li>
|
|
288
351
|
<button class="pf-c-dropdown__menu-item">Start</button>
|
|
@@ -304,14 +367,14 @@ These classes can be used to ensure that the table changes between the tabular a
|
|
|
304
367
|
<td class="pf-c-table__action" role="cell">
|
|
305
368
|
<div
|
|
306
369
|
class="pf-c-overflow-menu"
|
|
307
|
-
id="table-with-
|
|
370
|
+
id="table-with-overflow-menu-collapsed-overflow-menu-2"
|
|
308
371
|
>
|
|
309
372
|
<div class="pf-c-overflow-menu__control">
|
|
310
373
|
<div class="pf-c-dropdown">
|
|
311
374
|
<button
|
|
312
375
|
class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
|
|
313
376
|
type="button"
|
|
314
|
-
id="table-with-
|
|
377
|
+
id="table-with-overflow-menu-collapsed-overflow-menu-2-dropdown-toggle"
|
|
315
378
|
aria-label="Generic options"
|
|
316
379
|
aria-expanded="true"
|
|
317
380
|
>
|
|
@@ -319,7 +382,7 @@ These classes can be used to ensure that the table changes between the tabular a
|
|
|
319
382
|
</button>
|
|
320
383
|
<ul
|
|
321
384
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
322
|
-
aria-labelledby="table-with-
|
|
385
|
+
aria-labelledby="table-with-overflow-menu-collapsed-overflow-menu-2-dropdown-toggle"
|
|
323
386
|
hidden
|
|
324
387
|
>
|
|
325
388
|
<li>
|
|
@@ -339,68 +402,94 @@ These classes can be used to ensure that the table changes between the tabular a
|
|
|
339
402
|
|
|
340
403
|
```
|
|
341
404
|
|
|
342
|
-
### Overflow menu usage,
|
|
405
|
+
### Overflow menu usage, mobile
|
|
343
406
|
|
|
344
407
|
```html
|
|
345
408
|
<table
|
|
346
|
-
class="pf-c-table"
|
|
409
|
+
class="pf-c-table pf-m-grid"
|
|
410
|
+
role="grid"
|
|
347
411
|
aria-label="This is a simple table example"
|
|
348
|
-
id="table-with-
|
|
412
|
+
id="table-with-overflow-menu-collapsed-mobile"
|
|
349
413
|
>
|
|
350
|
-
<caption>This is the table caption</caption>
|
|
351
414
|
<thead>
|
|
352
|
-
<tr>
|
|
353
|
-
<th scope="col">Repositories</th>
|
|
354
|
-
<th scope="col">Branches</th>
|
|
355
|
-
<th scope="col">Pull requests</th>
|
|
356
|
-
<
|
|
357
|
-
class="pf-m-action pf-m-fit-content pf-c-table__action"
|
|
358
|
-
scope="col"
|
|
359
|
-
>Overflow actions</th>
|
|
415
|
+
<tr role="row">
|
|
416
|
+
<th role="columnheader" scope="col">Repositories</th>
|
|
417
|
+
<th role="columnheader" scope="col">Branches</th>
|
|
418
|
+
<th role="columnheader" scope="col">Pull requests</th>
|
|
419
|
+
<td></td>
|
|
360
420
|
</tr>
|
|
361
421
|
</thead>
|
|
362
422
|
|
|
363
|
-
<tbody>
|
|
364
|
-
<tr>
|
|
423
|
+
<tbody role="rowgroup">
|
|
424
|
+
<tr role="row">
|
|
365
425
|
<td role="cell" data-label="Repository name">Repository 1</td>
|
|
366
426
|
<td role="cell" data-label="Branches">10</td>
|
|
367
427
|
<td role="cell" data-label="Pull requests">25</td>
|
|
368
428
|
<td class="pf-c-table__action" role="cell">
|
|
369
429
|
<div
|
|
370
430
|
class="pf-c-overflow-menu"
|
|
371
|
-
id="table-with-
|
|
431
|
+
id="table-with-overflow-menu-collapsed-mobile-overflow-menu-1"
|
|
372
432
|
>
|
|
373
|
-
<div class="pf-c-overflow-
|
|
374
|
-
<div class="pf-c-
|
|
375
|
-
<
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
433
|
+
<div class="pf-c-overflow-menu__control">
|
|
434
|
+
<div class="pf-c-dropdown pf-m-expanded">
|
|
435
|
+
<button
|
|
436
|
+
class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
|
|
437
|
+
type="button"
|
|
438
|
+
id="table-with-overflow-menu-collapsed-mobile-overflow-menu-1-dropdown-toggle"
|
|
439
|
+
aria-label="Generic options"
|
|
440
|
+
aria-expanded="true"
|
|
441
|
+
>
|
|
442
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
443
|
+
</button>
|
|
444
|
+
<ul
|
|
445
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
446
|
+
aria-labelledby="table-with-overflow-menu-collapsed-mobile-overflow-menu-1-dropdown-toggle"
|
|
447
|
+
>
|
|
448
|
+
<li>
|
|
449
|
+
<button class="pf-c-dropdown__menu-item">Start</button>
|
|
450
|
+
</li>
|
|
451
|
+
<li>
|
|
452
|
+
<button class="pf-c-dropdown__menu-item">Stop</button>
|
|
453
|
+
</li>
|
|
454
|
+
</ul>
|
|
381
455
|
</div>
|
|
382
456
|
</div>
|
|
383
457
|
</div>
|
|
384
458
|
</td>
|
|
385
459
|
</tr>
|
|
386
460
|
|
|
387
|
-
<tr>
|
|
461
|
+
<tr role="row">
|
|
388
462
|
<td role="cell" data-label="Repository name">Repository 2</td>
|
|
389
463
|
<td role="cell" data-label="Branches">10</td>
|
|
390
464
|
<td role="cell" data-label="Pull requests">25</td>
|
|
391
465
|
<td class="pf-c-table__action" role="cell">
|
|
392
466
|
<div
|
|
393
467
|
class="pf-c-overflow-menu"
|
|
394
|
-
id="table-with-
|
|
468
|
+
id="table-with-overflow-menu-collapsed-mobile-overflow-menu-2"
|
|
395
469
|
>
|
|
396
|
-
<div class="pf-c-overflow-
|
|
397
|
-
<div class="pf-c-
|
|
398
|
-
<
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
470
|
+
<div class="pf-c-overflow-menu__control">
|
|
471
|
+
<div class="pf-c-dropdown">
|
|
472
|
+
<button
|
|
473
|
+
class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
|
|
474
|
+
type="button"
|
|
475
|
+
id="table-with-overflow-menu-collapsed-mobile-overflow-menu-2-dropdown-toggle"
|
|
476
|
+
aria-label="Generic options"
|
|
477
|
+
aria-expanded="true"
|
|
478
|
+
>
|
|
479
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
480
|
+
</button>
|
|
481
|
+
<ul
|
|
482
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
483
|
+
aria-labelledby="table-with-overflow-menu-collapsed-mobile-overflow-menu-2-dropdown-toggle"
|
|
484
|
+
hidden
|
|
485
|
+
>
|
|
486
|
+
<li>
|
|
487
|
+
<button class="pf-c-dropdown__menu-item">Start</button>
|
|
488
|
+
</li>
|
|
489
|
+
<li>
|
|
490
|
+
<button class="pf-c-dropdown__menu-item">Stop</button>
|
|
491
|
+
</li>
|
|
492
|
+
</ul>
|
|
404
493
|
</div>
|
|
405
494
|
</div>
|
|
406
495
|
</div>
|