@patternfly/patternfly 5.0.0-alpha.34 → 5.0.0-alpha.35

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 (11) hide show
  1. package/components/ContextSelector/context-selector.css +8 -5
  2. package/components/ContextSelector/context-selector.scss +8 -5
  3. package/components/Dropdown/dropdown.css +14 -15
  4. package/components/Dropdown/dropdown.scss +15 -18
  5. package/components/OptionsMenu/options-menu.css +8 -5
  6. package/components/OptionsMenu/options-menu.scss +9 -5
  7. package/package.json +1 -1
  8. package/patternfly-no-globals.css +30 -25
  9. package/patternfly.css +30 -25
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
package/components/ContextSelector/context-selector.css CHANGED
@@ -14,6 +14,7 @@
14
14
  --pf-c-context-selector__toggle--PaddingRight: var(--pf-global--spacer--sm);
15
15
  --pf-c-context-selector__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
16
16
  --pf-c-context-selector__toggle--PaddingLeft: var(--pf-global--spacer--sm);
17
+ --pf-c-context-selector__toggle--ColumnGap: var(--pf-global--spacer--sm);
17
18
  --pf-c-context-selector__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
18
19
  --pf-c-context-selector__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
19
20
  --pf-c-context-selector__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
@@ -37,8 +38,8 @@
37
38
  --pf-c-context-selector__toggle-text--FontSize: var(--pf-global--FontSize--md);
38
39
  --pf-c-context-selector__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
39
40
  --pf-c-context-selector__toggle-text--LineHeight: var(--pf-global--LineHeight--md);
40
- --pf-c-context-selector__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
41
- --pf-c-context-selector__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
41
+ --pf-c-context-selector__toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
42
+ --pf-c-context-selector__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
42
43
  --pf-c-context-selector--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
43
44
  --pf-c-context-selector--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
44
45
  --pf-c-context-selector__menu--Top: calc(100% + var(--pf-global--spacer--xs));
@@ -170,8 +171,8 @@
170
171
  .pf-c-context-selector__toggle {
171
172
  position: relative;
172
173
  display: flex;
174
+ column-gap: var(--pf-c-context-selector__toggle--ColumnGap);
173
175
  align-items: center;
174
- justify-content: space-between;
175
176
  width: 100%;
176
177
  padding: var(--pf-c-context-selector__toggle--PaddingTop) var(--pf-c-context-selector__toggle--PaddingRight) var(--pf-c-context-selector__toggle--PaddingBottom) var(--pf-c-context-selector__toggle--PaddingLeft);
177
178
  color: var(--pf-c-context-selector__toggle--Color);
@@ -230,14 +231,16 @@
230
231
  overflow: hidden;
231
232
  text-overflow: ellipsis;
232
233
  white-space: nowrap;
234
+ flex: 1 1 auto;
233
235
  font-size: var(--pf-c-context-selector__toggle-text--FontSize);
234
236
  font-weight: var(--pf-c-context-selector__toggle-text--FontWeight);
235
237
  line-height: var(--pf-c-context-selector__toggle-text--LineHeight);
238
+ text-align: left;
236
239
  }
237
240
 
238
241
  .pf-c-context-selector__toggle-icon {
239
- margin-right: var(--pf-c-context-selector__toggle-icon--MarginRight);
240
- margin-left: var(--pf-c-context-selector__toggle-icon--MarginLeft);
242
+ padding-right: var(--pf-c-context-selector__toggle-icon--PaddingRight);
243
+ padding-left: var(--pf-c-context-selector__toggle-icon--PaddingLeft);
241
244
  color: var(--pf-c-context-selector__toggle-icon--Color, inherit);
242
245
  }
243
246
 
package/components/ContextSelector/context-selector.scss CHANGED
@@ -7,6 +7,7 @@
7
7
  --pf-c-context-selector__toggle--PaddingRight: var(--pf-global--spacer--sm);
8
8
  --pf-c-context-selector__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
9
9
  --pf-c-context-selector__toggle--PaddingLeft: var(--pf-global--spacer--sm);
10
+ --pf-c-context-selector__toggle--ColumnGap: var(--pf-global--spacer--sm);
10
11
  --pf-c-context-selector__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
11
12
  --pf-c-context-selector__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
12
13
  --pf-c-context-selector__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
@@ -34,8 +35,8 @@
34
35
  --pf-c-context-selector__toggle-text--LineHeight: var(--pf-global--LineHeight--md);
35
36
 
36
37
  // Toggle icon arrow
37
- --pf-c-context-selector__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
38
- --pf-c-context-selector__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
38
+ --pf-c-context-selector__toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
39
+ --pf-c-context-selector__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
39
40
  --pf-c-context-selector--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
40
41
  --pf-c-context-selector--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
41
42
 
@@ -194,8 +195,8 @@
194
195
  .pf-c-context-selector__toggle {
195
196
  position: relative;
196
197
  display: flex;
198
+ column-gap: var(--pf-c-context-selector__toggle--ColumnGap);
197
199
  align-items: center;
198
- justify-content: space-between;
199
200
  width: 100%;
200
201
  padding: var(--pf-c-context-selector__toggle--PaddingTop) var(--pf-c-context-selector__toggle--PaddingRight) var(--pf-c-context-selector__toggle--PaddingBottom) var(--pf-c-context-selector__toggle--PaddingLeft);
201
202
  color: var(--pf-c-context-selector__toggle--Color);
@@ -279,15 +280,17 @@
279
280
  .pf-c-context-selector__toggle-text {
280
281
  @include pf-text-overflow;
281
282
 
283
+ flex: 1 1 auto;
282
284
  font-size: var(--pf-c-context-selector__toggle-text--FontSize);
283
285
  font-weight: var(--pf-c-context-selector__toggle-text--FontWeight);
284
286
  line-height: var(--pf-c-context-selector__toggle-text--LineHeight);
287
+ text-align: left;
285
288
  }
286
289
  }
287
290
 
288
291
  .pf-c-context-selector__toggle-icon {
289
- margin-right: var(--pf-c-context-selector__toggle-icon--MarginRight);
290
- margin-left: var(--pf-c-context-selector__toggle-icon--MarginLeft);
292
+ padding-right: var(--pf-c-context-selector__toggle-icon--PaddingRight);
293
+ padding-left: var(--pf-c-context-selector__toggle-icon--PaddingLeft);
291
294
  color: var(--pf-c-context-selector__toggle-icon--Color, inherit);
292
295
  }
293
296
 
package/components/Dropdown/dropdown.css CHANGED
@@ -3,6 +3,7 @@
3
3
  --pf-c-dropdown__toggle--PaddingRight: var(--pf-global--spacer--sm);
4
4
  --pf-c-dropdown__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
5
5
  --pf-c-dropdown__toggle--PaddingLeft: var(--pf-global--spacer--sm);
6
+ --pf-c-dropdown__toggle--ColumnGap: var(--pf-global--spacer--sm);
6
7
  --pf-c-dropdown__toggle--MinWidth: 0;
7
8
  --pf-c-dropdown__toggle--FontSize: var(--pf-global--FontSize--md);
8
9
  --pf-c-dropdown__toggle--FontWeight: var(--pf-global--FontWeight--normal);
@@ -87,8 +88,9 @@
87
88
  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth: var(--pf-global--BorderWidth--md);
88
89
  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth: var(--pf-global--BorderWidth--md);
89
90
  --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
90
- --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
91
- --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
91
+ --pf-c-dropdown__toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
92
+ --pf-c-dropdown__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
93
+ --pf-c-dropdown__toggle-icon--MarginLeft: 0;
92
94
  --pf-c-dropdown--m-top--m-expanded__toggle-icon--Rotate: 180deg;
93
95
  --pf-c-dropdown--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
94
96
  --pf-c-dropdown--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
@@ -127,11 +129,10 @@
127
129
  --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
128
130
  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--normal);
129
131
  --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);
130
- --pf-c-dropdown__toggle-image--MarginTop: 0;
131
- --pf-c-dropdown__toggle-image--MarginBottom: 0;
132
- --pf-c-dropdown__toggle-image--MarginRight: var(--pf-global--spacer--sm);
133
132
  --pf-c-dropdown--c-divider--MarginTop: var(--pf-global--spacer--sm);
134
133
  --pf-c-dropdown--c-divider--MarginBottom: var(--pf-global--spacer--sm);
134
+ --pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingRight: 0;
135
+ --pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft: 0;
135
136
  --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft: var(--pf-global--spacer--xs);
136
137
  --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight: 0;
137
138
  --pf-c-dropdown--c-menu--Top: calc(100% + var(--pf-global--spacer--xs));
@@ -188,8 +189,8 @@
188
189
  .pf-c-dropdown__toggle {
189
190
  position: relative;
190
191
  display: flex;
192
+ column-gap: var(--pf-c-dropdown__toggle--ColumnGap);
191
193
  align-items: center;
192
- justify-content: space-between;
193
194
  min-width: var(--pf-c-dropdown__toggle--MinWidth);
194
195
  max-width: 100%;
195
196
  padding: var(--pf-c-dropdown__toggle--PaddingTop) var(--pf-c-dropdown__toggle--PaddingRight) var(--pf-c-dropdown__toggle--PaddingBottom) var(--pf-c-dropdown__toggle--PaddingLeft);
@@ -222,6 +223,7 @@
222
223
  border: 0;
223
224
  }
224
225
  .pf-c-dropdown__toggle.pf-m-split-button {
226
+ --pf-c-dropdown__toggle--ColumnGap: 0;
225
227
  padding: 0;
226
228
  }
227
229
  .pf-c-dropdown__toggle.pf-m-split-button:not(.pf-m-disabled) {
@@ -432,8 +434,9 @@
432
434
  border: 0;
433
435
  }
434
436
  .pf-c-dropdown__toggle > .pf-c-badge {
437
+ --pf-c-dropdown__toggle-icon--PaddingRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingRight);
438
+ --pf-c-dropdown__toggle-icon--PaddingLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft);
435
439
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
436
- --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);
437
440
  }
438
441
  .pf-c-dropdown__toggle .pf-c-dropdown__toggle-text {
439
442
  overflow: hidden;
@@ -442,11 +445,13 @@
442
445
  }
443
446
 
444
447
  .pf-c-dropdown__toggle-text {
445
- flex: 0 1 auto;
448
+ flex: 1 1 auto;
449
+ text-align: left;
446
450
  }
447
451
 
448
452
  .pf-c-dropdown__toggle-icon {
449
- margin-right: var(--pf-c-dropdown__toggle-icon--MarginRight);
453
+ padding-right: var(--pf-c-dropdown__toggle-icon--PaddingRight);
454
+ padding-left: var(--pf-c-dropdown__toggle-icon--PaddingLeft);
450
455
  margin-left: var(--pf-c-dropdown__toggle-icon--MarginLeft);
451
456
  line-height: var(--pf-c-dropdown__toggle-icon--LineHeight);
452
457
  color: var(--pf-c-dropdown__toggle-icon--Color, inherit);
@@ -459,14 +464,8 @@
459
464
  display: inline-flex;
460
465
  flex-shrink: 0;
461
466
  align-self: center;
462
- margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
463
- margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
464
- margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);
465
467
  line-height: 1;
466
468
  }
467
- .pf-c-dropdown__toggle-image:last-child {
468
- --pf-c-dropdown__toggle-image--MarginRight: 0;
469
- }
470
469
 
471
470
  .pf-c-dropdown__toggle-progress {
472
471
  position: absolute;
package/components/Dropdown/dropdown.scss CHANGED
@@ -6,6 +6,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
6
6
  --pf-c-dropdown__toggle--PaddingRight: var(--pf-global--spacer--sm);
7
7
  --pf-c-dropdown__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
8
8
  --pf-c-dropdown__toggle--PaddingLeft: var(--pf-global--spacer--sm);
9
+ --pf-c-dropdown__toggle--ColumnGap: var(--pf-global--spacer--sm);
9
10
  --pf-c-dropdown__toggle--MinWidth: 0;
10
11
  --pf-c-dropdown__toggle--FontSize: var(--pf-global--FontSize--md);
11
12
  --pf-c-dropdown__toggle--FontWeight: var(--pf-global--FontWeight--normal);
@@ -110,8 +111,9 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
110
111
 
111
112
  // Toggle Arrow
112
113
  --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
113
- --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
114
- --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
114
+ --pf-c-dropdown__toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
115
+ --pf-c-dropdown__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
116
+ --pf-c-dropdown__toggle-icon--MarginLeft: 0;
115
117
  --pf-c-dropdown--m-top--m-expanded__toggle-icon--Rotate: 180deg;
116
118
  --pf-c-dropdown--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
117
119
  --pf-c-dropdown--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
@@ -161,16 +163,13 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
161
163
  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--normal);
162
164
  --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);
163
165
 
164
- // Image
165
- --pf-c-dropdown__toggle-image--MarginTop: 0; // remove at breaking change
166
- --pf-c-dropdown__toggle-image--MarginBottom: 0; // remove at breaking change
167
- --pf-c-dropdown__toggle-image--MarginRight: var(--pf-global--spacer--sm);
168
-
169
166
  // Divider
170
167
  --pf-c-dropdown--c-divider--MarginTop: var(--pf-global--spacer--sm);
171
168
  --pf-c-dropdown--c-divider--MarginBottom: var(--pf-global--spacer--sm);
172
169
 
173
170
  // badge toggle icon
171
+ --pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingRight: 0;
172
+ --pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft: 0;
174
173
  --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft: var(--pf-global--spacer--xs);
175
174
  --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight: 0;
176
175
 
@@ -245,8 +244,8 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
245
244
  .pf-c-dropdown__toggle {
246
245
  position: relative;
247
246
  display: flex;
247
+ column-gap: var(--pf-c-dropdown__toggle--ColumnGap);
248
248
  align-items: center;
249
- justify-content: space-between;
250
249
  min-width: var(--pf-c-dropdown__toggle--MinWidth);
251
250
  max-width: 100%;
252
251
  padding: var(--pf-c-dropdown__toggle--PaddingTop) var(--pf-c-dropdown__toggle--PaddingRight) var(--pf-c-dropdown__toggle--PaddingBottom) var(--pf-c-dropdown__toggle--PaddingLeft);
@@ -287,6 +286,8 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
287
286
  }
288
287
 
289
288
  &.pf-m-split-button {
289
+ --pf-c-dropdown__toggle--ColumnGap: 0;
290
+
290
291
  padding: 0;
291
292
 
292
293
  &:not(.pf-m-disabled) {
@@ -596,8 +597,9 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
596
597
  }
597
598
 
598
599
  > .pf-c-badge {
600
+ --pf-c-dropdown__toggle-icon--PaddingRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingRight);
601
+ --pf-c-dropdown__toggle-icon--PaddingLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft);
599
602
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
600
- --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);
601
603
  }
602
604
 
603
605
  .pf-c-dropdown__toggle-text {
@@ -606,11 +608,13 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
606
608
  }
607
609
 
608
610
  .pf-c-dropdown__toggle-text {
609
- flex: 0 1 auto;
611
+ flex: 1 1 auto;
612
+ text-align: left;
610
613
  }
611
614
 
612
615
  .pf-c-dropdown__toggle-icon {
613
- margin-right: var(--pf-c-dropdown__toggle-icon--MarginRight);
616
+ padding-right: var(--pf-c-dropdown__toggle-icon--PaddingRight);
617
+ padding-left: var(--pf-c-dropdown__toggle-icon--PaddingLeft);
614
618
  margin-left: var(--pf-c-dropdown__toggle-icon--MarginLeft);
615
619
  line-height: var(--pf-c-dropdown__toggle-icon--LineHeight);
616
620
  color: var(--pf-c-dropdown__toggle-icon--Color, inherit);
@@ -626,14 +630,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
626
630
  display: inline-flex;
627
631
  flex-shrink: 0;
628
632
  align-self: center;
629
- margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
630
- margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
631
- margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);
632
633
  line-height: 1;
633
-
634
- &:last-child {
635
- --pf-c-dropdown__toggle-image--MarginRight: 0;
636
- }
637
634
  }
638
635
 
639
636
  // Loading spinner
package/components/OptionsMenu/options-menu.css CHANGED
@@ -4,6 +4,7 @@
4
4
  --pf-c-options-menu__toggle--PaddingRight: var(--pf-global--spacer--sm);
5
5
  --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
6
6
  --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm);
7
+ --pf-c-options-menu__toggle--ColumnGap: var(--pf-global--spacer--sm);
7
8
  --pf-c-options-menu__toggle--MinWidth: 0;
8
9
  --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
9
10
  --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
@@ -24,8 +25,8 @@
24
25
  --pf-c-options-menu__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
25
26
  --pf-c-options-menu__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
26
27
  --pf-c-options-menu__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
27
- --pf-c-options-menu__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
28
- --pf-c-options-menu__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
28
+ --pf-c-options-menu__toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
29
+ --pf-c-options-menu__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
29
30
  --pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate: 180deg;
30
31
  --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
31
32
  --pf-c-options-menu--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
@@ -107,8 +108,8 @@
107
108
  .pf-c-options-menu__toggle {
108
109
  position: relative;
109
110
  display: flex;
111
+ column-gap: var(--pf-c-options-menu__toggle--ColumnGap);
110
112
  align-items: center;
111
- justify-content: space-between;
112
113
  min-width: var(--pf-c-options-menu__toggle--MinWidth);
113
114
  max-width: 100%;
114
115
  padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
@@ -160,6 +161,8 @@
160
161
  overflow: hidden;
161
162
  text-overflow: ellipsis;
162
163
  white-space: nowrap;
164
+ flex: 1 1 auto;
165
+ text-align: left;
163
166
  }
164
167
 
165
168
  .pf-c-options-menu__toggle-icon,
@@ -168,8 +171,8 @@
168
171
  }
169
172
 
170
173
  .pf-c-options-menu__toggle-icon {
171
- margin-right: var(--pf-c-options-menu__toggle-icon--MarginRight);
172
- margin-left: var(--pf-c-options-menu__toggle-icon--MarginLeft);
174
+ padding-right: var(--pf-c-options-menu__toggle-icon--PaddingRight);
175
+ padding-left: var(--pf-c-options-menu__toggle-icon--PaddingLeft);
173
176
  }
174
177
  .pf-c-options-menu.pf-m-top.pf-m-expanded .pf-c-options-menu__toggle-icon {
175
178
  transform: rotate(var(--pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate));
package/components/OptionsMenu/options-menu.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  --pf-c-options-menu__toggle--PaddingRight: var(--pf-global--spacer--sm);
6
6
  --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
7
7
  --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm);
8
+ --pf-c-options-menu__toggle--ColumnGap: var(--pf-global--spacer--sm);
8
9
  --pf-c-options-menu__toggle--MinWidth: 0;
9
10
  --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
10
11
  --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
@@ -27,8 +28,8 @@
27
28
  --pf-c-options-menu__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
28
29
 
29
30
  // Toggle arrow
30
- --pf-c-options-menu__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
31
- --pf-c-options-menu__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
31
+ --pf-c-options-menu__toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
32
+ --pf-c-options-menu__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
32
33
  --pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate: 180deg;
33
34
  --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
34
35
  --pf-c-options-menu--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
@@ -136,8 +137,8 @@
136
137
  .pf-c-options-menu__toggle {
137
138
  position: relative;
138
139
  display: flex;
140
+ column-gap: var(--pf-c-options-menu__toggle--ColumnGap);
139
141
  align-items: center;
140
- justify-content: space-between;
141
142
  min-width: var(--pf-c-options-menu__toggle--MinWidth);
142
143
  max-width: 100%;
143
144
  padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
@@ -206,6 +207,9 @@
206
207
 
207
208
  .pf-c-options-menu__toggle-text {
208
209
  @include pf-text-overflow;
210
+
211
+ flex: 1 1 auto;
212
+ text-align: left;
209
213
  }
210
214
 
211
215
  .pf-c-options-menu__toggle-icon,
@@ -214,8 +218,8 @@
214
218
  }
215
219
 
216
220
  .pf-c-options-menu__toggle-icon {
217
- margin-right: var(--pf-c-options-menu__toggle-icon--MarginRight);
218
- margin-left: var(--pf-c-options-menu__toggle-icon--MarginLeft);
221
+ padding-right: var(--pf-c-options-menu__toggle-icon--PaddingRight);
222
+ padding-left: var(--pf-c-options-menu__toggle-icon--PaddingLeft);
219
223
 
220
224
  .pf-c-options-menu.pf-m-top.pf-m-expanded & {
221
225
  transform: rotate(var(--pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate));
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.34",
4
+ "version": "5.0.0-alpha.35",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -8974,6 +8974,7 @@ label.pf-c-check, .pf-c-check__label,
8974
8974
  --pf-c-context-selector__toggle--PaddingRight: var(--pf-global--spacer--sm);
8975
8975
  --pf-c-context-selector__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
8976
8976
  --pf-c-context-selector__toggle--PaddingLeft: var(--pf-global--spacer--sm);
8977
+ --pf-c-context-selector__toggle--ColumnGap: var(--pf-global--spacer--sm);
8977
8978
  --pf-c-context-selector__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
8978
8979
  --pf-c-context-selector__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
8979
8980
  --pf-c-context-selector__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
@@ -8997,8 +8998,8 @@ label.pf-c-check, .pf-c-check__label,
8997
8998
  --pf-c-context-selector__toggle-text--FontSize: var(--pf-global--FontSize--md);
8998
8999
  --pf-c-context-selector__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
8999
9000
  --pf-c-context-selector__toggle-text--LineHeight: var(--pf-global--LineHeight--md);
9000
- --pf-c-context-selector__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
9001
- --pf-c-context-selector__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
9001
+ --pf-c-context-selector__toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
9002
+ --pf-c-context-selector__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
9002
9003
  --pf-c-context-selector--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
9003
9004
  --pf-c-context-selector--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
9004
9005
  --pf-c-context-selector__menu--Top: calc(100% + var(--pf-global--spacer--xs));
@@ -9130,8 +9131,8 @@ label.pf-c-check, .pf-c-check__label,
9130
9131
  .pf-c-context-selector__toggle {
9131
9132
  position: relative;
9132
9133
  display: flex;
9134
+ column-gap: var(--pf-c-context-selector__toggle--ColumnGap);
9133
9135
  align-items: center;
9134
- justify-content: space-between;
9135
9136
  width: 100%;
9136
9137
  padding: var(--pf-c-context-selector__toggle--PaddingTop) var(--pf-c-context-selector__toggle--PaddingRight) var(--pf-c-context-selector__toggle--PaddingBottom) var(--pf-c-context-selector__toggle--PaddingLeft);
9137
9138
  color: var(--pf-c-context-selector__toggle--Color);
@@ -9190,14 +9191,16 @@ label.pf-c-check, .pf-c-check__label,
9190
9191
  overflow: hidden;
9191
9192
  text-overflow: ellipsis;
9192
9193
  white-space: nowrap;
9194
+ flex: 1 1 auto;
9193
9195
  font-size: var(--pf-c-context-selector__toggle-text--FontSize);
9194
9196
  font-weight: var(--pf-c-context-selector__toggle-text--FontWeight);
9195
9197
  line-height: var(--pf-c-context-selector__toggle-text--LineHeight);
9198
+ text-align: left;
9196
9199
  }
9197
9200
 
9198
9201
  .pf-c-context-selector__toggle-icon {
9199
- margin-right: var(--pf-c-context-selector__toggle-icon--MarginRight);
9200
- margin-left: var(--pf-c-context-selector__toggle-icon--MarginLeft);
9202
+ padding-right: var(--pf-c-context-selector__toggle-icon--PaddingRight);
9203
+ padding-left: var(--pf-c-context-selector__toggle-icon--PaddingLeft);
9201
9204
  color: var(--pf-c-context-selector__toggle-icon--Color, inherit);
9202
9205
  }
9203
9206
 
@@ -13163,6 +13166,7 @@ label.pf-c-check, .pf-c-check__label,
13163
13166
  --pf-c-dropdown__toggle--PaddingRight: var(--pf-global--spacer--sm);
13164
13167
  --pf-c-dropdown__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
13165
13168
  --pf-c-dropdown__toggle--PaddingLeft: var(--pf-global--spacer--sm);
13169
+ --pf-c-dropdown__toggle--ColumnGap: var(--pf-global--spacer--sm);
13166
13170
  --pf-c-dropdown__toggle--MinWidth: 0;
13167
13171
  --pf-c-dropdown__toggle--FontSize: var(--pf-global--FontSize--md);
13168
13172
  --pf-c-dropdown__toggle--FontWeight: var(--pf-global--FontWeight--normal);
@@ -13247,8 +13251,9 @@ label.pf-c-check, .pf-c-check__label,
13247
13251
  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth: var(--pf-global--BorderWidth--md);
13248
13252
  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth: var(--pf-global--BorderWidth--md);
13249
13253
  --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
13250
- --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
13251
- --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
13254
+ --pf-c-dropdown__toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
13255
+ --pf-c-dropdown__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
13256
+ --pf-c-dropdown__toggle-icon--MarginLeft: 0;
13252
13257
  --pf-c-dropdown--m-top--m-expanded__toggle-icon--Rotate: 180deg;
13253
13258
  --pf-c-dropdown--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
13254
13259
  --pf-c-dropdown--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
@@ -13287,11 +13292,10 @@ label.pf-c-check, .pf-c-check__label,
13287
13292
  --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
13288
13293
  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--normal);
13289
13294
  --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);
13290
- --pf-c-dropdown__toggle-image--MarginTop: 0;
13291
- --pf-c-dropdown__toggle-image--MarginBottom: 0;
13292
- --pf-c-dropdown__toggle-image--MarginRight: var(--pf-global--spacer--sm);
13293
13295
  --pf-c-dropdown--c-divider--MarginTop: var(--pf-global--spacer--sm);
13294
13296
  --pf-c-dropdown--c-divider--MarginBottom: var(--pf-global--spacer--sm);
13297
+ --pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingRight: 0;
13298
+ --pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft: 0;
13295
13299
  --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft: var(--pf-global--spacer--xs);
13296
13300
  --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight: 0;
13297
13301
  --pf-c-dropdown--c-menu--Top: calc(100% + var(--pf-global--spacer--xs));
@@ -13348,8 +13352,8 @@ label.pf-c-check, .pf-c-check__label,
13348
13352
  .pf-c-dropdown__toggle {
13349
13353
  position: relative;
13350
13354
  display: flex;
13355
+ column-gap: var(--pf-c-dropdown__toggle--ColumnGap);
13351
13356
  align-items: center;
13352
- justify-content: space-between;
13353
13357
  min-width: var(--pf-c-dropdown__toggle--MinWidth);
13354
13358
  max-width: 100%;
13355
13359
  padding: var(--pf-c-dropdown__toggle--PaddingTop) var(--pf-c-dropdown__toggle--PaddingRight) var(--pf-c-dropdown__toggle--PaddingBottom) var(--pf-c-dropdown__toggle--PaddingLeft);
@@ -13382,6 +13386,7 @@ label.pf-c-check, .pf-c-check__label,
13382
13386
  border: 0;
13383
13387
  }
13384
13388
  .pf-c-dropdown__toggle.pf-m-split-button {
13389
+ --pf-c-dropdown__toggle--ColumnGap: 0;
13385
13390
  padding: 0;
13386
13391
  }
13387
13392
  .pf-c-dropdown__toggle.pf-m-split-button:not(.pf-m-disabled) {
@@ -13592,8 +13597,9 @@ label.pf-c-check, .pf-c-check__label,
13592
13597
  border: 0;
13593
13598
  }
13594
13599
  .pf-c-dropdown__toggle > .pf-c-badge {
13600
+ --pf-c-dropdown__toggle-icon--PaddingRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingRight);
13601
+ --pf-c-dropdown__toggle-icon--PaddingLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft);
13595
13602
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
13596
- --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);
13597
13603
  }
13598
13604
  .pf-c-dropdown__toggle .pf-c-dropdown__toggle-text {
13599
13605
  overflow: hidden;
@@ -13602,11 +13608,13 @@ label.pf-c-check, .pf-c-check__label,
13602
13608
  }
13603
13609
 
13604
13610
  .pf-c-dropdown__toggle-text {
13605
- flex: 0 1 auto;
13611
+ flex: 1 1 auto;
13612
+ text-align: left;
13606
13613
  }
13607
13614
 
13608
13615
  .pf-c-dropdown__toggle-icon {
13609
- margin-right: var(--pf-c-dropdown__toggle-icon--MarginRight);
13616
+ padding-right: var(--pf-c-dropdown__toggle-icon--PaddingRight);
13617
+ padding-left: var(--pf-c-dropdown__toggle-icon--PaddingLeft);
13610
13618
  margin-left: var(--pf-c-dropdown__toggle-icon--MarginLeft);
13611
13619
  line-height: var(--pf-c-dropdown__toggle-icon--LineHeight);
13612
13620
  color: var(--pf-c-dropdown__toggle-icon--Color, inherit);
@@ -13619,14 +13627,8 @@ label.pf-c-check, .pf-c-check__label,
13619
13627
  display: inline-flex;
13620
13628
  flex-shrink: 0;
13621
13629
  align-self: center;
13622
- margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
13623
- margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
13624
- margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);
13625
13630
  line-height: 1;
13626
13631
  }
13627
- .pf-c-dropdown__toggle-image:last-child {
13628
- --pf-c-dropdown__toggle-image--MarginRight: 0;
13629
- }
13630
13632
 
13631
13633
  .pf-c-dropdown__toggle-progress {
13632
13634
  position: absolute;
@@ -20343,6 +20345,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20343
20345
  --pf-c-options-menu__toggle--PaddingRight: var(--pf-global--spacer--sm);
20344
20346
  --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
20345
20347
  --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm);
20348
+ --pf-c-options-menu__toggle--ColumnGap: var(--pf-global--spacer--sm);
20346
20349
  --pf-c-options-menu__toggle--MinWidth: 0;
20347
20350
  --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
20348
20351
  --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
@@ -20363,8 +20366,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20363
20366
  --pf-c-options-menu__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
20364
20367
  --pf-c-options-menu__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
20365
20368
  --pf-c-options-menu__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
20366
- --pf-c-options-menu__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
20367
- --pf-c-options-menu__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
20369
+ --pf-c-options-menu__toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
20370
+ --pf-c-options-menu__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
20368
20371
  --pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate: 180deg;
20369
20372
  --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
20370
20373
  --pf-c-options-menu--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
@@ -20446,8 +20449,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20446
20449
  .pf-c-options-menu__toggle {
20447
20450
  position: relative;
20448
20451
  display: flex;
20452
+ column-gap: var(--pf-c-options-menu__toggle--ColumnGap);
20449
20453
  align-items: center;
20450
- justify-content: space-between;
20451
20454
  min-width: var(--pf-c-options-menu__toggle--MinWidth);
20452
20455
  max-width: 100%;
20453
20456
  padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
@@ -20499,6 +20502,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20499
20502
  overflow: hidden;
20500
20503
  text-overflow: ellipsis;
20501
20504
  white-space: nowrap;
20505
+ flex: 1 1 auto;
20506
+ text-align: left;
20502
20507
  }
20503
20508
 
20504
20509
  .pf-c-options-menu__toggle-icon,
@@ -20507,8 +20512,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20507
20512
  }
20508
20513
 
20509
20514
  .pf-c-options-menu__toggle-icon {
20510
- margin-right: var(--pf-c-options-menu__toggle-icon--MarginRight);
20511
- margin-left: var(--pf-c-options-menu__toggle-icon--MarginLeft);
20515
+ padding-right: var(--pf-c-options-menu__toggle-icon--PaddingRight);
20516
+ padding-left: var(--pf-c-options-menu__toggle-icon--PaddingLeft);
20512
20517
  }
20513
20518
  .pf-c-options-menu.pf-m-top.pf-m-expanded .pf-c-options-menu__toggle-icon {
20514
20519
  transform: rotate(var(--pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate));