@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.70

package/components/OptionsMenu/options-menu.css

@@ -71,8 +71,8 @@
   max-width: 100%;
 }
 .pf-v5-c-options-menu .pf-v5-c-divider {
-  margin-top: var(--pf-v5-c-options-menu--c-divider--MarginTop);
-  margin-bottom: var(--pf-v5-c-options-menu--c-divider--MarginBottom);
+  margin-block-start: var(--pf-v5-c-options-menu--c-divider--MarginTop);
+  margin-block-end: var(--pf-v5-c-options-menu--c-divider--MarginBottom);
 }
 .pf-v5-c-options-menu .pf-v5-c-divider:last-child {
   --pf-v5-c-options-menu--c-divider--MarginBottom: 0;
@@ -81,13 +81,16 @@
 .pf-v5-c-options-menu__toggle:not(.pf-m-plain)::before,
 .pf-v5-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-v5-c-options-menu__toggle-button::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   content: "";
   border: var(--pf-v5-c-options-menu__toggle--BorderWidth) solid;
-  border-color: var(--pf-v5-c-options-menu__toggle--BorderTopColor) var(--pf-v5-c-options-menu__toggle--BorderRightColor) var(--pf-v5-c-options-menu__toggle--BorderBottomColor) var(--pf-v5-c-options-menu__toggle--BorderLeftColor);
+  border-block-start-color: var(--pf-v5-c-options-menu__toggle--BorderTopColor);
+  border-block-end-color: var(--pf-v5-c-options-menu__toggle--BorderBottomColor);
+  border-inline-start-color: var(--pf-v5-c-options-menu__toggle--BorderLeftColor);
+  border-inline-end-color: var(--pf-v5-c-options-menu__toggle--BorderRightColor);
 }
 .pf-v5-c-options-menu__toggle:not(.pf-m-plain):hover::before,
 .pf-v5-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-v5-c-options-menu__toggle-button:hover::before {
@@ -97,12 +100,12 @@
 .pf-v5-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-v5-c-options-menu__toggle-button:active::before,
 .pf-v5-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-v5-c-options-menu__toggle-button.pf-m-active::before {
   --pf-v5-c-options-menu__toggle--BorderBottomColor: var(--pf-v5-c-options-menu__toggle--active--BorderBottomColor);
-  border-bottom-width: var(--pf-v5-c-options-menu__toggle--active--BorderBottomWidth);
+  border-block-end-width: var(--pf-v5-c-options-menu__toggle--active--BorderBottomWidth);
 }
 .pf-v5-c-options-menu__toggle:not(.pf-m-plain):focus::before,
 .pf-v5-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-v5-c-options-menu__toggle-button:focus::before {
   --pf-v5-c-options-menu__toggle--BorderBottomColor: var(--pf-v5-c-options-menu__toggle--focus--BorderBottomColor);
-  border-bottom-width: var(--pf-v5-c-options-menu__toggle--focus--BorderBottomWidth);
+  border-block-end-width: var(--pf-v5-c-options-menu__toggle--focus--BorderBottomWidth);
 }
 
 .pf-v5-c-options-menu__toggle {
@@ -112,14 +115,17 @@
   align-items: center;
   min-width: var(--pf-v5-c-options-menu__toggle--MinWidth);
   max-width: 100%;
-  padding: var(--pf-v5-c-options-menu__toggle--PaddingTop) var(--pf-v5-c-options-menu__toggle--PaddingRight) var(--pf-v5-c-options-menu__toggle--PaddingBottom) var(--pf-v5-c-options-menu__toggle--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-options-menu__toggle--PaddingTop);
+  padding-block-end: var(--pf-v5-c-options-menu__toggle--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-options-menu__toggle--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-options-menu__toggle--PaddingRight);
   color: var(--pf-v5-c-options-menu__toggle--Color);
   background-color: var(--pf-v5-c-options-menu__toggle--BackgroundColor);
   border: none;
 }
 .pf-v5-c-options-menu.pf-m-expanded > .pf-v5-c-options-menu__toggle::before {
   --pf-v5-c-options-menu__toggle--BorderBottomColor: var(--pf-v5-c-options-menu__toggle--expanded--BorderBottomColor);
-  border-bottom-width: var(--pf-v5-c-options-menu__toggle--expanded--BorderBottomWidth);
+  border-block-end-width: var(--pf-v5-c-options-menu__toggle--expanded--BorderBottomWidth);
 }
 .pf-v5-c-options-menu__toggle.pf-m-plain {
   --pf-v5-c-options-menu__toggle-icon--Color: var(--pf-v5-c-options-menu--m-plain__toggle-icon--Color);
@@ -152,7 +158,10 @@
 }
 
 .pf-v5-c-options-menu__toggle-button {
-  padding: var(--pf-v5-c-options-menu__toggle-button--PaddingTop) var(--pf-v5-c-options-menu__toggle-button--PaddingRight) var(--pf-v5-c-options-menu__toggle-button--PaddingBottom) var(--pf-v5-c-options-menu__toggle-button--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-options-menu__toggle-button--PaddingTop);
+  padding-block-end: var(--pf-v5-c-options-menu__toggle-button--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-options-menu__toggle-button--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-options-menu__toggle-button--PaddingRight);
   background-color: var(--pf-v5-c-options-menu__toggle-button--BackgroundColor);
   border: 0;
 }
@@ -162,7 +171,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   flex: 1 1 auto;
-  text-align: left;
+  text-align: start;
 }
 
 .pf-v5-c-options-menu__toggle-icon,
@@ -171,8 +180,8 @@
 }
 
 .pf-v5-c-options-menu__toggle-icon {
-  padding-right: var(--pf-v5-c-options-menu__toggle-icon--PaddingRight);
-  padding-left: var(--pf-v5-c-options-menu__toggle-icon--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-options-menu__toggle-icon--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-options-menu__toggle-icon--PaddingRight);
 }
 .pf-v5-c-options-menu.pf-m-top.pf-m-expanded .pf-v5-c-options-menu__toggle-icon {
   transform: rotate(var(--pf-v5-c-options-menu--m-top--m-expanded__toggle-icon--Rotate));
@@ -180,17 +189,17 @@
 
 .pf-v5-c-options-menu__menu {
   position: absolute;
-  top: var(--pf-v5-c-options-menu__menu--Top);
+  inset-block-start: var(--pf-v5-c-options-menu__menu--Top);
   z-index: var(--pf-v5-c-options-menu__menu--ZIndex);
   min-width: 100%;
-  padding-top: var(--pf-v5-c-options-menu__menu--PaddingTop);
-  padding-bottom: var(--pf-v5-c-options-menu__menu--PaddingBottom);
+  padding-block-start: var(--pf-v5-c-options-menu__menu--PaddingTop);
+  padding-block-end: var(--pf-v5-c-options-menu__menu--PaddingBottom);
   background-color: var(--pf-v5-c-options-menu__menu--BackgroundColor);
   background-clip: padding-box;
   box-shadow: var(--pf-v5-c-options-menu__menu--BoxShadow);
 }
 .pf-v5-c-options-menu__menu.pf-m-align-right {
-  right: 0;
+  inset-inline-end: 0;
 }
 .pf-v5-c-options-menu.pf-m-top .pf-v5-c-options-menu__menu {
   --pf-v5-c-options-menu__menu--Top: var(--pf-v5-c-options-menu--m-top__menu--Top);
@@ -199,10 +208,10 @@
 .pf-v5-c-options-menu__menu.pf-m-static {
   --pf-v5-c-options-menu--m-top__menu--TranslateY: 0;
   position: static;
-  top: auto;
-  right: auto;
-  bottom: auto;
-  left: auto;
+  inset-block-start: auto;
+  inset-block-end: auto;
+  inset-inline-start: auto;
+  inset-inline-end: auto;
   z-index: auto;
   min-width: min-content;
 }
@@ -211,7 +220,10 @@
   display: flex;
   align-items: baseline;
   width: 100%;
-  padding: var(--pf-v5-c-options-menu__menu-item--PaddingTop) var(--pf-v5-c-options-menu__menu-item--PaddingRight) var(--pf-v5-c-options-menu__menu-item--PaddingBottom) var(--pf-v5-c-options-menu__menu-item--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-options-menu__menu-item--PaddingTop);
+  padding-block-end: var(--pf-v5-c-options-menu__menu-item--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-options-menu__menu-item--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-options-menu__menu-item--PaddingRight);
   font-size: var(--pf-v5-c-options-menu__menu-item--FontSize);
   color: var(--pf-v5-c-options-menu__menu-item--Color);
   white-space: nowrap;
@@ -231,21 +243,21 @@
 .pf-v5-c-options-menu__menu-item-icon {
   align-self: center;
   width: auto;
-  padding-left: var(--pf-v5-c-options-menu__menu-item-icon--PaddingLeft);
-  margin-left: auto;
+  padding-inline-start: var(--pf-v5-c-options-menu__menu-item-icon--PaddingLeft);
+  margin-inline-start: auto;
   font-size: var(--pf-v5-c-options-menu__menu-item-icon--FontSize);
   color: var(--pf-v5-c-options-menu__menu-item-icon--Color);
 }
 
 .pf-v5-c-options-menu__group + .pf-v5-c-options-menu__group {
-  padding-top: var(--pf-v5-c-options-menu__group--group--PaddingTop);
+  padding-block-start: var(--pf-v5-c-options-menu__group--group--PaddingTop);
 }
 
 .pf-v5-c-options-menu__group-title {
-  padding-top: var(--pf-v5-c-options-menu__group-title--PaddingTop);
-  padding-right: var(--pf-v5-c-options-menu__group-title--PaddingRight);
-  padding-bottom: var(--pf-v5-c-options-menu__group-title--PaddingBottom);
-  padding-left: var(--pf-v5-c-options-menu__group-title--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-options-menu__group-title--PaddingTop);
+  padding-block-end: var(--pf-v5-c-options-menu__group-title--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-options-menu__group-title--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-options-menu__group-title--PaddingRight);
   font-size: var(--pf-v5-c-options-menu__group-title--FontSize);
   font-weight: var(--pf-v5-c-options-menu__group-title--FontWeight);
   color: var(--pf-v5-c-options-menu__group-title--Color);

package/components/OptionsMenu/options-menu.scss

@@ -89,8 +89,8 @@
   max-width: 100%;
 
   .#{$divider} {
-    margin-top: var(--#{$options-menu}--c-divider--MarginTop);
-    margin-bottom: var(--#{$options-menu}--c-divider--MarginBottom);
+    margin-block-start: var(--#{$options-menu}--c-divider--MarginTop);
+    margin-block-end: var(--#{$options-menu}--c-divider--MarginBottom);
 
     // Support divider as last item in group to separate groups
     &:last-child {
@@ -103,13 +103,16 @@
 .#{$options-menu}.pf-m-text:not(.pf-m-plain) .#{$options-menu}__toggle-button {
   &::before {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     content: "";
     border: var(--#{$options-menu}__toggle--BorderWidth) solid;
-    border-color: var(--#{$options-menu}__toggle--BorderTopColor) var(--#{$options-menu}__toggle--BorderRightColor) var(--#{$options-menu}__toggle--BorderBottomColor) var(--#{$options-menu}__toggle--BorderLeftColor);
+    border-block-start-color: var(--#{$options-menu}__toggle--BorderTopColor);
+    border-block-end-color: var(--#{$options-menu}__toggle--BorderBottomColor);
+    border-inline-start-color: var(--#{$options-menu}__toggle--BorderLeftColor);
+    border-inline-end-color: var(--#{$options-menu}__toggle--BorderRightColor);
   }
 
   &:hover {
@@ -123,7 +126,7 @@
     &::before {
       --#{$options-menu}__toggle--BorderBottomColor: var(--#{$options-menu}__toggle--active--BorderBottomColor);
 
-      border-bottom-width: var(--#{$options-menu}__toggle--active--BorderBottomWidth);
+      border-block-end-width: var(--#{$options-menu}__toggle--active--BorderBottomWidth);
     }
   }
 
@@ -131,7 +134,7 @@
     &::before {
       --#{$options-menu}__toggle--BorderBottomColor: var(--#{$options-menu}__toggle--focus--BorderBottomColor);
 
-      border-bottom-width: var(--#{$options-menu}__toggle--focus--BorderBottomWidth);
+      border-block-end-width: var(--#{$options-menu}__toggle--focus--BorderBottomWidth);
     }
   }
 }
@@ -143,7 +146,10 @@
   align-items: center;
   min-width: var(--#{$options-menu}__toggle--MinWidth);
   max-width: 100%;
-  padding: var(--#{$options-menu}__toggle--PaddingTop) var(--#{$options-menu}__toggle--PaddingRight) var(--#{$options-menu}__toggle--PaddingBottom) var(--#{$options-menu}__toggle--PaddingLeft);
+  padding-block-start: var(--#{$options-menu}__toggle--PaddingTop);
+  padding-block-end: var(--#{$options-menu}__toggle--PaddingBottom);
+  padding-inline-start: var(--#{$options-menu}__toggle--PaddingLeft);
+  padding-inline-end: var(--#{$options-menu}__toggle--PaddingRight);
   color: var(--#{$options-menu}__toggle--Color);
   background-color: var(--#{$options-menu}__toggle--BackgroundColor);
   border: none;
@@ -152,7 +158,7 @@
     &::before {
       --#{$options-menu}__toggle--BorderBottomColor: var(--#{$options-menu}__toggle--expanded--BorderBottomColor);
 
-      border-bottom-width: var(--#{$options-menu}__toggle--expanded--BorderBottomWidth);
+      border-block-end-width: var(--#{$options-menu}__toggle--expanded--BorderBottomWidth);
     }
   }
 
@@ -202,7 +208,10 @@
 }
 
 .#{$options-menu}__toggle-button {
-  padding: var(--#{$options-menu}__toggle-button--PaddingTop) var(--#{$options-menu}__toggle-button--PaddingRight) var(--#{$options-menu}__toggle-button--PaddingBottom) var(--#{$options-menu}__toggle-button--PaddingLeft);
+  padding-block-start: var(--#{$options-menu}__toggle-button--PaddingTop);
+  padding-block-end: var(--#{$options-menu}__toggle-button--PaddingBottom);
+  padding-inline-start: var(--#{$options-menu}__toggle-button--PaddingLeft);
+  padding-inline-end: var(--#{$options-menu}__toggle-button--PaddingRight);
   background-color: var(--#{$options-menu}__toggle-button--BackgroundColor);
   border: 0;
 }
@@ -211,7 +220,7 @@
   @include pf-v5-text-overflow;
 
   flex: 1 1 auto;
-  text-align: left;
+  text-align: start;
 }
 
 .#{$options-menu}__toggle-icon,
@@ -220,8 +229,8 @@
 }
 
 .#{$options-menu}__toggle-icon {
-  padding-right: var(--#{$options-menu}__toggle-icon--PaddingRight);
-  padding-left: var(--#{$options-menu}__toggle-icon--PaddingLeft);
+  padding-inline-start: var(--#{$options-menu}__toggle-icon--PaddingLeft);
+  padding-inline-end: var(--#{$options-menu}__toggle-icon--PaddingRight);
 
   .#{$options-menu}.pf-m-top.pf-m-expanded & {
     transform: rotate(var(--#{$options-menu}--m-top--m-expanded__toggle-icon--Rotate));
@@ -230,17 +239,17 @@
 
 .#{$options-menu}__menu {
   position: absolute;
-  top: var(--#{$options-menu}__menu--Top);
+ inset-block-start: var(--#{$options-menu}__menu--Top);
   z-index: var(--#{$options-menu}__menu--ZIndex);
   min-width: 100%;
-  padding-top: var(--#{$options-menu}__menu--PaddingTop);
-  padding-bottom: var(--#{$options-menu}__menu--PaddingBottom);
+  padding-block-start: var(--#{$options-menu}__menu--PaddingTop);
+  padding-block-end: var(--#{$options-menu}__menu--PaddingBottom);
   background-color: var(--#{$options-menu}__menu--BackgroundColor);
   background-clip: padding-box;
   box-shadow: var(--#{$options-menu}__menu--BoxShadow);
 
   &.pf-m-align-right {
-    right: 0;
+   inset-inline-end: 0;
   }
 
   .#{$options-menu}.pf-m-top & {
@@ -253,10 +262,10 @@
     --#{$options-menu}--m-top__menu--TranslateY: 0;
 
     position: static;
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
+    inset-block-start: auto;
+    inset-block-end: auto;
+    inset-inline-start: auto;
+    inset-inline-end: auto;
     z-index: auto;
     min-width: min-content;
   }
@@ -266,7 +275,10 @@
   display: flex;
   align-items: baseline;
   width: 100%;
-  padding: var(--#{$options-menu}__menu-item--PaddingTop) var(--#{$options-menu}__menu-item--PaddingRight) var(--#{$options-menu}__menu-item--PaddingBottom) var(--#{$options-menu}__menu-item--PaddingLeft);
+  padding-block-start: var(--#{$options-menu}__menu-item--PaddingTop);
+  padding-block-end: var(--#{$options-menu}__menu-item--PaddingBottom);
+  padding-inline-start: var(--#{$options-menu}__menu-item--PaddingLeft);
+  padding-inline-end: var(--#{$options-menu}__menu-item--PaddingRight);
   font-size: var(--#{$options-menu}__menu-item--FontSize);
   color: var(--#{$options-menu}__menu-item--Color);
   white-space: nowrap;
@@ -290,23 +302,23 @@
 .#{$options-menu}__menu-item-icon {
   align-self: center;
   width: auto; // this allows the padding to apply when this class is used with an svg element
-  padding-left: var(--#{$options-menu}__menu-item-icon--PaddingLeft);
-  margin-left: auto;
+  padding-inline-start: var(--#{$options-menu}__menu-item-icon--PaddingLeft);
+  margin-inline-start: auto;
   font-size: var(--#{$options-menu}__menu-item-icon--FontSize);
   color: var(--#{$options-menu}__menu-item-icon--Color);
 }
 
 .#{$options-menu}__group {
   & + & {
-    padding-top: var(--#{$options-menu}__group--group--PaddingTop);
+    padding-block-start: var(--#{$options-menu}__group--group--PaddingTop);
   }
 }
 
 .#{$options-menu}__group-title {
-  padding-top: var(--#{$options-menu}__group-title--PaddingTop);
-  padding-right: var(--#{$options-menu}__group-title--PaddingRight);
-  padding-bottom: var(--#{$options-menu}__group-title--PaddingBottom);
-  padding-left: var(--#{$options-menu}__group-title--PaddingLeft);
+  padding-block-start: var(--#{$options-menu}__group-title--PaddingTop);
+  padding-block-end: var(--#{$options-menu}__group-title--PaddingBottom);
+  padding-inline-start: var(--#{$options-menu}__group-title--PaddingLeft);
+  padding-inline-end: var(--#{$options-menu}__group-title--PaddingRight);
   font-size: var(--#{$options-menu}__group-title--FontSize);
   font-weight: var(--#{$options-menu}__group-title--FontWeight);
   color: var(--#{$options-menu}__group-title--Color);

package/components/OverflowMenu/overflow-menu.css

@@ -1,66 +1,36 @@
+:root {
+  --pf-v5-c-overflow-menu--ColumnGap: var(--pf-t--global--spacer--md);
+  --pf-v5-c-overflow-menu__group--ColumnGap: var(--pf-t--global--spacer--md);
+  --pf-v5-c-overflow-menu__group--m-button-group--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-overflow-menu__group--m-icon-button-group--ColumnGap: var(--pf-t--global--spacer--xs);
+}
+
 .pf-v5-c-overflow-menu {
-  --pf-v5-c-overflow-menu--spacer--base: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-overflow-menu--spacer: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-overflow-menu__group--spacer: var(--pf-v5-c-overflow-menu--spacer--base);
-  --pf-v5-c-overflow-menu__item--spacer: var(--pf-v5-c-overflow-menu--spacer--base);
-  --pf-v5-c-overflow-menu--c-divider--m-vertical--spacer: var(--pf-v5-c-overflow-menu--spacer--base);
-  --pf-v5-c-overflow-menu__group--m-button-group--spacer: var(--pf-v5-c-overflow-menu--spacer--base);
-  --pf-v5-c-overflow-menu__group--m-button-group--space-items: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-overflow-menu__group--m-icon-button-group--spacer: var(--pf-v5-c-overflow-menu--spacer--base);
-  --pf-v5-c-overflow-menu__group--m-icon-button-group--space-items: 0;
   display: inline-flex;
-  align-items: center;
+  column-gap: var(--pf-v5-c-overflow-menu--ColumnGap);
 }
 
-.pf-v5-c-overflow-menu__content {
+.pf-v5-c-overflow-menu__content,
+.pf-v5-c-overflow-menu__group {
   display: flex;
-  align-items: center;
+  align-items: start;
 }
 
 .pf-v5-c-overflow-menu__group {
-  --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu__group--spacer);
-  display: flex;
-  align-items: center;
+  column-gap: var(--pf-v5-c-overflow-menu__group--ColumnGap);
 }
 .pf-v5-c-overflow-menu__group.pf-m-button-group {
-  --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu__group--m-button-group--spacer);
-}
-.pf-v5-c-overflow-menu__group.pf-m-button-group > * {
-  --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu__group--m-button-group--space-items);
+  column-gap: var(--pf-v5-c-overflow-menu__group--m-button-group--ColumnGap);
 }
 .pf-v5-c-overflow-menu__group.pf-m-icon-button-group {
-  --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu__group--m-icon-button-group--spacer);
-}
-.pf-v5-c-overflow-menu__group.pf-m-icon-button-group > * {
-  --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu__group--m-icon-button-group--space-items);
+  column-gap: var(--pf-v5-c-overflow-menu__group--m-icon-button-group--ColumnGap);
 }
 
 .pf-v5-c-overflow-menu__item {
-  --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu__item--spacer);
+  column-gap: var(--pf-v5-c-overflow-menu__item--ColumnGap, var(--pf-v5-c-overflow-menu--ColumnGap));
 }
 
 .pf-v5-c-overflow-menu__content,
-.pf-v5-c-overflow-menu__control,
-.pf-v5-c-overflow-menu__group,
-.pf-v5-c-overflow-menu__item {
-  margin-right: var(--pf-v5-c-overflow-menu--spacer);
-}
-.pf-v5-c-overflow-menu__content:last-child,
-.pf-v5-c-overflow-menu__control:last-child,
-.pf-v5-c-overflow-menu__group:last-child,
-.pf-v5-c-overflow-menu__item:last-child {
-  --pf-v5-c-overflow-menu--spacer: 0;
-}
-
-.pf-v5-c-overflow-menu > .pf-v5-c-divider,
-.pf-v5-c-overflow-menu__group > .pf-v5-c-divider {
-  --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu--c-divider--m-vertical--spacer);
-}
-.pf-v5-c-overflow-menu > .pf-v5-c-divider.pf-m-vertical,
-.pf-v5-c-overflow-menu__group > .pf-v5-c-divider.pf-m-vertical {
-  margin-right: var(--pf-v5-c-overflow-menu--spacer);
-}
-.pf-v5-c-overflow-menu > .pf-v5-c-divider.pf-m-vertical:last-child,
-.pf-v5-c-overflow-menu__group > .pf-v5-c-divider.pf-m-vertical:last-child {
-  --pf-v5-c-overflow-menu--spacer: 0;
+.pf-v5-c-overflow-menu__control {
+  column-gap: var(--pf-v5-c-overflow-menu--ColumnGap);
 }

package/components/OverflowMenu/overflow-menu.scss

@@ -1,89 +1,51 @@
-// @debug $overflow-menu; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+:root {
+  --#{$overflow-menu}--ColumnGap: var(--pf-t--global--spacer--md);
 
-.#{$overflow-menu} {
-  // Base spacer - shared value
-  --#{$overflow-menu}--spacer--base: var(--#{$pf-global}--spacer--md);
-
-  // Spacer values
-  --#{$overflow-menu}--spacer: var(--#{$pf-global}--spacer--sm);
-  --#{$overflow-menu}__group--spacer: var(--#{$overflow-menu}--spacer--base);
-  --#{$overflow-menu}__item--spacer: var(--#{$overflow-menu}--spacer--base);
-  --#{$overflow-menu}--c-divider--m-vertical--spacer: var(--#{$overflow-menu}--spacer--base);
+  // * Overflow menu group
+  --#{$overflow-menu}__group--ColumnGap: var(--pf-t--global--spacer--md);
 
-  // Button group
-  --#{$overflow-menu}__group--m-button-group--spacer: var(--#{$overflow-menu}--spacer--base);
-  --#{$overflow-menu}__group--m-button-group--space-items: var(--#{$pf-global}--spacer--sm);
+  // * Overflow menu button group
+  --#{$overflow-menu}__group--m-button-group--ColumnGap: var(--pf-t--global--spacer--sm);
 
-  // Icon button group
-  --#{$overflow-menu}__group--m-icon-button-group--spacer: var(--#{$overflow-menu}--spacer--base);
-  --#{$overflow-menu}__group--m-icon-button-group--space-items: 0;
+  // * Overflow menu icon button group
+  --#{$overflow-menu}__group--m-icon-button-group--ColumnGap: var(--pf-t--global--spacer--xs);
+}
 
+// - Overflow menu
+.#{$overflow-menu} {
   display: inline-flex;
-  align-items: center;
+  column-gap: var(--#{$overflow-menu}--ColumnGap);
 }
 
-// Content
-.#{$overflow-menu}__content {
+// - Overflow menu content - Overflow menu group
+.#{$overflow-menu}__content,
+.#{$overflow-menu}__group {
   display: flex;
-  align-items: center;
+  align-items: start;
 }
 
-// Group
+// - Overflow menu group
 .#{$overflow-menu}__group {
-  --#{$overflow-menu}--spacer: var(--#{$overflow-menu}__group--spacer);
-
-  display: flex;
-  align-items: center;
+  column-gap: var(--#{$overflow-menu}__group--ColumnGap);
 
-  // Button group
+  // - Overflow menu button group
   &.pf-m-button-group {
-    --#{$overflow-menu}--spacer: var(--#{$overflow-menu}__group--m-button-group--spacer);
-
-    > * {
-      --#{$overflow-menu}--spacer: var(--#{$overflow-menu}__group--m-button-group--space-items);
-    }
+    column-gap: var(--#{$overflow-menu}__group--m-button-group--ColumnGap);
   }
 
-  // Icon button group
+  // - Overflow menu icon button group
   &.pf-m-icon-button-group {
-    --#{$overflow-menu}--spacer: var(--#{$overflow-menu}__group--m-icon-button-group--spacer);
-
-    > * {
-      --#{$overflow-menu}--spacer: var(--#{$overflow-menu}__group--m-icon-button-group--space-items);
-    }
+    column-gap: var(--#{$overflow-menu}__group--m-icon-button-group--ColumnGap);
   }
 }
 
-// Item
+// - Oveflow menu item
 .#{$overflow-menu}__item {
-  // reset spacer
-  --#{$overflow-menu}--spacer: var(--#{$overflow-menu}__item--spacer);
+  column-gap: var(--#{$overflow-menu}__item--ColumnGap, var(--#{$overflow-menu}--ColumnGap));
 }
 
+// - Overflow menu content - Overflow menu control
 .#{$overflow-menu}__content,
-.#{$overflow-menu}__control,
-.#{$overflow-menu}__group,
-.#{$overflow-menu}__item {
-  margin-right: var(--#{$overflow-menu}--spacer);
-
-  &:last-child {
-    --#{$overflow-menu}--spacer: 0;
-  }
-}
-
-// Divider
-.#{$overflow-menu},
-.#{$overflow-menu}__group {
-  // set this var here so specificity is 20
-  > .#{$divider} {
-    --#{$overflow-menu}--spacer: var(--#{$overflow-menu}--c-divider--m-vertical--spacer);
-  }
-
-  > .#{$divider}.pf-m-vertical {
-    margin-right: var(--#{$overflow-menu}--spacer);
-
-    &:last-child {
-      --#{$overflow-menu}--spacer: 0;
-    }
-  }
+.#{$overflow-menu}__control  {
+  column-gap: var(--#{$overflow-menu}--ColumnGap);
 }