@patternfly/patternfly 5.0.0-alpha.5 → 5.0.0-alpha.6

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 (13) hide show
  1. package/components/Toolbar/toolbar.css +30 -2
  2. package/components/Toolbar/toolbar.scss +37 -3
  3. package/docs/components/Toolbar/examples/Toolbar.md +19 -16
  4. package/docs/demos/DataList/examples/DataList.md +2 -4
  5. package/docs/demos/Masthead/examples/Masthead.md +3 -6
  6. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +9 -6
  7. package/docs/demos/Table/examples/Table.md +11 -22
  8. package/docs/demos/Toolbar/examples/Toolbar.md +1589 -9
  9. package/package.json +1 -1
  10. package/patternfly-no-reset.css +30 -2
  11. package/patternfly.css +30 -2
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/components/Toolbar/toolbar.css CHANGED
@@ -54,13 +54,17 @@
54
54
  --pf-c-toolbar--PaddingBottom: var(--pf-global--spacer--md);
55
55
  --pf-c-toolbar__item--Display: block;
56
56
  --pf-c-toolbar__item--MinWidth--base: auto;
57
+ --pf-c-toolbar__item--AlignSelf: auto;
57
58
  --pf-c-toolbar__group--Display: flex;
59
+ --pf-c-toolbar__group--AlignItems: baseline;
60
+ --pf-c-toolbar__group--AlignSelf: auto;
58
61
  --pf-c-toolbar--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
59
62
  --pf-c-toolbar--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
60
63
  --pf-c-toolbar__content--Display: flex;
61
64
  --pf-c-toolbar__content--PaddingRight: var(--pf-global--spacer--md);
62
65
  --pf-c-toolbar__content--PaddingLeft: var(--pf-global--spacer--md);
63
66
  --pf-c-toolbar__content-section--Display: flex;
67
+ --pf-c-toolbar__content-section--AlignItems: baseline;
64
68
  --pf-c-toolbar--m-page-insets--inset: var(--pf-global--spacer--md);
65
69
  --pf-c-toolbar--m-page-insets--xl--inset: var(--pf-global--spacer--lg);
66
70
  --pf-c-toolbar__expandable-content--Display: grid;
@@ -182,9 +186,22 @@
182
186
  .pf-c-toolbar__group {
183
187
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--spacer);
184
188
  --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__group--Display);
185
- align-items: center;
189
+ align-items: var(--pf-c-toolbar__group--AlignItems);
190
+ align-self: var(--pf-c-toolbar__group--AlignSelf);
186
191
  margin-right: var(--pf-c-toolbar--spacer);
187
192
  }
193
+ .pf-c-toolbar__group.pf-m-align-items-center {
194
+ align-items: center;
195
+ }
196
+ .pf-c-toolbar__group.pf-m-align-items-baseline {
197
+ align-items: baseline;
198
+ }
199
+ .pf-c-toolbar__group.pf-m-align-self-center {
200
+ align-self: center;
201
+ }
202
+ .pf-c-toolbar__group.pf-m-align-self-baseline {
203
+ align-self: baseline;
204
+ }
188
205
  .pf-c-toolbar__group.pf-m-button-group {
189
206
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-button-group--spacer);
190
207
  }
@@ -225,6 +242,7 @@
225
242
  --pf-c-toolbar__item--Width--base: var(--pf-c-toolbar__item--Width);
226
243
  --pf-c-toolbar__item--MinWidth--base: var(--pf-c-toolbar__item--MinWidth);
227
244
  --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__item--Display);
245
+ align-self: var(--pf-c-toolbar__item--AlignSelf);
228
246
  width: var(--pf-c-toolbar__item--Width--base);
229
247
  min-width: var(--pf-c-toolbar__item--MinWidth--base);
230
248
  margin-right: var(--pf-c-toolbar--spacer);
@@ -279,6 +297,12 @@
279
297
  --pf-c-toolbar__item--MinWidth--base: var(--pf-c-toolbar__item--MinWidth-on-2xl, var(--pf-c-toolbar__item--MinWidth-on-xl, var(--pf-c-toolbar__item--MinWidth-on-lg, var(--pf-c-toolbar__item--MinWidth-on-md, var(--pf-c-toolbar__item--MinWidth-on-sm, var(--pf-c-toolbar__item--MinWidth))))));
280
298
  }
281
299
  }
300
+ .pf-c-toolbar__item.pf-m-align-self-center {
301
+ align-self: center;
302
+ }
303
+ .pf-c-toolbar__item.pf-m-align-self-baseline {
304
+ align-self: baseline;
305
+ }
282
306
  .pf-c-toolbar__item.pf-m-overflow-menu {
283
307
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__item--m-overflow-menu--spacer);
284
308
  }
@@ -323,20 +347,24 @@
323
347
  .pf-c-toolbar__content,
324
348
  .pf-c-toolbar__content-section {
325
349
  flex-wrap: wrap;
326
- align-items: center;
327
350
  }
328
351
 
329
352
  .pf-c-toolbar__content {
330
353
  --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content--Display);
331
354
  position: relative;
355
+ align-items: center;
332
356
  padding-right: var(--pf-c-toolbar__content--PaddingRight);
333
357
  padding-left: var(--pf-c-toolbar__content--PaddingLeft);
334
358
  }
335
359
 
336
360
  .pf-c-toolbar__content-section {
337
361
  --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content-section--Display);
362
+ align-items: var(--pf-c-toolbar__content-section--AlignItems);
338
363
  width: 100%;
339
364
  }
365
+ .pf-c-toolbar__content-section.pf-m-align-items-center {
366
+ align-items: center;
367
+ }
340
368
 
341
369
  .pf-c-toolbar__expandable-content {
342
370
  position: absolute;
package/components/Toolbar/toolbar.scss CHANGED
@@ -13,9 +13,12 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
13
13
  // Item
14
14
  --pf-c-toolbar__item--Display: block;
15
15
  --pf-c-toolbar__item--MinWidth--base: auto;
16
+ --pf-c-toolbar__item--AlignSelf: auto;
16
17
 
17
18
  // Group
18
19
  --pf-c-toolbar__group--Display: flex;
20
+ --pf-c-toolbar__group--AlignItems: baseline;
21
+ --pf-c-toolbar__group--AlignSelf: auto;
19
22
 
20
23
  // Sticky
21
24
  --pf-c-toolbar--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
@@ -28,6 +31,7 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
28
31
 
29
32
  // Content section
30
33
  --pf-c-toolbar__content-section--Display: flex;
34
+ --pf-c-toolbar__content-section--AlignItems: baseline;
31
35
 
32
36
  // Insets
33
37
  --pf-c-toolbar--m-page-insets--inset: var(--pf-global--spacer--md); // make this the default inset at breaking change
@@ -208,9 +212,26 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
208
212
 
209
213
  @include pf-hidden-visible(var(--pf-c-toolbar__group--Display));
210
214
 
211
- align-items: center;
215
+ align-items: var(--pf-c-toolbar__group--AlignItems);
216
+ align-self: var(--pf-c-toolbar__group--AlignSelf);
212
217
  margin-right: var(--pf-c-toolbar--spacer);
213
218
 
219
+ &.pf-m-align-items-center {
220
+ align-items: center;
221
+ }
222
+
223
+ &.pf-m-align-items-baseline {
224
+ align-items: baseline;
225
+ }
226
+
227
+ &.pf-m-align-self-center {
228
+ align-self: center;
229
+ }
230
+
231
+ &.pf-m-align-self-baseline {
232
+ align-self: baseline;
233
+ }
234
+
214
235
  // Button group
215
236
  &.pf-m-button-group {
216
237
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-button-group--spacer);
@@ -270,10 +291,19 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
270
291
  @include pf-build-css-variable-stack("--pf-c-toolbar__item--MinWidth--base", "--pf-c-toolbar__item--MinWidth", $pf-c-toolbar--breakpoint-map);
271
292
  @include pf-hidden-visible(var(--pf-c-toolbar__item--Display));
272
293
 
294
+ align-self: var(--pf-c-toolbar__item--AlignSelf);
273
295
  width: var(--pf-c-toolbar__item--Width--base);
274
296
  min-width: var(--pf-c-toolbar__item--MinWidth--base);
275
297
  margin-right: var(--pf-c-toolbar--spacer);
276
298
 
299
+ &.pf-m-align-self-center {
300
+ align-self: center;
301
+ }
302
+
303
+ &.pf-m-align-self-baseline {
304
+ align-self: baseline;
305
+ }
306
+
277
307
  // Overflow menu
278
308
  &.pf-m-overflow-menu {
279
309
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__item--m-overflow-menu--spacer);
@@ -329,7 +359,6 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
329
359
  }
330
360
  }
331
361
 
332
-
333
362
  .pf-c-toolbar__expand-all-icon {
334
363
  display: inline-block;
335
364
  transition: var(--pf-c-toolbar__expand-all-icon--Transition);
@@ -339,7 +368,6 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
339
368
  .pf-c-toolbar__content,
340
369
  .pf-c-toolbar__content-section {
341
370
  flex-wrap: wrap;
342
- align-items: center;
343
371
  }
344
372
 
345
373
  // Content
@@ -347,6 +375,7 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
347
375
  @include pf-hidden-visible(var(--pf-c-toolbar__content--Display));
348
376
 
349
377
  position: relative;
378
+ align-items: center;
350
379
  padding-right: var(--pf-c-toolbar__content--PaddingRight);
351
380
  padding-left: var(--pf-c-toolbar__content--PaddingLeft);
352
381
  }
@@ -355,7 +384,12 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
355
384
  .pf-c-toolbar__content-section {
356
385
  @include pf-hidden-visible(var(--pf-c-toolbar__content-section--Display));
357
386
 
387
+ align-items: var(--pf-c-toolbar__content-section--AlignItems);
358
388
  width: 100%;
389
+
390
+ &.pf-m-align-items-center {
391
+ align-items: center;
392
+ }
359
393
  }
360
394
 
361
395
  // Expandable content
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -26,12 +26,16 @@ Toolbar relies on groups (`.pf-c-toolbar__group`) and items (`.pf-c-toolbar__ite
26
26
 
27
27
  ### Modifiers
28
28
 
29
- | Class | Applied to | Outcome |
30
- | ------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
31
- | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
32
- | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
33
- | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
34
- | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
29
+ | Class | Applied to | Outcome |
30
+ | ------------------------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
31
+ | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
32
+ | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
33
+ | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
34
+ | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
35
+ | `.pf-m-align-items-center` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies toolbar element to vertically align children to center. |
36
+ | `.pf-m-align-items-baseline` | `.pf-c-toolbar__group` | Modifies toolbar group to vertically align children to baseline. |
37
+ | `.pf-m-align-self-center` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to center. |
38
+ | `.pf-m-align-self-baseline` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to baseline. |
35
39
 
36
40
  ### Special notes
37
41
 
@@ -489,7 +493,6 @@ In some instances, it may be necessary to adjust spacing explicitly where items
489
493
  role="listbox"
490
494
  aria-labelledby="toolbar-toggle-group-example-select-name-label"
491
495
  hidden
492
- style="width: 175px"
493
496
  >
494
497
  <li role="presentation">
495
498
  <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -520,7 +523,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
520
523
  </li>
521
524
  </ul>
522
525
  </div>
523
- <div class="pf-c-text-input-group">
526
+ <div class="pf-c-text-input-group" style="width: auto">
524
527
  <div class="pf-c-text-input-group__main pf-m-icon">
525
528
  <span class="pf-c-text-input-group__text">
526
529
  <span class="pf-c-text-input-group__icon">
@@ -810,7 +813,6 @@ In some instances, it may be necessary to adjust spacing explicitly where items
810
813
  role="listbox"
811
814
  aria-labelledby="toolbar-toggle-group-collapsed-example-select-name-label"
812
815
  hidden
813
- style="width: 175px"
814
816
  >
815
817
  <li role="presentation">
816
818
  <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -841,7 +843,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
841
843
  </li>
842
844
  </ul>
843
845
  </div>
844
- <div class="pf-c-text-input-group">
846
+ <div class="pf-c-text-input-group" style="width: auto">
845
847
  <div class="pf-c-text-input-group__main pf-m-icon">
846
848
  <span class="pf-c-text-input-group__text">
847
849
  <span class="pf-c-text-input-group__icon">
@@ -1192,7 +1194,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1192
1194
  role="listbox"
1193
1195
  aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label"
1194
1196
  hidden
1195
- style="width: 175px"
1196
1197
  >
1197
1198
  <li role="presentation">
1198
1199
  <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -1223,7 +1224,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1223
1224
  </li>
1224
1225
  </ul>
1225
1226
  </div>
1226
- <div class="pf-c-text-input-group">
1227
+ <div class="pf-c-text-input-group" style="width: auto">
1227
1228
  <div class="pf-c-text-input-group__main pf-m-icon">
1228
1229
  <span class="pf-c-text-input-group__text">
1229
1230
  <span class="pf-c-text-input-group__icon">
@@ -1774,7 +1775,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1774
1775
  role="listbox"
1775
1776
  aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-name-label"
1776
1777
  hidden
1777
- style="width: 175px"
1778
1778
  >
1779
1779
  <li role="presentation">
1780
1780
  <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -1805,7 +1805,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1805
1805
  </li>
1806
1806
  </ul>
1807
1807
  </div>
1808
- <div class="pf-c-text-input-group">
1808
+ <div class="pf-c-text-input-group" style="width: auto">
1809
1809
  <div class="pf-c-text-input-group__main pf-m-icon">
1810
1810
  <span class="pf-c-text-input-group__text">
1811
1811
  <span class="pf-c-text-input-group__icon">
@@ -3842,7 +3842,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3842
3842
  role="listbox"
3843
3843
  aria-labelledby="toolbar-expanded-elements-example-select-name-label"
3844
3844
  hidden
3845
- style="width: 175px"
3846
3845
  >
3847
3846
  <li role="presentation">
3848
3847
  <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -3873,7 +3872,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3873
3872
  </li>
3874
3873
  </ul>
3875
3874
  </div>
3876
- <div class="pf-c-text-input-group">
3875
+ <div class="pf-c-text-input-group" style="width: auto">
3877
3876
  <div class="pf-c-text-input-group__main pf-m-icon">
3878
3877
  <span class="pf-c-text-input-group__text">
3879
3878
  <span class="pf-c-text-input-group__icon">
@@ -4219,6 +4218,10 @@ As the toolbar component is a hybrid layout and component, some of its elements
4219
4218
  | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4220
4219
  | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4221
4220
  | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4221
+ | `.pf-m-align-items-center` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies toolbar element to vertically align children to center. |
4222
+ | `.pf-m-align-items-baseline` | `.pf-c-toolbar__group` | Modifies toolbar group to vertically align children to baseline. |
4223
+ | `.pf-m-align-self-center` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to center. |
4224
+ | `.pf-m-align-self-baseline` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to baseline. |
4222
4225
  | `.pf-m-label` | `.pf-c-toolbar__item` | Modifies toolbar item to label. |
4223
4226
  | `.pf-m-chip-container` | `.pf-c-toolbar__content`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
4224
4227
  | `.pf-m-overflow-container` | `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation. |
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -3995,7 +3995,6 @@ wrapperTag: div
3995
3995
  role="listbox"
3996
3996
  aria-labelledby="-select-name-label"
3997
3997
  hidden
3998
- style="width: 175px"
3999
3998
  >
4000
3999
  <li role="presentation">
4001
4000
  <button
@@ -4035,7 +4034,7 @@ wrapperTag: div
4035
4034
  </li>
4036
4035
  </ul>
4037
4036
  </div>
4038
- <div class="pf-c-text-input-group">
4037
+ <div class="pf-c-text-input-group" style="width: auto">
4039
4038
  <div class="pf-c-text-input-group__main pf-m-icon">
4040
4039
  <span class="pf-c-text-input-group__text">
4041
4040
  <span class="pf-c-text-input-group__icon">
@@ -6039,7 +6038,6 @@ wrapperTag: div
6039
6038
  role="listbox"
6040
6039
  aria-labelledby="-select-name-label"
6041
6040
  hidden
6042
- style="width: 175px"
6043
6041
  >
6044
6042
  <li role="presentation">
6045
6043
  <button
@@ -6079,7 +6077,7 @@ wrapperTag: div
6079
6077
  </li>
6080
6078
  </ul>
6081
6079
  </div>
6082
- <div class="pf-c-text-input-group">
6080
+ <div class="pf-c-text-input-group" style="width: auto">
6083
6081
  <div class="pf-c-text-input-group__main pf-m-icon">
6084
6082
  <span class="pf-c-text-input-group__text">
6085
6083
  <span class="pf-c-text-input-group__icon">
package/docs/demos/Masthead/examples/Masthead.md CHANGED
@@ -726,7 +726,6 @@ wrapperTag: div
726
726
  role="listbox"
727
727
  aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
728
728
  hidden
729
- style="width: 175px"
730
729
  >
731
730
  <li role="presentation">
732
731
  <button
@@ -766,7 +765,7 @@ wrapperTag: div
766
765
  </li>
767
766
  </ul>
768
767
  </div>
769
- <div class="pf-c-text-input-group">
768
+ <div class="pf-c-text-input-group" style="width: auto">
770
769
  <div class="pf-c-text-input-group__main pf-m-icon">
771
770
  <span class="pf-c-text-input-group__text">
772
771
  <span class="pf-c-text-input-group__icon">
@@ -1061,7 +1060,6 @@ wrapperTag: div
1061
1060
  role="listbox"
1062
1061
  aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
1063
1062
  hidden
1064
- style="width: 175px"
1065
1063
  >
1066
1064
  <li role="presentation">
1067
1065
  <button
@@ -1101,7 +1099,7 @@ wrapperTag: div
1101
1099
  </li>
1102
1100
  </ul>
1103
1101
  </div>
1104
- <div class="pf-c-text-input-group">
1102
+ <div class="pf-c-text-input-group" style="width: auto">
1105
1103
  <div class="pf-c-text-input-group__main pf-m-icon">
1106
1104
  <span class="pf-c-text-input-group__text">
1107
1105
  <span class="pf-c-text-input-group__icon">
@@ -3678,7 +3676,6 @@ wrapperTag: div
3678
3676
  role="listbox"
3679
3677
  aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
3680
3678
  hidden
3681
- style="width: 175px"
3682
3679
  >
3683
3680
  <li role="presentation">
3684
3681
  <button
@@ -3715,7 +3712,7 @@ wrapperTag: div
3715
3712
  </li>
3716
3713
  </ul>
3717
3714
  </div>
3718
- <div class="pf-c-text-input-group">
3715
+ <div class="pf-c-text-input-group" style="width: auto">
3719
3716
  <div class="pf-c-text-input-group__main pf-m-icon">
3720
3717
  <span class="pf-c-text-input-group__text">
3721
3718
  <span class="pf-c-text-input-group__icon">
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -944,7 +944,6 @@ wrapperTag: div
944
944
  role="listbox"
945
945
  aria-labelledby="primary-detail-expanded-example-drawer-toolbar-select-name-label"
946
946
  hidden
947
- style="width: 175px"
948
947
  >
949
948
  <li role="presentation">
950
949
  <button
@@ -984,7 +983,10 @@ wrapperTag: div
984
983
  </li>
985
984
  </ul>
986
985
  </div>
987
- <div class="pf-c-text-input-group">
986
+ <div
987
+ class="pf-c-text-input-group"
988
+ style="width: auto"
989
+ >
988
990
  <div class="pf-c-text-input-group__main pf-m-icon">
989
991
  <span class="pf-c-text-input-group__text">
990
992
  <span class="pf-c-text-input-group__icon">
@@ -2821,7 +2823,6 @@ wrapperTag: div
2821
2823
  role="listbox"
2822
2824
  aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
2823
2825
  hidden
2824
- style="width: 175px"
2825
2826
  >
2826
2827
  <li role="presentation">
2827
2828
  <button
@@ -2861,7 +2862,10 @@ wrapperTag: div
2861
2862
  </li>
2862
2863
  </ul>
2863
2864
  </div>
2864
- <div class="pf-c-text-input-group">
2865
+ <div
2866
+ class="pf-c-text-input-group"
2867
+ style="width: auto"
2868
+ >
2865
2869
  <div class="pf-c-text-input-group__main pf-m-icon">
2866
2870
  <span class="pf-c-text-input-group__text">
2867
2871
  <span class="pf-c-text-input-group__icon">
@@ -6376,7 +6380,6 @@ wrapperTag: div
6376
6380
  role="listbox"
6377
6381
  aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
6378
6382
  hidden
6379
- style="width: 175px"
6380
6383
  >
6381
6384
  <li role="presentation">
6382
6385
  <button
@@ -6416,7 +6419,7 @@ wrapperTag: div
6416
6419
  </li>
6417
6420
  </ul>
6418
6421
  </div>
6419
- <div class="pf-c-text-input-group">
6422
+ <div class="pf-c-text-input-group" style="width: auto">
6420
6423
  <div class="pf-c-text-input-group__main pf-m-icon">
6421
6424
  <span class="pf-c-text-input-group__text">
6422
6425
  <span class="pf-c-text-input-group__icon">
package/docs/demos/Table/examples/Table.md CHANGED
@@ -971,7 +971,6 @@ wrapperTag: div
971
971
  role="listbox"
972
972
  aria-labelledby="-select-name-label"
973
973
  hidden
974
- style="width: 175px"
975
974
  >
976
975
  <li role="presentation">
977
976
  <button
@@ -1011,7 +1010,7 @@ wrapperTag: div
1011
1010
  </li>
1012
1011
  </ul>
1013
1012
  </div>
1014
- <div class="pf-c-text-input-group">
1013
+ <div class="pf-c-text-input-group" style="width: auto">
1015
1014
  <div class="pf-c-text-input-group__main pf-m-icon">
1016
1015
  <span class="pf-c-text-input-group__text">
1017
1016
  <span class="pf-c-text-input-group__icon">
@@ -2673,7 +2672,6 @@ wrapperTag: div
2673
2672
  role="listbox"
2674
2673
  aria-labelledby="-select-name-label"
2675
2674
  hidden
2676
- style="width: 175px"
2677
2675
  >
2678
2676
  <li role="presentation">
2679
2677
  <button
@@ -2713,7 +2711,7 @@ wrapperTag: div
2713
2711
  </li>
2714
2712
  </ul>
2715
2713
  </div>
2716
- <div class="pf-c-text-input-group">
2714
+ <div class="pf-c-text-input-group" style="width: auto">
2717
2715
  <div class="pf-c-text-input-group__main pf-m-icon">
2718
2716
  <span class="pf-c-text-input-group__text">
2719
2717
  <span class="pf-c-text-input-group__icon">
@@ -4555,7 +4553,6 @@ wrapperTag: div
4555
4553
  role="listbox"
4556
4554
  aria-labelledby="-select-name-label"
4557
4555
  hidden
4558
- style="width: 175px"
4559
4556
  >
4560
4557
  <li role="presentation">
4561
4558
  <button
@@ -4595,7 +4592,7 @@ wrapperTag: div
4595
4592
  </li>
4596
4593
  </ul>
4597
4594
  </div>
4598
- <div class="pf-c-text-input-group">
4595
+ <div class="pf-c-text-input-group" style="width: auto">
4599
4596
  <div class="pf-c-text-input-group__main pf-m-icon">
4600
4597
  <span class="pf-c-text-input-group__text">
4601
4598
  <span class="pf-c-text-input-group__icon">
@@ -6631,7 +6628,6 @@ wrapperTag: div
6631
6628
  role="listbox"
6632
6629
  aria-labelledby="-select-name-label"
6633
6630
  hidden
6634
- style="width: 175px"
6635
6631
  >
6636
6632
  <li role="presentation">
6637
6633
  <button
@@ -6671,7 +6667,7 @@ wrapperTag: div
6671
6667
  </li>
6672
6668
  </ul>
6673
6669
  </div>
6674
- <div class="pf-c-text-input-group">
6670
+ <div class="pf-c-text-input-group" style="width: auto">
6675
6671
  <div class="pf-c-text-input-group__main pf-m-icon">
6676
6672
  <span class="pf-c-text-input-group__text">
6677
6673
  <span class="pf-c-text-input-group__icon">
@@ -8375,7 +8371,6 @@ wrapperTag: div
8375
8371
  role="listbox"
8376
8372
  aria-labelledby="-select-name-label"
8377
8373
  hidden
8378
- style="width: 175px"
8379
8374
  >
8380
8375
  <li role="presentation">
8381
8376
  <button
@@ -8415,7 +8410,7 @@ wrapperTag: div
8415
8410
  </li>
8416
8411
  </ul>
8417
8412
  </div>
8418
- <div class="pf-c-text-input-group">
8413
+ <div class="pf-c-text-input-group" style="width: auto">
8419
8414
  <div class="pf-c-text-input-group__main pf-m-icon">
8420
8415
  <span class="pf-c-text-input-group__text">
8421
8416
  <span class="pf-c-text-input-group__icon">
@@ -15188,7 +15183,6 @@ wrapperTag: div
15188
15183
  role="listbox"
15189
15184
  aria-labelledby="-select-name-label"
15190
15185
  hidden
15191
- style="width: 175px"
15192
15186
  >
15193
15187
  <li role="presentation">
15194
15188
  <button
@@ -15228,7 +15222,7 @@ wrapperTag: div
15228
15222
  </li>
15229
15223
  </ul>
15230
15224
  </div>
15231
- <div class="pf-c-text-input-group">
15225
+ <div class="pf-c-text-input-group" style="width: auto">
15232
15226
  <div class="pf-c-text-input-group__main pf-m-icon">
15233
15227
  <span class="pf-c-text-input-group__text">
15234
15228
  <span class="pf-c-text-input-group__icon">
@@ -17064,7 +17058,6 @@ wrapperTag: div
17064
17058
  role="listbox"
17065
17059
  aria-labelledby="-select-name-label"
17066
17060
  hidden
17067
- style="width: 175px"
17068
17061
  >
17069
17062
  <li role="presentation">
17070
17063
  <button
@@ -17104,7 +17097,7 @@ wrapperTag: div
17104
17097
  </li>
17105
17098
  </ul>
17106
17099
  </div>
17107
- <div class="pf-c-text-input-group">
17100
+ <div class="pf-c-text-input-group" style="width: auto">
17108
17101
  <div class="pf-c-text-input-group__main pf-m-icon">
17109
17102
  <span class="pf-c-text-input-group__text">
17110
17103
  <span class="pf-c-text-input-group__icon">
@@ -19023,7 +19016,6 @@ wrapperTag: div
19023
19016
  role="listbox"
19024
19017
  aria-labelledby="-select-name-label"
19025
19018
  hidden
19026
- style="width: 175px"
19027
19019
  >
19028
19020
  <li role="presentation">
19029
19021
  <button
@@ -19063,7 +19055,7 @@ wrapperTag: div
19063
19055
  </li>
19064
19056
  </ul>
19065
19057
  </div>
19066
- <div class="pf-c-text-input-group">
19058
+ <div class="pf-c-text-input-group" style="width: auto">
19067
19059
  <div class="pf-c-text-input-group__main pf-m-icon">
19068
19060
  <span class="pf-c-text-input-group__text">
19069
19061
  <span class="pf-c-text-input-group__icon">
@@ -20902,7 +20894,6 @@ wrapperTag: div
20902
20894
  role="listbox"
20903
20895
  aria-labelledby="-select-name-label"
20904
20896
  hidden
20905
- style="width: 175px"
20906
20897
  >
20907
20898
  <li role="presentation">
20908
20899
  <button
@@ -20942,7 +20933,7 @@ wrapperTag: div
20942
20933
  </li>
20943
20934
  </ul>
20944
20935
  </div>
20945
- <div class="pf-c-text-input-group">
20936
+ <div class="pf-c-text-input-group" style="width: auto">
20946
20937
  <div class="pf-c-text-input-group__main pf-m-icon">
20947
20938
  <span class="pf-c-text-input-group__text">
20948
20939
  <span class="pf-c-text-input-group__icon">
@@ -22702,7 +22693,6 @@ wrapperTag: div
22702
22693
  role="listbox"
22703
22694
  aria-labelledby="-select-name-label"
22704
22695
  hidden
22705
- style="width: 175px"
22706
22696
  >
22707
22697
  <li role="presentation">
22708
22698
  <button
@@ -22742,7 +22732,7 @@ wrapperTag: div
22742
22732
  </li>
22743
22733
  </ul>
22744
22734
  </div>
22745
- <div class="pf-c-text-input-group">
22735
+ <div class="pf-c-text-input-group" style="width: auto">
22746
22736
  <div class="pf-c-text-input-group__main pf-m-icon">
22747
22737
  <span class="pf-c-text-input-group__text">
22748
22738
  <span class="pf-c-text-input-group__icon">
@@ -24523,7 +24513,6 @@ wrapperTag: div
24523
24513
  role="listbox"
24524
24514
  aria-labelledby="-select-name-label"
24525
24515
  hidden
24526
- style="width: 175px"
24527
24516
  >
24528
24517
  <li role="presentation">
24529
24518
  <button
@@ -24563,7 +24552,7 @@ wrapperTag: div
24563
24552
  </li>
24564
24553
  </ul>
24565
24554
  </div>
24566
- <div class="pf-c-text-input-group">
24555
+ <div class="pf-c-text-input-group" style="width: auto">
24567
24556
  <div class="pf-c-text-input-group__main pf-m-icon">
24568
24557
  <span class="pf-c-text-input-group__text">
24569
24558
  <span class="pf-c-text-input-group__icon">