@patternfly/react-core 4.228.0 → 4.230.0

package/src/components/Page/PageBreadcrumb.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Page/page';
+import { formatBreakpointMods } from '../../helpers/util';
+import { PageContext } from '../Page/Page';
 
 export interface PageBreadcrumbProps extends React.HTMLProps<HTMLElement> {
   /** Additional classes to apply to the PageBreadcrumb */
@@ -9,8 +11,17 @@ export interface PageBreadcrumbProps extends React.HTMLProps<HTMLElement> {
   children?: React.ReactNode;
   /** Limits the width of the breadcrumb */
   isWidthLimited?: boolean;
-  /** Modifier indicating if the PageBreadcrumb is sticky to the top or bottom */
+  /**  @deprecated Use the stickyOnBreakpoint prop instead - Modifier indicating if the PageBreadcrumb is sticky to the top or bottom */
   sticky?: 'top' | 'bottom';
+  /** Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints */
+  stickyOnBreakpoint?: {
+    default?: 'top' | 'bottom';
+    sm?: 'top' | 'bottom';
+    md?: 'top' | 'bottom';
+    lg?: 'top' | 'bottom';
+    xl?: 'top' | 'bottom';
+    '2xl'?: 'top' | 'bottom';
+  };
   /** Flag indicating if PageBreadcrumb should have a shadow at the top */
   hasShadowTop?: boolean;
   /** Flag indicating if PageBreadcrumb should have a shadow at the bottom */
@@ -24,27 +35,33 @@ export const PageBreadcrumb = ({
   children,
   isWidthLimited,
   sticky,
+  stickyOnBreakpoint,
   hasShadowTop = false,
   hasShadowBottom = false,
   hasOverflowScroll = false,
   ...props
-}: PageBreadcrumbProps) => (
-  <section
-    className={css(
-      styles.pageMainBreadcrumb,
-      isWidthLimited && styles.modifiers.limitWidth,
-      sticky === 'top' && styles.modifiers.stickyTop,
-      sticky === 'bottom' && styles.modifiers.stickyBottom,
-      hasShadowTop && styles.modifiers.shadowTop,
-      hasShadowBottom && styles.modifiers.shadowBottom,
-      hasOverflowScroll && styles.modifiers.overflowScroll,
-      className
-    )}
-    {...(hasOverflowScroll && { tabIndex: 0 })}
-    {...props}
-  >
-    {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}
-    {!isWidthLimited && children}
-  </section>
-);
+}: PageBreadcrumbProps) => {
+  const { height, getVerticalBreakpoint } = React.useContext(PageContext);
+
+  return (
+    <section
+      className={css(
+        styles.pageMainBreadcrumb,
+        formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
+        isWidthLimited && styles.modifiers.limitWidth,
+        sticky === 'top' && styles.modifiers.stickyTop,
+        sticky === 'bottom' && styles.modifiers.stickyBottom,
+        hasShadowTop && styles.modifiers.shadowTop,
+        hasShadowBottom && styles.modifiers.shadowBottom,
+        hasOverflowScroll && styles.modifiers.overflowScroll,
+        className
+      )}
+      {...(hasOverflowScroll && { tabIndex: 0 })}
+      {...props}
+    >
+      {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}
+      {!isWidthLimited && children}
+    </section>
+  );
+};
 PageBreadcrumb.displayName = 'PageBreadcrumb';

package/src/components/Page/PageGroup.tsx

@@ -1,14 +1,24 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Page/page';
-
+import { formatBreakpointMods } from '../../helpers/util';
+import { PageContext } from '../Page/Page';
 export interface PageGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes to apply to the PageGroup */
   className?: string;
   /** Content rendered inside of the PageGroup */
   children?: React.ReactNode;
-  /** Modifier indicating if PageGroup is sticky to the top or bottom */
+  /**  @deprecated Use the stickyOnBreakpoint prop instead - Modifier indicating if the PageBreadcrumb is sticky to the top or bottom */
   sticky?: 'top' | 'bottom';
+  /** Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints */
+  stickyOnBreakpoint?: {
+    default?: 'top' | 'bottom';
+    sm?: 'top' | 'bottom';
+    md?: 'top' | 'bottom';
+    lg?: 'top' | 'bottom';
+    xl?: 'top' | 'bottom';
+    '2xl'?: 'top' | 'bottom';
+  };
   /** Modifier indicating if PageGroup should have a shadow at the top */
   hasShadowTop?: boolean;
   /** Modifier indicating if PageGroup should have a shadow at the bottom */
@@ -21,25 +31,31 @@ export const PageGroup = ({
   className = '',
   children,
   sticky,
+  stickyOnBreakpoint,
   hasShadowTop = false,
   hasShadowBottom = false,
   hasOverflowScroll = false,
   ...props
-}: PageGroupProps) => (
-  <div
-    {...props}
-    className={css(
-      styles.pageMainGroup,
-      sticky === 'top' && styles.modifiers.stickyTop,
-      sticky === 'bottom' && styles.modifiers.stickyBottom,
-      hasShadowTop && styles.modifiers.shadowTop,
-      hasShadowBottom && styles.modifiers.shadowBottom,
-      hasOverflowScroll && styles.modifiers.overflowScroll,
-      className
-    )}
-    {...(hasOverflowScroll && { tabIndex: 0 })}
-  >
-    {children}
-  </div>
-);
+}: PageGroupProps) => {
+  const { height, getVerticalBreakpoint } = React.useContext(PageContext);
+
+  return (
+    <div
+      {...props}
+      className={css(
+        styles.pageMainGroup,
+        formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
+        sticky === 'top' && styles.modifiers.stickyTop,
+        sticky === 'bottom' && styles.modifiers.stickyBottom,
+        hasShadowTop && styles.modifiers.shadowTop,
+        hasShadowBottom && styles.modifiers.shadowBottom,
+        hasOverflowScroll && styles.modifiers.overflowScroll,
+        className
+      )}
+      {...(hasOverflowScroll && { tabIndex: 0 })}
+    >
+      {children}
+    </div>
+  );
+};
 PageGroup.displayName = 'PageGroup';

package/src/components/Page/PageNavigation.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Page/page';
+import { formatBreakpointMods } from '../../helpers/util';
+import { PageContext } from '../Page/Page';
 
 export interface PageNavigationProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes to apply to the PageNavigation */
@@ -9,8 +11,17 @@ export interface PageNavigationProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /** Limits the width of the PageNavigation */
   isWidthLimited?: boolean;
-  /** Modifier indicating if the PageNavigation is sticky to the top or bottom */
+  /**  @deprecated Use the stickyOnBreakpoint prop instead - Modifier indicating if the PageBreadcrumb is sticky to the top or bottom */
   sticky?: 'top' | 'bottom';
+  /** Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints */
+  stickyOnBreakpoint?: {
+    default?: 'top' | 'bottom';
+    sm?: 'top' | 'bottom';
+    md?: 'top' | 'bottom';
+    lg?: 'top' | 'bottom';
+    xl?: 'top' | 'bottom';
+    '2xl'?: 'top' | 'bottom';
+  };
   /** Flag indicating if PageNavigation should have a shadow at the top */
   hasShadowTop?: boolean;
   /** Flag indicating if PageNavigation should have a shadow at the bottom */
@@ -24,27 +35,33 @@ export const PageNavigation = ({
   children,
   isWidthLimited,
   sticky,
+  stickyOnBreakpoint,
   hasShadowTop = false,
   hasShadowBottom = false,
   hasOverflowScroll = false,
   ...props
-}: PageNavigationProps) => (
-  <div
-    className={css(
-      styles.pageMainNav,
-      isWidthLimited && styles.modifiers.limitWidth,
-      sticky === 'top' && styles.modifiers.stickyTop,
-      sticky === 'bottom' && styles.modifiers.stickyBottom,
-      hasShadowTop && styles.modifiers.shadowTop,
-      hasShadowBottom && styles.modifiers.shadowBottom,
-      hasOverflowScroll && styles.modifiers.overflowScroll,
-      className
-    )}
-    {...(hasOverflowScroll && { tabIndex: 0 })}
-    {...props}
-  >
-    {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}
-    {!isWidthLimited && children}
-  </div>
-);
+}: PageNavigationProps) => {
+  const { height, getVerticalBreakpoint } = React.useContext(PageContext);
+
+  return (
+    <div
+      className={css(
+        styles.pageMainNav,
+        formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
+        isWidthLimited && styles.modifiers.limitWidth,
+        sticky === 'top' && styles.modifiers.stickyTop,
+        sticky === 'bottom' && styles.modifiers.stickyBottom,
+        hasShadowTop && styles.modifiers.shadowTop,
+        hasShadowBottom && styles.modifiers.shadowBottom,
+        hasOverflowScroll && styles.modifiers.overflowScroll,
+        className
+      )}
+      {...(hasOverflowScroll && { tabIndex: 0 })}
+      {...props}
+    >
+      {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}
+      {!isWidthLimited && children}
+    </div>
+  );
+};
 PageNavigation.displayName = 'PageNavigation';

package/src/components/Page/PageSection.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
 import { formatBreakpointMods } from '../../helpers/util';
+import { PageContext } from '../Page/Page';
 
 export enum PageSectionVariants {
   default = 'default',
@@ -43,8 +44,17 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'padding' | 'noPadding';
     '2xl'?: 'padding' | 'noPadding';
   };
-  /** Modifier indicating if PageSection is sticky to the top or bottom */
+  /**  @deprecated Use the stickyOnBreakpoint prop instead - Modifier indicating if the PageBreadcrumb is sticky to the top or bottom */
   sticky?: 'top' | 'bottom';
+  /** Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints */
+  stickyOnBreakpoint?: {
+    default?: 'top' | 'bottom';
+    sm?: 'top' | 'bottom';
+    md?: 'top' | 'bottom';
+    lg?: 'top' | 'bottom';
+    xl?: 'top' | 'bottom';
+    '2xl'?: 'top' | 'bottom';
+  };
   /** Modifier indicating if PageSection should have a shadow at the top */
   hasShadowTop?: boolean;
   /** Modifier indicating if PageSection should have a shadow at the bottom */
@@ -79,32 +89,38 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
   isWidthLimited = false,
   isCenterAligned = false,
   sticky,
+  stickyOnBreakpoint,
   hasShadowTop = false,
   hasShadowBottom = false,
   hasOverflowScroll = false,
   ...props
-}: PageSectionProps) => (
-  <section
-    {...props}
-    className={css(
-      variantType[type],
-      formatBreakpointMods(padding, styles),
-      variantStyle[variant],
-      isFilled === false && styles.modifiers.noFill,
-      isFilled === true && styles.modifiers.fill,
-      isWidthLimited && styles.modifiers.limitWidth,
-      isWidthLimited && isCenterAligned && type !== PageSectionTypes.subNav && styles.modifiers.alignCenter,
-      sticky === 'top' && styles.modifiers.stickyTop,
-      sticky === 'bottom' && styles.modifiers.stickyBottom,
-      hasShadowTop && styles.modifiers.shadowTop,
-      hasShadowBottom && styles.modifiers.shadowBottom,
-      hasOverflowScroll && styles.modifiers.overflowScroll,
-      className
-    )}
-    {...(hasOverflowScroll && { tabIndex: 0 })}
-  >
-    {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}
-    {!isWidthLimited && children}
-  </section>
-);
+}: PageSectionProps) => {
+  const { height, getVerticalBreakpoint } = React.useContext(PageContext);
+
+  return (
+    <section
+      {...props}
+      className={css(
+        variantType[type],
+        formatBreakpointMods(padding, styles),
+        formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
+        variantStyle[variant],
+        isFilled === false && styles.modifiers.noFill,
+        isFilled === true && styles.modifiers.fill,
+        isWidthLimited && styles.modifiers.limitWidth,
+        isWidthLimited && isCenterAligned && type !== PageSectionTypes.subNav && styles.modifiers.alignCenter,
+        sticky === 'top' && styles.modifiers.stickyTop,
+        sticky === 'bottom' && styles.modifiers.stickyBottom,
+        hasShadowTop && styles.modifiers.shadowTop,
+        hasShadowBottom && styles.modifiers.shadowBottom,
+        hasOverflowScroll && styles.modifiers.overflowScroll,
+        className
+      )}
+      {...(hasOverflowScroll && { tabIndex: 0 })}
+    >
+      {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}
+      {!isWidthLimited && children}
+    </section>
+  );
+};
 PageSection.displayName = 'PageSection';

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

@@ -95,6 +95,74 @@ describe('Page', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('Verify sticky top breadcrumb on all height breakpoints', () => {
+    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Sidebar = <PageSidebar isNavOpen />;
+    const PageBreadcrumb = () => (
+      <Breadcrumb>
+        <BreadcrumbItem>Section Home</BreadcrumbItem>
+        <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
+        <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
+        <BreadcrumbItem to="#" isActive>
+          Section Landing
+        </BreadcrumbItem>
+      </Breadcrumb>
+    );
+
+    const { asFragment } = render(
+      <Page
+        {...props}
+        header={Header}
+        sidebar={Sidebar}
+        breadcrumb={<PageBreadcrumb />}
+        breadcrumbProps={{ stickyOnBreakpoint: { sm: 'top', md: 'top', lg: 'top', xl: 'top', '2xl': 'top' } }}
+      >
+        <PageSection variant="default">Section with default background</PageSection>
+        <PageSection variant="light">Section with light background</PageSection>
+        <PageSection variant="dark">Section with dark background</PageSection>
+        <PageSection variant="darker">Section with darker background</PageSection>
+      </Page>
+    );
+
+    expect(screen.getByRole('main')).not.toHaveAttribute('id');
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Verify sticky bottom breadcrumb on all height breakpoints', () => {
+    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Sidebar = <PageSidebar isNavOpen />;
+    const PageBreadcrumb = () => (
+      <Breadcrumb>
+        <BreadcrumbItem>Section Home</BreadcrumbItem>
+        <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
+        <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
+        <BreadcrumbItem to="#" isActive>
+          Section Landing
+        </BreadcrumbItem>
+      </Breadcrumb>
+    );
+
+    const { asFragment } = render(
+      <Page
+        {...props}
+        header={Header}
+        sidebar={Sidebar}
+        breadcrumb={<PageBreadcrumb />}
+        breadcrumbProps={{
+          stickyOnBreakpoint: { sm: 'bottom', md: 'bottom', lg: 'bottom', xl: 'bottom', '2xl': 'bottom' }
+        }}
+      >
+        <PageSection variant="default">Section with default background</PageSection>
+        <PageSection variant="light">Section with light background</PageSection>
+        <PageSection variant="dark">Section with dark background</PageSection>
+        <PageSection variant="darker">Section with darker background</PageSection>
+      </Page>
+    );
+
+    expect(screen.getByRole('main')).not.toHaveAttribute('id');
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   test('Check page to verify breadcrumb is created - PageBreadcrumb syntax', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
     const Sidebar = <PageSidebar isNavOpen />;
@@ -122,6 +190,62 @@ describe('Page', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('Verify sticky top breadcrumb on all height breakpoints - PageBreadcrumb syntax', () => {
+    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Sidebar = <PageSidebar isNavOpen />;
+
+    const { asFragment } = render(
+      <Page {...props} header={Header} sidebar={Sidebar}>
+        <PageBreadcrumb stickyOnBreakpoint={{ sm: 'top', md: 'top', lg: 'top', xl: 'top', '2xl': 'top' }}>
+          <Breadcrumb>
+            <BreadcrumbItem>Section Home</BreadcrumbItem>
+            <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
+            <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
+            <BreadcrumbItem to="#" isActive>
+              Section Landing
+            </BreadcrumbItem>
+          </Breadcrumb>
+        </PageBreadcrumb>
+        <PageSection variant="default">Section with default background</PageSection>
+        <PageSection variant="light">Section with light background</PageSection>
+        <PageSection variant="dark">Section with dark background</PageSection>
+        <PageSection variant="darker">Section with darker background</PageSection>
+      </Page>
+    );
+
+    expect(screen.getByRole('main')).not.toHaveAttribute('id');
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Sticky bottom breadcrumb on all height breakpoints - PageBreadcrumb syntax', () => {
+    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Sidebar = <PageSidebar isNavOpen />;
+
+    const { asFragment } = render(
+      <Page {...props} header={Header} sidebar={Sidebar}>
+        <PageBreadcrumb
+          stickyOnBreakpoint={{ sm: 'bottom', md: 'bottom', lg: 'bottom', xl: 'bottom', '2xl': 'bottom' }}
+        >
+          <Breadcrumb>
+            <BreadcrumbItem>Section Home</BreadcrumbItem>
+            <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
+            <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
+            <BreadcrumbItem to="#" isActive>
+              Section Landing
+            </BreadcrumbItem>
+          </Breadcrumb>
+        </PageBreadcrumb>
+        <PageSection variant="default">Section with default background</PageSection>
+        <PageSection variant="light">Section with light background</PageSection>
+        <PageSection variant="dark">Section with dark background</PageSection>
+        <PageSection variant="darker">Section with darker background</PageSection>
+      </Page>
+    );
+
+    expect(screen.getByRole('main')).not.toHaveAttribute('id');
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   test('Check page to verify nav is created - PageNavigation syntax', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
     const Sidebar = <PageSidebar isNavOpen />;
@@ -158,7 +282,7 @@ describe('Page', () => {
 
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
-        <PageGroup sticky="bottom">
+        <PageGroup stickyOnBreakpoint={{ default: 'bottom' }}>
           <PageBreadcrumb>
             <Breadcrumb>
               <BreadcrumbItem>Section Home</BreadcrumbItem>
@@ -232,7 +356,7 @@ describe('Page', () => {
         tertiaryNav={nav}
         isBreadcrumbGrouped
         isTertiaryNavGrouped
-        groupProps={{ sticky: 'bottom', hasShadowTop: true }}
+        groupProps={{ stickyOnBreakpoint: { default: 'bottom' }, hasShadowTop: true }}
       >
         <PageSection variant="default">Section with default background</PageSection>
         <PageSection variant="light">Section with light background</PageSection>