@patternfly/react-core 5.4.0-prerelease.2 → 5.4.0-prerelease.21

package/src/components/Modal/Modal.tsx

@@ -6,7 +6,7 @@ import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
 import { ModalContent } from './ModalContent';
 import { OUIAProps, getDefaultOUIAId } from '../../helpers';
 
-export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
+export interface ModalProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'>, OUIAProps {
   /** Action buttons to add to the standard modal footer. Ignored if the footer property
    * is passed in.
    */
@@ -64,8 +64,8 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   positionOffset?: string;
   /** Flag to show the close button in the header area of the modal. */
   showClose?: boolean;
-  /** Simple text content of the modal header. Also used for the aria-label on the body. */
-  title?: string;
+  /** Text content of the modal header. */
+  title?: React.ReactNode;
   /** Optional alert icon (or other) to show before the title of the modal header. When the
    * predefined alert types are used the default styling will be automatically applied.
    */
@@ -186,7 +186,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
       target.classList.remove(css(styles.backdropOpen));
     }
 
-    if (this.isEmpty(title) && this.isEmpty(ariaLabel) && this.isEmpty(ariaLabelledby)) {
+    if (!title && this.isEmpty(ariaLabel) && this.isEmpty(ariaLabelledby)) {
       // eslint-disable-next-line no-console
       console.error('Modal: Specify at least one of: title, aria-label, aria-labelledby.');
     }

package/src/components/Modal/ModalContent.tsx

@@ -71,8 +71,8 @@ export interface ModalContentProps extends OUIAProps {
   positionOffset?: string;
   /** Flag to show the close button in the header area of the modal. */
   showClose?: boolean;
-  /** Simple text content of the modal header. Also used for the aria-label on the body. */
-  title?: string;
+  /** Text content of the modal header. */
+  title?: React.ReactNode;
   /** Optional alert icon (or other) to show before the title of the modal header. When the
    * predefined alert types are used the default styling will be automatically applied.
    */

package/src/components/Nav/__tests__/Generated/NavList.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { render } from '@testing-library/react';
-import * as ReactCoreUtils from '@patternfly/react-core/src/helpers/util';
+import * as ReactCoreUtils from '../../../../helpers/util';
 
 import { NavList } from '../../NavList';
 import { NavContext } from '../../Nav';

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

@@ -1096,7 +1096,7 @@ exports[`Nav Nav List with flyout 1`] = `
       data-popper-escaped="true"
       data-popper-placement="right-start"
       data-popper-reference-hidden="true"
-      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
+      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
     >
       <div>
         Flyout test

package/src/components/NotificationDrawer/NotificationDrawerGroup.tsx

@@ -22,7 +22,7 @@ export interface NotificationDrawerGroupProps extends Omit<React.HTMLProps<HTMLD
   /**  Callback for when group button is clicked to expand */
   onExpand?: (event: any, value: boolean) => void;
   /**  Notification drawer group title */
-  title: string | React.ReactNode;
+  title: React.ReactNode;
   /** Truncate title to number of lines */
   truncateTitle?: number;
   /** Position of the tooltip which is displayed if text is truncated */

package/src/components/Page/Page.tsx

@@ -27,6 +27,12 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   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. */
@@ -219,6 +225,9 @@ class Page extends React.Component<PageProps, PageState> {
       notificationDrawer,
       isNotificationDrawerExpanded,
       onNotificationDrawerExpand,
+      drawerDefaultSize,
+      drawerMinSize,
+      drawerMaxSize,
       isTertiaryNavWidthLimited,
       skipToContent,
       role,
@@ -310,7 +319,11 @@ class Page extends React.Component<PageProps, PageState> {
       </Component>
     );
 
-    const panelContent = <DrawerPanelContent>{notificationDrawer}</DrawerPanelContent>;
+    const panelContent = (
+      <DrawerPanelContent defaultSize={drawerDefaultSize} minSize={drawerMinSize} maxSize={drawerMaxSize}>
+        {notificationDrawer}
+      </DrawerPanelContent>
+    );
 
     return (
       <PageContextProvider value={context}>

package/src/components/Page/examples/Page.md

@@ -106,6 +106,14 @@ To remove padding at specific breakpoints, pass in 'noPadding' at those breakpoi
 
 ```
 
+### Main section variations
+
+This example shows all types of page sections.
+
+```ts file="./PageMainSectionVariations.tsx"
+
+```
+
 ### Group section
 
 To group page content sections, add 1 or more `<PageGroup>` components to a `<Page>`.

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import {
+  Page,
+  Masthead,
+  MastheadToggle,
+  MastheadMain,
+  MastheadBrand,
+  MastheadContent,
+  PageSidebar,
+  PageSidebarBody,
+  PageSection,
+  PageToggleButton,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem
+} from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+
+export const PageMainSectionPadding: React.FunctionComponent = () => {
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+
+  const onSidebarToggle = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
+
+  const headerToolbar = (
+    <Toolbar id="main-variations-toolbar">
+      <ToolbarContent>
+        <ToolbarItem>header-tools</ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  const header = (
+    <Masthead>
+      <MastheadToggle>
+        <PageToggleButton
+          variant="plain"
+          aria-label="Global navigation"
+          isSidebarOpen={isSidebarOpen}
+          onSidebarToggle={onSidebarToggle}
+          id="main-variations-nav-toggle"
+        >
+          <BarsIcon />
+        </PageToggleButton>
+      </MastheadToggle>
+      <MastheadMain>
+        <MastheadBrand href="https://patternfly.org" target="_blank">
+          Logo
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>{headerToolbar}</MastheadContent>
+    </Masthead>
+  );
+
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isSidebarOpen} id="main-variations-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  return (
+    <Page header={header} sidebar={sidebar}>
+      <PageSection type="subnav">
+        Section with <code>type="subnav"</code> for horizontal subnav navigation
+      </PageSection>
+      <PageSection type="nav">
+        Section with <code>type="nav"</code> for tertiary navigation
+      </PageSection>
+      <PageSection type="tabs">
+        Section with <code>type="tabs"</code> for tabs
+      </PageSection>
+      <PageSection type="breadcrumb">
+        Section with <code>type="breadcrumb"</code> for breadcrumbs
+      </PageSection>
+      <PageSection>
+        Section without <code>type</code> prop or <code>type="default"</code> for main sections
+      </PageSection>
+      <PageSection type="wizard">
+        Section with <code>type="wizard"</code> for wizards
+      </PageSection>
+    </Page>
+  );
+};

package/src/components/Page/examples/page.css

@@ -1,3 +1,4 @@
-.pf-v5-c-page__sidebar-body {
+.pf-v5-c-page__sidebar-body,
+.pf-v5-c-page__main-subnav {
   color: var(--pf-v5-global--Color--light-100);
 }

package/src/components/Pagination/Pagination.tsx

@@ -232,6 +232,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
   ...props
 }: PaginationProps) => {
   const paginationRef = React.useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const getLastPage = () =>
     // when itemCount is not known let's set lastPage as page+1 as we don't know the total count
@@ -335,6 +336,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
           widgetId={`${widgetId}-${variant}`}
           toggleTemplate={toggleTemplate}
           isDisabled={isDisabled}
+          containerRef={containerRef}
         />
       )}
       <Navigation

package/src/components/Pagination/PaginationOptionsMenu.tsx

@@ -52,6 +52,7 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivEleme
   onPerPageSelect?: OnPerPageSelect;
   /** Label for the English word "of". */
   ofWord?: string;
+  containerRef?: React.RefObject<HTMLDivElement>;
 }
 
 export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMenuProps> = ({
@@ -72,14 +73,14 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   firstIndex = 0,
   lastIndex = 0,
   isLastFullPageShown = false,
-  itemsTitle = 'items',
+  itemsTitle = '',
   toggleTemplate,
-  onPerPageSelect = () => null as any
+  onPerPageSelect = () => null as any,
+  containerRef
 }: PaginationOptionsMenuProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
   const menuRef = React.useRef<HTMLDivElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const onToggle = () => {
     setIsOpen((prevState) => !prevState);
@@ -208,18 +209,16 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   );
 
   return (
-    <div ref={containerRef}>
-      <Popper
-        trigger={toggle}
-        triggerRef={toggleRef}
-        popper={menu}
-        popperRef={menuRef}
-        isVisible={isOpen}
-        direction={dropDirection}
-        appendTo={containerRef.current || undefined}
-        minWidth={minWidth !== undefined ? minWidth : 'revert'}
-      />
-    </div>
+    <Popper
+      trigger={toggle}
+      triggerRef={toggleRef}
+      popper={menu}
+      popperRef={menuRef}
+      isVisible={isOpen}
+      direction={dropDirection}
+      appendTo={containerRef?.current || undefined}
+      minWidth={minWidth !== undefined ? minWidth : 'revert'}
+    />
   );
 };
 

package/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap

@@ -2,48 +2,49 @@
 
 exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
-  <div>
-    <button
-      aria-expanded="false"
-      aria-haspopup="listbox"
-      class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
-      id="''-toggle"
-      type="button"
+  <button
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-1"
+    data-ouia-component-type="PF5/MenuToggle"
+    data-ouia-safe="true"
+    id="''-toggle"
+    type="button"
+  >
+    <span
+      class="pf-v5-c-menu-toggle__text"
+    >
+      <b>
+        0 - 0
+      </b>
+      Custom toggle template of
+      <b>
+        0
+      </b>
+       'items'
+    </span>
+    <span
+      class="pf-v5-c-menu-toggle__controls"
     >
       <span
-        class="pf-v5-c-menu-toggle__text"
-      >
-        <b>
-          0 - 0
-        </b>
-        Custom toggle template of
-        <b>
-          0
-        </b>
-         'items'
-      </span>
-      <span
-        class="pf-v5-c-menu-toggle__controls"
+        class="pf-v5-c-menu-toggle__toggle-icon"
       >
-        <span
-          class="pf-v5-c-menu-toggle__toggle-icon"
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          viewBox="0 0 320 512"
+          width="1em"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 320 512"
-            width="1em"
-          >
-            <path
-              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
       </span>
-    </button>
-  </div>
+    </span>
+  </button>
 </DocumentFragment>
 `;