Skip to content

feat(Compass): remove background props, update structure #12408

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
kmcfaul wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat(Compass): remove background props, update structure #12408

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c9657d5
feat(Compass): remove background props, update structure
kmcfaul May 4, 2026
102f970
move props to compass from container, update tests to remove bg
kmcfaul May 5, 2026
cc877d0
rebase, add panel props, update CompassMainHeader panel props name
kmcfaul May 11, 2026
c22da97
remove full height, add glass to other panels in demo
kmcfaul May 11, 2026
d3b4c19
bump core, update snap
kmcfaul May 12, 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
2 changes: 1 addition & 1 deletion packages/react-core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
"tslib": "^2.8.1"
},
"devDependencies": {
"@patternfly/patternfly": "6.5.0-prerelease.86",
"@patternfly/patternfly": "6.5.0-prerelease.88",
"case-anything": "^3.1.2",
"css": "^3.0.0",
"fs-extra": "^11.3.3"
Expand Down
48 changes: 14 additions & 34 deletions packages/react-core/src/components/Compass/Compass.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
import { Drawer, DrawerContent, DrawerContentBody, DrawerProps } from '../Drawer';
import styles from '@patternfly/react-styles/css/components/Compass/compass';
import { css } from '@patternfly/react-styles';

import compassBackgroundImageLight from '@patternfly/react-tokens/dist/esm/c_compass_BackgroundImage_light';
import compassBackgroundImageDark from '@patternfly/react-tokens/dist/esm/c_compass_BackgroundImage_dark';

export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
/** Additional classes added to the Compass. */
className?: string;
Expand Down Expand Up @@ -40,10 +36,6 @@ export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
drawerContent?: React.ReactNode;
/** Additional props passed to the drawer */
drawerProps?: DrawerProps;
/** Light theme background image path of the Compass */
backgroundSrcLight?: string;
/** Dark theme background image path of the Compass */
backgroundSrcDark?: string;
}

export const Compass: React.FunctionComponent<CompassProps> = ({
Expand All @@ -63,26 +55,12 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
isFooterExpanded = true,
drawerContent,
drawerProps,
backgroundSrcLight,
backgroundSrcDark,
...props
}: CompassProps) => {
const hasDrawer = drawerContent !== undefined;

const backgroundImageStyles: { [key: string]: string } = {};
if (backgroundSrcLight) {
backgroundImageStyles[compassBackgroundImageLight.name] = `url(${backgroundSrcLight})`;
}
if (backgroundSrcDark) {
backgroundImageStyles[compassBackgroundImageDark.name] = `url(${backgroundSrcDark})`;
}

const compassContent = (
<div
className={css(styles.compass, dock !== undefined && styles.modifiers.docked, className)}
{...props}
style={{ ...props.style, ...backgroundImageStyles }}
>
<div className={css(styles.compassContainer)}>
{dock && masthead}
{dock && (
<div
Expand Down Expand Up @@ -131,17 +109,19 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
</div>
);

if (hasDrawer) {
return (
<Drawer isPill {...drawerProps}>
<DrawerContent panelContent={drawerContent}>
<DrawerContentBody>{compassContent}</DrawerContentBody>
</DrawerContent>
</Drawer>
);
}

return compassContent;
return (
<div className={css(styles.compass, dock && styles.modifiers.docked, className)} {...props}>
{hasDrawer ? (
<Drawer isPill {...drawerProps}>
<DrawerContent panelContent={drawerContent}>
<DrawerContentBody>{compassContent}</DrawerContentBody>
</DrawerContent>
</Drawer>
) : (
compassContent
)}
</div>
);
};

Compass.displayName = 'Compass';
6 changes: 3 additions & 3 deletions packages/react-core/src/components/Compass/CompassMainHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,20 +21,20 @@ export interface CompassMainHeaderProps extends Omit<React.HTMLProps<HTMLDivElem
/** Additional props passed to the Panel that wraps the main header content when using the title or toolbar props. When using the
* children prop, you should pass your own Panel.
*/
compassPanelProps?: Omit<PanelProps, 'children'>;
panelProps?: Omit<PanelProps, 'children'>;
}

export const CompassMainHeader: React.FunctionComponent<CompassMainHeaderProps> = ({
className,
title,
toolbar,
children,
compassPanelProps,
panelProps,
...props
}: CompassMainHeaderProps) => {
const _content =
title !== undefined || toolbar !== undefined ? (
<Panel {...compassPanelProps}>
<Panel {...panelProps}>
<PanelMain>
<PanelMainBody>
<CompassMainHeaderContent>
Expand Down
21 changes: 0 additions & 21 deletions packages/react-core/src/components/Compass/__tests__/Compass.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,27 +99,6 @@ test('Renders with drawer when drawerContent is provided', () => {
expect(screen.getByText('Drawer content')).toBeVisible();
});

test('Renders with light background image when backgroundSrcLight is provided', () => {
const backgroundSrc = 'light-bg.jpg';
render(<Compass backgroundSrcLight={backgroundSrc} data-testid="compass" />);
expect(screen.getByTestId('compass')).toHaveStyle(`--pf-v6-c-compass--BackgroundImage--light: url(${backgroundSrc})`);
});

test('Renders with dark background image when backgroundSrcDark is provided', () => {
const backgroundSrc = 'dark-bg.jpg';
render(<Compass backgroundSrcDark={backgroundSrc} data-testid="compass" />);
expect(screen.getByTestId('compass')).toHaveStyle(`--pf-v6-c-compass--BackgroundImage--dark: url(${backgroundSrc})`);
});

test('Renders with both light and dark background images when both are provided', () => {
const lightSrc = 'light-bg.jpg';
const darkSrc = 'dark-bg.jpg';
render(<Compass backgroundSrcLight={lightSrc} backgroundSrcDark={darkSrc} data-testid="compass" />);
const compassElement = screen.getByTestId('compass');
expect(compassElement).toHaveStyle(`--pf-v6-c-compass--BackgroundImage--light: url(${lightSrc})`);
expect(compassElement).toHaveStyle(`--pf-v6-c-compass--BackgroundImage--dark: url(${darkSrc})`);
});

test('Renders with additional props spread to the component', () => {
render(<Compass aria-label="Test label" data-testid="compass" />);
expect(screen.getByTestId('compass')).toHaveAccessibleName('Test label');
Expand Down
12 changes: 4 additions & 8 deletions packages/react-core/src/components/Compass/__tests__/CompassMainHeader.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,19 +100,15 @@ test('Does not render Panel when children are passed', () => {
expect(content).not.toHaveClass(panelStyles.panel);
});

test('Passes props to Panel when title and compassPanelProps is passed', () => {
render(
<CompassMainHeader data-testid="test-id" compassPanelProps={{ className: 'panel-class' }} title="Title text" />
);
test('Passes props to Panel when title and panelProps is passed', () => {
render(<CompassMainHeader data-testid="test-id" panelProps={{ className: 'panel-class' }} title="Title text" />);

const panel = screen.getByTestId('test-id').firstChild;
expect(panel).toHaveClass('panel-class');
});

test('Passes props to Panel when toolbar and compassPanelProps is passed', () => {
render(
<CompassMainHeader data-testid="test-id" compassPanelProps={{ className: 'panel-class' }} toolbar="Toolbar text" />
);
test('Passes props to Panel when toolbar and panelProps is passed', () => {
render(<CompassMainHeader data-testid="test-id" panelProps={{ className: 'panel-class' }} toolbar="Toolbar text" />);

const panel = screen.getByTestId('test-id').firstChild;
expect(panel).toHaveClass('panel-class');
Expand Down
132 changes: 70 additions & 62 deletions packages/react-core/src/components/Compass/__tests__/__snapshots__/Compass.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,38 +6,42 @@ exports[`Matches the snapshot with basic layout 1`] = `
class="pf-v6-c-compass"
>
<div
class="pf-v6-c-compass__header pf-m-expanded"
class="pf-v6-c-compass__container"
>
<div>
Header
<div
class="pf-v6-c-compass__header pf-m-expanded"
>
<div>
Header
</div>
</div>
</div>
<div
class="pf-v6-c-compass__sidebar pf-m-start pf-m-expanded"
>
<div>
Sidebar start
<div
class="pf-v6-c-compass__sidebar pf-m-start pf-m-expanded"
>
<div>
Sidebar start
</div>
</div>
</div>
<div
class="pf-v6-c-compass__main"
>
<div>
Main content
<div
class="pf-v6-c-compass__main"
>
<div>
Main content
</div>
</div>
</div>
<div
class="pf-v6-c-compass__sidebar pf-m-end pf-m-expanded"
>
<div>
Sidebar end
<div
class="pf-v6-c-compass__sidebar pf-m-end pf-m-expanded"
>
<div>
Sidebar end
</div>
</div>
</div>
<div
class="pf-v6-c-compass__footer pf-m-expanded"
>
<div>
Footer
<div
class="pf-v6-c-compass__footer pf-m-expanded"
>
<div>
Footer
</div>
</div>
</div>
</div>
Expand All @@ -47,60 +51,64 @@ exports[`Matches the snapshot with basic layout 1`] = `
exports[`Matches the snapshot with drawer 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-drawer pf-m-expanded pf-m-pill"
class="pf-v6-c-compass"
>
<div
class="pf-v6-c-drawer__main"
class="pf-v6-c-drawer pf-m-expanded pf-m-pill"
>
<div
class="pf-v6-c-drawer__content"
class="pf-v6-c-drawer__main"
>
<div
class="pf-v6-c-drawer__body"
class="pf-v6-c-drawer__content"
>
<div
class="pf-v6-c-compass"
class="pf-v6-c-drawer__body"
>
<div
class="pf-v6-c-compass__header pf-m-expanded"
class="pf-v6-c-compass__container"
>
<div>
Header
<div
class="pf-v6-c-compass__header pf-m-expanded"
>
<div>
Header
</div>
</div>
</div>
<div
class="pf-v6-c-compass__sidebar pf-m-start pf-m-expanded"
>
<div>
Sidebar start
<div
class="pf-v6-c-compass__sidebar pf-m-start pf-m-expanded"
>
<div>
Sidebar start
</div>
</div>
</div>
<div
class="pf-v6-c-compass__main"
>
<div>
Main content
<div
class="pf-v6-c-compass__main"
>
<div>
Main content
</div>
</div>
</div>
<div
class="pf-v6-c-compass__sidebar pf-m-end pf-m-expanded"
>
<div>
Sidebar end
<div
class="pf-v6-c-compass__sidebar pf-m-end pf-m-expanded"
>
<div>
Sidebar end
</div>
</div>
</div>
<div
class="pf-v6-c-compass__footer pf-m-expanded"
>
<div>
Footer
<div
class="pf-v6-c-compass__footer pf-m-expanded"
>
<div>
Footer
</div>
</div>
</div>
</div>
</div>
</div>
<div>
Drawer content
<div>
Drawer content
</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Compass/examples/Compass.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ In a basic Compass layout, content can be passed to the following props to popul
- `sidebarEnd`: Content rendered at the horizontal end of the page (by default, the right side).
- `footer`: Content rendered at the bottom of the page.

To customize the background image of the `<Compass>` and `<CompassHero>` components, you can use their respective `backgroundSrcLight` and `backgroundSrcDark` props. You can also add and customize a color gradient background for the `<CompassHero>` component by using the `gradientLight` and `gradientDark` props.
The background image of `<Compass>` is set at a global level alongside the theme. You can customize the background image of the `<Hero>` inside `<CompassHero>` by using its `backgroundSrcLight` and `backgroundSrcDark` props, or you may set a gradient using the `gradientLight` and `gradientDark` props.

```ts isBeta file="CompassBasic.tsx"

Expand Down
12 changes: 6 additions & 6 deletions packages/react-core/src/demos/Compass/examples/CompassDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const CompassBasic: React.FunctionComponent = () => {

const navContent = (
<>
<Panel isPill>
<Panel isPill isGlass>
<PanelMain>
<PanelMainBody>
<CompassNavContent>
Expand Down Expand Up @@ -70,7 +70,7 @@ export const CompassBasic: React.FunctionComponent = () => {
</PanelMainBody>
</PanelMain>
</Panel>
<Panel isPill>
<Panel isPill isGlass>
<PanelMain>
<PanelMainBody style={{ padding: 0 }}>
<TabContent id="subtabs" ref={subTabsRef}>
Expand Down Expand Up @@ -105,7 +105,7 @@ export const CompassBasic: React.FunctionComponent = () => {
);

const sidebarContent = (
<Panel isPill>
<Panel isPill isGlass>
<PanelMain>
<PanelMainBody>
<ActionList isIconList isVertical>
Expand Down Expand Up @@ -153,9 +153,9 @@ export const CompassBasic: React.FunctionComponent = () => {
Hero
</Hero>
</CompassHero>
<CompassMainHeader title={<Title headingLevel="h1">Content title</Title>} />
<CompassMainHeader title={<Title headingLevel="h1">Content title</Title>} panelProps={{ isGlass: true }} />
<CompassContent>
<Panel>
<Panel isScrollable isAutoHeight isGlass>
<PanelMain>
<PanelMainBody>Content</PanelMainBody>
</PanelMain>
Expand All @@ -166,7 +166,7 @@ export const CompassBasic: React.FunctionComponent = () => {
const sidebarEndContent = sidebarContent;
const footerContent = (
<CompassMessageBar>
<Panel isPill>
<Panel isPill isGlass>
<PanelMain>
<PanelMainBody style={{ padding: 0 }}>Message bar</PanelMainBody>
</PanelMain>
Expand Down
Loading
Loading