@patternfly/patternfly 6.3.0-prerelease.2 → 6.3.0-prerelease.21
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/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/patternfly-common.css +11 -11
- package/base/patternfly-common.scss +12 -12
- package/components/Accordion/accordion.css +71 -1
- package/components/Accordion/accordion.scss +75 -4
- package/components/Alert/alert-group.css +52 -31
- package/components/Alert/alert-group.scss +77 -46
- package/components/Button/button.css +27 -0
- package/components/Button/button.scss +30 -1
- package/components/CodeEditor/code-editor.css +3 -0
- package/components/CodeEditor/code-editor.scss +3 -1
- package/components/Drawer/drawer.css +28 -14
- package/components/Drawer/drawer.scss +28 -9
- package/components/DualListSelector/dual-list-selector.css +36 -0
- package/components/DualListSelector/dual-list-selector.scss +43 -0
- package/components/ExpandableSection/expandable-section.css +45 -1
- package/components/ExpandableSection/expandable-section.scss +48 -1
- package/components/MenuToggle/menu-toggle.css +8 -4
- package/components/MenuToggle/menu-toggle.scss +15 -3
- package/components/Page/page.css +4 -3
- package/components/Page/page.scss +4 -2
- package/components/ProgressStepper/progress-stepper.scss +1 -0
- 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 +6 -5
- package/components/Table/table-grid.scss +2 -1
- package/components/Table/table.css +33 -0
- package/components/Table/table.scss +33 -0
- package/components/Tabs/tabs.css +25 -15
- package/components/Tabs/tabs.scss +26 -13
- package/components/Timestamp/timestamp.css +4 -0
- package/components/Timestamp/timestamp.scss +7 -0
- package/components/TreeView/tree-view.css +33 -0
- package/components/TreeView/tree-view.scss +36 -2
- package/components/Truncate/truncate.css +6 -0
- package/components/Truncate/truncate.scss +9 -0
- package/components/_index.css +408 -76
- package/docs/components/Button/examples/Button.md +73 -3
- package/docs/components/CodeEditor/examples/CodeEditor.md +26 -2
- package/docs/components/Divider/examples/Divider.md +1 -1
- package/docs/components/Drawer/examples/Drawer.md +4 -0
- package/docs/components/DualListSelector/examples/DualListSelector.md +518 -0
- package/docs/components/Form/examples/Form.md +156 -12
- package/docs/components/Menu/examples/Menu.md +120 -4
- package/docs/components/MenuToggle/examples/MenuToggle.md +3 -4
- package/docs/components/ModalBox/examples/ModalBox.md +13 -1
- package/docs/components/Page/examples/Page.md +1 -0
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
- package/docs/components/Spinner/examples/Spinner.md +10 -0
- package/docs/components/Table/examples/Table.md +330 -16
- package/docs/components/Tabs/examples/Tabs.md +1214 -6729
- package/docs/components/Truncate/examples/Truncate.md +53 -10
- package/docs/demos/Card/examples/Card.md +0 -57
- package/docs/demos/DescriptionList/examples/DescriptionList.md +0 -38
- package/docs/demos/Drawer/examples/Drawer.md +0 -38
- package/docs/demos/Form/examples/BasicForms.md +130 -10
- package/docs/demos/Masthead/examples/Masthead.md +1 -1
- package/docs/demos/Modal/examples/Modal.md +39 -3
- package/docs/demos/Nav/examples/Nav.md +2 -2
- package/docs/demos/Page/examples/Page.md +355 -0
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +0 -76
- package/docs/demos/Table/examples/Table.md +67 -23
- package/docs/demos/Tabs/examples/Tabs.md +0 -570
- package/package.json +6 -6
- package/patternfly-base-no-globals.css +11 -11
- package/patternfly-base.css +11 -11
- package/patternfly-no-globals.css +419 -87
- package/patternfly.css +419 -87
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -2359,6 +2359,523 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
2359
2359
|
|
|
2360
2360
|
```
|
|
2361
2361
|
|
|
2362
|
+
### Tree view animated
|
|
2363
|
+
|
|
2364
|
+
```html
|
|
2365
|
+
<div class="pf-v6-c-dual-list-selector pf-m-animate-expand">
|
|
2366
|
+
<div class="pf-v6-c-dual-list-selector__pane pf-m-available">
|
|
2367
|
+
<div class="pf-v6-c-dual-list-selector__header">
|
|
2368
|
+
<div class="pf-v6-c-dual-list-selector__title">
|
|
2369
|
+
<div class="pf-v6-c-dual-list-selector__title-text">Available options</div>
|
|
2370
|
+
</div>
|
|
2371
|
+
</div>
|
|
2372
|
+
<div class="pf-v6-c-dual-list-selector__tools">
|
|
2373
|
+
<div class="pf-v6-c-dual-list-selector__tools-filter">
|
|
2374
|
+
<div class="pf-v6-c-text-input-group">
|
|
2375
|
+
<div class="pf-v6-c-text-input-group__main pf-m-icon">
|
|
2376
|
+
<span class="pf-v6-c-text-input-group__text">
|
|
2377
|
+
<span class="pf-v6-c-text-input-group__icon">
|
|
2378
|
+
<i class="fas fa-fw fa-search"></i>
|
|
2379
|
+
</span>
|
|
2380
|
+
<input
|
|
2381
|
+
class="pf-v6-c-text-input-group__text-input"
|
|
2382
|
+
type="text"
|
|
2383
|
+
value
|
|
2384
|
+
aria-label="Search input"
|
|
2385
|
+
/>
|
|
2386
|
+
</span>
|
|
2387
|
+
</div>
|
|
2388
|
+
</div>
|
|
2389
|
+
</div>
|
|
2390
|
+
<div class="pf-v6-c-dual-list-selector__tools-actions">
|
|
2391
|
+
<button
|
|
2392
|
+
class="pf-v6-c-button pf-m-plain"
|
|
2393
|
+
type="button"
|
|
2394
|
+
aria-label="Sort"
|
|
2395
|
+
>
|
|
2396
|
+
<span class="pf-v6-c-button__icon pf-m-start">
|
|
2397
|
+
<i
|
|
2398
|
+
class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
|
|
2399
|
+
aria-hidden="true"
|
|
2400
|
+
></i>
|
|
2401
|
+
</span>
|
|
2402
|
+
</button>
|
|
2403
|
+
<button
|
|
2404
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
2405
|
+
type="button"
|
|
2406
|
+
aria-expanded="false"
|
|
2407
|
+
aria-label="Menu toggle"
|
|
2408
|
+
id="tree-available-menu-toggle"
|
|
2409
|
+
>
|
|
2410
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
2411
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
2412
|
+
</span>
|
|
2413
|
+
</button>
|
|
2414
|
+
</div>
|
|
2415
|
+
</div>
|
|
2416
|
+
<div class="pf-v6-c-dual-list-selector__status">
|
|
2417
|
+
<span
|
|
2418
|
+
class="pf-v6-c-dual-list-selector__status-text"
|
|
2419
|
+
id="tree-available-status-text"
|
|
2420
|
+
>1 of 11 items selected</span>
|
|
2421
|
+
</div>
|
|
2422
|
+
<div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
|
|
2423
|
+
<ul
|
|
2424
|
+
class="pf-v6-c-dual-list-selector__list"
|
|
2425
|
+
role="tree"
|
|
2426
|
+
aria-labelledby="tree-available-status-text"
|
|
2427
|
+
aria-multiselectable="true"
|
|
2428
|
+
aria-activedescendant
|
|
2429
|
+
>
|
|
2430
|
+
<li
|
|
2431
|
+
class="pf-v6-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded"
|
|
2432
|
+
aria-expanded="true"
|
|
2433
|
+
role="treeitem"
|
|
2434
|
+
>
|
|
2435
|
+
<div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
|
|
2436
|
+
<div class="pf-v6-c-dual-list-selector__item" tabindex="0">
|
|
2437
|
+
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2438
|
+
<div class="pf-v6-c-dual-list-selector__item-toggle">
|
|
2439
|
+
<span class="pf-v6-c-dual-list-selector__item-toggle-icon">
|
|
2440
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2441
|
+
</span>
|
|
2442
|
+
</div>
|
|
2443
|
+
<span class="pf-v6-c-dual-list-selector__item-check">
|
|
2444
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
2445
|
+
<input
|
|
2446
|
+
class="pf-v6-c-check__input"
|
|
2447
|
+
type="checkbox"
|
|
2448
|
+
id="check-0"
|
|
2449
|
+
aria-label="Dual list selector item check"
|
|
2450
|
+
/>
|
|
2451
|
+
</div>
|
|
2452
|
+
</span>
|
|
2453
|
+
<span class="pf-v6-c-dual-list-selector__item-text">Colors</span>
|
|
2454
|
+
</span>
|
|
2455
|
+
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
2456
|
+
<span class="pf-v6-c-badge pf-m-read">6</span>
|
|
2457
|
+
</span>
|
|
2458
|
+
</div>
|
|
2459
|
+
</div>
|
|
2460
|
+
|
|
2461
|
+
<ul
|
|
2462
|
+
class="pf-v6-c-dual-list-selector__list"
|
|
2463
|
+
role="group"
|
|
2464
|
+
aria-labelledby="-status-text"
|
|
2465
|
+
>
|
|
2466
|
+
<li class="pf-v6-c-dual-list-selector__list-item" role="treeitem">
|
|
2467
|
+
<div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
|
|
2468
|
+
<div class="pf-v6-c-dual-list-selector__item" tabindex="0">
|
|
2469
|
+
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2470
|
+
<span class="pf-v6-c-dual-list-selector__item-check">
|
|
2471
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
2472
|
+
<input
|
|
2473
|
+
class="pf-v6-c-check__input"
|
|
2474
|
+
type="checkbox"
|
|
2475
|
+
id="check-1"
|
|
2476
|
+
aria-label="Dual list selector item check"
|
|
2477
|
+
/>
|
|
2478
|
+
</div>
|
|
2479
|
+
</span>
|
|
2480
|
+
<span class="pf-v6-c-dual-list-selector__item-text">Red</span>
|
|
2481
|
+
</span>
|
|
2482
|
+
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
2483
|
+
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
2484
|
+
</span>
|
|
2485
|
+
</div>
|
|
2486
|
+
</div>
|
|
2487
|
+
</li>
|
|
2488
|
+
<li class="pf-v6-c-dual-list-selector__list-item" role="treeitem">
|
|
2489
|
+
<div
|
|
2490
|
+
class="pf-v6-c-dual-list-selector__list-item-row pf-m-check pf-m-selected"
|
|
2491
|
+
>
|
|
2492
|
+
<div class="pf-v6-c-dual-list-selector__item" tabindex="0">
|
|
2493
|
+
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2494
|
+
<span class="pf-v6-c-dual-list-selector__item-check">
|
|
2495
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
2496
|
+
<input
|
|
2497
|
+
class="pf-v6-c-check__input"
|
|
2498
|
+
type="checkbox"
|
|
2499
|
+
id="check-2"
|
|
2500
|
+
checked
|
|
2501
|
+
aria-label="Dual list selector item check checked"
|
|
2502
|
+
/>
|
|
2503
|
+
</div>
|
|
2504
|
+
</span>
|
|
2505
|
+
<span class="pf-v6-c-dual-list-selector__item-text">Orange</span>
|
|
2506
|
+
</span>
|
|
2507
|
+
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
2508
|
+
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
2509
|
+
</span>
|
|
2510
|
+
</div>
|
|
2511
|
+
</div>
|
|
2512
|
+
</li>
|
|
2513
|
+
<li class="pf-v6-c-dual-list-selector__list-item" role="treeitem">
|
|
2514
|
+
<div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
|
|
2515
|
+
<div class="pf-v6-c-dual-list-selector__item" tabindex="0">
|
|
2516
|
+
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2517
|
+
<span class="pf-v6-c-dual-list-selector__item-check">
|
|
2518
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
2519
|
+
<input
|
|
2520
|
+
class="pf-v6-c-check__input"
|
|
2521
|
+
type="checkbox"
|
|
2522
|
+
id="check-3"
|
|
2523
|
+
aria-label="Dual list selector item check"
|
|
2524
|
+
/>
|
|
2525
|
+
</div>
|
|
2526
|
+
</span>
|
|
2527
|
+
<span class="pf-v6-c-dual-list-selector__item-text">Yellow</span>
|
|
2528
|
+
</span>
|
|
2529
|
+
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
2530
|
+
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
2531
|
+
</span>
|
|
2532
|
+
</div>
|
|
2533
|
+
</div>
|
|
2534
|
+
</li>
|
|
2535
|
+
<li
|
|
2536
|
+
class="pf-v6-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded"
|
|
2537
|
+
aria-expanded="true"
|
|
2538
|
+
role="treeitem"
|
|
2539
|
+
>
|
|
2540
|
+
<div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
|
|
2541
|
+
<div class="pf-v6-c-dual-list-selector__item" tabindex="0">
|
|
2542
|
+
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2543
|
+
<div class="pf-v6-c-dual-list-selector__item-toggle">
|
|
2544
|
+
<span
|
|
2545
|
+
class="pf-v6-c-dual-list-selector__item-toggle-icon"
|
|
2546
|
+
>
|
|
2547
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2548
|
+
</span>
|
|
2549
|
+
</div>
|
|
2550
|
+
<span class="pf-v6-c-dual-list-selector__item-check">
|
|
2551
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
2552
|
+
<input
|
|
2553
|
+
class="pf-v6-c-check__input"
|
|
2554
|
+
type="checkbox"
|
|
2555
|
+
id="check-4"
|
|
2556
|
+
aria-label="Dual list selector item check"
|
|
2557
|
+
/>
|
|
2558
|
+
</div>
|
|
2559
|
+
</span>
|
|
2560
|
+
<span class="pf-v6-c-dual-list-selector__item-text">Green</span>
|
|
2561
|
+
</span>
|
|
2562
|
+
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
2563
|
+
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
2564
|
+
</span>
|
|
2565
|
+
</div>
|
|
2566
|
+
</div>
|
|
2567
|
+
|
|
2568
|
+
<ul
|
|
2569
|
+
class="pf-v6-c-dual-list-selector__list"
|
|
2570
|
+
role="group"
|
|
2571
|
+
aria-labelledby="-status-text"
|
|
2572
|
+
>
|
|
2573
|
+
<li
|
|
2574
|
+
class="pf-v6-c-dual-list-selector__list-item"
|
|
2575
|
+
role="treeitem"
|
|
2576
|
+
>
|
|
2577
|
+
<div
|
|
2578
|
+
class="pf-v6-c-dual-list-selector__list-item-row pf-m-check"
|
|
2579
|
+
>
|
|
2580
|
+
<div class="pf-v6-c-dual-list-selector__item" tabindex="0">
|
|
2581
|
+
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2582
|
+
<span class="pf-v6-c-dual-list-selector__item-check">
|
|
2583
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
2584
|
+
<input
|
|
2585
|
+
class="pf-v6-c-check__input"
|
|
2586
|
+
type="checkbox"
|
|
2587
|
+
id="check-5"
|
|
2588
|
+
aria-label="Dual list selector item check"
|
|
2589
|
+
/>
|
|
2590
|
+
</div>
|
|
2591
|
+
</span>
|
|
2592
|
+
<span
|
|
2593
|
+
class="pf-v6-c-dual-list-selector__item-text"
|
|
2594
|
+
>Light green</span>
|
|
2595
|
+
</span>
|
|
2596
|
+
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
2597
|
+
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
2598
|
+
</span>
|
|
2599
|
+
</div>
|
|
2600
|
+
</div>
|
|
2601
|
+
</li>
|
|
2602
|
+
<li
|
|
2603
|
+
class="pf-v6-c-dual-list-selector__list-item"
|
|
2604
|
+
role="treeitem"
|
|
2605
|
+
>
|
|
2606
|
+
<div
|
|
2607
|
+
class="pf-v6-c-dual-list-selector__list-item-row pf-m-check"
|
|
2608
|
+
>
|
|
2609
|
+
<div class="pf-v6-c-dual-list-selector__item" tabindex="0">
|
|
2610
|
+
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2611
|
+
<span class="pf-v6-c-dual-list-selector__item-check">
|
|
2612
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
2613
|
+
<input
|
|
2614
|
+
class="pf-v6-c-check__input"
|
|
2615
|
+
type="checkbox"
|
|
2616
|
+
id="check-6"
|
|
2617
|
+
aria-label="Dual list selector item check"
|
|
2618
|
+
/>
|
|
2619
|
+
</div>
|
|
2620
|
+
</span>
|
|
2621
|
+
<span
|
|
2622
|
+
class="pf-v6-c-dual-list-selector__item-text"
|
|
2623
|
+
>Medium green</span>
|
|
2624
|
+
</span>
|
|
2625
|
+
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
2626
|
+
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
2627
|
+
</span>
|
|
2628
|
+
</div>
|
|
2629
|
+
</div>
|
|
2630
|
+
</li>
|
|
2631
|
+
<li
|
|
2632
|
+
class="pf-v6-c-dual-list-selector__list-item"
|
|
2633
|
+
role="treeitem"
|
|
2634
|
+
>
|
|
2635
|
+
<div
|
|
2636
|
+
class="pf-v6-c-dual-list-selector__list-item-row pf-m-check"
|
|
2637
|
+
>
|
|
2638
|
+
<div class="pf-v6-c-dual-list-selector__item" tabindex="0">
|
|
2639
|
+
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2640
|
+
<span class="pf-v6-c-dual-list-selector__item-check">
|
|
2641
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
2642
|
+
<input
|
|
2643
|
+
class="pf-v6-c-check__input"
|
|
2644
|
+
type="checkbox"
|
|
2645
|
+
id="check-7"
|
|
2646
|
+
aria-label="Dual list selector item check"
|
|
2647
|
+
/>
|
|
2648
|
+
</div>
|
|
2649
|
+
</span>
|
|
2650
|
+
<span
|
|
2651
|
+
class="pf-v6-c-dual-list-selector__item-text"
|
|
2652
|
+
>Dark green</span>
|
|
2653
|
+
</span>
|
|
2654
|
+
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
2655
|
+
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
2656
|
+
</span>
|
|
2657
|
+
</div>
|
|
2658
|
+
</div>
|
|
2659
|
+
</li>
|
|
2660
|
+
</ul>
|
|
2661
|
+
</li>
|
|
2662
|
+
</ul>
|
|
2663
|
+
</li>
|
|
2664
|
+
|
|
2665
|
+
<li
|
|
2666
|
+
class="pf-v6-c-dual-list-selector__list-item pf-m-expandable"
|
|
2667
|
+
aria-expanded="true"
|
|
2668
|
+
role="treeitem"
|
|
2669
|
+
>
|
|
2670
|
+
<div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
|
|
2671
|
+
<div class="pf-v6-c-dual-list-selector__item" tabindex="0">
|
|
2672
|
+
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2673
|
+
<div class="pf-v6-c-dual-list-selector__item-toggle">
|
|
2674
|
+
<span class="pf-v6-c-dual-list-selector__item-toggle-icon">
|
|
2675
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2676
|
+
</span>
|
|
2677
|
+
</div>
|
|
2678
|
+
<span class="pf-v6-c-dual-list-selector__item-check">
|
|
2679
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
2680
|
+
<input
|
|
2681
|
+
class="pf-v6-c-check__input"
|
|
2682
|
+
type="checkbox"
|
|
2683
|
+
id="check-8"
|
|
2684
|
+
aria-label="Dual list selector item check"
|
|
2685
|
+
/>
|
|
2686
|
+
</div>
|
|
2687
|
+
</span>
|
|
2688
|
+
<span
|
|
2689
|
+
class="pf-v6-c-dual-list-selector__item-text"
|
|
2690
|
+
>Type something</span>
|
|
2691
|
+
</span>
|
|
2692
|
+
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
2693
|
+
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
2694
|
+
</span>
|
|
2695
|
+
</div>
|
|
2696
|
+
</div>
|
|
2697
|
+
</li>
|
|
2698
|
+
|
|
2699
|
+
<li class="pf-v6-c-dual-list-selector__list-item" role="treeitem">
|
|
2700
|
+
<div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
|
|
2701
|
+
<div class="pf-v6-c-dual-list-selector__item" tabindex="0">
|
|
2702
|
+
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2703
|
+
<span class="pf-v6-c-dual-list-selector__item-check">
|
|
2704
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
2705
|
+
<input
|
|
2706
|
+
class="pf-v6-c-check__input"
|
|
2707
|
+
type="checkbox"
|
|
2708
|
+
id="check-9"
|
|
2709
|
+
aria-label="Dual list selector item check"
|
|
2710
|
+
/>
|
|
2711
|
+
</div>
|
|
2712
|
+
</span>
|
|
2713
|
+
<span
|
|
2714
|
+
class="pf-v6-c-dual-list-selector__item-text"
|
|
2715
|
+
>Type something</span>
|
|
2716
|
+
</span>
|
|
2717
|
+
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
2718
|
+
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
2719
|
+
</span>
|
|
2720
|
+
</div>
|
|
2721
|
+
</div>
|
|
2722
|
+
</li>
|
|
2723
|
+
|
|
2724
|
+
<li
|
|
2725
|
+
class="pf-v6-c-dual-list-selector__list-item pf-m-expandable"
|
|
2726
|
+
aria-expanded="true"
|
|
2727
|
+
role="treeitem"
|
|
2728
|
+
>
|
|
2729
|
+
<div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
|
|
2730
|
+
<div class="pf-v6-c-dual-list-selector__item" tabindex="0">
|
|
2731
|
+
<span class="pf-v6-c-dual-list-selector__item-main">
|
|
2732
|
+
<div class="pf-v6-c-dual-list-selector__item-toggle">
|
|
2733
|
+
<span class="pf-v6-c-dual-list-selector__item-toggle-icon">
|
|
2734
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2735
|
+
</span>
|
|
2736
|
+
</div>
|
|
2737
|
+
<span class="pf-v6-c-dual-list-selector__item-check">
|
|
2738
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
2739
|
+
<input
|
|
2740
|
+
class="pf-v6-c-check__input"
|
|
2741
|
+
type="checkbox"
|
|
2742
|
+
id="check-10"
|
|
2743
|
+
aria-label="Dual list selector item check"
|
|
2744
|
+
/>
|
|
2745
|
+
</div>
|
|
2746
|
+
</span>
|
|
2747
|
+
<span
|
|
2748
|
+
class="pf-v6-c-dual-list-selector__item-text"
|
|
2749
|
+
>Type something</span>
|
|
2750
|
+
</span>
|
|
2751
|
+
<span class="pf-v6-c-dual-list-selector__item-count">
|
|
2752
|
+
<span class="pf-v6-c-badge pf-m-read"></span>
|
|
2753
|
+
</span>
|
|
2754
|
+
</div>
|
|
2755
|
+
</div>
|
|
2756
|
+
</li>
|
|
2757
|
+
</ul>
|
|
2758
|
+
</div>
|
|
2759
|
+
</div>
|
|
2760
|
+
<div class="pf-v6-c-dual-list-selector__controls">
|
|
2761
|
+
<div class="pf-v6-c-dual-list-selector__controls-item">
|
|
2762
|
+
<button
|
|
2763
|
+
class="pf-v6-c-button pf-m-plain"
|
|
2764
|
+
type="button"
|
|
2765
|
+
disabled
|
|
2766
|
+
aria-label="Add selected"
|
|
2767
|
+
>
|
|
2768
|
+
<span class="pf-v6-c-button__icon">
|
|
2769
|
+
<i class="fas fa-angle-right fa-fw" aria-hidden="true"></i>
|
|
2770
|
+
</span>
|
|
2771
|
+
</button>
|
|
2772
|
+
</div>
|
|
2773
|
+
<div class="pf-v6-c-dual-list-selector__controls-item">
|
|
2774
|
+
<button
|
|
2775
|
+
class="pf-v6-c-button pf-m-plain"
|
|
2776
|
+
type="button"
|
|
2777
|
+
aria-label="Add all"
|
|
2778
|
+
>
|
|
2779
|
+
<span class="pf-v6-c-button__icon">
|
|
2780
|
+
<i class="fas fa-angle-double-right fa-fw" aria-hidden="true"></i>
|
|
2781
|
+
</span>
|
|
2782
|
+
</button>
|
|
2783
|
+
</div>
|
|
2784
|
+
<div class="pf-v6-c-dual-list-selector__controls-item">
|
|
2785
|
+
<button
|
|
2786
|
+
class="pf-v6-c-button pf-m-plain"
|
|
2787
|
+
type="button"
|
|
2788
|
+
disabled
|
|
2789
|
+
aria-label="Remove all"
|
|
2790
|
+
>
|
|
2791
|
+
<span class="pf-v6-c-button__icon">
|
|
2792
|
+
<i class="fas fa-angle-double-left fa-fw" aria-hidden="true"></i>
|
|
2793
|
+
</span>
|
|
2794
|
+
</button>
|
|
2795
|
+
</div>
|
|
2796
|
+
<div class="pf-v6-c-dual-list-selector__controls-item">
|
|
2797
|
+
<button
|
|
2798
|
+
class="pf-v6-c-button pf-m-plain"
|
|
2799
|
+
type="button"
|
|
2800
|
+
disabled
|
|
2801
|
+
aria-label="Remove selected"
|
|
2802
|
+
>
|
|
2803
|
+
<span class="pf-v6-c-button__icon">
|
|
2804
|
+
<i class="fas fa-angle-left fa-fw" aria-hidden="true"></i>
|
|
2805
|
+
</span>
|
|
2806
|
+
</button>
|
|
2807
|
+
</div>
|
|
2808
|
+
</div>
|
|
2809
|
+
<div class="pf-v6-c-dual-list-selector__pane pf-m-chosen">
|
|
2810
|
+
<div class="pf-v6-c-dual-list-selector__header">
|
|
2811
|
+
<div class="pf-v6-c-dual-list-selector__title">
|
|
2812
|
+
<div class="pf-v6-c-dual-list-selector__title-text">Chosen options</div>
|
|
2813
|
+
</div>
|
|
2814
|
+
</div>
|
|
2815
|
+
<div class="pf-v6-c-dual-list-selector__tools">
|
|
2816
|
+
<div class="pf-v6-c-dual-list-selector__tools-filter">
|
|
2817
|
+
<div class="pf-v6-c-text-input-group">
|
|
2818
|
+
<div class="pf-v6-c-text-input-group__main pf-m-icon">
|
|
2819
|
+
<span class="pf-v6-c-text-input-group__text">
|
|
2820
|
+
<span class="pf-v6-c-text-input-group__icon">
|
|
2821
|
+
<i class="fas fa-fw fa-search"></i>
|
|
2822
|
+
</span>
|
|
2823
|
+
<input
|
|
2824
|
+
class="pf-v6-c-text-input-group__text-input"
|
|
2825
|
+
type="text"
|
|
2826
|
+
value
|
|
2827
|
+
aria-label="Search input"
|
|
2828
|
+
/>
|
|
2829
|
+
</span>
|
|
2830
|
+
</div>
|
|
2831
|
+
</div>
|
|
2832
|
+
</div>
|
|
2833
|
+
<div class="pf-v6-c-dual-list-selector__tools-actions">
|
|
2834
|
+
<button
|
|
2835
|
+
class="pf-v6-c-button pf-m-plain"
|
|
2836
|
+
type="button"
|
|
2837
|
+
aria-label="Sort"
|
|
2838
|
+
>
|
|
2839
|
+
<span class="pf-v6-c-button__icon pf-m-start">
|
|
2840
|
+
<i
|
|
2841
|
+
class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
|
|
2842
|
+
aria-hidden="true"
|
|
2843
|
+
></i>
|
|
2844
|
+
</span>
|
|
2845
|
+
</button>
|
|
2846
|
+
<button
|
|
2847
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
2848
|
+
type="button"
|
|
2849
|
+
aria-expanded="false"
|
|
2850
|
+
aria-label="Menu toggle"
|
|
2851
|
+
id="tree-chosen-menu-toggle"
|
|
2852
|
+
>
|
|
2853
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
2854
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
2855
|
+
</span>
|
|
2856
|
+
</button>
|
|
2857
|
+
</div>
|
|
2858
|
+
</div>
|
|
2859
|
+
<div class="pf-v6-c-dual-list-selector__status">
|
|
2860
|
+
<span
|
|
2861
|
+
class="pf-v6-c-dual-list-selector__status-text"
|
|
2862
|
+
id="tree-chosen-status-text"
|
|
2863
|
+
>0 of 0 items selected</span>
|
|
2864
|
+
</div>
|
|
2865
|
+
<div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
|
|
2866
|
+
<ul
|
|
2867
|
+
class="pf-v6-c-dual-list-selector__list"
|
|
2868
|
+
role="listbox"
|
|
2869
|
+
aria-labelledby="tree-chosen-status-text"
|
|
2870
|
+
aria-multiselectable="true"
|
|
2871
|
+
aria-activedescendant
|
|
2872
|
+
></ul>
|
|
2873
|
+
</div>
|
|
2874
|
+
</div>
|
|
2875
|
+
</div>
|
|
2876
|
+
|
|
2877
|
+
```
|
|
2878
|
+
|
|
2362
2879
|
### Draggable
|
|
2363
2880
|
|
|
2364
2881
|
```html
|
|
@@ -2724,6 +3241,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
2724
3241
|
| `.pf-v6-c-dual-list-selector__item-text` | `<span>` | Initiates a dual list selector pane menu item text. **Required** |
|
|
2725
3242
|
| `.pf-v6-c-dual-list-selector__controls` | `<div>` | Initiates the dual list selector controls. **Required** |
|
|
2726
3243
|
| `.pf-v6-c-dual-list-selector__controls-item` | `<div>` | Initiates the dual list selector controls item. **Required** |
|
|
3244
|
+
| `.pf-m-animate-expand` | `.pf-v6-c-dual-list-selector` | Animates the expansion of dual list selector tree view. |
|
|
2727
3245
|
| `.pf-m-available` | `.pf-v6-c-dual-list-selector__pane` | Defines a pane as the available list. |
|
|
2728
3246
|
| `.pf-m-chosen` | `.pf-v6-c-dual-list-selector__pane` | Defines a pane as the chosen list. |
|
|
2729
3247
|
| `.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. |
|