@patternfly/patternfly 6.0.0-alpha.109 → 6.0.0-alpha.110
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/README.md +1 -1
- package/docs/components/Label/examples/Label.md +60 -60
- package/docs/components/LogViewer/examples/LogViewer.md +40 -40
- package/docs/components/Login/examples/Login.md +5 -5
- package/docs/components/ModalBox/examples/ModalBox.md +1 -1
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +30 -30
- package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +10 -10
- package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
- package/docs/components/Select/deprecated/Select.md +64 -64
- package/docs/components/Slider/examples/Slider.md +39 -39
- package/docs/components/Table/examples/Table.md +66 -66
- package/docs/components/Toolbar/examples/Toolbar.md +5 -5
- package/docs/components/Wizard/examples/Wizard.md +1 -1
- package/docs/demos/Banner/examples/Banner.md +9 -9
- package/docs/demos/Card/examples/Card.md +96 -96
- package/docs/demos/CardView/examples/CardView.md +7 -7
- package/docs/demos/ContextSelector/examples/ContextSelector.md +1 -1
- package/docs/demos/Dashboard/examples/Dashboard.md +21 -21
- package/docs/demos/DataList/examples/DataList.md +8 -8
- package/docs/demos/DescriptionList/examples/DescriptionList.md +5 -5
- package/docs/demos/Masthead/examples/Masthead.md +1 -1
- package/docs/demos/Modal/examples/Modal.md +3 -3
- package/docs/demos/Nav/examples/Nav.md +2 -2
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +16 -16
- package/docs/demos/Page/examples/Page.md +2 -2
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +40 -40
- package/docs/demos/Table/examples/Table.md +86 -86
- package/docs/demos/Tabs/examples/Tabs.md +9 -9
- package/docs/demos/Toolbar/examples/Toolbar.md +7 -7
- package/docs/demos/Wizard/examples/Wizard.md +3 -3
- package/package.json +1 -1
|
@@ -442,7 +442,7 @@ section: patterns
|
|
|
442
442
|
aria-label="Select input"
|
|
443
443
|
>
|
|
444
444
|
<label
|
|
445
|
-
class="pf-v6-c-check pf-
|
|
445
|
+
class="pf-v6-c-check pf-v6-c-select__menu-item pf-m-description"
|
|
446
446
|
id="card-view-basic-example-toolbar-select-checkbox-status-active"
|
|
447
447
|
for="card-view-basic-example-toolbar-select-checkbox-status-active-input"
|
|
448
448
|
>
|
|
@@ -460,7 +460,7 @@ section: patterns
|
|
|
460
460
|
>This is a description</span>
|
|
461
461
|
</label>
|
|
462
462
|
<label
|
|
463
|
-
class="pf-v6-c-check pf-
|
|
463
|
+
class="pf-v6-c-check pf-v6-c-select__menu-item pf-m-description"
|
|
464
464
|
id="card-view-basic-example-toolbar-select-checkbox-status-canceled"
|
|
465
465
|
for="card-view-basic-example-toolbar-select-checkbox-status-canceled-input"
|
|
466
466
|
>
|
|
@@ -478,7 +478,7 @@ section: patterns
|
|
|
478
478
|
>This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
|
|
479
479
|
</label>
|
|
480
480
|
<label
|
|
481
|
-
class="pf-v6-c-check pf-
|
|
481
|
+
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
482
482
|
id="card-view-basic-example-toolbar-select-checkbox-status-paused"
|
|
483
483
|
for="card-view-basic-example-toolbar-select-checkbox-status-paused-input"
|
|
484
484
|
>
|
|
@@ -491,7 +491,7 @@ section: patterns
|
|
|
491
491
|
<span class="pf-v6-c-check__label">Paused</span>
|
|
492
492
|
</label>
|
|
493
493
|
<label
|
|
494
|
-
class="pf-v6-c-check pf-
|
|
494
|
+
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
495
495
|
id="card-view-basic-example-toolbar-select-checkbox-status-warning"
|
|
496
496
|
for="card-view-basic-example-toolbar-select-checkbox-status-warning-input"
|
|
497
497
|
>
|
|
@@ -504,7 +504,7 @@ section: patterns
|
|
|
504
504
|
<span class="pf-v6-c-check__label">Warning</span>
|
|
505
505
|
</label>
|
|
506
506
|
<label
|
|
507
|
-
class="pf-v6-c-check pf-
|
|
507
|
+
class="pf-v6-c-check pf-v6-c-select__menu-item"
|
|
508
508
|
id="card-view-basic-example-toolbar-select-checkbox-status-restarted"
|
|
509
509
|
for="card-view-basic-example-toolbar-select-checkbox-status-restarted-input"
|
|
510
510
|
>
|
|
@@ -527,7 +527,7 @@ section: patterns
|
|
|
527
527
|
id="card-view-basic-example-toolbar-overflow-menu"
|
|
528
528
|
>
|
|
529
529
|
<div
|
|
530
|
-
class="pf-v6-c-overflow-menu__content pf-
|
|
530
|
+
class="pf-v6-c-overflow-menu__content pf-v6-u-display-none pf-v6-u-display-flex-on-lg"
|
|
531
531
|
>
|
|
532
532
|
<div class="pf-v6-c-overflow-menu__group pf-m-button-group">
|
|
533
533
|
<div class="pf-v6-c-overflow-menu__item">
|
|
@@ -541,7 +541,7 @@ section: patterns
|
|
|
541
541
|
<div class="pf-v6-c-overflow-menu__control">
|
|
542
542
|
<div class="pf-v6-c-dropdown">
|
|
543
543
|
<button
|
|
544
|
-
class="pf-v6-c-button pf-
|
|
544
|
+
class="pf-v6-c-button pf-v6-c-dropdown__toggle pf-m-plain"
|
|
545
545
|
type="button"
|
|
546
546
|
id="card-view-basic-example-toolbar-overflow-menu-dropdown-toggle"
|
|
547
547
|
aria-label="Dropdown with additional options"
|
|
@@ -1415,7 +1415,7 @@ deprecated: true
|
|
|
1415
1415
|
<div class="pf-v6-c-toolbar__item">
|
|
1416
1416
|
<div
|
|
1417
1417
|
class="pf-v6-c-context-selector pf-m-page-insets pf-m-width-auto"
|
|
1418
|
-
style="--pf-
|
|
1418
|
+
style="--pf-v6-c-context-selector--Width: 270px;"
|
|
1419
1419
|
>
|
|
1420
1420
|
<span
|
|
1421
1421
|
id="context-selector-in-page-content-example-context-selector-label"
|
|
@@ -408,7 +408,7 @@ cssPrefix: pf-d-dashboard
|
|
|
408
408
|
</div>
|
|
409
409
|
<div
|
|
410
410
|
class="pf-v6-l-flex pf-m-grow pf-m-column pf-m-row-on-lg pf-m-justify-content-flex-end pf-m-justify-content-flex-start-on-lg pf-m-align-content-flex-end-on-lg"
|
|
411
|
-
style="row-gap: var(--pf-
|
|
411
|
+
style="row-gap: var(--pf-6-global--spacer--md);"
|
|
412
412
|
>
|
|
413
413
|
<div
|
|
414
414
|
class="pf-v6-l-flex__item"
|
|
@@ -422,7 +422,7 @@ cssPrefix: pf-d-dashboard
|
|
|
422
422
|
</div>
|
|
423
423
|
<div
|
|
424
424
|
class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
|
|
425
|
-
style="row-gap: var(--pf-
|
|
425
|
+
style="row-gap: var(--pf-6-global--spacer--md);"
|
|
426
426
|
>
|
|
427
427
|
<i
|
|
428
428
|
class="pf-v5-pficon pf-v5-pficon-on pf-v6-u-color-400"
|
|
@@ -510,11 +510,11 @@ cssPrefix: pf-d-dashboard
|
|
|
510
510
|
</div>
|
|
511
511
|
<div
|
|
512
512
|
class="pf-v6-l-flex pf-m-grow pf-m-column pf-m-row-on-lg pf-m-justify-content-flex-end pf-m-justify-content-flex-start-on-lg pf-m-align-content-flex-end-on-lg"
|
|
513
|
-
style="row-gap: var(--pf-
|
|
513
|
+
style="row-gap: var(--pf-6-global--spacer--md);"
|
|
514
514
|
>
|
|
515
515
|
<div
|
|
516
516
|
class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
|
|
517
|
-
style="row-gap: var(--pf-
|
|
517
|
+
style="row-gap: var(--pf-6-global--spacer--md);"
|
|
518
518
|
>
|
|
519
519
|
<i
|
|
520
520
|
class="pf-v5-pficon pf-v5-pficon-on pf-v6-u-danger-color-100"
|
|
@@ -592,7 +592,7 @@ cssPrefix: pf-d-dashboard
|
|
|
592
592
|
</div>
|
|
593
593
|
<div
|
|
594
594
|
class="pf-v6-l-flex pf-m-grow pf-m-column pf-m-row-on-lg pf-m-justify-content-flex-end pf-m-justify-content-flex-start-on-lg pf-m-align-content-flex-end-on-lg"
|
|
595
|
-
style="row-gap: var(--pf-
|
|
595
|
+
style="row-gap: var(--pf-6-global--spacer--md);"
|
|
596
596
|
>
|
|
597
597
|
<div
|
|
598
598
|
class="pf-v6-l-flex__item"
|
|
@@ -606,7 +606,7 @@ cssPrefix: pf-d-dashboard
|
|
|
606
606
|
</div>
|
|
607
607
|
<div
|
|
608
608
|
class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
|
|
609
|
-
style="row-gap: var(--pf-
|
|
609
|
+
style="row-gap: var(--pf-6-global--spacer--md);"
|
|
610
610
|
>
|
|
611
611
|
<i
|
|
612
612
|
class="pf-v5-pficon pf-v5-pficon-on pf-v6-u-color-400"
|
|
@@ -641,7 +641,7 @@ cssPrefix: pf-d-dashboard
|
|
|
641
641
|
</div>
|
|
642
642
|
<div
|
|
643
643
|
class="pf-v6-l-grid__item pf-m-gutter pf-m-4-col-on-lg pf-m-6-col-on-2xl"
|
|
644
|
-
style="--pf-
|
|
644
|
+
style="--pf-v6-l-grid--item--Order-on-lg:3"
|
|
645
645
|
>
|
|
646
646
|
<div class="pf-v6-l-flex pf-m-column">
|
|
647
647
|
<div
|
|
@@ -654,7 +654,7 @@ cssPrefix: pf-d-dashboard
|
|
|
654
654
|
<div class="pf-v6-c-card__body">
|
|
655
655
|
<div
|
|
656
656
|
class="pf-v6-l-gallery pf-m-gutter"
|
|
657
|
-
style="--pf-
|
|
657
|
+
style="--pf-v6-l-gallery--GridTemplateColumns--min: 100%; --pf-v6-l-gallery--GridTemplateColumns--min-on-sm: 180px; --pf-v6-l-gallery--GridTemplateColumns--min-on-lg: 150px; --pf-v6-l-gallery--GridTemplateColumns--max-on-sm: 1fr;"
|
|
658
658
|
>
|
|
659
659
|
<div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
|
|
660
660
|
<div class="pf-v6-l-flex__item">
|
|
@@ -674,14 +674,14 @@ cssPrefix: pf-d-dashboard
|
|
|
674
674
|
aria-hidden="true"
|
|
675
675
|
></i>
|
|
676
676
|
</div>
|
|
677
|
-
<div class="pf-v6-l-flex__item pf-
|
|
677
|
+
<div class="pf-v6-l-flex__item pf-v6-u-text-nowrap">
|
|
678
678
|
<span class="popover-parent">
|
|
679
679
|
<a href="#">Control Panel</a>
|
|
680
680
|
</span>
|
|
681
681
|
</div>
|
|
682
682
|
</div>
|
|
683
683
|
<div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
|
|
684
|
-
<div class="pf-v6-l-flex__item pf-
|
|
684
|
+
<div class="pf-v6-l-flex__item pf-v6-u-text-nowrap">
|
|
685
685
|
<i
|
|
686
686
|
class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
|
|
687
687
|
aria-hidden="true"
|
|
@@ -694,7 +694,7 @@ cssPrefix: pf-d-dashboard
|
|
|
694
694
|
<a href="#">Operators</a>
|
|
695
695
|
</div>
|
|
696
696
|
<div class="pf-v6-l-flex__item">
|
|
697
|
-
<span class="pf-
|
|
697
|
+
<span class="pf-v6-u-color-200">1 degraged</span>
|
|
698
698
|
</div>
|
|
699
699
|
</div>
|
|
700
700
|
</div>
|
|
@@ -885,7 +885,7 @@ cssPrefix: pf-d-dashboard
|
|
|
885
885
|
></i>
|
|
886
886
|
</span>
|
|
887
887
|
<h2
|
|
888
|
-
class="pf-v6-c-notification-drawer__list-item-header-title pf-
|
|
888
|
+
class="pf-v6-c-notification-drawer__list-item-header-title pf-v6-u-danger-color-200"
|
|
889
889
|
>
|
|
890
890
|
<span
|
|
891
891
|
class="pf-v6-screen-reader"
|
|
@@ -913,7 +913,7 @@ cssPrefix: pf-d-dashboard
|
|
|
913
913
|
></i>
|
|
914
914
|
</span>
|
|
915
915
|
<h2
|
|
916
|
-
class="pf-v6-c-notification-drawer__list-item-header-title pf-
|
|
916
|
+
class="pf-v6-c-notification-drawer__list-item-header-title pf-v6-u-warning-color-200"
|
|
917
917
|
>
|
|
918
918
|
<span
|
|
919
919
|
class="pf-v6-screen-reader"
|
|
@@ -1039,13 +1039,13 @@ cssPrefix: pf-d-dashboard
|
|
|
1039
1039
|
<div class="pf-v6-l-grid pf-m-gutter">
|
|
1040
1040
|
<div class="pf-v6-l-grid__item pf-m-4-col-on-md">
|
|
1041
1041
|
<div
|
|
1042
|
-
class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-
|
|
1042
|
+
class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md"
|
|
1043
1043
|
>
|
|
1044
1044
|
<div class="pf-v6-l-flex__item">
|
|
1045
1045
|
<b>Temperature</b>
|
|
1046
1046
|
</div>
|
|
1047
1047
|
<hr
|
|
1048
|
-
class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-
|
|
1048
|
+
class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md"
|
|
1049
1049
|
/>
|
|
1050
1050
|
<div class="pf-v6-l-flex__item">
|
|
1051
1051
|
<span>64C</span>
|
|
@@ -1074,17 +1074,17 @@ cssPrefix: pf-d-dashboard
|
|
|
1074
1074
|
</div>
|
|
1075
1075
|
</div>
|
|
1076
1076
|
</div>
|
|
1077
|
-
<hr class="pf-v6-c-divider pf-
|
|
1077
|
+
<hr class="pf-v6-c-divider pf-v6-u-hidden-on-md" />
|
|
1078
1078
|
<div class="pf-v6-l-grid pf-m-gutter">
|
|
1079
1079
|
<div class="pf-v6-l-grid__item pf-m-4-col-on-md">
|
|
1080
1080
|
<div
|
|
1081
|
-
class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-
|
|
1081
|
+
class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md"
|
|
1082
1082
|
>
|
|
1083
1083
|
<div class="pf-v6-l-flex__item">
|
|
1084
1084
|
<b>Speed</b>
|
|
1085
1085
|
</div>
|
|
1086
1086
|
<hr
|
|
1087
|
-
class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-
|
|
1087
|
+
class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md"
|
|
1088
1088
|
/>
|
|
1089
1089
|
<div class="pf-v6-l-flex__item">
|
|
1090
1090
|
<span>2.3Ghz</span>
|
|
@@ -1230,7 +1230,7 @@ cssPrefix: pf-d-dashboard
|
|
|
1230
1230
|
</div>
|
|
1231
1231
|
<div
|
|
1232
1232
|
class="pf-v6-l-grid__item pf-m-gutter pf-m-4-col-on-lg pf-m-3-col-on-2xl"
|
|
1233
|
-
style="--pf-
|
|
1233
|
+
style="--pf-v6-l-grid--item--Order-on-lg:2"
|
|
1234
1234
|
>
|
|
1235
1235
|
<div
|
|
1236
1236
|
class="pf-v6-l-flex pf-m-column pf-m-row-on-md pf-m-column-on-lg"
|
|
@@ -1300,7 +1300,7 @@ cssPrefix: pf-d-dashboard
|
|
|
1300
1300
|
id="dashboard-demo-data-list-card-1"
|
|
1301
1301
|
>
|
|
1302
1302
|
<div
|
|
1303
|
-
class="pf-v6-c-card__header pf-
|
|
1303
|
+
class="pf-v6-c-card__header pf-v6-u-align-items-flex-start"
|
|
1304
1304
|
>
|
|
1305
1305
|
<div
|
|
1306
1306
|
class="pf-v6-c-card__title"
|
|
@@ -1452,7 +1452,7 @@ cssPrefix: pf-d-dashboard
|
|
|
1452
1452
|
</div>
|
|
1453
1453
|
<div
|
|
1454
1454
|
class="pf-v6-l-grid__item pf-m-4-col-on-lg pf-m-3-col-on-2xl"
|
|
1455
|
-
style="--pf-
|
|
1455
|
+
style="--pf-v6-l-grid--item--Order-on-lg:4"
|
|
1456
1456
|
>
|
|
1457
1457
|
<div class="pf-v6-l-flex pf-m-column">
|
|
1458
1458
|
<div class="pf-v6-c-card" id="dashboard-demo-events-card-1">
|
|
@@ -323,7 +323,7 @@ wrapperTag: div
|
|
|
323
323
|
id="data-list-basic-example-toolbar-overflow-menu"
|
|
324
324
|
>
|
|
325
325
|
<div
|
|
326
|
-
class="pf-v6-c-overflow-menu__content pf-
|
|
326
|
+
class="pf-v6-c-overflow-menu__content pf-v6-u-display-none pf-v6-u-display-flex-on-lg"
|
|
327
327
|
>
|
|
328
328
|
<div class="pf-v6-c-overflow-menu__group pf-m-button-group">
|
|
329
329
|
<div class="pf-v6-c-overflow-menu__item">
|
|
@@ -337,7 +337,7 @@ wrapperTag: div
|
|
|
337
337
|
<div class="pf-v6-c-overflow-menu__control">
|
|
338
338
|
<div class="pf-v6-c-dropdown">
|
|
339
339
|
<button
|
|
340
|
-
class="pf-v6-c-button pf-
|
|
340
|
+
class="pf-v6-c-button pf-v6-c-dropdown__toggle pf-m-plain"
|
|
341
341
|
type="button"
|
|
342
342
|
id="data-list-basic-example-toolbar-overflow-menu-dropdown-toggle"
|
|
343
343
|
aria-label="Dropdown with additional options"
|
|
@@ -1242,7 +1242,7 @@ wrapperTag: div
|
|
|
1242
1242
|
id="data-list-actionable-example-toolbar-overflow-menu"
|
|
1243
1243
|
>
|
|
1244
1244
|
<div
|
|
1245
|
-
class="pf-v6-c-overflow-menu__content pf-
|
|
1245
|
+
class="pf-v6-c-overflow-menu__content pf-v6-u-display-none pf-v6-u-display-flex-on-lg"
|
|
1246
1246
|
>
|
|
1247
1247
|
<div class="pf-v6-c-overflow-menu__group pf-m-button-group">
|
|
1248
1248
|
<div class="pf-v6-c-overflow-menu__item">
|
|
@@ -1263,7 +1263,7 @@ wrapperTag: div
|
|
|
1263
1263
|
<div class="pf-v6-c-overflow-menu__control">
|
|
1264
1264
|
<div class="pf-v6-c-dropdown">
|
|
1265
1265
|
<button
|
|
1266
|
-
class="pf-v6-c-button pf-
|
|
1266
|
+
class="pf-v6-c-button pf-v6-c-dropdown__toggle pf-m-plain"
|
|
1267
1267
|
type="button"
|
|
1268
1268
|
id="data-list-actionable-example-toolbar-overflow-menu-dropdown-toggle"
|
|
1269
1269
|
aria-label="Dropdown with additional options"
|
|
@@ -2214,7 +2214,7 @@ wrapperTag: div
|
|
|
2214
2214
|
id="data-list-expandable-example-toolbar-overflow-menu"
|
|
2215
2215
|
>
|
|
2216
2216
|
<div
|
|
2217
|
-
class="pf-v6-c-overflow-menu__content pf-
|
|
2217
|
+
class="pf-v6-c-overflow-menu__content pf-v6-u-display-none pf-v6-u-display-flex-on-lg"
|
|
2218
2218
|
>
|
|
2219
2219
|
<div class="pf-v6-c-overflow-menu__group pf-m-button-group">
|
|
2220
2220
|
<div class="pf-v6-c-overflow-menu__item">
|
|
@@ -2228,7 +2228,7 @@ wrapperTag: div
|
|
|
2228
2228
|
<div class="pf-v6-c-overflow-menu__control">
|
|
2229
2229
|
<div class="pf-v6-c-dropdown">
|
|
2230
2230
|
<button
|
|
2231
|
-
class="pf-v6-c-button pf-
|
|
2231
|
+
class="pf-v6-c-button pf-v6-c-dropdown__toggle pf-m-plain"
|
|
2232
2232
|
type="button"
|
|
2233
2233
|
id="data-list-expandable-example-toolbar-overflow-menu-dropdown-toggle"
|
|
2234
2234
|
aria-label="Dropdown with additional options"
|
|
@@ -3746,7 +3746,7 @@ wrapperTag: div
|
|
|
3746
3746
|
id="data-list-static-bottom-example-toolbar-overflow-menu"
|
|
3747
3747
|
>
|
|
3748
3748
|
<div
|
|
3749
|
-
class="pf-v6-c-overflow-menu__content pf-
|
|
3749
|
+
class="pf-v6-c-overflow-menu__content pf-v6-u-display-none pf-v6-u-display-flex-on-lg"
|
|
3750
3750
|
>
|
|
3751
3751
|
<div class="pf-v6-c-overflow-menu__group pf-m-button-group">
|
|
3752
3752
|
<div class="pf-v6-c-overflow-menu__item">
|
|
@@ -3767,7 +3767,7 @@ wrapperTag: div
|
|
|
3767
3767
|
<div class="pf-v6-c-overflow-menu__control">
|
|
3768
3768
|
<div class="pf-v6-c-dropdown">
|
|
3769
3769
|
<button
|
|
3770
|
-
class="pf-v6-c-button pf-
|
|
3770
|
+
class="pf-v6-c-button pf-v6-c-dropdown__toggle pf-m-plain"
|
|
3771
3771
|
type="button"
|
|
3772
3772
|
id="data-list-static-bottom-example-toolbar-overflow-menu-dropdown-toggle"
|
|
3773
3773
|
aria-label="Dropdown with additional options"
|
|
@@ -888,7 +888,7 @@ cssPrefix: pf-d-description-list
|
|
|
888
888
|
</dt>
|
|
889
889
|
<dd class="pf-v6-c-description-list__description">
|
|
890
890
|
<p
|
|
891
|
-
class="pf-v6-c-description-list__text pf-
|
|
891
|
+
class="pf-v6-c-description-list__text pf-v6-u-color-200"
|
|
892
892
|
>Nod selector is not available at this time</p>
|
|
893
893
|
</dd>
|
|
894
894
|
</div>
|
|
@@ -898,7 +898,7 @@ cssPrefix: pf-d-description-list
|
|
|
898
898
|
</dt>
|
|
899
899
|
<dd class="pf-v6-c-description-list__description">
|
|
900
900
|
<div
|
|
901
|
-
class="pf-v6-c-description-list__text pf-
|
|
901
|
+
class="pf-v6-c-description-list__text pf-v6-u-color-200"
|
|
902
902
|
>No tolerations</div>
|
|
903
903
|
</dd>
|
|
904
904
|
</div>
|
|
@@ -908,7 +908,7 @@ cssPrefix: pf-d-description-list
|
|
|
908
908
|
</dt>
|
|
909
909
|
<dd class="pf-v6-c-description-list__description">
|
|
910
910
|
<div
|
|
911
|
-
class="pf-v6-c-description-list__text pf-
|
|
911
|
+
class="pf-v6-c-description-list__text pf-v6-u-color-200"
|
|
912
912
|
>No annotations</div>
|
|
913
913
|
</dd>
|
|
914
914
|
</div>
|
|
@@ -963,7 +963,7 @@ cssPrefix: pf-d-description-list
|
|
|
963
963
|
</dt>
|
|
964
964
|
<dd class="pf-v6-c-description-list__description">
|
|
965
965
|
<div
|
|
966
|
-
class="pf-v6-c-description-list__text pf-
|
|
966
|
+
class="pf-v6-c-description-list__text pf-v6-u-color-200"
|
|
967
967
|
>None</div>
|
|
968
968
|
</dd>
|
|
969
969
|
</div>
|
|
@@ -1037,7 +1037,7 @@ cssPrefix: pf-d-description-list
|
|
|
1037
1037
|
</dt>
|
|
1038
1038
|
<dd class="pf-v6-c-description-list__description">
|
|
1039
1039
|
<div
|
|
1040
|
-
class="pf-v6-c-description-list__text pf-
|
|
1040
|
+
class="pf-v6-c-description-list__text pf-v6-u-color-200"
|
|
1041
1041
|
>Not configured</div>
|
|
1042
1042
|
</dd>
|
|
1043
1043
|
</div>
|
|
@@ -2095,7 +2095,7 @@ wrapperTag: div
|
|
|
2095
2095
|
|
|
2096
2096
|
<div
|
|
2097
2097
|
class="pf-v6-c-toolbar__item pf-m-overflow-container"
|
|
2098
|
-
style="--pf-
|
|
2098
|
+
style="--pf-v6-c-toolbar__item--MinWidth: 18ch;"
|
|
2099
2099
|
>
|
|
2100
2100
|
<nav
|
|
2101
2101
|
class="pf-v6-c-nav pf-m-scrollable pf-m-horizontal"
|
|
@@ -1060,7 +1060,7 @@ section: components
|
|
|
1060
1060
|
<div class="pf-v6-c-modal-box__body">
|
|
1061
1061
|
<p
|
|
1062
1062
|
id="modal-md-description"
|
|
1063
|
-
>The "aria-describedby" attribute can be applied to any text that adequately describes the modal's purpose. It does not have to be assigned to ".pf-
|
|
1063
|
+
>The "aria-describedby" attribute can be applied to any text that adequately describes the modal's purpose. It does not have to be assigned to ".pf-v6-c-modal-box__body"</p>
|
|
1064
1064
|
<p>Form here</p>
|
|
1065
1065
|
</div>
|
|
1066
1066
|
<footer class="pf-v6-c-modal-box__footer">
|
|
@@ -1412,7 +1412,7 @@ section: components
|
|
|
1412
1412
|
<div class="pf-v6-c-modal-box__body">
|
|
1413
1413
|
<p
|
|
1414
1414
|
id="modal-lg-description"
|
|
1415
|
-
>The "aria-describedby" attribute can be applied to any text that adequately describes the modal's purpose. It does not have to be assigned to ".pf-
|
|
1415
|
+
>The "aria-describedby" attribute can be applied to any text that adequately describes the modal's purpose. It does not have to be assigned to ".pf-v6-c-modal-box__body"</p>
|
|
1416
1416
|
<p>Form here</p>
|
|
1417
1417
|
</div>
|
|
1418
1418
|
<footer class="pf-v6-c-modal-box__footer">
|
|
@@ -1764,7 +1764,7 @@ section: components
|
|
|
1764
1764
|
<div class="pf-v6-c-modal-box__body">
|
|
1765
1765
|
<p
|
|
1766
1766
|
id="modal-top-aligned-description"
|
|
1767
|
-
>The "aria-describedby" attribute can be applied to any text that adequately describes the modal's purpose. It does not have to be assigned to ".pf-
|
|
1767
|
+
>The "aria-describedby" attribute can be applied to any text that adequately describes the modal's purpose. It does not have to be assigned to ".pf-v6-c-modal-box__body"</p>
|
|
1768
1768
|
<p>Form here</p>
|
|
1769
1769
|
</div>
|
|
1770
1770
|
<footer class="pf-v6-c-modal-box__footer">
|
|
@@ -1176,7 +1176,7 @@ section: components
|
|
|
1176
1176
|
|
|
1177
1177
|
<div
|
|
1178
1178
|
class="pf-v6-c-toolbar__item pf-m-overflow-container"
|
|
1179
|
-
style="--pf-
|
|
1179
|
+
style="--pf-v6-c-toolbar__item--MinWidth: 18ch;"
|
|
1180
1180
|
>
|
|
1181
1181
|
<nav
|
|
1182
1182
|
class="pf-v6-c-nav pf-m-scrollable pf-m-horizontal"
|
|
@@ -1849,7 +1849,7 @@ section: components
|
|
|
1849
1849
|
|
|
1850
1850
|
<div
|
|
1851
1851
|
class="pf-v6-c-toolbar__item pf-m-overflow-container"
|
|
1852
|
-
style="--pf-
|
|
1852
|
+
style="--pf-v6-c-toolbar__item--MinWidth: 18ch;"
|
|
1853
1853
|
>
|
|
1854
1854
|
<nav
|
|
1855
1855
|
class="pf-v6-c-nav pf-m-scrollable pf-m-horizontal"
|
|
@@ -922,7 +922,7 @@ section: components
|
|
|
922
922
|
</span>
|
|
923
923
|
<h2
|
|
924
924
|
class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
|
|
925
|
-
style="--pf-
|
|
925
|
+
style="--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2"
|
|
926
926
|
>
|
|
927
927
|
<span class="pf-v6-screen-reader">Success notification:</span>
|
|
928
928
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis odio risus. Ut dictum vitae sapien at posuere. Nullam suscipit massa quis lacus pellentesque scelerisque. Donec non maximus neque, quis ornare nunc. Vivamus in nibh sed libero feugiat feugiat. Nulla lacinia rutrum est, a commodo odio vestibulum suscipit. Nullam id quam et quam porttitor interdum quis nec tellus. Vestibulum arcu dui, pulvinar eu tellus in, semper mattis diam. Sed commodo tincidunt lacus non pulvinar. Curabitur tempor molestie vestibulum. Vivamus vel mi dignissim, efficitur neque eget, efficitur massa. Mauris vitae nunc augue. Donec augue lorem, malesuada et quam vitae, volutpat mattis nisi. Nullam nec venenatis ex, quis lobortis purus. Sed nisl dolor, mattis sit amet tincidunt quis, mollis sed massa.
|
|
@@ -989,7 +989,7 @@ section: components
|
|
|
989
989
|
</div>
|
|
990
990
|
<div
|
|
991
991
|
class="pf-v6-c-notification-drawer__list-item-description"
|
|
992
|
-
>This example uses ".pf-m-truncate" and sets "--pf-
|
|
992
|
+
>This example uses ".pf-m-truncate" and sets "--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2" to limit title to two lines and truncate any overflow text with ellipses.</div>
|
|
993
993
|
<div
|
|
994
994
|
class="pf-v6-c-notification-drawer__list-item-timestamp"
|
|
995
995
|
>50 minutes ago</div>
|
|
@@ -1931,7 +1931,7 @@ section: components
|
|
|
1931
1931
|
</span>
|
|
1932
1932
|
<h2
|
|
1933
1933
|
class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
|
|
1934
|
-
style="--pf-
|
|
1934
|
+
style="--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2"
|
|
1935
1935
|
>
|
|
1936
1936
|
<span class="pf-v6-screen-reader">Success notification:</span>
|
|
1937
1937
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis odio risus. Ut dictum vitae sapien at posuere. Nullam suscipit massa quis lacus pellentesque scelerisque. Donec non maximus neque, quis ornare nunc. Vivamus in nibh sed libero feugiat feugiat. Nulla lacinia rutrum est, a commodo odio vestibulum suscipit. Nullam id quam et quam porttitor interdum quis nec tellus. Vestibulum arcu dui, pulvinar eu tellus in, semper mattis diam. Sed commodo tincidunt lacus non pulvinar. Curabitur tempor molestie vestibulum. Vivamus vel mi dignissim, efficitur neque eget, efficitur massa. Mauris vitae nunc augue. Donec augue lorem, malesuada et quam vitae, volutpat mattis nisi. Nullam nec venenatis ex, quis lobortis purus. Sed nisl dolor, mattis sit amet tincidunt quis, mollis sed massa.
|
|
@@ -1998,7 +1998,7 @@ section: components
|
|
|
1998
1998
|
</div>
|
|
1999
1999
|
<div
|
|
2000
2000
|
class="pf-v6-c-notification-drawer__list-item-description"
|
|
2001
|
-
>This example uses ".pf-m-truncate" and sets "--pf-
|
|
2001
|
+
>This example uses ".pf-m-truncate" and sets "--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2" to limit title to two lines and truncate any overflow text with ellipses.</div>
|
|
2002
2002
|
<div
|
|
2003
2003
|
class="pf-v6-c-notification-drawer__list-item-timestamp"
|
|
2004
2004
|
>50 minutes ago</div>
|
|
@@ -2943,7 +2943,7 @@ section: components
|
|
|
2943
2943
|
</span>
|
|
2944
2944
|
<h2
|
|
2945
2945
|
class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
|
|
2946
|
-
style="--pf-
|
|
2946
|
+
style="--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2"
|
|
2947
2947
|
>
|
|
2948
2948
|
<span class="pf-v6-screen-reader">Success notification:</span>
|
|
2949
2949
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis odio risus. Ut dictum vitae sapien at posuere. Nullam suscipit massa quis lacus pellentesque scelerisque. Donec non maximus neque, quis ornare nunc. Vivamus in nibh sed libero feugiat feugiat. Nulla lacinia rutrum est, a commodo odio vestibulum suscipit. Nullam id quam et quam porttitor interdum quis nec tellus. Vestibulum arcu dui, pulvinar eu tellus in, semper mattis diam. Sed commodo tincidunt lacus non pulvinar. Curabitur tempor molestie vestibulum. Vivamus vel mi dignissim, efficitur neque eget, efficitur massa. Mauris vitae nunc augue. Donec augue lorem, malesuada et quam vitae, volutpat mattis nisi. Nullam nec venenatis ex, quis lobortis purus. Sed nisl dolor, mattis sit amet tincidunt quis, mollis sed massa.
|
|
@@ -3010,7 +3010,7 @@ section: components
|
|
|
3010
3010
|
</div>
|
|
3011
3011
|
<div
|
|
3012
3012
|
class="pf-v6-c-notification-drawer__list-item-description"
|
|
3013
|
-
>This example uses ".pf-m-truncate" and sets "--pf-
|
|
3013
|
+
>This example uses ".pf-m-truncate" and sets "--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2" to limit title to two lines and truncate any overflow text with ellipses.</div>
|
|
3014
3014
|
<div
|
|
3015
3015
|
class="pf-v6-c-notification-drawer__list-item-timestamp"
|
|
3016
3016
|
>50 minutes ago</div>
|
|
@@ -3954,7 +3954,7 @@ section: components
|
|
|
3954
3954
|
</span>
|
|
3955
3955
|
<h2
|
|
3956
3956
|
class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
|
|
3957
|
-
style="--pf-
|
|
3957
|
+
style="--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2"
|
|
3958
3958
|
>
|
|
3959
3959
|
<span class="pf-v6-screen-reader">Success notification:</span>
|
|
3960
3960
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis odio risus. Ut dictum vitae sapien at posuere. Nullam suscipit massa quis lacus pellentesque scelerisque. Donec non maximus neque, quis ornare nunc. Vivamus in nibh sed libero feugiat feugiat. Nulla lacinia rutrum est, a commodo odio vestibulum suscipit. Nullam id quam et quam porttitor interdum quis nec tellus. Vestibulum arcu dui, pulvinar eu tellus in, semper mattis diam. Sed commodo tincidunt lacus non pulvinar. Curabitur tempor molestie vestibulum. Vivamus vel mi dignissim, efficitur neque eget, efficitur massa. Mauris vitae nunc augue. Donec augue lorem, malesuada et quam vitae, volutpat mattis nisi. Nullam nec venenatis ex, quis lobortis purus. Sed nisl dolor, mattis sit amet tincidunt quis, mollis sed massa.
|
|
@@ -4021,7 +4021,7 @@ section: components
|
|
|
4021
4021
|
</div>
|
|
4022
4022
|
<div
|
|
4023
4023
|
class="pf-v6-c-notification-drawer__list-item-description"
|
|
4024
|
-
>This example uses ".pf-m-truncate" and sets "--pf-
|
|
4024
|
+
>This example uses ".pf-m-truncate" and sets "--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2" to limit title to two lines and truncate any overflow text with ellipses.</div>
|
|
4025
4025
|
<div
|
|
4026
4026
|
class="pf-v6-c-notification-drawer__list-item-timestamp"
|
|
4027
4027
|
>50 minutes ago</div>
|
|
@@ -5034,7 +5034,7 @@ section: components
|
|
|
5034
5034
|
</span>
|
|
5035
5035
|
<h2
|
|
5036
5036
|
class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
|
|
5037
|
-
style="--pf-
|
|
5037
|
+
style="--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2"
|
|
5038
5038
|
>
|
|
5039
5039
|
<span
|
|
5040
5040
|
class="pf-v6-screen-reader"
|
|
@@ -5105,7 +5105,7 @@ section: components
|
|
|
5105
5105
|
</div>
|
|
5106
5106
|
<div
|
|
5107
5107
|
class="pf-v6-c-notification-drawer__list-item-description"
|
|
5108
|
-
>This example uses ".pf-m-truncate" and sets "--pf-
|
|
5108
|
+
>This example uses ".pf-m-truncate" and sets "--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2" to limit title to two lines and truncate any overflow text with ellipses.</div>
|
|
5109
5109
|
<div
|
|
5110
5110
|
class="pf-v6-c-notification-drawer__list-item-timestamp"
|
|
5111
5111
|
>50 minutes ago</div>
|
|
@@ -5692,7 +5692,7 @@ section: components
|
|
|
5692
5692
|
</span>
|
|
5693
5693
|
<h2
|
|
5694
5694
|
class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
|
|
5695
|
-
style="--pf-
|
|
5695
|
+
style="--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2"
|
|
5696
5696
|
>
|
|
5697
5697
|
<span
|
|
5698
5698
|
class="pf-v6-screen-reader"
|
|
@@ -5763,7 +5763,7 @@ section: components
|
|
|
5763
5763
|
</div>
|
|
5764
5764
|
<div
|
|
5765
5765
|
class="pf-v6-c-notification-drawer__list-item-description"
|
|
5766
|
-
>This example uses ".pf-m-truncate" and sets "--pf-
|
|
5766
|
+
>This example uses ".pf-m-truncate" and sets "--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2" to limit title to two lines and truncate any overflow text with ellipses.</div>
|
|
5767
5767
|
<div
|
|
5768
5768
|
class="pf-v6-c-notification-drawer__list-item-timestamp"
|
|
5769
5769
|
>50 minutes ago</div>
|
|
@@ -6352,7 +6352,7 @@ section: components
|
|
|
6352
6352
|
</span>
|
|
6353
6353
|
<h2
|
|
6354
6354
|
class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
|
|
6355
|
-
style="--pf-
|
|
6355
|
+
style="--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2"
|
|
6356
6356
|
>
|
|
6357
6357
|
<span
|
|
6358
6358
|
class="pf-v6-screen-reader"
|
|
@@ -6423,7 +6423,7 @@ section: components
|
|
|
6423
6423
|
</div>
|
|
6424
6424
|
<div
|
|
6425
6425
|
class="pf-v6-c-notification-drawer__list-item-description"
|
|
6426
|
-
>This example uses ".pf-m-truncate" and sets "--pf-
|
|
6426
|
+
>This example uses ".pf-m-truncate" and sets "--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2" to limit title to two lines and truncate any overflow text with ellipses.</div>
|
|
6427
6427
|
<div
|
|
6428
6428
|
class="pf-v6-c-notification-drawer__list-item-timestamp"
|
|
6429
6429
|
>50 minutes ago</div>
|
|
@@ -7012,7 +7012,7 @@ section: components
|
|
|
7012
7012
|
</span>
|
|
7013
7013
|
<h2
|
|
7014
7014
|
class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
|
|
7015
|
-
style="--pf-
|
|
7015
|
+
style="--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2"
|
|
7016
7016
|
>
|
|
7017
7017
|
<span
|
|
7018
7018
|
class="pf-v6-screen-reader"
|
|
@@ -7083,7 +7083,7 @@ section: components
|
|
|
7083
7083
|
</div>
|
|
7084
7084
|
<div
|
|
7085
7085
|
class="pf-v6-c-notification-drawer__list-item-description"
|
|
7086
|
-
>This example uses ".pf-m-truncate" and sets "--pf-
|
|
7086
|
+
>This example uses ".pf-m-truncate" and sets "--pf-v6-c-notification-drawer__list-item-header-title--max-lines: 2" to limit title to two lines and truncate any overflow text with ellipses.</div>
|
|
7087
7087
|
<div
|
|
7088
7088
|
class="pf-v6-c-notification-drawer__list-item-timestamp"
|
|
7089
7089
|
>50 minutes ago</div>
|
|
@@ -3609,14 +3609,14 @@ wrapperTag: div
|
|
|
3609
3609
|
</section>
|
|
3610
3610
|
<hr class="pf-v6-c-divider" />
|
|
3611
3611
|
<section
|
|
3612
|
-
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center pf-
|
|
3612
|
+
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center pf-v6-u-text-align-center"
|
|
3613
3613
|
>
|
|
3614
3614
|
<div class="pf-v6-c-page__main-body">
|
|
3615
3615
|
<div class="pf-v6-c-card">
|
|
3616
3616
|
<div class="pf-v6-c-card__body">
|
|
3617
3617
|
<p>
|
|
3618
3618
|
The content in this section is also centered using the
|
|
3619
|
-
<code>.pf-
|
|
3619
|
+
<code>.pf-v6-u-text-align-center</code> utility class.
|
|
3620
3620
|
</p>
|
|
3621
3621
|
</div>
|
|
3622
3622
|
</div>
|