@patternfly/react-core 5.0.0-alpha.81 → 5.0.0-alpha.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.81",
+  "version": "5.0.0-alpha.83",
   "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",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "ec98f5c600339cc7a20dc1142fe33092e743bfe4"
+  "gitHead": "ce1afc78845fba2fd75a62f3ed440b289b4d5b56"
 }

package/src/components/Form/examples/FormHorizontal.tsx

@@ -33,7 +33,7 @@ export const FormHorizontal: React.FunctionComponent = () => {
     setExperience(experience);
   };
 
-  const handleOptionChange = (value: string, _event: React.FormEvent<HTMLSelectElement>) => {
+  const handleOptionChange = (_event: React.FormEvent<HTMLSelectElement>, value: string) => {
     setOption(value);
   };
 

package/src/components/FormSelect/FormSelect.tsx

@@ -30,7 +30,7 @@ export interface FormSelectProps
   /** Optional callback for updating when selection gets focus */
   onFocus?: (event: React.FormEvent<HTMLSelectElement>) => void;
   /** Optional callback for updating when selection changes */
-  onChange?: (value: string, event: React.FormEvent<HTMLSelectElement>) => void;
+  onChange?: (event: React.FormEvent<HTMLSelectElement>, value: string) => void;
   /** Custom flag to show that the FormSelect requires an associated id or aria-label. */
   'aria-label'?: string;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -66,22 +66,12 @@ export class FormSelect extends React.Component<FormSelectProps, { ouiaStateId:
   };
 
   handleChange = (event: any) => {
-    this.props.onChange(event.currentTarget.value, event);
+    this.props.onChange(event, event.currentTarget.value);
   };
 
   render() {
-    const {
-      children,
-      className,
-      value,
-      validated,
-      isDisabled,
-      isRequired,
-      isIconSprite,
-      ouiaId,
-      ouiaSafe,
-      ...props
-    } = this.props;
+    const { children, className, value, validated, isDisabled, isRequired, isIconSprite, ouiaId, ouiaSafe, ...props } =
+      this.props;
     /* find selected option and get placeholder flag */
     const selectedOption = React.Children.toArray(children).find((option: any) => option.props.value === value) as any;
     const isSelectedPlaceholder = selectedOption && selectedOption.props.isPlaceholder;

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

@@ -186,6 +186,6 @@ describe('FormSelect', () => {
     await user.selectOptions(screen.getByLabelText('Some label'), 'Mr');
 
     expect(myMock).toHaveBeenCalled();
-    expect(myMock.mock.calls[0][0]).toEqual('mr');
+    expect(myMock.mock.calls[0][1]).toEqual('mr');
   });
 });

package/src/components/FormSelect/examples/FormSelectBasic.tsx

@@ -4,7 +4,7 @@ import { FormSelect, FormSelectOption } from '@patternfly/react-core';
 export const FormSelectBasic: React.FunctionComponent = () => {
   const [formSelectValue, setFormSelectValue] = React.useState('mrs');
 
-  const onChange = (value: string) => {
+  const onChange = (_event: React.FormEvent<HTMLSelectElement>, value: string) => {
     setFormSelectValue(value);
   };
 

package/src/components/FormSelect/examples/FormSelectDisabled.tsx

@@ -4,7 +4,7 @@ import { FormSelect, FormSelectOption } from '@patternfly/react-core';
 export const FormSelectDisabled: React.FunctionComponent = () => {
   const [formSelectValue, setFormSelectValue] = React.useState('mrs');
 
-  const onChange = (value: string) => {
+  const onChange = (_event: React.FormEvent<HTMLSelectElement>, value: string) => {
     setFormSelectValue(value);
   };
 

package/src/components/FormSelect/examples/FormSelectGrouped.tsx

@@ -4,7 +4,7 @@ import { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly
 export const FormSelectGrouped: React.FunctionComponent = () => {
   const [formSelectValue, setFormSelectValue] = React.useState('2');
 
-  const onChange = (value: string) => {
+  const onChange = (_event: React.FormEvent<HTMLSelectElement>, value: string) => {
     setFormSelectValue(value);
   };
 

package/src/components/FormSelect/examples/FormSelectIconSpriteVariant.tsx

@@ -15,7 +15,7 @@ export const FormSelectIconSpriteVariant: React.FunctionComponent = () => {
   const [validated, setValidated] = React.useState<ValidatedOptions>(ValidatedOptions.default);
   const [helperText, setHelperText] = React.useState('');
 
-  const onChange = (value: string) => {
+  const onChange = (_event: React.FormEvent<HTMLSelectElement>, value: string) => {
     if (value === '3') {
       setFormSelectValue(value);
       setValidated(ValidatedOptions.success);

package/src/components/FormSelect/examples/FormSelectValidated.tsx

@@ -19,7 +19,7 @@ export const FormSelectValidated: React.FunctionComponent = () => {
     setTimeout(callback, 2000);
   };
 
-  const onChange = (value: string) => {
+  const onChange = (_event: React.FormEvent<HTMLSelectElement>, value: string) => {
     setFormValue(value);
     setValidated(ValidatedOptions.default);
     setHelperText('Validating...');

package/src/components/Nav/NavExpandable.tsx

@@ -125,13 +125,13 @@ export class NavExpandable extends React.Component<NavExpandableProps, NavExpand
             {...props}
           >
             <PageSidebarContext.Consumer>
-              {({ isNavOpen }) => (
+              {({ isSidebarOpen }) => (
                 <button
                   className={styles.navLink}
                   id={srText ? null : this.id}
                   onClick={(event) => this.onExpand(event, context.onToggle)}
                   aria-expanded={expandedState}
-                  tabIndex={isNavOpen ? null : -1}
+                  tabIndex={isSidebarOpen ? null : -1}
                   {...buttonProps}
                 >
                   {title}

package/src/components/Nav/NavItem.tsx

@@ -59,7 +59,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
   ...props
 }: NavItemProps) => {
   const { flyoutRef, setFlyoutRef, navRef } = React.useContext(NavContext);
-  const { isNavOpen } = React.useContext(PageSidebarContext);
+  const { isSidebarOpen } = React.useContext(PageSidebarContext);
   const [flyoutTarget, setFlyoutTarget] = React.useState(null);
   const [isHovered, setIsHovered] = React.useState(false);
   const ref = React.useRef<HTMLLIElement>();
@@ -166,7 +166,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
     'aria-expanded': flyoutVisible
   };
 
-  const tabIndex = isNavOpen ? null : -1;
+  const tabIndex = isSidebarOpen ? null : -1;
 
   const renderDefaultLink = (context: any): React.ReactNode => {
     const preventLinkDefault = preventDefault || !to;

package/src/components/Nav/NavList.tsx

@@ -108,7 +108,7 @@ export class NavList extends React.Component<NavListProps> {
       <NavContext.Consumer>
         {({ isHorizontal }) => (
           <PageSidebarContext.Consumer>
-            {({ isNavOpen }) => (
+            {({ isSidebarOpen }) => (
               <React.Fragment>
                 {isHorizontal && (
                   <button
@@ -116,7 +116,7 @@ export class NavList extends React.Component<NavListProps> {
                     aria-label={ariaLeftScroll}
                     onClick={this.scrollLeft}
                     disabled={scrollViewAtStart}
-                    tabIndex={isNavOpen ? null : -1}
+                    tabIndex={isSidebarOpen ? null : -1}
                   >
                     <AngleLeftIcon />
                   </button>
@@ -136,7 +136,7 @@ export class NavList extends React.Component<NavListProps> {
                     aria-label={ariaRightScroll}
                     onClick={this.scrollRight}
                     disabled={scrollViewAtEnd}
-                    tabIndex={isNavOpen ? null : -1}
+                    tabIndex={isSidebarOpen ? null : -1}
                   >
                     <AngleRightIcon />
                   </button>

package/src/components/Page/Page.tsx

@@ -40,8 +40,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   /** tabIndex to use for the [role="main"] element, null to unset it */
   mainTabIndex?: number | null;
   /**
-   * If true, manages the sidebar open/close state and there is no need to pass the isNavOpen boolean into
-   * the sidebar component or add a callback onNavToggle function into the Masthead component
+   * If true, manages the sidebar open/close state and there is no need to pass the isSidebarOpen boolean into
+   * the sidebar component or add a callback onSidebarToggle function into the Masthead component
    */
   isManagedSidebar?: boolean;
   /** Flag indicating if tertiary nav width should be limited */
@@ -51,7 +51,7 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
    */
   defaultManagedSidebarIsOpen?: boolean;
   /**
-   * Can add callback to be notified when resize occurs, for example to set the sidebar isNav prop to false for a width < 768px
+   * Can add callback to be notified when resize occurs, for example to set the sidebar isSidebarOpen prop to false for a width < 768px
    * Returns object { mobileView: boolean, windowSize: number }
    */
   onPageResize?: ((object: any) => void) | null;
@@ -88,8 +88,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export interface PageState {
-  desktopIsNavOpen: boolean;
-  mobileIsNavOpen: boolean;
+  desktopIsSidebarOpen: boolean;
+  mobileIsSidebarOpen: boolean;
   mobileView: boolean;
   width: number;
   height: number;
@@ -117,8 +117,8 @@ export class Page extends React.Component<PageProps, PageState> {
     const { isManagedSidebar, defaultManagedSidebarIsOpen } = props;
     const managedSidebarOpen = !isManagedSidebar ? true : defaultManagedSidebarIsOpen;
     this.state = {
-      desktopIsNavOpen: managedSidebarOpen,
-      mobileIsNavOpen: false,
+      desktopIsSidebarOpen: managedSidebarOpen,
+      mobileIsSidebarOpen: false,
       mobileView: false,
       width: null,
       height: null
@@ -188,20 +188,20 @@ export class Page extends React.Component<PageProps, PageState> {
   handleResize = debounce(this.resize, 250);
 
   handleMainClick = () => {
-    if (this.isMobile() && this.state.mobileIsNavOpen && this.mainRef.current) {
-      this.setState({ mobileIsNavOpen: false });
+    if (this.isMobile() && this.state.mobileIsSidebarOpen && this.mainRef.current) {
+      this.setState({ mobileIsSidebarOpen: false });
     }
   };
 
-  onNavToggleMobile = () => {
-    this.setState(prevState => ({
-      mobileIsNavOpen: !prevState.mobileIsNavOpen
+  onSidebarToggleMobile = () => {
+    this.setState((prevState) => ({
+      mobileIsSidebarOpen: !prevState.mobileIsSidebarOpen
     }));
   };
 
-  onNavToggleDesktop = () => {
-    this.setState(prevState => ({
-      desktopIsNavOpen: !prevState.desktopIsNavOpen
+  onSidebarToggleDesktop = () => {
+    this.setState((prevState) => ({
+      desktopIsSidebarOpen: !prevState.desktopIsSidebarOpen
     }));
   };
 
@@ -237,12 +237,12 @@ export class Page extends React.Component<PageProps, PageState> {
       breadcrumbProps,
       ...rest
     } = this.props;
-    const { mobileView, mobileIsNavOpen, desktopIsNavOpen, width, height } = this.state;
+    const { mobileView, mobileIsSidebarOpen, desktopIsSidebarOpen, width, height } = this.state;
 
     const context = {
       isManagedSidebar,
-      onNavToggle: mobileView ? this.onNavToggleMobile : this.onNavToggleDesktop,
-      isNavOpen: mobileView ? mobileIsNavOpen : desktopIsNavOpen,
+      onSidebarToggle: mobileView ? this.onSidebarToggleMobile : this.onSidebarToggleDesktop,
+      isSidebarOpen: mobileView ? mobileIsSidebarOpen : desktopIsSidebarOpen,
       width,
       height,
       getBreakpoint,

package/src/components/Page/PageContext.tsx

@@ -3,8 +3,8 @@ import { getBreakpoint, getVerticalBreakpoint } from '../../helpers/util';
 
 export interface PageContextProps {
   isManagedSidebar: boolean;
-  onNavToggle: () => void;
-  isNavOpen: boolean;
+  onSidebarToggle: () => void;
+  isSidebarOpen: boolean;
   width: number;
   height: number;
   getBreakpoint: (width: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
@@ -13,8 +13,8 @@ export interface PageContextProps {
 
 export const pageContextDefaults: PageContextProps = {
   isManagedSidebar: false,
-  isNavOpen: false,
-  onNavToggle: () => null,
+  isSidebarOpen: false,
+  onSidebarToggle: () => null,
   width: null,
   height: null,
   getBreakpoint,

package/src/components/Page/PageSidebar.tsx

@@ -6,15 +6,15 @@ import { PageContextConsumer } from './PageContext';
 export interface PageSidebarProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the page sidebar */
   className?: string;
-  /** Component to render the side navigation (e.g. <Nav /> */
-  nav?: React.ReactNode;
+  /** Content rendered inside the page sidebar (e.g. <PageSidebarBody /> */
+  children?: React.ReactNode;
   /**
-   * If true, manages the sidebar open/close state and there is no need to pass the isNavOpen boolean into
-   * the sidebar component or add a callback onNavToggle function into the PageHeader component
+   * If true, manages the sidebar open/close state and there is no need to pass the isSidebarOpen boolean into
+   * the sidebar component or add a callback onSidebarToggle function into the PageHeader component
    */
   isManagedSidebar?: boolean;
-  /** Programmatically manage if the side nav is shown, if isManagedSidebar is set to true in the Page component, this prop is managed */
-  isNavOpen?: boolean;
+  /** Programmatically manage if the sidebar is shown, if isManagedSidebar is set to true in the Page component, this prop is managed */
+  isSidebarOpen?: boolean;
   /** Indicates the color scheme of the sidebar */
   theme?: 'dark' | 'light';
   /** Sidebar id */
@@ -22,24 +22,24 @@ export interface PageSidebarProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export interface PageSidebarContextProps {
-  isNavOpen: boolean;
+  isSidebarOpen: boolean;
 }
 export const pageSidebarContextDefaults: PageSidebarContextProps = {
-  isNavOpen: true
+  isSidebarOpen: true
 };
 export const PageSidebarContext = React.createContext<Partial<PageSidebarContextProps>>(pageSidebarContextDefaults);
 
 export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
   className = '',
-  nav,
-  isNavOpen = true,
+  children,
+  isSidebarOpen = true,
   theme = 'dark',
   id = 'page-sidebar',
   ...props
 }: PageSidebarProps) => (
   <PageContextConsumer>
-    {({ isManagedSidebar, isNavOpen: managedIsNavOpen }: PageSidebarProps) => {
-      const navOpen = isManagedSidebar ? managedIsNavOpen : isNavOpen;
+    {({ isManagedSidebar, isSidebarOpen: managedIsNavOpen }: PageSidebarProps) => {
+      const sidebarOpen = isManagedSidebar ? managedIsNavOpen : isSidebarOpen;
 
       return (
         <div
@@ -47,16 +47,14 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
           className={css(
             styles.pageSidebar,
             theme === 'light' && styles.modifiers.light,
-            navOpen && styles.modifiers.expanded,
-            !navOpen && styles.modifiers.collapsed,
+            sidebarOpen && styles.modifiers.expanded,
+            !sidebarOpen && styles.modifiers.collapsed,
             className
           )}
-          aria-hidden={!navOpen}
+          aria-hidden={!sidebarOpen}
           {...props}
         >
-          <div className={css(styles.pageSidebarBody)}>
-            <PageSidebarContext.Provider value={{ isNavOpen: navOpen }}>{nav}</PageSidebarContext.Provider>
-          </div>
+          <PageSidebarContext.Provider value={{ isSidebarOpen: sidebarOpen }}>{children}</PageSidebarContext.Provider>
         </div>
       );
     }}

package/src/components/Page/PageSidebarBody.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Page/page';
+import { css } from '@patternfly/react-styles';
+
+export interface PageSidebarBodyProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content rendered inside the page sidebar body */
+  children?: React.ReactNode;
+  /** Additional classes added to the page sidebar body */
+  className?: string;
+  /** Flag indicating that the page sidebar body should use page insets. */
+  usePageInsets?: boolean;
+  /** Flag indicating that the page sidebar body should fill the available vertical space. */
+  isFilled?: boolean;
+}
+
+export const PageSidebarBody: React.FunctionComponent<PageSidebarBodyProps> = ({
+  children,
+  className,
+  usePageInsets,
+  isFilled,
+  ...props
+}: PageSidebarBodyProps) => (
+  <div
+    className={css(
+      styles.pageSidebarBody,
+      usePageInsets && styles.modifiers.pageInsets,
+      isFilled === false && styles.modifiers.noFill,
+      isFilled === true && styles.modifiers.fill,
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+PageSidebarBody.displayName = 'PageSidebarBody';

package/src/components/Page/PageToggleButton.tsx

@@ -6,32 +6,36 @@ import { PageContextConsumer, PageContextProps } from './PageContext';
 export interface PageToggleButtonProps extends ButtonProps {
   /** Content of the page toggle button */
   children?: React.ReactNode;
-  /** True if the side nav is shown  */
-  isNavOpen?: boolean;
-  /** Callback function to handle the side nav toggle button, managed by the Page component if the Page isManagedSidebar prop is set to true */
-  onNavToggle?: () => void;
+  /** True if the sidebar is shown  */
+  isSidebarOpen?: boolean;
+  /** Callback function to handle the sidebar toggle button, managed by the Page component if the Page isManagedSidebar prop is set to true */
+  onSidebarToggle?: () => void;
   /** Button id */
   id?: string;
 }
 
 export const PageToggleButton: React.FunctionComponent<PageToggleButtonProps> = ({
   children,
-  isNavOpen = true,
-  onNavToggle = () => undefined as any,
+  isSidebarOpen = true,
+  onSidebarToggle = () => undefined as any,
   id = 'nav-toggle',
   ...props
 }: PageToggleButtonProps) => (
   <PageContextConsumer>
-    {({ isManagedSidebar, onNavToggle: managedOnNavToggle, isNavOpen: managedIsNavOpen }: PageContextProps) => {
-      const navToggle = isManagedSidebar ? managedOnNavToggle : onNavToggle;
-      const navOpen = isManagedSidebar ? managedIsNavOpen : isNavOpen;
+    {({
+      isManagedSidebar,
+      onSidebarToggle: managedOnSidebarToggle,
+      isSidebarOpen: managedIsSidebarOpen
+    }: PageContextProps) => {
+      const sidebarToggle = isManagedSidebar ? managedOnSidebarToggle : onSidebarToggle;
+      const sidebarOpen = isManagedSidebar ? managedIsSidebarOpen : isSidebarOpen;
 
       return (
         <Button
           id={id}
-          onClick={navToggle}
+          onClick={sidebarToggle}
           aria-label="Side navigation toggle"
-          aria-expanded={navOpen ? 'true' : 'false'}
+          aria-expanded={sidebarOpen ? 'true' : 'false'}
           variant={ButtonVariant.plain}
           {...props}
         >

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

@@ -9,7 +9,9 @@ import {} from '../..';
 
 it('PageSidebar should match snapshot (auto-generated)', () => {
   const { asFragment } = render(
-    <PageSidebar className={"''"} nav={<div>ReactNode</div>} isManagedSidebar={true} isNavOpen={true} theme={'dark'} />
+    <PageSidebar className={"''"} isManagedSidebar={true} isSidebarOpen={true} theme={'dark'}>
+      <div>ReactNode</div>
+    </PageSidebar>
   );
   expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Page/__tests__/Generated/__snapshots__/PageSidebar.test.tsx.snap

@@ -7,12 +7,8 @@ exports[`PageSidebar should match snapshot (auto-generated) 1`] = `
     class="pf-c-page__sidebar pf-m-expanded ''"
     id="page-sidebar"
   >
-    <div
-      class="pf-c-page__sidebar-body"
-    >
-      <div>
-        ReactNode
-      </div>
+    <div>
+      ReactNode
     </div>
   </div>
 </DocumentFragment>

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

@@ -5,6 +5,7 @@ import { render, screen } from '@testing-library/react';
 import { Page } from '../Page';
 import { PageHeader } from '../../../deprecated/components/PageHeader';
 import { PageSidebar } from '../PageSidebar';
+import { PageSidebarBody } from '../PageSidebarBody';
 import { PageSection } from '../PageSection';
 import { Breadcrumb, BreadcrumbItem } from '../../Breadcrumb';
 import { Nav, NavList, NavItem } from '../../Nav';
@@ -22,7 +23,11 @@ const props = {
 describe('Page', () => {
   test('Check page vertical layout example against snapshot', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" onNavToggle={() => undefined} />;
-    const Sidebar = <PageSidebar nav="Navigation" isNavOpen />;
+    const Sidebar = (
+      <PageSidebar isSidebarOpen>
+        <PageSidebarBody>Navigation</PageSidebarBody>
+      </PageSidebar>
+    );
 
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
@@ -38,7 +43,11 @@ describe('Page', () => {
 
   test('Check dark page against snapshot', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" onNavToggle={() => undefined} />;
-    const Sidebar = <PageSidebar nav="Navigation" isNavOpen theme="dark" />;
+    const Sidebar = (
+      <PageSidebar isSidebarOpen theme="dark">
+        <PageSidebarBody>Navigation</PageSidebarBody>
+      </PageSidebar>
+    );
 
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
@@ -54,7 +63,7 @@ describe('Page', () => {
 
   test('Check page horizontal layout example against snapshot', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-    const Sidebar = <PageSidebar isNavOpen />;
+    const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
@@ -70,7 +79,7 @@ describe('Page', () => {
 
   test('Check page to verify breadcrumb is created', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-    const Sidebar = <PageSidebar isNavOpen />;
+    const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = () => (
       <Breadcrumb>
         <BreadcrumbItem>Section Home</BreadcrumbItem>
@@ -97,7 +106,7 @@ describe('Page', () => {
 
   test('Verify sticky top breadcrumb on all height breakpoints', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-    const Sidebar = <PageSidebar isNavOpen />;
+    const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = () => (
       <Breadcrumb>
         <BreadcrumbItem>Section Home</BreadcrumbItem>
@@ -130,7 +139,7 @@ describe('Page', () => {
 
   test('Verify sticky bottom breadcrumb on all height breakpoints', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-    const Sidebar = <PageSidebar isNavOpen />;
+    const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = () => (
       <Breadcrumb>
         <BreadcrumbItem>Section Home</BreadcrumbItem>
@@ -165,7 +174,7 @@ describe('Page', () => {
 
   test('Check page to verify breadcrumb is created - PageBreadcrumb syntax', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-    const Sidebar = <PageSidebar isNavOpen />;
+    const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
@@ -192,7 +201,7 @@ describe('Page', () => {
 
   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 Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
@@ -219,7 +228,7 @@ describe('Page', () => {
 
   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 Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
@@ -248,7 +257,7 @@ describe('Page', () => {
 
   test('Check page to verify nav is created - PageNavigation syntax', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-    const Sidebar = <PageSidebar isNavOpen />;
+    const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
@@ -278,7 +287,7 @@ describe('Page', () => {
 
   test('Check page to verify grouped nav and breadcrumb - new components syntax', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-    const Sidebar = <PageSidebar isNavOpen />;
+    const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
@@ -320,7 +329,7 @@ describe('Page', () => {
 
   test('Check page to verify grouped nav and breadcrumb - old / props syntax', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-    const Sidebar = <PageSidebar isNavOpen />;
+    const Sidebar = <PageSidebar isSidebarOpen />;
     const crumb = (
       <PageBreadcrumb>
         <Breadcrumb>
@@ -377,7 +386,7 @@ describe('Page', () => {
 
   test('Check page to verify skip to content points to main content region', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
-    const Sidebar = <PageSidebar isNavOpen />;
+    const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = (
       <Breadcrumb>
         <BreadcrumbItem>Section Home</BreadcrumbItem>