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

package/components/ContextSelector/context-selector.css

@@ -14,6 +14,7 @@
   --pf-c-context-selector__toggle--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-context-selector__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
   --pf-c-context-selector__toggle--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-context-selector__toggle--ColumnGap: var(--pf-global--spacer--sm);
   --pf-c-context-selector__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-context-selector__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
   --pf-c-context-selector__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
@@ -37,8 +38,8 @@
   --pf-c-context-selector__toggle-text--FontSize: var(--pf-global--FontSize--md);
   --pf-c-context-selector__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-context-selector__toggle-text--LineHeight: var(--pf-global--LineHeight--md);
-  --pf-c-context-selector__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-context-selector__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
+  --pf-c-context-selector__toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-context-selector__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-context-selector--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
   --pf-c-context-selector--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
   --pf-c-context-selector__menu--Top: calc(100% + var(--pf-global--spacer--xs));
@@ -170,8 +171,8 @@
 .pf-c-context-selector__toggle {
   position: relative;
   display: flex;
+  column-gap: var(--pf-c-context-selector__toggle--ColumnGap);
   align-items: center;
-  justify-content: space-between;
   width: 100%;
   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);
   color: var(--pf-c-context-selector__toggle--Color);
@@ -230,14 +231,16 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  flex: 1 1 auto;
   font-size: var(--pf-c-context-selector__toggle-text--FontSize);
   font-weight: var(--pf-c-context-selector__toggle-text--FontWeight);
   line-height: var(--pf-c-context-selector__toggle-text--LineHeight);
+  text-align: left;
 }
 
 .pf-c-context-selector__toggle-icon {
-  margin-right: var(--pf-c-context-selector__toggle-icon--MarginRight);
-  margin-left: var(--pf-c-context-selector__toggle-icon--MarginLeft);
+  padding-right: var(--pf-c-context-selector__toggle-icon--PaddingRight);
+  padding-left: var(--pf-c-context-selector__toggle-icon--PaddingLeft);
   color: var(--pf-c-context-selector__toggle-icon--Color, inherit);
 }
 

package/components/ContextSelector/context-selector.scss

@@ -7,6 +7,7 @@
   --pf-c-context-selector__toggle--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-context-selector__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
   --pf-c-context-selector__toggle--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-context-selector__toggle--ColumnGap: var(--pf-global--spacer--sm);
   --pf-c-context-selector__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-context-selector__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
   --pf-c-context-selector__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
@@ -34,8 +35,8 @@
   --pf-c-context-selector__toggle-text--LineHeight: var(--pf-global--LineHeight--md);
 
   // Toggle icon arrow
-  --pf-c-context-selector__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-context-selector__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
+  --pf-c-context-selector__toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-context-selector__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-context-selector--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
   --pf-c-context-selector--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
 
@@ -194,8 +195,8 @@
 .pf-c-context-selector__toggle {
   position: relative;
   display: flex;
+  column-gap: var(--pf-c-context-selector__toggle--ColumnGap);
   align-items: center;
-  justify-content: space-between;
   width: 100%;
   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);
   color: var(--pf-c-context-selector__toggle--Color);
@@ -279,15 +280,17 @@
   .pf-c-context-selector__toggle-text {
     @include pf-text-overflow;
 
+    flex: 1 1 auto;
     font-size: var(--pf-c-context-selector__toggle-text--FontSize);
     font-weight: var(--pf-c-context-selector__toggle-text--FontWeight);
     line-height: var(--pf-c-context-selector__toggle-text--LineHeight);
+    text-align: left;
   }
 }
 
 .pf-c-context-selector__toggle-icon {
-  margin-right: var(--pf-c-context-selector__toggle-icon--MarginRight);
-  margin-left: var(--pf-c-context-selector__toggle-icon--MarginLeft);
+  padding-right: var(--pf-c-context-selector__toggle-icon--PaddingRight);
+  padding-left: var(--pf-c-context-selector__toggle-icon--PaddingLeft);
   color: var(--pf-c-context-selector__toggle-icon--Color, inherit);
 }
 

package/components/Dropdown/dropdown.css

@@ -3,6 +3,7 @@
   --pf-c-dropdown__toggle--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-dropdown__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
   --pf-c-dropdown__toggle--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-dropdown__toggle--ColumnGap: var(--pf-global--spacer--sm);
   --pf-c-dropdown__toggle--MinWidth: 0;
   --pf-c-dropdown__toggle--FontSize: var(--pf-global--FontSize--md);
   --pf-c-dropdown__toggle--FontWeight: var(--pf-global--FontWeight--normal);
@@ -87,8 +88,9 @@
   --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth: var(--pf-global--BorderWidth--md);
   --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth: var(--pf-global--BorderWidth--md);
   --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
-  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
+  --pf-c-dropdown__toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-dropdown__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-dropdown__toggle-icon--MarginLeft: 0;
   --pf-c-dropdown--m-top--m-expanded__toggle-icon--Rotate: 180deg;
   --pf-c-dropdown--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
   --pf-c-dropdown--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
@@ -127,11 +129,10 @@
   --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
   --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);
-  --pf-c-dropdown__toggle-image--MarginTop: 0;
-  --pf-c-dropdown__toggle-image--MarginBottom: 0;
-  --pf-c-dropdown__toggle-image--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-dropdown--c-divider--MarginTop: var(--pf-global--spacer--sm);
   --pf-c-dropdown--c-divider--MarginBottom: var(--pf-global--spacer--sm);
+  --pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingRight: 0;
+  --pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft: 0;
   --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft: var(--pf-global--spacer--xs);
   --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight: 0;
   --pf-c-dropdown--c-menu--Top: calc(100% + var(--pf-global--spacer--xs));
@@ -188,8 +189,8 @@
 .pf-c-dropdown__toggle {
   position: relative;
   display: flex;
+  column-gap: var(--pf-c-dropdown__toggle--ColumnGap);
   align-items: center;
-  justify-content: space-between;
   min-width: var(--pf-c-dropdown__toggle--MinWidth);
   max-width: 100%;
   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 @@
   border: 0;
 }
 .pf-c-dropdown__toggle.pf-m-split-button {
+  --pf-c-dropdown__toggle--ColumnGap: 0;
   padding: 0;
 }
 .pf-c-dropdown__toggle.pf-m-split-button:not(.pf-m-disabled) {
@@ -432,8 +434,9 @@
   border: 0;
 }
 .pf-c-dropdown__toggle > .pf-c-badge {
+  --pf-c-dropdown__toggle-icon--PaddingRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingRight);
+  --pf-c-dropdown__toggle-icon--PaddingLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft);
   --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
-  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);
 }
 .pf-c-dropdown__toggle .pf-c-dropdown__toggle-text {
   overflow: hidden;
@@ -442,11 +445,13 @@
 }
 
 .pf-c-dropdown__toggle-text {
-  flex: 0 1 auto;
+  flex: 1 1 auto;
+  text-align: left;
 }
 
 .pf-c-dropdown__toggle-icon {
-  margin-right: var(--pf-c-dropdown__toggle-icon--MarginRight);
+  padding-right: var(--pf-c-dropdown__toggle-icon--PaddingRight);
+  padding-left: var(--pf-c-dropdown__toggle-icon--PaddingLeft);
   margin-left: var(--pf-c-dropdown__toggle-icon--MarginLeft);
   line-height: var(--pf-c-dropdown__toggle-icon--LineHeight);
   color: var(--pf-c-dropdown__toggle-icon--Color, inherit);
@@ -459,14 +464,8 @@
   display: inline-flex;
   flex-shrink: 0;
   align-self: center;
-  margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
-  margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
-  margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);
   line-height: 1;
 }
-.pf-c-dropdown__toggle-image:last-child {
-  --pf-c-dropdown__toggle-image--MarginRight: 0;
-}
 
 .pf-c-dropdown__toggle-progress {
   position: absolute;

package/components/Dropdown/dropdown.scss

@@ -6,6 +6,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   --pf-c-dropdown__toggle--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-dropdown__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
   --pf-c-dropdown__toggle--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-dropdown__toggle--ColumnGap: var(--pf-global--spacer--sm);
   --pf-c-dropdown__toggle--MinWidth: 0;
   --pf-c-dropdown__toggle--FontSize: var(--pf-global--FontSize--md);
   --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", "
 
   // Toggle Arrow
   --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
-  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
+  --pf-c-dropdown__toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-dropdown__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-dropdown__toggle-icon--MarginLeft: 0;
   --pf-c-dropdown--m-top--m-expanded__toggle-icon--Rotate: 180deg;
   --pf-c-dropdown--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
   --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", "
   --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);
 
-  // Image
-  --pf-c-dropdown__toggle-image--MarginTop: 0; // remove at breaking change
-  --pf-c-dropdown__toggle-image--MarginBottom: 0; // remove at breaking change
-  --pf-c-dropdown__toggle-image--MarginRight: var(--pf-global--spacer--sm);
-
   // Divider
   --pf-c-dropdown--c-divider--MarginTop: var(--pf-global--spacer--sm);
   --pf-c-dropdown--c-divider--MarginBottom: var(--pf-global--spacer--sm);
 
   // badge toggle icon
+  --pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingRight: 0;
+  --pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft: 0;
   --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft: var(--pf-global--spacer--xs);
   --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight: 0;
 
@@ -245,8 +244,8 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
 .pf-c-dropdown__toggle {
   position: relative;
   display: flex;
+  column-gap: var(--pf-c-dropdown__toggle--ColumnGap);
   align-items: center;
-  justify-content: space-between;
   min-width: var(--pf-c-dropdown__toggle--MinWidth);
   max-width: 100%;
   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", "
   }
 
   &.pf-m-split-button {
+    --pf-c-dropdown__toggle--ColumnGap: 0;
+
     padding: 0;
 
     &:not(.pf-m-disabled) {
@@ -596,8 +597,9 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   }
 
   > .pf-c-badge {
+    --pf-c-dropdown__toggle-icon--PaddingRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingRight);
+    --pf-c-dropdown__toggle-icon--PaddingLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft);
     --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
-    --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);
   }
 
   .pf-c-dropdown__toggle-text {
@@ -606,11 +608,13 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
 }
 
 .pf-c-dropdown__toggle-text {
-  flex: 0 1 auto;
+  flex: 1 1 auto;
+  text-align: left;
 }
 
 .pf-c-dropdown__toggle-icon {
-  margin-right: var(--pf-c-dropdown__toggle-icon--MarginRight);
+  padding-right: var(--pf-c-dropdown__toggle-icon--PaddingRight);
+  padding-left: var(--pf-c-dropdown__toggle-icon--PaddingLeft);
   margin-left: var(--pf-c-dropdown__toggle-icon--MarginLeft);
   line-height: var(--pf-c-dropdown__toggle-icon--LineHeight);
   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", "
   display: inline-flex;
   flex-shrink: 0;
   align-self: center;
-  margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
-  margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
-  margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);
   line-height: 1;
-
-  &:last-child {
-    --pf-c-dropdown__toggle-image--MarginRight: 0;
-  }
 }
 
 // Loading spinner

package/components/OptionsMenu/options-menu.css

@@ -4,6 +4,7 @@
   --pf-c-options-menu__toggle--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
   --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-options-menu__toggle--ColumnGap: var(--pf-global--spacer--sm);
   --pf-c-options-menu__toggle--MinWidth: 0;
   --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
@@ -24,8 +25,8 @@
   --pf-c-options-menu__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
   --pf-c-options-menu__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-options-menu__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-options-menu__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-options-menu__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
+  --pf-c-options-menu__toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-options-menu__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate: 180deg;
   --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
   --pf-c-options-menu--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
@@ -107,8 +108,8 @@
 .pf-c-options-menu__toggle {
   position: relative;
   display: flex;
+  column-gap: var(--pf-c-options-menu__toggle--ColumnGap);
   align-items: center;
-  justify-content: space-between;
   min-width: var(--pf-c-options-menu__toggle--MinWidth);
   max-width: 100%;
   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 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  flex: 1 1 auto;
+  text-align: left;
 }
 
 .pf-c-options-menu__toggle-icon,
@@ -168,8 +171,8 @@
 }
 
 .pf-c-options-menu__toggle-icon {
-  margin-right: var(--pf-c-options-menu__toggle-icon--MarginRight);
-  margin-left: var(--pf-c-options-menu__toggle-icon--MarginLeft);
+  padding-right: var(--pf-c-options-menu__toggle-icon--PaddingRight);
+  padding-left: var(--pf-c-options-menu__toggle-icon--PaddingLeft);
 }
 .pf-c-options-menu.pf-m-top.pf-m-expanded .pf-c-options-menu__toggle-icon {
   transform: rotate(var(--pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate));

package/components/OptionsMenu/options-menu.scss

@@ -5,6 +5,7 @@
   --pf-c-options-menu__toggle--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
   --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-options-menu__toggle--ColumnGap: var(--pf-global--spacer--sm);
   --pf-c-options-menu__toggle--MinWidth: 0;
   --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
@@ -27,8 +28,8 @@
   --pf-c-options-menu__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
 
   // Toggle arrow
-  --pf-c-options-menu__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-options-menu__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
+  --pf-c-options-menu__toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-options-menu__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate: 180deg;
   --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
   --pf-c-options-menu--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
@@ -136,8 +137,8 @@
 .pf-c-options-menu__toggle {
   position: relative;
   display: flex;
+  column-gap: var(--pf-c-options-menu__toggle--ColumnGap);
   align-items: center;
-  justify-content: space-between;
   min-width: var(--pf-c-options-menu__toggle--MinWidth);
   max-width: 100%;
   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 @@
 
 .pf-c-options-menu__toggle-text {
   @include pf-text-overflow;
+
+  flex: 1 1 auto;
+  text-align: left;
 }
 
 .pf-c-options-menu__toggle-icon,
@@ -214,8 +218,8 @@
 }
 
 .pf-c-options-menu__toggle-icon {
-  margin-right: var(--pf-c-options-menu__toggle-icon--MarginRight);
-  margin-left: var(--pf-c-options-menu__toggle-icon--MarginLeft);
+  padding-right: var(--pf-c-options-menu__toggle-icon--PaddingRight);
+  padding-left: var(--pf-c-options-menu__toggle-icon--PaddingLeft);
 
   .pf-c-options-menu.pf-m-top.pf-m-expanded & {
     transform: rotate(var(--pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate));

package/docs/components/CalendarMonth/examples/CalendarMonth.md

@@ -1,6 +1,7 @@
 ---
 id: 'Calendar month'
 section: components
+subsection: date-and-time
 cssPrefix: pf-c-calendar-month
 ---## Examples
 

package/docs/components/DatePicker/examples/DatePicker.md

@@ -1,6 +1,5 @@
 ---
 id: 'Date picker'
-beta: true
 section: components
 subsection: date-and-time
 cssPrefix: pf-c-date-picker

package/docs/components/Dropdown/examples/Dropdown.md

@@ -997,7 +997,7 @@ cssPrefix: pf-c-dropdown
 
 ### Split button (progress checkbox)
 
-```html isBeta
+```html
 <div class="pf-c-dropdown">
   <div class="pf-c-dropdown__toggle pf-m-split-button">
     <label

package/docs/components/Icon/examples/Icon.md

@@ -1,6 +1,5 @@
 ---
 id: 'Icon'
-beta: true
 section: components
 cssPrefix: pf-c-icon
 ---## Examples

package/docs/components/LogViewer/examples/LogViewer.md

@@ -1,6 +1,5 @@
 ---
 id: 'Log viewer'
-beta: true
 section: extensions
 cssPrefix: pf-c-log-viewer
 ---import './LogViewer.css';

package/docs/components/ProgressStepper/examples/ProgressStepper.md

@@ -1,6 +1,5 @@
 ---
 id: 'Progress stepper'
-beta: true
 section: components
 cssPrefix: pf-c-progress-stepper
 ---## Examples

package/docs/components/SearchInput/examples/SearchInput.md

@@ -1,6 +1,5 @@
 ---
 id: 'Search input'
-beta: true
 section: components
 cssPrefix: pf-c-search-input
 ---import './SearchInput.css'

package/docs/components/Tabs/examples/Tabs.md

@@ -220,7 +220,7 @@ cssPrefix: pf-c-tabs
 
 ### Horizontal overflow example
 
-```html isBeta
+```html
 <div class="pf-c-tabs pf-m-overflow" id="horizontal-overflow">
   <ul class="pf-c-tabs__list">
     <li class="pf-c-tabs__item">
@@ -297,7 +297,7 @@ cssPrefix: pf-c-tabs
 
 ### Horizontal overflow expanded example
 
-```html isBeta
+```html
 <div class="pf-c-tabs pf-m-overflow" id="horizontal-overflow-expanded">
   <ul class="pf-c-tabs__list">
     <li class="pf-c-tabs__item">
@@ -375,7 +375,7 @@ cssPrefix: pf-c-tabs
 
 ### Horizontal overflow selected example
 
-```html isBeta
+```html
 <div class="pf-c-tabs pf-m-overflow" id="horizontal-overflow-selected">
   <ul class="pf-c-tabs__list">
     <li class="pf-c-tabs__item">
@@ -2585,7 +2585,7 @@ cssPrefix: pf-c-tabs
 
 ### Help button example
 
-```html isBeta
+```html
 <div class="pf-c-tabs pf-m-scrollable" id="help-button-default-example">
   <button
     class="pf-c-tabs__scroll-button"
@@ -3713,7 +3713,7 @@ cssPrefix: pf-c-tabs
 
 ### Close button example
 
-```html isBeta
+```html
 <div class="pf-c-tabs pf-m-scrollable" id="close-button-default-example">
   <button
     class="pf-c-tabs__scroll-button"
@@ -4841,7 +4841,7 @@ cssPrefix: pf-c-tabs
 
 ### Help and close button example
 
-```html isBeta
+```html
 <div class="pf-c-tabs pf-m-scrollable" id="help-close-button-default-example">
   <button
     class="pf-c-tabs__scroll-button"

package/docs/components/TextInputGroup/examples/TextInputGroup.md

@@ -1,6 +1,5 @@
 ---
 id: 'Text input group'
-beta: true
 section: components
 cssPrefix: pf-c-text-input-group
 ---import './TextInputGroup.css'

package/docs/components/Tile/examples/Tile.md

@@ -1,7 +1,6 @@
 ---
 id: Tile
 section: components
-beta: true
 cssPrefix: pf-c-tile
 ---import './Tile.css'
 
@@ -9,7 +8,7 @@ cssPrefix: pf-c-tile
 
 ### Basic tiles
 
-```html isBeta
+```html
 <div class="pf-c-tile" tabindex="0">
   <div class="pf-c-tile__header">
     <div class="pf-c-tile__title">Default</div>

package/docs/components/Truncate/examples/Truncate.md

@@ -1,6 +1,5 @@
 ---
 id: 'Truncate'
-beta: true
 section: components
 cssPrefix: pf-c-truncate
 ---import './Truncate.css'

package/docs/demos/Page/examples/Page.md

@@ -917,7 +917,7 @@ wrapperTag: div
 
 Using the `.pf-m-full-height` modifier class on the page component eliminates the need to ensure that the `<html>` and `<body>` tags, and any other ancestors of `.pf-c-page`, have height set to 100%.
 
-```html isFullscreen isBeta
+```html isFullscreen
 <div class="pf-c-page pf-m-full-height" id="page-demo-full-height">
   <div class="pf-c-skip-to-content">
     <a

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "5.0.0-alpha.34",
+  "version": "5.0.0-alpha.36",
   "keywords": [],
   "license": "MIT",
   "scripts": {