Skip to content

fix(notification-drawer): add spacing between header actions#8085

Merged
mcoker merged 2 commits intopatternfly:mainfrom
tarunvashishth:fix/notification-drawer-header-spacing
Feb 4, 2026
Merged

fix(notification-drawer): add spacing between header actions#8085
mcoker merged 2 commits intopatternfly:mainfrom
tarunvashishth:fix/notification-drawer-header-spacing

Conversation

@tarunvashishth
Copy link
Contributor

@tarunvashishth tarunvashishth commented Feb 2, 2026 •
edited by coderabbitai bot
Loading

Fixes #7366

Adds the missing spacing token between notification drawer header actions.

Summary by CodeRabbit

  • Style
    • Improved spacing and alignment of notification drawer header actions for more consistent visual rhythm and easier scanning of header controls across screen sizes.

@coderabbitai
Copy link

coderabbitai bot commented Feb 2, 2026 •
edited
Loading

Walkthrough

Adds a new CSS custom property --notification-drawer__header-action--Gap and applies it to .notification-drawer__header-action to provide consistent spacing between header action items in the Notification Drawer component.

Changes

Cohort / File(s) Summary
Notification Drawer Styling
src/patternfly/components/NotificationDrawer/notification-drawer.scss		 Adds --notification-drawer__header-action--Gap and sets gap: var(--notification-drawer__header-action--Gap) on .notification-drawer__header-action to introduce spacing between header actions.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The pull request title follows conventional commit guidelines with proper prefix 'fix' and clearly describes the change made to the notification drawer.
Linked Issues check ✅ Passed The PR successfully addresses the linked issue #7366 by applying the required spacing token --pf-t--global--spacer--gap--action-to-action--plain between header action items.
Out of Scope Changes check ✅ Passed All changes in the pull request are scoped to the notification drawer header spacing issue; no out-of-scope modifications are present.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@patternfly-build
Copy link
Collaborator

patternfly-build commented Feb 2, 2026 •
edited
Loading

Preview: https://pf-pr-8085.surge.sh

A11y report: https://pf-pr-8085-a11y.surge.sh

coderabbitai[bot]
coderabbitai bot reviewed Feb 2, 2026
View reviewed changes
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents 
In `@src/patternfly/components/NotificationDrawer/notification-drawer.scss`:
- Around line 145-150: In the .#{$notification-drawer}__header-action rule the
CSS property order violates the linter (gap must appear before align-items);
reorder the declarations so gap:
var(--#{$notification-drawer}__header-action--Gap); appears before align-items:
center; (keeping display and margin-inline-start where they are) to satisfy the
order/properties-order rule.

@tarunvashishth tarunvashishth mentioned this pull request Feb 2, 2026
Closed
mcoker
mcoker approved these changes Feb 4, 2026
View reviewed changes
Copy link
Contributor

@mcoker mcoker left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏 Thank you for the PR @tarunvashishth!

@mcoker mcoker merged commit bec5763 into patternfly:main Feb 4, 2026
5 checks passed
@patternfly-build
Copy link
Collaborator

patternfly-build commented Feb 4, 2026

🎉 This PR is included in version 6.5.0-prerelease.36 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@coderabbitai coderabbitai[bot] coderabbitai[bot] left review comments

@mcoker mcoker mcoker approved these changes

Assignees

No one assigned

Labels

released on @prerelease

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Bug - Notification drawer - no space between header actions

3 participants

@tarunvashishth @patternfly-build @mcoker