@patternfly/patternfly 6.0.0-alpha.226 → 6.0.0-alpha.227
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/components/Table/table.css +39 -34
- package/components/Table/table.scss +48 -45
- package/components/_index.css +39 -34
- package/docs/components/Check/examples/Check.md +10 -15
- package/docs/components/DataList/examples/DataList.md +0 -13
- package/docs/components/InlineEdit/examples/InlineEdit.md +34 -7
- package/docs/components/Menu/examples/Menu.md +3 -12
- package/docs/components/Table/examples/Table.md +3796 -1216
- package/docs/components/Toolbar/examples/Toolbar.md +0 -5
- package/docs/demos/Card/examples/Card.md +38 -14
- package/docs/demos/CardView/examples/CardView.md +0 -1
- package/docs/demos/DataList/examples/DataList.md +65 -53
- package/docs/demos/DescriptionList/examples/DescriptionList.md +30 -5
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +0 -1
- package/docs/demos/Table/examples/Table.md +1482 -548
- package/docs/demos/Tabs/examples/Tabs.md +66 -48
- package/docs/demos/Toolbar/examples/Toolbar.md +176 -58
- package/package.json +1 -1
- package/patternfly-no-globals.css +39 -34
- package/patternfly.css +39 -34
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -300,6 +300,11 @@
|
|
|
300
300
|
.pf-v6-c-table thead:where(.pf-v6-c-table__thead) {
|
|
301
301
|
--pf-v6-c-table--cell--FontSize: var(--pf-v6-c-table__thead--cell--FontSize);
|
|
302
302
|
--pf-v6-c-table--cell--FontWeight: var(--pf-v6-c-table__thead--cell--FontWeight);
|
|
303
|
+
--pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--m-truncate--cell--MinWidth);
|
|
304
|
+
--pf-v6-c-table--cell--MaxWidth: var(--pf-v6-c-table--m-truncate--cell--MaxWidth);
|
|
305
|
+
--pf-v6-c-table--cell--Overflow: hidden;
|
|
306
|
+
--pf-v6-c-table--cell--TextOverflow: ellipsis;
|
|
307
|
+
--pf-v6-c-table--cell--WhiteSpace: nowrap;
|
|
303
308
|
}
|
|
304
309
|
.pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nested-column-header button:where(.pf-v6-c-button) {
|
|
305
310
|
outline-offset: var(--pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset);
|
|
@@ -326,40 +331,6 @@
|
|
|
326
331
|
.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td).pf-m-help {
|
|
327
332
|
min-width: var(--pf-v6-c-table__th--m-help--MinWidth);
|
|
328
333
|
}
|
|
329
|
-
.pf-v6-c-table > thead, .pf-v6-c-table :where([class*=pf-v6-c-table]).pf-m-truncate, :where(.pf-v6-c-table) > :is(thead, tbody).pf-m-truncate {
|
|
330
|
-
--pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--m-truncate--cell--MinWidth);
|
|
331
|
-
--pf-v6-c-table--cell--MaxWidth: var(--pf-v6-c-table--m-truncate--cell--MaxWidth);
|
|
332
|
-
--pf-v6-c-table--cell--Overflow: hidden;
|
|
333
|
-
--pf-v6-c-table--cell--TextOverflow: ellipsis;
|
|
334
|
-
--pf-v6-c-table--cell--WhiteSpace: nowrap;
|
|
335
|
-
}
|
|
336
|
-
|
|
337
|
-
.pf-v6-c-table :where([class*=pf-v6-c-table]).pf-m-wrap, :where(.pf-v6-c-table) > :is(thead, tbody).pf-m-wrap {
|
|
338
|
-
--pf-v6-c-table--cell--MinWidth: 0;
|
|
339
|
-
--pf-v6-c-table--cell--MaxWidth: none;
|
|
340
|
-
--pf-v6-c-table--cell--Overflow: visible;
|
|
341
|
-
--pf-v6-c-table--cell--TextOverflow: clip;
|
|
342
|
-
--pf-v6-c-table--cell--WhiteSpace: normal;
|
|
343
|
-
}
|
|
344
|
-
.pf-v6-c-table :where([class*=pf-v6-c-table]).pf-m-nowrap, :where(.pf-v6-c-table) > :is(thead, tbody).pf-m-nowrap {
|
|
345
|
-
--pf-v6-c-table--cell--MinWidth: 0;
|
|
346
|
-
--pf-v6-c-table--cell--MaxWidth: none;
|
|
347
|
-
--pf-v6-c-table--cell--Overflow: visible;
|
|
348
|
-
--pf-v6-c-table--cell--TextOverflow: clip;
|
|
349
|
-
--pf-v6-c-table--cell--WhiteSpace: nowrap;
|
|
350
|
-
}
|
|
351
|
-
.pf-v6-c-table :where([class*=pf-v6-c-table]) .pf-v6-c-table__icon, .pf-v6-c-table :where([class*=pf-v6-c-table]).pf-m-fit-content, :where(.pf-v6-c-table) > :is(thead, tbody) .pf-v6-c-table__icon, :where(.pf-v6-c-table) > :is(thead, tbody).pf-m-fit-content {
|
|
352
|
-
--pf-v6-c-table--cell--MinWidth: fit-content;
|
|
353
|
-
--pf-v6-c-table--cell--MaxWidth: none;
|
|
354
|
-
--pf-v6-c-table--cell--Width: 1%;
|
|
355
|
-
--pf-v6-c-table--cell--Overflow: visible;
|
|
356
|
-
--pf-v6-c-table--cell--TextOverflow: clip;
|
|
357
|
-
--pf-v6-c-table--cell--WhiteSpace: nowrap;
|
|
358
|
-
}
|
|
359
|
-
.pf-v6-c-table :where([class*=pf-v6-c-table]).pf-m-break-word, :where(.pf-v6-c-table) > :is(thead, tbody).pf-m-break-word {
|
|
360
|
-
--pf-v6-c-table--cell--WordBreak: break-word;
|
|
361
|
-
--pf-v6-c-table--cell--WhiteSpace: normal;
|
|
362
|
-
}
|
|
363
334
|
.pf-v6-c-table.pf-m-no-border-rows > tbody:where(.pf-v6-c-table__tbody) {
|
|
364
335
|
--pf-v6-c-table__tr--BorderBlockEndWidth: 0;
|
|
365
336
|
--pf-v6-c-table__tbody--BorderBlockEndWidth: 0;
|
|
@@ -423,6 +394,40 @@
|
|
|
423
394
|
--pf-v6-c-table__sort-indicator--MarginInlineStart: 0;
|
|
424
395
|
}
|
|
425
396
|
|
|
397
|
+
[class*=pf-v6-c-table].pf-m-truncate {
|
|
398
|
+
--pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--m-truncate--cell--MinWidth);
|
|
399
|
+
--pf-v6-c-table--cell--MaxWidth: var(--pf-v6-c-table--m-truncate--cell--MaxWidth);
|
|
400
|
+
--pf-v6-c-table--cell--Overflow: hidden;
|
|
401
|
+
--pf-v6-c-table--cell--TextOverflow: ellipsis;
|
|
402
|
+
--pf-v6-c-table--cell--WhiteSpace: nowrap;
|
|
403
|
+
}
|
|
404
|
+
[class*=pf-v6-c-table].pf-m-wrap {
|
|
405
|
+
--pf-v6-c-table--cell--MinWidth: 0;
|
|
406
|
+
--pf-v6-c-table--cell--MaxWidth: none;
|
|
407
|
+
--pf-v6-c-table--cell--Overflow: visible;
|
|
408
|
+
--pf-v6-c-table--cell--TextOverflow: clip;
|
|
409
|
+
--pf-v6-c-table--cell--WhiteSpace: normal;
|
|
410
|
+
}
|
|
411
|
+
[class*=pf-v6-c-table].pf-m-nowrap {
|
|
412
|
+
--pf-v6-c-table--cell--MinWidth: 0;
|
|
413
|
+
--pf-v6-c-table--cell--MaxWidth: none;
|
|
414
|
+
--pf-v6-c-table--cell--Overflow: visible;
|
|
415
|
+
--pf-v6-c-table--cell--TextOverflow: clip;
|
|
416
|
+
--pf-v6-c-table--cell--WhiteSpace: nowrap;
|
|
417
|
+
}
|
|
418
|
+
[class*=pf-v6-c-table] .pf-v6-c-table__icon, [class*=pf-v6-c-table].pf-m-fit-content {
|
|
419
|
+
--pf-v6-c-table--cell--MinWidth: fit-content;
|
|
420
|
+
--pf-v6-c-table--cell--MaxWidth: none;
|
|
421
|
+
--pf-v6-c-table--cell--Width: 1%;
|
|
422
|
+
--pf-v6-c-table--cell--Overflow: visible;
|
|
423
|
+
--pf-v6-c-table--cell--TextOverflow: clip;
|
|
424
|
+
--pf-v6-c-table--cell--WhiteSpace: nowrap;
|
|
425
|
+
}
|
|
426
|
+
[class*=pf-v6-c-table].pf-m-break-word {
|
|
427
|
+
--pf-v6-c-table--cell--WordBreak: break-word;
|
|
428
|
+
--pf-v6-c-table--cell--WhiteSpace: normal;
|
|
429
|
+
}
|
|
430
|
+
|
|
426
431
|
.pf-v6-c-table__text {
|
|
427
432
|
--pf-v6-c-table--cell--MaxWidth: 100%;
|
|
428
433
|
position: relative;
|
|
@@ -400,6 +400,11 @@
|
|
|
400
400
|
thead:where(.#{$table}__thead) {
|
|
401
401
|
--#{$table}--cell--FontSize: var(--#{$table}__thead--cell--FontSize);
|
|
402
402
|
--#{$table}--cell--FontWeight: var(--#{$table}__thead--cell--FontWeight);
|
|
403
|
+
--#{$table}--cell--MinWidth: var(--#{$table}--m-truncate--cell--MinWidth);
|
|
404
|
+
--#{$table}--cell--MaxWidth: var(--#{$table}--m-truncate--cell--MaxWidth);
|
|
405
|
+
--#{$table}--cell--Overflow: hidden;
|
|
406
|
+
--#{$table}--cell--TextOverflow: ellipsis;
|
|
407
|
+
--#{$table}--cell--WhiteSpace: nowrap;
|
|
403
408
|
|
|
404
409
|
// stylelint-disable
|
|
405
410
|
&.pf-m-nested-column-header {
|
|
@@ -464,50 +469,6 @@
|
|
|
464
469
|
}
|
|
465
470
|
}
|
|
466
471
|
|
|
467
|
-
// - Table truncate - Table wrap - Table nowrap - Table fit content - Table wrap - Table break word
|
|
468
|
-
:where([class*='#{$table}']),
|
|
469
|
-
:where(&) > :is(thead, tbody) {
|
|
470
|
-
@at-root .#{$table} > thead,
|
|
471
|
-
&.pf-m-truncate {
|
|
472
|
-
--#{$table}--cell--MinWidth: var(--#{$table}--m-truncate--cell--MinWidth);
|
|
473
|
-
--#{$table}--cell--MaxWidth: var(--#{$table}--m-truncate--cell--MaxWidth);
|
|
474
|
-
--#{$table}--cell--Overflow: hidden;
|
|
475
|
-
--#{$table}--cell--TextOverflow: ellipsis;
|
|
476
|
-
--#{$table}--cell--WhiteSpace: nowrap;
|
|
477
|
-
}
|
|
478
|
-
|
|
479
|
-
&.pf-m-wrap {
|
|
480
|
-
--#{$table}--cell--MinWidth: 0;
|
|
481
|
-
--#{$table}--cell--MaxWidth: none;
|
|
482
|
-
--#{$table}--cell--Overflow: visible;
|
|
483
|
-
--#{$table}--cell--TextOverflow: clip;
|
|
484
|
-
--#{$table}--cell--WhiteSpace: normal;
|
|
485
|
-
}
|
|
486
|
-
|
|
487
|
-
&.pf-m-nowrap {
|
|
488
|
-
--#{$table}--cell--MinWidth: 0;
|
|
489
|
-
--#{$table}--cell--MaxWidth: none;
|
|
490
|
-
--#{$table}--cell--Overflow: visible;
|
|
491
|
-
--#{$table}--cell--TextOverflow: clip;
|
|
492
|
-
--#{$table}--cell--WhiteSpace: nowrap;
|
|
493
|
-
}
|
|
494
|
-
|
|
495
|
-
.#{$table}__icon,
|
|
496
|
-
&.pf-m-fit-content {
|
|
497
|
-
--#{$table}--cell--MinWidth: fit-content;
|
|
498
|
-
--#{$table}--cell--MaxWidth: none;
|
|
499
|
-
--#{$table}--cell--Width: 1%;
|
|
500
|
-
--#{$table}--cell--Overflow: visible;
|
|
501
|
-
--#{$table}--cell--TextOverflow: clip;
|
|
502
|
-
--#{$table}--cell--WhiteSpace: nowrap;
|
|
503
|
-
}
|
|
504
|
-
|
|
505
|
-
&.pf-m-break-word {
|
|
506
|
-
--#{$table}--cell--WordBreak: break-word;
|
|
507
|
-
--#{$table}--cell--WhiteSpace: normal;
|
|
508
|
-
}
|
|
509
|
-
}
|
|
510
|
-
|
|
511
472
|
// stylelint-disable selector-no-qualifying-type, selector-max-compound-selectors
|
|
512
473
|
&.pf-m-no-border-rows > tbody:where(.#{$table}__tbody) {
|
|
513
474
|
--#{$table}__tr--BorderBlockEndWidth: 0;
|
|
@@ -599,6 +560,48 @@
|
|
|
599
560
|
}
|
|
600
561
|
}
|
|
601
562
|
|
|
563
|
+
// - Table truncate - Table wrap - Table nowrap - Table fit content - Table wrap - Table break word
|
|
564
|
+
[class*='#{$table}'] {
|
|
565
|
+
&.pf-m-truncate {
|
|
566
|
+
--#{$table}--cell--MinWidth: var(--#{$table}--m-truncate--cell--MinWidth);
|
|
567
|
+
--#{$table}--cell--MaxWidth: var(--#{$table}--m-truncate--cell--MaxWidth);
|
|
568
|
+
--#{$table}--cell--Overflow: hidden;
|
|
569
|
+
--#{$table}--cell--TextOverflow: ellipsis;
|
|
570
|
+
--#{$table}--cell--WhiteSpace: nowrap;
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
&.pf-m-wrap {
|
|
574
|
+
--#{$table}--cell--MinWidth: 0;
|
|
575
|
+
--#{$table}--cell--MaxWidth: none;
|
|
576
|
+
--#{$table}--cell--Overflow: visible;
|
|
577
|
+
--#{$table}--cell--TextOverflow: clip;
|
|
578
|
+
--#{$table}--cell--WhiteSpace: normal;
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
&.pf-m-nowrap {
|
|
582
|
+
--#{$table}--cell--MinWidth: 0;
|
|
583
|
+
--#{$table}--cell--MaxWidth: none;
|
|
584
|
+
--#{$table}--cell--Overflow: visible;
|
|
585
|
+
--#{$table}--cell--TextOverflow: clip;
|
|
586
|
+
--#{$table}--cell--WhiteSpace: nowrap;
|
|
587
|
+
}
|
|
588
|
+
|
|
589
|
+
.#{$table}__icon,
|
|
590
|
+
&.pf-m-fit-content {
|
|
591
|
+
--#{$table}--cell--MinWidth: fit-content;
|
|
592
|
+
--#{$table}--cell--MaxWidth: none;
|
|
593
|
+
--#{$table}--cell--Width: 1%;
|
|
594
|
+
--#{$table}--cell--Overflow: visible;
|
|
595
|
+
--#{$table}--cell--TextOverflow: clip;
|
|
596
|
+
--#{$table}--cell--WhiteSpace: nowrap;
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
&.pf-m-break-word {
|
|
600
|
+
--#{$table}--cell--WordBreak: break-word;
|
|
601
|
+
--#{$table}--cell--WhiteSpace: normal;
|
|
602
|
+
}
|
|
603
|
+
}
|
|
604
|
+
|
|
602
605
|
// - Table text
|
|
603
606
|
.#{$table}__text {
|
|
604
607
|
--#{$table}--cell--MaxWidth: 100%;
|
|
@@ -947,7 +950,7 @@
|
|
|
947
950
|
}
|
|
948
951
|
|
|
949
952
|
@at-root :not(.#{$table}__control-row) ~ .#{$table}__expandable-row {
|
|
950
|
-
> .#{$table}__th,
|
|
953
|
+
> .#{$table}__th,
|
|
951
954
|
> .#{$table}__td {
|
|
952
955
|
padding-block-start: 0;
|
|
953
956
|
}
|
package/components/_index.css
CHANGED
|
@@ -16387,6 +16387,11 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
16387
16387
|
.pf-v6-c-table thead:where(.pf-v6-c-table__thead) {
|
|
16388
16388
|
--pf-v6-c-table--cell--FontSize: var(--pf-v6-c-table__thead--cell--FontSize);
|
|
16389
16389
|
--pf-v6-c-table--cell--FontWeight: var(--pf-v6-c-table__thead--cell--FontWeight);
|
|
16390
|
+
--pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--m-truncate--cell--MinWidth);
|
|
16391
|
+
--pf-v6-c-table--cell--MaxWidth: var(--pf-v6-c-table--m-truncate--cell--MaxWidth);
|
|
16392
|
+
--pf-v6-c-table--cell--Overflow: hidden;
|
|
16393
|
+
--pf-v6-c-table--cell--TextOverflow: ellipsis;
|
|
16394
|
+
--pf-v6-c-table--cell--WhiteSpace: nowrap;
|
|
16390
16395
|
}
|
|
16391
16396
|
.pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nested-column-header button:where(.pf-v6-c-button) {
|
|
16392
16397
|
outline-offset: var(--pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset);
|
|
@@ -16413,40 +16418,6 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
16413
16418
|
.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td).pf-m-help {
|
|
16414
16419
|
min-width: var(--pf-v6-c-table__th--m-help--MinWidth);
|
|
16415
16420
|
}
|
|
16416
|
-
.pf-v6-c-table > thead, .pf-v6-c-table :where([class*=pf-v6-c-table]).pf-m-truncate, :where(.pf-v6-c-table) > :is(thead, tbody).pf-m-truncate {
|
|
16417
|
-
--pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--m-truncate--cell--MinWidth);
|
|
16418
|
-
--pf-v6-c-table--cell--MaxWidth: var(--pf-v6-c-table--m-truncate--cell--MaxWidth);
|
|
16419
|
-
--pf-v6-c-table--cell--Overflow: hidden;
|
|
16420
|
-
--pf-v6-c-table--cell--TextOverflow: ellipsis;
|
|
16421
|
-
--pf-v6-c-table--cell--WhiteSpace: nowrap;
|
|
16422
|
-
}
|
|
16423
|
-
|
|
16424
|
-
.pf-v6-c-table :where([class*=pf-v6-c-table]).pf-m-wrap, :where(.pf-v6-c-table) > :is(thead, tbody).pf-m-wrap {
|
|
16425
|
-
--pf-v6-c-table--cell--MinWidth: 0;
|
|
16426
|
-
--pf-v6-c-table--cell--MaxWidth: none;
|
|
16427
|
-
--pf-v6-c-table--cell--Overflow: visible;
|
|
16428
|
-
--pf-v6-c-table--cell--TextOverflow: clip;
|
|
16429
|
-
--pf-v6-c-table--cell--WhiteSpace: normal;
|
|
16430
|
-
}
|
|
16431
|
-
.pf-v6-c-table :where([class*=pf-v6-c-table]).pf-m-nowrap, :where(.pf-v6-c-table) > :is(thead, tbody).pf-m-nowrap {
|
|
16432
|
-
--pf-v6-c-table--cell--MinWidth: 0;
|
|
16433
|
-
--pf-v6-c-table--cell--MaxWidth: none;
|
|
16434
|
-
--pf-v6-c-table--cell--Overflow: visible;
|
|
16435
|
-
--pf-v6-c-table--cell--TextOverflow: clip;
|
|
16436
|
-
--pf-v6-c-table--cell--WhiteSpace: nowrap;
|
|
16437
|
-
}
|
|
16438
|
-
.pf-v6-c-table :where([class*=pf-v6-c-table]) .pf-v6-c-table__icon, .pf-v6-c-table :where([class*=pf-v6-c-table]).pf-m-fit-content, :where(.pf-v6-c-table) > :is(thead, tbody) .pf-v6-c-table__icon, :where(.pf-v6-c-table) > :is(thead, tbody).pf-m-fit-content {
|
|
16439
|
-
--pf-v6-c-table--cell--MinWidth: fit-content;
|
|
16440
|
-
--pf-v6-c-table--cell--MaxWidth: none;
|
|
16441
|
-
--pf-v6-c-table--cell--Width: 1%;
|
|
16442
|
-
--pf-v6-c-table--cell--Overflow: visible;
|
|
16443
|
-
--pf-v6-c-table--cell--TextOverflow: clip;
|
|
16444
|
-
--pf-v6-c-table--cell--WhiteSpace: nowrap;
|
|
16445
|
-
}
|
|
16446
|
-
.pf-v6-c-table :where([class*=pf-v6-c-table]).pf-m-break-word, :where(.pf-v6-c-table) > :is(thead, tbody).pf-m-break-word {
|
|
16447
|
-
--pf-v6-c-table--cell--WordBreak: break-word;
|
|
16448
|
-
--pf-v6-c-table--cell--WhiteSpace: normal;
|
|
16449
|
-
}
|
|
16450
16421
|
.pf-v6-c-table.pf-m-no-border-rows > tbody:where(.pf-v6-c-table__tbody) {
|
|
16451
16422
|
--pf-v6-c-table__tr--BorderBlockEndWidth: 0;
|
|
16452
16423
|
--pf-v6-c-table__tbody--BorderBlockEndWidth: 0;
|
|
@@ -16510,6 +16481,40 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
16510
16481
|
--pf-v6-c-table__sort-indicator--MarginInlineStart: 0;
|
|
16511
16482
|
}
|
|
16512
16483
|
|
|
16484
|
+
[class*=pf-v6-c-table].pf-m-truncate {
|
|
16485
|
+
--pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--m-truncate--cell--MinWidth);
|
|
16486
|
+
--pf-v6-c-table--cell--MaxWidth: var(--pf-v6-c-table--m-truncate--cell--MaxWidth);
|
|
16487
|
+
--pf-v6-c-table--cell--Overflow: hidden;
|
|
16488
|
+
--pf-v6-c-table--cell--TextOverflow: ellipsis;
|
|
16489
|
+
--pf-v6-c-table--cell--WhiteSpace: nowrap;
|
|
16490
|
+
}
|
|
16491
|
+
[class*=pf-v6-c-table].pf-m-wrap {
|
|
16492
|
+
--pf-v6-c-table--cell--MinWidth: 0;
|
|
16493
|
+
--pf-v6-c-table--cell--MaxWidth: none;
|
|
16494
|
+
--pf-v6-c-table--cell--Overflow: visible;
|
|
16495
|
+
--pf-v6-c-table--cell--TextOverflow: clip;
|
|
16496
|
+
--pf-v6-c-table--cell--WhiteSpace: normal;
|
|
16497
|
+
}
|
|
16498
|
+
[class*=pf-v6-c-table].pf-m-nowrap {
|
|
16499
|
+
--pf-v6-c-table--cell--MinWidth: 0;
|
|
16500
|
+
--pf-v6-c-table--cell--MaxWidth: none;
|
|
16501
|
+
--pf-v6-c-table--cell--Overflow: visible;
|
|
16502
|
+
--pf-v6-c-table--cell--TextOverflow: clip;
|
|
16503
|
+
--pf-v6-c-table--cell--WhiteSpace: nowrap;
|
|
16504
|
+
}
|
|
16505
|
+
[class*=pf-v6-c-table] .pf-v6-c-table__icon, [class*=pf-v6-c-table].pf-m-fit-content {
|
|
16506
|
+
--pf-v6-c-table--cell--MinWidth: fit-content;
|
|
16507
|
+
--pf-v6-c-table--cell--MaxWidth: none;
|
|
16508
|
+
--pf-v6-c-table--cell--Width: 1%;
|
|
16509
|
+
--pf-v6-c-table--cell--Overflow: visible;
|
|
16510
|
+
--pf-v6-c-table--cell--TextOverflow: clip;
|
|
16511
|
+
--pf-v6-c-table--cell--WhiteSpace: nowrap;
|
|
16512
|
+
}
|
|
16513
|
+
[class*=pf-v6-c-table].pf-m-break-word {
|
|
16514
|
+
--pf-v6-c-table--cell--WordBreak: break-word;
|
|
16515
|
+
--pf-v6-c-table--cell--WhiteSpace: normal;
|
|
16516
|
+
}
|
|
16517
|
+
|
|
16513
16518
|
.pf-v6-c-table__text {
|
|
16514
16519
|
--pf-v6-c-table--cell--MaxWidth: 100%;
|
|
16515
16520
|
position: relative;
|
|
@@ -8,7 +8,7 @@ cssPrefix: pf-v6-c-check
|
|
|
8
8
|
### Basic
|
|
9
9
|
|
|
10
10
|
```html
|
|
11
|
-
<div class="pf-v6-c-check"
|
|
11
|
+
<div class="pf-v6-c-check">
|
|
12
12
|
<input
|
|
13
13
|
class="pf-v6-c-check__input"
|
|
14
14
|
type="checkbox"
|
|
@@ -23,7 +23,7 @@ cssPrefix: pf-v6-c-check
|
|
|
23
23
|
### Required
|
|
24
24
|
|
|
25
25
|
```html
|
|
26
|
-
<div class="pf-v6-c-check"
|
|
26
|
+
<div class="pf-v6-c-check">
|
|
27
27
|
<input
|
|
28
28
|
class="pf-v6-c-check__input"
|
|
29
29
|
type="checkbox"
|
|
@@ -41,7 +41,7 @@ cssPrefix: pf-v6-c-check
|
|
|
41
41
|
### Checked
|
|
42
42
|
|
|
43
43
|
```html
|
|
44
|
-
<div class="pf-v6-c-check"
|
|
44
|
+
<div class="pf-v6-c-check">
|
|
45
45
|
<input
|
|
46
46
|
class="pf-v6-c-check__input"
|
|
47
47
|
type="checkbox"
|
|
@@ -60,11 +60,7 @@ cssPrefix: pf-v6-c-check
|
|
|
60
60
|
### Label wrapping input
|
|
61
61
|
|
|
62
62
|
```html
|
|
63
|
-
<label
|
|
64
|
-
class="pf-v6-c-check"
|
|
65
|
-
id="check-label-wrapping-input-example"
|
|
66
|
-
for="check-label-wrapping-input-example-input"
|
|
67
|
-
>
|
|
63
|
+
<label class="pf-v6-c-check" for="check-label-wrapping-input-example-input">
|
|
68
64
|
<input
|
|
69
65
|
class="pf-v6-c-check__input"
|
|
70
66
|
type="checkbox"
|
|
@@ -79,7 +75,7 @@ cssPrefix: pf-v6-c-check
|
|
|
79
75
|
### Reversed
|
|
80
76
|
|
|
81
77
|
```html
|
|
82
|
-
<div class="pf-v6-c-check"
|
|
78
|
+
<div class="pf-v6-c-check">
|
|
83
79
|
<label
|
|
84
80
|
class="pf-v6-c-check__label"
|
|
85
81
|
for="check-reversed-example-input"
|
|
@@ -97,7 +93,7 @@ cssPrefix: pf-v6-c-check
|
|
|
97
93
|
### Disabled
|
|
98
94
|
|
|
99
95
|
```html
|
|
100
|
-
<div class="pf-v6-c-check"
|
|
96
|
+
<div class="pf-v6-c-check">
|
|
101
97
|
<input
|
|
102
98
|
class="pf-v6-c-check__input"
|
|
103
99
|
type="checkbox"
|
|
@@ -110,7 +106,7 @@ cssPrefix: pf-v6-c-check
|
|
|
110
106
|
for="check-disabled-example-input"
|
|
111
107
|
>Check disabled</label>
|
|
112
108
|
</div>
|
|
113
|
-
<div class="pf-v6-c-check"
|
|
109
|
+
<div class="pf-v6-c-check">
|
|
114
110
|
<input
|
|
115
111
|
class="pf-v6-c-check__input"
|
|
116
112
|
type="checkbox"
|
|
@@ -130,7 +126,7 @@ cssPrefix: pf-v6-c-check
|
|
|
130
126
|
### With description
|
|
131
127
|
|
|
132
128
|
```html
|
|
133
|
-
<div class="pf-v6-c-check"
|
|
129
|
+
<div class="pf-v6-c-check">
|
|
134
130
|
<input
|
|
135
131
|
class="pf-v6-c-check__input"
|
|
136
132
|
type="checkbox"
|
|
@@ -153,7 +149,7 @@ cssPrefix: pf-v6-c-check
|
|
|
153
149
|
### With body
|
|
154
150
|
|
|
155
151
|
```html
|
|
156
|
-
<div class="pf-v6-c-check"
|
|
152
|
+
<div class="pf-v6-c-check">
|
|
157
153
|
<input
|
|
158
154
|
class="pf-v6-c-check__input"
|
|
159
155
|
type="checkbox"
|
|
@@ -172,7 +168,7 @@ cssPrefix: pf-v6-c-check
|
|
|
172
168
|
### With description and body
|
|
173
169
|
|
|
174
170
|
```html
|
|
175
|
-
<div class="pf-v6-c-check"
|
|
171
|
+
<div class="pf-v6-c-check">
|
|
176
172
|
<input
|
|
177
173
|
class="pf-v6-c-check__input"
|
|
178
174
|
type="checkbox"
|
|
@@ -198,7 +194,6 @@ cssPrefix: pf-v6-c-check
|
|
|
198
194
|
```html
|
|
199
195
|
<label
|
|
200
196
|
class="pf-v6-c-check pf-m-standalone"
|
|
201
|
-
id="standalone-input-example"
|
|
202
197
|
for="standalone-input-example-input"
|
|
203
198
|
>
|
|
204
199
|
<input
|
|
@@ -129,7 +129,6 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
129
129
|
<div class="pf-v6-c-data-list__check">
|
|
130
130
|
<label
|
|
131
131
|
class="pf-v6-c-check pf-m-standalone"
|
|
132
|
-
id="data-list-checkboxes-actions-addl-cells-item-1""
|
|
133
132
|
for="data-list-checkboxes-actions-addl-cells-item-1"-input"
|
|
134
133
|
>
|
|
135
134
|
<input
|
|
@@ -188,7 +187,6 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
188
187
|
<div class="pf-v6-c-data-list__check">
|
|
189
188
|
<label
|
|
190
189
|
class="pf-v6-c-check pf-m-standalone"
|
|
191
|
-
id="data-list-checkboxes-actions-addl-cells-item-2""
|
|
192
190
|
for="data-list-checkboxes-actions-addl-cells-item-2"-input"
|
|
193
191
|
>
|
|
194
192
|
<input
|
|
@@ -248,7 +246,6 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
248
246
|
<div class="pf-v6-c-data-list__check">
|
|
249
247
|
<label
|
|
250
248
|
class="pf-v6-c-check pf-m-standalone"
|
|
251
|
-
id="data-list-checkboxes-actions-addl-cells-item-3""
|
|
252
249
|
for="data-list-checkboxes-actions-addl-cells-item-3"-input"
|
|
253
250
|
>
|
|
254
251
|
<input
|
|
@@ -1111,7 +1108,6 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1111
1108
|
<div class="pf-v6-c-data-list__check">
|
|
1112
1109
|
<label
|
|
1113
1110
|
class="pf-v6-c-check pf-m-standalone"
|
|
1114
|
-
id="data-list-compact-item-1""
|
|
1115
1111
|
for="data-list-compact-item-1"-input"
|
|
1116
1112
|
>
|
|
1117
1113
|
<input
|
|
@@ -1168,7 +1164,6 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1168
1164
|
<div class="pf-v6-c-data-list__check">
|
|
1169
1165
|
<label
|
|
1170
1166
|
class="pf-v6-c-check pf-m-standalone"
|
|
1171
|
-
id="data-list-compact-item-2""
|
|
1172
1167
|
for="data-list-compact-item-2"-input"
|
|
1173
1168
|
>
|
|
1174
1169
|
<input
|
|
@@ -1226,7 +1221,6 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1226
1221
|
<div class="pf-v6-c-data-list__check">
|
|
1227
1222
|
<label
|
|
1228
1223
|
class="pf-v6-c-check pf-m-standalone"
|
|
1229
|
-
id="data-list-compact-item-3""
|
|
1230
1224
|
for="data-list-compact-item-3"-input"
|
|
1231
1225
|
>
|
|
1232
1226
|
<input
|
|
@@ -1328,7 +1322,6 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1328
1322
|
<div class="pf-v6-c-data-list__check">
|
|
1329
1323
|
<label
|
|
1330
1324
|
class="pf-v6-c-check pf-m-standalone"
|
|
1331
|
-
id="data-list-default-fitting-item-1""
|
|
1332
1325
|
for="data-list-default-fitting-item-1"-input"
|
|
1333
1326
|
>
|
|
1334
1327
|
<input
|
|
@@ -1374,7 +1367,6 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1374
1367
|
<div class="pf-v6-c-data-list__check">
|
|
1375
1368
|
<label
|
|
1376
1369
|
class="pf-v6-c-check pf-m-standalone"
|
|
1377
|
-
id="data-list-flex-modifiers-item-1""
|
|
1378
1370
|
for="data-list-flex-modifiers-item-1"-input"
|
|
1379
1371
|
>
|
|
1380
1372
|
<input
|
|
@@ -1453,7 +1445,6 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1453
1445
|
<div class="pf-v6-c-data-list__check">
|
|
1454
1446
|
<label
|
|
1455
1447
|
class="pf-v6-c-check pf-m-standalone"
|
|
1456
|
-
id="data-list-flex-modifiers-2-item-1""
|
|
1457
1448
|
for="data-list-flex-modifiers-2-item-1"-input"
|
|
1458
1449
|
>
|
|
1459
1450
|
<input
|
|
@@ -1826,7 +1817,6 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1826
1817
|
<div class="pf-v6-c-data-list__check">
|
|
1827
1818
|
<label
|
|
1828
1819
|
class="pf-v6-c-check pf-m-standalone"
|
|
1829
|
-
id="data-list-draggable-item-1""
|
|
1830
1820
|
for="data-list-draggable-item-1"-input"
|
|
1831
1821
|
>
|
|
1832
1822
|
<input
|
|
@@ -1872,7 +1862,6 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1872
1862
|
<div class="pf-v6-c-data-list__check">
|
|
1873
1863
|
<label
|
|
1874
1864
|
class="pf-v6-c-check pf-m-standalone"
|
|
1875
|
-
id="data-list-draggable-item-2""
|
|
1876
1865
|
for="data-list-draggable-item-2"-input"
|
|
1877
1866
|
>
|
|
1878
1867
|
<input
|
|
@@ -1919,7 +1908,6 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1919
1908
|
<div class="pf-v6-c-data-list__check">
|
|
1920
1909
|
<label
|
|
1921
1910
|
class="pf-v6-c-check pf-m-standalone"
|
|
1922
|
-
id="data-list-draggable-item-3""
|
|
1923
1911
|
for="data-list-draggable-item-3"-input"
|
|
1924
1912
|
>
|
|
1925
1913
|
<input
|
|
@@ -1965,7 +1953,6 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1965
1953
|
<div class="pf-v6-c-data-list__check">
|
|
1966
1954
|
<label
|
|
1967
1955
|
class="pf-v6-c-check pf-m-standalone"
|
|
1968
|
-
id="data-list-draggable-item-4""
|
|
1969
1956
|
for="data-list-draggable-item-4"-input"
|
|
1970
1957
|
>
|
|
1971
1958
|
<input
|
|
@@ -470,7 +470,12 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
470
470
|
<caption class="pf-v6-c-table__caption">This is the table caption</caption>
|
|
471
471
|
|
|
472
472
|
<thead class="pf-v6-c-table__thead">
|
|
473
|
-
<tr
|
|
473
|
+
<tr
|
|
474
|
+
class="pf-v6-c-table__tr"
|
|
475
|
+
role&#x3D;&quot;row&quot;
|
|
476
|
+
[object
|
|
477
|
+
Object]
|
|
478
|
+
>
|
|
474
479
|
<th class="pf-v6-c-table__th" role="columnheader">Text input</th>
|
|
475
480
|
|
|
476
481
|
<th class="pf-v6-c-table__th" role="columnheader">Disabled text input</th>
|
|
@@ -481,14 +486,31 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
481
486
|
|
|
482
487
|
<th class="pf-v6-c-table__th" role="columnheader">Number</th>
|
|
483
488
|
|
|
484
|
-
<
|
|
489
|
+
<th
|
|
490
|
+
class="pf-v6-c-table__th pf-v6-c-table__cell-empty"
|
|
491
|
+
role="columnheader"
|
|
492
|
+
scope="col"
|
|
493
|
+
>
|
|
494
|
+
<span class="pf-v6-screen-reader">Actions</span>
|
|
495
|
+
</th>
|
|
485
496
|
|
|
486
|
-
<
|
|
497
|
+
<th
|
|
498
|
+
class="pf-v6-c-table__th pf-v6-c-table__cell-empty"
|
|
499
|
+
role="columnheader"
|
|
500
|
+
scope="col"
|
|
501
|
+
>
|
|
502
|
+
<span class="pf-v6-screen-reader">Actions</span>
|
|
503
|
+
</th>
|
|
487
504
|
</tr>
|
|
488
505
|
</thead>
|
|
489
506
|
|
|
490
507
|
<tbody class="pf-v6-c-table__tbody" role="rowgroup">
|
|
491
|
-
<tr
|
|
508
|
+
<tr
|
|
509
|
+
class="pf-v6-c-table__tr pf-m-inline-editable"
|
|
510
|
+
role&#x3D;&quot;row&quot;
|
|
511
|
+
[object
|
|
512
|
+
Object]
|
|
513
|
+
>
|
|
492
514
|
<th
|
|
493
515
|
class="pf-v6-c-table__th"
|
|
494
516
|
role="columnheader"
|
|
@@ -663,7 +685,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
663
685
|
</div>
|
|
664
686
|
</td>
|
|
665
687
|
|
|
666
|
-
<td class="pf-v6-c-table__td pf-v6-c-table__action"
|
|
688
|
+
<td class="pf-v6-c-table__td pf-v6-c-table__action">
|
|
667
689
|
<button
|
|
668
690
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
669
691
|
type="button"
|
|
@@ -677,7 +699,12 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
677
699
|
</td>
|
|
678
700
|
</tr>
|
|
679
701
|
|
|
680
|
-
<tr
|
|
702
|
+
<tr
|
|
703
|
+
class="pf-v6-c-table__tr"
|
|
704
|
+
role&#x3D;&quot;row&quot;
|
|
705
|
+
[object
|
|
706
|
+
Object]
|
|
707
|
+
>
|
|
681
708
|
<th
|
|
682
709
|
class="pf-v6-c-table__th"
|
|
683
710
|
role="columnheader"
|
|
@@ -852,7 +879,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
852
879
|
</div>
|
|
853
880
|
</td>
|
|
854
881
|
|
|
855
|
-
<td class="pf-v6-c-table__td pf-v6-c-table__action"
|
|
882
|
+
<td class="pf-v6-c-table__td pf-v6-c-table__action">
|
|
856
883
|
<button
|
|
857
884
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
858
885
|
type="button"
|
|
@@ -173,10 +173,7 @@ cssPrefix: pf-v6-c-menu
|
|
|
173
173
|
>
|
|
174
174
|
<span class="pf-v6-c-menu__item-main">
|
|
175
175
|
<span class="pf-v6-c-menu__item-check">
|
|
176
|
-
<div
|
|
177
|
-
class="pf-v6-c-check pf-m-standalone"
|
|
178
|
-
id="with-checkbox-example-check-1"
|
|
179
|
-
>
|
|
176
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
180
177
|
<input
|
|
181
178
|
class="pf-v6-c-check__input"
|
|
182
179
|
type="checkbox"
|
|
@@ -197,10 +194,7 @@ cssPrefix: pf-v6-c-menu
|
|
|
197
194
|
>
|
|
198
195
|
<span class="pf-v6-c-menu__item-main">
|
|
199
196
|
<span class="pf-v6-c-menu__item-check">
|
|
200
|
-
<div
|
|
201
|
-
class="pf-v6-c-check pf-m-standalone"
|
|
202
|
-
id="with-checkbox-example-check-2"
|
|
203
|
-
>
|
|
197
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
204
198
|
<input
|
|
205
199
|
class="pf-v6-c-check__input"
|
|
206
200
|
type="checkbox"
|
|
@@ -221,10 +215,7 @@ cssPrefix: pf-v6-c-menu
|
|
|
221
215
|
>
|
|
222
216
|
<span class="pf-v6-c-menu__item-main">
|
|
223
217
|
<span class="pf-v6-c-menu__item-check">
|
|
224
|
-
<div
|
|
225
|
-
class="pf-v6-c-check pf-m-standalone"
|
|
226
|
-
id="with-checkbox-example-check-3"
|
|
227
|
-
>
|
|
218
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
228
219
|
<input
|
|
229
220
|
class="pf-v6-c-check__input"
|
|
230
221
|
type="checkbox"
|