@patternfly/patternfly 4.216.3 → 4.217.0

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.
@@ -26,87 +26,83 @@ section: components
26
26
  <i class="fas fa-filter" aria-hidden="true"></i>
27
27
  </button>
28
28
  </div>
29
- <div class="pf-c-toolbar__group pf-m-filter-group">
30
- <div class="pf-c-toolbar__item pf-m-search-filter">
31
- <div class="pf-c-input-group">
32
- <div class="pf-c-select" style="width: 175px">
33
- <span
34
- id="toolbar-attribute-value-search-filter-desktop-example-select-name-label"
35
- hidden
36
- >Choose one</span>
29
+ <div class="pf-c-toolbar__item pf-m-search-filter">
30
+ <div class="pf-c-input-group" aria-label="search filter" role="group">
31
+ <div class="pf-c-select" style="width: 175px">
32
+ <span
33
+ id="toolbar-attribute-value-search-filter-desktop-example-select-name-label"
34
+ hidden
35
+ >Choose one</span>
37
36
 
38
- <button
39
- class="pf-c-select__toggle"
40
- type="button"
41
- id="toolbar-attribute-value-search-filter-desktop-example-select-name-toggle"
42
- aria-haspopup="true"
43
- aria-expanded="false"
44
- aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-select-name-label toolbar-attribute-value-search-filter-desktop-example-select-name-toggle"
45
- >
46
- <div class="pf-c-select__toggle-wrapper">
47
- <span class="pf-c-select__toggle-icon">
48
- <i class="fas fa-filter" aria-hidden="true"></i>
49
- </span>
50
- <span class="pf-c-select__toggle-text">Name</span>
51
- </div>
52
- <span class="pf-c-select__toggle-arrow">
53
- <i class="fas fa-caret-down" aria-hidden="true"></i>
37
+ <button
38
+ class="pf-c-select__toggle"
39
+ type="button"
40
+ id="toolbar-attribute-value-search-filter-desktop-example-select-name-toggle"
41
+ aria-haspopup="true"
42
+ aria-expanded="false"
43
+ aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-select-name-label toolbar-attribute-value-search-filter-desktop-example-select-name-toggle"
44
+ >
45
+ <div class="pf-c-select__toggle-wrapper">
46
+ <span class="pf-c-select__toggle-icon">
47
+ <i class="fas fa-filter" aria-hidden="true"></i>
54
48
  </span>
55
- </button>
49
+ <span class="pf-c-select__toggle-text">Name</span>
50
+ </div>
51
+ <span class="pf-c-select__toggle-arrow">
52
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
53
+ </span>
54
+ </button>
56
55
 
57
- <ul
58
- class="pf-c-select__menu"
59
- role="listbox"
60
- aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-select-name-label"
61
- hidden
62
- style="width: 175px"
63
- >
64
- <li role="presentation">
65
- <button class="pf-c-select__menu-item" role="option">Running</button>
66
- </li>
67
- <li role="presentation">
68
- <button
69
- class="pf-c-select__menu-item pf-m-selected"
70
- role="option"
71
- aria-selected="true"
72
- >
73
- Stopped
74
- <span class="pf-c-select__menu-item-icon">
75
- <i class="fas fa-check" aria-hidden="true"></i>
76
- </span>
77
- </button>
78
- </li>
79
- <li role="presentation">
80
- <button class="pf-c-select__menu-item" role="option">Down</button>
81
- </li>
82
- <li role="presentation">
83
- <button
84
- class="pf-c-select__menu-item"
85
- role="option"
86
- >Degraded</button>
87
- </li>
88
- <li role="presentation">
89
- <button
90
- class="pf-c-select__menu-item"
91
- role="option"
92
- >Needs maintenance</button>
93
- </li>
94
- </ul>
95
- </div>
96
- <div class="pf-c-search-input">
97
- <div class="pf-c-search-input__bar">
98
- <span class="pf-c-search-input__text">
99
- <span class="pf-c-search-input__icon">
100
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
56
+ <ul
57
+ class="pf-c-select__menu"
58
+ role="listbox"
59
+ aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-select-name-label"
60
+ hidden
61
+ style="width: 175px"
62
+ >
63
+ <li role="presentation">
64
+ <button class="pf-c-select__menu-item" role="option">Running</button>
65
+ </li>
66
+ <li role="presentation">
67
+ <button
68
+ class="pf-c-select__menu-item pf-m-selected"
69
+ role="option"
70
+ aria-selected="true"
71
+ >
72
+ Stopped
73
+ <span class="pf-c-select__menu-item-icon">
74
+ <i class="fas fa-check" aria-hidden="true"></i>
101
75
  </span>
102
- <input
103
- class="pf-c-search-input__text-input"
104
- type="text"
105
- placeholder="Filter by name"
106
- aria-label="Filter by name"
107
- />
76
+ </button>
77
+ </li>
78
+ <li role="presentation">
79
+ <button class="pf-c-select__menu-item" role="option">Down</button>
80
+ </li>
81
+ <li role="presentation">
82
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
83
+ </li>
84
+ <li role="presentation">
85
+ <button
86
+ class="pf-c-select__menu-item"
87
+ role="option"
88
+ >Needs maintenance</button>
89
+ </li>
90
+ </ul>
91
+ </div>
92
+ <div class="pf-c-text-input-group">
93
+ <div class="pf-c-text-input-group__main pf-m-icon">
94
+ <span class="pf-c-text-input-group__text">
95
+ <span class="pf-c-text-input-group__icon">
96
+ <i class="fas fa-fw fa-search"></i>
108
97
  </span>
109
- </div>
98
+ <input
99
+ class="pf-c-text-input-group__text-input"
100
+ type="text"
101
+ value
102
+ placeholder="Filter by name"
103
+ aria-label="Type to filter"
104
+ />
105
+ </span>
110
106
  </div>
111
107
  </div>
112
108
  </div>
@@ -376,84 +372,83 @@ section: components
376
372
  class="pf-c-toolbar__expandable-content pf-m-expanded"
377
373
  id="toolbar-attribute-value-search-filter-mobile-example-expandable-content"
378
374
  >
379
- <div class="pf-c-toolbar__group pf-m-filter-group">
380
- <div class="pf-c-toolbar__item">
381
- <div class="pf-c-input-group">
382
- <div class="pf-c-select" style="width: 175px">
383
- <span
384
- id="toolbar-attribute-value-search-filter-mobile-example-select-name-expanded-label"
385
- hidden
386
- >Choose one</span>
375
+ <div class="pf-c-toolbar__item pf-m-search-filter">
376
+ <div class="pf-c-input-group" aria-label="search filter" role="group">
377
+ <div class="pf-c-select" style="width: 175px">
378
+ <span
379
+ id="toolbar-attribute-value-search-filter-mobile-example-select-name-label"
380
+ hidden
381
+ >Choose one</span>
387
382
 
388
- <button
389
- class="pf-c-select__toggle"
390
- type="button"
391
- id="toolbar-attribute-value-search-filter-mobile-example-select-name-expanded-toggle"
392
- aria-haspopup="true"
393
- aria-expanded="false"
394
- aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-select-name-expanded-label toolbar-attribute-value-search-filter-mobile-example-select-name-expanded-toggle"
395
- >
396
- <div class="pf-c-select__toggle-wrapper">
397
- <span class="pf-c-select__toggle-icon">
398
- <i class="fas fa-filter" aria-hidden="true"></i>
399
- </span>
400
- <span class="pf-c-select__toggle-text">Name</span>
401
- </div>
402
- <span class="pf-c-select__toggle-arrow">
403
- <i class="fas fa-caret-down" aria-hidden="true"></i>
383
+ <button
384
+ class="pf-c-select__toggle"
385
+ type="button"
386
+ id="toolbar-attribute-value-search-filter-mobile-example-select-name-toggle"
387
+ aria-haspopup="true"
388
+ aria-expanded="false"
389
+ aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-select-name-label toolbar-attribute-value-search-filter-mobile-example-select-name-toggle"
390
+ >
391
+ <div class="pf-c-select__toggle-wrapper">
392
+ <span class="pf-c-select__toggle-icon">
393
+ <i class="fas fa-filter" aria-hidden="true"></i>
404
394
  </span>
405
- </button>
395
+ <span class="pf-c-select__toggle-text">Name</span>
396
+ </div>
397
+ <span class="pf-c-select__toggle-arrow">
398
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
399
+ </span>
400
+ </button>
406
401
 
407
- <ul
408
- class="pf-c-select__menu"
409
- role="listbox"
410
- aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-select-name-expanded-label"
411
- hidden
412
- style="width: 175px"
413
- >
414
- <li role="presentation">
415
- <button class="pf-c-select__menu-item" role="option">Running</button>
416
- </li>
417
- <li role="presentation">
418
- <button
419
- class="pf-c-select__menu-item pf-m-selected"
420
- role="option"
421
- aria-selected="true"
422
- >
423
- Stopped
424
- <span class="pf-c-select__menu-item-icon">
425
- <i class="fas fa-check" aria-hidden="true"></i>
426
- </span>
427
- </button>
428
- </li>
429
- <li role="presentation">
430
- <button class="pf-c-select__menu-item" role="option">Down</button>
431
- </li>
432
- <li role="presentation">
433
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
434
- </li>
435
- <li role="presentation">
436
- <button
437
- class="pf-c-select__menu-item"
438
- role="option"
439
- >Needs maintenance</button>
440
- </li>
441
- </ul>
442
- </div>
443
- <div class="pf-c-search-input">
444
- <div class="pf-c-search-input__bar">
445
- <span class="pf-c-search-input__text">
446
- <span class="pf-c-search-input__icon">
447
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
402
+ <ul
403
+ class="pf-c-select__menu"
404
+ role="listbox"
405
+ aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-select-name-label"
406
+ hidden
407
+ style="width: 175px"
408
+ >
409
+ <li role="presentation">
410
+ <button class="pf-c-select__menu-item" role="option">Running</button>
411
+ </li>
412
+ <li role="presentation">
413
+ <button
414
+ class="pf-c-select__menu-item pf-m-selected"
415
+ role="option"
416
+ aria-selected="true"
417
+ >
418
+ Stopped
419
+ <span class="pf-c-select__menu-item-icon">
420
+ <i class="fas fa-check" aria-hidden="true"></i>
448
421
  </span>
449
- <input
450
- class="pf-c-search-input__text-input"
451
- type="text"
452
- placeholder="Filter by name"
453
- aria-label="Filter by name"
454
- />
422
+ </button>
423
+ </li>
424
+ <li role="presentation">
425
+ <button class="pf-c-select__menu-item" role="option">Down</button>
426
+ </li>
427
+ <li role="presentation">
428
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
429
+ </li>
430
+ <li role="presentation">
431
+ <button
432
+ class="pf-c-select__menu-item"
433
+ role="option"
434
+ >Needs maintenance</button>
435
+ </li>
436
+ </ul>
437
+ </div>
438
+ <div class="pf-c-text-input-group">
439
+ <div class="pf-c-text-input-group__main pf-m-icon">
440
+ <span class="pf-c-text-input-group__text">
441
+ <span class="pf-c-text-input-group__icon">
442
+ <i class="fas fa-fw fa-search"></i>
455
443
  </span>
456
- </div>
444
+ <input
445
+ class="pf-c-text-input-group__text-input"
446
+ type="text"
447
+ value
448
+ placeholder="Filter by name"
449
+ aria-label="Type to filter"
450
+ />
451
+ </span>
457
452
  </div>
458
453
  </div>
459
454
  </div>
@@ -2665,93 +2660,96 @@ section: components
2665
2660
  <i class="fas fa-filter" aria-hidden="true"></i>
2666
2661
  </button>
2667
2662
  </div>
2668
- <div class="pf-c-toolbar__group pf-m-filter-group">
2669
- <div class="pf-c-toolbar__item pf-m-search-filter">
2670
- <div class="pf-c-input-group">
2671
- <div class="pf-c-select" style="width: 175px">
2672
- <span
2673
- id="toolbar-pagination-management-example-toolbar-select-name-label"
2674
- hidden
2675
- >Choose one</span>
2663
+ <div class="pf-c-toolbar__item pf-m-search-filter">
2664
+ <div
2665
+ class="pf-c-input-group"
2666
+ aria-label="search filter"
2667
+ role="group"
2668
+ >
2669
+ <div class="pf-c-select" style="width: 175px">
2670
+ <span
2671
+ id="toolbar-pagination-management-example-toolbar-select-name-label"
2672
+ hidden
2673
+ >Choose one</span>
2676
2674
 
2677
- <button
2678
- class="pf-c-select__toggle"
2679
- type="button"
2680
- id="toolbar-pagination-management-example-toolbar-select-name-toggle"
2681
- aria-haspopup="true"
2682
- aria-expanded="false"
2683
- aria-labelledby="toolbar-pagination-management-example-toolbar-select-name-label toolbar-pagination-management-example-toolbar-select-name-toggle"
2684
- >
2685
- <div class="pf-c-select__toggle-wrapper">
2686
- <span class="pf-c-select__toggle-icon">
2687
- <i class="fas fa-filter" aria-hidden="true"></i>
2688
- </span>
2689
- <span class="pf-c-select__toggle-text">Name</span>
2690
- </div>
2691
- <span class="pf-c-select__toggle-arrow">
2692
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2675
+ <button
2676
+ class="pf-c-select__toggle"
2677
+ type="button"
2678
+ id="toolbar-pagination-management-example-toolbar-select-name-toggle"
2679
+ aria-haspopup="true"
2680
+ aria-expanded="false"
2681
+ aria-labelledby="toolbar-pagination-management-example-toolbar-select-name-label toolbar-pagination-management-example-toolbar-select-name-toggle"
2682
+ >
2683
+ <div class="pf-c-select__toggle-wrapper">
2684
+ <span class="pf-c-select__toggle-icon">
2685
+ <i class="fas fa-filter" aria-hidden="true"></i>
2693
2686
  </span>
2694
- </button>
2687
+ <span class="pf-c-select__toggle-text">Name</span>
2688
+ </div>
2689
+ <span class="pf-c-select__toggle-arrow">
2690
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2691
+ </span>
2692
+ </button>
2695
2693
 
2696
- <ul
2697
- class="pf-c-select__menu"
2698
- role="listbox"
2699
- aria-labelledby="toolbar-pagination-management-example-toolbar-select-name-label"
2700
- hidden
2701
- style="width: 175px"
2702
- >
2703
- <li role="presentation">
2704
- <button
2705
- class="pf-c-select__menu-item"
2706
- role="option"
2707
- >Running</button>
2708
- </li>
2709
- <li role="presentation">
2710
- <button
2711
- class="pf-c-select__menu-item pf-m-selected"
2712
- role="option"
2713
- aria-selected="true"
2714
- >
2715
- Stopped
2716
- <span class="pf-c-select__menu-item-icon">
2717
- <i class="fas fa-check" aria-hidden="true"></i>
2718
- </span>
2719
- </button>
2720
- </li>
2721
- <li role="presentation">
2722
- <button
2723
- class="pf-c-select__menu-item"
2724
- role="option"
2725
- >Down</button>
2726
- </li>
2727
- <li role="presentation">
2728
- <button
2729
- class="pf-c-select__menu-item"
2730
- role="option"
2731
- >Degraded</button>
2732
- </li>
2733
- <li role="presentation">
2734
- <button
2735
- class="pf-c-select__menu-item"
2736
- role="option"
2737
- >Needs maintenance</button>
2738
- </li>
2739
- </ul>
2740
- </div>
2741
- <div class="pf-c-search-input">
2742
- <div class="pf-c-search-input__bar">
2743
- <span class="pf-c-search-input__text">
2744
- <span class="pf-c-search-input__icon">
2745
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
2694
+ <ul
2695
+ class="pf-c-select__menu"
2696
+ role="listbox"
2697
+ aria-labelledby="toolbar-pagination-management-example-toolbar-select-name-label"
2698
+ hidden
2699
+ style="width: 175px"
2700
+ >
2701
+ <li role="presentation">
2702
+ <button
2703
+ class="pf-c-select__menu-item"
2704
+ role="option"
2705
+ >Running</button>
2706
+ </li>
2707
+ <li role="presentation">
2708
+ <button
2709
+ class="pf-c-select__menu-item pf-m-selected"
2710
+ role="option"
2711
+ aria-selected="true"
2712
+ >
2713
+ Stopped
2714
+ <span class="pf-c-select__menu-item-icon">
2715
+ <i class="fas fa-check" aria-hidden="true"></i>
2746
2716
  </span>
2747
- <input
2748
- class="pf-c-search-input__text-input"
2749
- type="text"
2750
- placeholder="Filter by name"
2751
- aria-label="Filter by name"
2752
- />
2717
+ </button>
2718
+ </li>
2719
+ <li role="presentation">
2720
+ <button
2721
+ class="pf-c-select__menu-item"
2722
+ role="option"
2723
+ >Down</button>
2724
+ </li>
2725
+ <li role="presentation">
2726
+ <button
2727
+ class="pf-c-select__menu-item"
2728
+ role="option"
2729
+ >Degraded</button>
2730
+ </li>
2731
+ <li role="presentation">
2732
+ <button
2733
+ class="pf-c-select__menu-item"
2734
+ role="option"
2735
+ >Needs maintenance</button>
2736
+ </li>
2737
+ </ul>
2738
+ </div>
2739
+ <div class="pf-c-text-input-group">
2740
+ <div class="pf-c-text-input-group__main pf-m-icon">
2741
+ <span class="pf-c-text-input-group__text">
2742
+ <span class="pf-c-text-input-group__icon">
2743
+ <i class="fas fa-fw fa-search"></i>
2753
2744
  </span>
2754
- </div>
2745
+ <input
2746
+ class="pf-c-text-input-group__text-input"
2747
+ type="text"
2748
+ value
2749
+ placeholder="Filter by name"
2750
+ aria-label="Type to filter"
2751
+ />
2752
+ </span>
2755
2753
  </div>
2756
2754
  </div>
2757
2755
  </div>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.216.3",
4
+ "version": "4.217.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -79,7 +79,7 @@
79
79
  "stylelint-scss": "^4.3.0",
80
80
  "stylelint-value-no-unknown-custom-properties": "^4.0.0",
81
81
  "surge": "^0.21.3",
82
- "@patternfly/documentation-framework": "1.2.31",
82
+ "@patternfly/documentation-framework": "1.2.33",
83
83
  "unified": "^9.2.0",
84
84
  "webpack": "^4.43.0"
85
85
  },
@@ -7449,6 +7449,12 @@ button.pf-c-breadcrumb__link {
7449
7449
  --pf-c-button--m-link--m-inline--FontSize: inherit;
7450
7450
  --pf-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
7451
7451
  --pf-c-button--m-link--m-inline--hover--Color: var(--pf-global--link--Color--hover);
7452
+ --pf-c-button--m-link--m-inline--PaddingTop: 0;
7453
+ --pf-c-button--m-link--m-inline--PaddingRight: 0;
7454
+ --pf-c-button--m-link--m-inline--PaddingBottom: 0;
7455
+ --pf-c-button--m-link--m-inline--PaddingLeft: 0;
7456
+ --pf-c-button--m-link--m-inline__progress--Left: var(--pf-global--spacer--xs);
7457
+ --pf-c-button--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--pf-c-button--m-link--m-inline__progress--Left) + 1rem + var(--pf-global--spacer--sm));
7452
7458
  --pf-c-button--m-link--m-danger--BackgroundColor: transparent;
7453
7459
  --pf-c-button--m-link--m-danger--Color: var(--pf-global--danger-color--100);
7454
7460
  --pf-c-button--m-link--m-danger--hover--BackgroundColor: transparent;
@@ -7647,8 +7653,9 @@ button.pf-c-breadcrumb__link {
7647
7653
  }
7648
7654
  .pf-c-button.pf-m-link.pf-m-inline {
7649
7655
  --pf-c-button--FontSize: var(--pf-c-button--m-link--m-inline--FontSize);
7656
+ --pf-c-button__progress--Left: var(--pf-c-button--m-link--m-inline__progress--Left);
7650
7657
  display: inline;
7651
- padding: 0;
7658
+ padding: var(--pf-c-button--m-link--m-inline--PaddingTop) var(--pf-c-button--m-link--m-inline--PaddingRight) var(--pf-c-button--m-link--m-inline--PaddingBottom) var(--pf-c-button--m-link--m-inline--PaddingLeft);
7652
7659
  text-align: left;
7653
7660
  white-space: normal;
7654
7661
  cursor: pointer;
@@ -7814,6 +7821,9 @@ button.pf-c-breadcrumb__link {
7814
7821
  --pf-c-button--PaddingLeft: var(--pf-c-button--m-progress--PaddingLeft);
7815
7822
  transition: var(--pf-c-button--m-progress--TransitionProperty) var(--pf-c-button--m-progress--TransitionDuration);
7816
7823
  }
7824
+ .pf-c-button.pf-m-in-progress {
7825
+ --pf-c-button--m-link--m-inline--PaddingLeft: var(--pf-c-button--m-link--m-inline--m-in-progress--PaddingLeft);
7826
+ }
7817
7827
  .pf-c-button.pf-m-in-progress:not(.pf-m-plain) {
7818
7828
  --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
7819
7829
  --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
@@ -25792,10 +25802,14 @@ label.pf-c-radio, .pf-c-radio__label,
25792
25802
  --pf-c-spinner--m-md--diameter: var(--pf-global--icon--FontSize--md);
25793
25803
  --pf-c-spinner--m-lg--diameter: var(--pf-global--icon--FontSize--lg);
25794
25804
  --pf-c-spinner--m-xl--diameter: var(--pf-global--icon--FontSize--xl);
25805
+ --pf-c-spinner--m-inline--diameter: 1em;
25795
25806
  width: var(--pf-c-spinner--Width);
25796
25807
  height: var(--pf-c-spinner--Height);
25797
25808
  overflow: hidden;
25798
25809
  }
25810
+ .pf-c-spinner.pf-m-inline {
25811
+ --pf-c-spinner--diameter: var(--pf-c-spinner--m-inline--diameter);
25812
+ }
25799
25813
  .pf-c-spinner.pf-m-sm {
25800
25814
  --pf-c-spinner--diameter: var(--pf-c-spinner--m-sm--diameter);
25801
25815
  }
@@ -30688,6 +30702,11 @@ svg.pf-c-spinner.pf-m-xl {
30688
30702
  --pf-c-text-input-group__text--focus-within--after--BorderBottomColor: var(--pf-global--primary-color--100);
30689
30703
  --pf-c-text-input-group__main--first-child--not--text-input--MarginLeft: var(--pf-global--spacer--sm);
30690
30704
  --pf-c-text-input-group__main--m-icon__text-input--PaddingLeft: var(--pf-global--spacer--xl);
30705
+ --pf-c-text-input-group__main--RowGap: var(--pf-global--spacer--xs);
30706
+ --pf-c-text-input-group__main--ColumnGap: var(--pf-global--spacer--sm);
30707
+ --pf-c-text-input-group--c-chip-group__main--PaddingTop: var(--pf-global--spacer--xs);
30708
+ --pf-c-text-input-group--c-chip-group__main--PaddingRight: var(--pf-global--spacer--xs);
30709
+ --pf-c-text-input-group--c-chip-group__main--PaddingBottom: var(--pf-global--spacer--xs);
30691
30710
  --pf-c-text-input-group__text-input--PaddingTop: var(--pf-global--spacer--form-element);
30692
30711
  --pf-c-text-input-group__text-input--PaddingRight: var(--pf-global--spacer--sm);
30693
30712
  --pf-c-text-input-group__text-input--PaddingBottom: var(--pf-global--spacer--form-element);
@@ -30733,7 +30752,8 @@ svg.pf-c-spinner.pf-m-xl {
30733
30752
  .pf-c-text-input-group__main {
30734
30753
  display: flex;
30735
30754
  flex: 1;
30736
- gap: var(--pf-global--spacer--sm);
30755
+ flex-wrap: wrap;
30756
+ gap: var(--pf-c-text-input-group__main--RowGap) var(--pf-c-text-input-group__main--ColumnGap);
30737
30757
  min-width: 0;
30738
30758
  }
30739
30759
  .pf-c-text-input-group__main.pf-m-icon {
@@ -30742,17 +30762,10 @@ svg.pf-c-spinner.pf-m-xl {
30742
30762
  .pf-c-text-input-group__main > :first-child:not(.pf-c-text-input-group__text) {
30743
30763
  margin-left: var(--pf-c-text-input-group__main--first-child--not--text-input--MarginLeft);
30744
30764
  }
30745
- .pf-c-text-input-group__main .pf-c-chip-group {
30746
- overflow: auto;
30747
- -ms-overflow-style: none;
30748
- scrollbar-width: none;
30749
- }
30750
- .pf-c-text-input-group__main .pf-c-chip-group::-webkit-scrollbar {
30751
- display: none;
30752
- }
30753
- .pf-c-text-input-group__main .pf-c-chip-group,
30754
- .pf-c-text-input-group__main .pf-c-chip-group__list {
30755
- flex-wrap: nowrap;
30765
+ .pf-c-text-input-group__main .pf-c-chip-group__main {
30766
+ padding-top: var(--pf-c-text-input-group--c-chip-group__main--PaddingTop);
30767
+ padding-right: var(--pf-c-text-input-group--c-chip-group__main--PaddingRight);
30768
+ padding-bottom: var(--pf-c-text-input-group--c-chip-group__main--PaddingBottom);
30756
30769
  }
30757
30770
 
30758
30771
  .pf-c-text-input-group__text {