Skip to content

fix(Compass): replaced CompassPanel and background images #5001

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
thatblindgeye wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix(Compass): replaced CompassPanel and background images #5001

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2c168cd
fix(Compass): replaced CompassPanel and background images
thatblindgeye May 1, 2026
310bbf3
Updated background images
thatblindgeye May 1, 2026
d17a887
Updated md file imports
thatblindgeye May 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,10 @@
},
"devDependencies": {
"@octokit/rest": "^19.0.13",
"@patternfly/patternfly": "^6.5.0-prerelease.64",
"@patternfly/react-code-editor": "^6.5.0-prerelease.52",
"@patternfly/react-core": "^6.5.0-prerelease.49",
"@patternfly/react-table": "^6.5.0-prerelease.50",
"@patternfly/patternfly": "^6.5.0-prerelease.81",
"@patternfly/react-code-editor": "^6.5.0-prerelease.68",
"@patternfly/react-core": "^6.5.0-prerelease.65",
"@patternfly/react-table": "^6.5.0-prerelease.68",
"glob": "^8.1.0",
"lerna": "^9.0.5",
"monaco-editor": "0.54.0",
Expand Down Expand Up @@ -74,9 +74,9 @@
"ajv": ">=6.14.0",
"qs": ">=6.15.0",
"@isaacs/brace-expansion": ">=5.0.1",
"@patternfly/react-code-editor": "^6.5.0-prerelease.52",
"@patternfly/react-core": "^6.5.0-prerelease.49",
"@patternfly/react-table": "^6.5.0-prerelease.50",
"@patternfly/react-code-editor": "^6.5.0-prerelease.68",
"@patternfly/react-core": "^6.5.0-prerelease.65",
"@patternfly/react-table": "^6.5.0-prerelease.68",
"monaco-editor": "0.54.0"
}
}
10 changes: 5 additions & 5 deletions packages/documentation-framework/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,11 +68,11 @@
"webpack-merge": "5.10.0"
},
"peerDependencies": {
"@patternfly/patternfly": "^6.5.0-prerelease.64",
"@patternfly/react-code-editor": "^6.5.0-prerelease.52",
"@patternfly/react-core": "^6.5.0-prerelease.49",
"@patternfly/react-icons": "^6.5.0-prerelease.20",
"@patternfly/react-table": "^6.5.0-prerelease.50",
"@patternfly/patternfly": "^6.5.0-prerelease.81",
"@patternfly/react-code-editor": "^6.5.0-prerelease.68",
"@patternfly/react-core": "^6.5.0-prerelease.65",
"@patternfly/react-icons": "^6.5.0-prerelease.29",
"@patternfly/react-table": "^6.5.0-prerelease.68",
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
},
Expand Down
26 changes: 14 additions & 12 deletions packages/documentation-site/patternfly-docs/content/AI/Compass/CompassHandbook.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ When building generative UI layouts using the Compass components, there are seve
### Transparent containers
Transparent containers create a modern glass look and feel. To enable transparency on a container, apply `pf-v6-theme-glass` to the `html` element class list, similar to the approach for enabling the dark mode theme.

Within Compass layouts, elements with a transparent glass background and rounded borders should be wrapped in a `<CompassPanel>` (some Compass components do this automatically). You can adjust various options of the `<CompassPanel>` to adapt its padding and behavior to fit the context of your use case.
Within Compass layouts, elements with a transparent glass background and rounded borders should be wrapped in a `<Panel>` and `<PanelMain>` (some Compass components do this automatically). You can adjust various options of the `<Panel>` to adapt its padding and behavior to fit the context of your use case.

To prevent styling issues, do not nest `<CompassPanel>` components while using the glass effects.
To prevent styling issues, do not nest `<Panel>` components while using the glass effects.

### Header
You can add a header to a Compass layout via the `<CompassHeader>` component. `<CompassHeader>` constructs 3 sections, which can contain any custom content, but will typically include the following:
Expand All @@ -35,7 +35,7 @@ You can add a header to a Compass layout via the `<CompassHeader>` component. `<
```

### Sidebars
There are 2 vertical sidebars in a Compass layout: 1 at the start of the page and another at the end. There are no specific helper components for these sections, so they're usually created by passing a `<CompassPanel>` that contains an [`<ActionList>`](/components/action-list) with the `isVertical` flag.
There are 2 vertical sidebars in a Compass layout: 1 at the start of the page and another at the end. There are no specific helper components for these sections, so they're usually created by passing a `<Panel>` and `<PanelMain>` that contains an [`<ActionList>`](/components/action-list) with the `isVertical` flag.

### Docked navigation
As an alternative to the above header and sidebars, a docked navigation may be used to organize navigation elements into a single anchored sidebar. You can add a docked nav to the Compass layout via the `dock` property.
Expand All @@ -45,16 +45,18 @@ A docked nav will typically contain a [`<Masthead>`](/components/masthead) with
### Footer
There are 2 methods of adding a footer to a compass layout.

In both methods, the footer content will remain the same, typically containing a [ChatBot `<MessageBar>`](/extensions/chatbot/messages/), wrapped in a `<CompassPanel>` and `<CompassMessageBar>` component:
In both methods, the footer content will remain the same, typically containing a [ChatBot `<MessageBar>`](/extensions/chatbot/messages/), wrapped in a `<Panel>`, `<PanelMain>`, and `<CompassMessageBar>` component:

```
<CompassMessageBar>
<CompassPanel isPill hasNoPadding hasNoBorder>
<MessageBar />
<div aria-live="polite" className="pf-v6-screen-reader">
// aria anouncments for message bar's state updates
</div>
</CompassPanel>
<Panel isPill hasNoPadding hasNoBorder>
<PanelMain>
<MessageBar />
<div aria-live="polite" className="pf-v6-screen-reader">
// aria anouncments for message bar's state updates
</div>
</PanelMain>
</Panel>
</CompassMessageBar>
```

Expand All @@ -69,9 +71,9 @@ In both methods, the footer content will remain the same, typically containing a
### Main content
The main content in a Compass layout includes the generated information displays. Main content fills the center of the viewport and typically consists of a `<Hero>` or `<CompassMainHeader>`, a `<CompassContent>`, and an optional `<CompassMainFooter>`.

Often, the main section will contain a `<CompassMainHeader>` and `<CompassContent>` with a `<CompassPanel>` child containing the primary page content.
Often, the main section will contain a `<CompassMainHeader>` and `<CompassContent>` with `<Panel>` and `<PanelMain>` children containing the primary page content.

When making [a dashboard view](/patterns/dashboard), use a `<Hero>` instead of a `<CompassMainHeader>`. Instead of having a single `<CompassPanel>` within a `<CompassContent>`, each individual dashboard item should be wrapped in a `<CompassPanel>`. For example, in a dashboard with many content cards, each `<Card>` (with `isPlain` flag) should be wrapped by a `<CompassPanel>` inside of a [`<Grid>`](/foundations-and-styles/layouts/grid).
When making [a dashboard view](/patterns/dashboard), use a `<Hero>` instead of a `<CompassMainHeader>`. Instead of having a single `<Panel>` and `<PanelMain>` structure within a `<CompassContent>`, each individual dashboard item should be wrapped in a `<Panel>` and `<PanelMain>`. For example, in a dashboard with many content cards, each `<Card>` (with `isPlain` flag) should be wrapped by a `<Panel>` and `<PanelMain>` structure inside of a [`<Grid>`](/foundations-and-styles/layouts/grid).

## CSS customization

Expand Down
Loading
Loading