@patternfly/patternfly 4.201.2 → 4.202.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/components/MenuToggle/menu-toggle.css +16 -12
  2. package/components/MenuToggle/menu-toggle.scss +18 -15
  3. package/package.json +1 -1
  4. package/patternfly-no-reset.css +16 -12
  5. package/patternfly.css +16 -12
  6. package/patternfly.min.css +1 -1
  7. package/patternfly.min.css.map +1 -1
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -66,6 +66,8 @@
66
66
  --pf-c-menu-toggle__icon--MarginRight: var(--pf-global--spacer--sm);
67
67
  --pf-c-menu-toggle__count--MarginLeft: var(--pf-global--spacer--sm);
68
68
  --pf-c-menu-toggle__controls--PaddingLeft: var(--pf-global--spacer--md);
69
+ --pf-c-menu-toggle__controls--MarginLeft: auto;
70
+ --pf-c-menu-toggle__controls--MarginRight: 0;
69
71
  --pf-c-menu-toggle__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
70
72
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
71
73
  --pf-c-menu-toggle--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
@@ -106,10 +108,8 @@
106
108
  --pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
107
109
  --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
108
110
  --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
109
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop: calc(var(--pf-c-menu-toggle--PaddingTop) * -1);
110
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight: calc(var(--pf-c-menu-toggle--PaddingRight) * -1);
111
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom: calc(var(--pf-c-menu-toggle--PaddingBottom) * -1);
112
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft: calc(var(--pf-c-menu-toggle--PaddingLeft) * -1);
111
+ --pf-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-global--spacer--md);
112
+ --pf-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-global--spacer--sm);
113
113
  --pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--sm);
114
114
  position: relative;
115
115
  display: inline-flex;
@@ -242,13 +242,18 @@
242
242
  --pf-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
243
243
  height: 100%;
244
244
  }
245
+ .pf-c-menu-toggle.pf-m-typeahead {
246
+ --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-c-menu-toggle--m-typeahead__controls--MarginRight);
247
+ --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-c-menu-toggle--m-typeahead__controls--MarginLeft);
248
+ align-items: stretch;
249
+ padding: 0;
250
+ }
245
251
  .pf-c-menu-toggle.pf-m-typeahead .pf-c-text-input-group {
246
252
  --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight);
253
+ --pf-c-text-input-group__utilities--MarginRight: 0;
247
254
  flex: 1;
248
- margin: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft);
249
255
  }
250
256
  .pf-c-menu-toggle.pf-m-split-button {
251
- --pf-c-menu-toggle__toggle-icon--MarginRight: 0;
252
257
  padding: 0;
253
258
  }
254
259
  .pf-c-menu-toggle.pf-m-split-button > * {
@@ -352,14 +357,12 @@
352
357
  }
353
358
 
354
359
  .pf-c-menu-toggle__button {
360
+ --pf-c-menu-toggle__controls--PaddingLeft: 0;
361
+ --pf-c-menu-toggle__controls--MarginRight: var(--pf-c-menu-toggle__button__controls--MarginRight);
362
+ --pf-c-menu-toggle__controls--MarginLeft: var(--pf-c-menu-toggle__button__controls--MarginLeft);
355
363
  color: inherit;
356
364
  border: 0;
357
365
  }
358
- .pf-c-menu-toggle__button .pf-c-menu-toggle__controls {
359
- padding-left: 0;
360
- margin-right: var(--pf-c-menu-toggle__button__controls--MarginRight);
361
- margin-left: var(--pf-c-menu-toggle__button__controls--MarginLeft);
362
- }
363
366
 
364
367
  .pf-c-menu-toggle__icon {
365
368
  display: inline-flex;
@@ -384,7 +387,8 @@
384
387
 
385
388
  .pf-c-menu-toggle__controls {
386
389
  padding-left: var(--pf-c-menu-toggle__controls--PaddingLeft);
387
- margin-left: auto;
390
+ margin-right: var(--pf-c-menu-toggle__controls--MarginRight);
391
+ margin-left: var(--pf-c-menu-toggle__controls--MarginLeft);
388
392
  }
389
393
 
390
394
  .pf-c-menu-toggle__toggle-icon {
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -91,8 +91,10 @@
91
91
  // Count
92
92
  --pf-c-menu-toggle__count--MarginLeft: var(--pf-global--spacer--sm);
93
93
 
94
- // Controls
94
+ // Controls -- update element/vars to "control" in breaking change
95
95
  --pf-c-menu-toggle__controls--PaddingLeft: var(--pf-global--spacer--md);
96
+ --pf-c-menu-toggle__controls--MarginLeft: auto;
97
+ --pf-c-menu-toggle__controls--MarginRight: 0;
96
98
 
97
99
  // Toggle icon
98
100
  --pf-c-menu-toggle__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
@@ -151,10 +153,8 @@
151
153
  --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
152
154
 
153
155
  // Typeahead
154
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop: calc(var(--pf-c-menu-toggle--PaddingTop) * -1);
155
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight: calc(var(--pf-c-menu-toggle--PaddingRight) * -1);
156
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom: calc(var(--pf-c-menu-toggle--PaddingBottom) * -1);
157
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft: calc(var(--pf-c-menu-toggle--PaddingLeft) * -1);
156
+ --pf-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-global--spacer--md);
157
+ --pf-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-global--spacer--sm);
158
158
  --pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--sm);
159
159
 
160
160
  position: relative;
@@ -324,17 +324,21 @@
324
324
  }
325
325
 
326
326
  &.pf-m-typeahead {
327
+ --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-c-menu-toggle--m-typeahead__controls--MarginRight);
328
+ --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-c-menu-toggle--m-typeahead__controls--MarginLeft);
329
+
330
+ align-items: stretch;
331
+ padding: 0;
332
+
327
333
  .pf-c-text-input-group {
328
334
  --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight);
335
+ --pf-c-text-input-group__utilities--MarginRight: 0;
329
336
 
330
337
  flex: 1;
331
- margin: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft);
332
338
  }
333
339
  }
334
340
 
335
341
  &.pf-m-split-button {
336
- --pf-c-menu-toggle__toggle-icon--MarginRight: 0;
337
-
338
342
  padding: 0; // pass padding to children
339
343
 
340
344
  > * {
@@ -492,14 +496,12 @@
492
496
  }
493
497
 
494
498
  .pf-c-menu-toggle__button {
499
+ --pf-c-menu-toggle__controls--PaddingLeft: 0;
500
+ --pf-c-menu-toggle__controls--MarginRight: var(--pf-c-menu-toggle__button__controls--MarginRight);
501
+ --pf-c-menu-toggle__controls--MarginLeft: var(--pf-c-menu-toggle__button__controls--MarginLeft);
502
+
495
503
  color: inherit;
496
504
  border: 0;
497
-
498
- .pf-c-menu-toggle__controls {
499
- padding-left: 0;
500
- margin-right: var(--pf-c-menu-toggle__button__controls--MarginRight);
501
- margin-left: var(--pf-c-menu-toggle__button__controls--MarginLeft);
502
- }
503
505
  }
504
506
 
505
507
  .pf-c-menu-toggle__icon {
@@ -524,7 +526,8 @@
524
526
 
525
527
  .pf-c-menu-toggle__controls {
526
528
  padding-left: var(--pf-c-menu-toggle__controls--PaddingLeft);
527
- margin-left: auto;
529
+ margin-right: var(--pf-c-menu-toggle__controls--MarginRight);
530
+ margin-left: var(--pf-c-menu-toggle__controls--MarginLeft);
528
531
  }
529
532
 
530
533
  .pf-c-menu-toggle__toggle-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": "4.201.2",
4
+ "version": "4.202.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -18858,6 +18858,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18858
18858
  --pf-c-menu-toggle__icon--MarginRight: var(--pf-global--spacer--sm);
18859
18859
  --pf-c-menu-toggle__count--MarginLeft: var(--pf-global--spacer--sm);
18860
18860
  --pf-c-menu-toggle__controls--PaddingLeft: var(--pf-global--spacer--md);
18861
+ --pf-c-menu-toggle__controls--MarginLeft: auto;
18862
+ --pf-c-menu-toggle__controls--MarginRight: 0;
18861
18863
  --pf-c-menu-toggle__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
18862
18864
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
18863
18865
  --pf-c-menu-toggle--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
@@ -18898,10 +18900,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18898
18900
  --pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
18899
18901
  --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
18900
18902
  --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
18901
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop: calc(var(--pf-c-menu-toggle--PaddingTop) * -1);
18902
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight: calc(var(--pf-c-menu-toggle--PaddingRight) * -1);
18903
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom: calc(var(--pf-c-menu-toggle--PaddingBottom) * -1);
18904
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft: calc(var(--pf-c-menu-toggle--PaddingLeft) * -1);
18903
+ --pf-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-global--spacer--md);
18904
+ --pf-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-global--spacer--sm);
18905
18905
  --pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--sm);
18906
18906
  position: relative;
18907
18907
  display: inline-flex;
@@ -19034,13 +19034,18 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19034
19034
  --pf-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
19035
19035
  height: 100%;
19036
19036
  }
19037
+ .pf-c-menu-toggle.pf-m-typeahead {
19038
+ --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-c-menu-toggle--m-typeahead__controls--MarginRight);
19039
+ --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-c-menu-toggle--m-typeahead__controls--MarginLeft);
19040
+ align-items: stretch;
19041
+ padding: 0;
19042
+ }
19037
19043
  .pf-c-menu-toggle.pf-m-typeahead .pf-c-text-input-group {
19038
19044
  --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight);
19045
+ --pf-c-text-input-group__utilities--MarginRight: 0;
19039
19046
  flex: 1;
19040
- margin: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft);
19041
19047
  }
19042
19048
  .pf-c-menu-toggle.pf-m-split-button {
19043
- --pf-c-menu-toggle__toggle-icon--MarginRight: 0;
19044
19049
  padding: 0;
19045
19050
  }
19046
19051
  .pf-c-menu-toggle.pf-m-split-button > * {
@@ -19144,14 +19149,12 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19144
19149
  }
19145
19150
 
19146
19151
  .pf-c-menu-toggle__button {
19152
+ --pf-c-menu-toggle__controls--PaddingLeft: 0;
19153
+ --pf-c-menu-toggle__controls--MarginRight: var(--pf-c-menu-toggle__button__controls--MarginRight);
19154
+ --pf-c-menu-toggle__controls--MarginLeft: var(--pf-c-menu-toggle__button__controls--MarginLeft);
19147
19155
  color: inherit;
19148
19156
  border: 0;
19149
19157
  }
19150
- .pf-c-menu-toggle__button .pf-c-menu-toggle__controls {
19151
- padding-left: 0;
19152
- margin-right: var(--pf-c-menu-toggle__button__controls--MarginRight);
19153
- margin-left: var(--pf-c-menu-toggle__button__controls--MarginLeft);
19154
- }
19155
19158
 
19156
19159
  .pf-c-menu-toggle__icon {
19157
19160
  display: inline-flex;
@@ -19176,7 +19179,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19176
19179
 
19177
19180
  .pf-c-menu-toggle__controls {
19178
19181
  padding-left: var(--pf-c-menu-toggle__controls--PaddingLeft);
19179
- margin-left: auto;
19182
+ margin-right: var(--pf-c-menu-toggle__controls--MarginRight);
19183
+ margin-left: var(--pf-c-menu-toggle__controls--MarginLeft);
19180
19184
  }
19181
19185
 
19182
19186
  .pf-c-menu-toggle__toggle-icon {
package/patternfly.css CHANGED
@@ -18985,6 +18985,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18985
18985
  --pf-c-menu-toggle__icon--MarginRight: var(--pf-global--spacer--sm);
18986
18986
  --pf-c-menu-toggle__count--MarginLeft: var(--pf-global--spacer--sm);
18987
18987
  --pf-c-menu-toggle__controls--PaddingLeft: var(--pf-global--spacer--md);
18988
+ --pf-c-menu-toggle__controls--MarginLeft: auto;
18989
+ --pf-c-menu-toggle__controls--MarginRight: 0;
18988
18990
  --pf-c-menu-toggle__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
18989
18991
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
18990
18992
  --pf-c-menu-toggle--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
@@ -19025,10 +19027,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19025
19027
  --pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
19026
19028
  --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
19027
19029
  --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
19028
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop: calc(var(--pf-c-menu-toggle--PaddingTop) * -1);
19029
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight: calc(var(--pf-c-menu-toggle--PaddingRight) * -1);
19030
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom: calc(var(--pf-c-menu-toggle--PaddingBottom) * -1);
19031
- --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft: calc(var(--pf-c-menu-toggle--PaddingLeft) * -1);
19030
+ --pf-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-global--spacer--md);
19031
+ --pf-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-global--spacer--sm);
19032
19032
  --pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--sm);
19033
19033
  position: relative;
19034
19034
  display: inline-flex;
@@ -19161,13 +19161,18 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19161
19161
  --pf-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
19162
19162
  height: 100%;
19163
19163
  }
19164
+ .pf-c-menu-toggle.pf-m-typeahead {
19165
+ --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-c-menu-toggle--m-typeahead__controls--MarginRight);
19166
+ --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-c-menu-toggle--m-typeahead__controls--MarginLeft);
19167
+ align-items: stretch;
19168
+ padding: 0;
19169
+ }
19164
19170
  .pf-c-menu-toggle.pf-m-typeahead .pf-c-text-input-group {
19165
19171
  --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight);
19172
+ --pf-c-text-input-group__utilities--MarginRight: 0;
19166
19173
  flex: 1;
19167
- margin: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft);
19168
19174
  }
19169
19175
  .pf-c-menu-toggle.pf-m-split-button {
19170
- --pf-c-menu-toggle__toggle-icon--MarginRight: 0;
19171
19176
  padding: 0;
19172
19177
  }
19173
19178
  .pf-c-menu-toggle.pf-m-split-button > * {
@@ -19271,14 +19276,12 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19271
19276
  }
19272
19277
 
19273
19278
  .pf-c-menu-toggle__button {
19279
+ --pf-c-menu-toggle__controls--PaddingLeft: 0;
19280
+ --pf-c-menu-toggle__controls--MarginRight: var(--pf-c-menu-toggle__button__controls--MarginRight);
19281
+ --pf-c-menu-toggle__controls--MarginLeft: var(--pf-c-menu-toggle__button__controls--MarginLeft);
19274
19282
  color: inherit;
19275
19283
  border: 0;
19276
19284
  }
19277
- .pf-c-menu-toggle__button .pf-c-menu-toggle__controls {
19278
- padding-left: 0;
19279
- margin-right: var(--pf-c-menu-toggle__button__controls--MarginRight);
19280
- margin-left: var(--pf-c-menu-toggle__button__controls--MarginLeft);
19281
- }
19282
19285
 
19283
19286
  .pf-c-menu-toggle__icon {
19284
19287
  display: inline-flex;
@@ -19303,7 +19306,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19303
19306
 
19304
19307
  .pf-c-menu-toggle__controls {
19305
19308
  padding-left: var(--pf-c-menu-toggle__controls--PaddingLeft);
19306
- margin-left: auto;
19309
+ margin-right: var(--pf-c-menu-toggle__controls--MarginRight);
19310
+ margin-left: var(--pf-c-menu-toggle__controls--MarginLeft);
19307
19311
  }
19308
19312
 
19309
19313
  .pf-c-menu-toggle__toggle-icon {