@patternfly/react-core 6.5.0-prerelease.75 → 6.5.0-prerelease.76

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.74","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.75","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.74","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.75","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.74","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.75","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.75",
+  "version": "6.5.0-prerelease.76",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.5.0-prerelease.35",
-    "@patternfly/react-styles": "^6.5.0-prerelease.25",
-    "@patternfly/react-tokens": "^6.5.0-prerelease.24",
+    "@patternfly/react-icons": "^6.5.0-prerelease.36",
+    "@patternfly/react-styles": "^6.5.0-prerelease.26",
+    "@patternfly/react-tokens": "^6.5.0-prerelease.25",
     "focus-trap": "7.6.6",
     "react-dropzone": "^14.3.5",
     "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"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "cd39fc119e43af9e8e451833f1271592f83fc0c1"
+  "gitHead": "41fa345ea84fbf83dcefdd1dd46333be302f005d"
 }

package/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<HTMLDivElement> {
   /** Additional classes added to the Compass. */
   className?: string;
@@ -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> = ({
@@ -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
@@ -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';

package/src/components/Compass/CompassMainHeader.tsx

@@ -21,7 +21,7 @@ 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> = ({
@@ -29,12 +29,12 @@ export const CompassMainHeader: React.FunctionComponent<CompassMainHeaderProps>
   title,
   toolbar,
   children,
-  compassPanelProps,
+  panelProps,
   ...props
 }: CompassMainHeaderProps) => {
   const _content =
     title !== undefined || toolbar !== undefined ? (
-      <Panel {...compassPanelProps}>
+      <Panel {...panelProps}>
         <PanelMain>
           <PanelMainBody>
             <CompassMainHeaderContent>

package/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(<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');

package/src/components/Compass/__tests__/CompassMainHeader.test.tsx

@@ -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');

package/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"
   >
     <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>
@@ -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>

package/src/components/Compass/examples/Compass.md

@@ -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"
 

package/src/demos/Compass/examples/CompassDemo.tsx

@@ -40,7 +40,7 @@ export const CompassBasic: React.FunctionComponent = () => {
 
   const navContent = (
     <>
-      <Panel isPill>
+      <Panel isPill isGlass>
         <PanelMain>
           <PanelMainBody>
             <CompassNavContent>
@@ -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}>
@@ -105,7 +105,7 @@ export const CompassBasic: React.FunctionComponent = () => {
   );
 
   const sidebarContent = (
-    <Panel isPill>
+    <Panel isPill isGlass>
       <PanelMain>
         <PanelMainBody>
           <ActionList isIconList isVertical>
@@ -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>
@@ -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>

package/src/demos/Compass/examples/CompassDockDemo.tsx

@@ -377,9 +377,9 @@ export const CompassDockDemo: React.FunctionComponent = () => {
 
   const mainContent = (
     <>
-      <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>