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

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

@@ -7,6 +7,7 @@ import {
   MastheadBrand,
   MastheadContent,
   PageSidebar,
+  PageSidebarBody,
   PageSection,
   PageToggleButton,
   Toolbar,
@@ -16,10 +17,10 @@ import {
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageWithOrWithoutFill: React.FunctionComponent = () => {
-  const [isNavOpen, setIsNavOpen] = React.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
 
-  const onNavToggle = () => {
-    setIsNavOpen(!isNavOpen);
+  const onSidebarToggle = () => {
+    setIsSidebarOpen(!isSidebarOpen);
   };
 
   const headerToolbar = (
@@ -36,8 +37,8 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
         <PageToggleButton
           variant="plain"
           aria-label="Global navigation"
-          isNavOpen={isNavOpen}
-          onNavToggle={onNavToggle}
+          isSidebarOpen={isSidebarOpen}
+          onSidebarToggle={onSidebarToggle}
           id="fill-nav-toggle"
         >
           <BarsIcon />
@@ -52,7 +53,11 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
     </Masthead>
   );
 
-  const sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="fill-sidebar" />;
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isSidebarOpen} id="fill-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
 
   return (
     <Page header={header} sidebar={sidebar}>

package/src/components/Page/index.ts

@@ -2,6 +2,7 @@ export * from './Page';
 export * from './PageBreadcrumb';
 export * from './PageGroup';
 export * from './PageSidebar';
+export * from './PageSidebarBody';
 export * from './PageSection';
 export * from './PageNavigation';
 export * from './PageToggleButton';

package/src/demos/Nav.md

@@ -2,16 +2,17 @@
 id: Navigation
 section: components
 ---
+
 import {
-  Dropdown as DropdownDeprecated,
-  DropdownGroup as DropdownGroupDeprecated,
-  DropdownToggle,
-  DropdownItem as DropdownItemDeprecated,
-  KebabToggle,
-  PageHeader,
-  PageHeaderTools,
-  PageHeaderToolsGroup,
-  PageHeaderToolsItem
+Dropdown as DropdownDeprecated,
+DropdownGroup as DropdownGroupDeprecated,
+DropdownToggle,
+DropdownItem as DropdownItemDeprecated,
+KebabToggle,
+PageHeader,
+PageHeaderTools,
+PageHeaderToolsGroup,
+PageHeaderToolsItem
 } from '@patternfly/react-core/deprecated';
 
 import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
@@ -41,6 +42,7 @@ import {
   PageSection,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   SkipToContent,
   TextContent,
   Text
@@ -87,7 +89,11 @@ class PageLayoutDefaultNav extends React.Component {
       </Nav>
     );
 
-    const Sidebar = <PageSidebar nav={PageNav} />;
+    const Sidebar = (
+      <PageSidebar>
+        <PageSidebarBody>{PageNav}</PageSidebarBody>
+      </PageSidebar>
+    );
     const pageId = 'main-content-page-layout-default-nav';
     const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
 
@@ -140,6 +146,7 @@ import {
   PageSection,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   SkipToContent,
   TextContent,
   Text
@@ -199,7 +206,11 @@ class PageLayoutGroupsNav extends React.Component {
       </Nav>
     );
 
-    const Sidebar = <PageSidebar nav={PageNav} />;
+    const Sidebar = (
+      <PageSidebar>
+        <PageSidebarBody>{PageNav}</PageSidebarBody>
+      </PageSidebar>
+    );
     const pageId = 'main-content-page-layout-group-nav';
     const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;
 
@@ -249,6 +260,7 @@ import {
   PageSection,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   SkipToContent,
   TextContent,
   Text
@@ -318,7 +330,11 @@ class PageLayoutExpandableNav extends React.Component {
       </Nav>
     );
 
-    const Sidebar = <PageSidebar nav={PageNav} />;
+    const Sidebar = (
+      <PageSidebar>
+        <PageSidebarBody>{PageNav}</PageSidebarBody>
+      </PageSidebar>
+    );
     const pageId = 'main-content-page-layout-expandable-nav';
     const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
 
@@ -591,6 +607,7 @@ import {
   PageSection,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   SkipToContent,
   TextContent,
   Text
@@ -644,7 +661,11 @@ class VerticalNavWithSubnav extends React.Component {
       </Nav>
     );
 
-    const Sidebar = <PageSidebar nav={PageNav} />;
+    const Sidebar = (
+      <PageSidebar>
+        <PageSidebarBody>{PageNav}</PageSidebarBody>
+      </PageSidebar>
+    );
     const pageId = 'main-content-page-layout-default-nav';
     const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
 
@@ -995,7 +1016,6 @@ import {
   Page,
   PageSection,
   PageSectionVariants,
-  PageSidebar,
   SkipToContent,
   TextContent,
   Text
@@ -1099,6 +1119,7 @@ import {
   PageSection,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   SkipToContent,
   TextContent,
   Text
@@ -1144,7 +1165,11 @@ class PageLayoutLightNav extends React.Component {
       </Nav>
     );
 
-    const Sidebar = <PageSidebar nav={PageNav} theme="light" />;
+    const Sidebar = (
+      <PageSidebar theme="light">
+        <PageSidebarBody>{PageNav}</PageSidebarBody>
+      </PageSidebar>
+    );
     const pageId = 'main-content-page-layout-simple-nav';
     const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;
 
@@ -1204,6 +1229,7 @@ import {
   PageSection,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   SkipToContent,
   TextContent,
   Text
@@ -1389,7 +1415,11 @@ class PageLayoutManualNav extends React.Component {
         isNavOpen={isMobileView ? isNavOpenMobile : isNavOpenDesktop}
       />
     );
-    const Sidebar = <PageSidebar nav={PageNav} isNavOpen={isMobileView ? isNavOpenMobile : isNavOpenDesktop} />;
+    const Sidebar = (
+      <PageSidebar isSidebarOpen={isMobileView ? isNavOpenMobile : isNavOpenDesktop}>
+        <PageSidebarBody>{PageNav}</PageSidebarBody>
+      </PageSidebar>
+    );
     const pageId = 'main-content-page-layout-manual-nav';
     const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;
 
@@ -1439,6 +1469,7 @@ import {
   NavList,
   NavItem,
   PageSidebar,
+  PageSidebarBody,
   PageSection,
   PageSectionVariants,
   Menu,
@@ -1446,10 +1477,7 @@ import {
   MenuList,
   MenuItem
 } from '@patternfly/react-core';
-import {
-  PageHeader,
-  PageHeaderTools,
-}from '@patternfly/react-core';
+import { PageHeader, PageHeaderTools } from '@patternfly/react-core';
 import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
 
 class VerticalPage extends React.Component {
@@ -1500,8 +1528,8 @@ class VerticalPage extends React.Component {
     const { activeItem } = this.state;
 
     const Sidebar = (
-      <PageSidebar style={{"overflow": "visible"}}
-        nav={
+      <PageSidebar style={{ overflow: 'visible' }}>
+        <PageSidebarBody>
           <Nav onSelect={this.onNavSelect}>
             <NavList>
               <NavItem preventDefault id="flyout-link1" to="#flyout-link1" itemId={0} isActive={activeItem === 0}>
@@ -1515,8 +1543,8 @@ class VerticalPage extends React.Component {
               </NavItem>
             </NavList>
           </Nav>
-        }
-      />
+        </PageSidebarBody>
+      </PageSidebar>
     );
 
     return (

package/src/demos/NotificationDrawer/NotificationDrawer.md

@@ -62,6 +62,7 @@ import {
   PageSection,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   SkipToContent,
   TextContent,
   Text,
@@ -335,7 +336,11 @@ class BasicNotificationDrawer extends React.Component {
         <MastheadContent>{headerToolbar}</MastheadContent>
       </Masthead>
     );
-    const Sidebar = <PageSidebar nav={PageNav} />;
+    const Sidebar = (
+      <PageSidebar>
+        <PageSidebarBody>{PageNav}</PageSidebarBody>
+      </PageSidebar>
+    );
     const pageId = 'main-content-page-layout-default-nav';
     const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
 
@@ -606,6 +611,7 @@ import {
   PageSection,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   SkipToContent,
   Title,
   TextContent,
@@ -932,7 +938,11 @@ class GroupedNotificationDrawer extends React.Component {
         <MastheadContent>{headerToolbar}</MastheadContent>
       </Masthead>
     );
-    const Sidebar = <PageSidebar nav={PageNav} />;
+    const Sidebar = (
+      <PageSidebar>
+        <PageSidebarBody>{PageNav}</PageSidebarBody>
+      </PageSidebar>
+    );
     const pageId = 'main-content-page-layout-default-nav';
     const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
 

package/src/demos/Wizard/WizardDemo.md

@@ -418,6 +418,7 @@ import {
   PageSectionTypes,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   SkipToContent,
   Text,
   TextContent,
@@ -500,7 +501,11 @@ class WizardFullPageWithDrawerDemo extends React.Component {
         </MastheadMain>
       </Masthead>
     );
-    const Sidebar = <PageSidebar nav={PageNav} />;
+    const Sidebar = (
+      <PageSidebar>
+        <PageSidebarBody>{PageNav}</PageSidebarBody>
+      </PageSidebar>
+    );
     const pageId = 'main-content-page-layout-default-nav';
     const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
     const PageBreadcrumb = (
@@ -611,6 +616,7 @@ import {
   PageSectionTypes,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   SkipToContent,
   Text,
   TextContent,
@@ -693,7 +699,11 @@ class WizardFullPageWithDrawerInfoStepDemo extends React.Component {
         </MastheadMain>
       </Masthead>
     );
-    const Sidebar = <PageSidebar nav={PageNav} />;
+    const Sidebar = (
+      <PageSidebar>
+        <PageSidebarBody>{PageNav}</PageSidebarBody>
+      </PageSidebar>
+    );
     const pageId = 'main-content-page-layout-default-nav';
     const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
     const PageBreadcrumb = (

package/src/demos/examples/DashboardWrapper.js

@@ -8,6 +8,7 @@ import {
   Page,
   PageSection,
   PageSidebar,
+  PageSidebarBody,
   SkipToContent,
   Text,
   TextContent
@@ -41,7 +42,7 @@ export default class DashboardWrapper extends React.Component {
       activeItem: 1
     };
 
-    this.onNavSelect = result => {
+    this.onNavSelect = (result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -92,7 +93,11 @@ export default class DashboardWrapper extends React.Component {
       </Nav>
     );
 
-    const _sidebar = <PageSidebar nav={PageNav} isNavOpen={sidebarNavOpen || false} />;
+    const _sidebar = (
+      <PageSidebar isSidebarOpen={sidebarNavOpen || false}>
+        <PageSidebarBody>{PageNav}</PageSidebarBody>
+      </PageSidebar>
+    );
     const PageSkipToContent = (
       <SkipToContent href={`#${mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'}`}>
         Skip to content

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -28,6 +28,7 @@ import {
   PageSection,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   PageToggleButton,
   Popper,
   SkipToContent,
@@ -149,7 +150,6 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     };
   }, [isOpen, menuRef]);
 
-
   const toggle = (
     <MenuToggle
       aria-label="Toggle"
@@ -396,7 +396,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
       <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
     </DropdownGroupDeprecated>
   ];
-  
+
   const headerToolbar = (
     <Toolbar id="toolbar" isFullHeight isStatic>
       <ToolbarContent>
@@ -410,7 +410,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
           </ToolbarItem>
           <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem visibility={{ default: 'hidden', md: 'hidden', lg: 'visible' }}>
-            <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />
+              <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />
             </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
@@ -502,7 +502,11 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     </Nav>
   );
 
-  const sidebar = <PageSidebar nav={pageNav} />;
+  const sidebar = (
+    <PageSidebar>
+      <PageSidebarBody>{pageNav}</PageSidebarBody>
+    </PageSidebar>
+  );
 
   const mainContainerId = 'main-content-page-layout-tertiary-nav';
 

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

@@ -3,6 +3,7 @@ import React from 'react';
 import {
   Page,
   PageSidebar,
+  PageSidebarBody,
   Nav,
   MenuContent,
   MenuItem,
@@ -76,26 +77,26 @@ export const NavDrilldown: React.FunctionComponent = () => {
     toItemId: string,
     itemId: string
   ) => {
-    setMenuDrilledIn(prevMenuDrilledIn => [...prevMenuDrilledIn, fromItemId]);
-    setDrilldownPath(prevDrilldownPath => [...prevDrilldownPath, itemId]);
+    setMenuDrilledIn((prevMenuDrilledIn) => [...prevMenuDrilledIn, fromItemId]);
+    setDrilldownPath((prevDrilldownPath) => [...prevDrilldownPath, itemId]);
     setActiveMenuId(toItemId);
   };
 
   const onDrillOut = (_event: React.KeyboardEvent | React.MouseEvent, toItemId: string, _itemId: string) => {
-    setMenuDrilledIn(prevMenuDrilledIn => prevMenuDrilledIn.slice(0, prevMenuDrilledIn.length - 1));
-    setDrilldownPath(prevDrilldownPath => prevDrilldownPath.slice(0, prevDrilldownPath.length - 1));
+    setMenuDrilledIn((prevMenuDrilledIn) => prevMenuDrilledIn.slice(0, prevMenuDrilledIn.length - 1));
+    setDrilldownPath((prevDrilldownPath) => prevDrilldownPath.slice(0, prevDrilldownPath.length - 1));
     setActiveMenuId(toItemId);
   };
 
   const onGetMenuHeight = (menuId: string, height: number) => {
     if (!menuHeights[menuId] && menuId !== 'rootMenu') {
-      setMenuHeights(prevMenuHeights => ({ ...prevMenuHeights, [menuId]: height }));
+      setMenuHeights((prevMenuHeights) => ({ ...prevMenuHeights, [menuId]: height }));
     }
   };
 
   const sidebar = (
-    <PageSidebar
-      nav={
+    <PageSidebar>
+      <PageSidebarBody>
         <Nav>
           <Menu
             id="rootMenu"
@@ -122,8 +123,8 @@ export const NavDrilldown: React.FunctionComponent = () => {
             </MenuContent>
           </Menu>
         </Nav>
-      }
-    />
+      </PageSidebarBody>
+    </PageSidebar>
   );
 
   return (

package/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx

@@ -23,6 +23,7 @@ import {
   PageSection,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   PageToggleButton,
   SkipToContent,
   Text,
@@ -30,7 +31,7 @@ import {
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
-  ToolbarItem,
+  ToolbarItem
 } from '@patternfly/react-core';
 import {
   Dropdown as DropdownDeprecated,
@@ -236,7 +237,11 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
     </Nav>
   );
 
-  const sidebar = <PageSidebar nav={pageNav} />;
+  const sidebar = (
+    <PageSidebar>
+      <PageSidebarBody>{pageNav}</PageSidebarBody>
+    </PageSidebar>
+  );
 
   const mainContainerId = 'main-content';
 

package/src/demos/examples/Page/PageStickySectionGroup.tsx

@@ -23,6 +23,7 @@ import {
   PageSection,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   PageToggleButton,
   SkipToContent,
   Text,
@@ -236,7 +237,11 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
     </Nav>
   );
 
-  const sidebar = <PageSidebar nav={pageNav} />;
+  const sidebar = (
+    <PageSidebar>
+      <PageSidebarBody>{pageNav}</PageSidebarBody>
+    </PageSidebar>
+  );
 
   const mainContainerId = 'main-content';
 

package/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx

@@ -25,6 +25,7 @@ import {
   PageSection,
   PageSectionVariants,
   PageSidebar,
+  PageSidebarBody,
   PageToggleButton,
   SkipToContent,
   Text,
@@ -227,7 +228,11 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
     </Nav>
   );
 
-  const sidebar = <PageSidebar nav={pageNav} />;
+  const sidebar = (
+    <PageSidebar>
+      <PageSidebarBody>{pageNav}</PageSidebarBody>
+    </PageSidebar>
+  );
 
   const mainContainerId = 'main-content';
 

package/src/deprecated/components/PageHeader/PageHeader.tsx

@@ -59,9 +59,13 @@ export const PageHeader: React.FunctionComponent<PageHeaderProps> = ({
   }
   return (
     <PageContextConsumer>
-      {({ isManagedSidebar, onNavToggle: managedOnNavToggle, isNavOpen: managedIsNavOpen }: PageContextProps) => {
-        const navToggle = isManagedSidebar ? managedOnNavToggle : onNavToggle;
-        const navOpen = isManagedSidebar ? managedIsNavOpen : isNavOpen;
+      {({
+        isManagedSidebar,
+        onSidebarToggle: managedOnSidebarToggle,
+        isSidebarOpen: managedIsSidebarOpen
+      }: PageContextProps) => {
+        const navToggle = isManagedSidebar ? managedOnSidebarToggle : onNavToggle;
+        const navOpen = isManagedSidebar ? managedIsSidebarOpen : isNavOpen;
 
         return (
           <header role={role} className={css(styles.pageHeader, className)} {...props}>

package/src/deprecated/components/PageHeader/examples/PageHeader.md

@@ -2,9 +2,11 @@
 id: Page
 section: components
 cssPrefix: pf-c-page
-propComponents: ['PageHeader','PageHeaderTools','PageHeaderToolsGroup','PageHeaderToolsItem']
+propComponents: ['PageHeader', 'PageHeaderTools', 'PageHeaderToolsGroup', 'PageHeaderToolsItem']
 ---
 
+import { PageHeader as PageHeaderDeprecated, PageHeaderTools } from '@patternfly/react-core/deprecated';
+
 ## Page header examples
 
 ### Vertical navigation
@@ -12,4 +14,5 @@ propComponents: ['PageHeader','PageHeaderTools','PageHeaderToolsGroup','PageHead
 This example shows the deprecated implementation of a page's vertical navigation. Our updated recommendation advises you to use a masthead and toolbar to make headers, rather than `<PageHeader>` and `<PageHeaderTools>` as shown in the following example.
 
 ```ts file="./PageVerticalNavUsingPageHeaderComponent.tsx"
+
 ```

package/src/deprecated/components/PageHeader/examples/PageVerticalNavUsingPageHeaderComponent.tsx

@@ -1,14 +1,6 @@
 import React from 'react';
-import {
-  Page,
-  PageSidebar,
-  PageSection,
-  PageSectionVariants
-} from '@patternfly/react-core';
-import {
-  PageHeader,
-  PageHeaderTools
-} from '@patternfly/react-core/deprecated';
+import { Page, PageSidebar, PageSidebarBody, PageSection, PageSectionVariants } from '@patternfly/react-core';
+import { PageHeader as PageHeaderDeprecated, PageHeaderTools } from '@patternfly/react-core/deprecated';
 
 export const PageVerticalNavUsingPageHeaderComponent: React.FunctionComponent = () => {
   const [isNavOpen, setIsNavOpen] = React.useState(true);
@@ -23,7 +15,7 @@ export const PageVerticalNavUsingPageHeaderComponent: React.FunctionComponent =
   };
 
   const header = (
-    <PageHeader
+    <PageHeaderDeprecated
       logo="Logo"
       logoProps={logoProps}
       headerTools={<PageHeaderTools>header-tools</PageHeaderTools>}
@@ -34,7 +26,11 @@ export const PageVerticalNavUsingPageHeaderComponent: React.FunctionComponent =
     />
   );
 
-  const sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="vertical-pageheader-sidebar" />;
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isNavOpen} id="vertical-pageheader-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
 
   return (
     <Page header={header} sidebar={sidebar}>