@patternfly/patternfly 5.0.0-alpha.75 → 5.0.0-alpha.76

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 (16) hide show
  1. package/components/Masthead/masthead.css +15 -3
  2. package/components/Masthead/masthead.scss +16 -4
  3. package/components/Toolbar/toolbar.css +2 -1
  4. package/components/Toolbar/toolbar.scss +2 -1
  5. package/docs/components/Toolbar/examples/Toolbar.md +15 -15
  6. package/docs/demos/DataList/examples/DataList.md +6 -6
  7. package/docs/demos/Masthead/examples/Masthead.md +9 -9
  8. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +9 -18
  9. package/docs/demos/Table/examples/Table.md +36 -42
  10. package/docs/demos/Toolbar/examples/Toolbar.md +12 -12
  11. package/package.json +1 -1
  12. package/patternfly-no-globals.css +17 -4
  13. package/patternfly-theme-dark-unversioned.css +17 -4
  14. package/patternfly.css +17 -4
  15. package/patternfly.min.css +1 -1
  16. package/patternfly.min.css.map +1 -1
package/components/Masthead/masthead.css CHANGED
@@ -89,6 +89,7 @@
89
89
  --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
90
90
  --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
91
91
  --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
92
+ --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
92
93
  --pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
93
94
  --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
94
95
  --pf-v5-c-masthead--c-toolbar__content--PaddingLeft: 0;
@@ -96,8 +97,8 @@
96
97
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--inset);
97
98
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
98
99
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--inset);
99
- --pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
100
- --pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
100
+ --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
101
+ --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
101
102
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
102
103
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
103
104
  --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
@@ -162,6 +163,7 @@
162
163
  --pf-v5-c-masthead__main--BorderBottomColor: var(--pf-v5-c-masthead--m-light-200__main--BorderBottomColor);
163
164
  }
164
165
  .pf-v5-c-masthead .pf-v5-c-toolbar {
166
+ --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--c-toolbar--BackgroundColor);
165
167
  --pf-v5-c-toolbar--AlignItems--base: var(--pf-v5-c-masthead--c-toolbar--AlignItems--base);
166
168
  --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__content--PaddingRight);
167
169
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__content--PaddingLeft);
@@ -175,7 +177,17 @@
175
177
  flex-wrap: nowrap;
176
178
  }
177
179
  .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content {
178
- border-top: var(--pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopWidth) solid var(--pf-v5-c-masthead--c-toolbar__expandable-content--BorderTopColor);
180
+ top: 100%;
181
+ }
182
+ .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content::before {
183
+ position: absolute;
184
+ top: 0;
185
+ right: 0;
186
+ bottom: 0;
187
+ left: 0;
188
+ content: "";
189
+ border-top: var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth) solid var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor);
190
+ box-shadow: var(--pf-v5-c-toolbar__expandable-content--before--BoxShadow);
179
191
  }
180
192
  .pf-v5-c-masthead .pf-v5-c-menu-toggle {
181
193
  --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);
package/components/Masthead/masthead.scss CHANGED
@@ -139,6 +139,7 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
139
139
  --#{$masthead}--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
140
140
 
141
141
  // Toolbar
142
+ --#{$masthead}--c-toolbar--BackgroundColor: var(--#{$masthead}--BackgroundColor);
142
143
  --#{$masthead}--c-toolbar--AlignItems--base: center;
143
144
  --#{$masthead}--c-toolbar__content--PaddingRight: 0;
144
145
  --#{$masthead}--c-toolbar__content--PaddingLeft: 0;
@@ -146,9 +147,8 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
146
147
  --#{$masthead}--c-toolbar__expandable-content--PaddingRight: var(--#{$masthead}--inset);
147
148
  --#{$masthead}--c-toolbar__expandable-content--PaddingBottom: var(--#{$pf-global}--spacer--md);
148
149
  --#{$masthead}--c-toolbar__expandable-content--PaddingLeft: var(--#{$masthead}--inset);
149
- --#{$masthead}--c-toolbar__expandable-content--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
150
- --#{$masthead}--c-toolbar__expandable-content--BorderTopColor: var(--#{$masthead}--item-border-color--base);
151
-
150
+ --#{$masthead}--c-toolbar__expandable-content--before--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
151
+ --#{$masthead}--c-toolbar__expandable-content--before--BorderTopColor: var(--#{$masthead}--item-border-color--base);
152
152
 
153
153
  // Set layout to stack by default
154
154
  @include pf-v5-c-masthead--m-display-stack;
@@ -190,6 +190,7 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
190
190
  }
191
191
 
192
192
  .#{$toolbar} {
193
+ --#{$toolbar}--BackgroundColor: var(--#{$masthead}--c-toolbar--BackgroundColor);
193
194
  --#{$toolbar}--AlignItems--base: var(--#{$masthead}--c-toolbar--AlignItems--base);
194
195
  --#{$toolbar}__content--PaddingRight: var(--#{$masthead}--c-toolbar__content--PaddingRight);
195
196
  --#{$toolbar}__content--PaddingLeft: var(--#{$masthead}--c-toolbar__content--PaddingLeft);
@@ -206,7 +207,18 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
206
207
  }
207
208
 
208
209
  .#{$toolbar}__expandable-content {
209
- border-top: var(--#{$masthead}--c-toolbar__expandable-content--BorderTopWidth) solid var(--#{$masthead}--c-toolbar__expandable-content--BorderTopColor);
210
+ top: 100%;
211
+
212
+ &::before {
213
+ position: absolute;
214
+ top: 0;
215
+ right: 0;
216
+ bottom: 0;
217
+ left: 0;
218
+ content: '';
219
+ border-top: var(--#{$masthead}--c-toolbar__expandable-content--before--BorderTopWidth) solid var(--#{$masthead}--c-toolbar__expandable-content--before--BorderTopColor);
220
+ box-shadow: var(--#{$toolbar}__expandable-content--before--BoxShadow);
221
+ }
210
222
  }
211
223
 
212
224
  .#{$menu-toggle} {
package/components/Toolbar/toolbar.css CHANGED
@@ -76,6 +76,7 @@
76
76
  --pf-v5-c-toolbar--m-page-insets--inset: var(--pf-v5-global--spacer--md);
77
77
  --pf-v5-c-toolbar--m-page-insets--xl--inset: var(--pf-v5-global--spacer--lg);
78
78
  --pf-v5-c-toolbar__expandable-content--Display: grid;
79
+ --pf-v5-c-toolbar__expandable-content--PaddingTop: 0;
79
80
  --pf-v5-c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-toolbar__content--PaddingRight);
80
81
  --pf-v5-c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
81
82
  --pf-v5-c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-toolbar__content--PaddingLeft);
@@ -415,7 +416,7 @@
415
416
  z-index: var(--pf-v5-c-toolbar__expandable-content--ZIndex);
416
417
  display: none;
417
418
  width: 100%;
418
- padding: 0 var(--pf-v5-c-toolbar__expandable-content--PaddingRight) var(--pf-v5-c-toolbar__expandable-content--PaddingBottom) var(--pf-v5-c-toolbar__expandable-content--PaddingLeft);
419
+ padding: var(--pf-v5-c-toolbar__expandable-content--PaddingTop) var(--pf-v5-c-toolbar__expandable-content--PaddingRight) var(--pf-v5-c-toolbar__expandable-content--PaddingBottom) var(--pf-v5-c-toolbar__expandable-content--PaddingLeft);
419
420
  background-color: var(--pf-v5-c-toolbar__expandable-content--BackgroundColor);
420
421
  box-shadow: var(--pf-v5-c-toolbar__expandable-content--BoxShadow);
421
422
  }
package/components/Toolbar/toolbar.scss CHANGED
@@ -48,6 +48,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
48
48
 
49
49
  // Expandable content
50
50
  --#{$toolbar}__expandable-content--Display: grid;
51
+ --#{$toolbar}__expandable-content--PaddingTop: 0;
51
52
  --#{$toolbar}__expandable-content--PaddingRight: var(--#{$toolbar}__content--PaddingRight);
52
53
  --#{$toolbar}__expandable-content--PaddingBottom: var(--#{$pf-global}--spacer--md);
53
54
  --#{$toolbar}__expandable-content--PaddingLeft: var(--#{$toolbar}__content--PaddingLeft);
@@ -445,7 +446,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
445
446
  z-index: var(--#{$toolbar}__expandable-content--ZIndex);
446
447
  display: none;
447
448
  width: 100%;
448
- padding: 0 var(--#{$toolbar}__expandable-content--PaddingRight) var(--#{$toolbar}__expandable-content--PaddingBottom) var(--#{$toolbar}__expandable-content--PaddingLeft);
449
+ padding: var(--#{$toolbar}__expandable-content--PaddingTop) var(--#{$toolbar}__expandable-content--PaddingRight) var(--#{$toolbar}__expandable-content--PaddingBottom) var(--#{$toolbar}__expandable-content--PaddingLeft);
449
450
  background-color: var(--#{$toolbar}__expandable-content--BackgroundColor);
450
451
  box-shadow: var(--#{$toolbar}__expandable-content--BoxShadow);
451
452
 
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -469,7 +469,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
469
469
  aria-label="search filter"
470
470
  role="group"
471
471
  >
472
- <div class="pf-v5-c-input-group__item pf-m-fill">
472
+ <div class="pf-v5-c-input-group__item">
473
473
  <div class="pf-v5-c-select" style="width: 124px">
474
474
  <span
475
475
  id="toolbar-toggle-group-example-select-name-label"
@@ -537,8 +537,8 @@ In some instances, it may be necessary to adjust spacing explicitly where items
537
537
  </ul>
538
538
  </div>
539
539
  </div>
540
- <div class="pf-v5-c-input-group__item">
541
- <div class="pf-v5-c-text-input-group" style="width: auto">
540
+ <div class="pf-v5-c-input-group__item pf-m-fill">
541
+ <div class="pf-v5-c-text-input-group">
542
542
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
543
543
  <span class="pf-v5-c-text-input-group__text">
544
544
  <span class="pf-v5-c-text-input-group__icon">
@@ -807,7 +807,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
807
807
  aria-label="search filter"
808
808
  role="group"
809
809
  >
810
- <div class="pf-v5-c-input-group__item pf-m-fill">
810
+ <div class="pf-v5-c-input-group__item">
811
811
  <div class="pf-v5-c-select" style="width: 124px">
812
812
  <span
813
813
  id="toolbar-toggle-group-collapsed-example-select-name-label"
@@ -875,8 +875,8 @@ In some instances, it may be necessary to adjust spacing explicitly where items
875
875
  </ul>
876
876
  </div>
877
877
  </div>
878
- <div class="pf-v5-c-input-group__item">
879
- <div class="pf-v5-c-text-input-group" style="width: auto">
878
+ <div class="pf-v5-c-input-group__item pf-m-fill">
879
+ <div class="pf-v5-c-text-input-group">
880
880
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
881
881
  <span class="pf-v5-c-text-input-group__text">
882
882
  <span class="pf-v5-c-text-input-group__icon">
@@ -1211,7 +1211,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1211
1211
  aria-label="search filter"
1212
1212
  role="group"
1213
1213
  >
1214
- <div class="pf-v5-c-input-group__item pf-m-fill">
1214
+ <div class="pf-v5-c-input-group__item">
1215
1215
  <div class="pf-v5-c-select" style="width: 124px">
1216
1216
  <span
1217
1217
  id="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label"
@@ -1279,8 +1279,8 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1279
1279
  </ul>
1280
1280
  </div>
1281
1281
  </div>
1282
- <div class="pf-v5-c-input-group__item">
1283
- <div class="pf-v5-c-text-input-group" style="width: auto">
1282
+ <div class="pf-v5-c-input-group__item pf-m-fill">
1283
+ <div class="pf-v5-c-text-input-group">
1284
1284
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
1285
1285
  <span class="pf-v5-c-text-input-group__text">
1286
1286
  <span class="pf-v5-c-text-input-group__icon">
@@ -1843,7 +1843,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1843
1843
  aria-label="search filter"
1844
1844
  role="group"
1845
1845
  >
1846
- <div class="pf-v5-c-input-group__item pf-m-fill">
1846
+ <div class="pf-v5-c-input-group__item">
1847
1847
  <div class="pf-v5-c-select" style="width: 124px">
1848
1848
  <span
1849
1849
  id="toolbar-selected-filters-toggle-group-expanded-example-select-name-label"
@@ -1911,8 +1911,8 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1911
1911
  </ul>
1912
1912
  </div>
1913
1913
  </div>
1914
- <div class="pf-v5-c-input-group__item">
1915
- <div class="pf-v5-c-text-input-group" style="width: auto">
1914
+ <div class="pf-v5-c-input-group__item pf-m-fill">
1915
+ <div class="pf-v5-c-text-input-group">
1916
1916
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
1917
1917
  <span class="pf-v5-c-text-input-group__text">
1918
1918
  <span class="pf-v5-c-text-input-group__icon">
@@ -4026,7 +4026,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
4026
4026
  aria-label="search filter"
4027
4027
  role="group"
4028
4028
  >
4029
- <div class="pf-v5-c-input-group__item pf-m-fill">
4029
+ <div class="pf-v5-c-input-group__item">
4030
4030
  <div class="pf-v5-c-select" style="width: 124px">
4031
4031
  <span
4032
4032
  id="toolbar-expanded-elements-example-select-name-label"
@@ -4094,8 +4094,8 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
4094
4094
  </ul>
4095
4095
  </div>
4096
4096
  </div>
4097
- <div class="pf-v5-c-input-group__item">
4098
- <div class="pf-v5-c-text-input-group" style="width: auto">
4097
+ <div class="pf-v5-c-input-group__item pf-m-fill">
4098
+ <div class="pf-v5-c-text-input-group">
4099
4099
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
4100
4100
  <span class="pf-v5-c-text-input-group__text">
4101
4101
  <span class="pf-v5-c-text-input-group__icon">
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -4200,7 +4200,7 @@ wrapperTag: div
4200
4200
  aria-label="search filter"
4201
4201
  role="group"
4202
4202
  >
4203
- <div class="pf-v5-c-input-group__item pf-m-fill">
4203
+ <div class="pf-v5-c-input-group__item">
4204
4204
  <div class="pf-v5-c-select" style="width: 124px">
4205
4205
  <span id="-select-name-label" hidden>Choose one</span>
4206
4206
 
@@ -4268,8 +4268,8 @@ wrapperTag: div
4268
4268
  </ul>
4269
4269
  </div>
4270
4270
  </div>
4271
- <div class="pf-v5-c-input-group__item">
4272
- <div class="pf-v5-c-text-input-group" style="width: auto">
4271
+ <div class="pf-v5-c-input-group__item pf-m-fill">
4272
+ <div class="pf-v5-c-text-input-group">
4273
4273
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
4274
4274
  <span class="pf-v5-c-text-input-group__text">
4275
4275
  <span class="pf-v5-c-text-input-group__icon">
@@ -6497,7 +6497,7 @@ wrapperTag: div
6497
6497
  aria-label="search filter"
6498
6498
  role="group"
6499
6499
  >
6500
- <div class="pf-v5-c-input-group__item pf-m-fill">
6500
+ <div class="pf-v5-c-input-group__item">
6501
6501
  <div class="pf-v5-c-select" style="width: 124px">
6502
6502
  <span id="-select-name-label" hidden>Choose one</span>
6503
6503
 
@@ -6565,8 +6565,8 @@ wrapperTag: div
6565
6565
  </ul>
6566
6566
  </div>
6567
6567
  </div>
6568
- <div class="pf-v5-c-input-group__item">
6569
- <div class="pf-v5-c-text-input-group" style="width: auto">
6568
+ <div class="pf-v5-c-input-group__item pf-m-fill">
6569
+ <div class="pf-v5-c-text-input-group">
6570
6570
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
6571
6571
  <span class="pf-v5-c-text-input-group__text">
6572
6572
  <span class="pf-v5-c-text-input-group__icon">
package/docs/demos/Masthead/examples/Masthead.md CHANGED
@@ -703,7 +703,7 @@ wrapperTag: div
703
703
  aria-label="search filter"
704
704
  role="group"
705
705
  >
706
- <div class="pf-v5-c-input-group__item pf-m-fill">
706
+ <div class="pf-v5-c-input-group__item">
707
707
  <div class="pf-v5-c-select" style="width: 124px">
708
708
  <span
709
709
  id="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
@@ -774,8 +774,8 @@ wrapperTag: div
774
774
  </ul>
775
775
  </div>
776
776
  </div>
777
- <div class="pf-v5-c-input-group__item">
778
- <div class="pf-v5-c-text-input-group" style="width: auto">
777
+ <div class="pf-v5-c-input-group__item pf-m-fill">
778
+ <div class="pf-v5-c-text-input-group">
779
779
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
780
780
  <span class="pf-v5-c-text-input-group__text">
781
781
  <span class="pf-v5-c-text-input-group__icon">
@@ -1044,7 +1044,7 @@ wrapperTag: div
1044
1044
  aria-label="search filter"
1045
1045
  role="group"
1046
1046
  >
1047
- <div class="pf-v5-c-input-group__item pf-m-fill">
1047
+ <div class="pf-v5-c-input-group__item">
1048
1048
  <div class="pf-v5-c-select" style="width: 124px">
1049
1049
  <span
1050
1050
  id="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
@@ -1115,8 +1115,8 @@ wrapperTag: div
1115
1115
  </ul>
1116
1116
  </div>
1117
1117
  </div>
1118
- <div class="pf-v5-c-input-group__item">
1119
- <div class="pf-v5-c-text-input-group" style="width: auto">
1118
+ <div class="pf-v5-c-input-group__item pf-m-fill">
1119
+ <div class="pf-v5-c-text-input-group">
1120
1120
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
1121
1121
  <span class="pf-v5-c-text-input-group__text">
1122
1122
  <span class="pf-v5-c-text-input-group__icon">
@@ -3794,7 +3794,7 @@ wrapperTag: div
3794
3794
  aria-label="search filter"
3795
3795
  role="group"
3796
3796
  >
3797
- <div class="pf-v5-c-input-group__item pf-m-fill">
3797
+ <div class="pf-v5-c-input-group__item">
3798
3798
  <div class="pf-v5-c-select" style="width: 124px">
3799
3799
  <span
3800
3800
  id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
@@ -3865,8 +3865,8 @@ wrapperTag: div
3865
3865
  </ul>
3866
3866
  </div>
3867
3867
  </div>
3868
- <div class="pf-v5-c-input-group__item">
3869
- <div class="pf-v5-c-text-input-group" style="width: auto">
3868
+ <div class="pf-v5-c-input-group__item pf-m-fill">
3869
+ <div class="pf-v5-c-text-input-group">
3870
3870
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
3871
3871
  <span class="pf-v5-c-text-input-group__text">
3872
3872
  <span class="pf-v5-c-text-input-group__icon">
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -973,7 +973,7 @@ wrapperTag: div
973
973
  aria-label="search filter"
974
974
  role="group"
975
975
  >
976
- <div class="pf-v5-c-input-group__item pf-m-fill">
976
+ <div class="pf-v5-c-input-group__item">
977
977
  <div class="pf-v5-c-select" style="width: 124px">
978
978
  <span
979
979
  id="primary-detail-expanded-example-drawer-toolbar-select-name-label"
@@ -1052,11 +1052,8 @@ wrapperTag: div
1052
1052
  </ul>
1053
1053
  </div>
1054
1054
  </div>
1055
- <div class="pf-v5-c-input-group__item">
1056
- <div
1057
- class="pf-v5-c-text-input-group"
1058
- style="width: auto"
1059
- >
1055
+ <div class="pf-v5-c-input-group__item pf-m-fill">
1056
+ <div class="pf-v5-c-text-input-group">
1060
1057
  <div
1061
1058
  class="pf-v5-c-text-input-group__main pf-m-icon"
1062
1059
  >
@@ -2962,7 +2959,7 @@ wrapperTag: div
2962
2959
  aria-label="search filter"
2963
2960
  role="group"
2964
2961
  >
2965
- <div class="pf-v5-c-input-group__item pf-m-fill">
2962
+ <div class="pf-v5-c-input-group__item">
2966
2963
  <div class="pf-v5-c-select" style="width: 124px">
2967
2964
  <span
2968
2965
  id="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
@@ -3041,11 +3038,8 @@ wrapperTag: div
3041
3038
  </ul>
3042
3039
  </div>
3043
3040
  </div>
3044
- <div class="pf-v5-c-input-group__item">
3045
- <div
3046
- class="pf-v5-c-text-input-group"
3047
- style="width: auto"
3048
- >
3041
+ <div class="pf-v5-c-input-group__item pf-m-fill">
3042
+ <div class="pf-v5-c-text-input-group">
3049
3043
  <div
3050
3044
  class="pf-v5-c-text-input-group__main pf-m-icon"
3051
3045
  >
@@ -6728,7 +6722,7 @@ wrapperTag: div
6728
6722
  aria-label="search filter"
6729
6723
  role="group"
6730
6724
  >
6731
- <div class="pf-v5-c-input-group__item pf-m-fill">
6725
+ <div class="pf-v5-c-input-group__item">
6732
6726
  <div class="pf-v5-c-select" style="width: 124px">
6733
6727
  <span
6734
6728
  id="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
@@ -6799,11 +6793,8 @@ wrapperTag: div
6799
6793
  </ul>
6800
6794
  </div>
6801
6795
  </div>
6802
- <div class="pf-v5-c-input-group__item">
6803
- <div
6804
- class="pf-v5-c-text-input-group"
6805
- style="width: auto"
6806
- >
6796
+ <div class="pf-v5-c-input-group__item pf-m-fill">
6797
+ <div class="pf-v5-c-text-input-group">
6807
6798
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
6808
6799
  <span class="pf-v5-c-text-input-group__text">
6809
6800
  <span class="pf-v5-c-text-input-group__icon">
package/docs/demos/Table/examples/Table.md CHANGED
@@ -1006,7 +1006,7 @@ wrapperTag: div
1006
1006
  aria-label="search filter"
1007
1007
  role="group"
1008
1008
  >
1009
- <div class="pf-v5-c-input-group__item pf-m-fill">
1009
+ <div class="pf-v5-c-input-group__item">
1010
1010
  <div class="pf-v5-c-select" style="width: 124px">
1011
1011
  <span id="-select-name-label" hidden>Choose one</span>
1012
1012
 
@@ -1074,8 +1074,8 @@ wrapperTag: div
1074
1074
  </ul>
1075
1075
  </div>
1076
1076
  </div>
1077
- <div class="pf-v5-c-input-group__item">
1078
- <div class="pf-v5-c-text-input-group" style="width: auto">
1077
+ <div class="pf-v5-c-input-group__item pf-m-fill">
1078
+ <div class="pf-v5-c-text-input-group">
1079
1079
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
1080
1080
  <span class="pf-v5-c-text-input-group__text">
1081
1081
  <span class="pf-v5-c-text-input-group__icon">
@@ -2879,7 +2879,7 @@ wrapperTag: div
2879
2879
  aria-label="search filter"
2880
2880
  role="group"
2881
2881
  >
2882
- <div class="pf-v5-c-input-group__item pf-m-fill">
2882
+ <div class="pf-v5-c-input-group__item">
2883
2883
  <div class="pf-v5-c-select" style="width: 124px">
2884
2884
  <span id="-select-name-label" hidden>Choose one</span>
2885
2885
 
@@ -2947,8 +2947,8 @@ wrapperTag: div
2947
2947
  </ul>
2948
2948
  </div>
2949
2949
  </div>
2950
- <div class="pf-v5-c-input-group__item">
2951
- <div class="pf-v5-c-text-input-group" style="width: auto">
2950
+ <div class="pf-v5-c-input-group__item pf-m-fill">
2951
+ <div class="pf-v5-c-text-input-group">
2952
2952
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
2953
2953
  <span class="pf-v5-c-text-input-group__text">
2954
2954
  <span class="pf-v5-c-text-input-group__icon">
@@ -4908,7 +4908,7 @@ wrapperTag: div
4908
4908
  aria-label="search filter"
4909
4909
  role="group"
4910
4910
  >
4911
- <div class="pf-v5-c-input-group__item pf-m-fill">
4911
+ <div class="pf-v5-c-input-group__item">
4912
4912
  <div class="pf-v5-c-select" style="width: 124px">
4913
4913
  <span id="-select-name-label" hidden>Choose one</span>
4914
4914
 
@@ -4976,8 +4976,8 @@ wrapperTag: div
4976
4976
  </ul>
4977
4977
  </div>
4978
4978
  </div>
4979
- <div class="pf-v5-c-input-group__item">
4980
- <div class="pf-v5-c-text-input-group" style="width: auto">
4979
+ <div class="pf-v5-c-input-group__item pf-m-fill">
4980
+ <div class="pf-v5-c-text-input-group">
4981
4981
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
4982
4982
  <span class="pf-v5-c-text-input-group__text">
4983
4983
  <span class="pf-v5-c-text-input-group__icon">
@@ -7182,7 +7182,7 @@ wrapperTag: div
7182
7182
  aria-label="search filter"
7183
7183
  role="group"
7184
7184
  >
7185
- <div class="pf-v5-c-input-group__item pf-m-fill">
7185
+ <div class="pf-v5-c-input-group__item">
7186
7186
  <div class="pf-v5-c-select" style="width: 124px">
7187
7187
  <span id="-select-name-label" hidden>Choose one</span>
7188
7188
 
@@ -7250,8 +7250,8 @@ wrapperTag: div
7250
7250
  </ul>
7251
7251
  </div>
7252
7252
  </div>
7253
- <div class="pf-v5-c-input-group__item">
7254
- <div class="pf-v5-c-text-input-group" style="width: auto">
7253
+ <div class="pf-v5-c-input-group__item pf-m-fill">
7254
+ <div class="pf-v5-c-text-input-group">
7255
7255
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
7256
7256
  <span class="pf-v5-c-text-input-group__text">
7257
7257
  <span class="pf-v5-c-text-input-group__icon">
@@ -9126,7 +9126,7 @@ wrapperTag: div
9126
9126
  aria-label="search filter"
9127
9127
  role="group"
9128
9128
  >
9129
- <div class="pf-v5-c-input-group__item pf-m-fill">
9129
+ <div class="pf-v5-c-input-group__item">
9130
9130
  <div class="pf-v5-c-select" style="width: 124px">
9131
9131
  <span id="-select-name-label" hidden>Choose one</span>
9132
9132
 
@@ -9194,8 +9194,8 @@ wrapperTag: div
9194
9194
  </ul>
9195
9195
  </div>
9196
9196
  </div>
9197
- <div class="pf-v5-c-input-group__item">
9198
- <div class="pf-v5-c-text-input-group" style="width: auto">
9197
+ <div class="pf-v5-c-input-group__item pf-m-fill">
9198
+ <div class="pf-v5-c-text-input-group">
9199
9199
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
9200
9200
  <span class="pf-v5-c-text-input-group__text">
9201
9201
  <span class="pf-v5-c-text-input-group__icon">
@@ -16974,7 +16974,7 @@ wrapperTag: div
16974
16974
  aria-label="search filter"
16975
16975
  role="group"
16976
16976
  >
16977
- <div class="pf-v5-c-input-group__item pf-m-fill">
16977
+ <div class="pf-v5-c-input-group__item">
16978
16978
  <div class="pf-v5-c-select" style="width: 124px">
16979
16979
  <span id="-select-name-label" hidden>Choose one</span>
16980
16980
 
@@ -17042,8 +17042,8 @@ wrapperTag: div
17042
17042
  </ul>
17043
17043
  </div>
17044
17044
  </div>
17045
- <div class="pf-v5-c-input-group__item">
17046
- <div class="pf-v5-c-text-input-group" style="width: auto">
17045
+ <div class="pf-v5-c-input-group__item pf-m-fill">
17046
+ <div class="pf-v5-c-text-input-group">
17047
17047
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
17048
17048
  <span class="pf-v5-c-text-input-group__text">
17049
17049
  <span class="pf-v5-c-text-input-group__icon">
@@ -19013,7 +19013,7 @@ wrapperTag: div
19013
19013
  aria-label="search filter"
19014
19014
  role="group"
19015
19015
  >
19016
- <div class="pf-v5-c-input-group__item pf-m-fill">
19016
+ <div class="pf-v5-c-input-group__item">
19017
19017
  <div class="pf-v5-c-select" style="width: 124px">
19018
19018
  <span id="-select-name-label" hidden>Choose one</span>
19019
19019
 
@@ -19081,8 +19081,8 @@ wrapperTag: div
19081
19081
  </ul>
19082
19082
  </div>
19083
19083
  </div>
19084
- <div class="pf-v5-c-input-group__item">
19085
- <div class="pf-v5-c-text-input-group" style="width: auto">
19084
+ <div class="pf-v5-c-input-group__item pf-m-fill">
19085
+ <div class="pf-v5-c-text-input-group">
19086
19086
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
19087
19087
  <span class="pf-v5-c-text-input-group__text">
19088
19088
  <span class="pf-v5-c-text-input-group__icon">
@@ -21155,7 +21155,7 @@ wrapperTag: div
21155
21155
  aria-label="search filter"
21156
21156
  role="group"
21157
21157
  >
21158
- <div class="pf-v5-c-input-group__item pf-m-fill">
21158
+ <div class="pf-v5-c-input-group__item">
21159
21159
  <div class="pf-v5-c-select" style="width: 124px">
21160
21160
  <span id="-select-name-label" hidden>Choose one</span>
21161
21161
 
@@ -21223,8 +21223,8 @@ wrapperTag: div
21223
21223
  </ul>
21224
21224
  </div>
21225
21225
  </div>
21226
- <div class="pf-v5-c-input-group__item">
21227
- <div class="pf-v5-c-text-input-group" style="width: auto">
21226
+ <div class="pf-v5-c-input-group__item pf-m-fill">
21227
+ <div class="pf-v5-c-text-input-group">
21228
21228
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
21229
21229
  <span class="pf-v5-c-text-input-group__text">
21230
21230
  <span class="pf-v5-c-text-input-group__icon">
@@ -23195,7 +23195,7 @@ wrapperTag: div
23195
23195
  aria-label="search filter"
23196
23196
  role="group"
23197
23197
  >
23198
- <div class="pf-v5-c-input-group__item pf-m-fill">
23198
+ <div class="pf-v5-c-input-group__item">
23199
23199
  <div class="pf-v5-c-select" style="width: 124px">
23200
23200
  <span id="-select-name-label" hidden>Choose one</span>
23201
23201
 
@@ -23263,11 +23263,8 @@ wrapperTag: div
23263
23263
  </ul>
23264
23264
  </div>
23265
23265
  </div>
23266
- <div class="pf-v5-c-input-group__item">
23267
- <div
23268
- class="pf-v5-c-text-input-group"
23269
- style="width: auto"
23270
- >
23266
+ <div class="pf-v5-c-input-group__item pf-m-fill">
23267
+ <div class="pf-v5-c-text-input-group">
23271
23268
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
23272
23269
  <span class="pf-v5-c-text-input-group__text">
23273
23270
  <span class="pf-v5-c-text-input-group__icon">
@@ -25074,7 +25071,7 @@ wrapperTag: div
25074
25071
  aria-label="search filter"
25075
25072
  role="group"
25076
25073
  >
25077
- <div class="pf-v5-c-input-group__item pf-m-fill">
25074
+ <div class="pf-v5-c-input-group__item">
25078
25075
  <div class="pf-v5-c-select" style="width: 124px">
25079
25076
  <span id="-select-name-label" hidden>Choose one</span>
25080
25077
 
@@ -25142,11 +25139,8 @@ wrapperTag: div
25142
25139
  </ul>
25143
25140
  </div>
25144
25141
  </div>
25145
- <div class="pf-v5-c-input-group__item">
25146
- <div
25147
- class="pf-v5-c-text-input-group"
25148
- style="width: auto"
25149
- >
25142
+ <div class="pf-v5-c-input-group__item pf-m-fill">
25143
+ <div class="pf-v5-c-text-input-group">
25150
25144
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
25151
25145
  <span class="pf-v5-c-text-input-group__text">
25152
25146
  <span class="pf-v5-c-text-input-group__icon">
@@ -26974,7 +26968,7 @@ wrapperTag: div
26974
26968
  aria-label="search filter"
26975
26969
  role="group"
26976
26970
  >
26977
- <div class="pf-v5-c-input-group__item pf-m-fill">
26971
+ <div class="pf-v5-c-input-group__item">
26978
26972
  <div class="pf-v5-c-select" style="width: 124px">
26979
26973
  <span id="-select-name-label" hidden>Choose one</span>
26980
26974
 
@@ -27042,8 +27036,8 @@ wrapperTag: div
27042
27036
  </ul>
27043
27037
  </div>
27044
27038
  </div>
27045
- <div class="pf-v5-c-input-group__item">
27046
- <div class="pf-v5-c-text-input-group" style="width: auto">
27039
+ <div class="pf-v5-c-input-group__item pf-m-fill">
27040
+ <div class="pf-v5-c-text-input-group">
27047
27041
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
27048
27042
  <span class="pf-v5-c-text-input-group__text">
27049
27043
  <span class="pf-v5-c-text-input-group__icon">
@@ -28870,7 +28864,7 @@ wrapperTag: div
28870
28864
  aria-label="search filter"
28871
28865
  role="group"
28872
28866
  >
28873
- <div class="pf-v5-c-input-group__item pf-m-fill">
28867
+ <div class="pf-v5-c-input-group__item">
28874
28868
  <div class="pf-v5-c-select" style="width: 124px">
28875
28869
  <span id="-select-name-label" hidden>Choose one</span>
28876
28870
 
@@ -28938,8 +28932,8 @@ wrapperTag: div
28938
28932
  </ul>
28939
28933
  </div>
28940
28934
  </div>
28941
- <div class="pf-v5-c-input-group__item">
28942
- <div class="pf-v5-c-text-input-group" style="width: auto">
28935
+ <div class="pf-v5-c-input-group__item pf-m-fill">
28936
+ <div class="pf-v5-c-text-input-group">
28943
28937
  <div class="pf-v5-c-text-input-group__main pf-m-icon">
28944
28938
  <span class="pf-v5-c-text-input-group__text">
28945
28939
  <span class="pf-v5-c-text-input-group__icon">