@patternfly/react-core 6.5.0-prerelease.71 → 6.5.0-prerelease.73

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.70","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.72","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.70","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.72","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.70","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.72","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.71",
+  "version": "6.5.0-prerelease.73",
   "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.32",
-    "@patternfly/react-styles": "^6.5.0-prerelease.22",
-    "@patternfly/react-tokens": "^6.5.0-prerelease.21",
+    "@patternfly/react-icons": "^6.5.0-prerelease.34",
+    "@patternfly/react-styles": "^6.5.0-prerelease.24",
+    "@patternfly/react-tokens": "^6.5.0-prerelease.23",
     "focus-trap": "7.6.6",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.79",
+    "@patternfly/patternfly": "6.5.0-prerelease.82",
     "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": "46565481de4856d5e426669178a4731918d60410"
+  "gitHead": "49cdd4af567d0e44031932738edb6d05ffe68c99"
 }

package/src/components/Hero/Hero.tsx

@@ -34,8 +34,8 @@ export interface HeroProps extends Omit<React.HTMLProps<HTMLDivElement>, 'conten
     stop2?: string;
     stop3?: string;
   };
-  /** Flag indicating whether glass styles are removed from the hero when a glass theme is applied. */
-  hasNoGlass?: boolean;
+  /** @beta Flag indicating the hero has glass styling when glass theme is applied. */
+  isGlass?: boolean;
   /** Modifies the width of the hero body. */
   bodyWidth?: string;
   /** Modifies the max-width of the hero body. */
@@ -49,7 +49,7 @@ export const Hero: React.FunctionComponent<HeroProps> = ({
   backgroundSrcDark,
   gradientLight,
   gradientDark,
-  hasNoGlass = false,
+  isGlass = false,
   bodyWidth,
   bodyMaxWidth,
   ...props
@@ -90,7 +90,7 @@ export const Hero: React.FunctionComponent<HeroProps> = ({
 
   return (
     <div
-      className={css(styles.hero, hasNoGlass && styles.modifiers.noGlass, className)}
+      className={css(styles.hero, isGlass && styles.modifiers.glass, className)}
       style={{ ...props.style, ...customStyles }}
       {...props}
     >

package/src/components/Hero/__tests__/Hero.test.tsx

@@ -16,12 +16,30 @@ test('Renders with children', () => {
   expect(screen.getByText('Test content')).toBeVisible();
 });
 
-test(`Renders with ${styles.hero} class on wrapper by defaulty`, () => {
+test(`Renders with ${styles.hero} class on wrapper by default`, () => {
   render(<Hero>Test</Hero>);
 
   expect(screen.getByText('Test').parentElement).toHaveClass(`${styles.hero}`, { exact: true });
 });
 
+test(`Renders with ${styles.modifiers.glass} class when isGlass is true`, () => {
+  render(<Hero isGlass>Test</Hero>);
+
+  expect(screen.getByText('Test').parentElement).toHaveClass(`${styles.modifiers.glass}`);
+});
+
+test(`Renders without ${styles.modifiers.glass} class when isGlass is false`, () => {
+  render(<Hero isGlass={false}>Test</Hero>);
+
+  expect(screen.getByText('Test').parentElement).not.toHaveClass(`${styles.modifiers.glass}`);
+});
+
+test(`Renders without ${styles.modifiers.glass} class by default`, () => {
+  render(<Hero>Test</Hero>);
+
+  expect(screen.getByText('Test').parentElement).not.toHaveClass(`${styles.modifiers.glass}`);
+});
+
 test('Renders with custom class name on wrapper when className prop is provided', () => {
   render(<Hero className="custom-class">Test</Hero>);
   expect(screen.getByText('Test').parentElement).toHaveClass('custom-class');

package/src/components/Page/PageGroup.tsx

@@ -17,6 +17,10 @@ export interface PageGroupProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'top' | 'bottom';
     '2xl'?: 'top' | 'bottom';
   };
+  /** @beta Applies the base sticky positioning to the top or bottom of the scroll parent container. */
+  stickyBase?: 'top' | 'bottom';
+  /** @beta Flag indicating if the group has stuck styling, applied when the group is not at the edge of the scroll parent container. */
+  isStickyStuck?: boolean;
   /** Enables the page group to fill the available vertical space if true, or disable filling if false. */
   isFilled?: boolean;
   /** Modifier indicating if PageGroup should have a shadow at the top */
@@ -37,6 +41,8 @@ export const PageGroup = ({
   className = '',
   children,
   stickyOnBreakpoint,
+  stickyBase,
+  isStickyStuck = false,
   isFilled,
   hasShadowTop = false,
   hasShadowBottom = false,
@@ -61,6 +67,10 @@ export const PageGroup = ({
       className={css(
         styles.pageMainGroup,
         formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
+        stickyBase === 'top' && styles.modifiers.stickyTopBase,
+        stickyBase === 'bottom' && styles.modifiers.stickyBottomBase,
+        isStickyStuck && stickyBase === 'top' && styles.modifiers.stickyTopStuck,
+        isStickyStuck && stickyBase === 'bottom' && styles.modifiers.stickyBottomStuck,
         isFilled === false && styles.modifiers.noFill,
         isFilled === true && styles.modifiers.fill,
         hasShadowTop && styles.modifiers.shadowTop,

package/src/components/Page/PageSection.tsx

@@ -51,6 +51,10 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'top' | 'bottom';
     '2xl'?: 'top' | 'bottom';
   };
+  /** @beta Applies the base sticky positioning to the top or bottom of the scroll parent container. */
+  stickyBase?: 'top' | 'bottom';
+  /** @beta Flag indicating if the section has stuck styling, applied when the section is not at the edge of the scroll parent container. */
+  isStickyStuck?: boolean;
   /** Modifier indicating if PageSection should have a shadow at the top */
   hasShadowTop?: boolean;
   /** Modifier indicating if PageSection should have a shadow at the bottom */
@@ -96,6 +100,8 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
   isWidthLimited = false,
   isCenterAligned = false,
   stickyOnBreakpoint,
+  stickyBase,
+  isStickyStuck = false,
   hasShadowTop = false,
   hasShadowBottom = false,
   hasOverflowScroll = false,
@@ -124,6 +130,10 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
         variantType[type],
         formatBreakpointMods(padding, styles),
         formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
+        stickyBase === 'top' && styles.modifiers.stickyTopBase,
+        stickyBase === 'bottom' && styles.modifiers.stickyBottomBase,
+        isStickyStuck && stickyBase === 'top' && styles.modifiers.stickyTopStuck,
+        isStickyStuck && stickyBase === 'bottom' && styles.modifiers.stickyBottomStuck,
         type === PageSectionTypes.default && variantStyle[variant],
         isFilled === false && styles.modifiers.noFill,
         isFilled === true && styles.modifiers.fill,

package/src/components/Page/__tests__/PageGroup.test.tsx

@@ -101,3 +101,55 @@ test(`Renders with ${styles.modifiers.noPlainOnGlass} class when isNoPlainOnGlas
 
   expect(screen.getByText('test')).toHaveClass(styles.modifiers.noPlainOnGlass);
 });
+
+test(`Does not add sticky base or sticky stuck classes by default`, () => {
+  render(<PageGroup>test</PageGroup>);
+  const group = screen.getByText('test');
+  expect(group).not.toHaveClass(styles.modifiers.stickyTopBase);
+  expect(group).not.toHaveClass(styles.modifiers.stickyBottomBase);
+  expect(group).not.toHaveClass(styles.modifiers.stickyTopStuck);
+  expect(group).not.toHaveClass(styles.modifiers.stickyBottomStuck);
+});
+
+test(`Adds ${styles.modifiers.stickyTopBase} without stuck class when stickyBase="top"`, () => {
+  render(<PageGroup stickyBase="top">test</PageGroup>);
+  const group = screen.getByText('test');
+  expect(group).toHaveClass(styles.modifiers.stickyTopBase);
+  expect(group).not.toHaveClass(styles.modifiers.stickyTopStuck);
+});
+
+test(`Adds ${styles.modifiers.stickyBottomBase} without stuck class when stickyBase="bottom"`, () => {
+  render(<PageGroup stickyBase="bottom">test</PageGroup>);
+  const group = screen.getByText('test');
+  expect(group).toHaveClass(styles.modifiers.stickyBottomBase);
+  expect(group).not.toHaveClass(styles.modifiers.stickyBottomStuck);
+});
+
+test(`Adds ${styles.modifiers.stickyTopStuck} when stickyBase="top" and isStickyStuck`, () => {
+  render(
+    <PageGroup stickyBase="top" isStickyStuck>
+      test
+    </PageGroup>
+  );
+  const group = screen.getByText('test');
+  expect(group).toHaveClass(styles.modifiers.stickyTopBase);
+  expect(group).toHaveClass(styles.modifiers.stickyTopStuck);
+});
+
+test(`Adds ${styles.modifiers.stickyBottomStuck} when stickyBase="bottom" and isStickyStuck`, () => {
+  render(
+    <PageGroup stickyBase="bottom" isStickyStuck>
+      test
+    </PageGroup>
+  );
+  const group = screen.getByText('test');
+  expect(group).toHaveClass(styles.modifiers.stickyBottomBase);
+  expect(group).toHaveClass(styles.modifiers.stickyBottomStuck);
+});
+
+test(`Does not add stuck class when isStickyStuck is true but stickyBase is not set`, () => {
+  render(<PageGroup isStickyStuck>test</PageGroup>);
+  const group = screen.getByText('test');
+  expect(group).not.toHaveClass(styles.modifiers.stickyTopStuck);
+  expect(group).not.toHaveClass(styles.modifiers.stickyBottomStuck);
+});

package/src/components/Page/__tests__/PageSection.test.tsx

@@ -199,3 +199,67 @@ test(`Renders with ${styles.modifiers.noPlainOnGlass} class when isNoPlainOnGlas
 
   expect(screen.getByText('test')).toHaveClass(styles.modifiers.noPlainOnGlass);
 });
+
+test(`Does not add sticky base or sticky stuck classes by default`, () => {
+  render(<PageSection component="main">test</PageSection>);
+  const section = screen.getByRole('main');
+  expect(section).not.toHaveClass(styles.modifiers.stickyTopBase);
+  expect(section).not.toHaveClass(styles.modifiers.stickyBottomBase);
+  expect(section).not.toHaveClass(styles.modifiers.stickyTopStuck);
+  expect(section).not.toHaveClass(styles.modifiers.stickyBottomStuck);
+});
+
+test(`Adds ${styles.modifiers.stickyTopBase} without stuck class when stickyBase="top"`, () => {
+  render(
+    <PageSection component="main" stickyBase="top">
+      test
+    </PageSection>
+  );
+  const section = screen.getByRole('main');
+  expect(section).toHaveClass(styles.modifiers.stickyTopBase);
+  expect(section).not.toHaveClass(styles.modifiers.stickyTopStuck);
+});
+
+test(`Adds ${styles.modifiers.stickyBottomBase} without stuck class when stickyBase="bottom"`, () => {
+  render(
+    <PageSection component="main" stickyBase="bottom">
+      test
+    </PageSection>
+  );
+  const section = screen.getByRole('main');
+  expect(section).toHaveClass(styles.modifiers.stickyBottomBase);
+  expect(section).not.toHaveClass(styles.modifiers.stickyBottomStuck);
+});
+
+test(`Adds ${styles.modifiers.stickyTopStuck} when stickyBase="top" and isStickyStuck`, () => {
+  render(
+    <PageSection component="main" stickyBase="top" isStickyStuck>
+      test
+    </PageSection>
+  );
+  const section = screen.getByRole('main');
+  expect(section).toHaveClass(styles.modifiers.stickyTopBase);
+  expect(section).toHaveClass(styles.modifiers.stickyTopStuck);
+});
+
+test(`Adds ${styles.modifiers.stickyBottomStuck} when stickyBase="bottom" and isStickyStuck`, () => {
+  render(
+    <PageSection component="main" stickyBase="bottom" isStickyStuck>
+      test
+    </PageSection>
+  );
+  const section = screen.getByRole('main');
+  expect(section).toHaveClass(styles.modifiers.stickyBottomBase);
+  expect(section).toHaveClass(styles.modifiers.stickyBottomStuck);
+});
+
+test(`Does not add stuck class when isStickyStuck is true but stickyBase is not set`, () => {
+  render(
+    <PageSection component="main" isStickyStuck>
+      test
+    </PageSection>
+  );
+  const section = screen.getByRole('main');
+  expect(section).not.toHaveClass(styles.modifiers.stickyTopStuck);
+  expect(section).not.toHaveClass(styles.modifiers.stickyBottomStuck);
+});

package/src/components/Page/examples/Page.md

@@ -6,7 +6,7 @@ propComponents:
   ['Page', 'PageSidebar', 'PageSidebarBody', 'PageSection', 'PageGroup', 'PageBreadcrumb', 'PageToggleButton']
 ---
 
-import { useState } from 'react';
+import { useState, useLayoutEffect, useRef } from 'react';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import pageSectionWidthLimitMaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 
@@ -131,3 +131,13 @@ To remove the default background color from a page section or group, use the `is
 ```ts file="./PagePlainSections.tsx"
 
 ```
+
+### Dynamic sticky section
+
+A page section may be made sticky with separate control of its sticky positioning and stuck styling using the `stickyBase` and `isStickyStuck` properties. The `stickyBase` property accepts a value of `"top"` or `"bottom"` and applies the base sticky positioning in the given direction. The `isStickyStuck` property applies visual "stuck" styling such as a background, box shadow, and border, and should be toggled based on the scroll position of the scroll parent container.
+
+In this example, a scroll event listener on the scroll parent container toggles `isStickyStuck` when `scrollTop > 0`, so the stuck styling appears only when the content is scrolled.
+
+```ts file="./PageDynamicStickySection.tsx"
+
+```

package/src/components/Page/examples/PageDynamicStickySection.tsx

@@ -0,0 +1,108 @@
+import { useLayoutEffect, useState, useRef } from 'react';
+import {
+  Page,
+  Masthead,
+  MastheadMain,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadContent,
+  PageSection,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+  Breadcrumb,
+  BreadcrumbItem,
+  Content
+} from '@patternfly/react-core';
+
+const useIsStuckFromScrollParent = ({
+  shouldTrack,
+  scrollParentRef
+}: {
+  shouldTrack: boolean;
+  scrollParentRef: React.RefObject<any>;
+}): boolean => {
+  const [isStuck, setIsStuck] = useState(false);
+
+  useLayoutEffect(() => {
+    if (!shouldTrack) {
+      setIsStuck(false);
+      return;
+    }
+
+    const scrollElement = scrollParentRef.current;
+    if (!scrollElement) {
+      setIsStuck(false);
+      return;
+    }
+
+    const syncFromScroll = () => {
+      setIsStuck(scrollElement.scrollTop > 0);
+    };
+    syncFromScroll();
+    scrollElement.addEventListener('scroll', syncFromScroll, { passive: true });
+    return () => scrollElement.removeEventListener('scroll', syncFromScroll);
+  }, [shouldTrack, scrollParentRef]);
+
+  return isStuck;
+};
+
+export const PageDynamicStickySection: React.FunctionComponent = () => {
+  const scrollParentRef = useRef<HTMLDivElement>(null);
+  const isStickyStuck = useIsStuckFromScrollParent({ shouldTrack: true, scrollParentRef });
+
+  const headerToolbar = (
+    <Toolbar id="dynamic-sticky-toolbar">
+      <ToolbarContent>
+        <ToolbarItem>header-tools</ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  const masthead = (
+    <Masthead>
+      <MastheadMain>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>{headerToolbar}</MastheadContent>
+    </Masthead>
+  );
+
+  return (
+    <Page masthead={masthead}>
+      <div ref={scrollParentRef} style={{ overflowY: 'auto', height: '100%' }}>
+        <PageSection type="breadcrumb" stickyBase="top" isStickyStuck={isStickyStuck}>
+          <Breadcrumb>
+            <BreadcrumbItem>Section home</BreadcrumbItem>
+            <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+            <BreadcrumbItem to="#" isActive>
+              Section landing
+            </BreadcrumbItem>
+          </Breadcrumb>
+        </PageSection>
+        <PageSection>
+          <Content>
+            <h1>Main title</h1>
+            <p>
+              Scroll the container to see the breadcrumb section above dynamically apply its stuck styling. The section
+              uses <code>stickyBase=&quot;top&quot;</code> to remain fixed at the top of the scroll parent, and{' '}
+              <code>isStickyStuck</code> is toggled via a scroll event listener to apply visual styling when the section
+              is no longer at the top edge.
+            </p>
+          </Content>
+        </PageSection>
+        {Array.from({ length: 30 }, (_, i) => (
+          <PageSection key={i} variant={i % 2 === 0 ? 'default' : 'secondary'}>
+            <Content>
+              <p>{`Section ${i + 1} content`}</p>
+            </Content>
+          </PageSection>
+        ))}
+      </div>
+    </Page>
+  );
+};

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

@@ -149,7 +149,9 @@ export const CompassBasic: React.FunctionComponent = () => {
   const mainContent = (
     <>
       <CompassHero>
-        <Hero gradientDark={{ stop1: '#000', stop2: '#1b0d33', stop3: '#3d2785' }}>Hero</Hero>
+        <Hero isGlass gradientDark={{ stop1: '#000', stop2: '#1b0d33', stop3: '#3d2785' }}>
+          Hero
+        </Hero>
       </CompassHero>
       <CompassMainHeader title={<Title headingLevel="h1">Content title</Title>} />
       <CompassContent>