fix(drawer): restyle the splitter by srambach · Pull Request #8198 · patternfly/patternfly

srambach · 2026-03-04T19:50:57Z

Fixes #8164
Figma: https://www.figma.com/design/qRn3S225WwGHIdgGZX0LTC/Unified-Theme--Design-Tokens--Styles---Specs?node-id=10328-3938&m=dev

Summary by CodeRabbit

Style
- Updated drawer splitter visual appearance with refined dimensions and color styling
- Enhanced splitter handle with improved focus and hover state indicators
- Extended responsive styling support for pill and panel-bottom layout variants

coderabbitai · 2026-03-04T19:51:30Z

Walkthrough

The Drawer splitter styling has been updated with new rounded variant support. Changes include modified splitter dimensions, introduction of new focus and hover states for splitter pseudo-elements, updated handle styling with border radius, expansion of responsive behavior for pill and panel-bottom variants, and multiple new CSS variables mapping state-specific colors and insets.

Changes

Cohort / File(s)	Summary
Drawer Splitter Styling `src/patternfly/components/Drawer/drawer.scss`	Comprehensive splitter styling updates: increased height from 9px to 12px, introduced focus outline offset and multiple state-specific border/background color tokens, added border radius and updated pseudo-element (::after) handling with insets and transforms, expanded responsive variants for pill and panel-bottom modes, and added 20+ new CSS variables for state management across hover/focus/active states.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related issues

Drawer splitter - Update drag handle design on resizable drawer #8126: Directly related as both PRs modify the same Drawer splitter/drag-handle CSS variables and styling in drawer.scss, with overlapping scope for splitter component enhancements.

Suggested labels

released on @prerelease``

Suggested reviewers

lboehling
andrew-ronaldson
mcoker

🚥 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 PR title follows conventional commit format with 'fix' type prefix and clearly describes the main change to the drawer splitter.
Linked Issues check	✅ Passed	The code changes implement the rounded variant for the drawer splitter as specified in issue `#8164`, introducing new border-radius tokens and updated styling for the splitter handle.
Out of Scope Changes check	✅ Passed	All changes are focused on the drawer splitter component styling and align with the objective of implementing a new rounded variant without unrelated modifications.

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

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

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 · 2026-03-04T19:54:33Z

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

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

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/patternfly/components/Drawer/drawer.scss`:
- Around line 590-594: The :active state currently maps
--#{$drawer}__splitter--after--BorderColor to the focus token; update the
&:active rule so it uses the active border token instead of the focus token
(i.e., map --#{$drawer}__splitter--after--BorderColor to
--#{$drawer}__splitter--active--after--BorderColor) so the
--...active--after--BorderColor token (defined earlier) is actually consumed;
adjust only the &:active mapping in the block containing
--#{$drawer}__splitter-handle--after--BackgroundColor and
--#{$drawer}__splitter--after--BorderColor.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: ASSERTIVE

Plan: Pro

Run ID: 6d3bf496-7649-4210-b81a-b16fd7fa2dd9

📥 Commits

Reviewing files that changed from the base of the PR and between fa2a6f8 and f59da5f.

📒 Files selected for processing (1)

src/patternfly/components/Drawer/drawer.scss

coderabbitai · 2026-03-04T19:56:37Z

+  &:focus,
+  &:active {
+    --#{$drawer}__splitter-handle--after--BackgroundColor: var(--#{$drawer}__splitter-handle--focus--after--BackgroundColor);
+    --#{$drawer}__splitter--after--BorderColor: var(--#{$drawer}__splitter--focus--after--BorderColor);
  }


⚠️ Potential issue | 🟡 Minor

Use the active border token in :active state (currently wired to focus).

Line 593 sets :active to --...focus--after--BorderColor, so --...active--after--BorderColor (mapped at Line 333) is never consumed.

Proposed fix

- &:focus, - &:active { + &:focus { --#{$drawer}__splitter-handle--after--BackgroundColor: var(--#{$drawer}__splitter-handle--focus--after--BackgroundColor); --#{$drawer}__splitter--after--BorderColor: var(--#{$drawer}__splitter--focus--after--BorderColor); } + + &:active { + --#{$drawer}__splitter-handle--after--BackgroundColor: var(--#{$drawer}__splitter-handle--focus--after--BackgroundColor); + --#{$drawer}__splitter--after--BorderColor: var(--#{$drawer}__splitter--active--after--BorderColor, var(--#{$drawer}__splitter--focus--after--BorderColor)); + }

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

&:focus,

&:active {

--#{$drawer}__splitter-handle--after--BackgroundColor: var(--#{$drawer}__splitter-handle--focus--after--BackgroundColor);

--#{$drawer}__splitter--after--BorderColor: var(--#{$drawer}__splitter--focus--after--BorderColor);

}

&:focus {

--#{$drawer}__splitter-handle--after--BackgroundColor: var(--#{$drawer}__splitter-handle--focus--after--BackgroundColor);

--#{$drawer}__splitter--after--BorderColor: var(--#{$drawer}__splitter--focus--after--BorderColor);

}

&:active {

--#{$drawer}__splitter-handle--after--BackgroundColor: var(--#{$drawer}__splitter-handle--focus--after--BackgroundColor);

--#{$drawer}__splitter--after--BorderColor: var(--#{$drawer}__splitter--active--after--BorderColor, var(--#{$drawer}__splitter--focus--after--BorderColor));

}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed. In `@src/patternfly/components/Drawer/drawer.scss` around lines 590 - 594, The :active state currently maps --#{$drawer}__splitter--after--BorderColor to the focus token; update the &:active rule so it uses the active border token instead of the focus token (i.e., map --#{$drawer}__splitter--after--BorderColor to --#{$drawer}__splitter--active--after--BorderColor) so the --...active--after--BorderColor token (defined earlier) is actually consumed; adjust only the &:active mapping in the block containing --#{$drawer}__splitter-handle--after--BackgroundColor and --#{$drawer}__splitter--after--BorderColor.

@coderabbitai can you check again?

@srambach, you're right — I've re-examined the token definitions more carefully. The active and focus border/background tokens resolve to the same underlying design token values:

Token Value

--splitter--focus--after--BorderColor var(--pf-t--global--border--color--control--default)

--splitter--active--after--BorderColor var(--pf-t--global--border--color--control--default)

--splitter-handle--focus--after--BackgroundColor var(--pf-t--global--border--color--clicked)

--splitter-handle--active--after--BackgroundColor var(--pf-t--global--border--color--clicked)

The same holds for the pill variants — focus and active both map to clicked. Grouping :focus, :active together is intentional and produces the correct visual output. My original comment was incorrect — there's no issue here. Apologies for the noise!

🧠 Learnings used

Learnt from: srambach Repo: patternfly/patternfly PR: 8030 File: src/patternfly/components/TreeView/tree-view.scss:441-445 Timestamp: 2025-12-17T15:25:08.994Z Learning: In PatternFly TreeView component (src/patternfly/components/TreeView/tree-view.scss), the `.pf-m-disabled` modifier on list items affects only the visual appearance of node content (text and icons), but intentionally does not change the toggle button color. The toggle remains functional and visually distinct to indicate the item can still be expanded/collapsed.

kaylachumley

Leaving the token updates here per our compass sync conversation!

Handle on default: global/border/color/control/default

Handle and Splitter line on Hover: global/border/color/hover

Handle and splitter line on active/clicked: global/border/color/clicked

kaylachumley · 2026-03-09T18:38:20Z


  // Splitter border
-  --#{$drawer}__splitter--after--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$drawer}__splitter--after--BorderColor: var(--pf-t--global--border--color--control--default);


Hey! One last update here: Can you please update the splitter border to use global/border/color/default

looks like this update would also apply to code lines 132, 133 and 134

lboehling · 2026-03-18T16:17:35Z

+  --#{$drawer}--m-pill--m-panel-bottom__splitter--MarginInlineStart: var(--#{$drawer}--m-pill__panel--BorderRadius);
+  --#{$drawer}--m-pill--m-panel-bottom__splitter--after--Width: auto;
+  --#{$drawer}--m-pill--m-panel-bottom__splitter--after--Height: #{pf-size-prem(1px)};
+  --#{$drawer}--m-pill--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--#{$drawer}__splitter--after--border-width--base);


the vertical splitter line on hover/focus in the resizable pill drawer looks like its 2px thick since its the 2 lines squashed together -- any way we can add a calc here to divide the border width in half so it appears as a 1px line?

andrew-ronaldson

Cool beans

lboehling

lgtm!

mcoker

LGTM! Just a couple of comments from the group review.

mcoker · 2026-03-30T16:05:37Z

    border-block-end-width: var(--#{$drawer}__splitter--after--BorderBlockEndWidth);
    border-inline-start-width: var(--#{$drawer}__splitter--after--BorderInlineStartWidth);
    border-inline-end-width: var(--#{$drawer}__splitter--after--BorderInlineEndWidth);
+    transform: var(--#{$drawer}__splitter--after--Transform, none);


Nit but I'd update this to use the individual property for whatever function(s) that are passed

Suggested change

transform: var(--#{$drawer}__splitter--after--Transform, none);

translate: var(--#{$drawer}__splitter--after--Translate, none);

mcoker · 2026-03-30T16:06:06Z

+  --#{$drawer}__splitter-handle--InsetInlineStart: 50%;
  --#{$drawer}--m-panel-left__splitter-handle--InsetInlineStart: 50%;
-  --#{$drawer}--m-panel-bottom__splitter-handle--InsetBlockStart: calc(50% - var(--#{$drawer}__splitter--after--border-width--base));
+  --#{$drawer}--m-panel-bottom__splitter-handle--InsetBlockStart: 50%; // calc(50% - var(--#{$drawer}__splitter--after--border-width--base));


just a reminder to remove this

Suggested change

--#{$drawer}--m-panel-bottom__splitter-handle--InsetBlockStart: 50%; // calc(50% - var(--#{$drawer}__splitter--after--border-width--base));

--#{$drawer}--m-panel-bottom__splitter-handle--InsetBlockStart: 50%;

mcoker

👨‍🎨🎨

patternfly-build · 2026-03-30T19:07:01Z

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

The release is available on:

Your semantic-release bot 📦🚀

coderabbitai Bot requested review from andrew-ronaldson, lboehling and mcoker March 4, 2026 19:52

coderabbitai Bot reviewed Mar 4, 2026

View reviewed changes

fix(drawer): restyle the splitter

2da6bd3

srambach force-pushed the 3550-unified-drawer-splitter branch from f59da5f to 2da6bd3 Compare March 4, 2026 20:11

srambach requested review from kaylachumley March 4, 2026 21:00

srambach added Needs design review labels Mar 4, 2026

fix(drawer): new tokens and active state fix

2f03193

kaylachumley requested changes Mar 9, 2026

View reviewed changes

fix(drawer): new tokens and active state fix take 2

e570a9d

srambach linked an issue Mar 9, 2026 that may be closed by this pull request

Drawer splitter - Update drag handle design on resizable drawer #8126

Closed

kaylachumley requested changes Mar 9, 2026

View reviewed changes

fix(drawer): update token for standard splitter border

b449f22

srambach requested a review from kaylachumley March 9, 2026 19:32

kaylachumley approved these changes Mar 11, 2026

View reviewed changes

lboehling reviewed Mar 18, 2026

View reviewed changes

srambach added 2 commits March 24, 2026 14:06

fix(drawer): remove pill splitter after border

3b0745c

fix(drawer): fix lint

42e2181

srambach requested a review from lboehling March 24, 2026 20:00

andrew-ronaldson approved these changes Mar 25, 2026

View reviewed changes

kaylachumley self-requested a review March 25, 2026 14:05

kaylachumley approved these changes Mar 25, 2026

View reviewed changes

lboehling approved these changes Mar 25, 2026

View reviewed changes

lboehling removed the Needs design review label Mar 25, 2026

mcoker reviewed Mar 30, 2026

View reviewed changes

fix(drawer): use translate variables instead of transform

759d9cc

mcoker approved these changes Mar 30, 2026

View reviewed changes

mcoker merged commit 952ce5b into patternfly:main Mar 30, 2026
5 checks passed

patternfly-build added the released on @prerelease label Mar 30, 2026

This was referenced Mar 31, 2026

Drawer splitter: New rounded variant #8164

Closed

Drawer splitter - Update drag handle design on resizable drawer #8126

Closed

mcoker mentioned this pull request Apr 8, 2026

Drawers - update tokens and add Pill variant #8017

Closed

mcoker linked an issue Apr 8, 2026 that may be closed by this pull request

Drawers - update tokens and add Pill variant #8017

Closed

coderabbitai Bot mentioned this pull request Jun 18, 2026

Progress Stepper: New Control track styling #8465

Open

coderabbitai Bot mentioned this pull request Jul 17, 2026

Core implementation of drawer solution #8507

Closed

This was referenced Jul 22, 2026

The automated release is failing 🚨 #8519

Closed

The automated release is failing 🚨 #8533

Closed

Token	Value
`--splitter--focus--after--BorderColor`	`var(--pf-t--global--border--color--control--default)`
`--splitter--active--after--BorderColor`	`var(--pf-t--global--border--color--control--default)`
`--splitter-handle--focus--after--BackgroundColor`	`var(--pf-t--global--border--color--clicked)`
`--splitter-handle--active--after--BackgroundColor`	`var(--pf-t--global--border--color--clicked)`

	transform: var(--#{$drawer}__splitter--after--Transform, none);
	translate: var(--#{$drawer}__splitter--after--Translate, none);

	--#{$drawer}--m-panel-bottom__splitter-handle--InsetBlockStart: 50%; // calc(50% - var(--#{$drawer}__splitter--after--border-width--base));
	--#{$drawer}--m-panel-bottom__splitter-handle--InsetBlockStart: 50%;

Conversation

srambach commented Mar 4, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related issues

Suggested labels

Suggested reviewers

Uh oh!

patternfly-build commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

srambach Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

kaylachumley left a comment

Choose a reason for hiding this comment

Uh oh!

kaylachumley Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

kaylachumley Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

lboehling Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

andrew-ronaldson left a comment

Choose a reason for hiding this comment

Uh oh!

lboehling left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

mcoker Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Mar 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

srambach commented Mar 4, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Mar 4, 2026 •

edited

Loading

patternfly-build commented Mar 4, 2026 •

edited

Loading

coderabbitai Bot Mar 4, 2026 •

edited

Loading

lboehling Mar 18, 2026 •

edited

Loading