@patternfly/patternfly 4.216.2 → 4.216.4

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.
@@ -532,8 +532,8 @@ cssPrefix: pf-c-text-input-group
532
532
  class="pf-c-text-input-group__text-input"
533
533
  type="text"
534
534
  value
535
- aria-label="Type to filter"
536
535
  placeholder="Find by name"
536
+ aria-label="Type to filter"
537
537
  />
538
538
  </span>
539
539
  </div>
@@ -554,6 +554,7 @@ cssPrefix: pf-c-text-input-group
554
554
  class="pf-c-text-input-group__text-input"
555
555
  type="text"
556
556
  value="Joh"
557
+ placeholder="Find by name"
557
558
  aria-label="Type to filter"
558
559
  />
559
560
  </span>
@@ -584,6 +585,7 @@ cssPrefix: pf-c-text-input-group
584
585
  class="pf-c-text-input-group__text-input"
585
586
  type="text"
586
587
  value="John Doe"
588
+ placeholder="Find by name"
587
589
  aria-label="Type to filter"
588
590
  />
589
591
  </span>
@@ -615,25 +617,13 @@ cssPrefix: pf-c-text-input-group
615
617
  class="pf-c-text-input-group__text-input"
616
618
  type="text"
617
619
  value="John Doe"
620
+ placeholder="Find by name"
618
621
  aria-label="Type to filter"
619
622
  />
620
623
  </span>
621
624
  </div>
622
625
  <div class="pf-c-text-input-group__utilities">
623
626
  <span class="pf-c-badge pf-m-read">1 / 3</span>
624
- <div class="pf-c-text-input-group__group">
625
- <button
626
- class="pf-c-button pf-m-plain"
627
- type="button"
628
- disabled
629
- aria-label="Next"
630
- >
631
- <i class="fas fa-angle-up fa-fw" aria-hidden="true"></i>
632
- </button>
633
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Next">
634
- <i class="fas fa-angle-down fa-fw" aria-hidden="true"></i>
635
- </button>
636
- </div>
637
627
  <button
638
628
  class="pf-c-button pf-m-plain"
639
629
  type="button"
@@ -671,8 +661,8 @@ cssPrefix: pf-c-text-input-group
671
661
  class="pf-c-text-input-group__text-input"
672
662
  type="text"
673
663
  value
674
- aria-label="Type to filter"
675
664
  placeholder="Search"
665
+ aria-label="Type to filter"
676
666
  />
677
667
  </span>
678
668
  </div>
@@ -959,12 +949,6 @@ cssPrefix: pf-c-text-input-group
959
949
  disabled
960
950
  aria-hidden="true"
961
951
  />
962
- <input
963
- class="pf-c-text-input-group__text-input"
964
- type="text"
965
- value="apples"
966
- aria-label="Type to filter"
967
- />
968
952
  </span>
969
953
  </div>
970
954
  <div class="pf-c-text-input-group__utilities">
@@ -520,17 +520,18 @@ In some instances, it may be necessary to adjust spacing explicitly where items
520
520
  </li>
521
521
  </ul>
522
522
  </div>
523
- <div class="pf-c-search-input">
524
- <div class="pf-c-search-input__bar">
525
- <span class="pf-c-search-input__text">
526
- <span class="pf-c-search-input__icon">
527
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
523
+ <div class="pf-c-text-input-group">
524
+ <div class="pf-c-text-input-group__main pf-m-icon">
525
+ <span class="pf-c-text-input-group__text">
526
+ <span class="pf-c-text-input-group__icon">
527
+ <i class="fas fa-fw fa-search"></i>
528
528
  </span>
529
529
  <input
530
- class="pf-c-search-input__text-input"
530
+ class="pf-c-text-input-group__text-input"
531
531
  type="text"
532
+ value
532
533
  placeholder="Filter by name"
533
- aria-label="Filter by name"
534
+ aria-label="Type to filter"
534
535
  />
535
536
  </span>
536
537
  </div>
@@ -840,17 +841,18 @@ In some instances, it may be necessary to adjust spacing explicitly where items
840
841
  </li>
841
842
  </ul>
842
843
  </div>
843
- <div class="pf-c-search-input">
844
- <div class="pf-c-search-input__bar">
845
- <span class="pf-c-search-input__text">
846
- <span class="pf-c-search-input__icon">
847
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
844
+ <div class="pf-c-text-input-group">
845
+ <div class="pf-c-text-input-group__main pf-m-icon">
846
+ <span class="pf-c-text-input-group__text">
847
+ <span class="pf-c-text-input-group__icon">
848
+ <i class="fas fa-fw fa-search"></i>
848
849
  </span>
849
850
  <input
850
- class="pf-c-search-input__text-input"
851
+ class="pf-c-text-input-group__text-input"
851
852
  type="text"
853
+ value
852
854
  placeholder="Filter by name"
853
- aria-label="Filter by name"
855
+ aria-label="Type to filter"
854
856
  />
855
857
  </span>
856
858
  </div>
@@ -1221,17 +1223,18 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1221
1223
  </li>
1222
1224
  </ul>
1223
1225
  </div>
1224
- <div class="pf-c-search-input">
1225
- <div class="pf-c-search-input__bar">
1226
- <span class="pf-c-search-input__text">
1227
- <span class="pf-c-search-input__icon">
1228
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1226
+ <div class="pf-c-text-input-group">
1227
+ <div class="pf-c-text-input-group__main pf-m-icon">
1228
+ <span class="pf-c-text-input-group__text">
1229
+ <span class="pf-c-text-input-group__icon">
1230
+ <i class="fas fa-fw fa-search"></i>
1229
1231
  </span>
1230
1232
  <input
1231
- class="pf-c-search-input__text-input"
1233
+ class="pf-c-text-input-group__text-input"
1232
1234
  type="text"
1235
+ value
1233
1236
  placeholder="Filter by name"
1234
- aria-label="Filter by name"
1237
+ aria-label="Type to filter"
1235
1238
  />
1236
1239
  </span>
1237
1240
  </div>
@@ -1802,17 +1805,18 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1802
1805
  </li>
1803
1806
  </ul>
1804
1807
  </div>
1805
- <div class="pf-c-search-input">
1806
- <div class="pf-c-search-input__bar">
1807
- <span class="pf-c-search-input__text">
1808
- <span class="pf-c-search-input__icon">
1809
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1808
+ <div class="pf-c-text-input-group">
1809
+ <div class="pf-c-text-input-group__main pf-m-icon">
1810
+ <span class="pf-c-text-input-group__text">
1811
+ <span class="pf-c-text-input-group__icon">
1812
+ <i class="fas fa-fw fa-search"></i>
1810
1813
  </span>
1811
1814
  <input
1812
- class="pf-c-search-input__text-input"
1815
+ class="pf-c-text-input-group__text-input"
1813
1816
  type="text"
1817
+ value
1814
1818
  placeholder="Filter by name"
1815
- aria-label="Filter by name"
1819
+ aria-label="Type to filter"
1816
1820
  />
1817
1821
  </span>
1818
1822
  </div>
@@ -3869,17 +3873,18 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3869
3873
  </li>
3870
3874
  </ul>
3871
3875
  </div>
3872
- <div class="pf-c-search-input">
3873
- <div class="pf-c-search-input__bar">
3874
- <span class="pf-c-search-input__text">
3875
- <span class="pf-c-search-input__icon">
3876
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
3876
+ <div class="pf-c-text-input-group">
3877
+ <div class="pf-c-text-input-group__main pf-m-icon">
3878
+ <span class="pf-c-text-input-group__text">
3879
+ <span class="pf-c-text-input-group__icon">
3880
+ <i class="fas fa-fw fa-search"></i>
3877
3881
  </span>
3878
3882
  <input
3879
- class="pf-c-search-input__text-input"
3883
+ class="pf-c-text-input-group__text-input"
3880
3884
  type="text"
3885
+ value
3881
3886
  placeholder="Filter by name"
3882
- aria-label="Filter by name"
3887
+ aria-label="Type to filter"
3883
3888
  />
3884
3889
  </span>
3885
3890
  </div>
@@ -2227,10 +2227,10 @@ beta: true
2227
2227
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2228
2228
  </span>
2229
2229
  </button>
2230
- <span
2230
+ <button
2231
2231
  class="pf-c-tree-view__node-text"
2232
2232
  id="text-tree-view-selectable-expandable-1"
2233
- >Application launcher</span>
2233
+ >Application launcher</button>
2234
2234
  </span>
2235
2235
  </div>
2236
2236
  </div>
@@ -2260,10 +2260,10 @@ beta: true
2260
2260
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2261
2261
  </span>
2262
2262
  </button>
2263
- <span
2263
+ <button
2264
2264
  class="pf-c-tree-view__node-text"
2265
2265
  id="text-tree-view-selectable-expandable-2"
2266
- >Application 1</span>
2266
+ >Application 1</button>
2267
2267
  </span>
2268
2268
  </div>
2269
2269
  </div>
@@ -2311,10 +2311,10 @@ beta: true
2311
2311
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2312
2312
  </span>
2313
2313
  </button>
2314
- <span
2314
+ <button
2315
2315
  class="pf-c-tree-view__node-text"
2316
2316
  id="text-tree-view-selectable-expandable-3"
2317
- >Loader</span>
2317
+ >Loader</button>
2318
2318
  </span>
2319
2319
  </div>
2320
2320
  </div>
@@ -2346,10 +2346,10 @@ beta: true
2346
2346
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2347
2347
  </span>
2348
2348
  </button>
2349
- <span
2349
+ <button
2350
2350
  class="pf-c-tree-view__node-text"
2351
2351
  id="text-tree-view-selectable-expandable-4"
2352
- >Application 2</span>
2352
+ >Application 2</button>
2353
2353
  </span>
2354
2354
  </div>
2355
2355
  </div>
@@ -2388,10 +2388,10 @@ beta: true
2388
2388
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2389
2389
  </span>
2390
2390
  </button>
2391
- <span
2391
+ <button
2392
2392
  class="pf-c-tree-view__node-text"
2393
2393
  id="text-tree-view-selectable-expandable-5"
2394
- >Settings</span>
2394
+ >Settings</button>
2395
2395
  </span>
2396
2396
  </div>
2397
2397
  </div>
@@ -2421,10 +2421,10 @@ beta: true
2421
2421
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2422
2422
  </span>
2423
2423
  </button>
2424
- <span
2424
+ <button
2425
2425
  class="pf-c-tree-view__node-text"
2426
2426
  id="text-tree-view-selectable-expandable-6"
2427
- >Loader</span>
2427
+ >Loader</button>
2428
2428
  </span>
2429
2429
  </div>
2430
2430
  </div>
@@ -2454,10 +2454,10 @@ beta: true
2454
2454
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2455
2455
  </span>
2456
2456
  </button>
2457
- <span
2457
+ <button
2458
2458
  class="pf-c-tree-view__node-text"
2459
2459
  id="text-tree-view-selectable-expandable-7"
2460
- >Loader app 1</span>
2460
+ >Loader app 1</button>
2461
2461
  </span>
2462
2462
  </div>
2463
2463
  </div>
@@ -2519,10 +2519,10 @@ beta: true
2519
2519
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2520
2520
  </span>
2521
2521
  </button>
2522
- <span
2522
+ <button
2523
2523
  class="pf-c-tree-view__node-text"
2524
2524
  id="text-tree-view-selectable-expandable-8"
2525
- >Cost management</span>
2525
+ >Cost management</button>
2526
2526
  </span>
2527
2527
  </div>
2528
2528
  </div>
@@ -2552,10 +2552,10 @@ beta: true
2552
2552
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2553
2553
  </span>
2554
2554
  </button>
2555
- <span
2555
+ <button
2556
2556
  class="pf-c-tree-view__node-text"
2557
2557
  id="text-tree-view-selectable-expandable-9"
2558
- >Sources</span>
2558
+ >Sources</button>
2559
2559
  </span>
2560
2560
  </div>
2561
2561
  </div>
@@ -2585,10 +2585,10 @@ beta: true
2585
2585
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2586
2586
  </span>
2587
2587
  </button>
2588
- <span
2588
+ <button
2589
2589
  class="pf-c-tree-view__node-text"
2590
2590
  id="text-tree-view-selectable-expandable-10"
2591
- >This is a really really really long folder name that overflows from the width of the container.</span>
2591
+ >This is a really really really long folder name that overflows from the width of the container.</button>
2592
2592
  </span>
2593
2593
  </div>
2594
2594
  </div>
@@ -3383,7 +3383,7 @@ beta: true
3383
3383
  | `.pf-c-tree-view__node-toggle` | `<span>`, `<button>` | Initiates a tree view toggle. |
3384
3384
  | `.pf-c-tree-view__node-toggle-icon` | `<span>` | Initiates a tree view toggle icon. |
3385
3385
  | `.pf-c-tree-view__node-title` | `<span>` | Initiates a tree view node title. |
3386
- | `.pf-c-tree-view__node-text` | `<span>` | Initiates tree view text. |
3386
+ | `.pf-c-tree-view__node-text` | `<span>`, `<button>` | Initiates tree view text. **Note:** Use a `<button>` when the node is expandable and selectable. |
3387
3387
  | `.pf-c-tree-view__node-icon` | `<span>` | Initiates a tree view icon. |
3388
3388
  | `.pf-c-tree-view__node-check` | `<span>` | Initiates a tree view check. |
3389
3389
  | `.pf-c-tree-view__action` | `<div>` | Initiates a tree view action wrapper. |
@@ -4029,17 +4029,18 @@ wrapperTag: div
4029
4029
  </li>
4030
4030
  </ul>
4031
4031
  </div>
4032
- <div class="pf-c-search-input">
4033
- <div class="pf-c-search-input__bar">
4034
- <span class="pf-c-search-input__text">
4035
- <span class="pf-c-search-input__icon">
4036
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
4032
+ <div class="pf-c-text-input-group">
4033
+ <div class="pf-c-text-input-group__main pf-m-icon">
4034
+ <span class="pf-c-text-input-group__text">
4035
+ <span class="pf-c-text-input-group__icon">
4036
+ <i class="fas fa-fw fa-search"></i>
4037
4037
  </span>
4038
4038
  <input
4039
- class="pf-c-search-input__text-input"
4039
+ class="pf-c-text-input-group__text-input"
4040
4040
  type="text"
4041
+ value
4041
4042
  placeholder="Filter by name"
4042
- aria-label="Filter by name"
4043
+ aria-label="Type to filter"
4043
4044
  />
4044
4045
  </span>
4045
4046
  </div>
@@ -6070,17 +6071,18 @@ wrapperTag: div
6070
6071
  </li>
6071
6072
  </ul>
6072
6073
  </div>
6073
- <div class="pf-c-search-input">
6074
- <div class="pf-c-search-input__bar">
6075
- <span class="pf-c-search-input__text">
6076
- <span class="pf-c-search-input__icon">
6077
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
6074
+ <div class="pf-c-text-input-group">
6075
+ <div class="pf-c-text-input-group__main pf-m-icon">
6076
+ <span class="pf-c-text-input-group__text">
6077
+ <span class="pf-c-text-input-group__icon">
6078
+ <i class="fas fa-fw fa-search"></i>
6078
6079
  </span>
6079
6080
  <input
6080
- class="pf-c-search-input__text-input"
6081
+ class="pf-c-text-input-group__text-input"
6081
6082
  type="text"
6083
+ value
6082
6084
  placeholder="Filter by name"
6083
- aria-label="Filter by name"
6085
+ aria-label="Type to filter"
6084
6086
  />
6085
6087
  </span>
6086
6088
  </div>
@@ -761,17 +761,18 @@ wrapperTag: div
761
761
  </li>
762
762
  </ul>
763
763
  </div>
764
- <div class="pf-c-search-input">
765
- <div class="pf-c-search-input__bar">
766
- <span class="pf-c-search-input__text">
767
- <span class="pf-c-search-input__icon">
768
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
764
+ <div class="pf-c-text-input-group">
765
+ <div class="pf-c-text-input-group__main pf-m-icon">
766
+ <span class="pf-c-text-input-group__text">
767
+ <span class="pf-c-text-input-group__icon">
768
+ <i class="fas fa-fw fa-search"></i>
769
769
  </span>
770
770
  <input
771
- class="pf-c-search-input__text-input"
771
+ class="pf-c-text-input-group__text-input"
772
772
  type="text"
773
+ value
773
774
  placeholder="Filter by name"
774
- aria-label="Filter by name"
775
+ aria-label="Type to filter"
775
776
  />
776
777
  </span>
777
778
  </div>
@@ -1093,17 +1094,18 @@ wrapperTag: div
1093
1094
  </li>
1094
1095
  </ul>
1095
1096
  </div>
1096
- <div class="pf-c-search-input">
1097
- <div class="pf-c-search-input__bar">
1098
- <span class="pf-c-search-input__text">
1099
- <span class="pf-c-search-input__icon">
1100
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1097
+ <div class="pf-c-text-input-group">
1098
+ <div class="pf-c-text-input-group__main pf-m-icon">
1099
+ <span class="pf-c-text-input-group__text">
1100
+ <span class="pf-c-text-input-group__icon">
1101
+ <i class="fas fa-fw fa-search"></i>
1101
1102
  </span>
1102
1103
  <input
1103
- class="pf-c-search-input__text-input"
1104
+ class="pf-c-text-input-group__text-input"
1104
1105
  type="text"
1106
+ value
1105
1107
  placeholder="Filter by name"
1106
- aria-label="Filter by name"
1108
+ aria-label="Type to filter"
1107
1109
  />
1108
1110
  </span>
1109
1111
  </div>
@@ -3696,17 +3698,18 @@ wrapperTag: div
3696
3698
  </li>
3697
3699
  </ul>
3698
3700
  </div>
3699
- <div class="pf-c-search-input">
3700
- <div class="pf-c-search-input__bar">
3701
- <span class="pf-c-search-input__text">
3702
- <span class="pf-c-search-input__icon">
3703
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
3701
+ <div class="pf-c-text-input-group">
3702
+ <div class="pf-c-text-input-group__main pf-m-icon">
3703
+ <span class="pf-c-text-input-group__text">
3704
+ <span class="pf-c-text-input-group__icon">
3705
+ <i class="fas fa-fw fa-search"></i>
3704
3706
  </span>
3705
3707
  <input
3706
- class="pf-c-search-input__text-input"
3708
+ class="pf-c-text-input-group__text-input"
3707
3709
  type="text"
3710
+ value
3708
3711
  placeholder="Filter by name"
3709
- aria-label="Filter by name"
3712
+ aria-label="Type to filter"
3710
3713
  />
3711
3714
  </span>
3712
3715
  </div>
@@ -982,20 +982,18 @@ wrapperTag: div
982
982
  </li>
983
983
  </ul>
984
984
  </div>
985
- <div class="pf-c-search-input">
986
- <div class="pf-c-search-input__bar">
987
- <span class="pf-c-search-input__text">
988
- <span class="pf-c-search-input__icon">
989
- <i
990
- class="fas fa-search fa-fw"
991
- aria-hidden="true"
992
- ></i>
985
+ <div class="pf-c-text-input-group">
986
+ <div class="pf-c-text-input-group__main pf-m-icon">
987
+ <span class="pf-c-text-input-group__text">
988
+ <span class="pf-c-text-input-group__icon">
989
+ <i class="fas fa-fw fa-search"></i>
993
990
  </span>
994
991
  <input
995
- class="pf-c-search-input__text-input"
992
+ class="pf-c-text-input-group__text-input"
996
993
  type="text"
994
+ value
997
995
  placeholder="Filter by name"
998
- aria-label="Filter by name"
996
+ aria-label="Type to filter"
999
997
  />
1000
998
  </span>
1001
999
  </div>
@@ -2859,20 +2857,18 @@ wrapperTag: div
2859
2857
  </li>
2860
2858
  </ul>
2861
2859
  </div>
2862
- <div class="pf-c-search-input">
2863
- <div class="pf-c-search-input__bar">
2864
- <span class="pf-c-search-input__text">
2865
- <span class="pf-c-search-input__icon">
2866
- <i
2867
- class="fas fa-search fa-fw"
2868
- aria-hidden="true"
2869
- ></i>
2860
+ <div class="pf-c-text-input-group">
2861
+ <div class="pf-c-text-input-group__main pf-m-icon">
2862
+ <span class="pf-c-text-input-group__text">
2863
+ <span class="pf-c-text-input-group__icon">
2864
+ <i class="fas fa-fw fa-search"></i>
2870
2865
  </span>
2871
2866
  <input
2872
- class="pf-c-search-input__text-input"
2867
+ class="pf-c-text-input-group__text-input"
2873
2868
  type="text"
2869
+ value
2874
2870
  placeholder="Filter by name"
2875
- aria-label="Filter by name"
2871
+ aria-label="Type to filter"
2876
2872
  />
2877
2873
  </span>
2878
2874
  </div>
@@ -6413,17 +6409,18 @@ wrapperTag: div
6413
6409
  </li>
6414
6410
  </ul>
6415
6411
  </div>
6416
- <div class="pf-c-search-input">
6417
- <div class="pf-c-search-input__bar">
6418
- <span class="pf-c-search-input__text">
6419
- <span class="pf-c-search-input__icon">
6420
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
6412
+ <div class="pf-c-text-input-group">
6413
+ <div class="pf-c-text-input-group__main pf-m-icon">
6414
+ <span class="pf-c-text-input-group__text">
6415
+ <span class="pf-c-text-input-group__icon">
6416
+ <i class="fas fa-fw fa-search"></i>
6421
6417
  </span>
6422
6418
  <input
6423
- class="pf-c-search-input__text-input"
6419
+ class="pf-c-text-input-group__text-input"
6424
6420
  type="text"
6421
+ value
6425
6422
  placeholder="Filter by name"
6426
- aria-label="Filter by name"
6423
+ aria-label="Type to filter"
6427
6424
  />
6428
6425
  </span>
6429
6426
  </div>