feat(treeview): allow a list item to look disabled #8030
Conversation
WalkthroughAdds disabled-state support for TreeView: examples mark nodes and toggles as disabled; Handlebars templates emit Changes
Sequence Diagram(s)(omitted — changes are template and styling updates without multi-component sequential flow) Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related issues
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 📜 Recent review detailsConfiguration used: Repository UI (base), Organization UI (inherited) Review profile: ASSERTIVE Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used🧠 Learnings (2)📓 Common learnings📚 Learning: 2025-12-17T15:25:08.994ZApplied to files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
🔇 Additional comments (1)
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. Comment |
|
Preview: https://pf-pr-8030.surge.sh A11y report: https://pf-pr-8030-a11y.surge.sh |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/patternfly/components/TreeView/examples/TreeView.md (1)
992-992: Consider adding a visual example section for the disabled modifier.While the table entry is clear, all other modifiers in this file include visual code examples (e.g., "With checkboxes", "With icons"). A visual example section demonstrating
.pf-m-disabledwould help developers understand how to apply the modifier and what it looks like in practice.src/patternfly/components/TreeView/tree-view.scss (1)
437-440: Consider suppressing hover/focus states on disabled items.Currently, lines 539-544 apply hover and focus-within styles to all
.#{$tree-view}__contentelements. Disabled items will still show these interactive states, which creates confusing UX since disabled items should appear non-interactive.Consider adding a rule to prevent hover/focus effects on disabled items:
+ .pf-m-disabled > .#{$tree-view}__content:hover, + .pf-m-disabled > .#{$tree-view}__content:focus-within { + --#{$tree-view}__node--BorderWidth: var(--#{$tree-view}__node--BorderWidth); + + background-color: var(--#{$tree-view}__node--BackgroundColor); + }Alternatively, you could set the cursor to indicate non-interactivity:
+ .pf-m-disabled > .#{$tree-view}__content { + cursor: not-allowed; + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/patternfly/components/TreeView/examples/TreeView.md(1 hunks)src/patternfly/components/TreeView/tree-view.scss(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-upload
🔇 Additional comments (1)
src/patternfly/components/TreeView/tree-view.scss (1)
97-99: LGTM: Disabled color variables are well-defined.The CSS variables follow proper naming conventions and use appropriate global design tokens for the disabled state.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/patternfly/components/TreeView/examples/TreeView.md(3 hunks)src/patternfly/components/TreeView/tree-view.scss(5 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/patternfly/components/TreeView/examples/TreeView.md
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: srambach
Repo: patternfly/patternfly PR: 8030
File: src/patternfly/components/TreeView/tree-view.scss:441-445
Timestamp: 2025-12-17T15:25:03.046Z
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.
📚 Learning: 2025-12-17T15:25:03.046Z
Learnt from: srambach
Repo: patternfly/patternfly PR: 8030
File: src/patternfly/components/TreeView/tree-view.scss:441-445
Timestamp: 2025-12-17T15:25:03.046Z
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.
Applied to files:
src/patternfly/components/TreeView/tree-view.scss
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-upload
🔇 Additional comments (3)
src/patternfly/components/TreeView/tree-view.scss (3)
97-104: LGTM! Disabled color variables are well-structured.The disabled-state color variables are properly defined using appropriate design tokens. The distinction between regular disabled colors (lines 98-99) and "on-disabled" colors for compact nested contexts (lines 101, 103) correctly reflects that compact mode uses background colors.
310-310: LGTM! Compact mode color propagation is correct.These additions properly propagate colors to nested node containers and icons in compact mode. The variables inherit by default and are overridden to disabled colors when the
.pf-m-disabledmodifier is present (lines 451-452).Also applies to: 319-322
448-453: LGTM! Disabled state propagation is correctly implemented.The selector properly targets nodes within disabled list items, and the variable assignments correctly propagate disabled colors to node content, node icons, and compact mode variants. Based on learnings, the toggle icon color is intentionally not modified since the toggle functionality remains active even in the disabled visual state.
|
Looks like there is a stylelint error |
mcoker
left a comment
There was a problem hiding this comment.
Left a comment about inherit on some vars.
I'm curious why the modifier is on the list-item and not the node? Looks like you'll always have to target direct child node since list-items contain nested list-items and nodes, and this isn't intended to be inherited. Nodes will never have nested anything in them, so you could style the children classes without descendent selectors. Also looks like the node is what supports .pf-m-selectable and .pf-m-current, so might make sense if that is also the item that is disabled.
Also looks like the original issue mentions toggle icons should support being disabled, but I didn't see that here.
And is this the correct color for default compact (with backgrounds) disabled nodes?
| --#{$tree-view}--m-compact__node-container--m-disabled--nested--Color: inherit; | ||
| --#{$tree-view}--m-compact__node-icon--m-disabled--nested--Color: inherit; |
There was a problem hiding this comment.
inherit on a CSS var inherits the var - doesn't apply the value inherit for the property it's applied to. To get the value inherit, what we typically do is something like this
--pf-c-component--Color: black;
--pf-c-component--m-inherit-color--Color: initial;
color: var(--pf-c-component--Color, inherit);
&.pf-m-inherit-color {
--pf-c-component--Color: var(--pf-c-component--m-inherit-color--Color);
}
This is probably working because it's an invalid var and any color it's used on will break and revert to the initial value which is inherit.
There was a problem hiding this comment.
In the react PR, I've put temporary 'pf-m-disabled' classes on the treeViewNode when the tree view node is a button (specifically, when selection and toggling for a node isn't separated), and on the treeViewNodeText and treeViewNodeToggle for when the behaviors are separate.
So we would want styling for those three use cases, though disabling the toggle button individually was something I had added myself, since the initial issue was more geared towards disabling the selection behavior for split behavior tree view nodes.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
src/patternfly/components/TreeView/tree-view.scss (1)
363-364: Apply the same fix for no-background variant.These lines have the same
inheritissue as lines 186 and 188. In the no-background context, there's no background color, so reverting to standard disabled colors (not "on-disabled" variants) makes sense.🔎 Apply this diff to fix the no-background variant:
&.pf-m-no-background { --#{$tree-view}--m-compact__node-container--nested--BackgroundColor: var(--#{$tree-view}--m-no-background__node-container--BackgroundColor); - --#{$tree-view}--m-compact__node-container--m-disabled--nested--Color: inherit; - --#{$tree-view}--m-compact__node-icon--m-disabled--nested--Color: inherit; + --#{$tree-view}--m-compact__node-container--m-disabled--nested--Color: var(--pf-t--global--text--color--disabled); + --#{$tree-view}--m-compact__node-icon--m-disabled--nested--Color: var(--pf-t--global--icon--color--disabled); }In this case, using the standard disabled tokens directly is more appropriate than the
initialpattern, since there's no background to provide "on-disabled" contrast.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/patternfly/components/TreeView/examples/TreeView.md(3 hunks)src/patternfly/components/TreeView/tree-view--base.hbs(2 hunks)src/patternfly/components/TreeView/tree-view.scss(6 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/patternfly/components/TreeView/examples/TreeView.md
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: srambach
Repo: patternfly/patternfly PR: 8030
File: src/patternfly/components/TreeView/tree-view.scss:441-445
Timestamp: 2025-12-17T15:25:03.046Z
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.
📚 Learning: 2025-12-17T15:25:03.046Z
Learnt from: srambach
Repo: patternfly/patternfly PR: 8030
File: src/patternfly/components/TreeView/tree-view.scss:441-445
Timestamp: 2025-12-17T15:25:03.046Z
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.
Applied to files:
src/patternfly/components/TreeView/tree-view.scsssrc/patternfly/components/TreeView/tree-view--base.hbs
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-upload
🔇 Additional comments (2)
src/patternfly/components/TreeView/tree-view--base.hbs (1)
33-42: LGTM—clear demonstration of the disabled state.The addition of
pf-m-disabledmodifiers at both root and nested levels effectively demonstrates the new disabled styling. The label updates make it immediately clear which nodes are in the disabled state during testing.Also applies to: 145-154
src/patternfly/components/TreeView/tree-view.scss (1)
448-453: Well-structured disabled state implementation.The
.pf-m-disabledmodifier correctly overrides the color variables using a clean cascading approach. The implementation properly excludes the toggle button color, allowing it to remain functional as intended.Based on learnings, the toggle button color is intentionally not modified to indicate the item can still be expanded/collapsed.
|
🎉 This PR is included in version 6.5.0-prerelease.34 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Fixes #7996
Adds .pf-m-disabled to the tree view list item to change the appearance.
Note: Actions should be disabled separately.
Also, the compact version with a background color has further reduced contrast of disabled items, so it may not be desirable to use these options together.
Note: I added some disabled items for ease of testing - we can remove them if needed.
See it here:
basic tree view
compact
compact no background
With icons, then add pf-m-compact to see that, then add pf-m-no-background to see that version.
Summary by CodeRabbit
New Features
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.