@patternfly/patternfly 5.0.0-alpha.30 → 5.0.0-alpha.31

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 +11 -4
  2. package/components/Toolbar/toolbar.scss +11 -5
  3. package/docs/components/Toolbar/examples/Toolbar.md +5 -5
  4. package/docs/demos/DataList/examples/DataList.md +2 -2
  5. package/docs/demos/Masthead/examples/Masthead.md +3 -3
  6. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +3 -9
  7. package/docs/demos/Table/examples/Table.md +12 -12
  8. package/docs/demos/Toolbar/examples/Toolbar.md +4 -4
  9. package/package.json +1 -1
  10. package/patternfly-no-reset.css +11 -4
  11. package/patternfly.css +11 -4
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/components/Toolbar/toolbar.css CHANGED
@@ -49,26 +49,30 @@
49
49
 
50
50
  .pf-c-toolbar {
51
51
  --pf-c-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--100);
52
- --pf-c-toolbar--RowGap: var(--pf-global--spacer--lg);
52
+ --pf-c-toolbar--RowGap--base: var(--pf-global--spacer--lg);
53
+ --pf-c-toolbar--RowGap: var(--pf-c-toolbar--RowGap--base);
53
54
  --pf-c-toolbar--PaddingTop: var(--pf-global--spacer--md);
54
55
  --pf-c-toolbar--PaddingBottom: var(--pf-global--spacer--md);
56
+ --pf-c-toolbar--item--RowGap--base: var(--pf-global--spacer--xs);
55
57
  --pf-c-toolbar__item--Display: block;
56
58
  --pf-c-toolbar__item--MinWidth--base: auto;
57
59
  --pf-c-toolbar__item--AlignSelf: auto;
58
60
  --pf-c-toolbar__group--Display: flex;
59
61
  --pf-c-toolbar__group--AlignItems: baseline;
60
62
  --pf-c-toolbar__group--AlignSelf: auto;
63
+ --pf-c-toolbar__group--RowGap: var(--pf-c-toolbar--item--RowGap--base);
61
64
  --pf-c-toolbar--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
62
65
  --pf-c-toolbar--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
63
66
  --pf-c-toolbar__content--Display: flex;
67
+ --pf-c-toolbar__content--RowGap: var(--pf-c-toolbar--RowGap--base);
64
68
  --pf-c-toolbar__content--PaddingRight: var(--pf-global--spacer--md);
65
69
  --pf-c-toolbar__content--PaddingLeft: var(--pf-global--spacer--md);
66
70
  --pf-c-toolbar__content-section--Display: flex;
67
71
  --pf-c-toolbar__content-section--AlignItems: baseline;
72
+ --pf-c-toolbar__content-section--RowGap: var(--pf-c-toolbar--item--RowGap--base);
68
73
  --pf-c-toolbar--m-page-insets--inset: var(--pf-global--spacer--md);
69
74
  --pf-c-toolbar--m-page-insets--xl--inset: var(--pf-global--spacer--lg);
70
75
  --pf-c-toolbar__expandable-content--Display: grid;
71
- --pf-c-toolbar__expandable-content--PaddingTop: var(--pf-c-toolbar--RowGap);
72
76
  --pf-c-toolbar__expandable-content--PaddingRight: var(--pf-c-toolbar__content--PaddingRight);
73
77
  --pf-c-toolbar__expandable-content--PaddingBottom: var(--pf-global--spacer--md);
74
78
  --pf-c-toolbar__expandable-content--PaddingLeft: var(--pf-c-toolbar__content--PaddingLeft);
@@ -186,6 +190,7 @@
186
190
  .pf-c-toolbar__group {
187
191
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--spacer);
188
192
  --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__group--Display);
193
+ row-gap: var(--pf-c-toolbar__group--RowGap);
189
194
  align-items: var(--pf-c-toolbar__group--AlignItems);
190
195
  align-self: var(--pf-c-toolbar__group--AlignSelf);
191
196
  margin-right: var(--pf-c-toolbar--spacer);
@@ -352,6 +357,7 @@
352
357
  .pf-c-toolbar__content {
353
358
  --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content--Display);
354
359
  position: relative;
360
+ row-gap: var(--pf-c-toolbar__content--RowGap);
355
361
  align-items: center;
356
362
  padding-right: var(--pf-c-toolbar__content--PaddingRight);
357
363
  padding-left: var(--pf-c-toolbar__content--PaddingLeft);
@@ -359,6 +365,7 @@
359
365
 
360
366
  .pf-c-toolbar__content-section {
361
367
  --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content-section--Display);
368
+ row-gap: var(--pf-c-toolbar__content-section--RowGap);
362
369
  align-items: var(--pf-c-toolbar__content-section--AlignItems);
363
370
  width: 100%;
364
371
  }
@@ -368,13 +375,13 @@
368
375
 
369
376
  .pf-c-toolbar__expandable-content {
370
377
  position: absolute;
371
- top: 100%;
378
+ top: calc(100% + var(--pf-c-toolbar__content--RowGap));
372
379
  right: 0;
373
380
  left: 0;
374
381
  z-index: var(--pf-c-toolbar__expandable-content--ZIndex);
375
382
  display: none;
376
383
  width: 100%;
377
- padding: var(--pf-c-toolbar__expandable-content--PaddingTop) var(--pf-c-toolbar__expandable-content--PaddingRight) var(--pf-c-toolbar__expandable-content--PaddingBottom) var(--pf-c-toolbar__expandable-content--PaddingLeft);
384
+ padding: 0 var(--pf-c-toolbar__expandable-content--PaddingRight) var(--pf-c-toolbar__expandable-content--PaddingBottom) var(--pf-c-toolbar__expandable-content--PaddingLeft);
378
385
  background-color: var(--pf-c-toolbar__expandable-content--BackgroundColor);
379
386
  box-shadow: var(--pf-c-toolbar__expandable-content--BoxShadow);
380
387
  }
package/components/Toolbar/toolbar.scss CHANGED
@@ -6,9 +6,11 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
6
6
 
7
7
  .pf-c-toolbar {
8
8
  --pf-c-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--100);
9
- --pf-c-toolbar--RowGap: var(--pf-global--spacer--lg);
9
+ --pf-c-toolbar--RowGap--base: var(--pf-global--spacer--lg); // row-gap between toolbar content elements
10
+ --pf-c-toolbar--RowGap: var(--pf-c-toolbar--RowGap--base);
10
11
  --pf-c-toolbar--PaddingTop: var(--pf-global--spacer--md);
11
12
  --pf-c-toolbar--PaddingBottom: var(--pf-global--spacer--md);
13
+ --pf-c-toolbar--item--RowGap--base: var(--pf-global--spacer--xs); // shared row-gap for items and groups
12
14
 
13
15
  // Item
14
16
  --pf-c-toolbar__item--Display: block;
@@ -19,6 +21,7 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
19
21
  --pf-c-toolbar__group--Display: flex;
20
22
  --pf-c-toolbar__group--AlignItems: baseline;
21
23
  --pf-c-toolbar__group--AlignSelf: auto;
24
+ --pf-c-toolbar__group--RowGap: var(--pf-c-toolbar--item--RowGap--base);
22
25
 
23
26
  // Sticky
24
27
  --pf-c-toolbar--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
@@ -26,12 +29,14 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
26
29
 
27
30
  // Content
28
31
  --pf-c-toolbar__content--Display: flex;
32
+ --pf-c-toolbar__content--RowGap: var(--pf-c-toolbar--RowGap--base);
29
33
  --pf-c-toolbar__content--PaddingRight: var(--pf-global--spacer--md); // remove at breaking change
30
34
  --pf-c-toolbar__content--PaddingLeft: var(--pf-global--spacer--md); // remove at breaking change
31
35
 
32
36
  // Content section
33
37
  --pf-c-toolbar__content-section--Display: flex;
34
38
  --pf-c-toolbar__content-section--AlignItems: baseline;
39
+ --pf-c-toolbar__content-section--RowGap: var(--pf-c-toolbar--item--RowGap--base);
35
40
 
36
41
  // Insets
37
42
  --pf-c-toolbar--m-page-insets--inset: var(--pf-global--spacer--md); // make this the default inset at breaking change
@@ -39,7 +44,6 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
39
44
 
40
45
  // Expandable content
41
46
  --pf-c-toolbar__expandable-content--Display: grid;
42
- --pf-c-toolbar__expandable-content--PaddingTop: var(--pf-c-toolbar--RowGap);
43
47
  --pf-c-toolbar__expandable-content--PaddingRight: var(--pf-c-toolbar__content--PaddingRight);
44
48
  --pf-c-toolbar__expandable-content--PaddingBottom: var(--pf-global--spacer--md);
45
49
  --pf-c-toolbar__expandable-content--PaddingLeft: var(--pf-c-toolbar__content--PaddingLeft);
@@ -212,6 +216,7 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
212
216
 
213
217
  @include pf-hidden-visible(var(--pf-c-toolbar__group--Display));
214
218
 
219
+ row-gap: var(--pf-c-toolbar__group--RowGap);
215
220
  align-items: var(--pf-c-toolbar__group--AlignItems);
216
221
  align-self: var(--pf-c-toolbar__group--AlignSelf);
217
222
  margin-right: var(--pf-c-toolbar--spacer);
@@ -375,6 +380,7 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
375
380
  @include pf-hidden-visible(var(--pf-c-toolbar__content--Display));
376
381
 
377
382
  position: relative;
383
+ row-gap: var(--pf-c-toolbar__content--RowGap);
378
384
  align-items: center;
379
385
  padding-right: var(--pf-c-toolbar__content--PaddingRight);
380
386
  padding-left: var(--pf-c-toolbar__content--PaddingLeft);
@@ -384,6 +390,7 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
384
390
  .pf-c-toolbar__content-section {
385
391
  @include pf-hidden-visible(var(--pf-c-toolbar__content-section--Display));
386
392
 
393
+ row-gap: var(--pf-c-toolbar__content-section--RowGap);
387
394
  align-items: var(--pf-c-toolbar__content-section--AlignItems);
388
395
  width: 100%;
389
396
 
@@ -395,13 +402,13 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
395
402
  // Expandable content
396
403
  .pf-c-toolbar__expandable-content {
397
404
  position: absolute;
398
- top: 100%;
405
+ top: calc(100% + var(--pf-c-toolbar__content--RowGap));
399
406
  right: 0;
400
407
  left: 0;
401
408
  z-index: var(--pf-c-toolbar__expandable-content--ZIndex);
402
409
  display: none;
403
410
  width: 100%;
404
- padding: var(--pf-c-toolbar__expandable-content--PaddingTop) var(--pf-c-toolbar__expandable-content--PaddingRight) var(--pf-c-toolbar__expandable-content--PaddingBottom) var(--pf-c-toolbar__expandable-content--PaddingLeft);
411
+ padding: 0 var(--pf-c-toolbar__expandable-content--PaddingRight) var(--pf-c-toolbar__expandable-content--PaddingBottom) var(--pf-c-toolbar__expandable-content--PaddingLeft);
405
412
  background-color: var(--pf-c-toolbar__expandable-content--BackgroundColor);
406
413
  box-shadow: var(--pf-c-toolbar__expandable-content--BoxShadow);
407
414
 
@@ -500,7 +507,6 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
500
507
  @each $breakpoint, $breakpoint-value in $pf-c-toolbar--breakpoint-map {
501
508
  $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
502
509
 
503
-
504
510
  @include pf-apply-breakpoint($breakpoint) {
505
511
  // Align right
506
512
  .pf-c-toolbar__item.pf-m-align-right#{$breakpoint-name},
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -523,7 +523,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
523
523
  </li>
524
524
  </ul>
525
525
  </div>
526
- <div class="pf-c-text-input-group" style="width: auto">
526
+ <div class="pf-c-text-input-group">
527
527
  <div class="pf-c-text-input-group__main pf-m-icon">
528
528
  <span class="pf-c-text-input-group__text">
529
529
  <span class="pf-c-text-input-group__icon">
@@ -843,7 +843,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
843
843
  </li>
844
844
  </ul>
845
845
  </div>
846
- <div class="pf-c-text-input-group" style="width: auto">
846
+ <div class="pf-c-text-input-group">
847
847
  <div class="pf-c-text-input-group__main pf-m-icon">
848
848
  <span class="pf-c-text-input-group__text">
849
849
  <span class="pf-c-text-input-group__icon">
@@ -1227,7 +1227,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1227
1227
  </li>
1228
1228
  </ul>
1229
1229
  </div>
1230
- <div class="pf-c-text-input-group" style="width: auto">
1230
+ <div class="pf-c-text-input-group">
1231
1231
  <div class="pf-c-text-input-group__main pf-m-icon">
1232
1232
  <span class="pf-c-text-input-group__text">
1233
1233
  <span class="pf-c-text-input-group__icon">
@@ -1835,7 +1835,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1835
1835
  </li>
1836
1836
  </ul>
1837
1837
  </div>
1838
- <div class="pf-c-text-input-group" style="width: auto">
1838
+ <div class="pf-c-text-input-group">
1839
1839
  <div class="pf-c-text-input-group__main pf-m-icon">
1840
1840
  <span class="pf-c-text-input-group__text">
1841
1841
  <span class="pf-c-text-input-group__icon">
@@ -3962,7 +3962,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3962
3962
  </li>
3963
3963
  </ul>
3964
3964
  </div>
3965
- <div class="pf-c-text-input-group" style="width: auto">
3965
+ <div class="pf-c-text-input-group">
3966
3966
  <div class="pf-c-text-input-group__main pf-m-icon">
3967
3967
  <span class="pf-c-text-input-group__text">
3968
3968
  <span class="pf-c-text-input-group__icon">
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -4055,7 +4055,7 @@ wrapperTag: div
4055
4055
  </li>
4056
4056
  </ul>
4057
4057
  </div>
4058
- <div class="pf-c-text-input-group" style="width: auto">
4058
+ <div class="pf-c-text-input-group">
4059
4059
  <div class="pf-c-text-input-group__main pf-m-icon">
4060
4060
  <span class="pf-c-text-input-group__text">
4061
4061
  <span class="pf-c-text-input-group__icon">
@@ -6128,7 +6128,7 @@ wrapperTag: div
6128
6128
  </li>
6129
6129
  </ul>
6130
6130
  </div>
6131
- <div class="pf-c-text-input-group" style="width: auto">
6131
+ <div class="pf-c-text-input-group">
6132
6132
  <div class="pf-c-text-input-group__main pf-m-icon">
6133
6133
  <span class="pf-c-text-input-group__text">
6134
6134
  <span class="pf-c-text-input-group__icon">
package/docs/demos/Masthead/examples/Masthead.md CHANGED
@@ -765,7 +765,7 @@ wrapperTag: div
765
765
  </li>
766
766
  </ul>
767
767
  </div>
768
- <div class="pf-c-text-input-group" style="width: auto">
768
+ <div class="pf-c-text-input-group">
769
769
  <div class="pf-c-text-input-group__main pf-m-icon">
770
770
  <span class="pf-c-text-input-group__text">
771
771
  <span class="pf-c-text-input-group__icon">
@@ -1099,7 +1099,7 @@ wrapperTag: div
1099
1099
  </li>
1100
1100
  </ul>
1101
1101
  </div>
1102
- <div class="pf-c-text-input-group" style="width: auto">
1102
+ <div class="pf-c-text-input-group">
1103
1103
  <div class="pf-c-text-input-group__main pf-m-icon">
1104
1104
  <span class="pf-c-text-input-group__text">
1105
1105
  <span class="pf-c-text-input-group__icon">
@@ -3712,7 +3712,7 @@ wrapperTag: div
3712
3712
  </li>
3713
3713
  </ul>
3714
3714
  </div>
3715
- <div class="pf-c-text-input-group" style="width: auto">
3715
+ <div class="pf-c-text-input-group">
3716
3716
  <div class="pf-c-text-input-group__main pf-m-icon">
3717
3717
  <span class="pf-c-text-input-group__text">
3718
3718
  <span class="pf-c-text-input-group__icon">
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -983,10 +983,7 @@ wrapperTag: div
983
983
  </li>
984
984
  </ul>
985
985
  </div>
986
- <div
987
- class="pf-c-text-input-group"
988
- style="width: auto"
989
- >
986
+ <div class="pf-c-text-input-group">
990
987
  <div class="pf-c-text-input-group__main pf-m-icon">
991
988
  <span class="pf-c-text-input-group__text">
992
989
  <span class="pf-c-text-input-group__icon">
@@ -2862,10 +2859,7 @@ wrapperTag: div
2862
2859
  </li>
2863
2860
  </ul>
2864
2861
  </div>
2865
- <div
2866
- class="pf-c-text-input-group"
2867
- style="width: auto"
2868
- >
2862
+ <div class="pf-c-text-input-group">
2869
2863
  <div class="pf-c-text-input-group__main pf-m-icon">
2870
2864
  <span class="pf-c-text-input-group__text">
2871
2865
  <span class="pf-c-text-input-group__icon">
@@ -6422,7 +6416,7 @@ wrapperTag: div
6422
6416
  </li>
6423
6417
  </ul>
6424
6418
  </div>
6425
- <div class="pf-c-text-input-group" style="width: auto">
6419
+ <div class="pf-c-text-input-group">
6426
6420
  <div class="pf-c-text-input-group__main pf-m-icon">
6427
6421
  <span class="pf-c-text-input-group__text">
6428
6422
  <span class="pf-c-text-input-group__icon">
package/docs/demos/Table/examples/Table.md CHANGED
@@ -1013,7 +1013,7 @@ wrapperTag: div
1013
1013
  </li>
1014
1014
  </ul>
1015
1015
  </div>
1016
- <div class="pf-c-text-input-group" style="width: auto">
1016
+ <div class="pf-c-text-input-group">
1017
1017
  <div class="pf-c-text-input-group__main pf-m-icon">
1018
1018
  <span class="pf-c-text-input-group__text">
1019
1019
  <span class="pf-c-text-input-group__icon">
@@ -2732,7 +2732,7 @@ wrapperTag: div
2732
2732
  </li>
2733
2733
  </ul>
2734
2734
  </div>
2735
- <div class="pf-c-text-input-group" style="width: auto">
2735
+ <div class="pf-c-text-input-group">
2736
2736
  <div class="pf-c-text-input-group__main pf-m-icon">
2737
2737
  <span class="pf-c-text-input-group__text">
2738
2738
  <span class="pf-c-text-input-group__icon">
@@ -4631,7 +4631,7 @@ wrapperTag: div
4631
4631
  </li>
4632
4632
  </ul>
4633
4633
  </div>
4634
- <div class="pf-c-text-input-group" style="width: auto">
4634
+ <div class="pf-c-text-input-group">
4635
4635
  <div class="pf-c-text-input-group__main pf-m-icon">
4636
4636
  <span class="pf-c-text-input-group__text">
4637
4637
  <span class="pf-c-text-input-group__icon">
@@ -6724,7 +6724,7 @@ wrapperTag: div
6724
6724
  </li>
6725
6725
  </ul>
6726
6726
  </div>
6727
- <div class="pf-c-text-input-group" style="width: auto">
6727
+ <div class="pf-c-text-input-group">
6728
6728
  <div class="pf-c-text-input-group__main pf-m-icon">
6729
6729
  <span class="pf-c-text-input-group__text">
6730
6730
  <span class="pf-c-text-input-group__icon">
@@ -8482,7 +8482,7 @@ wrapperTag: div
8482
8482
  </li>
8483
8483
  </ul>
8484
8484
  </div>
8485
- <div class="pf-c-text-input-group" style="width: auto">
8485
+ <div class="pf-c-text-input-group">
8486
8486
  <div class="pf-c-text-input-group__main pf-m-icon">
8487
8487
  <span class="pf-c-text-input-group__text">
8488
8488
  <span class="pf-c-text-input-group__icon">
@@ -15300,7 +15300,7 @@ wrapperTag: div
15300
15300
  </li>
15301
15301
  </ul>
15302
15302
  </div>
15303
- <div class="pf-c-text-input-group" style="width: auto">
15303
+ <div class="pf-c-text-input-group">
15304
15304
  <div class="pf-c-text-input-group__main pf-m-icon">
15305
15305
  <span class="pf-c-text-input-group__text">
15306
15306
  <span class="pf-c-text-input-group__icon">
@@ -17193,7 +17193,7 @@ wrapperTag: div
17193
17193
  </li>
17194
17194
  </ul>
17195
17195
  </div>
17196
- <div class="pf-c-text-input-group" style="width: auto">
17196
+ <div class="pf-c-text-input-group">
17197
17197
  <div class="pf-c-text-input-group__main pf-m-icon">
17198
17198
  <span class="pf-c-text-input-group__text">
17199
17199
  <span class="pf-c-text-input-group__icon">
@@ -19186,7 +19186,7 @@ wrapperTag: div
19186
19186
  </li>
19187
19187
  </ul>
19188
19188
  </div>
19189
- <div class="pf-c-text-input-group" style="width: auto">
19189
+ <div class="pf-c-text-input-group">
19190
19190
  <div class="pf-c-text-input-group__main pf-m-icon">
19191
19191
  <span class="pf-c-text-input-group__text">
19192
19192
  <span class="pf-c-text-input-group__icon">
@@ -21082,7 +21082,7 @@ wrapperTag: div
21082
21082
  </li>
21083
21083
  </ul>
21084
21084
  </div>
21085
- <div class="pf-c-text-input-group" style="width: auto">
21085
+ <div class="pf-c-text-input-group">
21086
21086
  <div class="pf-c-text-input-group__main pf-m-icon">
21087
21087
  <span class="pf-c-text-input-group__text">
21088
21088
  <span class="pf-c-text-input-group__icon">
@@ -22894,7 +22894,7 @@ wrapperTag: div
22894
22894
  </li>
22895
22895
  </ul>
22896
22896
  </div>
22897
- <div class="pf-c-text-input-group" style="width: auto">
22897
+ <div class="pf-c-text-input-group">
22898
22898
  <div class="pf-c-text-input-group__main pf-m-icon">
22899
22899
  <span class="pf-c-text-input-group__text">
22900
22900
  <span class="pf-c-text-input-group__icon">
@@ -24727,7 +24727,7 @@ wrapperTag: div
24727
24727
  </li>
24728
24728
  </ul>
24729
24729
  </div>
24730
- <div class="pf-c-text-input-group" style="width: auto">
24730
+ <div class="pf-c-text-input-group">
24731
24731
  <div class="pf-c-text-input-group__main pf-m-icon">
24732
24732
  <span class="pf-c-text-input-group__text">
24733
24733
  <span class="pf-c-text-input-group__icon">
@@ -26559,7 +26559,7 @@ wrapperTag: div
26559
26559
  </li>
26560
26560
  </ul>
26561
26561
  </div>
26562
- <div class="pf-c-text-input-group" style="width: auto">
26562
+ <div class="pf-c-text-input-group">
26563
26563
  <div class="pf-c-text-input-group__main pf-m-icon">
26564
26564
  <span class="pf-c-text-input-group__text">
26565
26565
  <span class="pf-c-text-input-group__icon">
package/docs/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -88,7 +88,7 @@ section: components
88
88
  </li>
89
89
  </ul>
90
90
  </div>
91
- <div class="pf-c-text-input-group" style="width: auto">
91
+ <div class="pf-c-text-input-group">
92
92
  <div class="pf-c-text-input-group__main pf-m-icon">
93
93
  <span class="pf-c-text-input-group__text">
94
94
  <span class="pf-c-text-input-group__icon">
@@ -1336,7 +1336,7 @@ section: components
1336
1336
  </li>
1337
1337
  </ul>
1338
1338
  </div>
1339
- <div class="pf-c-text-input-group" style="width: auto">
1339
+ <div class="pf-c-text-input-group">
1340
1340
  <div class="pf-c-text-input-group__main pf-m-icon">
1341
1341
  <span class="pf-c-text-input-group__text">
1342
1342
  <span class="pf-c-text-input-group__icon">
@@ -2031,7 +2031,7 @@ section: components
2031
2031
  </li>
2032
2032
  </ul>
2033
2033
  </div>
2034
- <div class="pf-c-text-input-group" style="width: auto">
2034
+ <div class="pf-c-text-input-group">
2035
2035
  <div class="pf-c-text-input-group__main pf-m-icon">
2036
2036
  <span class="pf-c-text-input-group__text">
2037
2037
  <span class="pf-c-text-input-group__icon">
@@ -4357,7 +4357,7 @@ section: components
4357
4357
  </li>
4358
4358
  </ul>
4359
4359
  </div>
4360
- <div class="pf-c-text-input-group" style="width: auto">
4360
+ <div class="pf-c-text-input-group">
4361
4361
  <div class="pf-c-text-input-group__main pf-m-icon">
4362
4362
  <span class="pf-c-text-input-group__text">
4363
4363
  <span class="pf-c-text-input-group__icon">
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": "5.0.0-alpha.30",
4
+ "version": "5.0.0-alpha.31",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -11199,26 +11199,30 @@ label.pf-c-check, .pf-c-check__label,
11199
11199
 
11200
11200
  .pf-c-toolbar {
11201
11201
  --pf-c-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--100);
11202
- --pf-c-toolbar--RowGap: var(--pf-global--spacer--lg);
11202
+ --pf-c-toolbar--RowGap--base: var(--pf-global--spacer--lg);
11203
+ --pf-c-toolbar--RowGap: var(--pf-c-toolbar--RowGap--base);
11203
11204
  --pf-c-toolbar--PaddingTop: var(--pf-global--spacer--md);
11204
11205
  --pf-c-toolbar--PaddingBottom: var(--pf-global--spacer--md);
11206
+ --pf-c-toolbar--item--RowGap--base: var(--pf-global--spacer--xs);
11205
11207
  --pf-c-toolbar__item--Display: block;
11206
11208
  --pf-c-toolbar__item--MinWidth--base: auto;
11207
11209
  --pf-c-toolbar__item--AlignSelf: auto;
11208
11210
  --pf-c-toolbar__group--Display: flex;
11209
11211
  --pf-c-toolbar__group--AlignItems: baseline;
11210
11212
  --pf-c-toolbar__group--AlignSelf: auto;
11213
+ --pf-c-toolbar__group--RowGap: var(--pf-c-toolbar--item--RowGap--base);
11211
11214
  --pf-c-toolbar--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
11212
11215
  --pf-c-toolbar--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
11213
11216
  --pf-c-toolbar__content--Display: flex;
11217
+ --pf-c-toolbar__content--RowGap: var(--pf-c-toolbar--RowGap--base);
11214
11218
  --pf-c-toolbar__content--PaddingRight: var(--pf-global--spacer--md);
11215
11219
  --pf-c-toolbar__content--PaddingLeft: var(--pf-global--spacer--md);
11216
11220
  --pf-c-toolbar__content-section--Display: flex;
11217
11221
  --pf-c-toolbar__content-section--AlignItems: baseline;
11222
+ --pf-c-toolbar__content-section--RowGap: var(--pf-c-toolbar--item--RowGap--base);
11218
11223
  --pf-c-toolbar--m-page-insets--inset: var(--pf-global--spacer--md);
11219
11224
  --pf-c-toolbar--m-page-insets--xl--inset: var(--pf-global--spacer--lg);
11220
11225
  --pf-c-toolbar__expandable-content--Display: grid;
11221
- --pf-c-toolbar__expandable-content--PaddingTop: var(--pf-c-toolbar--RowGap);
11222
11226
  --pf-c-toolbar__expandable-content--PaddingRight: var(--pf-c-toolbar__content--PaddingRight);
11223
11227
  --pf-c-toolbar__expandable-content--PaddingBottom: var(--pf-global--spacer--md);
11224
11228
  --pf-c-toolbar__expandable-content--PaddingLeft: var(--pf-c-toolbar__content--PaddingLeft);
@@ -11336,6 +11340,7 @@ label.pf-c-check, .pf-c-check__label,
11336
11340
  .pf-c-toolbar__group {
11337
11341
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--spacer);
11338
11342
  --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__group--Display);
11343
+ row-gap: var(--pf-c-toolbar__group--RowGap);
11339
11344
  align-items: var(--pf-c-toolbar__group--AlignItems);
11340
11345
  align-self: var(--pf-c-toolbar__group--AlignSelf);
11341
11346
  margin-right: var(--pf-c-toolbar--spacer);
@@ -11502,6 +11507,7 @@ label.pf-c-check, .pf-c-check__label,
11502
11507
  .pf-c-toolbar__content {
11503
11508
  --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content--Display);
11504
11509
  position: relative;
11510
+ row-gap: var(--pf-c-toolbar__content--RowGap);
11505
11511
  align-items: center;
11506
11512
  padding-right: var(--pf-c-toolbar__content--PaddingRight);
11507
11513
  padding-left: var(--pf-c-toolbar__content--PaddingLeft);
@@ -11509,6 +11515,7 @@ label.pf-c-check, .pf-c-check__label,
11509
11515
 
11510
11516
  .pf-c-toolbar__content-section {
11511
11517
  --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content-section--Display);
11518
+ row-gap: var(--pf-c-toolbar__content-section--RowGap);
11512
11519
  align-items: var(--pf-c-toolbar__content-section--AlignItems);
11513
11520
  width: 100%;
11514
11521
  }
@@ -11518,13 +11525,13 @@ label.pf-c-check, .pf-c-check__label,
11518
11525
 
11519
11526
  .pf-c-toolbar__expandable-content {
11520
11527
  position: absolute;
11521
- top: 100%;
11528
+ top: calc(100% + var(--pf-c-toolbar__content--RowGap));
11522
11529
  right: 0;
11523
11530
  left: 0;
11524
11531
  z-index: var(--pf-c-toolbar__expandable-content--ZIndex);
11525
11532
  display: none;
11526
11533
  width: 100%;
11527
- padding: var(--pf-c-toolbar__expandable-content--PaddingTop) var(--pf-c-toolbar__expandable-content--PaddingRight) var(--pf-c-toolbar__expandable-content--PaddingBottom) var(--pf-c-toolbar__expandable-content--PaddingLeft);
11534
+ padding: 0 var(--pf-c-toolbar__expandable-content--PaddingRight) var(--pf-c-toolbar__expandable-content--PaddingBottom) var(--pf-c-toolbar__expandable-content--PaddingLeft);
11528
11535
  background-color: var(--pf-c-toolbar__expandable-content--BackgroundColor);
11529
11536
  box-shadow: var(--pf-c-toolbar__expandable-content--BoxShadow);
11530
11537
  }
package/patternfly.css CHANGED
@@ -11322,26 +11322,30 @@ label.pf-c-check, .pf-c-check__label,
11322
11322
 
11323
11323
  .pf-c-toolbar {
11324
11324
  --pf-c-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--100);
11325
- --pf-c-toolbar--RowGap: var(--pf-global--spacer--lg);
11325
+ --pf-c-toolbar--RowGap--base: var(--pf-global--spacer--lg);
11326
+ --pf-c-toolbar--RowGap: var(--pf-c-toolbar--RowGap--base);
11326
11327
  --pf-c-toolbar--PaddingTop: var(--pf-global--spacer--md);
11327
11328
  --pf-c-toolbar--PaddingBottom: var(--pf-global--spacer--md);
11329
+ --pf-c-toolbar--item--RowGap--base: var(--pf-global--spacer--xs);
11328
11330
  --pf-c-toolbar__item--Display: block;
11329
11331
  --pf-c-toolbar__item--MinWidth--base: auto;
11330
11332
  --pf-c-toolbar__item--AlignSelf: auto;
11331
11333
  --pf-c-toolbar__group--Display: flex;
11332
11334
  --pf-c-toolbar__group--AlignItems: baseline;
11333
11335
  --pf-c-toolbar__group--AlignSelf: auto;
11336
+ --pf-c-toolbar__group--RowGap: var(--pf-c-toolbar--item--RowGap--base);
11334
11337
  --pf-c-toolbar--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
11335
11338
  --pf-c-toolbar--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
11336
11339
  --pf-c-toolbar__content--Display: flex;
11340
+ --pf-c-toolbar__content--RowGap: var(--pf-c-toolbar--RowGap--base);
11337
11341
  --pf-c-toolbar__content--PaddingRight: var(--pf-global--spacer--md);
11338
11342
  --pf-c-toolbar__content--PaddingLeft: var(--pf-global--spacer--md);
11339
11343
  --pf-c-toolbar__content-section--Display: flex;
11340
11344
  --pf-c-toolbar__content-section--AlignItems: baseline;
11345
+ --pf-c-toolbar__content-section--RowGap: var(--pf-c-toolbar--item--RowGap--base);
11341
11346
  --pf-c-toolbar--m-page-insets--inset: var(--pf-global--spacer--md);
11342
11347
  --pf-c-toolbar--m-page-insets--xl--inset: var(--pf-global--spacer--lg);
11343
11348
  --pf-c-toolbar__expandable-content--Display: grid;
11344
- --pf-c-toolbar__expandable-content--PaddingTop: var(--pf-c-toolbar--RowGap);
11345
11349
  --pf-c-toolbar__expandable-content--PaddingRight: var(--pf-c-toolbar__content--PaddingRight);
11346
11350
  --pf-c-toolbar__expandable-content--PaddingBottom: var(--pf-global--spacer--md);
11347
11351
  --pf-c-toolbar__expandable-content--PaddingLeft: var(--pf-c-toolbar__content--PaddingLeft);
@@ -11459,6 +11463,7 @@ label.pf-c-check, .pf-c-check__label,
11459
11463
  .pf-c-toolbar__group {
11460
11464
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--spacer);
11461
11465
  --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__group--Display);
11466
+ row-gap: var(--pf-c-toolbar__group--RowGap);
11462
11467
  align-items: var(--pf-c-toolbar__group--AlignItems);
11463
11468
  align-self: var(--pf-c-toolbar__group--AlignSelf);
11464
11469
  margin-right: var(--pf-c-toolbar--spacer);
@@ -11625,6 +11630,7 @@ label.pf-c-check, .pf-c-check__label,
11625
11630
  .pf-c-toolbar__content {
11626
11631
  --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content--Display);
11627
11632
  position: relative;
11633
+ row-gap: var(--pf-c-toolbar__content--RowGap);
11628
11634
  align-items: center;
11629
11635
  padding-right: var(--pf-c-toolbar__content--PaddingRight);
11630
11636
  padding-left: var(--pf-c-toolbar__content--PaddingLeft);
@@ -11632,6 +11638,7 @@ label.pf-c-check, .pf-c-check__label,
11632
11638
 
11633
11639
  .pf-c-toolbar__content-section {
11634
11640
  --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content-section--Display);
11641
+ row-gap: var(--pf-c-toolbar__content-section--RowGap);
11635
11642
  align-items: var(--pf-c-toolbar__content-section--AlignItems);
11636
11643
  width: 100%;
11637
11644
  }
@@ -11641,13 +11648,13 @@ label.pf-c-check, .pf-c-check__label,
11641
11648
 
11642
11649
  .pf-c-toolbar__expandable-content {
11643
11650
  position: absolute;
11644
- top: 100%;
11651
+ top: calc(100% + var(--pf-c-toolbar__content--RowGap));
11645
11652
  right: 0;
11646
11653
  left: 0;
11647
11654
  z-index: var(--pf-c-toolbar__expandable-content--ZIndex);
11648
11655
  display: none;
11649
11656
  width: 100%;
11650
- padding: var(--pf-c-toolbar__expandable-content--PaddingTop) var(--pf-c-toolbar__expandable-content--PaddingRight) var(--pf-c-toolbar__expandable-content--PaddingBottom) var(--pf-c-toolbar__expandable-content--PaddingLeft);
11657
+ padding: 0 var(--pf-c-toolbar__expandable-content--PaddingRight) var(--pf-c-toolbar__expandable-content--PaddingBottom) var(--pf-c-toolbar__expandable-content--PaddingLeft);
11651
11658
  background-color: var(--pf-c-toolbar__expandable-content--BackgroundColor);
11652
11659
  box-shadow: var(--pf-c-toolbar__expandable-content--BoxShadow);
11653
11660
  }