From 52b0cbba8b0912f7b5b9767c96efa6feb9f6d44b Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 4 May 2026 10:42:29 -0400 Subject: [PATCH 1/2] feat(Compass): remove background props, update structure --- .../src/components/Compass/Compass.tsx | 38 +++++-------------- .../components/Compass/examples/Compass.md | 2 +- 2 files changed, 10 insertions(+), 30 deletions(-) diff --git a/packages/react-core/src/components/Compass/Compass.tsx b/packages/react-core/src/components/Compass/Compass.tsx index c152a015cc8..0d6f9a254ed 100644 --- a/packages/react-core/src/components/Compass/Compass.tsx +++ b/packages/react-core/src/components/Compass/Compass.tsx @@ -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 { /** Additional classes added to the Compass. */ className?: string; @@ -40,10 +36,6 @@ export interface CompassProps extends React.HTMLProps { 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 = ({ @@ -63,26 +55,12 @@ export const Compass: React.FunctionComponent = ({ 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 = ( -
+
{dock && masthead} {dock && (
= ({ if (hasDrawer) { return ( - - - {compassContent} - - +
+ + + {compassContent} + + +
); } - return compassContent; + return
{compassContent}
; }; Compass.displayName = 'Compass'; diff --git a/packages/react-core/src/components/Compass/examples/Compass.md b/packages/react-core/src/components/Compass/examples/Compass.md index 446439bfd19..53de6af57f2 100644 --- a/packages/react-core/src/components/Compass/examples/Compass.md +++ b/packages/react-core/src/components/Compass/examples/Compass.md @@ -36,7 +36,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 `` and `` components, you can use their respective `backgroundSrcLight` and `backgroundSrcDark` props. You can also add and customize a color gradient background for the `` component by using the `gradientLight` and `gradientDark` props. +The background image of `` is set at a global level alongside the theme. You can customize the background image of `` by using its `backgroundSrcLight` and `backgroundSrcDark` props, or you may set a gradient using the `gradientLight` and `gradientDark` props. ```ts isBeta file="CompassBasic.tsx" From bae5877694a334da80b6d25ee9940d7ff2784f97 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Tue, 5 May 2026 12:06:26 -0400 Subject: [PATCH 2/2] move props to compass from container, update tests to remove bg --- .../src/components/Compass/Compass.tsx | 18 +-- .../Compass/__tests__/Compass.test.tsx | 21 --- .../__snapshots__/Compass.test.tsx.snap | 132 ++++++++++-------- 3 files changed, 79 insertions(+), 92 deletions(-) diff --git a/packages/react-core/src/components/Compass/Compass.tsx b/packages/react-core/src/components/Compass/Compass.tsx index 0d6f9a254ed..971e6bb5eec 100644 --- a/packages/react-core/src/components/Compass/Compass.tsx +++ b/packages/react-core/src/components/Compass/Compass.tsx @@ -60,7 +60,7 @@ export const Compass: React.FunctionComponent = ({ const hasDrawer = drawerContent !== undefined; const compassContent = ( -
+
{dock && masthead} {dock && (
= ({
); - if (hasDrawer) { - return ( -
+ return ( +
+ {hasDrawer ? ( {compassContent} -
- ); - } - - return
{compassContent}
; + ) : ( + compassContent + )} +
+ ); }; Compass.displayName = 'Compass'; diff --git a/packages/react-core/src/components/Compass/__tests__/Compass.test.tsx b/packages/react-core/src/components/Compass/__tests__/Compass.test.tsx index 91973224496..52f60bfec79 100644 --- a/packages/react-core/src/components/Compass/__tests__/Compass.test.tsx +++ b/packages/react-core/src/components/Compass/__tests__/Compass.test.tsx @@ -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(); - 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(); - 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(); - 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(); expect(screen.getByTestId('compass')).toHaveAccessibleName('Test label'); diff --git a/packages/react-core/src/components/Compass/__tests__/__snapshots__/Compass.test.tsx.snap b/packages/react-core/src/components/Compass/__tests__/__snapshots__/Compass.test.tsx.snap index a4d1e225ed6..212fc26e41b 100644 --- a/packages/react-core/src/components/Compass/__tests__/__snapshots__/Compass.test.tsx.snap +++ b/packages/react-core/src/components/Compass/__tests__/__snapshots__/Compass.test.tsx.snap @@ -6,38 +6,42 @@ exports[`Matches the snapshot with basic layout 1`] = ` class="pf-v6-c-compass" >
-
- Header +
+
+ Header +
-
-
-
- Sidebar start +
+
+ Sidebar start +
-
-
-
- Main content +
+
+ Main content +
-
-
-
- Sidebar end +
+
+ Sidebar end +
-
-
-
- Footer +
+
+ Footer +
@@ -47,60 +51,64 @@ exports[`Matches the snapshot with basic layout 1`] = ` exports[`Matches the snapshot with drawer 1`] = `
-
- Header +
+
+ Header +
-
-
-
- Sidebar start +
+
+ Sidebar start +
-
-
-
- Main content +
+
+ Main content +
-
-
-
- Sidebar end +
+
+ Sidebar end +
-
-
-
- Footer +
+
+ Footer +
-
-
- Drawer content +
+ Drawer content +