@patternfly/patternfly 6.5.0-prerelease.8 → 6.5.0-prerelease.81

package/components/NotificationDrawer/notification-drawer.css

@@ -14,6 +14,7 @@
   --pf-v6-c-notification-drawer__header-status--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-notification-drawer__header-status--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-notification-drawer__header-status--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v6-c-notification-drawer__header-action--Gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
   --pf-v6-c-notification-drawer__body--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-notification-drawer__body--PaddingBlockStart: 0;
   --pf-v6-c-notification-drawer__body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -27,6 +28,7 @@
   --pf-v6-c-notification-drawer__list-item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-notification-drawer__list-item--BorderWidth: var(--pf-t--global--border--width--box--status--default);
   --pf-v6-c-notification-drawer__list-item--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v6-c-notification-drawer__list-item--OutlineOffset: -0.25rem;
   --pf-v6-c-notification-drawer__list-item--m-info__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--info--default);
   --pf-v6-c-notification-drawer__list-item--m-info__list-item--BorderColor: var(--pf-t--global--border--color--status--info--default);
   --pf-v6-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
@@ -69,7 +71,7 @@
   --pf-v6-c-notification-drawer__group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-notification-drawer__group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-notification-drawer__group-toggle-icon--Transition: transform var(--pf-v6-c-notification-drawer__group-toggle-icon--TransitionDuration) var(--pf-v6-c-notification-drawer__group-toggle-icon--TransitionTimingFunction);
-  --pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: 90deg;
+  --pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: -180deg;
 }
 
 .pf-v6-c-notification-drawer {
@@ -108,6 +110,7 @@
 
 .pf-v6-c-notification-drawer__header-action {
   display: flex;
+  gap: var(--pf-v6-c-notification-drawer__header-action--Gap);
   align-items: center;
   margin-inline-start: auto;
 }
@@ -136,8 +139,16 @@
   padding-inline-start: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineEnd);
   background-color: var(--pf-v6-c-notification-drawer__list-item--BackgroundColor);
-  border: var(--pf-v6-c-notification-drawer__list-item--BorderWidth) solid var(--pf-v6-c-notification-drawer__list-item--BorderColor);
   border-radius: var(--pf-v6-c-notification-drawer__list-item--BorderRadius);
+  outline-offset: var(--pf-v6-c-notification-drawer__list-item--OutlineOffset);
+}
+.pf-v6-c-notification-drawer__list-item::before {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  border: var(--pf-v6-c-notification-drawer__list-item--BorderWidth) solid var(--pf-v6-c-notification-drawer__list-item--BorderColor);
+  border-radius: inherit;
 }
 .pf-v6-c-notification-drawer__list-item.pf-m-info {
   --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-info__list-item--BorderColor);
@@ -163,7 +174,6 @@
   --pf-v6-c-notification-drawer__list-item--BorderWidth: var(--pf-v6-c-notification-drawer__list-item--m-read--BorderWidth);
   --pf-v6-c-notification-drawer__list-item--BackgroundColor: var(--pf-v6-c-notification-drawer__list-item--m-read--BackgroundColor);
   --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-read--BorderColor);
-  position: relative;
 }
 .pf-v6-c-notification-drawer__list-item.pf-m-hoverable {
   cursor: pointer;
@@ -191,9 +201,9 @@
 }
 .pf-v6-c-notification-drawer__list-item-header-title.pf-m-truncate {
   display: -webkit-box;
+  overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--pf-v6-c-notification-drawer__list-item-header-title--max-lines);
-  overflow: hidden;
 }
 
 .pf-v6-c-notification-drawer__list-item-action {
@@ -247,9 +257,9 @@
 
 .pf-v6-c-notification-drawer__group-toggle-title {
   display: -webkit-box;
+  overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--pf-v6-c-notification-drawer__group-toggle-title--max-lines);
-  overflow: hidden;
   flex: 1;
   margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-title--MarginInlineEnd);
   font-size: var(--pf-v6-c-notification-drawer__group-toggle-title--FontSize);
@@ -262,15 +272,15 @@
   margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd);
 }
 
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-notification-drawer__group-toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v6-c-notification-drawer__group-toggle-icon {
   margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd);
   color: var(--pf-v6-c-notification-drawer__group-toggle-icon--Color);
   transition: var(--pf-v6-c-notification-drawer__group-toggle-icon--Transition);
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-notification-drawer__group-toggle-icon {
-  scale: -1 1;
-}
-
 .pf-v6-c-notification-drawer__group.pf-m-expanded .pf-v6-c-notification-drawer__group-toggle-icon {
   transform: rotate(var(--pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
 }

package/components/NotificationDrawer/notification-drawer.scss

@@ -18,6 +18,7 @@
   --#{$notification-drawer}__header-status--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --#{$notification-drawer}__header-status--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$notification-drawer}__header-status--Color: var(--pf-t--global--text--color--subtle);
+  --#{$notification-drawer}__header-action--Gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
 
   // Body
   --#{$notification-drawer}__body--ZIndex: var(--pf-t--global--z-index--xs);
@@ -37,6 +38,7 @@
   --#{$notification-drawer}__list-item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$notification-drawer}__list-item--BorderWidth: var(--pf-t--global--border--width--box--status--default);
   --#{$notification-drawer}__list-item--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --#{$notification-drawer}__list-item--OutlineOffset: #{pf-size-prem(-4px)};
 
   // List item modifiers
   --#{$notification-drawer}__list-item--m-info__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--info--default);
@@ -104,7 +106,7 @@
   --#{$notification-drawer}__group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$notification-drawer}__group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --#{$notification-drawer}__group-toggle-icon--Transition: transform var(--#{$notification-drawer}__group-toggle-icon--TransitionDuration) var(--#{$notification-drawer}__group-toggle-icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
-  --#{$notification-drawer}__group--m-expanded__group-toggle-icon--Rotate: 90deg;
+  --#{$notification-drawer}__group--m-expanded__group-toggle-icon--Rotate: -180deg;
 }
 
 .#{$notification-drawer} {
@@ -143,6 +145,7 @@
 
 .#{$notification-drawer}__header-action {
   display: flex;
+  gap: var(--#{$notification-drawer}__header-action--Gap);
   align-items: center;
   margin-inline-start: auto;
 }
@@ -171,8 +174,17 @@
   padding-inline-start: var(--#{$notification-drawer}__list-item--PaddingInlineStart);
   padding-inline-end: var(--#{$notification-drawer}__list-item--PaddingInlineEnd);
   background-color: var(--#{$notification-drawer}__list-item--BackgroundColor);
-  border: var(--#{$notification-drawer}__list-item--BorderWidth) solid var(--#{$notification-drawer}__list-item--BorderColor);
   border-radius: var(--#{$notification-drawer}__list-item--BorderRadius);
+  outline-offset: var(--#{$notification-drawer}__list-item--OutlineOffset);
+
+  &::before {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    content: '';
+    border: var(--#{$notification-drawer}__list-item--BorderWidth) solid var(--#{$notification-drawer}__list-item--BorderColor);
+    border-radius: inherit;
+  }
 
   &.pf-m-info {
     --#{$notification-drawer}__list-item--BorderColor: var(--#{$notification-drawer}__list-item--m-info__list-item--BorderColor);
@@ -203,8 +215,6 @@
     --#{$notification-drawer}__list-item--BorderWidth: var(--#{$notification-drawer}__list-item--m-read--BorderWidth);
     --#{$notification-drawer}__list-item--BackgroundColor: var(--#{$notification-drawer}__list-item--m-read--BackgroundColor);
     --#{$notification-drawer}__list-item--BorderColor: var(--#{$notification-drawer}__list-item--m-read--BorderColor);
-
-    position: relative;
   }
 
   &.pf-m-hoverable {
@@ -316,4 +326,3 @@
     transform: rotate(var(--#{$notification-drawer}__group--m-expanded__group-toggle-icon--Rotate));
   }
 }
-

package/components/OverflowMenu/overflow-menu.css

@@ -1,15 +1,26 @@
 .pf-v6-c-overflow-menu {
   --pf-v6-c-overflow-menu--ColumnGap: var(--pf-t--global--spacer--md);
+  --pf-v6-c-overflow-menu--RowGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-overflow-menu__group--ColumnGap: var(--pf-t--global--spacer--md);
+  --pf-v6-c-overflow-menu__group--RowGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-overflow-menu__group--m-button-group--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-overflow-menu__group--m-button-group--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-overflow-menu__group--m-icon-button-group--ColumnGap: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-overflow-menu__group--m-icon-button-group--RowGap: var(--pf-t--global--spacer--xs);
 }
 
 .pf-v6-c-overflow-menu {
   display: inline-flex;
+  row-gap: var(--pf-v6-c-overflow-menu--RowGap);
   column-gap: var(--pf-v6-c-overflow-menu--ColumnGap);
 }
 
+.pf-v6-c-overflow-menu.pf-m-vertical,
+.pf-v6-c-overflow-menu.pf-m-vertical .pf-v6-c-overflow-menu__content,
+.pf-v6-c-overflow-menu.pf-m-vertical .pf-v6-c-overflow-menu__group {
+  flex-direction: column;
+}
+
 .pf-v6-c-overflow-menu__content,
 .pf-v6-c-overflow-menu__group {
   display: flex;
@@ -17,20 +28,25 @@
 }
 
 .pf-v6-c-overflow-menu__group {
+  row-gap: var(--pf-v6-c-overflow-menu__group--RowGap);
   column-gap: var(--pf-v6-c-overflow-menu__group--ColumnGap);
 }
 .pf-v6-c-overflow-menu__group.pf-m-button-group {
+  row-gap: var(--pf-v6-c-overflow-menu__group--m-button-group--RowGap);
   column-gap: var(--pf-v6-c-overflow-menu__group--m-button-group--ColumnGap);
 }
 .pf-v6-c-overflow-menu__group.pf-m-icon-button-group {
+  row-gap: var(--pf-v6-c-overflow-menu__group--m-icon-button-group--RowGap);
   column-gap: var(--pf-v6-c-overflow-menu__group--m-icon-button-group--ColumnGap);
 }
 
 .pf-v6-c-overflow-menu__item {
+  row-gap: var(--pf-v6-c-overflow-menu__item--RowGap, var(--pf-v6-c-overflow-menu--RowGap));
   column-gap: var(--pf-v6-c-overflow-menu__item--ColumnGap, var(--pf-v6-c-overflow-menu--ColumnGap));
 }
 
 .pf-v6-c-overflow-menu__content,
 .pf-v6-c-overflow-menu__control {
+  row-gap: var(--pf-v6-c-overflow-menu--RowGap);
   column-gap: var(--pf-v6-c-overflow-menu--ColumnGap);
 }

package/components/OverflowMenu/overflow-menu.scss

@@ -2,23 +2,37 @@
 
 @include pf-root($overflow-menu) {
   --#{$overflow-menu}--ColumnGap: var(--pf-t--global--spacer--md);
+  --#{$overflow-menu}--RowGap: var(--pf-t--global--spacer--md);
 
   // * Overflow menu group
   --#{$overflow-menu}__group--ColumnGap: var(--pf-t--global--spacer--md);
+  --#{$overflow-menu}__group--RowGap: var(--pf-t--global--spacer--md);
 
   // * Overflow menu button group
   --#{$overflow-menu}__group--m-button-group--ColumnGap: var(--pf-t--global--spacer--sm);
+  --#{$overflow-menu}__group--m-button-group--RowGap: var(--pf-t--global--spacer--sm);
 
   // * Overflow menu icon button group
   --#{$overflow-menu}__group--m-icon-button-group--ColumnGap: var(--pf-t--global--spacer--xs);
+  --#{$overflow-menu}__group--m-icon-button-group--RowGap: var(--pf-t--global--spacer--xs);
 }
 
 // - Overflow menu
 .#{$overflow-menu} {
   display: inline-flex;
+  row-gap: var(--#{$overflow-menu}--RowGap);
   column-gap: var(--#{$overflow-menu}--ColumnGap);
 }
 
+// - Overflow menu - vertical
+.#{$overflow-menu}.pf-m-vertical {
+  &,
+  .#{$overflow-menu}__content,
+  .#{$overflow-menu}__group {
+    flex-direction: column;
+  }
+}
+
 // - Overflow menu content - Overflow menu group
 .#{$overflow-menu}__content,
 .#{$overflow-menu}__group {
@@ -28,26 +42,31 @@
 
 // - Overflow menu group
 .#{$overflow-menu}__group {
+  row-gap: var(--#{$overflow-menu}__group--RowGap);
   column-gap: var(--#{$overflow-menu}__group--ColumnGap);
-
+  
   // - Overflow menu button group
   &.pf-m-button-group {
+    row-gap: var(--#{$overflow-menu}__group--m-button-group--RowGap);
     column-gap: var(--#{$overflow-menu}__group--m-button-group--ColumnGap);
   }
 
   // - Overflow menu icon button group
   &.pf-m-icon-button-group {
+    row-gap: var(--#{$overflow-menu}__group--m-icon-button-group--RowGap);
     column-gap: var(--#{$overflow-menu}__group--m-icon-button-group--ColumnGap);
   }
 }
 
 // - Oveflow menu item
 .#{$overflow-menu}__item {
+  row-gap: var(--#{$overflow-menu}__item--RowGap, var(--#{$overflow-menu}--RowGap));
   column-gap: var(--#{$overflow-menu}__item--ColumnGap, var(--#{$overflow-menu}--ColumnGap));
 }
 
 // - Overflow menu content - Overflow menu control
 .#{$overflow-menu}__content,
 .#{$overflow-menu}__control  {
+  row-gap: var(--#{$overflow-menu}--RowGap);
   column-gap: var(--#{$overflow-menu}--ColumnGap);
 }