@patternfly/patternfly 4.216.3 → 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.
Files changed (15) hide show
  1. package/components/TextInputGroup/text-input-group.css +11 -12
  2. package/components/TextInputGroup/text-input-group.scss +13 -18
  3. package/docs/components/LogViewer/examples/LogViewer.md +268 -268
  4. package/docs/components/TextInputGroup/examples/TextInputGroup.md +5 -21
  5. package/docs/components/Toolbar/examples/Toolbar.md +40 -35
  6. package/docs/demos/DataList/examples/DataList.md +16 -14
  7. package/docs/demos/Masthead/examples/Masthead.md +24 -21
  8. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +24 -27
  9. package/docs/demos/Table/examples/Table.md +88 -77
  10. package/docs/demos/Toolbar/examples/Toolbar.md +229 -231
  11. package/package.json +2 -2
  12. package/patternfly-no-reset.css +11 -12
  13. package/patternfly.css +11 -12
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
package/docs/components/LogViewer/examples/LogViewer.md CHANGED
@@ -90,17 +90,18 @@ cssPrefix: pf-c-log-viewer
90
90
  class="pf-c-toolbar__item pf-m-search-filter"
91
91
  style="--pf-c-toolbar__item--Width: 268px"
92
92
  >
93
- <div class="pf-c-search-input">
94
- <div class="pf-c-search-input__bar">
95
- <span class="pf-c-search-input__text">
96
- <span class="pf-c-search-input__icon">
97
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
93
+ <div class="pf-c-text-input-group">
94
+ <div class="pf-c-text-input-group__main pf-m-icon">
95
+ <span class="pf-c-text-input-group__text">
96
+ <span class="pf-c-text-input-group__icon">
97
+ <i class="fas fa-fw fa-search"></i>
98
98
  </span>
99
99
  <input
100
- class="pf-c-search-input__text-input"
100
+ class="pf-c-text-input-group__text-input"
101
101
  type="text"
102
+ value
102
103
  placeholder="Find"
103
- aria-label="Find"
104
+ aria-label="Type to filter"
104
105
  />
105
106
  </span>
106
107
  </div>
@@ -437,17 +438,18 @@ cssPrefix: pf-c-log-viewer
437
438
  class="pf-c-toolbar__item pf-m-search-filter"
438
439
  style="--pf-c-toolbar__item--Width: 24ch"
439
440
  >
440
- <div class="pf-c-search-input">
441
- <div class="pf-c-search-input__bar">
442
- <span class="pf-c-search-input__text">
443
- <span class="pf-c-search-input__icon">
444
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
441
+ <div class="pf-c-text-input-group">
442
+ <div class="pf-c-text-input-group__main pf-m-icon">
443
+ <span class="pf-c-text-input-group__text">
444
+ <span class="pf-c-text-input-group__icon">
445
+ <i class="fas fa-fw fa-search"></i>
445
446
  </span>
446
447
  <input
447
- class="pf-c-search-input__text-input"
448
+ class="pf-c-text-input-group__text-input"
448
449
  type="text"
450
+ value
449
451
  placeholder="Find"
450
- aria-label="Find"
452
+ aria-label="Type to filter"
451
453
  />
452
454
  </span>
453
455
  </div>
@@ -640,17 +642,18 @@ cssPrefix: pf-c-log-viewer
640
642
  class="pf-c-toolbar__item pf-m-search-filter"
641
643
  style="--pf-c-toolbar__item--Width: 268px"
642
644
  >
643
- <div class="pf-c-search-input">
644
- <div class="pf-c-search-input__bar">
645
- <span class="pf-c-search-input__text">
646
- <span class="pf-c-search-input__icon">
647
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
645
+ <div class="pf-c-text-input-group">
646
+ <div class="pf-c-text-input-group__main pf-m-icon">
647
+ <span class="pf-c-text-input-group__text">
648
+ <span class="pf-c-text-input-group__icon">
649
+ <i class="fas fa-fw fa-search"></i>
648
650
  </span>
649
651
  <input
650
- class="pf-c-search-input__text-input"
652
+ class="pf-c-text-input-group__text-input"
651
653
  type="text"
654
+ value
652
655
  placeholder="Find"
653
- aria-label="Find"
656
+ aria-label="Type to filter"
654
657
  />
655
658
  </span>
656
659
  </div>
@@ -987,17 +990,18 @@ cssPrefix: pf-c-log-viewer
987
990
  class="pf-c-toolbar__item pf-m-search-filter"
988
991
  style="--pf-c-toolbar__item--Width: 24ch"
989
992
  >
990
- <div class="pf-c-search-input">
991
- <div class="pf-c-search-input__bar">
992
- <span class="pf-c-search-input__text">
993
- <span class="pf-c-search-input__icon">
994
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
993
+ <div class="pf-c-text-input-group">
994
+ <div class="pf-c-text-input-group__main pf-m-icon">
995
+ <span class="pf-c-text-input-group__text">
996
+ <span class="pf-c-text-input-group__icon">
997
+ <i class="fas fa-fw fa-search"></i>
995
998
  </span>
996
999
  <input
997
- class="pf-c-search-input__text-input"
1000
+ class="pf-c-text-input-group__text-input"
998
1001
  type="text"
1002
+ value
999
1003
  placeholder="Find"
1000
- aria-label="Find"
1004
+ aria-label="Type to filter"
1001
1005
  />
1002
1006
  </span>
1003
1007
  </div>
@@ -1190,17 +1194,18 @@ cssPrefix: pf-c-log-viewer
1190
1194
  class="pf-c-toolbar__item pf-m-search-filter"
1191
1195
  style="--pf-c-toolbar__item--Width: 268px"
1192
1196
  >
1193
- <div class="pf-c-search-input">
1194
- <div class="pf-c-search-input__bar">
1195
- <span class="pf-c-search-input__text">
1196
- <span class="pf-c-search-input__icon">
1197
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1197
+ <div class="pf-c-text-input-group">
1198
+ <div class="pf-c-text-input-group__main pf-m-icon">
1199
+ <span class="pf-c-text-input-group__text">
1200
+ <span class="pf-c-text-input-group__icon">
1201
+ <i class="fas fa-fw fa-search"></i>
1198
1202
  </span>
1199
1203
  <input
1200
- class="pf-c-search-input__text-input"
1204
+ class="pf-c-text-input-group__text-input"
1201
1205
  type="text"
1206
+ value
1202
1207
  placeholder="Find"
1203
- aria-label="Find"
1208
+ aria-label="Type to filter"
1204
1209
  />
1205
1210
  </span>
1206
1211
  </div>
@@ -1537,17 +1542,18 @@ cssPrefix: pf-c-log-viewer
1537
1542
  class="pf-c-toolbar__item pf-m-search-filter"
1538
1543
  style="--pf-c-toolbar__item--Width: 24ch"
1539
1544
  >
1540
- <div class="pf-c-search-input">
1541
- <div class="pf-c-search-input__bar">
1542
- <span class="pf-c-search-input__text">
1543
- <span class="pf-c-search-input__icon">
1544
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1545
+ <div class="pf-c-text-input-group">
1546
+ <div class="pf-c-text-input-group__main pf-m-icon">
1547
+ <span class="pf-c-text-input-group__text">
1548
+ <span class="pf-c-text-input-group__icon">
1549
+ <i class="fas fa-fw fa-search"></i>
1545
1550
  </span>
1546
1551
  <input
1547
- class="pf-c-search-input__text-input"
1552
+ class="pf-c-text-input-group__text-input"
1548
1553
  type="text"
1554
+ value
1549
1555
  placeholder="Find"
1550
- aria-label="Find"
1556
+ aria-label="Type to filter"
1551
1557
  />
1552
1558
  </span>
1553
1559
  </div>
@@ -1740,17 +1746,18 @@ cssPrefix: pf-c-log-viewer
1740
1746
  class="pf-c-toolbar__item pf-m-search-filter"
1741
1747
  style="--pf-c-toolbar__item--Width: 268px"
1742
1748
  >
1743
- <div class="pf-c-search-input">
1744
- <div class="pf-c-search-input__bar">
1745
- <span class="pf-c-search-input__text">
1746
- <span class="pf-c-search-input__icon">
1747
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1749
+ <div class="pf-c-text-input-group">
1750
+ <div class="pf-c-text-input-group__main pf-m-icon">
1751
+ <span class="pf-c-text-input-group__text">
1752
+ <span class="pf-c-text-input-group__icon">
1753
+ <i class="fas fa-fw fa-search"></i>
1748
1754
  </span>
1749
1755
  <input
1750
- class="pf-c-search-input__text-input"
1756
+ class="pf-c-text-input-group__text-input"
1751
1757
  type="text"
1758
+ value
1752
1759
  placeholder="Find"
1753
- aria-label="Find"
1760
+ aria-label="Type to filter"
1754
1761
  />
1755
1762
  </span>
1756
1763
  </div>
@@ -2087,17 +2094,18 @@ cssPrefix: pf-c-log-viewer
2087
2094
  class="pf-c-toolbar__item pf-m-search-filter"
2088
2095
  style="--pf-c-toolbar__item--Width: 24ch"
2089
2096
  >
2090
- <div class="pf-c-search-input">
2091
- <div class="pf-c-search-input__bar">
2092
- <span class="pf-c-search-input__text">
2093
- <span class="pf-c-search-input__icon">
2094
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
2097
+ <div class="pf-c-text-input-group">
2098
+ <div class="pf-c-text-input-group__main pf-m-icon">
2099
+ <span class="pf-c-text-input-group__text">
2100
+ <span class="pf-c-text-input-group__icon">
2101
+ <i class="fas fa-fw fa-search"></i>
2095
2102
  </span>
2096
2103
  <input
2097
- class="pf-c-search-input__text-input"
2104
+ class="pf-c-text-input-group__text-input"
2098
2105
  type="text"
2106
+ value
2099
2107
  placeholder="Find"
2100
- aria-label="Find"
2108
+ aria-label="Type to filter"
2101
2109
  />
2102
2110
  </span>
2103
2111
  </div>
@@ -2290,17 +2298,18 @@ cssPrefix: pf-c-log-viewer
2290
2298
  class="pf-c-toolbar__item pf-m-search-filter"
2291
2299
  style="--pf-c-toolbar__item--Width: 268px"
2292
2300
  >
2293
- <div class="pf-c-search-input">
2294
- <div class="pf-c-search-input__bar">
2295
- <span class="pf-c-search-input__text">
2296
- <span class="pf-c-search-input__icon">
2297
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
2301
+ <div class="pf-c-text-input-group">
2302
+ <div class="pf-c-text-input-group__main pf-m-icon">
2303
+ <span class="pf-c-text-input-group__text">
2304
+ <span class="pf-c-text-input-group__icon">
2305
+ <i class="fas fa-fw fa-search"></i>
2298
2306
  </span>
2299
2307
  <input
2300
- class="pf-c-search-input__text-input"
2308
+ class="pf-c-text-input-group__text-input"
2301
2309
  type="text"
2310
+ value
2302
2311
  placeholder="Find"
2303
- aria-label="Find"
2312
+ aria-label="Type to filter"
2304
2313
  />
2305
2314
  </span>
2306
2315
  </div>
@@ -2637,17 +2646,18 @@ cssPrefix: pf-c-log-viewer
2637
2646
  class="pf-c-toolbar__item pf-m-search-filter"
2638
2647
  style="--pf-c-toolbar__item--Width: 24ch"
2639
2648
  >
2640
- <div class="pf-c-search-input">
2641
- <div class="pf-c-search-input__bar">
2642
- <span class="pf-c-search-input__text">
2643
- <span class="pf-c-search-input__icon">
2644
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
2649
+ <div class="pf-c-text-input-group">
2650
+ <div class="pf-c-text-input-group__main pf-m-icon">
2651
+ <span class="pf-c-text-input-group__text">
2652
+ <span class="pf-c-text-input-group__icon">
2653
+ <i class="fas fa-fw fa-search"></i>
2645
2654
  </span>
2646
2655
  <input
2647
- class="pf-c-search-input__text-input"
2656
+ class="pf-c-text-input-group__text-input"
2648
2657
  type="text"
2658
+ value
2649
2659
  placeholder="Find"
2650
- aria-label="Find"
2660
+ aria-label="Type to filter"
2651
2661
  />
2652
2662
  </span>
2653
2663
  </div>
@@ -2840,51 +2850,47 @@ cssPrefix: pf-c-log-viewer
2840
2850
  class="pf-c-toolbar__item pf-m-search-filter"
2841
2851
  style="--pf-c-toolbar__item--Width: 268px"
2842
2852
  >
2843
- <div class="pf-c-search-input">
2844
- <div class="pf-c-search-input__bar">
2845
- <span class="pf-c-search-input__text">
2846
- <span class="pf-c-search-input__icon">
2847
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
2853
+ <div class="pf-c-text-input-group">
2854
+ <div class="pf-c-text-input-group__main pf-m-icon">
2855
+ <span class="pf-c-text-input-group__text">
2856
+ <span class="pf-c-text-input-group__icon">
2857
+ <i class="fas fa-fw fa-search"></i>
2848
2858
  </span>
2849
2859
  <input
2850
- class="pf-c-search-input__text-input"
2860
+ class="pf-c-text-input-group__text-input"
2851
2861
  type="text"
2852
- placeholder="Find"
2853
- aria-label="Find"
2854
2862
  value="openshift"
2863
+ placeholder="Find"
2864
+ aria-label="Type to filter"
2855
2865
  />
2856
2866
  </span>
2857
- <span class="pf-c-search-input__utilities">
2858
- <span class="pf-c-search-input__count">
2859
- <span class="pf-c-badge pf-m-read">1 / 10</span>
2860
- </span>
2861
- <span class="pf-c-search-input__nav">
2862
- <button
2863
- class="pf-c-button pf-m-plain"
2864
- type="button"
2865
- disabled
2866
- aria-label="Previous"
2867
- >
2868
- <i class="fas fa-angle-up fa-fw" aria-hidden="true"></i>
2869
- </button>
2870
- <button
2871
- class="pf-c-button pf-m-plain"
2872
- type="button"
2873
- aria-label="Next"
2874
- >
2875
- <i class="fas fa-angle-down fa-fw" aria-hidden="true"></i>
2876
- </button>
2877
- </span>
2878
- <span class="pf-c-search-input__clear">
2879
- <button
2880
- class="pf-c-button pf-m-plain"
2881
- type="button"
2882
- aria-label="Clear"
2883
- >
2884
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
2885
- </button>
2886
- </span>
2887
- </span>
2867
+ </div>
2868
+ <div class="pf-c-text-input-group__utilities">
2869
+ <span class="pf-c-badge pf-m-read">1 / 10</span>
2870
+ <div class="pf-c-text-input-group__group">
2871
+ <button
2872
+ class="pf-c-button pf-m-plain"
2873
+ type="button"
2874
+ disabled
2875
+ aria-label="Previous"
2876
+ >
2877
+ <i class="fas fa-angle-up fa-fw" aria-hidden="true"></i>
2878
+ </button>
2879
+ <button
2880
+ class="pf-c-button pf-m-plain"
2881
+ type="button"
2882
+ aria-label="Next"
2883
+ >
2884
+ <i class="fas fa-angle-down fa-fw" aria-hidden="true"></i>
2885
+ </button>
2886
+ </div>
2887
+ <button
2888
+ class="pf-c-button pf-m-plain"
2889
+ type="button"
2890
+ aria-label="Clear input"
2891
+ >
2892
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
2893
+ </button>
2888
2894
  </div>
2889
2895
  </div>
2890
2896
  </div>
@@ -3219,51 +3225,47 @@ cssPrefix: pf-c-log-viewer
3219
3225
  class="pf-c-toolbar__item pf-m-search-filter"
3220
3226
  style="--pf-c-toolbar__item--Width: 24ch"
3221
3227
  >
3222
- <div class="pf-c-search-input">
3223
- <div class="pf-c-search-input__bar">
3224
- <span class="pf-c-search-input__text">
3225
- <span class="pf-c-search-input__icon">
3226
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
3228
+ <div class="pf-c-text-input-group">
3229
+ <div class="pf-c-text-input-group__main pf-m-icon">
3230
+ <span class="pf-c-text-input-group__text">
3231
+ <span class="pf-c-text-input-group__icon">
3232
+ <i class="fas fa-fw fa-search"></i>
3227
3233
  </span>
3228
3234
  <input
3229
- class="pf-c-search-input__text-input"
3235
+ class="pf-c-text-input-group__text-input"
3230
3236
  type="text"
3231
- placeholder="Find"
3232
- aria-label="Find"
3233
3237
  value="openshift"
3238
+ placeholder="Find"
3239
+ aria-label="Type to filter"
3234
3240
  />
3235
3241
  </span>
3236
- <span class="pf-c-search-input__utilities">
3237
- <span class="pf-c-search-input__count">
3238
- <span class="pf-c-badge pf-m-read">1 / 10</span>
3239
- </span>
3240
- <span class="pf-c-search-input__nav">
3241
- <button
3242
- class="pf-c-button pf-m-plain"
3243
- type="button"
3244
- disabled
3245
- aria-label="Previous"
3246
- >
3247
- <i class="fas fa-angle-up fa-fw" aria-hidden="true"></i>
3248
- </button>
3249
- <button
3250
- class="pf-c-button pf-m-plain"
3251
- type="button"
3252
- aria-label="Next"
3253
- >
3254
- <i class="fas fa-angle-down fa-fw" aria-hidden="true"></i>
3255
- </button>
3256
- </span>
3257
- <span class="pf-c-search-input__clear">
3258
- <button
3259
- class="pf-c-button pf-m-plain"
3260
- type="button"
3261
- aria-label="Clear"
3262
- >
3263
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
3264
- </button>
3265
- </span>
3266
- </span>
3242
+ </div>
3243
+ <div class="pf-c-text-input-group__utilities">
3244
+ <span class="pf-c-badge pf-m-read">1 / 10</span>
3245
+ <div class="pf-c-text-input-group__group">
3246
+ <button
3247
+ class="pf-c-button pf-m-plain"
3248
+ type="button"
3249
+ disabled
3250
+ aria-label="Previous"
3251
+ >
3252
+ <i class="fas fa-angle-up fa-fw" aria-hidden="true"></i>
3253
+ </button>
3254
+ <button
3255
+ class="pf-c-button pf-m-plain"
3256
+ type="button"
3257
+ aria-label="Next"
3258
+ >
3259
+ <i class="fas fa-angle-down fa-fw" aria-hidden="true"></i>
3260
+ </button>
3261
+ </div>
3262
+ <button
3263
+ class="pf-c-button pf-m-plain"
3264
+ type="button"
3265
+ aria-label="Clear input"
3266
+ >
3267
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
3268
+ </button>
3267
3269
  </div>
3268
3270
  </div>
3269
3271
  </div>
@@ -3470,17 +3472,18 @@ cssPrefix: pf-c-log-viewer
3470
3472
  class="pf-c-toolbar__item pf-m-search-filter"
3471
3473
  style="--pf-c-toolbar__item--Width: 268px"
3472
3474
  >
3473
- <div class="pf-c-search-input">
3474
- <div class="pf-c-search-input__bar">
3475
- <span class="pf-c-search-input__text">
3476
- <span class="pf-c-search-input__icon">
3477
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
3475
+ <div class="pf-c-text-input-group">
3476
+ <div class="pf-c-text-input-group__main pf-m-icon">
3477
+ <span class="pf-c-text-input-group__text">
3478
+ <span class="pf-c-text-input-group__icon">
3479
+ <i class="fas fa-fw fa-search"></i>
3478
3480
  </span>
3479
3481
  <input
3480
- class="pf-c-search-input__text-input"
3482
+ class="pf-c-text-input-group__text-input"
3481
3483
  type="text"
3484
+ value
3482
3485
  placeholder="Find"
3483
- aria-label="Find"
3486
+ aria-label="Type to filter"
3484
3487
  />
3485
3488
  </span>
3486
3489
  </div>
@@ -3817,17 +3820,18 @@ cssPrefix: pf-c-log-viewer
3817
3820
  class="pf-c-toolbar__item pf-m-search-filter"
3818
3821
  style="--pf-c-toolbar__item--Width: 24ch"
3819
3822
  >
3820
- <div class="pf-c-search-input">
3821
- <div class="pf-c-search-input__bar">
3822
- <span class="pf-c-search-input__text">
3823
- <span class="pf-c-search-input__icon">
3824
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
3823
+ <div class="pf-c-text-input-group">
3824
+ <div class="pf-c-text-input-group__main pf-m-icon">
3825
+ <span class="pf-c-text-input-group__text">
3826
+ <span class="pf-c-text-input-group__icon">
3827
+ <i class="fas fa-fw fa-search"></i>
3825
3828
  </span>
3826
3829
  <input
3827
- class="pf-c-search-input__text-input"
3830
+ class="pf-c-text-input-group__text-input"
3828
3831
  type="text"
3832
+ value
3829
3833
  placeholder="Find"
3830
- aria-label="Find"
3834
+ aria-label="Type to filter"
3831
3835
  />
3832
3836
  </span>
3833
3837
  </div>
@@ -4020,17 +4024,18 @@ cssPrefix: pf-c-log-viewer
4020
4024
  class="pf-c-toolbar__item pf-m-search-filter"
4021
4025
  style="--pf-c-toolbar__item--Width: 268px"
4022
4026
  >
4023
- <div class="pf-c-search-input">
4024
- <div class="pf-c-search-input__bar">
4025
- <span class="pf-c-search-input__text">
4026
- <span class="pf-c-search-input__icon">
4027
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
4027
+ <div class="pf-c-text-input-group">
4028
+ <div class="pf-c-text-input-group__main pf-m-icon">
4029
+ <span class="pf-c-text-input-group__text">
4030
+ <span class="pf-c-text-input-group__icon">
4031
+ <i class="fas fa-fw fa-search"></i>
4028
4032
  </span>
4029
4033
  <input
4030
- class="pf-c-search-input__text-input"
4034
+ class="pf-c-text-input-group__text-input"
4031
4035
  type="text"
4036
+ value
4032
4037
  placeholder="Find"
4033
- aria-label="Find"
4038
+ aria-label="Type to filter"
4034
4039
  />
4035
4040
  </span>
4036
4041
  </div>
@@ -4365,17 +4370,18 @@ cssPrefix: pf-c-log-viewer
4365
4370
  class="pf-c-toolbar__item pf-m-search-filter"
4366
4371
  style="--pf-c-toolbar__item--Width: 24ch"
4367
4372
  >
4368
- <div class="pf-c-search-input">
4369
- <div class="pf-c-search-input__bar">
4370
- <span class="pf-c-search-input__text">
4371
- <span class="pf-c-search-input__icon">
4372
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
4373
+ <div class="pf-c-text-input-group">
4374
+ <div class="pf-c-text-input-group__main pf-m-icon">
4375
+ <span class="pf-c-text-input-group__text">
4376
+ <span class="pf-c-text-input-group__icon">
4377
+ <i class="fas fa-fw fa-search"></i>
4373
4378
  </span>
4374
4379
  <input
4375
- class="pf-c-search-input__text-input"
4380
+ class="pf-c-text-input-group__text-input"
4376
4381
  type="text"
4382
+ value
4377
4383
  placeholder="Find"
4378
- aria-label="Find"
4384
+ aria-label="Type to filter"
4379
4385
  />
4380
4386
  </span>
4381
4387
  </div>
@@ -4568,17 +4574,18 @@ cssPrefix: pf-c-log-viewer
4568
4574
  class="pf-c-toolbar__item pf-m-search-filter"
4569
4575
  style="--pf-c-toolbar__item--Width: 268px"
4570
4576
  >
4571
- <div class="pf-c-search-input">
4572
- <div class="pf-c-search-input__bar">
4573
- <span class="pf-c-search-input__text">
4574
- <span class="pf-c-search-input__icon">
4575
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
4577
+ <div class="pf-c-text-input-group">
4578
+ <div class="pf-c-text-input-group__main pf-m-icon">
4579
+ <span class="pf-c-text-input-group__text">
4580
+ <span class="pf-c-text-input-group__icon">
4581
+ <i class="fas fa-fw fa-search"></i>
4576
4582
  </span>
4577
4583
  <input
4578
- class="pf-c-search-input__text-input"
4584
+ class="pf-c-text-input-group__text-input"
4579
4585
  type="text"
4586
+ value
4580
4587
  placeholder="Find"
4581
- aria-label="Find"
4588
+ aria-label="Type to filter"
4582
4589
  />
4583
4590
  </span>
4584
4591
  </div>
@@ -4915,17 +4922,18 @@ cssPrefix: pf-c-log-viewer
4915
4922
  class="pf-c-toolbar__item pf-m-search-filter"
4916
4923
  style="--pf-c-toolbar__item--Width: 24ch"
4917
4924
  >
4918
- <div class="pf-c-search-input">
4919
- <div class="pf-c-search-input__bar">
4920
- <span class="pf-c-search-input__text">
4921
- <span class="pf-c-search-input__icon">
4922
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
4925
+ <div class="pf-c-text-input-group">
4926
+ <div class="pf-c-text-input-group__main pf-m-icon">
4927
+ <span class="pf-c-text-input-group__text">
4928
+ <span class="pf-c-text-input-group__icon">
4929
+ <i class="fas fa-fw fa-search"></i>
4923
4930
  </span>
4924
4931
  <input
4925
- class="pf-c-search-input__text-input"
4932
+ class="pf-c-text-input-group__text-input"
4926
4933
  type="text"
4934
+ value
4927
4935
  placeholder="Find"
4928
- aria-label="Find"
4936
+ aria-label="Type to filter"
4929
4937
  />
4930
4938
  </span>
4931
4939
  </div>
@@ -5141,51 +5149,47 @@ cssPrefix: pf-c-log-viewer
5141
5149
  class="pf-c-toolbar__item pf-m-search-filter"
5142
5150
  style="--pf-c-toolbar__item--Width: 268px"
5143
5151
  >
5144
- <div class="pf-c-search-input">
5145
- <div class="pf-c-search-input__bar">
5146
- <span class="pf-c-search-input__text">
5147
- <span class="pf-c-search-input__icon">
5148
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
5152
+ <div class="pf-c-text-input-group">
5153
+ <div class="pf-c-text-input-group__main pf-m-icon">
5154
+ <span class="pf-c-text-input-group__text">
5155
+ <span class="pf-c-text-input-group__icon">
5156
+ <i class="fas fa-fw fa-search"></i>
5149
5157
  </span>
5150
5158
  <input
5151
- class="pf-c-search-input__text-input"
5159
+ class="pf-c-text-input-group__text-input"
5152
5160
  type="text"
5153
- placeholder="Find"
5154
- aria-label="Find"
5155
5161
  value="openshift"
5162
+ placeholder="Find"
5163
+ aria-label="Type to filter"
5156
5164
  />
5157
5165
  </span>
5158
- <span class="pf-c-search-input__utilities">
5159
- <span class="pf-c-search-input__count">
5160
- <span class="pf-c-badge pf-m-read">1 / 10</span>
5161
- </span>
5162
- <span class="pf-c-search-input__nav">
5163
- <button
5164
- class="pf-c-button pf-m-plain"
5165
- type="button"
5166
- disabled
5167
- aria-label="Previous"
5168
- >
5169
- <i class="fas fa-angle-up fa-fw" aria-hidden="true"></i>
5170
- </button>
5171
- <button
5172
- class="pf-c-button pf-m-plain"
5173
- type="button"
5174
- aria-label="Next"
5175
- >
5176
- <i class="fas fa-angle-down fa-fw" aria-hidden="true"></i>
5177
- </button>
5178
- </span>
5179
- <span class="pf-c-search-input__clear">
5180
- <button
5181
- class="pf-c-button pf-m-plain"
5182
- type="button"
5183
- aria-label="Clear"
5184
- >
5185
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
5186
- </button>
5187
- </span>
5188
- </span>
5166
+ </div>
5167
+ <div class="pf-c-text-input-group__utilities">
5168
+ <span class="pf-c-badge pf-m-read">1 / 10</span>
5169
+ <div class="pf-c-text-input-group__group">
5170
+ <button
5171
+ class="pf-c-button pf-m-plain"
5172
+ type="button"
5173
+ disabled
5174
+ aria-label="Previous"
5175
+ >
5176
+ <i class="fas fa-angle-up fa-fw" aria-hidden="true"></i>
5177
+ </button>
5178
+ <button
5179
+ class="pf-c-button pf-m-plain"
5180
+ type="button"
5181
+ aria-label="Next"
5182
+ >
5183
+ <i class="fas fa-angle-down fa-fw" aria-hidden="true"></i>
5184
+ </button>
5185
+ </div>
5186
+ <button
5187
+ class="pf-c-button pf-m-plain"
5188
+ type="button"
5189
+ aria-label="Clear input"
5190
+ >
5191
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
5192
+ </button>
5189
5193
  </div>
5190
5194
  </div>
5191
5195
  </div>
@@ -5520,51 +5524,47 @@ cssPrefix: pf-c-log-viewer
5520
5524
  class="pf-c-toolbar__item pf-m-search-filter"
5521
5525
  style="--pf-c-toolbar__item--Width: 24ch"
5522
5526
  >
5523
- <div class="pf-c-search-input">
5524
- <div class="pf-c-search-input__bar">
5525
- <span class="pf-c-search-input__text">
5526
- <span class="pf-c-search-input__icon">
5527
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
5527
+ <div class="pf-c-text-input-group">
5528
+ <div class="pf-c-text-input-group__main pf-m-icon">
5529
+ <span class="pf-c-text-input-group__text">
5530
+ <span class="pf-c-text-input-group__icon">
5531
+ <i class="fas fa-fw fa-search"></i>
5528
5532
  </span>
5529
5533
  <input
5530
- class="pf-c-search-input__text-input"
5534
+ class="pf-c-text-input-group__text-input"
5531
5535
  type="text"
5532
- placeholder="Find"
5533
- aria-label="Find"
5534
5536
  value="openshift"
5537
+ placeholder="Find"
5538
+ aria-label="Type to filter"
5535
5539
  />
5536
5540
  </span>
5537
- <span class="pf-c-search-input__utilities">
5538
- <span class="pf-c-search-input__count">
5539
- <span class="pf-c-badge pf-m-read">1 / 10</span>
5540
- </span>
5541
- <span class="pf-c-search-input__nav">
5542
- <button
5543
- class="pf-c-button pf-m-plain"
5544
- type="button"
5545
- disabled
5546
- aria-label="Previous"
5547
- >
5548
- <i class="fas fa-angle-up fa-fw" aria-hidden="true"></i>
5549
- </button>
5550
- <button
5551
- class="pf-c-button pf-m-plain"
5552
- type="button"
5553
- aria-label="Next"
5554
- >
5555
- <i class="fas fa-angle-down fa-fw" aria-hidden="true"></i>
5556
- </button>
5557
- </span>
5558
- <span class="pf-c-search-input__clear">
5559
- <button
5560
- class="pf-c-button pf-m-plain"
5561
- type="button"
5562
- aria-label="Clear"
5563
- >
5564
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
5565
- </button>
5566
- </span>
5567
- </span>
5541
+ </div>
5542
+ <div class="pf-c-text-input-group__utilities">
5543
+ <span class="pf-c-badge pf-m-read">1 / 10</span>
5544
+ <div class="pf-c-text-input-group__group">
5545
+ <button
5546
+ class="pf-c-button pf-m-plain"
5547
+ type="button"
5548
+ disabled
5549
+ aria-label="Previous"
5550
+ >
5551
+ <i class="fas fa-angle-up fa-fw" aria-hidden="true"></i>
5552
+ </button>
5553
+ <button
5554
+ class="pf-c-button pf-m-plain"
5555
+ type="button"
5556
+ aria-label="Next"
5557
+ >
5558
+ <i class="fas fa-angle-down fa-fw" aria-hidden="true"></i>
5559
+ </button>
5560
+ </div>
5561
+ <button
5562
+ class="pf-c-button pf-m-plain"
5563
+ type="button"
5564
+ aria-label="Clear input"
5565
+ >
5566
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
5567
+ </button>
5568
5568
  </div>
5569
5569
  </div>
5570
5570
  </div>