@patternfly/patternfly 6.3.0-prerelease.19 → 6.3.0-prerelease.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/DualListSelector/dual-list-selector.css +36 -0
- package/components/DualListSelector/dual-list-selector.scss +43 -0
- package/components/ExpandableSection/expandable-section.css +14 -14
- package/components/ExpandableSection/expandable-section.scss +15 -14
- package/components/_index.css +50 -14
- package/docs/components/DualListSelector/examples/DualListSelector.md +518 -0
- package/package.json +1 -1
- package/patternfly-no-globals.css +50 -14
- package/patternfly.css +50 -14
- 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. |
|
package/package.json
CHANGED
|
@@ -12207,6 +12207,17 @@ ul) {
|
|
|
12207
12207
|
--pf-v6-c-dual-list-selector__menu--MinHeight: 12.5rem;
|
|
12208
12208
|
--pf-v6-c-dual-list-selector__menu--MaxHeight: 20rem;
|
|
12209
12209
|
--pf-v6-c-dual-list-selector__menu--MarginBlockStart: var(--pf-t--global--spacer--md);
|
|
12210
|
+
--pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: 0s;
|
|
12211
|
+
--pf-v6-c-dual-list-selector__list--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
|
|
12212
|
+
--pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: 0s;
|
|
12213
|
+
--pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
|
|
12214
|
+
--pf-v6-c-dual-list-selector__list--TransitionDuration--slide: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide);
|
|
12215
|
+
--pf-v6-c-dual-list-selector__list--TransitionDuration--fade: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--fade);
|
|
12216
|
+
--pf-v6-c-dual-list-selector__list--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
12217
|
+
--pf-v6-c-dual-list-selector__list--Opacity: 0;
|
|
12218
|
+
--pf-v6-c-dual-list-selector--m-expanded__list--Opacity: 1;
|
|
12219
|
+
--pf-v6-c-dual-list-selector__list--TranslateY: 0;
|
|
12220
|
+
--pf-v6-c-dual-list-selector--m-expanded__list--TranslateY: 0;
|
|
12210
12221
|
--pf-v6-c-dual-list-selector__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
|
|
12211
12222
|
--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
12212
12223
|
--pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
|
|
@@ -12244,6 +12255,13 @@ ul) {
|
|
|
12244
12255
|
--pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
|
|
12245
12256
|
--pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
|
|
12246
12257
|
}
|
|
12258
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
12259
|
+
.pf-v6-c-dual-list-selector {
|
|
12260
|
+
--pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
12261
|
+
--pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
12262
|
+
--pf-v6-c-dual-list-selector__list--TranslateY: -.5rem;
|
|
12263
|
+
}
|
|
12264
|
+
}
|
|
12247
12265
|
|
|
12248
12266
|
.pf-v6-c-dual-list-selector {
|
|
12249
12267
|
display: grid;
|
|
@@ -12339,9 +12357,27 @@ ul) {
|
|
|
12339
12357
|
.pf-v6-c-dual-list-selector__list-item.pf-m-expandable {
|
|
12340
12358
|
--pf-v6-c-dual-list-selector__item--PaddingInlineStart: var(--pf-v6-c-dual-list-selector__item--m-expandable--PaddingInlineStart);
|
|
12341
12359
|
}
|
|
12360
|
+
.pf-v6-c-dual-list-selector.pf-m-animate-expand .pf-v6-c-dual-list-selector__list-item.pf-m-expandable > .pf-v6-c-dual-list-selector__list {
|
|
12361
|
+
max-height: 0;
|
|
12362
|
+
visibility: hidden;
|
|
12363
|
+
opacity: var(--pf-v6-c-dual-list-selector__list--Opacity);
|
|
12364
|
+
transition-delay: 0s, 0s, var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade);
|
|
12365
|
+
transition-timing-function: var(--pf-v6-c-dual-list-selector__list--TransitionTimingFunction);
|
|
12366
|
+
transition-duration: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--slide), 0s, 0s;
|
|
12367
|
+
transition-property: opacity, translate, visibility, max-height;
|
|
12368
|
+
translate: 0 var(--pf-v6-c-dual-list-selector__list--TranslateY);
|
|
12369
|
+
}
|
|
12342
12370
|
.pf-v6-c-dual-list-selector__list-item.pf-m-expanded {
|
|
12343
12371
|
--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: var(--pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate);
|
|
12344
12372
|
}
|
|
12373
|
+
.pf-v6-c-dual-list-selector.pf-m-animate-expand .pf-v6-c-dual-list-selector__list-item.pf-m-expanded > .pf-v6-c-dual-list-selector__list {
|
|
12374
|
+
max-height: 9999px;
|
|
12375
|
+
visibility: revert;
|
|
12376
|
+
opacity: var(--pf-v6-c-dual-list-selector--m-expanded__list--Opacity);
|
|
12377
|
+
transition-delay: 0s;
|
|
12378
|
+
transition-duration: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--expand--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide), 0s, 0s;
|
|
12379
|
+
translate: 0 var(--pf-v6-c-dual-list-selector--m-expanded__list--TranslateY);
|
|
12380
|
+
}
|
|
12345
12381
|
.pf-v6-c-dual-list-selector__list-item.pf-m-disabled {
|
|
12346
12382
|
--pf-v6-c-dual-list-selector__item-text--Color: var(--pf-v6-c-dual-list-selector__list-item--m-disabled__item-text--Color);
|
|
12347
12383
|
--pf-v6-c-dual-list-selector__item-toggle-icon--Color: var(--pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color);
|
|
@@ -13884,6 +13920,7 @@ ul) {
|
|
|
13884
13920
|
--pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide);
|
|
13885
13921
|
--pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
|
|
13886
13922
|
--pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
13923
|
+
--pf-v6-c-expandable-section__content--TransitionDelay--hide: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
|
|
13887
13924
|
--pf-v6-c-expandable-section__content--Opacity: 0;
|
|
13888
13925
|
--pf-v6-c-expandable-section__content--TranslateY: 0;
|
|
13889
13926
|
--pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
|
|
@@ -13915,7 +13952,10 @@ ul) {
|
|
|
13915
13952
|
.pf-v6-c-expandable-section {
|
|
13916
13953
|
display: flex;
|
|
13917
13954
|
flex-direction: column;
|
|
13918
|
-
gap:
|
|
13955
|
+
gap: 0;
|
|
13956
|
+
transition-delay: var(--pf-v6-c-expandable-section__content--TransitionDelay--hide);
|
|
13957
|
+
transition-duration: 0s;
|
|
13958
|
+
transition-property: gap;
|
|
13919
13959
|
}
|
|
13920
13960
|
.pf-v6-c-expandable-section.pf-m-expanded {
|
|
13921
13961
|
--pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
|
|
@@ -13926,6 +13966,10 @@ ul) {
|
|
|
13926
13966
|
--pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
|
|
13927
13967
|
--pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
|
|
13928
13968
|
--pf-v6-c-expandable-section--m-display-lg--TransitionDelay: 0s;
|
|
13969
|
+
--pf-v6-c-expandable-section__content--Visibility: auto;
|
|
13970
|
+
--pf-v6-c-expandable-section__content--MaxHeight: 9999px;
|
|
13971
|
+
--pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
|
|
13972
|
+
gap: var(--pf-v6-c-expandable-section--Gap);
|
|
13929
13973
|
}
|
|
13930
13974
|
.pf-v6-c-expandable-section.pf-m-limit-width {
|
|
13931
13975
|
--pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
|
|
@@ -13977,23 +14021,15 @@ ul) {
|
|
|
13977
14021
|
display: revert;
|
|
13978
14022
|
}
|
|
13979
14023
|
.pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) .pf-v6-c-expandable-section__content {
|
|
13980
|
-
|
|
14024
|
+
max-height: var(--pf-v6-c-expandable-section__content--MaxHeight, 0);
|
|
14025
|
+
visibility: var(--pf-v6-c-expandable-section__content--Visibility, hidden);
|
|
13981
14026
|
opacity: var(--pf-v6-c-expandable-section__content--Opacity);
|
|
14027
|
+
transition-delay: 0s, 0s, var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s), var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s);
|
|
13982
14028
|
transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
|
|
13983
|
-
transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide),
|
|
13984
|
-
transition-property: opacity, translate,
|
|
13985
|
-
transition-behavior: allow-discrete;
|
|
14029
|
+
transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide), 0s, 0s;
|
|
14030
|
+
transition-property: opacity, translate, visibility, max-height;
|
|
13986
14031
|
translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
|
|
13987
14032
|
}
|
|
13988
|
-
.pf-v6-c-expandable-section.pf-m-expanded .pf-v6-c-expandable-section__content {
|
|
13989
|
-
display: revert;
|
|
13990
|
-
}
|
|
13991
|
-
@starting-style {
|
|
13992
|
-
.pf-v6-c-expandable-section.pf-m-expanded .pf-v6-c-expandable-section__content {
|
|
13993
|
-
--pf-v6-c-expandable-section__content--Opacity: 0;
|
|
13994
|
-
--pf-v6-c-expandable-section__content--TranslateY: -.5rem;
|
|
13995
|
-
}
|
|
13996
|
-
}
|
|
13997
14033
|
|
|
13998
14034
|
.pf-v6-c-file-upload {
|
|
13999
14035
|
--pf-v6-c-file-upload--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
|