@patternfly/react-core 5.4.0-prerelease.9 → 5.4.0

package/src/components/DualListSelector/DualListSelectorList.tsx

@@ -9,10 +9,13 @@ import { DualListSelectorListContext } from './DualListSelectorContext';
 export interface DualListSelectorListProps extends React.HTMLProps<HTMLUListElement> {
   /** Content rendered inside the dual list selector list */
   children?: React.ReactNode;
+  /** @hide forwarded ref */
+  innerRef?: React.RefObject<HTMLUListElement>;
 }
 
-export const DualListSelectorList: React.FunctionComponent<DualListSelectorListProps> = ({
+export const DualListSelectorListBase: React.FunctionComponent<DualListSelectorListProps> = ({
   children,
+  innerRef,
   ...props
 }: DualListSelectorListProps) => {
   const {
@@ -47,6 +50,7 @@ export const DualListSelectorList: React.FunctionComponent<DualListSelectorListP
         'aria-activedescendant': focusedOption
       })}
       aria-disabled={isDisabled ? 'true' : undefined}
+      ref={innerRef}
       {...props}
     >
       {options.length === 0
@@ -71,4 +75,12 @@ export const DualListSelectorList: React.FunctionComponent<DualListSelectorListP
     </ul>
   );
 };
+DualListSelectorListBase.displayName = 'DualListSelectorListBase';
+
+export const DualListSelectorList = React.forwardRef(
+  (props: DualListSelectorListProps, ref: React.Ref<HTMLUListElement>) => (
+    <DualListSelectorListBase innerRef={ref as React.MutableRefObject<any>} {...props} />
+  )
+);
+
 DualListSelectorList.displayName = 'DualListSelectorList';

package/src/components/EmptyState/__tests__/Generated/EmptyStateIcon.test.tsx

@@ -3,31 +3,17 @@
  */
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { UserIcon } from '@patternfly/react-icons';
+import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';
 import { EmptyStateIcon } from '../../EmptyStateIcon';
 // any missing imports can usually be resolved by adding them here
 import { Spinner } from '../../../Spinner/Spinner';
 
 it('EmptyStateIcon should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(
-    <EmptyStateIcon
-      color={'string'}
-      title={'string'}
-      className={"''"}
-      icon={UserIcon}
-    />
-  );
+  const { asFragment } = render(<EmptyStateIcon color={'string'} title={'string'} className={"''"} icon={UserIcon} />);
   expect(asFragment()).toMatchSnapshot();
 });
 
 it('EmptyStateIcon should match snapshot for variant container', () => {
-  const { asFragment } = render(
-    <EmptyStateIcon
-      color={'string'}
-      title={'string'}
-      className={"''"}
-      icon={Spinner}
-    />
-  );
+  const { asFragment } = render(<EmptyStateIcon color={'string'} title={'string'} className={"''"} icon={Spinner} />);
   expect(asFragment()).toMatchSnapshot();
 });

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -171,10 +171,12 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
   };
 
   resize = () => {
-    const { offsetWidth } = this.expandableContentRef.current;
-    if (this.state.previousWidth !== offsetWidth) {
-      this.setState({ previousWidth: offsetWidth });
-      this.checkToggleVisibility();
+    if (this.expandableContentRef.current) {
+      const { offsetWidth } = this.expandableContentRef.current;
+      if (this.state.previousWidth !== offsetWidth) {
+        this.setState({ previousWidth: offsetWidth });
+        this.checkToggleVisibility();
+      }
     }
   };
   handleResize = debounce(this.resize, 250);
@@ -182,7 +184,7 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
   render() {
     const {
       onToggle: onToggleProp,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
       isActive,
       className,
       toggleText,

package/src/components/Label/Label.tsx

@@ -327,6 +327,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
         className
       )}
       onClick={isOverflowLabel ? onLabelClick : undefined}
+      {...(LabelComponent === 'button' && { type: 'button' })}
     >
       {!isEditableActive && labelComponentChild}
       {!isEditableActive && onClose && closeButton}

package/src/components/Label/LabelGroup.tsx

@@ -86,7 +86,7 @@ class LabelGroup extends React.Component<LabelGroupProps, LabelGroupState> {
     numLabels: 3,
     isClosable: false,
     isCompact: false,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
     onClick: (_e: React.MouseEvent) => undefined as any,
     closeBtnAriaLabel: 'Close label group',
     tooltipPosition: 'top',

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

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
 
 import { Label } from '../Label';
 
@@ -110,6 +111,12 @@ describe('Label', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('renders with isOverflow and type is set to button ', () => {
+    const { asFragment } = render(<Label isOverflowLabel>Something</Label>);
+    expect(screen.getByRole('button')).toHaveAttribute('type', 'button');
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   test('a button is not rendered when onClick is not passed', () => {
     render(<Label>Click me</Label>);
 

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

@@ -534,6 +534,25 @@ exports[`Label renders with isCompact 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Label renders with isOverflow and type is set to button  1`] = `
+<DocumentFragment>
+  <button
+    class="pf-v5-c-label pf-m-overflow"
+    type="button"
+  >
+    <span
+      class="pf-v5-c-label__content"
+    >
+      <span
+        class="pf-v5-c-label__text"
+      >
+        Something
+      </span>
+    </span>
+  </button>
+</DocumentFragment>
+`;
+
 exports[`Label renders with outline variant 1`] = `
 <DocumentFragment>
   <span

package/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap

@@ -69,6 +69,7 @@ exports[`LabelGroup label group compact 1`] = `
         >
           <button
             class="pf-v5-c-label pf-m-overflow pf-m-compact"
+            type="button"
           >
             <span
               class="pf-v5-c-label__content"

package/src/components/MenuToggle/MenuToggle.tsx

@@ -6,6 +6,7 @@ import { BadgeProps } from '../Badge';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import { OUIAProps, getDefaultOUIAId, getOUIAProps } from '../../helpers';
 
 export enum MenuToggleStatus {
   success = 'success',
@@ -24,12 +25,13 @@ export interface SplitButtonOptions {
 
 export interface MenuToggleProps
   extends Omit<
-    React.DetailedHTMLProps<
-      React.ButtonHTMLAttributes<HTMLButtonElement> & React.HTMLAttributes<HTMLDivElement>,
-      MenuToggleElement
+      React.DetailedHTMLProps<
+        React.ButtonHTMLAttributes<HTMLButtonElement> & React.HTMLAttributes<HTMLDivElement>,
+        MenuToggleElement
+      >,
+      'ref'
     >,
-    'ref'
-  > {
+    OUIAProps {
   /** Content rendered inside the toggle */
   children?: React.ReactNode;
   /** Additional classes added to the toggle */
@@ -46,7 +48,7 @@ export interface MenuToggleProps
   splitButtonOptions?: SplitButtonOptions;
   /** Variant styles of the menu toggle */
   variant?: 'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead';
-  /** @beta Status styles of the menu toggle */
+  /** Status styles of the menu toggle */
   status?: 'success' | 'warning' | 'danger';
   /** Overrides the status icon */
   statusIcon?: React.ReactNode;
@@ -58,16 +60,29 @@ export interface MenuToggleProps
   badge?: BadgeProps | React.ReactNode;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<MenuToggleElement>;
+  /** Value to overwrite the randomly generated data-ouia-component-id. It will always target the toggle button. */
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
-class MenuToggleBase extends React.Component<MenuToggleProps> {
+interface MenuToggleState {
+  ouiaStateId: string;
+}
+
+class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
   displayName = 'MenuToggleBase';
   static defaultProps: MenuToggleProps = {
     className: '',
     isExpanded: false,
     isDisabled: false,
     isFullWidth: false,
-    isFullHeight: false
+    isFullHeight: false,
+    ouiaSafe: true
+  };
+
+  state: MenuToggleState = {
+    ouiaStateId: getDefaultOUIAId(MenuToggle.displayName, this.props.variant)
   };
 
   render() {
@@ -87,12 +102,16 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
       innerRef,
       onClick,
       'aria-label': ariaLabel,
+      ouiaId,
+      ouiaSafe,
       ...otherProps
     } = this.props;
     const isPlain = variant === 'plain';
     const isPlainText = variant === 'plainText';
     const isTypeahead = variant === 'typeahead';
 
+    const ouiaProps = getOUIAProps(MenuToggle.displayName, ouiaId ?? this.state.ouiaStateId, ouiaSafe);
+
     let _statusIcon = statusIcon;
     if (!statusIcon) {
       switch (status) {
@@ -130,6 +149,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
             onClick={onClick}
             aria-label={ariaLabel || 'Menu toggle'}
             tabIndex={-1}
+            {...ouiaProps}
           >
             {toggleControls}
           </button>
@@ -181,14 +201,14 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
         >
           {splitButtonOptions?.items}
           <button
-            className={css(styles.menuToggleButton)}
+            className={css(styles.menuToggleButton, children && styles.modifiers.text)}
             type="button"
             aria-expanded={isExpanded}
             aria-label={ariaLabel}
             disabled={isDisabled}
             onClick={onClick}
-            {...(children && { style: { display: 'flex', paddingLeft: 'var(--pf-v5-global--spacer--sm)' } })}
             {...otherProps}
+            {...ouiaProps}
           >
             {children && <span className={css(styles.menuToggleText)}>{children}</span>}
             {toggleControls}
@@ -207,6 +227,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
         disabled={isDisabled}
         onClick={onClick}
         {...componentProps}
+        {...ouiaProps}
       />
     );
   }

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

@@ -5,6 +5,9 @@ exports[`menu toggle passes additional classes 1`] = `
   <button
     aria-expanded="false"
     class="pf-v5-c-menu-toggle test-class"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-2"
+    data-ouia-component-type="PF5/MenuToggle"
+    data-ouia-safe="true"
     type="button"
   >
     <span
@@ -42,6 +45,9 @@ exports[`menu toggle renders successfully 1`] = `
   <button
     aria-expanded="false"
     class="pf-v5-c-menu-toggle"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-1"
+    data-ouia-component-type="PF5/MenuToggle"
+    data-ouia-safe="true"
     type="button"
   >
     <span
@@ -79,6 +85,9 @@ exports[`menu toggle shows badge 1`] = `
   <button
     aria-expanded="false"
     class="pf-v5-c-menu-toggle"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-6"
+    data-ouia-component-type="PF5/MenuToggle"
+    data-ouia-safe="true"
     type="button"
   >
     <span
@@ -125,6 +134,9 @@ exports[`menu toggle shows icon 1`] = `
   <button
     aria-expanded="false"
     class="pf-v5-c-menu-toggle"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-5"
+    data-ouia-component-type="PF5/MenuToggle"
+    data-ouia-safe="true"
     type="button"
   >
     <span
@@ -179,6 +191,9 @@ exports[`menu toggle shows isDisabled 1`] = `
   <button
     aria-expanded="false"
     class="pf-v5-c-menu-toggle pf-m-disabled"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-4"
+    data-ouia-component-type="PF5/MenuToggle"
+    data-ouia-safe="true"
     disabled=""
     type="button"
   >
@@ -217,6 +232,9 @@ exports[`menu toggle shows isExpanded 1`] = `
   <button
     aria-expanded="true"
     class="pf-v5-c-menu-toggle pf-m-expanded"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-3"
+    data-ouia-component-type="PF5/MenuToggle"
+    data-ouia-safe="true"
     type="button"
   >
     <span
@@ -254,6 +272,9 @@ exports[`menu toggle shows isPlain 1`] = `
   <button
     aria-expanded="false"
     class="pf-v5-c-menu-toggle pf-m-plain"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-plain-1"
+    data-ouia-component-type="PF5/MenuToggle"
+    data-ouia-safe="true"
     type="button"
   >
     <svg
@@ -278,6 +299,9 @@ exports[`menu toggle shows isPrimary 1`] = `
   <button
     aria-expanded="false"
     class="pf-v5-c-menu-toggle pf-m-primary"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-primary-1"
+    data-ouia-component-type="PF5/MenuToggle"
+    data-ouia-safe="true"
     type="button"
   >
     <span
@@ -315,6 +339,9 @@ exports[`menu toggle shows plain text 1`] = `
   <button
     aria-expanded="false"
     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"
     type="button"
   >
     <span

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -193,9 +193,11 @@ import { MenuToggle } from '@patternfly/react-core';
 </React.Fragment>
 ```
 
-### Split button toggle with checkbox
+### Split toggle with checkbox
 
-To add an action button or other control to a menu toggle, use a split button. A `<MenuToggle>` can be rendered as a split button by adding a `splitButtonOptions` object. Elements to be displayed before the toggle button must be included in the `items` property of `splitButtonOptions`.
+To add a checkbox (or other action/control) to a menu toggle, use a split button.
+
+A `<MenuToggle>` can be rendered as a split button by adding a `splitButtonOptions` object. Elements to be displayed before the toggle button must be included in the `items` property of `splitButtonOptions`.
 
 The following example shows a split button with a `<MenuToggleCheckbox>`.
 
@@ -205,25 +207,25 @@ Variant styling can be applied to split button toggles to adjust their appearanc
 
 ```
 
-### Split button toggle with checkbox label
+### Split toggle with labeled checkbox
 
-To display text in a split button menu toggle, add a label to the `items` property of `splitButtonOptions`.
+To add a text label to a split button toggle, pass `children` to the `<MenuToggle>` component.
 
-```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
+```ts file='MenuToggleSplitButtonCheckboxWithToggleText.tsx'
 
 ```
 
-### Split button toggle with checkbox and toggle button text
+### Split toggle with checkbox and toggle text label
 
-For split button toggles that should still contain text which will trigger the toggle's `onClick`, pass `children` to the `MenuToggle`.
+You can allow users to select a toggle checkbox by clicking either the checkbox or the text label.
 
-The following example shows a split button with a `<MenuToggleCheckbox>` and toggle button text.
+To do so, pass `children` to the `<MenuToggleCheckbox>` component. When the menu toggle text is clicked, the checkbox's `onChange` callback will be triggered.
 
-```ts file='MenuToggleSplitButtonCheckboxWithToggleText.tsx'
+```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
 
 ```
 
-### Split button toggle with action
+### Split toggle with action
 
 To add an action to a split button, pass `variant='action'` into `splitButtonOptions` and add a `<MenuToggleAction>` to the `items` property of `splitButtonOptions`.
 
@@ -285,6 +287,6 @@ To create a toggle with a status, pass in the `status` property to the `MenuTogg
 
 When the status value is "warning" or "danger", you must include helper text that conveys what is causing the warning/error.
 
-```ts isBeta file='MenuToggleStatus.tsx'
+```ts file='MenuToggleStatus.tsx'
 
 ```

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/OverflowMenu/__tests__/Generated/OverflowMenuDropdownItem.test.tsx

@@ -6,9 +6,7 @@ import { OverflowMenuDropdownItem } from '../../OverflowMenuDropdownItem';
 
 describe('OverflowMenuDropdownItem', () => {
   it('should match snapshot', () => {
-    const { asFragment } = render(
-        <OverflowMenuDropdownItem itemId="id" children={'any'} isShared={false} />
-    );
+    const { asFragment } = render(<OverflowMenuDropdownItem itemId="id" children={'any'} isShared={false} />);
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/Page/PageToggleButton.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import * as React from 'react';
 import { Button, ButtonProps, ButtonVariant } from '../../components/Button';
 import { PageContextConsumer, PageContextProps } from './PageContext';

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

@@ -169,6 +169,8 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAPr
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
   ouiaSafe?: boolean;
+  /** @beta The container to append the pagination options menu to. */
+  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline';
 }
 
 const handleInputWidth = (lastPage: number, node: HTMLDivElement) => {
@@ -229,6 +231,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
   ouiaSafe = true,
   usePageInsets,
   inset,
+  menuAppendTo,
   ...props
 }: PaginationProps) => {
   const paginationRef = React.useRef<HTMLDivElement>(null);
@@ -337,6 +340,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
           toggleTemplate={toggleTemplate}
           isDisabled={isDisabled}
           containerRef={containerRef}
+          appendTo={menuAppendTo}
         />
       )}
       <Navigation