@patternfly/react-core 4.276.6 → 5.0.0-alpha.10

package/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap

@@ -664,7 +664,7 @@ exports[`Nav Horizontal Nav List 1`] = `
 exports[`Nav Horizontal SubNav List 1`] = `
 <DocumentFragment>
   <nav
-    aria-label="Global"
+    aria-label="Local"
     class="pf-c-nav pf-m-horizontal-subnav"
     data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-1"
     data-ouia-component-type="PF4/Nav"
@@ -990,6 +990,109 @@ exports[`Nav Nav List with custom item nodes 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Nav Nav List with flyout 1`] = `
+<DocumentFragment>
+  <nav
+    aria-label="Local"
+    class="pf-c-nav pf-m-horizontal pf-m-tertiary"
+    data-ouia-component-id="OUIA-Generated-Nav-tertiary-3"
+    data-ouia-component-type="PF4/Nav"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-label="Scroll left"
+      class="pf-c-nav__scroll-button"
+      disabled=""
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 256 512"
+        width="1em"
+      >
+        <path
+          d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+        />
+      </svg>
+    </button>
+    <ul
+      class="pf-c-nav__list"
+    >
+      <li
+        class="pf-c-nav__item pf-m-flyout test-nav-item-class"
+        data-ouia-component-id="OUIA-Generated-NavItem-54"
+        data-ouia-component-type="PF4/NavItem"
+        data-ouia-safe="true"
+      >
+        <div
+          class="pf-c-nav__link my-custom-node"
+        >
+          My custom node
+          <span
+            class="pf-c-nav__toggle"
+          >
+            <span
+              class="pf-c-nav__toggle-icon"
+            >
+              <svg
+                aria-hidden="true"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style="vertical-align: -0.125em;"
+                viewBox="0 0 256 512"
+                width="1em"
+              >
+                <path
+                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
+      </li>
+    </ul>
+    <button
+      aria-label="Scroll right"
+      class="pf-c-nav__scroll-button"
+      disabled=""
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 256 512"
+        width="1em"
+      >
+        <path
+          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+        />
+      </svg>
+    </button>
+    <div
+      style="display: contents;"
+    >
+      <div
+        class=""
+        data-popper-escaped="true"
+        data-popper-placement="right-start"
+        data-popper-reference-hidden="true"
+        style="position: absolute; left: 0px; top: 0px; z-index: 9999; width: 0px; transform: translate(0px, 0px);"
+      >
+        <div>
+          Flyout test
+        </div>
+      </div>
+    </div>
+  </nav>
+</DocumentFragment>
+`;
+
 exports[`Nav Renders nav list in strict mode 1`] = `
 <DocumentFragment>
   <nav

package/src/components/Nav/examples/NavDefault.tsx

@@ -9,7 +9,7 @@ export const NavDefault: React.FunctionComponent = () => {
   };
 
   return (
-    <Nav onSelect={onSelect} aria-label="Default global nav">
+    <Nav onSelect={onSelect} aria-label="Default global">
       <NavList>
         <NavItem preventDefault id="nav-default-link1" to="#nav-default-link1" itemId={0} isActive={activeItem === 0}>
           Default Link 1

package/src/components/Nav/examples/NavDrilldown.tsx

@@ -75,7 +75,7 @@ export const NavigationDrilldown: React.FunctionComponent = () => {
   };
 
   return (
-    <Nav aria-label="Drilldown global nav">
+    <Nav aria-label="Drilldown global">
       <Menu
         id="nav-drilldown-rootMenu"
         containsDrilldown

package/src/components/Nav/examples/NavExpandable.tsx

@@ -25,7 +25,7 @@ export const NavExpandableExample: React.FunctionComponent = () => {
   };
 
   return (
-    <Nav onSelect={onSelect} onToggle={onToggle} aria-label="Expandable global nav">
+    <Nav onSelect={onSelect} onToggle={onToggle} aria-label="Expandable global">
       <NavList>
         <NavExpandable
           title="Expandable Group 1"

package/src/components/Nav/examples/NavExpandableThirdLevel.tsx

@@ -16,7 +16,7 @@ export const NavExpandableThirdLevel: React.FunctionComponent = () => {
   };
 
   return (
-    <Nav onSelect={onSelect} onToggle={onToggle} aria-label="Expandable third level global nav">
+    <Nav onSelect={onSelect} onToggle={onToggle} aria-label="Expandable third level global">
       <NavList>
         <NavExpandable
           title="Expandable section title 1"

package/src/components/Nav/examples/NavFlyout.tsx

@@ -47,7 +47,7 @@ export const NavFlyout: React.FunctionComponent = () => {
   }
 
   return (
-    <Nav onSelect={onSelect} aria-label="Flyout global nav">
+    <Nav onSelect={onSelect} aria-label="Flyout global">
       <NavList>
         <NavItem
           preventDefault

package/src/components/Nav/examples/NavGrouped.tsx

@@ -9,7 +9,7 @@ export const NavGrouped: React.FunctionComponent = () => {
   };
 
   return (
-    <Nav onSelect={onSelect} aria-label="Grouped global nav">
+    <Nav onSelect={onSelect} aria-label="Grouped global">
       <NavGroup title="Section title 1">
         <NavItem
           preventDefault

package/src/components/Nav/examples/NavHorizontalPageHeader.tsx

@@ -9,7 +9,7 @@ export const NavHorizontalPageHeader: React.FunctionComponent = () => {
   };
 
   const nav = (
-    <Nav onSelect={onSelect} variant="horizontal" aria-label="Horizontal global nav">
+    <Nav onSelect={onSelect} variant="horizontal" aria-label="Horizontal global">
       <NavList>
         {Array.apply(0, Array(10)).map(function(_item, index: number) {
           const num = index + 1;

package/src/components/Nav/examples/NavHorizontalSubNav.tsx

@@ -9,7 +9,7 @@ export const NavHorizontalSubNav: React.FunctionComponent = () => {
   };
 
   return (
-    <Nav onSelect={onSelect} variant="horizontal-subnav" aria-label="Horizontal subnav global nav">
+    <Nav onSelect={onSelect} variant="horizontal-subnav" aria-label="Horizontal subnav local">
       <NavList>
         {Array.apply(0, Array(10)).map(function(_item, index: number) {
           const num = index + 1;

package/src/components/Nav/examples/NavLegacyTertiary.tsx

@@ -9,7 +9,7 @@ export const NavLegacyTertiary: React.FunctionComponent = () => {
   };
 
   return (
-    <Nav onSelect={onSelect} variant="tertiary" aria-label="Tertiary global nav">
+    <Nav onSelect={onSelect} variant="tertiary" aria-label="Tertiary local">
       <NavList>
         {Array.apply(0, Array(10)).map(function(_item, index: number) {
           const num = index + 1;

package/src/components/Nav/examples/NavMixed.tsx

@@ -11,7 +11,7 @@ export const NavMixed: React.FunctionComponent = () => {
   };
 
   return (
-    <Nav onSelect={onSelect} aria-label="Mixed global nav">
+    <Nav onSelect={onSelect} aria-label="Mixed global">
       <NavList>
         <NavItem
           preventDefault

package/src/components/NotificationBadge/NotificationBadge.tsx

@@ -28,16 +28,13 @@ export interface NotificationBadgeProps extends Omit<ButtonProps, 'variant'> {
    * notification badge.
    */
   isExpanded?: boolean;
-  /** @deprecated Use the variant prop instead - Adds styling to the notification badge to indicate it has been read. */
-  isRead?: boolean;
   /** Determines the variant of the notification badge. */
   variant?: NotificationBadgeVariant | 'read' | 'unread' | 'attention';
 }
 
 export const NotificationBadge: React.FunctionComponent<NotificationBadgeProps> = ({
-  isRead,
   children,
-  variant = isRead ? 'read' : 'unread',
+  variant = NotificationBadgeVariant.read,
   count = 0,
   attentionIcon = <AttentionBellIcon />,
   icon = <BellIcon />,

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

@@ -2,13 +2,6 @@ import { NotificationBadge } from '../NotificationBadge';
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 
-Object.values([true, false]).forEach(isRead => {
-  test(`${isRead} NotificationBadge`, () => {
-    const { asFragment } = render(<NotificationBadge isRead={isRead} />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
-
 Object.values([true, false]).forEach(attentionVariant => {
   test(`${attentionVariant} NotificationBadge needs attention`, () => {
     const { asFragment } = render(

package/src/components/NotificationBadge/__tests__/__snapshots__/NotificationBadge.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`NotificationBadge count 1`] = `
     aria-disabled="false"
     aria-expanded="false"
     class="pf-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-5"
+    data-ouia-component-id="OUIA-Generated-Button-plain-3"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
     type="button"
@@ -37,45 +37,13 @@ exports[`NotificationBadge count 1`] = `
 </DocumentFragment>
 `;
 
-exports[`false NotificationBadge 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-expanded="false"
-    class="pf-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-2"
-    data-ouia-component-type="PF4/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    <span
-      class="pf-c-notification-badge pf-m-unread"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 896 1024"
-        width="1em"
-      >
-        <path
-          d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z"
-        />
-      </svg>
-    </span>
-  </button>
-</DocumentFragment>
-`;
-
 exports[`false NotificationBadge needs attention 1`] = `
 <DocumentFragment>
   <button
     aria-disabled="false"
     aria-expanded="false"
     class="pf-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-4"
+    data-ouia-component-id="OUIA-Generated-Button-plain-2"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
     type="button"
@@ -89,45 +57,13 @@ exports[`false NotificationBadge needs attention 1`] = `
 </DocumentFragment>
 `;
 
-exports[`true NotificationBadge 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-expanded="false"
-    class="pf-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-1"
-    data-ouia-component-type="PF4/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    <span
-      class="pf-c-notification-badge pf-m-read"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 896 1024"
-        width="1em"
-      >
-        <path
-          d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z"
-        />
-      </svg>
-    </span>
-  </button>
-</DocumentFragment>
-`;
-
 exports[`true NotificationBadge needs attention 1`] = `
 <DocumentFragment>
   <button
     aria-disabled="false"
     aria-expanded="false"
     class="pf-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-3"
+    data-ouia-component-id="OUIA-Generated-Button-plain-1"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
     type="button"

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

@@ -207,7 +207,7 @@ describe('numberInput', () => {
     expect(input).toHaveDisplayValue('0');
   });
 
-  test('renders 0 if null value passed without allow empty', () => {
+  test('renders 0 if null value passed', () => {
     render(<NumberInput value={null} />);
     const input = screen.getByRole('spinbutton');
     expect(input).toHaveDisplayValue('0');

package/src/components/OptionsMenu/OptionsMenu.tsx

@@ -3,7 +3,6 @@ import styles from '@patternfly/react-styles/css/components/OptionsMenu/options-
 import { DropdownContext } from '../Dropdown';
 import { DropdownWithContext } from '../Dropdown/DropdownWithContext';
 import { OUIAProps, useOUIAId } from '../../helpers';
-import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper';
 
 export enum OptionsMenuPosition {
   right = 'right',
@@ -15,10 +14,7 @@ export enum OptionsMenuDirection {
   down = 'down'
 }
 
-export interface OptionsMenuProps
-  extends Omit<ToggleMenuBaseProps, 'menuAppendTo'>,
-    React.HTMLProps<HTMLDivElement>,
-    OUIAProps {
+export interface OptionsMenuProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   /** Classes applied to root element of the options menu */
   className?: string;
   /** Id of the root element of the options menu */

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

@@ -36,7 +36,6 @@ describe('optionsMenu', () => {
     const { asFragment } = render(
       <React.StrictMode>
         <OptionsMenu
-          removeFindDomNode
           id="regular"
           menuItems={menuItems}
           isOpen

package/src/components/Page/Page.tsx

@@ -101,7 +101,6 @@ export class Page extends React.Component<PageProps, PageState> {
     isManagedSidebar: false,
     isBreadcrumbWidthLimited: false,
     defaultManagedSidebarIsOpen: true,
-    onPageResize: (): void => null,
     mainTabIndex: -1,
     isNotificationDrawerExpanded: false,
     onNotificationDrawerExpand: () => null,

package/src/components/Page/PageBreadcrumb.tsx

@@ -1,7 +1,7 @@
 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 { formatBreakpointMods, Mods } from '../../helpers/util';
 import { PageContext } from './PageContext';
 
 export interface PageBreadcrumbProps extends React.HTMLProps<HTMLElement> {
@@ -11,8 +11,6 @@ export interface PageBreadcrumbProps extends React.HTMLProps<HTMLElement> {
   children?: React.ReactNode;
   /** Limits the width of the breadcrumb */
   isWidthLimited?: boolean;
-  /**  @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';
@@ -36,7 +34,6 @@ export const PageBreadcrumb = ({
   className = '',
   children,
   isWidthLimited,
-  sticky,
   stickyOnBreakpoint,
   hasShadowTop = false,
   hasShadowBottom = false,
@@ -57,10 +54,8 @@ export const PageBreadcrumb = ({
     <section
       className={css(
         styles.pageMainBreadcrumb,
-        formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
+        formatBreakpointMods(stickyOnBreakpoint as Mods, 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,

package/src/components/Page/PageGroup.tsx

@@ -8,8 +8,6 @@ export interface PageGroupProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Content rendered inside of the PageGroup */
   children?: React.ReactNode;
-  /**  @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';
@@ -32,7 +30,6 @@ export interface PageGroupProps extends React.HTMLProps<HTMLDivElement> {
 export const PageGroup = ({
   className = '',
   children,
-  sticky,
   stickyOnBreakpoint,
   hasShadowTop = false,
   hasShadowBottom = false,
@@ -55,8 +52,6 @@ export const PageGroup = ({
       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,

package/src/components/Page/PageHeader.tsx

@@ -12,7 +12,7 @@ export interface PageHeaderProps extends React.HTMLProps<HTMLDivElement> {
   /** Component to render the logo/brand, use <Brand /> */
   logo?: React.ReactNode;
   /** Additional props passed to the logo anchor container */
-  logoProps?: object;
+  logoProps?: any;
   /** Component to use to wrap the passed <logo> */
   logoComponent?: React.ReactNode;
   /** Component to render the header tools, use <PageHeaderTools />  */
@@ -25,8 +25,6 @@ export interface PageHeaderProps extends React.HTMLProps<HTMLDivElement> {
   navToggleId?: string;
   /** True if the side nav is shown  */
   isNavOpen?: boolean;
-  /** This prop is no longer managed through PageHeader but in the Page component. */
-  isManagedSidebar?: boolean;
   /** Sets the value for role on the <main> element */
   role?: string;
   /** Callback function to handle the side nav toggle button, managed by the Page component if the Page isManagedSidebar prop is set to true */
@@ -38,12 +36,11 @@ export interface PageHeaderProps extends React.HTMLProps<HTMLDivElement> {
 export const PageHeader: React.FunctionComponent<PageHeaderProps> = ({
   className = '',
   logo = null as React.ReactNode,
-  logoProps = null as object,
-  logoComponent = 'a',
+  logoProps = null as any,
+  logoComponent,
   headerTools = null as React.ReactNode,
   topNav = null as React.ReactNode,
   isNavOpen = true,
-  isManagedSidebar: deprecatedIsManagedSidebar = undefined,
   role = undefined as string,
   showNavToggle = false,
   navToggleId = 'nav-toggle',
@@ -52,11 +49,13 @@ export const PageHeader: React.FunctionComponent<PageHeaderProps> = ({
   'aria-controls': ariaControls = null,
   ...props
 }: PageHeaderProps) => {
-  const LogoComponent = logoComponent as any;
-  if ([false, true].includes(deprecatedIsManagedSidebar)) {
-    console.warn(
-      'isManagedSidebar is deprecated in the PageHeader component. To make the sidebar toggle uncontrolled, pass this prop in the Page component'
-    );
+  let LogoComponent = logoComponent as any;
+  if (!logoComponent) {
+    if (logoProps?.href !== undefined) {
+      LogoComponent = 'a';
+    } else {
+      LogoComponent = 'span';
+    }
   }
   return (
     <PageContextConsumer>

package/src/components/Page/PageNavigation.tsx

@@ -11,8 +11,6 @@ export interface PageNavigationProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /** Limits the width of the PageNavigation */
   isWidthLimited?: boolean;
-  /**  @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';
@@ -36,7 +34,6 @@ export const PageNavigation = ({
   className = '',
   children,
   isWidthLimited,
-  sticky,
   stickyOnBreakpoint,
   hasShadowTop = false,
   hasShadowBottom = false,
@@ -59,8 +56,6 @@ export const PageNavigation = ({
         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,

package/src/components/Page/PageSection.tsx

@@ -44,8 +44,6 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'padding' | 'noPadding';
     '2xl'?: 'padding' | 'noPadding';
   };
-  /**  @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';
@@ -94,7 +92,6 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
   isFilled,
   isWidthLimited = false,
   isCenterAligned = false,
-  sticky,
   stickyOnBreakpoint,
   hasShadowTop = false,
   hasShadowBottom = false,
@@ -126,8 +123,6 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
         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,

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

@@ -12,11 +12,11 @@ describe('page breadcrumb', () => {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Verify top sticky', () => {
-    const { asFragment } = render(<PageBreadcrumb sticky="top">test</PageBreadcrumb>);
+    const { asFragment } = render(<PageBreadcrumb stickyOnBreakpoint={{ default: 'top' }}>test</PageBreadcrumb>);
     expect(asFragment()).toMatchSnapshot();
   });
   test('Verify bottom sticky', () => {
-    const { asFragment } = render(<PageBreadcrumb sticky="bottom">test</PageBreadcrumb>);
+    const { asFragment } = render(<PageBreadcrumb stickyOnBreakpoint={{ default: 'bottom' }}>test</PageBreadcrumb>);
     expect(asFragment()).toMatchSnapshot();
   });
   test('Verify top shadow', () => {

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

@@ -8,11 +8,11 @@ describe('page group', () => {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Verify top sticky', () => {
-    const { asFragment } = render(<PageGroup sticky="top">test</PageGroup>);
+    const { asFragment } = render(<PageGroup stickyOnBreakpoint={{ default: 'top' }}>test</PageGroup>);
     expect(asFragment()).toMatchSnapshot();
   });
   test('Verify bottom sticky', () => {
-    const { asFragment } = render(<PageGroup sticky="bottom">test</PageGroup>);
+    const { asFragment } = render(<PageGroup stickyOnBreakpoint={{ default: 'bottom' }}>test</PageGroup>);
     expect(asFragment()).toMatchSnapshot();
   });
   test('Verify top shadow', () => {

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

@@ -9,3 +9,24 @@ test('Check page vertical layout example against snapshot', () => {
   const { asFragment } = render(Header);
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Test that passed logoComponent overrides default', () => {
+  const Header = (
+    <PageHeader logo="Logo" logoComponent="div" headerTools="PageHeaderTools | Avatar" onNavToggle={() => undefined} />
+  );
+  const { asFragment } = render(Header);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Test that logoComponent with href is an anchor', () => {
+  const Header = (
+    <PageHeader
+      logo="Logo"
+      logoProps={{ href: '#' }}
+      headerTools="PageHeaderTools | Avatar"
+      onNavToggle={() => undefined}
+    />
+  );
+  const { asFragment } = render(Header);
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -12,11 +12,11 @@ describe('page navigation', () => {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Verify top sticky', () => {
-    const { asFragment } = render(<PageNavigation sticky="top">test</PageNavigation>);
+    const { asFragment } = render(<PageNavigation stickyOnBreakpoint={{ default: 'top' }}>test</PageNavigation>);
     expect(asFragment()).toMatchSnapshot();
   });
   test('Verify bottom sticky', () => {
-    const { asFragment } = render(<PageNavigation sticky="bottom">test</PageNavigation>);
+    const { asFragment } = render(<PageNavigation stickyOnBreakpoint={{ default: 'bottom' }}>test</PageNavigation>);
     expect(asFragment()).toMatchSnapshot();
   });
   test('Verify top shadow', () => {