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

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 (23) 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/docs/components/CalendarMonth/examples/CalendarMonth.md +1 -0
  8. package/docs/components/DatePicker/examples/DatePicker.md +0 -1
  9. package/docs/components/Dropdown/examples/Dropdown.md +1 -1
  10. package/docs/components/Icon/examples/Icon.md +0 -1
  11. package/docs/components/LogViewer/examples/LogViewer.md +0 -1
  12. package/docs/components/ProgressStepper/examples/ProgressStepper.md +0 -1
  13. package/docs/components/SearchInput/examples/SearchInput.md +0 -1
  14. package/docs/components/Tabs/examples/Tabs.md +6 -6
  15. package/docs/components/TextInputGroup/examples/TextInputGroup.md +0 -1
  16. package/docs/components/Tile/examples/Tile.md +1 -2
  17. package/docs/components/Truncate/examples/Truncate.md +0 -1
  18. package/docs/demos/Page/examples/Page.md +1 -1
  19. package/package.json +1 -1
  20. package/patternfly-no-globals.css +30 -25
  21. package/patternfly.css +30 -25
  22. package/patternfly.min.css +1 -1
  23. package/patternfly.min.css.map +1 -1
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));
package/patternfly.css CHANGED
@@ -9091,6 +9091,7 @@ label.pf-c-check, .pf-c-check__label,
9091
9091
  --pf-c-context-selector__toggle--PaddingRight: var(--pf-global--spacer--sm);
9092
9092
  --pf-c-context-selector__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
9093
9093
  --pf-c-context-selector__toggle--PaddingLeft: var(--pf-global--spacer--sm);
9094
+ --pf-c-context-selector__toggle--ColumnGap: var(--pf-global--spacer--sm);
9094
9095
  --pf-c-context-selector__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
9095
9096
  --pf-c-context-selector__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
9096
9097
  --pf-c-context-selector__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
@@ -9114,8 +9115,8 @@ label.pf-c-check, .pf-c-check__label,
9114
9115
  --pf-c-context-selector__toggle-text--FontSize: var(--pf-global--FontSize--md);
9115
9116
  --pf-c-context-selector__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
9116
9117
  --pf-c-context-selector__toggle-text--LineHeight: var(--pf-global--LineHeight--md);
9117
- --pf-c-context-selector__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
9118
- --pf-c-context-selector__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
9118
+ --pf-c-context-selector__toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
9119
+ --pf-c-context-selector__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
9119
9120
  --pf-c-context-selector--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
9120
9121
  --pf-c-context-selector--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
9121
9122
  --pf-c-context-selector__menu--Top: calc(100% + var(--pf-global--spacer--xs));
@@ -9247,8 +9248,8 @@ label.pf-c-check, .pf-c-check__label,
9247
9248
  .pf-c-context-selector__toggle {
9248
9249
  position: relative;
9249
9250
  display: flex;
9251
+ column-gap: var(--pf-c-context-selector__toggle--ColumnGap);
9250
9252
  align-items: center;
9251
- justify-content: space-between;
9252
9253
  width: 100%;
9253
9254
  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);
9254
9255
  color: var(--pf-c-context-selector__toggle--Color);
@@ -9307,14 +9308,16 @@ label.pf-c-check, .pf-c-check__label,
9307
9308
  overflow: hidden;
9308
9309
  text-overflow: ellipsis;
9309
9310
  white-space: nowrap;
9311
+ flex: 1 1 auto;
9310
9312
  font-size: var(--pf-c-context-selector__toggle-text--FontSize);
9311
9313
  font-weight: var(--pf-c-context-selector__toggle-text--FontWeight);
9312
9314
  line-height: var(--pf-c-context-selector__toggle-text--LineHeight);
9315
+ text-align: left;
9313
9316
  }
9314
9317
 
9315
9318
  .pf-c-context-selector__toggle-icon {
9316
- margin-right: var(--pf-c-context-selector__toggle-icon--MarginRight);
9317
- margin-left: var(--pf-c-context-selector__toggle-icon--MarginLeft);
9319
+ padding-right: var(--pf-c-context-selector__toggle-icon--PaddingRight);
9320
+ padding-left: var(--pf-c-context-selector__toggle-icon--PaddingLeft);
9318
9321
  color: var(--pf-c-context-selector__toggle-icon--Color, inherit);
9319
9322
  }
9320
9323
 
@@ -13280,6 +13283,7 @@ label.pf-c-check, .pf-c-check__label,
13280
13283
  --pf-c-dropdown__toggle--PaddingRight: var(--pf-global--spacer--sm);
13281
13284
  --pf-c-dropdown__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
13282
13285
  --pf-c-dropdown__toggle--PaddingLeft: var(--pf-global--spacer--sm);
13286
+ --pf-c-dropdown__toggle--ColumnGap: var(--pf-global--spacer--sm);
13283
13287
  --pf-c-dropdown__toggle--MinWidth: 0;
13284
13288
  --pf-c-dropdown__toggle--FontSize: var(--pf-global--FontSize--md);
13285
13289
  --pf-c-dropdown__toggle--FontWeight: var(--pf-global--FontWeight--normal);
@@ -13364,8 +13368,9 @@ label.pf-c-check, .pf-c-check__label,
13364
13368
  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth: var(--pf-global--BorderWidth--md);
13365
13369
  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth: var(--pf-global--BorderWidth--md);
13366
13370
  --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
13367
- --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
13368
- --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
13371
+ --pf-c-dropdown__toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
13372
+ --pf-c-dropdown__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
13373
+ --pf-c-dropdown__toggle-icon--MarginLeft: 0;
13369
13374
  --pf-c-dropdown--m-top--m-expanded__toggle-icon--Rotate: 180deg;
13370
13375
  --pf-c-dropdown--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
13371
13376
  --pf-c-dropdown--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
@@ -13404,11 +13409,10 @@ label.pf-c-check, .pf-c-check__label,
13404
13409
  --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
13405
13410
  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--normal);
13406
13411
  --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);
13407
- --pf-c-dropdown__toggle-image--MarginTop: 0;
13408
- --pf-c-dropdown__toggle-image--MarginBottom: 0;
13409
- --pf-c-dropdown__toggle-image--MarginRight: var(--pf-global--spacer--sm);
13410
13412
  --pf-c-dropdown--c-divider--MarginTop: var(--pf-global--spacer--sm);
13411
13413
  --pf-c-dropdown--c-divider--MarginBottom: var(--pf-global--spacer--sm);
13414
+ --pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingRight: 0;
13415
+ --pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft: 0;
13412
13416
  --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft: var(--pf-global--spacer--xs);
13413
13417
  --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight: 0;
13414
13418
  --pf-c-dropdown--c-menu--Top: calc(100% + var(--pf-global--spacer--xs));
@@ -13465,8 +13469,8 @@ label.pf-c-check, .pf-c-check__label,
13465
13469
  .pf-c-dropdown__toggle {
13466
13470
  position: relative;
13467
13471
  display: flex;
13472
+ column-gap: var(--pf-c-dropdown__toggle--ColumnGap);
13468
13473
  align-items: center;
13469
- justify-content: space-between;
13470
13474
  min-width: var(--pf-c-dropdown__toggle--MinWidth);
13471
13475
  max-width: 100%;
13472
13476
  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);
@@ -13499,6 +13503,7 @@ label.pf-c-check, .pf-c-check__label,
13499
13503
  border: 0;
13500
13504
  }
13501
13505
  .pf-c-dropdown__toggle.pf-m-split-button {
13506
+ --pf-c-dropdown__toggle--ColumnGap: 0;
13502
13507
  padding: 0;
13503
13508
  }
13504
13509
  .pf-c-dropdown__toggle.pf-m-split-button:not(.pf-m-disabled) {
@@ -13709,8 +13714,9 @@ label.pf-c-check, .pf-c-check__label,
13709
13714
  border: 0;
13710
13715
  }
13711
13716
  .pf-c-dropdown__toggle > .pf-c-badge {
13717
+ --pf-c-dropdown__toggle-icon--PaddingRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingRight);
13718
+ --pf-c-dropdown__toggle-icon--PaddingLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft);
13712
13719
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
13713
- --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);
13714
13720
  }
13715
13721
  .pf-c-dropdown__toggle .pf-c-dropdown__toggle-text {
13716
13722
  overflow: hidden;
@@ -13719,11 +13725,13 @@ label.pf-c-check, .pf-c-check__label,
13719
13725
  }
13720
13726
 
13721
13727
  .pf-c-dropdown__toggle-text {
13722
- flex: 0 1 auto;
13728
+ flex: 1 1 auto;
13729
+ text-align: left;
13723
13730
  }
13724
13731
 
13725
13732
  .pf-c-dropdown__toggle-icon {
13726
- margin-right: var(--pf-c-dropdown__toggle-icon--MarginRight);
13733
+ padding-right: var(--pf-c-dropdown__toggle-icon--PaddingRight);
13734
+ padding-left: var(--pf-c-dropdown__toggle-icon--PaddingLeft);
13727
13735
  margin-left: var(--pf-c-dropdown__toggle-icon--MarginLeft);
13728
13736
  line-height: var(--pf-c-dropdown__toggle-icon--LineHeight);
13729
13737
  color: var(--pf-c-dropdown__toggle-icon--Color, inherit);
@@ -13736,14 +13744,8 @@ label.pf-c-check, .pf-c-check__label,
13736
13744
  display: inline-flex;
13737
13745
  flex-shrink: 0;
13738
13746
  align-self: center;
13739
- margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
13740
- margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
13741
- margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);
13742
13747
  line-height: 1;
13743
13748
  }
13744
- .pf-c-dropdown__toggle-image:last-child {
13745
- --pf-c-dropdown__toggle-image--MarginRight: 0;
13746
- }
13747
13749
 
13748
13750
  .pf-c-dropdown__toggle-progress {
13749
13751
  position: absolute;
@@ -20460,6 +20462,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20460
20462
  --pf-c-options-menu__toggle--PaddingRight: var(--pf-global--spacer--sm);
20461
20463
  --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
20462
20464
  --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm);
20465
+ --pf-c-options-menu__toggle--ColumnGap: var(--pf-global--spacer--sm);
20463
20466
  --pf-c-options-menu__toggle--MinWidth: 0;
20464
20467
  --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
20465
20468
  --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
@@ -20480,8 +20483,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20480
20483
  --pf-c-options-menu__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
20481
20484
  --pf-c-options-menu__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
20482
20485
  --pf-c-options-menu__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
20483
- --pf-c-options-menu__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
20484
- --pf-c-options-menu__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
20486
+ --pf-c-options-menu__toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
20487
+ --pf-c-options-menu__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
20485
20488
  --pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate: 180deg;
20486
20489
  --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
20487
20490
  --pf-c-options-menu--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
@@ -20563,8 +20566,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20563
20566
  .pf-c-options-menu__toggle {
20564
20567
  position: relative;
20565
20568
  display: flex;
20569
+ column-gap: var(--pf-c-options-menu__toggle--ColumnGap);
20566
20570
  align-items: center;
20567
- justify-content: space-between;
20568
20571
  min-width: var(--pf-c-options-menu__toggle--MinWidth);
20569
20572
  max-width: 100%;
20570
20573
  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);
@@ -20616,6 +20619,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20616
20619
  overflow: hidden;
20617
20620
  text-overflow: ellipsis;
20618
20621
  white-space: nowrap;
20622
+ flex: 1 1 auto;
20623
+ text-align: left;
20619
20624
  }
20620
20625
 
20621
20626
  .pf-c-options-menu__toggle-icon,
@@ -20624,8 +20629,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20624
20629
  }
20625
20630
 
20626
20631
  .pf-c-options-menu__toggle-icon {
20627
- margin-right: var(--pf-c-options-menu__toggle-icon--MarginRight);
20628
- margin-left: var(--pf-c-options-menu__toggle-icon--MarginLeft);
20632
+ padding-right: var(--pf-c-options-menu__toggle-icon--PaddingRight);
20633
+ padding-left: var(--pf-c-options-menu__toggle-icon--PaddingLeft);
20629
20634
  }
20630
20635
  .pf-c-options-menu.pf-m-top.pf-m-expanded .pf-c-options-menu__toggle-icon {
20631
20636
  transform: rotate(var(--pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate));