@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/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));