@patternfly/patternfly 5.0.0-alpha.71 → 5.0.0-alpha.73

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.
@@ -107,9 +107,11 @@
107
107
  --pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor: var(--pf-v5-global--primary-color--200);
108
108
  --pf-v5-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-v5-global--primary-color--100);
109
109
  --pf-v5-c-menu-toggle__button--BackgroundColor: transparent;
110
+ --pf-v5-c-menu-toggle__button--PaddingLeft: var(--pf-v5-global--spacer--sm);
111
+ --pf-v5-c-menu-toggle__button--PaddingRight: var(--pf-v5-global--spacer--sm);
110
112
  --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-global--spacer--sm);
111
113
  --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
112
- --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-v5-global--spacer--md);
114
+ --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-v5-global--spacer--sm);
113
115
  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
114
116
  --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
115
117
  position: relative;
@@ -360,6 +362,8 @@
360
362
  --pf-v5-c-menu-toggle__controls--PaddingLeft: 0;
361
363
  --pf-v5-c-menu-toggle__controls--MarginRight: var(--pf-v5-c-menu-toggle__button__controls--MarginRight);
362
364
  --pf-v5-c-menu-toggle__controls--MarginLeft: var(--pf-v5-c-menu-toggle__button__controls--MarginLeft);
365
+ padding-right: var(--pf-v5-c-menu-toggle__button--PaddingRight);
366
+ padding-left: var(--pf-v5-c-menu-toggle__button--PaddingLeft);
363
367
  color: inherit;
364
368
  background-color: var(--pf-v5-c-menu-toggle__button--BackgroundColor);
365
369
  border: 0;
@@ -152,11 +152,13 @@
152
152
 
153
153
  // Split button, controls, check
154
154
  --#{$menu-toggle}__button--BackgroundColor: transparent;
155
+ --#{$menu-toggle}__button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
156
+ --#{$menu-toggle}__button--PaddingRight: var(--#{$pf-global}--spacer--sm);
155
157
  --#{$menu-toggle}__button__controls--MarginRight: var(--#{$pf-global}--spacer--sm);
156
158
  --#{$menu-toggle}__button__controls--MarginLeft: var(--#{$pf-global}--spacer--sm);
157
159
 
158
160
  // Typeahead
159
- --#{$menu-toggle}--m-typeahead__controls--MarginRight: var(--#{$pf-global}--spacer--md);
161
+ --#{$menu-toggle}--m-typeahead__controls--MarginRight: var(--#{$pf-global}--spacer--sm);
160
162
  --#{$menu-toggle}--m-typeahead__controls--MarginLeft: var(--#{$pf-global}--spacer--sm);
161
163
  --#{$menu-toggle}--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--#{$pf-global}--spacer--sm);
162
164
 
@@ -503,6 +505,8 @@
503
505
  --#{$menu-toggle}__controls--MarginRight: var(--#{$menu-toggle}__button__controls--MarginRight);
504
506
  --#{$menu-toggle}__controls--MarginLeft: var(--#{$menu-toggle}__button__controls--MarginLeft);
505
507
 
508
+ padding-right: var(--#{$menu-toggle}__button--PaddingRight);
509
+ padding-left: var(--#{$menu-toggle}__button--PaddingLeft);
506
510
  color: inherit;
507
511
  background-color: var(--#{$menu-toggle}__button--BackgroundColor);
508
512
  border: 0;
@@ -496,7 +496,7 @@ wrapperTag: div
496
496
 
497
497
  ```
498
498
 
499
- ### Aggregiate status card
499
+ ### Aggregate status card
500
500
 
501
501
  ```html
502
502
  <div class="pf-v5-l-grid pf-m-gutter">
@@ -544,7 +544,7 @@ wrapperTag: div
544
544
  <h2 class="pf-v5-c-card__title-text">10 Hosts</h2>
545
545
  </div>
546
546
  <div class="pf-v5-c-card__body">
547
- <div class="pf-v5-l-flex pf-m-inline-flex">
547
+ <div class="pf-v5-l-flex pf-m-inline-flex pf-m-space-items-md">
548
548
  <div class="pf-v5-l-flex pf-m-space-items-sm">
549
549
  <div class="pf-v5-l-flex__item">
550
550
  <i
@@ -576,7 +576,7 @@ wrapperTag: div
576
576
  <h2 class="pf-v5-c-card__title-text">50 Hosts</h2>
577
577
  </div>
578
578
  <div class="pf-v5-c-card__body">
579
- <div class="pf-v5-l-flex pf-m-inline-flex">
579
+ <div class="pf-v5-l-flex pf-m-inline-flex pf-m-space-items-md">
580
580
  <div class="pf-v5-l-flex pf-m-space-items-sm">
581
581
  <div class="pf-v5-l-flex__item">
582
582
  <i
@@ -608,7 +608,7 @@ wrapperTag: div
608
608
  <h2 class="pf-v5-c-card__title-text">12 Hosts</h2>
609
609
  </div>
610
610
  <div class="pf-v5-c-card__body">
611
- <div class="pf-v5-l-flex pf-m-inline-flex">
611
+ <div class="pf-v5-l-flex pf-m-inline-flex pf-m-space-items-md">
612
612
  <div class="pf-v5-l-flex pf-m-space-items-sm">
613
613
  <div class="pf-v5-l-flex__item">
614
614
  <i
@@ -649,8 +649,10 @@ wrapperTag: div
649
649
  >13 Hosts</h2>
650
650
  </div>
651
651
  <div class="pf-v5-c-card__body">
652
- <div class="pf-v5-l-flex pf-m-justify-content-space-around">
653
- <div class="pf-v5-l-flex">
652
+ <div
653
+ class="pf-v5-l-flex pf-m-justify-content-center pf-m-space-items-md"
654
+ >
655
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
654
656
  <div class="pf-v5-l-flex__item">
655
657
  <i
656
658
  class="fas fa-times-circle pf-v5-u-danger-color-100"
@@ -662,7 +664,7 @@ wrapperTag: div
662
664
  <span>subtitle</span>
663
665
  </div>
664
666
  </div>
665
- <div class="pf-v5-l-flex pf-m-justify-content-space-around">
667
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
666
668
  <div class="pf-v5-l-flex__item">
667
669
  <i
668
670
  class="fas fa-exclamation-triangle pf-v5-u-warning-color-100"
@@ -682,8 +684,10 @@ wrapperTag: div
682
684
  <h2 class="pf-v5-c-card__title-text">3 Hosts</h2>
683
685
  </div>
684
686
  <div class="pf-v5-c-card__body">
685
- <div class="pf-v5-l-flex pf-m-justify-content-space-around">
686
- <div class="pf-v5-l-flex">
687
+ <div
688
+ class="pf-v5-l-flex pf-m-justify-content-center pf-m-space-items-md"
689
+ >
690
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
687
691
  <div class="pf-v5-l-flex__item">
688
692
  <i
689
693
  class="fas fa-check-circle pf-v5-u-success-color-100"
@@ -695,7 +699,7 @@ wrapperTag: div
695
699
  <span>subtitle</span>
696
700
  </div>
697
701
  </div>
698
- <div class="pf-v5-l-flex pf-m-justify-content-space-around">
702
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
699
703
  <div class="pf-v5-l-flex__item">
700
704
  <i
701
705
  class="fas fa-exclamation-triangle pf-v5-u-warning-color-100"
@@ -715,8 +719,10 @@ wrapperTag: div
715
719
  <h2 class="pf-v5-c-card__title-text">50 Hosts</h2>
716
720
  </div>
717
721
  <div class="pf-v5-c-card__body">
718
- <div class="pf-v5-l-flex pf-m-justify-content-space-around">
719
- <div class="pf-v5-l-flex">
722
+ <div
723
+ class="pf-v5-l-flex pf-m-justify-content-center pf-m-space-items-md"
724
+ >
725
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
720
726
  <div class="pf-v5-l-flex__item">
721
727
  <i
722
728
  class="fas fa-exclamation-triangle pf-v5-u-warning-color-100"
@@ -728,7 +734,7 @@ wrapperTag: div
728
734
  <span>subtitle</span>
729
735
  </div>
730
736
  </div>
731
- <div class="pf-v5-l-flex pf-m-justify-content-space-around">
737
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
732
738
  <div class="pf-v5-l-flex__item">
733
739
  <i
734
740
  class="fas fa-times-circle pf-v5-u-danger-color-100"
@@ -1991,7 +1997,7 @@ wrapperTag: div
1991
1997
  <div class="pf-v5-c-card__body">
1992
1998
  <div class="pf-v5-l-flex pf-m-column">
1993
1999
  <span>System</span>
1994
- <div class="pf-v5-l-flex">
2000
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
1995
2001
  <i
1996
2002
  class="fas fa-exclamation-circle pf-v5-u-danger-color-100"
1997
2003
  aria-hidden="true"
@@ -3075,7 +3081,7 @@ wrapperTag: div
3075
3081
  <dl class="pf-v5-c-description-list">
3076
3082
  <div class="pf-v5-c-description-list__group">
3077
3083
  <dt class="pf-v5-c-description-list__term">
3078
- <div class="pf-v5-l-flex pf-m-nowrap">
3084
+ <div class="pf-v5-l-flex pf-m-nowrap pf-m-space-items-sm">
3079
3085
  <div class="pf-v5-l-flex__item">
3080
3086
  <i
3081
3087
  class="fas fa-exclamation-circle pf-v5-u-danger-color-100"
@@ -3100,7 +3106,7 @@ wrapperTag: div
3100
3106
  </div>
3101
3107
  <div class="pf-v5-c-description-list__group">
3102
3108
  <dt class="pf-v5-c-description-list__term">
3103
- <div class="pf-v5-l-flex pf-m-nowrap">
3109
+ <div class="pf-v5-l-flex pf-m-nowrap pf-m-space-items-sm">
3104
3110
  <div class="pf-v5-l-flex__item">
3105
3111
  <i
3106
3112
  class="fas fa-check-circle pf-v5-u-success-color-100"
@@ -3125,7 +3131,7 @@ wrapperTag: div
3125
3131
  </div>
3126
3132
  <div class="pf-v5-c-description-list__group">
3127
3133
  <dt class="pf-v5-c-description-list__term">
3128
- <div class="pf-v5-l-flex pf-m-nowrap">
3134
+ <div class="pf-v5-l-flex pf-m-nowrap pf-m-space-items-sm">
3129
3135
  <div class="pf-v5-l-flex__item">
3130
3136
  <svg
3131
3137
  class="pf-v5-c-spinner pf-m-md"
@@ -3160,7 +3166,7 @@ wrapperTag: div
3160
3166
  </div>
3161
3167
  <div class="pf-v5-c-description-list__group">
3162
3168
  <dt class="pf-v5-c-description-list__term">
3163
- <div class="pf-v5-l-flex pf-m-nowrap">
3169
+ <div class="pf-v5-l-flex pf-m-nowrap pf-m-space-items-sm">
3164
3170
  <div class="pf-v5-l-flex__item">
3165
3171
  <i
3166
3172
  class="fas fa-check-circle pf-v5-u-success-color-100"
@@ -402,6 +402,9 @@ Adjusting width with `.pf-m-flex-1`. In this example, all groups are set to `.pf
402
402
  </div>
403
403
  <div class="pf-v5-l-flex">
404
404
  <div class="pf-v5-l-flex__item">Flex item</div>
405
+ <div class="pf-v5-l-flex__item">Flex item</div>
406
+ <div class="pf-v5-l-flex__item">Flex item</div>
407
+ <div class="pf-v5-l-flex__item">Flex item</div>
405
408
  </div>
406
409
  </div>
407
410
  <br />
@@ -29,6 +29,7 @@
29
29
  }
30
30
 
31
31
  .pf-v5-l-flex > * {
32
+ --pf-v5-l-flex--spacer: initial;
32
33
  --pf-v5-l-flex--spacer--column: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--column--base));
33
34
  --pf-v5-l-flex--spacer--row: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--row--base));
34
35
  order: var(--pf-v5-l-flex--item--Order);
@@ -34,6 +34,7 @@ $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
34
34
  // Item
35
35
  .#{$flex} > * {
36
36
  // set/reset layout spacers on children, since the parent flex layout can be a child of another flex layout and needs these values from its parent
37
+ --#{$flex}--spacer: initial;
37
38
  --#{$flex}--spacer--column: var(--#{$flex}--spacer, var(--#{$flex}--spacer--column--base));
38
39
  --#{$flex}--spacer--row: var(--#{$flex}--spacer, var(--#{$flex}--spacer--row--base));
39
40
 
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.71",
4
+ "version": "5.0.0-alpha.73",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -18295,9 +18295,11 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18295
18295
  --pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor: var(--pf-v5-global--primary-color--200);
18296
18296
  --pf-v5-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-v5-global--primary-color--100);
18297
18297
  --pf-v5-c-menu-toggle__button--BackgroundColor: transparent;
18298
+ --pf-v5-c-menu-toggle__button--PaddingLeft: var(--pf-v5-global--spacer--sm);
18299
+ --pf-v5-c-menu-toggle__button--PaddingRight: var(--pf-v5-global--spacer--sm);
18298
18300
  --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-global--spacer--sm);
18299
18301
  --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
18300
- --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-v5-global--spacer--md);
18302
+ --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-v5-global--spacer--sm);
18301
18303
  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
18302
18304
  --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
18303
18305
  position: relative;
@@ -18548,6 +18550,8 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18548
18550
  --pf-v5-c-menu-toggle__controls--PaddingLeft: 0;
18549
18551
  --pf-v5-c-menu-toggle__controls--MarginRight: var(--pf-v5-c-menu-toggle__button__controls--MarginRight);
18550
18552
  --pf-v5-c-menu-toggle__controls--MarginLeft: var(--pf-v5-c-menu-toggle__button__controls--MarginLeft);
18553
+ padding-right: var(--pf-v5-c-menu-toggle__button--PaddingRight);
18554
+ padding-left: var(--pf-v5-c-menu-toggle__button--PaddingLeft);
18551
18555
  color: inherit;
18552
18556
  background-color: var(--pf-v5-c-menu-toggle__button--BackgroundColor);
18553
18557
  border: 0;
@@ -31044,6 +31048,7 @@ label.pf-v5-c-tree-view__node-text {
31044
31048
  }
31045
31049
 
31046
31050
  .pf-v5-l-flex > * {
31051
+ --pf-v5-l-flex--spacer: initial;
31047
31052
  --pf-v5-l-flex--spacer--column: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--column--base));
31048
31053
  --pf-v5-l-flex--spacer--row: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--row--base));
31049
31054
  order: var(--pf-v5-l-flex--item--Order);
@@ -18412,9 +18412,11 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18412
18412
  --pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor: var(--pf-v5-global--primary-color--200);
18413
18413
  --pf-v5-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-v5-global--primary-color--100);
18414
18414
  --pf-v5-c-menu-toggle__button--BackgroundColor: transparent;
18415
+ --pf-v5-c-menu-toggle__button--PaddingLeft: var(--pf-v5-global--spacer--sm);
18416
+ --pf-v5-c-menu-toggle__button--PaddingRight: var(--pf-v5-global--spacer--sm);
18415
18417
  --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-global--spacer--sm);
18416
18418
  --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
18417
- --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-v5-global--spacer--md);
18419
+ --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-v5-global--spacer--sm);
18418
18420
  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
18419
18421
  --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
18420
18422
  position: relative;
@@ -18665,6 +18667,8 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18665
18667
  --pf-v5-c-menu-toggle__controls--PaddingLeft: 0;
18666
18668
  --pf-v5-c-menu-toggle__controls--MarginRight: var(--pf-v5-c-menu-toggle__button__controls--MarginRight);
18667
18669
  --pf-v5-c-menu-toggle__controls--MarginLeft: var(--pf-v5-c-menu-toggle__button__controls--MarginLeft);
18670
+ padding-right: var(--pf-v5-c-menu-toggle__button--PaddingRight);
18671
+ padding-left: var(--pf-v5-c-menu-toggle__button--PaddingLeft);
18668
18672
  color: inherit;
18669
18673
  background-color: var(--pf-v5-c-menu-toggle__button--BackgroundColor);
18670
18674
  border: 0;
@@ -31161,6 +31165,7 @@ label.pf-v5-c-tree-view__node-text {
31161
31165
  }
31162
31166
 
31163
31167
  .pf-v5-l-flex > * {
31168
+ --pf-v5-l-flex--spacer: initial;
31164
31169
  --pf-v5-l-flex--spacer--column: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--column--base));
31165
31170
  --pf-v5-l-flex--spacer--row: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--row--base));
31166
31171
  order: var(--pf-v5-l-flex--item--Order);
package/patternfly.css CHANGED
@@ -18412,9 +18412,11 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18412
18412
  --pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor: var(--pf-v5-global--primary-color--200);
18413
18413
  --pf-v5-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-v5-global--primary-color--100);
18414
18414
  --pf-v5-c-menu-toggle__button--BackgroundColor: transparent;
18415
+ --pf-v5-c-menu-toggle__button--PaddingLeft: var(--pf-v5-global--spacer--sm);
18416
+ --pf-v5-c-menu-toggle__button--PaddingRight: var(--pf-v5-global--spacer--sm);
18415
18417
  --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-global--spacer--sm);
18416
18418
  --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
18417
- --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-v5-global--spacer--md);
18419
+ --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-v5-global--spacer--sm);
18418
18420
  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
18419
18421
  --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
18420
18422
  position: relative;
@@ -18665,6 +18667,8 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18665
18667
  --pf-v5-c-menu-toggle__controls--PaddingLeft: 0;
18666
18668
  --pf-v5-c-menu-toggle__controls--MarginRight: var(--pf-v5-c-menu-toggle__button__controls--MarginRight);
18667
18669
  --pf-v5-c-menu-toggle__controls--MarginLeft: var(--pf-v5-c-menu-toggle__button__controls--MarginLeft);
18670
+ padding-right: var(--pf-v5-c-menu-toggle__button--PaddingRight);
18671
+ padding-left: var(--pf-v5-c-menu-toggle__button--PaddingLeft);
18668
18672
  color: inherit;
18669
18673
  background-color: var(--pf-v5-c-menu-toggle__button--BackgroundColor);
18670
18674
  border: 0;
@@ -31161,6 +31165,7 @@ label.pf-v5-c-tree-view__node-text {
31161
31165
  }
31162
31166
 
31163
31167
  .pf-v5-l-flex > * {
31168
+ --pf-v5-l-flex--spacer: initial;
31164
31169
  --pf-v5-l-flex--spacer--column: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--column--base));
31165
31170
  --pf-v5-l-flex--spacer--row: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--row--base));
31166
31171
  order: var(--pf-v5-l-flex--item--Order);