fix(Compass): replaced CompassPanel and background images#5001
Merged
Conversation
Collaborator
kmcfaul
reviewed
May 7, 2026
kmcfaul
reviewed
May 7, 2026
thatblindgeye
force-pushed
the
pfBumpCompassUpdate
branch
from
d17a887 to
4a10f21
Compare
mcoker
reviewed
May 7, 2026
| To help you use the Compass layout, there are several variants and props exposed on other PatternFly components that may be useful: | ||
|
|
||
| - `isPlain` on [card](/components/card#modifiers), [data list](/components/data-list#plain), and [table](/components/table#plain). This flag will set a transparent background for these components, allowing the glass effect in a wrapping `<CompassPanel>` to appear as the background. | ||
| - `isPlain` on [card](/components/card#modifiers), [data list](/components/data-list#plain), and [table](/components/table#plain). This flag will set a transparent background for these components, allowing the glass effect in a wrapping `<Panel>` to appear as the background. |
Contributor
There was a problem hiding this comment.
Maybe need to include some wording about panel needing "isGlass" since CompassPanel came with glass by default and Panel doesn't? May also not use "<Panel>" and say it like "glass Panel component"? I'm not sure though.
Suggested change
| - `isPlain` on [card](/components/card#modifiers), [data list](/components/data-list#plain), and [table](/components/table#plain). This flag will set a transparent background for these components, allowing the glass effect in a wrapping `<Panel>` to appear as the background. | |
| - `isPlain` on [card](/components/card#modifiers), [data list](/components/data-list#plain), and [table](/components/table#plain). This flag will set a transparent background for these components, allowing the glass effect in a wrapping `<Panel isGlass>` to appear as the background. |
|
|
||
| - `isPlain` on [card](/components/card#modifiers), [data list](/components/data-list#plain), and [table](/components/table#plain). This flag will set a transparent background for these components, allowing the glass effect in a wrapping `<CompassPanel>` to appear as the background. | ||
| - `isPlain` on [card](/components/card#modifiers), [data list](/components/data-list#plain), and [table](/components/table#plain). This flag will set a transparent background for these components, allowing the glass effect in a wrapping `<Panel>` to appear as the background. | ||
| - `isVertical` on [action list](/components/action-list#vertical-action-list). This flag sets the orientation on `<ActionList>` to support vertical icon lists for the sidebars. |
Contributor
There was a problem hiding this comment.
Maybe another thing worth noting is that we no longer recommend isPlain on card inside of an isGlass panel, since you can now apply isGlass on a card directly without a panel wrapper.
kmcfaul
approved these changes
May 8, 2026
wise-king-sullyman
approved these changes
May 8, 2026
mcoker
requested changes
May 8, 2026
Contributor
mcoker
left a comment
mcoker
left a comment
There was a problem hiding this comment.
Some cleanup to use glass cards - also need to fix the example with isScrollable because if you look at the demo, the scroll container is like 300px tall.
Also just an aside but I noticed this border around the chatbot message box. It looks like it may be due to a high contrast border? There is a 1px transparent border around it, creating a separate visible border due to the panel background behind it showing. If that transparent border is for high contrast, you can use --pf-t--global--border--width--high-contrast--regular as the border-width - it's 0px unless you're in HC, then it's 1px. Let me know if you want me to create an issue for that.
thatblindgeye
force-pushed
the
pfBumpCompassUpdate
branch
from
ab12174 to
88305b9
Compare
Collaborator
|
Your changes have been released in:
Thanks for your contribution! 🎉 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #4987