@patternfly/react-core 6.0.0-alpha.9 → 6.0.0-alpha.91

package/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuControl.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`OverflowMenuControl should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-overflow-menu__control string"
+    class="pf-v6-c-overflow-menu__control string"
   >
      any 
   </div>

package/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuDropdownItem.test.tsx.snap

@@ -3,23 +3,23 @@
 exports[`OverflowMenuDropdownItem should match snapshot 1`] = `
 <DocumentFragment>
   <li
-    class="pf-v5-c-menu__list-item"
+    class="pf-v6-c-menu__list-item"
     data-ouia-component-id="OUIA-Generated-DropdownItem-1"
-    data-ouia-component-type="PF5/DropdownItem"
+    data-ouia-component-type="PF6/DropdownItem"
     data-ouia-safe="true"
     role="none"
   >
     <button
-      class="pf-v5-c-menu__item"
+      class="pf-v6-c-menu__item"
       role="menuitem"
       tabindex="-1"
       type="button"
     >
       <span
-        class="pf-v5-c-menu__item-main"
+        class="pf-v6-c-menu__item-main"
       >
         <span
-          class="pf-v5-c-menu__item-text"
+          class="pf-v6-c-menu__item-text"
         >
           any
         </span>

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

@@ -3,7 +3,7 @@
 exports[`OverflowMenu basic 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-overflow-menu"
+    class="pf-v6-c-overflow-menu"
   >
     <div>
       BASIC
@@ -15,7 +15,7 @@ exports[`OverflowMenu basic 1`] = `
 exports[`OverflowMenu lg 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-overflow-menu"
+    class="pf-v6-c-overflow-menu"
   />
 </DocumentFragment>
 `;
@@ -23,7 +23,7 @@ exports[`OverflowMenu lg 1`] = `
 exports[`OverflowMenu xl 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-overflow-menu"
+    class="pf-v6-c-overflow-menu"
   />
 </DocumentFragment>
 `;

package/src/components/OverflowMenu/__tests__/__snapshots__/OverflowMenuControl.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`OverflowMenuControl Additional Options 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-overflow-menu__control"
+    class="pf-v6-c-overflow-menu__control"
   >
       
   </div>

package/src/components/OverflowMenu/__tests__/__snapshots__/OverflowMenuItem.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`OverflowMenuItem Below breakpoint and not isPersistent should not show 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-overflow-menu__item"
+    class="pf-v6-c-overflow-menu__item"
   >
      Some item value 
   </div>

package/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx

@@ -79,19 +79,13 @@ export const OverflowMenuGroupTypes: React.FunctionComponent = () => {
         </OverflowMenuGroup>
         <OverflowMenuGroup groupType="icon">
           <OverflowMenuItem>
-            <Button variant={ButtonVariant.plain} aria-label="Align left">
-              <AlignLeftIcon />
-            </Button>
+            <Button variant={ButtonVariant.plain} aria-label="Align left" icon={<AlignLeftIcon />} />
           </OverflowMenuItem>
           <OverflowMenuItem>
-            <Button variant={ButtonVariant.plain} aria-label="Align center">
-              <AlignCenterIcon />
-            </Button>
+            <Button variant={ButtonVariant.plain} aria-label="Align center" icon={<AlignCenterIcon />} />
           </OverflowMenuItem>
           <OverflowMenuItem>
-            <Button variant={ButtonVariant.plain} aria-label="Align right">
-              <AlignRightIcon />
-            </Button>
+            <Button variant={ButtonVariant.plain} aria-label="Align right" icon={<AlignRightIcon />} />
           </OverflowMenuItem>
         </OverflowMenuGroup>
       </OverflowMenuContent>

package/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx

@@ -68,19 +68,13 @@ export const OverflowMenuMultiGroup: React.FunctionComponent = () => {
         </OverflowMenuGroup>
         <OverflowMenuGroup groupType="icon">
           <OverflowMenuItem>
-            <Button variant={ButtonVariant.plain} aria-label="Align left">
-              <AlignLeftIcon />
-            </Button>
+            <Button variant={ButtonVariant.plain} aria-label="Align left" icon={<AlignLeftIcon />} />
           </OverflowMenuItem>
           <OverflowMenuItem>
-            <Button variant={ButtonVariant.plain} aria-label="Align center">
-              <AlignCenterIcon />
-            </Button>
+            <Button variant={ButtonVariant.plain} aria-label="Align center" icon={<AlignCenterIcon />} />
           </OverflowMenuItem>
           <OverflowMenuItem>
-            <Button variant={ButtonVariant.plain} aria-label="Align right">
-              <AlignRightIcon />
-            </Button>
+            <Button variant={ButtonVariant.plain} aria-label="Align right" icon={<AlignRightIcon />} />
           </OverflowMenuItem>
         </OverflowMenuGroup>
       </OverflowMenuContent>

package/src/components/Page/Page.tsx

@@ -4,11 +4,12 @@ import { css } from '@patternfly/react-styles';
 import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/global_breakpoint_xl';
 import { debounce, canUseDOM } from '../../helpers/util';
 import { Drawer, DrawerContent, DrawerContentBody, DrawerPanelContent } from '../Drawer';
-import { PageBreadcrumbProps } from './PageBreadcrumb';
+import { PageBreadcrumb, PageBreadcrumbProps } from './PageBreadcrumb';
 import { PageGroup, PageGroupProps } from './PageGroup';
 import { getResizeObserver } from '../../helpers/resizeObserver';
-import { formatBreakpointMods, getBreakpoint, getVerticalBreakpoint } from '../../helpers/util';
+import { getBreakpoint, getVerticalBreakpoint } from '../../helpers/util';
 import { PageContextProvider } from './PageContext';
+import { PageBody } from './PageBody';
 
 export enum PageLayouts {
   vertical = 'vertical',
@@ -19,14 +20,20 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /** Additional classes added to the page layout */
   className?: string;
-  /** Header component (e.g. <Masthead />) */
-  header?: React.ReactNode;
+  /** Masthead component (e.g. <Masthead />) */
+  masthead?: React.ReactNode;
   /** Sidebar component for a side nav (e.g. <PageSidebar />) */
   sidebar?: React.ReactNode;
   /** Notification drawer component for an optional notification drawer (e.g. <NotificationDrawer />) */
   notificationDrawer?: React.ReactNode;
   /** Flag indicating Notification drawer in expanded */
   isNotificationDrawerExpanded?: boolean;
+  /** Sets default drawer size */
+  drawerDefaultSize?: string;
+  /** Sets the minimum drawer size*/
+  drawerMinSize?: string;
+  /** Sets the maximum drawer size */
+  drawerMaxSize?: string;
   /** Flag indicating if breadcrumb width should be limited */
   isBreadcrumbWidthLimited?: boolean;
   /** Callback when notification drawer panel is finished expanding. */
@@ -44,8 +51,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
    * the sidebar component or add a callback onSidebarToggle function into the Masthead component
    */
   isManagedSidebar?: boolean;
-  /** Flag indicating if tertiary nav width should be limited */
-  isTertiaryNavWidthLimited?: boolean;
+  /** Flag indicating if horizontal sub navigation width should be limited */
+  isHorizontalSubnavWidthLimited?: boolean;
   /**
    * If true, the managed sidebar is initially open for desktop view
    */
@@ -71,12 +78,12 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   getVerticalBreakpoint?: (height: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
   /** Breadcrumb component for the page */
   breadcrumb?: React.ReactNode;
-  /** Tertiary nav component for the page */
-  tertiaryNav?: React.ReactNode;
+  /** Horizontal sub navigation component for the page */
+  horizontalSubnav?: React.ReactNode;
   /** Accessible label, can be used to name main section */
   mainAriaLabel?: string;
-  /** Flag indicating if the tertiaryNav should be in a group */
-  isTertiaryNavGrouped?: boolean;
+  /** Flag indicating if the horizontal sub navigation should be in a group */
+  isHorizontalSubnavGrouped?: boolean;
   /** Flag indicating if the breadcrumb should be in a group */
   isBreadcrumbGrouped?: boolean;
   /** Additional content of the group */
@@ -87,6 +94,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   groupProps?: PageGroupProps;
   /** Additional props of the breadcrumb */
   breadcrumbProps?: PageBreadcrumbProps;
+  /** Enables children to fill the available vertical space. Child page sections or groups that should fill should be passed the isFilled property. */
+  isContentFilled?: boolean;
 }
 
 export interface PageState {
@@ -164,7 +173,7 @@ class Page extends React.Component<PageProps, PageState> {
 
   isMobile = () =>
     // eslint-disable-next-line radix
-    this.getWindowWidth() < Number.parseInt(globalBreakpointXl.value, 10);
+    this.getWindowWidth() < Number.parseInt(globalBreakpointXl.value, 10) * 16;
 
   resize = (_event?: MouseEvent | TouchEvent | React.KeyboardEvent<Element>) => {
     const { onPageResize } = this.props;
@@ -214,12 +223,15 @@ class Page extends React.Component<PageProps, PageState> {
       isBreadcrumbWidthLimited,
       className,
       children,
-      header,
+      masthead,
       sidebar,
       notificationDrawer,
       isNotificationDrawerExpanded,
       onNotificationDrawerExpand,
-      isTertiaryNavWidthLimited,
+      drawerDefaultSize,
+      drawerMinSize,
+      drawerMaxSize,
+      isHorizontalSubnavWidthLimited,
       skipToContent,
       role,
       mainContainerId,
@@ -233,12 +245,13 @@ class Page extends React.Component<PageProps, PageState> {
       mainAriaLabel,
       mainTabIndex,
       mainComponent,
-      tertiaryNav,
-      isTertiaryNavGrouped,
+      horizontalSubnav,
+      isHorizontalSubnavGrouped,
       isBreadcrumbGrouped,
       additionalGroupedContent,
       groupProps,
       breadcrumbProps,
+      isContentFilled,
       ...rest
     } = this.props;
     const { mobileView, mobileIsSidebarOpen, desktopIsSidebarOpen, width, height } = this.state;
@@ -254,39 +267,28 @@ class Page extends React.Component<PageProps, PageState> {
     };
 
     let nav = null;
-    if (tertiaryNav && isTertiaryNavWidthLimited) {
+    if (horizontalSubnav) {
       nav = (
-        <div className={css(styles.pageMainNav, styles.modifiers.limitWidth)}>
-          <div className={css(styles.pageMainBody)}>{tertiaryNav}</div>
+        <div className={css(styles.pageMainSubnav, isHorizontalSubnavWidthLimited && styles.modifiers.limitWidth)}>
+          <PageBody>{horizontalSubnav}</PageBody>
         </div>
       );
-    } else if (tertiaryNav) {
-      nav = <div className={css(styles.pageMainNav)}>{tertiaryNav}</div>;
     }
 
     const crumb = breadcrumb ? (
-      <section
-        className={css(
-          styles.pageMainBreadcrumb,
-          isBreadcrumbWidthLimited && styles.modifiers.limitWidth,
-          formatBreakpointMods(
-            breadcrumbProps?.stickyOnBreakpoint,
-            styles,
-            'sticky-',
-            getVerticalBreakpoint(height),
-            true
-          )
-        )}
+      <PageBreadcrumb
+        stickyOnBreakpoint={breadcrumbProps?.stickyOnBreakpoint}
+        isWidthLimited={isBreadcrumbWidthLimited}
       >
-        {isBreadcrumbWidthLimited ? <div className={css(styles.pageMainBody)}>{breadcrumb}</div> : breadcrumb}
-      </section>
+        <PageBody>{breadcrumb}</PageBody>
+      </PageBreadcrumb>
     ) : null;
 
-    const isGrouped = isTertiaryNavGrouped || isBreadcrumbGrouped || additionalGroupedContent;
+    const isGrouped = isHorizontalSubnavGrouped || isBreadcrumbGrouped || additionalGroupedContent;
 
     const group = isGrouped ? (
       <PageGroup {...groupProps}>
-        {isTertiaryNavGrouped && nav}
+        {isHorizontalSubnavGrouped && nav}
         {isBreadcrumbGrouped && crumb}
         {additionalGroupedContent}
       </PageGroup>
@@ -295,22 +297,28 @@ class Page extends React.Component<PageProps, PageState> {
     const Component: keyof JSX.IntrinsicElements = mainComponent;
 
     const main = (
-      <Component
-        ref={this.mainRef}
-        role={role}
-        id={mainContainerId}
-        className={css(styles.pageMain)}
-        tabIndex={mainTabIndex}
-        aria-label={mainAriaLabel}
-      >
-        {group}
-        {!isTertiaryNavGrouped && nav}
-        {!isBreadcrumbGrouped && crumb}
-        {children}
-      </Component>
+      <div className={css(styles.pageMainContainer, isContentFilled && styles.modifiers.fill)}>
+        <Component
+          ref={this.mainRef}
+          role={role}
+          id={mainContainerId}
+          className={css(styles.pageMain)}
+          tabIndex={mainTabIndex}
+          aria-label={mainAriaLabel}
+        >
+          {group}
+          {!isHorizontalSubnavGrouped && nav}
+          {!isBreadcrumbGrouped && crumb}
+          {children}
+        </Component>
+      </div>
     );
 
-    const panelContent = <DrawerPanelContent>{notificationDrawer}</DrawerPanelContent>;
+    const panelContent = (
+      <DrawerPanelContent defaultSize={drawerDefaultSize} minSize={drawerMinSize} maxSize={drawerMaxSize}>
+        {notificationDrawer}
+      </DrawerPanelContent>
+    );
 
     return (
       <PageContextProvider value={context}>
@@ -326,7 +334,7 @@ class Page extends React.Component<PageProps, PageState> {
           )}
         >
           {skipToContent}
-          {header}
+          {masthead}
           {sidebar}
           {notificationDrawer && (
             <div className={css(styles.pageDrawer)}>

package/src/components/Page/PageBody.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Page/page';
+import { css } from '@patternfly/react-styles';
+
+export interface PageBodyProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content rendered inside the section */
+  children?: React.ReactNode;
+  /** Additional classes added to the section */
+  className?: string;
+}
+
+export const PageBody: React.FunctionComponent<PageBodyProps> = ({ className, children, ...props }: PageBodyProps) => (
+  <div {...props} className={css(styles.pageMainBody, className)}>
+    {children}
+  </div>
+);
+
+PageBody.displayName = 'PageBody';

package/src/components/Page/PageBreadcrumb.tsx

@@ -3,6 +3,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { formatBreakpointMods, Mods } from '../../helpers/util';
 import { PageContext } from './PageContext';
+import { PageBody } from './PageBody';
 
 export interface PageBreadcrumbProps extends React.HTMLProps<HTMLElement> {
   /** Additional classes to apply to the PageBreadcrumb */
@@ -26,6 +27,10 @@ export interface PageBreadcrumbProps extends React.HTMLProps<HTMLElement> {
   hasShadowBottom?: boolean;
   /** Flag indicating if the PageBreadcrumb has a scrolling overflow */
   hasOverflowScroll?: boolean;
+  /** @beta Flag indicating whether children passed to the component should be wrapped by a PageBody.
+   * Set this to false in order to pass multiple, custom PageBody's as children.
+   */
+  hasBodyWrapper?: boolean;
   /** Adds an accessible name to the breadcrumb section. Required when the hasOverflowScroll prop is set to true. */
   'aria-label'?: string;
 }
@@ -39,6 +44,7 @@ export const PageBreadcrumb = ({
   hasShadowBottom = false,
   hasOverflowScroll = false,
   'aria-label': ariaLabel,
+  hasBodyWrapper = true,
   ...props
 }: PageBreadcrumbProps) => {
   const { height, getVerticalBreakpoint } = React.useContext(PageContext);
@@ -65,8 +71,7 @@ export const PageBreadcrumb = ({
       aria-label={ariaLabel}
       {...props}
     >
-      {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}
-      {!isWidthLimited && children}
+      {hasBodyWrapper ? <PageBody>{children}</PageBody> : children}
     </section>
   );
 };

package/src/components/Page/PageGroup.tsx

@@ -17,6 +17,8 @@ export interface PageGroupProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'top' | 'bottom';
     '2xl'?: 'top' | 'bottom';
   };
+  /** Enables the page group to fill the available vertical space if true, or disable filling if false. */
+  isFilled?: boolean;
   /** Modifier indicating if PageGroup should have a shadow at the top */
   hasShadowTop?: boolean;
   /** Modifier indicating if PageGroup should have a shadow at the bottom */
@@ -31,6 +33,7 @@ export const PageGroup = ({
   className = '',
   children,
   stickyOnBreakpoint,
+  isFilled,
   hasShadowTop = false,
   hasShadowBottom = false,
   hasOverflowScroll = false,
@@ -52,6 +55,8 @@ export const PageGroup = ({
       className={css(
         styles.pageMainGroup,
         formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
+        isFilled === false && styles.modifiers.noFill,
+        isFilled === true && styles.modifiers.fill,
         hasShadowTop && styles.modifiers.shadowTop,
         hasShadowBottom && styles.modifiers.shadowBottom,
         hasOverflowScroll && styles.modifiers.overflowScroll,

package/src/components/Page/PageSection.tsx

@@ -3,6 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
 import { formatBreakpointMods } from '../../helpers/util';
 import { PageContext } from './PageContext';
+import { PageBody } from './PageBody';
 
 export enum PageSectionVariants {
   default = 'default',
@@ -11,7 +12,6 @@ export enum PageSectionVariants {
 
 export enum PageSectionTypes {
   default = 'default',
-  nav = 'nav',
   subNav = 'subnav',
   breadcrumb = 'breadcrumb',
   tabs = 'tabs',
@@ -26,8 +26,8 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
   /** Section background color variant. This will only apply when the type prop has the "default" value. */
   variant?: 'default' | 'secondary';
   /** Section type variant */
-  type?: 'default' | 'nav' | 'subnav' | 'breadcrumb' | 'tabs' | 'wizard';
-  /** Enables the page section to fill the available vertical space */
+  type?: 'default' | 'subnav' | 'breadcrumb' | 'tabs' | 'wizard';
+  /** Enables the page section to fill the available vertical space if true, or disable filling if false. */
   isFilled?: boolean;
   /** Limits the width of the section */
   isWidthLimited?: boolean;
@@ -57,6 +57,10 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
   hasShadowBottom?: boolean;
   /** Flag indicating if the PageSection has a scrolling overflow */
   hasOverflowScroll?: boolean;
+  /** @beta Flag indicating whether children passed to the component should be wrapped by a PageBody.
+   * Set this to false in order to pass multiple, custom PageBody's as children.
+   */
+  hasBodyWrapper?: boolean;
   /** Adds an accessible name to the page section. Required when the hasOverflowScroll prop is set to true.
    * This prop should also be passed in if a heading is not being used to describe the content of the page section.
    */
@@ -67,7 +71,6 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
 
 const variantType = {
   [PageSectionTypes.default]: styles.pageMainSection,
-  [PageSectionTypes.nav]: styles.pageMainNav,
   [PageSectionTypes.subNav]: styles.pageMainSubnav,
   [PageSectionTypes.breadcrumb]: styles.pageMainBreadcrumb,
   [PageSectionTypes.tabs]: styles.pageMainTabs,
@@ -94,6 +97,7 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
   hasOverflowScroll = false,
   'aria-label': ariaLabel,
   component = 'section',
+  hasBodyWrapper = true,
   ...props
 }: PageSectionProps) => {
   const { height, getVerticalBreakpoint } = React.useContext(PageContext);
@@ -127,8 +131,7 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
       {...(hasOverflowScroll && { tabIndex: 0 })}
       aria-label={ariaLabel}
     >
-      {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}
-      {!isWidthLimited && children}
+      {hasBodyWrapper ? <PageBody>{children}</PageBody> : children}
     </Component>
   );
 };

package/src/components/Page/PageSidebar.tsx

@@ -10,7 +10,7 @@ export interface PageSidebarProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /**
    * 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
+   * the sidebar component or add a callback onSidebarToggle function into the Masthead component
    */
   isManagedSidebar?: boolean;
   /** Programmatically manage if the sidebar is shown, if isManagedSidebar is set to true in the Page component, this prop is managed */

package/src/components/Page/PageSidebarBody.tsx

@@ -11,6 +11,8 @@ export interface PageSidebarBodyProps extends React.HTMLProps<HTMLDivElement> {
   usePageInsets?: boolean;
   /** Flag indicating that the page sidebar body should fill the available vertical space. */
   isFilled?: boolean;
+  /** Flag indicating that the page sidebar body is for a context selector/perspective switcher */
+  isContextSelector?: boolean;
 }
 
 export const PageSidebarBody: React.FunctionComponent<PageSidebarBodyProps> = ({
@@ -18,6 +20,7 @@ export const PageSidebarBody: React.FunctionComponent<PageSidebarBodyProps> = ({
   className,
   usePageInsets,
   isFilled,
+  isContextSelector,
   ...props
 }: PageSidebarBodyProps) => (
   <div
@@ -26,6 +29,7 @@ export const PageSidebarBody: React.FunctionComponent<PageSidebarBodyProps> = ({
       usePageInsets && styles.modifiers.pageInsets,
       isFilled === false && styles.modifiers.noFill,
       isFilled === true && styles.modifiers.fill,
+      isContextSelector === true && styles.modifiers.contextSelector,
       className
     )}
     {...props}

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

@@ -4,7 +4,7 @@ exports[`PageSidebar should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="false"
-    class="pf-v5-c-page__sidebar pf-m-expanded ''"
+    class="pf-v6-c-page__sidebar pf-m-expanded ''"
     id="page-sidebar"
   >
     <div>