@patternfly/patternfly 6.3.0-prerelease.6 → 6.3.0-prerelease.60
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 +22 -14
- package/assets/images/icon-help.hbs +3 -0
- package/assets/images/icon-outlined-star.hbs +3 -0
- package/assets/images/icon-star.hbs +3 -0
- package/base/normalize.scss +4 -0
- package/base/patternfly-common.css +46 -11
- package/base/patternfly-common.scss +58 -13
- package/base/patternfly-variables.css +1172 -1
- package/base/patternfly-variables.scss +10 -0
- package/base/tokens/tokens-charts-dark.scss +1 -1
- package/base/tokens/tokens-charts.scss +1 -1
- package/base/tokens/tokens-dark.scss +13 -1
- package/base/tokens/tokens-default.scss +60 -2
- package/base/tokens/tokens-highcontrast-dark.scss +396 -0
- package/base/tokens/tokens-highcontrast.scss +703 -0
- package/base/tokens/tokens-local.scss +1 -0
- package/base/tokens/tokens-palette.scss +9 -1
- package/components/Accordion/accordion.css +102 -6
- package/components/Accordion/accordion.scss +112 -10
- package/components/Alert/alert-group.css +67 -33
- package/components/Alert/alert-group.scss +95 -48
- package/components/Badge/badge.css +2 -0
- package/components/Badge/badge.scss +2 -0
- package/components/Banner/banner.css +4 -0
- package/components/Banner/banner.scss +4 -0
- package/components/Button/button.css +187 -9
- package/components/Button/button.scss +195 -13
- package/components/CalendarMonth/calendar-month.css +16 -0
- package/components/CalendarMonth/calendar-month.scss +16 -0
- package/components/Card/card.css +5 -4
- package/components/Card/card.scss +5 -4
- package/components/CodeBlock/code-block.css +3 -0
- package/components/CodeBlock/code-block.scss +3 -0
- package/components/CodeEditor/code-editor.css +8 -3
- package/components/CodeEditor/code-editor.scss +11 -6
- package/components/DataList/data-list.css +2 -2
- package/components/DataList/data-list.scss +2 -2
- package/components/DatePicker/date-picker.css +3 -0
- package/components/DatePicker/date-picker.scss +4 -0
- package/components/Drawer/drawer.css +44 -41
- package/components/Drawer/drawer.scss +42 -36
- package/components/DualListSelector/dual-list-selector.css +55 -1
- package/components/DualListSelector/dual-list-selector.scss +63 -1
- package/components/ExpandableSection/expandable-section.css +63 -1
- package/components/ExpandableSection/expandable-section.scss +76 -2
- package/components/FileUpload/file-upload.css +3 -3
- package/components/FileUpload/file-upload.scss +3 -3
- package/components/Form/form.css +40 -1
- package/components/Form/form.scss +47 -1
- package/components/FormControl/form-control.css +16 -0
- package/components/FormControl/form-control.scss +9 -0
- package/components/InputGroup/input-group.css +80 -0
- package/components/InputGroup/input-group.scss +95 -0
- package/components/Label/label.css +20 -11
- package/components/Label/label.scss +21 -11
- package/components/Login/login.css +3 -0
- package/components/Login/login.scss +3 -0
- package/components/Menu/menu.css +35 -4
- package/components/Menu/menu.scss +32 -6
- package/components/MenuToggle/menu-toggle.css +51 -10
- package/components/MenuToggle/menu-toggle.scss +61 -9
- package/components/ModalBox/modal-box.css +3 -0
- package/components/ModalBox/modal-box.scss +3 -0
- package/components/Nav/nav.css +39 -8
- package/components/Nav/nav.scss +42 -9
- package/components/Page/page.css +124 -26
- package/components/Page/page.scss +86 -16
- package/components/Pagination/pagination.css +14 -1
- package/components/Pagination/pagination.scss +14 -1
- package/components/Panel/panel.css +7 -1
- package/components/Panel/panel.scss +7 -1
- package/components/Popover/popover.css +4 -0
- package/components/Popover/popover.scss +4 -0
- package/components/Progress/progress.css +26 -0
- package/components/Progress/progress.scss +22 -1
- package/components/ProgressStepper/progress-stepper.scss +1 -0
- package/components/SimpleList/simple-list.css +15 -0
- package/components/SimpleList/simple-list.scss +17 -1
- package/components/Skeleton/skeleton.css +22 -2
- package/components/Skeleton/skeleton.scss +25 -3
- package/components/Spinner/spinner.css +5 -0
- package/components/Spinner/spinner.scss +6 -0
- package/components/Table/table-grid.css +51 -5
- package/components/Table/table-grid.scss +22 -1
- package/components/Table/table.css +124 -2
- package/components/Table/table.scss +171 -3
- package/components/Tabs/tabs.css +32 -15
- package/components/Tabs/tabs.scss +34 -14
- package/components/TextInputGroup/text-input-group.css +23 -0
- package/components/TextInputGroup/text-input-group.scss +16 -1
- package/components/Timestamp/timestamp.css +4 -0
- package/components/Timestamp/timestamp.scss +7 -0
- package/components/TreeView/tree-view.css +54 -0
- package/components/TreeView/tree-view.scss +59 -2
- package/components/Truncate/truncate.css +1 -0
- package/components/Truncate/truncate.scss +3 -0
- package/components/Wizard/wizard.css +33 -6
- package/components/Wizard/wizard.scss +38 -8
- package/components/_index.css +1390 -195
- package/docs/components/Alert/examples/Alert.md +2 -2
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
- package/docs/components/Button/examples/Button.md +159 -6
- package/docs/components/Card/examples/Card.md +8 -8
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +24 -32
- package/docs/components/CodeBlock/examples/CodeBlock.md +10 -10
- package/docs/components/CodeEditor/examples/CodeEditor.md +29 -5
- package/docs/components/DataList/examples/DataList.md +83 -207
- package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
- package/docs/components/DualListSelector/examples/DualListSelector.md +642 -319
- package/docs/components/EmptyState/examples/EmptyState.md +6 -6
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +26 -15
- package/docs/components/Form/examples/Form.md +1178 -113
- package/docs/components/Hint/examples/Hint.md +3 -3
- package/docs/components/InlineEdit/examples/InlineEdit.md +2 -6
- package/docs/components/InputGroup/examples/InputGroup.md +5 -1
- package/docs/components/Label/examples/Label.md +2 -2
- package/docs/components/Login/examples/Login.md +22 -22
- package/docs/components/Masthead/examples/masthead.md +90 -12
- package/docs/components/Menu/examples/Menu.md +122 -6
- package/docs/components/MenuToggle/examples/MenuToggle.md +93 -55
- package/docs/components/ModalBox/examples/ModalBox.md +13 -1
- package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
- package/docs/components/Page/examples/Page.md +147 -14
- package/docs/components/Pagination/examples/Pagination.md +123 -12
- package/docs/components/Popover/examples/Popover.md +0 -4
- package/docs/components/Progress/examples/Progress.md +222 -210
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
- package/docs/components/Skeleton/examples/Skeleton.md +21 -7
- package/docs/components/Slider/examples/Slider.md +2 -2
- package/docs/components/Spinner/examples/Spinner.md +10 -0
- package/docs/components/Table/examples/Table.md +7699 -4896
- package/docs/components/Tabs/examples/Tabs.md +1214 -6729
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -49
- package/docs/components/Title/examples/Title.md +8 -8
- package/docs/components/Toolbar/examples/Toolbar.md +7 -7
- package/docs/components/Wizard/examples/Wizard.md +583 -0
- package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
- package/docs/demos/Alert/examples/Alert.md +66 -9
- package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
- package/docs/demos/Banner/examples/Banner.md +47 -6
- package/docs/demos/Card/examples/Card.md +13 -67
- package/docs/demos/CardView/examples/CardView.md +24 -5
- package/docs/demos/Dashboard/examples/Dashboard.md +34 -27
- package/docs/demos/DataList/examples/DataList.md +628 -192
- package/docs/demos/DescriptionList/examples/DescriptionList.md +79 -50
- package/docs/demos/Drawer/examples/Drawer.md +110 -53
- package/docs/demos/Form/examples/BasicForms.md +146 -26
- package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
- package/docs/demos/Masthead/examples/Masthead.md +170 -18
- package/docs/demos/Modal/examples/Modal.md +171 -21
- package/docs/demos/Nav/examples/Nav.md +111 -16
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +114 -19
- package/docs/demos/Page/examples/Page.md +309 -43
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +886 -415
- package/docs/demos/Skeleton/examples/Skeleton.md +25 -4
- package/docs/demos/Table/examples/Table.md +480 -177
- package/docs/demos/Tabs/examples/Tabs.md +139 -594
- package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
- package/docs/demos/Wizard/examples/Wizard.md +198 -27
- package/package.json +12 -7
- package/patternfly-base-no-globals.css +1217 -12
- package/patternfly-base.css +1221 -12
- package/patternfly-no-globals.css +2837 -437
- package/patternfly.css +2839 -435
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/mixins.scss +54 -0
|
@@ -49,7 +49,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
49
49
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
50
50
|
type="button"
|
|
51
51
|
aria-expanded="false"
|
|
52
|
-
aria-label="
|
|
52
|
+
aria-label="Dual list item menu toggle"
|
|
53
53
|
id="basic-available-menu-toggle"
|
|
54
54
|
>
|
|
55
55
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -78,9 +78,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
78
78
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
79
79
|
<span class="pf-v6-c-dual-list-selector__item-text">Item1</span>
|
|
80
80
|
</span>
|
|
81
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
82
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
83
|
-
</span>
|
|
84
81
|
</span>
|
|
85
82
|
</div>
|
|
86
83
|
</li>
|
|
@@ -90,9 +87,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
90
87
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
91
88
|
<span class="pf-v6-c-dual-list-selector__item-text">Item2</span>
|
|
92
89
|
</span>
|
|
93
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
94
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
95
|
-
</span>
|
|
96
90
|
</span>
|
|
97
91
|
</div>
|
|
98
92
|
</li>
|
|
@@ -107,9 +101,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
107
101
|
class="pf-v6-c-dual-list-selector__item-text"
|
|
108
102
|
>Item3 (disabled)</span>
|
|
109
103
|
</span>
|
|
110
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
111
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
112
|
-
</span>
|
|
113
104
|
</span>
|
|
114
105
|
</div>
|
|
115
106
|
</li>
|
|
@@ -119,9 +110,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
119
110
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
120
111
|
<span class="pf-v6-c-dual-list-selector__item-text">Item4</span>
|
|
121
112
|
</span>
|
|
122
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
123
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
124
|
-
</span>
|
|
125
113
|
</span>
|
|
126
114
|
</div>
|
|
127
115
|
</li>
|
|
@@ -131,9 +119,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
131
119
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
132
120
|
<span class="pf-v6-c-dual-list-selector__item-text">Item5</span>
|
|
133
121
|
</span>
|
|
134
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
135
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
136
|
-
</span>
|
|
137
122
|
</span>
|
|
138
123
|
</div>
|
|
139
124
|
</li>
|
|
@@ -230,7 +215,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
230
215
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
231
216
|
type="button"
|
|
232
217
|
aria-expanded="false"
|
|
233
|
-
aria-label="
|
|
218
|
+
aria-label="Dual list item menu toggle"
|
|
234
219
|
id="basic-chosen-menu-toggle"
|
|
235
220
|
>
|
|
236
221
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -304,7 +289,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
304
289
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
305
290
|
type="button"
|
|
306
291
|
aria-expanded="false"
|
|
307
|
-
aria-label="
|
|
292
|
+
aria-label="Dual list item menu toggle"
|
|
308
293
|
id="available-item-selected-available-menu-toggle"
|
|
309
294
|
>
|
|
310
295
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -333,9 +318,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
333
318
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
334
319
|
<span class="pf-v6-c-dual-list-selector__item-text">Item1</span>
|
|
335
320
|
</span>
|
|
336
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
337
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
338
|
-
</span>
|
|
339
321
|
</span>
|
|
340
322
|
</div>
|
|
341
323
|
</li>
|
|
@@ -345,9 +327,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
345
327
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
346
328
|
<span class="pf-v6-c-dual-list-selector__item-text">Item2</span>
|
|
347
329
|
</span>
|
|
348
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
349
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
350
|
-
</span>
|
|
351
330
|
</span>
|
|
352
331
|
</div>
|
|
353
332
|
</li>
|
|
@@ -357,9 +336,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
357
336
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
358
337
|
<span class="pf-v6-c-dual-list-selector__item-text">Item3</span>
|
|
359
338
|
</span>
|
|
360
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
361
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
362
|
-
</span>
|
|
363
339
|
</span>
|
|
364
340
|
</div>
|
|
365
341
|
</li>
|
|
@@ -369,9 +345,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
369
345
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
370
346
|
<span class="pf-v6-c-dual-list-selector__item-text">Item4</span>
|
|
371
347
|
</span>
|
|
372
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
373
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
374
|
-
</span>
|
|
375
348
|
</span>
|
|
376
349
|
</div>
|
|
377
350
|
</li>
|
|
@@ -381,9 +354,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
381
354
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
382
355
|
<span class="pf-v6-c-dual-list-selector__item-text">Item5</span>
|
|
383
356
|
</span>
|
|
384
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
385
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
386
|
-
</span>
|
|
387
357
|
</span>
|
|
388
358
|
</div>
|
|
389
359
|
</li>
|
|
@@ -479,7 +449,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
479
449
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
480
450
|
type="button"
|
|
481
451
|
aria-expanded="false"
|
|
482
|
-
aria-label="
|
|
452
|
+
aria-label="Dual list item menu toggle"
|
|
483
453
|
id="available-item-selected-chosen-menu-toggle"
|
|
484
454
|
>
|
|
485
455
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -553,7 +523,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
553
523
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
554
524
|
type="button"
|
|
555
525
|
aria-expanded="false"
|
|
556
|
-
aria-label="
|
|
526
|
+
aria-label="Dual list item menu toggle"
|
|
557
527
|
id="multiple-available-items-selected-available-menu-toggle"
|
|
558
528
|
>
|
|
559
529
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -582,9 +552,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
582
552
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
583
553
|
<span class="pf-v6-c-dual-list-selector__item-text">Item1</span>
|
|
584
554
|
</span>
|
|
585
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
586
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
587
|
-
</span>
|
|
588
555
|
</span>
|
|
589
556
|
</div>
|
|
590
557
|
</li>
|
|
@@ -594,9 +561,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
594
561
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
595
562
|
<span class="pf-v6-c-dual-list-selector__item-text">Item2</span>
|
|
596
563
|
</span>
|
|
597
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
598
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
599
|
-
</span>
|
|
600
564
|
</span>
|
|
601
565
|
</div>
|
|
602
566
|
</li>
|
|
@@ -606,9 +570,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
606
570
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
607
571
|
<span class="pf-v6-c-dual-list-selector__item-text">Item3</span>
|
|
608
572
|
</span>
|
|
609
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
610
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
611
|
-
</span>
|
|
612
573
|
</span>
|
|
613
574
|
</div>
|
|
614
575
|
</li>
|
|
@@ -618,9 +579,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
618
579
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
619
580
|
<span class="pf-v6-c-dual-list-selector__item-text">Item4</span>
|
|
620
581
|
</span>
|
|
621
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
622
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
623
|
-
</span>
|
|
624
582
|
</span>
|
|
625
583
|
</div>
|
|
626
584
|
</li>
|
|
@@ -630,9 +588,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
630
588
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
631
589
|
<span class="pf-v6-c-dual-list-selector__item-text">Item5</span>
|
|
632
590
|
</span>
|
|
633
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
634
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
635
|
-
</span>
|
|
636
591
|
</span>
|
|
637
592
|
</div>
|
|
638
593
|
</li>
|
|
@@ -728,7 +683,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
728
683
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
729
684
|
type="button"
|
|
730
685
|
aria-expanded="false"
|
|
731
|
-
aria-label="
|
|
686
|
+
aria-label="Dual list item menu toggle"
|
|
732
687
|
id="multiple-available-items-selected-chosen-menu-toggle"
|
|
733
688
|
>
|
|
734
689
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -802,7 +757,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
802
757
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
803
758
|
type="button"
|
|
804
759
|
aria-expanded="false"
|
|
805
|
-
aria-label="
|
|
760
|
+
aria-label="Dual list item menu toggle"
|
|
806
761
|
id="chosen-item-available-menu-toggle"
|
|
807
762
|
>
|
|
808
763
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -831,9 +786,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
831
786
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
832
787
|
<span class="pf-v6-c-dual-list-selector__item-text">Item1</span>
|
|
833
788
|
</span>
|
|
834
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
835
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
836
|
-
</span>
|
|
837
789
|
</span>
|
|
838
790
|
</div>
|
|
839
791
|
</li>
|
|
@@ -843,9 +795,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
843
795
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
844
796
|
<span class="pf-v6-c-dual-list-selector__item-text">Item2</span>
|
|
845
797
|
</span>
|
|
846
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
847
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
848
|
-
</span>
|
|
849
798
|
</span>
|
|
850
799
|
</div>
|
|
851
800
|
</li>
|
|
@@ -855,9 +804,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
855
804
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
856
805
|
<span class="pf-v6-c-dual-list-selector__item-text">Item3</span>
|
|
857
806
|
</span>
|
|
858
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
859
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
860
|
-
</span>
|
|
861
807
|
</span>
|
|
862
808
|
</div>
|
|
863
809
|
</li>
|
|
@@ -867,9 +813,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
867
813
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
868
814
|
<span class="pf-v6-c-dual-list-selector__item-text">Item4</span>
|
|
869
815
|
</span>
|
|
870
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
871
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
872
|
-
</span>
|
|
873
816
|
</span>
|
|
874
817
|
</div>
|
|
875
818
|
</li>
|
|
@@ -879,9 +822,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
879
822
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
880
823
|
<span class="pf-v6-c-dual-list-selector__item-text">Item5</span>
|
|
881
824
|
</span>
|
|
882
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
883
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
884
|
-
</span>
|
|
885
825
|
</span>
|
|
886
826
|
</div>
|
|
887
827
|
</li>
|
|
@@ -977,7 +917,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
977
917
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
978
918
|
type="button"
|
|
979
919
|
aria-expanded="false"
|
|
980
|
-
aria-label="
|
|
920
|
+
aria-label="Dual list item menu toggle"
|
|
981
921
|
id="chosen-item-chosen-menu-toggle"
|
|
982
922
|
>
|
|
983
923
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -1006,9 +946,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1006
946
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
1007
947
|
<span class="pf-v6-c-dual-list-selector__item-text">Item1</span>
|
|
1008
948
|
</span>
|
|
1009
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
1010
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
1011
|
-
</span>
|
|
1012
949
|
</span>
|
|
1013
950
|
</div>
|
|
1014
951
|
</li>
|
|
@@ -1064,7 +1001,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1064
1001
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1065
1002
|
type="button"
|
|
1066
1003
|
aria-expanded="false"
|
|
1067
|
-
aria-label="
|
|
1004
|
+
aria-label="Dual list item menu toggle"
|
|
1068
1005
|
id="chosen-item-selected-available-menu-toggle"
|
|
1069
1006
|
>
|
|
1070
1007
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -1093,9 +1030,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1093
1030
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
1094
1031
|
<span class="pf-v6-c-dual-list-selector__item-text">Item1</span>
|
|
1095
1032
|
</span>
|
|
1096
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
1097
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
1098
|
-
</span>
|
|
1099
1033
|
</span>
|
|
1100
1034
|
</div>
|
|
1101
1035
|
</li>
|
|
@@ -1105,9 +1039,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1105
1039
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
1106
1040
|
<span class="pf-v6-c-dual-list-selector__item-text">Item2</span>
|
|
1107
1041
|
</span>
|
|
1108
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
1109
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
1110
|
-
</span>
|
|
1111
1042
|
</span>
|
|
1112
1043
|
</div>
|
|
1113
1044
|
</li>
|
|
@@ -1117,9 +1048,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1117
1048
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
1118
1049
|
<span class="pf-v6-c-dual-list-selector__item-text">Item3</span>
|
|
1119
1050
|
</span>
|
|
1120
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
1121
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
1122
|
-
</span>
|
|
1123
1051
|
</span>
|
|
1124
1052
|
</div>
|
|
1125
1053
|
</li>
|
|
@@ -1129,9 +1057,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1129
1057
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
1130
1058
|
<span class="pf-v6-c-dual-list-selector__item-text">Item4</span>
|
|
1131
1059
|
</span>
|
|
1132
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
1133
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
1134
|
-
</span>
|
|
1135
1060
|
</span>
|
|
1136
1061
|
</div>
|
|
1137
1062
|
</li>
|
|
@@ -1141,9 +1066,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1141
1066
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
1142
1067
|
<span class="pf-v6-c-dual-list-selector__item-text">Item5</span>
|
|
1143
1068
|
</span>
|
|
1144
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
1145
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
1146
|
-
</span>
|
|
1147
1069
|
</span>
|
|
1148
1070
|
</div>
|
|
1149
1071
|
</li>
|
|
@@ -1238,7 +1160,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1238
1160
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1239
1161
|
type="button"
|
|
1240
1162
|
aria-expanded="false"
|
|
1241
|
-
aria-label="
|
|
1163
|
+
aria-label="Dual list item menu toggle"
|
|
1242
1164
|
id="chosen-item-selected-chosen-menu-toggle"
|
|
1243
1165
|
>
|
|
1244
1166
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -1267,9 +1189,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1267
1189
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
1268
1190
|
<span class="pf-v6-c-dual-list-selector__item-text">Item5</span>
|
|
1269
1191
|
</span>
|
|
1270
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
1271
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
1272
|
-
</span>
|
|
1273
1192
|
</span>
|
|
1274
1193
|
</div>
|
|
1275
1194
|
</li>
|
|
@@ -1325,7 +1244,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1325
1244
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1326
1245
|
type="button"
|
|
1327
1246
|
aria-expanded="false"
|
|
1328
|
-
aria-label="
|
|
1247
|
+
aria-label="Dual list item menu toggle"
|
|
1329
1248
|
id="tree-available-menu-toggle"
|
|
1330
1249
|
>
|
|
1331
1250
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -1400,9 +1319,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1400
1319
|
</span>
|
|
1401
1320
|
<span class="pf-v6-c-dual-list-selector__item-text">Red</span>
|
|
1402
1321
|
</span>
|
|
1403
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
1404
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
1405
|
-
</span>
|
|
1406
1322
|
</div>
|
|
1407
1323
|
</div>
|
|
1408
1324
|
</li>
|
|
@@ -1425,9 +1341,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1425
1341
|
</span>
|
|
1426
1342
|
<span class="pf-v6-c-dual-list-selector__item-text">Orange</span>
|
|
1427
1343
|
</span>
|
|
1428
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
1429
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
1430
|
-
</span>
|
|
1431
1344
|
</div>
|
|
1432
1345
|
</div>
|
|
1433
1346
|
</li>
|
|
@@ -1447,9 +1360,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1447
1360
|
</span>
|
|
1448
1361
|
<span class="pf-v6-c-dual-list-selector__item-text">Yellow</span>
|
|
1449
1362
|
</span>
|
|
1450
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
1451
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
1452
|
-
</span>
|
|
1453
1363
|
</div>
|
|
1454
1364
|
</div>
|
|
1455
1365
|
</li>
|
|
@@ -1480,9 +1390,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1480
1390
|
</span>
|
|
1481
1391
|
<span class="pf-v6-c-dual-list-selector__item-text">Green</span>
|
|
1482
1392
|
</span>
|
|
1483
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
1484
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
1485
|
-
</span>
|
|
1486
1393
|
</div>
|
|
1487
1394
|
</div>
|
|
1488
1395
|
|
|
@@ -1514,9 +1421,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1514
1421
|
class="pf-v6-c-dual-list-selector__item-text"
|
|
1515
1422
|
>Light green</span>
|
|
1516
1423
|
</span>
|
|
1517
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
1518
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
1519
|
-
</span>
|
|
1520
1424
|
</div>
|
|
1521
1425
|
</div>
|
|
1522
1426
|
</li>
|
|
@@ -1543,9 +1447,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1543
1447
|
class="pf-v6-c-dual-list-selector__item-text"
|
|
1544
1448
|
>Medium green</span>
|
|
1545
1449
|
</span>
|
|
1546
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
1547
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
1548
|
-
</span>
|
|
1549
1450
|
</div>
|
|
1550
1451
|
</div>
|
|
1551
1452
|
</li>
|
|
@@ -1572,9 +1473,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1572
1473
|
class="pf-v6-c-dual-list-selector__item-text"
|
|
1573
1474
|
>Dark green</span>
|
|
1574
1475
|
</span>
|
|
1575
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
1576
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
1577
|
-
</span>
|
|
1578
1476
|
</div>
|
|
1579
1477
|
</div>
|
|
1580
1478
|
</li>
|
|
@@ -1610,9 +1508,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1610
1508
|
class="pf-v6-c-dual-list-selector__item-text"
|
|
1611
1509
|
>Type something</span>
|
|
1612
1510
|
</span>
|
|
1613
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
1614
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
1615
|
-
</span>
|
|
1616
1511
|
</div>
|
|
1617
1512
|
</div>
|
|
1618
1513
|
</li>
|
|
@@ -1635,9 +1530,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1635
1530
|
class="pf-v6-c-dual-list-selector__item-text"
|
|
1636
1531
|
>Type something</span>
|
|
1637
1532
|
</span>
|
|
1638
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
1639
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
1640
|
-
</span>
|
|
1641
1533
|
</div>
|
|
1642
1534
|
</div>
|
|
1643
1535
|
</li>
|
|
@@ -1669,9 +1561,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1669
1561
|
class="pf-v6-c-dual-list-selector__item-text"
|
|
1670
1562
|
>Type something</span>
|
|
1671
1563
|
</span>
|
|
1672
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
1673
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
1674
|
-
</span>
|
|
1675
1564
|
</div>
|
|
1676
1565
|
</div>
|
|
1677
1566
|
</li>
|
|
@@ -1768,7 +1657,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1768
1657
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1769
1658
|
type="button"
|
|
1770
1659
|
aria-expanded="false"
|
|
1771
|
-
aria-label="
|
|
1660
|
+
aria-label="Dual list item menu toggle"
|
|
1772
1661
|
id="tree-chosen-menu-toggle"
|
|
1773
1662
|
>
|
|
1774
1663
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -1842,7 +1731,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1842
1731
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1843
1732
|
type="button"
|
|
1844
1733
|
aria-expanded="false"
|
|
1845
|
-
aria-label="
|
|
1734
|
+
aria-label="Dual list item menu toggle"
|
|
1846
1735
|
id="tree-options-available-menu-toggle"
|
|
1847
1736
|
>
|
|
1848
1737
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -1920,9 +1809,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1920
1809
|
</span>
|
|
1921
1810
|
<span class="pf-v6-c-dual-list-selector__item-text">Orange</span>
|
|
1922
1811
|
</span>
|
|
1923
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
1924
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
1925
|
-
</span>
|
|
1926
1812
|
</div>
|
|
1927
1813
|
</div>
|
|
1928
1814
|
</li>
|
|
@@ -1942,9 +1828,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1942
1828
|
</span>
|
|
1943
1829
|
<span class="pf-v6-c-dual-list-selector__item-text">Yellow</span>
|
|
1944
1830
|
</span>
|
|
1945
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
1946
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
1947
|
-
</span>
|
|
1948
1831
|
</div>
|
|
1949
1832
|
</div>
|
|
1950
1833
|
</li>
|
|
@@ -1978,9 +1861,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1978
1861
|
class="pf-v6-c-dual-list-selector__item-text"
|
|
1979
1862
|
>Green (disabled)</span>
|
|
1980
1863
|
</span>
|
|
1981
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
1982
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
1983
|
-
</span>
|
|
1984
1864
|
</div>
|
|
1985
1865
|
</div>
|
|
1986
1866
|
|
|
@@ -2013,9 +1893,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
2013
1893
|
class="pf-v6-c-dual-list-selector__item-text"
|
|
2014
1894
|
>Light green</span>
|
|
2015
1895
|
</span>
|
|
2016
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
2017
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
2018
|
-
</span>
|
|
2019
1896
|
</div>
|
|
2020
1897
|
</div>
|
|
2021
1898
|
</li>
|
|
@@ -2043,9 +1920,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
2043
1920
|
class="pf-v6-c-dual-list-selector__item-text"
|
|
2044
1921
|
>Medium green</span>
|
|
2045
1922
|
</span>
|
|
2046
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
2047
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
2048
|
-
</span>
|
|
2049
1923
|
</div>
|
|
2050
1924
|
</div>
|
|
2051
1925
|
</li>
|
|
@@ -2073,9 +1947,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
2073
1947
|
class="pf-v6-c-dual-list-selector__item-text"
|
|
2074
1948
|
>Dark green</span>
|
|
2075
1949
|
</span>
|
|
2076
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
2077
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
2078
|
-
</span>
|
|
2079
1950
|
</div>
|
|
2080
1951
|
</div>
|
|
2081
1952
|
</li>
|
|
@@ -2110,9 +1981,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
2110
1981
|
class="pf-v6-c-dual-list-selector__item-text"
|
|
2111
1982
|
>Type something</span>
|
|
2112
1983
|
</span>
|
|
2113
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
2114
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
2115
|
-
</span>
|
|
2116
1984
|
</div>
|
|
2117
1985
|
</div>
|
|
2118
1986
|
</li>
|
|
@@ -2134,9 +2002,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
2134
2002
|
class="pf-v6-c-dual-list-selector__item-text"
|
|
2135
2003
|
>Type something</span>
|
|
2136
2004
|
</span>
|
|
2137
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
2138
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
2139
|
-
</span>
|
|
2140
2005
|
</div>
|
|
2141
2006
|
</div>
|
|
2142
2007
|
</li>
|
|
@@ -2167,9 +2032,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
2167
2032
|
class="pf-v6-c-dual-list-selector__item-text"
|
|
2168
2033
|
>Type something</span>
|
|
2169
2034
|
</span>
|
|
2170
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
2171
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
2172
|
-
</span>
|
|
2173
2035
|
</div>
|
|
2174
2036
|
</div>
|
|
2175
2037
|
</li>
|
|
@@ -2266,7 +2128,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
2266
2128
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
2267
2129
|
type="button"
|
|
2268
2130
|
aria-expanded="false"
|
|
2269
|
-
aria-label="
|
|
2131
|
+
aria-label="Dual list item menu toggle"
|
|
2270
2132
|
id="tree-options-chosen-menu-toggle"
|
|
2271
2133
|
>
|
|
2272
2134
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -2314,9 +2176,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
2314
2176
|
</span>
|
|
2315
2177
|
<span class="pf-v6-c-dual-list-selector__item-text">Colors</span>
|
|
2316
2178
|
</span>
|
|
2317
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
2318
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
2319
|
-
</span>
|
|
2320
2179
|
</div>
|
|
2321
2180
|
</div>
|
|
2322
2181
|
|
|
@@ -2344,9 +2203,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
2344
2203
|
</span>
|
|
2345
2204
|
<span class="pf-v6-c-dual-list-selector__item-text">Orange</span>
|
|
2346
2205
|
</span>
|
|
2347
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
2348
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
2349
|
-
</span>
|
|
2350
2206
|
</div>
|
|
2351
2207
|
</div>
|
|
2352
2208
|
</li>
|
|
@@ -2359,13 +2215,10 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
2359
2215
|
|
|
2360
2216
|
```
|
|
2361
2217
|
|
|
2362
|
-
###
|
|
2218
|
+
### Tree view animated
|
|
2363
2219
|
|
|
2364
2220
|
```html
|
|
2365
|
-
<div
|
|
2366
|
-
id="draggable-help"
|
|
2367
|
-
>Activate the reorder button and use the arrow keys to reorder the list or use your mouse to drag/reorder. Press escape to cancel the reordering.</div>
|
|
2368
|
-
<div class="pf-v6-c-dual-list-selector">
|
|
2221
|
+
<div class="pf-v6-c-dual-list-selector pf-m-animate-expand">
|
|
2369
2222
|
<div class="pf-v6-c-dual-list-selector__pane pf-m-available">
|
|
2370
2223
|
<div class="pf-v6-c-dual-list-selector__header">
|
|
2371
2224
|
<div class="pf-v6-c-dual-list-selector__title">
|
|
@@ -2407,8 +2260,8 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
2407
2260
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
2408
2261
|
type="button"
|
|
2409
2262
|
aria-expanded="false"
|
|
2410
|
-
aria-label="
|
|
2411
|
-
id="
|
|
2263
|
+
aria-label="Dual list item menu toggle"
|
|
2264
|
+
id="tree-available-menu-toggle"
|
|
2412
2265
|
>
|
|
2413
2266
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
2414
2267
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
@@ -2419,160 +2272,641 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
2419
2272
|
<div class="pf-v6-c-dual-list-selector__status">
|
|
2420
2273
|
<span
|
|
2421
2274
|
class="pf-v6-c-dual-list-selector__status-text"
|
|
2422
|
-
id="
|
|
2423
|
-
>
|
|
2275
|
+
id="tree-available-status-text"
|
|
2276
|
+
>1 of 11 items selected</span>
|
|
2424
2277
|
</div>
|
|
2425
2278
|
<div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
|
|
2426
2279
|
<ul
|
|
2427
2280
|
class="pf-v6-c-dual-list-selector__list"
|
|
2428
|
-
role="
|
|
2429
|
-
aria-labelledby="
|
|
2281
|
+
role="tree"
|
|
2282
|
+
aria-labelledby="tree-available-status-text"
|
|
2430
2283
|
aria-multiselectable="true"
|
|
2431
2284
|
aria-activedescendant
|
|
2432
2285
|
>
|
|
2433
|
-
<li
|
|
2434
|
-
|
|
2435
|
-
|
|
2436
|
-
|
|
2437
|
-
|
|
2438
|
-
|
|
2439
|
-
|
|
2440
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
2441
|
-
</span>
|
|
2442
|
-
</span>
|
|
2443
|
-
</div>
|
|
2444
|
-
</li>
|
|
2445
|
-
<li class="pf-v6-c-dual-list-selector__list-item" role="option">
|
|
2446
|
-
<div class="pf-v6-c-dual-list-selector__list-item-row">
|
|
2447
|
-
<span class="pf-v6-c-dual-list-selector__item">
|
|
2448
|
-
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2449
|
-
<span class="pf-v6-c-dual-list-selector__item-text">Item4</span>
|
|
2450
|
-
</span>
|
|
2451
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
2452
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
2453
|
-
</span>
|
|
2454
|
-
</span>
|
|
2455
|
-
</div>
|
|
2456
|
-
</li>
|
|
2457
|
-
<li class="pf-v6-c-dual-list-selector__list-item" role="option">
|
|
2458
|
-
<div class="pf-v6-c-dual-list-selector__list-item-row">
|
|
2459
|
-
<span class="pf-v6-c-dual-list-selector__item">
|
|
2286
|
+
<li
|
|
2287
|
+
class="pf-v6-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded"
|
|
2288
|
+
aria-expanded="true"
|
|
2289
|
+
role="treeitem"
|
|
2290
|
+
>
|
|
2291
|
+
<div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
|
|
2292
|
+
<div class="pf-v6-c-dual-list-selector__item" tabindex="0">
|
|
2460
2293
|
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2461
|
-
<
|
|
2294
|
+
<div class="pf-v6-c-dual-list-selector__item-toggle">
|
|
2295
|
+
<span class="pf-v6-c-dual-list-selector__item-toggle-icon">
|
|
2296
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2297
|
+
</span>
|
|
2298
|
+
</div>
|
|
2299
|
+
<span class="pf-v6-c-dual-list-selector__item-check">
|
|
2300
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
2301
|
+
<input
|
|
2302
|
+
class="pf-v6-c-check__input"
|
|
2303
|
+
type="checkbox"
|
|
2304
|
+
id="check-0"
|
|
2305
|
+
aria-label="Dual list selector item check"
|
|
2306
|
+
/>
|
|
2307
|
+
</div>
|
|
2308
|
+
</span>
|
|
2309
|
+
<span class="pf-v6-c-dual-list-selector__item-text">Colors</span>
|
|
2462
2310
|
</span>
|
|
2463
2311
|
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
2464
|
-
<span class="pf-v6-c-badge pf-m-read"
|
|
2465
|
-
</span>
|
|
2466
|
-
</span>
|
|
2467
|
-
</div>
|
|
2468
|
-
</li>
|
|
2469
|
-
</ul>
|
|
2470
|
-
</div>
|
|
2471
|
-
</div>
|
|
2472
|
-
<div class="pf-v6-c-dual-list-selector__controls">
|
|
2473
|
-
<div class="pf-v6-c-dual-list-selector__controls-item">
|
|
2474
|
-
<button
|
|
2475
|
-
class="pf-v6-c-button pf-m-plain"
|
|
2476
|
-
type="button"
|
|
2477
|
-
disabled
|
|
2478
|
-
aria-label="Add selected"
|
|
2479
|
-
>
|
|
2480
|
-
<span class="pf-v6-c-button__icon">
|
|
2481
|
-
<i class="fas fa-angle-right fa-fw" aria-hidden="true"></i>
|
|
2482
|
-
</span>
|
|
2483
|
-
</button>
|
|
2484
|
-
</div>
|
|
2485
|
-
<div class="pf-v6-c-dual-list-selector__controls-item">
|
|
2486
|
-
<button
|
|
2487
|
-
class="pf-v6-c-button pf-m-plain"
|
|
2488
|
-
type="button"
|
|
2489
|
-
aria-label="Add all"
|
|
2490
|
-
>
|
|
2491
|
-
<span class="pf-v6-c-button__icon">
|
|
2492
|
-
<i class="fas fa-angle-double-right fa-fw" aria-hidden="true"></i>
|
|
2493
|
-
</span>
|
|
2494
|
-
</button>
|
|
2495
|
-
</div>
|
|
2496
|
-
<div class="pf-v6-c-dual-list-selector__controls-item">
|
|
2497
|
-
<button
|
|
2498
|
-
class="pf-v6-c-button pf-m-plain"
|
|
2499
|
-
type="button"
|
|
2500
|
-
disabled
|
|
2501
|
-
aria-label="Remove all"
|
|
2502
|
-
>
|
|
2503
|
-
<span class="pf-v6-c-button__icon">
|
|
2504
|
-
<i class="fas fa-angle-double-left fa-fw" aria-hidden="true"></i>
|
|
2505
|
-
</span>
|
|
2506
|
-
</button>
|
|
2507
|
-
</div>
|
|
2508
|
-
<div class="pf-v6-c-dual-list-selector__controls-item">
|
|
2509
|
-
<button
|
|
2510
|
-
class="pf-v6-c-button pf-m-plain"
|
|
2511
|
-
type="button"
|
|
2512
|
-
disabled
|
|
2513
|
-
aria-label="Remove selected"
|
|
2514
|
-
>
|
|
2515
|
-
<span class="pf-v6-c-button__icon">
|
|
2516
|
-
<i class="fas fa-angle-left fa-fw" aria-hidden="true"></i>
|
|
2517
|
-
</span>
|
|
2518
|
-
</button>
|
|
2519
|
-
</div>
|
|
2520
|
-
</div>
|
|
2521
|
-
<div class="pf-v6-c-dual-list-selector__pane pf-m-chosen">
|
|
2522
|
-
<div class="pf-v6-c-dual-list-selector__header">
|
|
2523
|
-
<div class="pf-v6-c-dual-list-selector__title">
|
|
2524
|
-
<div class="pf-v6-c-dual-list-selector__title-text">Chosen options</div>
|
|
2525
|
-
</div>
|
|
2526
|
-
</div>
|
|
2527
|
-
<div class="pf-v6-c-dual-list-selector__tools">
|
|
2528
|
-
<div class="pf-v6-c-dual-list-selector__tools-filter">
|
|
2529
|
-
<div class="pf-v6-c-text-input-group">
|
|
2530
|
-
<div class="pf-v6-c-text-input-group__main pf-m-icon">
|
|
2531
|
-
<span class="pf-v6-c-text-input-group__text">
|
|
2532
|
-
<span class="pf-v6-c-text-input-group__icon">
|
|
2533
|
-
<i class="fas fa-fw fa-search"></i>
|
|
2312
|
+
<span class="pf-v6-c-badge pf-m-read">6</span>
|
|
2534
2313
|
</span>
|
|
2535
|
-
|
|
2536
|
-
class="pf-v6-c-text-input-group__text-input"
|
|
2537
|
-
type="text"
|
|
2538
|
-
value
|
|
2539
|
-
aria-label="Search input"
|
|
2540
|
-
/>
|
|
2541
|
-
</span>
|
|
2314
|
+
</div>
|
|
2542
2315
|
</div>
|
|
2543
|
-
|
|
2544
|
-
|
|
2545
|
-
|
|
2546
|
-
|
|
2547
|
-
|
|
2548
|
-
|
|
2549
|
-
|
|
2550
|
-
|
|
2551
|
-
|
|
2552
|
-
|
|
2553
|
-
|
|
2554
|
-
|
|
2555
|
-
|
|
2556
|
-
|
|
2557
|
-
|
|
2558
|
-
|
|
2559
|
-
|
|
2560
|
-
|
|
2561
|
-
|
|
2562
|
-
|
|
2563
|
-
|
|
2564
|
-
|
|
2565
|
-
|
|
2566
|
-
|
|
2567
|
-
|
|
2568
|
-
|
|
2569
|
-
|
|
2570
|
-
|
|
2571
|
-
|
|
2572
|
-
|
|
2573
|
-
|
|
2574
|
-
|
|
2575
|
-
|
|
2316
|
+
|
|
2317
|
+
<ul
|
|
2318
|
+
class="pf-v6-c-dual-list-selector__list"
|
|
2319
|
+
role="group"
|
|
2320
|
+
aria-labelledby="-status-text"
|
|
2321
|
+
>
|
|
2322
|
+
<li class="pf-v6-c-dual-list-selector__list-item" role="treeitem">
|
|
2323
|
+
<div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
|
|
2324
|
+
<div class="pf-v6-c-dual-list-selector__item" tabindex="0">
|
|
2325
|
+
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2326
|
+
<span class="pf-v6-c-dual-list-selector__item-check">
|
|
2327
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
2328
|
+
<input
|
|
2329
|
+
class="pf-v6-c-check__input"
|
|
2330
|
+
type="checkbox"
|
|
2331
|
+
id="check-1"
|
|
2332
|
+
aria-label="Dual list selector item check"
|
|
2333
|
+
/>
|
|
2334
|
+
</div>
|
|
2335
|
+
</span>
|
|
2336
|
+
<span class="pf-v6-c-dual-list-selector__item-text">Red</span>
|
|
2337
|
+
</span>
|
|
2338
|
+
</div>
|
|
2339
|
+
</div>
|
|
2340
|
+
</li>
|
|
2341
|
+
<li class="pf-v6-c-dual-list-selector__list-item" role="treeitem">
|
|
2342
|
+
<div
|
|
2343
|
+
class="pf-v6-c-dual-list-selector__list-item-row pf-m-check pf-m-selected"
|
|
2344
|
+
>
|
|
2345
|
+
<div class="pf-v6-c-dual-list-selector__item" tabindex="0">
|
|
2346
|
+
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2347
|
+
<span class="pf-v6-c-dual-list-selector__item-check">
|
|
2348
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
2349
|
+
<input
|
|
2350
|
+
class="pf-v6-c-check__input"
|
|
2351
|
+
type="checkbox"
|
|
2352
|
+
id="check-2"
|
|
2353
|
+
checked
|
|
2354
|
+
aria-label="Dual list selector item check checked"
|
|
2355
|
+
/>
|
|
2356
|
+
</div>
|
|
2357
|
+
</span>
|
|
2358
|
+
<span class="pf-v6-c-dual-list-selector__item-text">Orange</span>
|
|
2359
|
+
</span>
|
|
2360
|
+
</div>
|
|
2361
|
+
</div>
|
|
2362
|
+
</li>
|
|
2363
|
+
<li class="pf-v6-c-dual-list-selector__list-item" role="treeitem">
|
|
2364
|
+
<div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
|
|
2365
|
+
<div class="pf-v6-c-dual-list-selector__item" tabindex="0">
|
|
2366
|
+
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2367
|
+
<span class="pf-v6-c-dual-list-selector__item-check">
|
|
2368
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
2369
|
+
<input
|
|
2370
|
+
class="pf-v6-c-check__input"
|
|
2371
|
+
type="checkbox"
|
|
2372
|
+
id="check-3"
|
|
2373
|
+
aria-label="Dual list selector item check"
|
|
2374
|
+
/>
|
|
2375
|
+
</div>
|
|
2376
|
+
</span>
|
|
2377
|
+
<span class="pf-v6-c-dual-list-selector__item-text">Yellow</span>
|
|
2378
|
+
</span>
|
|
2379
|
+
</div>
|
|
2380
|
+
</div>
|
|
2381
|
+
</li>
|
|
2382
|
+
<li
|
|
2383
|
+
class="pf-v6-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded"
|
|
2384
|
+
aria-expanded="true"
|
|
2385
|
+
role="treeitem"
|
|
2386
|
+
>
|
|
2387
|
+
<div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
|
|
2388
|
+
<div class="pf-v6-c-dual-list-selector__item" tabindex="0">
|
|
2389
|
+
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2390
|
+
<div class="pf-v6-c-dual-list-selector__item-toggle">
|
|
2391
|
+
<span
|
|
2392
|
+
class="pf-v6-c-dual-list-selector__item-toggle-icon"
|
|
2393
|
+
>
|
|
2394
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2395
|
+
</span>
|
|
2396
|
+
</div>
|
|
2397
|
+
<span class="pf-v6-c-dual-list-selector__item-check">
|
|
2398
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
2399
|
+
<input
|
|
2400
|
+
class="pf-v6-c-check__input"
|
|
2401
|
+
type="checkbox"
|
|
2402
|
+
id="check-4"
|
|
2403
|
+
aria-label="Dual list selector item check"
|
|
2404
|
+
/>
|
|
2405
|
+
</div>
|
|
2406
|
+
</span>
|
|
2407
|
+
<span class="pf-v6-c-dual-list-selector__item-text">Green</span>
|
|
2408
|
+
</span>
|
|
2409
|
+
</div>
|
|
2410
|
+
</div>
|
|
2411
|
+
|
|
2412
|
+
<ul
|
|
2413
|
+
class="pf-v6-c-dual-list-selector__list"
|
|
2414
|
+
role="group"
|
|
2415
|
+
aria-labelledby="-status-text"
|
|
2416
|
+
>
|
|
2417
|
+
<li
|
|
2418
|
+
class="pf-v6-c-dual-list-selector__list-item"
|
|
2419
|
+
role="treeitem"
|
|
2420
|
+
>
|
|
2421
|
+
<div
|
|
2422
|
+
class="pf-v6-c-dual-list-selector__list-item-row pf-m-check"
|
|
2423
|
+
>
|
|
2424
|
+
<div class="pf-v6-c-dual-list-selector__item" tabindex="0">
|
|
2425
|
+
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2426
|
+
<span class="pf-v6-c-dual-list-selector__item-check">
|
|
2427
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
2428
|
+
<input
|
|
2429
|
+
class="pf-v6-c-check__input"
|
|
2430
|
+
type="checkbox"
|
|
2431
|
+
id="check-5"
|
|
2432
|
+
aria-label="Dual list selector item check"
|
|
2433
|
+
/>
|
|
2434
|
+
</div>
|
|
2435
|
+
</span>
|
|
2436
|
+
<span
|
|
2437
|
+
class="pf-v6-c-dual-list-selector__item-text"
|
|
2438
|
+
>Light green</span>
|
|
2439
|
+
</span>
|
|
2440
|
+
</div>
|
|
2441
|
+
</div>
|
|
2442
|
+
</li>
|
|
2443
|
+
<li
|
|
2444
|
+
class="pf-v6-c-dual-list-selector__list-item"
|
|
2445
|
+
role="treeitem"
|
|
2446
|
+
>
|
|
2447
|
+
<div
|
|
2448
|
+
class="pf-v6-c-dual-list-selector__list-item-row pf-m-check"
|
|
2449
|
+
>
|
|
2450
|
+
<div class="pf-v6-c-dual-list-selector__item" tabindex="0">
|
|
2451
|
+
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2452
|
+
<span class="pf-v6-c-dual-list-selector__item-check">
|
|
2453
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
2454
|
+
<input
|
|
2455
|
+
class="pf-v6-c-check__input"
|
|
2456
|
+
type="checkbox"
|
|
2457
|
+
id="check-6"
|
|
2458
|
+
aria-label="Dual list selector item check"
|
|
2459
|
+
/>
|
|
2460
|
+
</div>
|
|
2461
|
+
</span>
|
|
2462
|
+
<span
|
|
2463
|
+
class="pf-v6-c-dual-list-selector__item-text"
|
|
2464
|
+
>Medium green</span>
|
|
2465
|
+
</span>
|
|
2466
|
+
</div>
|
|
2467
|
+
</div>
|
|
2468
|
+
</li>
|
|
2469
|
+
<li
|
|
2470
|
+
class="pf-v6-c-dual-list-selector__list-item"
|
|
2471
|
+
role="treeitem"
|
|
2472
|
+
>
|
|
2473
|
+
<div
|
|
2474
|
+
class="pf-v6-c-dual-list-selector__list-item-row pf-m-check"
|
|
2475
|
+
>
|
|
2476
|
+
<div class="pf-v6-c-dual-list-selector__item" tabindex="0">
|
|
2477
|
+
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2478
|
+
<span class="pf-v6-c-dual-list-selector__item-check">
|
|
2479
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
2480
|
+
<input
|
|
2481
|
+
class="pf-v6-c-check__input"
|
|
2482
|
+
type="checkbox"
|
|
2483
|
+
id="check-7"
|
|
2484
|
+
aria-label="Dual list selector item check"
|
|
2485
|
+
/>
|
|
2486
|
+
</div>
|
|
2487
|
+
</span>
|
|
2488
|
+
<span
|
|
2489
|
+
class="pf-v6-c-dual-list-selector__item-text"
|
|
2490
|
+
>Dark green</span>
|
|
2491
|
+
</span>
|
|
2492
|
+
</div>
|
|
2493
|
+
</div>
|
|
2494
|
+
</li>
|
|
2495
|
+
</ul>
|
|
2496
|
+
</li>
|
|
2497
|
+
</ul>
|
|
2498
|
+
</li>
|
|
2499
|
+
|
|
2500
|
+
<li
|
|
2501
|
+
class="pf-v6-c-dual-list-selector__list-item pf-m-expandable"
|
|
2502
|
+
aria-expanded="true"
|
|
2503
|
+
role="treeitem"
|
|
2504
|
+
>
|
|
2505
|
+
<div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
|
|
2506
|
+
<div class="pf-v6-c-dual-list-selector__item" tabindex="0">
|
|
2507
|
+
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2508
|
+
<div class="pf-v6-c-dual-list-selector__item-toggle">
|
|
2509
|
+
<span class="pf-v6-c-dual-list-selector__item-toggle-icon">
|
|
2510
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2511
|
+
</span>
|
|
2512
|
+
</div>
|
|
2513
|
+
<span class="pf-v6-c-dual-list-selector__item-check">
|
|
2514
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
2515
|
+
<input
|
|
2516
|
+
class="pf-v6-c-check__input"
|
|
2517
|
+
type="checkbox"
|
|
2518
|
+
id="check-8"
|
|
2519
|
+
aria-label="Dual list selector item check"
|
|
2520
|
+
/>
|
|
2521
|
+
</div>
|
|
2522
|
+
</span>
|
|
2523
|
+
<span
|
|
2524
|
+
class="pf-v6-c-dual-list-selector__item-text"
|
|
2525
|
+
>Type something</span>
|
|
2526
|
+
</span>
|
|
2527
|
+
</div>
|
|
2528
|
+
</div>
|
|
2529
|
+
</li>
|
|
2530
|
+
|
|
2531
|
+
<li class="pf-v6-c-dual-list-selector__list-item" role="treeitem">
|
|
2532
|
+
<div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
|
|
2533
|
+
<div class="pf-v6-c-dual-list-selector__item" tabindex="0">
|
|
2534
|
+
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2535
|
+
<span class="pf-v6-c-dual-list-selector__item-check">
|
|
2536
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
2537
|
+
<input
|
|
2538
|
+
class="pf-v6-c-check__input"
|
|
2539
|
+
type="checkbox"
|
|
2540
|
+
id="check-9"
|
|
2541
|
+
aria-label="Dual list selector item check"
|
|
2542
|
+
/>
|
|
2543
|
+
</div>
|
|
2544
|
+
</span>
|
|
2545
|
+
<span
|
|
2546
|
+
class="pf-v6-c-dual-list-selector__item-text"
|
|
2547
|
+
>Type something</span>
|
|
2548
|
+
</span>
|
|
2549
|
+
</div>
|
|
2550
|
+
</div>
|
|
2551
|
+
</li>
|
|
2552
|
+
|
|
2553
|
+
<li
|
|
2554
|
+
class="pf-v6-c-dual-list-selector__list-item pf-m-expandable"
|
|
2555
|
+
aria-expanded="true"
|
|
2556
|
+
role="treeitem"
|
|
2557
|
+
>
|
|
2558
|
+
<div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
|
|
2559
|
+
<div class="pf-v6-c-dual-list-selector__item" tabindex="0">
|
|
2560
|
+
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2561
|
+
<div class="pf-v6-c-dual-list-selector__item-toggle">
|
|
2562
|
+
<span class="pf-v6-c-dual-list-selector__item-toggle-icon">
|
|
2563
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2564
|
+
</span>
|
|
2565
|
+
</div>
|
|
2566
|
+
<span class="pf-v6-c-dual-list-selector__item-check">
|
|
2567
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
2568
|
+
<input
|
|
2569
|
+
class="pf-v6-c-check__input"
|
|
2570
|
+
type="checkbox"
|
|
2571
|
+
id="check-10"
|
|
2572
|
+
aria-label="Dual list selector item check"
|
|
2573
|
+
/>
|
|
2574
|
+
</div>
|
|
2575
|
+
</span>
|
|
2576
|
+
<span
|
|
2577
|
+
class="pf-v6-c-dual-list-selector__item-text"
|
|
2578
|
+
>Type something</span>
|
|
2579
|
+
</span>
|
|
2580
|
+
</div>
|
|
2581
|
+
</div>
|
|
2582
|
+
</li>
|
|
2583
|
+
</ul>
|
|
2584
|
+
</div>
|
|
2585
|
+
</div>
|
|
2586
|
+
<div class="pf-v6-c-dual-list-selector__controls">
|
|
2587
|
+
<div class="pf-v6-c-dual-list-selector__controls-item">
|
|
2588
|
+
<button
|
|
2589
|
+
class="pf-v6-c-button pf-m-plain"
|
|
2590
|
+
type="button"
|
|
2591
|
+
disabled
|
|
2592
|
+
aria-label="Add selected"
|
|
2593
|
+
>
|
|
2594
|
+
<span class="pf-v6-c-button__icon">
|
|
2595
|
+
<i class="fas fa-angle-right fa-fw" aria-hidden="true"></i>
|
|
2596
|
+
</span>
|
|
2597
|
+
</button>
|
|
2598
|
+
</div>
|
|
2599
|
+
<div class="pf-v6-c-dual-list-selector__controls-item">
|
|
2600
|
+
<button
|
|
2601
|
+
class="pf-v6-c-button pf-m-plain"
|
|
2602
|
+
type="button"
|
|
2603
|
+
aria-label="Add all"
|
|
2604
|
+
>
|
|
2605
|
+
<span class="pf-v6-c-button__icon">
|
|
2606
|
+
<i class="fas fa-angle-double-right fa-fw" aria-hidden="true"></i>
|
|
2607
|
+
</span>
|
|
2608
|
+
</button>
|
|
2609
|
+
</div>
|
|
2610
|
+
<div class="pf-v6-c-dual-list-selector__controls-item">
|
|
2611
|
+
<button
|
|
2612
|
+
class="pf-v6-c-button pf-m-plain"
|
|
2613
|
+
type="button"
|
|
2614
|
+
disabled
|
|
2615
|
+
aria-label="Remove all"
|
|
2616
|
+
>
|
|
2617
|
+
<span class="pf-v6-c-button__icon">
|
|
2618
|
+
<i class="fas fa-angle-double-left fa-fw" aria-hidden="true"></i>
|
|
2619
|
+
</span>
|
|
2620
|
+
</button>
|
|
2621
|
+
</div>
|
|
2622
|
+
<div class="pf-v6-c-dual-list-selector__controls-item">
|
|
2623
|
+
<button
|
|
2624
|
+
class="pf-v6-c-button pf-m-plain"
|
|
2625
|
+
type="button"
|
|
2626
|
+
disabled
|
|
2627
|
+
aria-label="Remove selected"
|
|
2628
|
+
>
|
|
2629
|
+
<span class="pf-v6-c-button__icon">
|
|
2630
|
+
<i class="fas fa-angle-left fa-fw" aria-hidden="true"></i>
|
|
2631
|
+
</span>
|
|
2632
|
+
</button>
|
|
2633
|
+
</div>
|
|
2634
|
+
</div>
|
|
2635
|
+
<div class="pf-v6-c-dual-list-selector__pane pf-m-chosen">
|
|
2636
|
+
<div class="pf-v6-c-dual-list-selector__header">
|
|
2637
|
+
<div class="pf-v6-c-dual-list-selector__title">
|
|
2638
|
+
<div class="pf-v6-c-dual-list-selector__title-text">Chosen options</div>
|
|
2639
|
+
</div>
|
|
2640
|
+
</div>
|
|
2641
|
+
<div class="pf-v6-c-dual-list-selector__tools">
|
|
2642
|
+
<div class="pf-v6-c-dual-list-selector__tools-filter">
|
|
2643
|
+
<div class="pf-v6-c-text-input-group">
|
|
2644
|
+
<div class="pf-v6-c-text-input-group__main pf-m-icon">
|
|
2645
|
+
<span class="pf-v6-c-text-input-group__text">
|
|
2646
|
+
<span class="pf-v6-c-text-input-group__icon">
|
|
2647
|
+
<i class="fas fa-fw fa-search"></i>
|
|
2648
|
+
</span>
|
|
2649
|
+
<input
|
|
2650
|
+
class="pf-v6-c-text-input-group__text-input"
|
|
2651
|
+
type="text"
|
|
2652
|
+
value
|
|
2653
|
+
aria-label="Search input"
|
|
2654
|
+
/>
|
|
2655
|
+
</span>
|
|
2656
|
+
</div>
|
|
2657
|
+
</div>
|
|
2658
|
+
</div>
|
|
2659
|
+
<div class="pf-v6-c-dual-list-selector__tools-actions">
|
|
2660
|
+
<button
|
|
2661
|
+
class="pf-v6-c-button pf-m-plain"
|
|
2662
|
+
type="button"
|
|
2663
|
+
aria-label="Sort"
|
|
2664
|
+
>
|
|
2665
|
+
<span class="pf-v6-c-button__icon pf-m-start">
|
|
2666
|
+
<i
|
|
2667
|
+
class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
|
|
2668
|
+
aria-hidden="true"
|
|
2669
|
+
></i>
|
|
2670
|
+
</span>
|
|
2671
|
+
</button>
|
|
2672
|
+
<button
|
|
2673
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
2674
|
+
type="button"
|
|
2675
|
+
aria-expanded="false"
|
|
2676
|
+
aria-label="Dual list item menu toggle"
|
|
2677
|
+
id="tree-chosen-menu-toggle"
|
|
2678
|
+
>
|
|
2679
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
2680
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
2681
|
+
</span>
|
|
2682
|
+
</button>
|
|
2683
|
+
</div>
|
|
2684
|
+
</div>
|
|
2685
|
+
<div class="pf-v6-c-dual-list-selector__status">
|
|
2686
|
+
<span
|
|
2687
|
+
class="pf-v6-c-dual-list-selector__status-text"
|
|
2688
|
+
id="tree-chosen-status-text"
|
|
2689
|
+
>0 of 0 items selected</span>
|
|
2690
|
+
</div>
|
|
2691
|
+
<div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
|
|
2692
|
+
<ul
|
|
2693
|
+
class="pf-v6-c-dual-list-selector__list"
|
|
2694
|
+
role="listbox"
|
|
2695
|
+
aria-labelledby="tree-chosen-status-text"
|
|
2696
|
+
aria-multiselectable="true"
|
|
2697
|
+
aria-activedescendant
|
|
2698
|
+
></ul>
|
|
2699
|
+
</div>
|
|
2700
|
+
</div>
|
|
2701
|
+
</div>
|
|
2702
|
+
|
|
2703
|
+
```
|
|
2704
|
+
|
|
2705
|
+
### Draggable
|
|
2706
|
+
|
|
2707
|
+
```html
|
|
2708
|
+
<div
|
|
2709
|
+
id="draggable-help"
|
|
2710
|
+
>Activate the reorder button and use the arrow keys to reorder the list or use your mouse to drag/reorder. Press escape to cancel the reordering.</div>
|
|
2711
|
+
<div class="pf-v6-c-dual-list-selector">
|
|
2712
|
+
<div class="pf-v6-c-dual-list-selector__pane pf-m-available">
|
|
2713
|
+
<div class="pf-v6-c-dual-list-selector__header">
|
|
2714
|
+
<div class="pf-v6-c-dual-list-selector__title">
|
|
2715
|
+
<div class="pf-v6-c-dual-list-selector__title-text">Available options</div>
|
|
2716
|
+
</div>
|
|
2717
|
+
</div>
|
|
2718
|
+
<div class="pf-v6-c-dual-list-selector__tools">
|
|
2719
|
+
<div class="pf-v6-c-dual-list-selector__tools-filter">
|
|
2720
|
+
<div class="pf-v6-c-text-input-group">
|
|
2721
|
+
<div class="pf-v6-c-text-input-group__main pf-m-icon">
|
|
2722
|
+
<span class="pf-v6-c-text-input-group__text">
|
|
2723
|
+
<span class="pf-v6-c-text-input-group__icon">
|
|
2724
|
+
<i class="fas fa-fw fa-search"></i>
|
|
2725
|
+
</span>
|
|
2726
|
+
<input
|
|
2727
|
+
class="pf-v6-c-text-input-group__text-input"
|
|
2728
|
+
type="text"
|
|
2729
|
+
value
|
|
2730
|
+
aria-label="Search input"
|
|
2731
|
+
/>
|
|
2732
|
+
</span>
|
|
2733
|
+
</div>
|
|
2734
|
+
</div>
|
|
2735
|
+
</div>
|
|
2736
|
+
<div class="pf-v6-c-dual-list-selector__tools-actions">
|
|
2737
|
+
<button
|
|
2738
|
+
class="pf-v6-c-button pf-m-plain"
|
|
2739
|
+
type="button"
|
|
2740
|
+
aria-label="Sort"
|
|
2741
|
+
>
|
|
2742
|
+
<span class="pf-v6-c-button__icon pf-m-start">
|
|
2743
|
+
<i
|
|
2744
|
+
class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
|
|
2745
|
+
aria-hidden="true"
|
|
2746
|
+
></i>
|
|
2747
|
+
</span>
|
|
2748
|
+
</button>
|
|
2749
|
+
<button
|
|
2750
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
2751
|
+
type="button"
|
|
2752
|
+
aria-expanded="false"
|
|
2753
|
+
aria-label="Dual list item menu toggle"
|
|
2754
|
+
id="draggable-available-menu-toggle"
|
|
2755
|
+
>
|
|
2756
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
2757
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
2758
|
+
</span>
|
|
2759
|
+
</button>
|
|
2760
|
+
</div>
|
|
2761
|
+
</div>
|
|
2762
|
+
<div class="pf-v6-c-dual-list-selector__status">
|
|
2763
|
+
<span
|
|
2764
|
+
class="pf-v6-c-dual-list-selector__status-text"
|
|
2765
|
+
id="draggable-available-status-text"
|
|
2766
|
+
>0 of 5 items selected</span>
|
|
2767
|
+
</div>
|
|
2768
|
+
<div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
|
|
2769
|
+
<ul
|
|
2770
|
+
class="pf-v6-c-dual-list-selector__list"
|
|
2771
|
+
role="listbox"
|
|
2772
|
+
aria-labelledby="draggable-available-status-text"
|
|
2773
|
+
aria-multiselectable="true"
|
|
2774
|
+
aria-activedescendant
|
|
2775
|
+
>
|
|
2776
|
+
<li class="pf-v6-c-dual-list-selector__list-item" role="option">
|
|
2777
|
+
<div class="pf-v6-c-dual-list-selector__list-item-row">
|
|
2778
|
+
<span class="pf-v6-c-dual-list-selector__item">
|
|
2779
|
+
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2780
|
+
<span class="pf-v6-c-dual-list-selector__item-text">Item1</span>
|
|
2781
|
+
</span>
|
|
2782
|
+
</span>
|
|
2783
|
+
</div>
|
|
2784
|
+
</li>
|
|
2785
|
+
<li class="pf-v6-c-dual-list-selector__list-item" role="option">
|
|
2786
|
+
<div class="pf-v6-c-dual-list-selector__list-item-row">
|
|
2787
|
+
<span class="pf-v6-c-dual-list-selector__item">
|
|
2788
|
+
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2789
|
+
<span class="pf-v6-c-dual-list-selector__item-text">Item4</span>
|
|
2790
|
+
</span>
|
|
2791
|
+
</span>
|
|
2792
|
+
</div>
|
|
2793
|
+
</li>
|
|
2794
|
+
<li class="pf-v6-c-dual-list-selector__list-item" role="option">
|
|
2795
|
+
<div class="pf-v6-c-dual-list-selector__list-item-row">
|
|
2796
|
+
<span class="pf-v6-c-dual-list-selector__item">
|
|
2797
|
+
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2798
|
+
<span class="pf-v6-c-dual-list-selector__item-text">Item6</span>
|
|
2799
|
+
</span>
|
|
2800
|
+
</span>
|
|
2801
|
+
</div>
|
|
2802
|
+
</li>
|
|
2803
|
+
</ul>
|
|
2804
|
+
</div>
|
|
2805
|
+
</div>
|
|
2806
|
+
<div class="pf-v6-c-dual-list-selector__controls">
|
|
2807
|
+
<div class="pf-v6-c-dual-list-selector__controls-item">
|
|
2808
|
+
<button
|
|
2809
|
+
class="pf-v6-c-button pf-m-plain"
|
|
2810
|
+
type="button"
|
|
2811
|
+
disabled
|
|
2812
|
+
aria-label="Add selected"
|
|
2813
|
+
>
|
|
2814
|
+
<span class="pf-v6-c-button__icon">
|
|
2815
|
+
<i class="fas fa-angle-right fa-fw" aria-hidden="true"></i>
|
|
2816
|
+
</span>
|
|
2817
|
+
</button>
|
|
2818
|
+
</div>
|
|
2819
|
+
<div class="pf-v6-c-dual-list-selector__controls-item">
|
|
2820
|
+
<button
|
|
2821
|
+
class="pf-v6-c-button pf-m-plain"
|
|
2822
|
+
type="button"
|
|
2823
|
+
aria-label="Add all"
|
|
2824
|
+
>
|
|
2825
|
+
<span class="pf-v6-c-button__icon">
|
|
2826
|
+
<i class="fas fa-angle-double-right fa-fw" aria-hidden="true"></i>
|
|
2827
|
+
</span>
|
|
2828
|
+
</button>
|
|
2829
|
+
</div>
|
|
2830
|
+
<div class="pf-v6-c-dual-list-selector__controls-item">
|
|
2831
|
+
<button
|
|
2832
|
+
class="pf-v6-c-button pf-m-plain"
|
|
2833
|
+
type="button"
|
|
2834
|
+
disabled
|
|
2835
|
+
aria-label="Remove all"
|
|
2836
|
+
>
|
|
2837
|
+
<span class="pf-v6-c-button__icon">
|
|
2838
|
+
<i class="fas fa-angle-double-left fa-fw" aria-hidden="true"></i>
|
|
2839
|
+
</span>
|
|
2840
|
+
</button>
|
|
2841
|
+
</div>
|
|
2842
|
+
<div class="pf-v6-c-dual-list-selector__controls-item">
|
|
2843
|
+
<button
|
|
2844
|
+
class="pf-v6-c-button pf-m-plain"
|
|
2845
|
+
type="button"
|
|
2846
|
+
disabled
|
|
2847
|
+
aria-label="Remove selected"
|
|
2848
|
+
>
|
|
2849
|
+
<span class="pf-v6-c-button__icon">
|
|
2850
|
+
<i class="fas fa-angle-left fa-fw" aria-hidden="true"></i>
|
|
2851
|
+
</span>
|
|
2852
|
+
</button>
|
|
2853
|
+
</div>
|
|
2854
|
+
</div>
|
|
2855
|
+
<div class="pf-v6-c-dual-list-selector__pane pf-m-chosen">
|
|
2856
|
+
<div class="pf-v6-c-dual-list-selector__header">
|
|
2857
|
+
<div class="pf-v6-c-dual-list-selector__title">
|
|
2858
|
+
<div class="pf-v6-c-dual-list-selector__title-text">Chosen options</div>
|
|
2859
|
+
</div>
|
|
2860
|
+
</div>
|
|
2861
|
+
<div class="pf-v6-c-dual-list-selector__tools">
|
|
2862
|
+
<div class="pf-v6-c-dual-list-selector__tools-filter">
|
|
2863
|
+
<div class="pf-v6-c-text-input-group">
|
|
2864
|
+
<div class="pf-v6-c-text-input-group__main pf-m-icon">
|
|
2865
|
+
<span class="pf-v6-c-text-input-group__text">
|
|
2866
|
+
<span class="pf-v6-c-text-input-group__icon">
|
|
2867
|
+
<i class="fas fa-fw fa-search"></i>
|
|
2868
|
+
</span>
|
|
2869
|
+
<input
|
|
2870
|
+
class="pf-v6-c-text-input-group__text-input"
|
|
2871
|
+
type="text"
|
|
2872
|
+
value
|
|
2873
|
+
aria-label="Search input"
|
|
2874
|
+
/>
|
|
2875
|
+
</span>
|
|
2876
|
+
</div>
|
|
2877
|
+
</div>
|
|
2878
|
+
</div>
|
|
2879
|
+
<div class="pf-v6-c-dual-list-selector__tools-actions">
|
|
2880
|
+
<button
|
|
2881
|
+
class="pf-v6-c-button pf-m-plain"
|
|
2882
|
+
type="button"
|
|
2883
|
+
aria-label="Sort"
|
|
2884
|
+
>
|
|
2885
|
+
<span class="pf-v6-c-button__icon pf-m-start">
|
|
2886
|
+
<i
|
|
2887
|
+
class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
|
|
2888
|
+
aria-hidden="true"
|
|
2889
|
+
></i>
|
|
2890
|
+
</span>
|
|
2891
|
+
</button>
|
|
2892
|
+
<button
|
|
2893
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
2894
|
+
type="button"
|
|
2895
|
+
aria-expanded="false"
|
|
2896
|
+
aria-label="Dual list item menu toggle"
|
|
2897
|
+
id="draggable-chosen-menu-toggle"
|
|
2898
|
+
>
|
|
2899
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
2900
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
2901
|
+
</span>
|
|
2902
|
+
</button>
|
|
2903
|
+
</div>
|
|
2904
|
+
</div>
|
|
2905
|
+
<div class="pf-v6-c-dual-list-selector__status">
|
|
2906
|
+
<span
|
|
2907
|
+
class="pf-v6-c-dual-list-selector__status-text"
|
|
2908
|
+
id="draggable-chosen-status-text"
|
|
2909
|
+
>0 of 0 items selected</span>
|
|
2576
2910
|
</div>
|
|
2577
2911
|
<div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
|
|
2578
2912
|
<ul
|
|
@@ -2598,9 +2932,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
2598
2932
|
id="draggable-list-item-2-item-text"
|
|
2599
2933
|
>Item2 - draggable icon disabled</span>
|
|
2600
2934
|
</span>
|
|
2601
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
2602
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
2603
|
-
</span>
|
|
2604
2935
|
</span>
|
|
2605
2936
|
</div>
|
|
2606
2937
|
</li>
|
|
@@ -2620,9 +2951,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
2620
2951
|
id="draggable-list-item-3-item-text"
|
|
2621
2952
|
>Item3</span>
|
|
2622
2953
|
</span>
|
|
2623
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
2624
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
2625
|
-
</span>
|
|
2626
2954
|
</span>
|
|
2627
2955
|
</div>
|
|
2628
2956
|
</li>
|
|
@@ -2642,9 +2970,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
2642
2970
|
id="draggable-list-item-5-item-text"
|
|
2643
2971
|
>Item5 - ghost row</span>
|
|
2644
2972
|
</span>
|
|
2645
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
2646
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
2647
|
-
</span>
|
|
2648
2973
|
</span>
|
|
2649
2974
|
</div>
|
|
2650
2975
|
</li>
|
|
@@ -2664,9 +2989,6 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
2664
2989
|
id="draggable-list-item-7-item-text"
|
|
2665
2990
|
>Item7 - selected</span>
|
|
2666
2991
|
</span>
|
|
2667
|
-
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
2668
|
-
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
2669
|
-
</span>
|
|
2670
2992
|
</span>
|
|
2671
2993
|
</div>
|
|
2672
2994
|
</li>
|
|
@@ -2724,6 +3046,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
2724
3046
|
| `.pf-v6-c-dual-list-selector__item-text` | `<span>` | Initiates a dual list selector pane menu item text. **Required** |
|
|
2725
3047
|
| `.pf-v6-c-dual-list-selector__controls` | `<div>` | Initiates the dual list selector controls. **Required** |
|
|
2726
3048
|
| `.pf-v6-c-dual-list-selector__controls-item` | `<div>` | Initiates the dual list selector controls item. **Required** |
|
|
3049
|
+
| `.pf-m-animate-expand` | `.pf-v6-c-dual-list-selector` | Animates the expansion of dual list selector tree view. |
|
|
2727
3050
|
| `.pf-m-available` | `.pf-v6-c-dual-list-selector__pane` | Defines a pane as the available list. |
|
|
2728
3051
|
| `.pf-m-chosen` | `.pf-v6-c-dual-list-selector__pane` | Defines a pane as the chosen list. |
|
|
2729
3052
|
| `.pf-m-drag-over` | `.pf-v6-c-dual-list-selector__list` | Modifies the dual list selector list to indicate that a draggable item is being dragged over the list. |
|