@patternfly/react-core 6.0.0-prerelease.9 → 6.1.0-prerelease.1

package/src/components/FileUpload/examples/FileUpload.md

@@ -1,6 +1,6 @@
 ---
 id: Simple file upload
-cssPrefix: pf-v5-c-file-upload
+cssPrefix: pf-v6-c-file-upload
 propComponents: ['FileUpload', 'FileUploadField']
 section: components
 subsection: file-upload

package/src/components/Form/examples/Form.md

@@ -2,7 +2,7 @@
 id: Form
 section: components
 subsection: forms
-cssPrefix: pf-v5-c-form
+cssPrefix: pf-v6-c-form
 propComponents:
   [
     'ActionGroup',

package/src/components/FormSelect/examples/FormSelect.md

@@ -2,7 +2,7 @@
 id: Form select
 section: components
 subsection: forms
-cssPrefix: pf-v5-c-form-control
+cssPrefix: pf-v6-c-form-control
 propComponents: ['FormSelect', 'FormSelectOption', 'FormSelectOptionGroup']
 ouia: true
 ---

package/src/components/HelperText/examples/HelperText.md

@@ -1,7 +1,7 @@
 ---
 id: Helper text
 section: components
-cssPrefix: pf-v5-c-helper-text
+cssPrefix: pf-v6-c-helper-text
 propComponents: ['HelperText', 'HelperTextItem']
 ---
 

package/src/components/Hint/examples/Hint.md

@@ -1,7 +1,7 @@
 ---
 id: Hint
 section: components
-cssPrefix: null
+cssPrefix: pf-v6-c-hint
 propComponents: ['Hint', 'HintTitle', 'HintBody', 'HintFooter']
 ---
 

package/src/components/Icon/examples/Icon.md

@@ -1,7 +1,7 @@
 ---
 id: Icon
 section: components
-cssPrefix: pf-v5-c-icon
+cssPrefix: pf-v6-c-icon
 propComponents: ['Icon']
 ---
 

package/src/components/InputGroup/examples/InputGroup.md

@@ -1,7 +1,7 @@
 ---
 id: Input group
 section: components
-cssPrefix: null
+cssPrefix: pf-v6-c-input-group
 propComponents: ['InputGroup', 'InputGroupItem', 'InputGroupText']
 ---
 

package/src/components/JumpLinks/examples/JumpLinks.md

@@ -1,6 +1,7 @@
 ---
 id: Jump links
 section: components
+cssPrefix: pf-v6-c-jump-links
 propComponents: ['JumpLinks', 'JumpLinksItem']
 ---
 

package/src/components/Label/examples/Label.md

@@ -1,7 +1,7 @@
 ---
 id: Label
 section: components
-cssPrefix: ['pf-v5-c-label', 'pf-v5-c-label-group']
+cssPrefix: ['pf-v6-c-label', 'pf-v6-c-label-group']
 propComponents: ['Label', 'LabelGroup']
 ---
 

package/src/components/List/examples/List.md

@@ -1,7 +1,7 @@
 ---
 id: List
 section: components
-cssPrefix: pf-v5-c-list
+cssPrefix: pf-v6-c-list
 propComponents: ['List', 'ListItem']
 ---
 

package/src/components/LoginPage/examples/LoginPage.md

@@ -1,7 +1,7 @@
 ---
 id: Login page
 section: components
-cssPrefix: pf-v5-c-login
+cssPrefix: pf-v6-c-login
 propComponents:
   [
     'LoginPage',

package/src/components/Masthead/examples/Masthead.md

@@ -1,7 +1,7 @@
 ---
 id: Masthead
 section: components
-cssPrefix: pf-v5-c-masthead
+cssPrefix: pf-v6-c-masthead
 propComponents: ['Masthead', 'MastheadToggle', 'MastheadMain', 'MastheadBrand', MastheadLogo, 'MastheadContent']
 ---
 

package/src/components/Menu/MenuContainer.tsx

@@ -39,6 +39,10 @@ export interface MenuContainerProps {
   popperProps?: MenuPopperProps;
   /** @beta Flag indicating the first menu item should be focused after opening the dropdown. */
   shouldFocusFirstItemOnOpen?: boolean;
+  /** Flag indicating if scroll on focus of the first menu item should occur. */
+  shouldPreventScrollOnItemFocus?: boolean;
+  /** Time in ms to wait before firing the toggles' focus event. Defaults to 0 */
+  focusTimeoutDelay?: number;
 }
 
 /**
@@ -54,7 +58,9 @@ export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
   zIndex = 9999,
   popperProps,
   onOpenChangeKeys = ['Escape', 'Tab'],
-  shouldFocusFirstItemOnOpen = true
+  shouldFocusFirstItemOnOpen = true,
+  shouldPreventScrollOnItemFocus = true,
+  focusTimeoutDelay = 0
 }: MenuContainerProps) => {
   const prevIsOpen = React.useRef<boolean>(isOpen);
   React.useEffect(() => {
@@ -64,8 +70,8 @@ export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
         const firstElement = menuRef?.current?.querySelector(
           'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
         );
-        firstElement && (firstElement as HTMLElement).focus();
-      }, 0);
+        firstElement && (firstElement as HTMLElement).focus({ preventScroll: shouldPreventScrollOnItemFocus });
+      }, focusTimeoutDelay);
     }
 
     prevIsOpen.current = isOpen;
@@ -102,7 +108,7 @@ export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
       window.removeEventListener('keydown', handleMenuKeys);
       window.removeEventListener('click', handleClick);
     };
-  }, [isOpen, menuRef, onOpenChange, onOpenChangeKeys, toggleRef]);
+  }, [focusTimeoutDelay, isOpen, menuRef, onOpenChange, onOpenChangeKeys, shouldPreventScrollOnItemFocus, toggleRef]);
 
   return (
     <Popper

package/src/components/Menu/examples/Menu.md

@@ -2,7 +2,7 @@
 id: Menu
 section: components
 subsection: menus
-cssPrefix: pf-v5-c-menu
+cssPrefix: pf-v6-c-menu
 propComponents:
   [
     'Menu',

package/src/components/MenuToggle/MenuToggle.tsx

@@ -21,13 +21,6 @@ export enum MenuToggleSize {
 
 export type MenuToggleElement = HTMLDivElement | HTMLButtonElement;
 
-export interface SplitButtonOptions {
-  /** Elements to display before the toggle button. When included, renders the menu toggle as a split button. */
-  items: React.ReactNode[];
-  /** Variant of split button toggle */
-  variant?: 'action' | 'checkbox';
-}
-
 export interface MenuToggleProps
   extends Omit<
       React.DetailedHTMLProps<
@@ -51,8 +44,8 @@ export interface MenuToggleProps
   isFullWidth?: boolean;
   /** Flag indicating the toggle contains placeholder text */
   isPlaceholder?: boolean;
-  /** Object used to configure a split button menu toggle */
-  splitButtonOptions?: SplitButtonOptions;
+  /** Elements to display before the toggle button. When included, renders the menu toggle as a split button. */
+  splitButtonItems?: React.ReactNode[];
   /** Variant styles of the menu toggle */
   variant?: 'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead';
   /** Status styles of the menu toggle */
@@ -107,7 +100,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
       isFullHeight,
       isFullWidth,
       isPlaceholder,
-      splitButtonOptions,
+      splitButtonItems,
       variant,
       status,
       statusIcon,
@@ -204,17 +197,10 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
       );
     }
 
-    if (splitButtonOptions) {
+    if (splitButtonItems) {
       return (
-        <div
-          ref={innerRef as React.Ref<HTMLDivElement>}
-          className={css(
-            commonStyles,
-            styles.modifiers.splitButton,
-            splitButtonOptions?.variant === 'action' && styles.modifiers.action
-          )}
-        >
-          {splitButtonOptions?.items}
+        <div ref={innerRef as React.Ref<HTMLDivElement>} className={css(commonStyles, styles.modifiers.splitButton)}>
+          {splitButtonItems}
           <button
             className={css(styles.menuToggleButton, children && styles.modifiers.text)}
             type="button"

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

@@ -7,6 +7,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
 import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-toggle';
+import '@testing-library/jest-dom';
 
 describe('menu toggle', () => {
   test('renders successfully', () => {
@@ -82,17 +83,15 @@ describe('menu toggle', () => {
     render(
       <MenuToggle
         onClick={mockClick}
-        splitButtonOptions={{
-          items: [
-            <MenuToggleCheckbox
-              id="split-button-checkbox-with-text-disabled-example"
-              key="split-checkbox-with-text-disabled"
-              aria-label="Select all"
-            >
-              10 selected
-            </MenuToggleCheckbox>
-          ]
-        }}
+        splitButtonItems={[
+          <MenuToggleCheckbox
+            id="split-button-checkbox-with-text-disabled-example"
+            key="split-checkbox-with-text-disabled"
+            aria-label="Select all"
+          >
+            10 selected
+          </MenuToggleCheckbox>
+        ]}
         aria-label="Menu toggle with checkbox split button and text"
       />
     );

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

@@ -2,8 +2,8 @@
 id: Menu toggle
 section: components
 subsection: menus
-cssPrefix: pf-v5-c-menu-toggle
-propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox', 'SplitButtonOptions']
+cssPrefix: pf-v6-c-menu-toggle
+propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox']
 ---
 
 import './MenuToggle.css'
@@ -203,7 +203,7 @@ import { MenuToggle } from '@patternfly/react-core';
 
 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`.
+A `<MenuToggle>` can be rendered as a split button by adding a `splitButtonItems` property. Elements to be displayed before the toggle button must be included in the `splitButtonItems`.
 
 The following example shows a split button with a `<MenuToggleCheckbox>`.
 
@@ -215,25 +215,25 @@ Variant styling can be applied to split button toggles to adjust their appearanc
 
 ### Split toggle with labeled checkbox
 
-To add a text label to a split button toggle, pass `children` to the `<MenuToggle>` component.
+You can allow users to select a toggle checkbox by clicking either the checkbox or the text label.
 
-```ts file='MenuToggleSplitButtonCheckboxWithToggleText.tsx'
+To link a split toggle label to the toggle's checkbox, pass both the label and the `<MenuToggleCheckbox>` component to `splitButtonItems`. 
 
-```
+```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
 
-### Split toggle with checkbox and toggle text label
+```
 
-You can allow users to select a toggle checkbox by clicking either the checkbox or the text label.
+### Split toggle with checkbox and toggle 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.
+To link a split toggle label to the toggle button itself, pass the label to the `<MenuToggle>` component, instead of `splitButtonItems`.
 
-```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
+```ts file='MenuToggleSplitButtonCheckboxWithToggleText.tsx'
 
 ```
 
 ### 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`.
+To add an action to a split button, add a `<MenuToggleAction>` to the `splitButtonItems` property.
 
 Actions may be used with primary and secondary toggle variants.
 

package/src/components/MenuToggle/examples/MenuToggleSplitButtonAction.tsx

@@ -4,46 +4,37 @@ import { MenuToggleAction, MenuToggle } from '@patternfly/react-core';
 export const MenuToggleSplitButtonAction: React.FunctionComponent = () => (
   <React.Fragment>
     <MenuToggle
-      splitButtonOptions={{
-        variant: 'action',
-        items: [
-          <MenuToggleAction id="split-button-action-example-with-toggle-button" key="split-action" aria-label="Action">
-            Action
-          </MenuToggleAction>
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleAction id="split-button-action-example-with-toggle-button" key="split-action" aria-label="Action">
+          Action
+        </MenuToggleAction>
+      ]}
       aria-label="Menu toggle with action split button"
     />{' '}
     <MenuToggle
       variant="primary"
-      splitButtonOptions={{
-        variant: 'action',
-        items: [
-          <MenuToggleAction
-            id="split-button-action-primary-example-with-toggle-button"
-            key="split-action-primary"
-            aria-label="Action"
-          >
-            Action
-          </MenuToggleAction>
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleAction
+          id="split-button-action-primary-example-with-toggle-button"
+          key="split-action-primary"
+          aria-label="Action"
+        >
+          Action
+        </MenuToggleAction>
+      ]}
       aria-label="Menu toggle with action split button"
     />{' '}
     <MenuToggle
       variant="secondary"
-      splitButtonOptions={{
-        variant: 'action',
-        items: [
-          <MenuToggleAction
-            id="split-button-action-secondary-example-with-toggle-button"
-            key="split-action-secondary"
-            aria-label="Action"
-          >
-            Action
-          </MenuToggleAction>
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleAction
+          id="split-button-action-secondary-example-with-toggle-button"
+          key="split-action-secondary"
+          aria-label="Action"
+        >
+          Action
+        </MenuToggleAction>
+      ]}
       aria-label="Menu toggle with action split button"
     />
   </React.Fragment>

package/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckbox.tsx

@@ -4,23 +4,23 @@ import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
 export const MenuToggleSplitButtonCheckbox: React.FunctionComponent = () => (
   <React.Fragment>
     <MenuToggle
-      splitButtonOptions={{
-        items: [<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />
+      ]}
       aria-label="Menu toggle with checkbox split button"
     />{' '}
     <MenuToggle
       variant="primary"
-      splitButtonOptions={{
-        items: [<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />
+      ]}
       aria-label="Menu toggle with checkbox split button"
     />{' '}
     <MenuToggle
       variant="secondary"
-      splitButtonOptions={{
-        items: [<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />
+      ]}
       aria-label="Menu toggle with checkbox split button"
     />
   </React.Fragment>

package/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxWithText.tsx

@@ -4,47 +4,41 @@ import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
 export const MenuToggleSplitButtonCheckboxWithText: React.FunctionComponent = () => (
   <React.Fragment>
     <MenuToggle
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="split-button-checkbox-with-text-example"
-            key="split-checkbox-with-text"
-            aria-label="Select all"
-          >
-            10 selected
-          </MenuToggleCheckbox>
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox
+          id="split-button-checkbox-with-text-example"
+          key="split-checkbox-with-text"
+          aria-label="Select all"
+        >
+          10 selected
+        </MenuToggleCheckbox>
+      ]}
       aria-label="Menu toggle with checkbox split button and text"
     />{' '}
     <MenuToggle
       variant="primary"
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="split-button-checkbox-primary-example"
-            key="split-checkbox-primary"
-            aria-label="Select all"
-          >
-            10 selected
-          </MenuToggleCheckbox>
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox
+          id="split-button-checkbox-primary-example"
+          key="split-checkbox-primary"
+          aria-label="Select all"
+        >
+          10 selected
+        </MenuToggleCheckbox>
+      ]}
       aria-label="Primary menu toggle with checkbox split button"
     />{' '}
     <MenuToggle
       variant="secondary"
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="split-button-checkbox-secondary-example"
-            key="split-checkbox-secondary"
-            aria-label="Select all"
-          >
-            10 selected
-          </MenuToggleCheckbox>
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox
+          id="split-button-checkbox-secondary-example"
+          key="split-checkbox-secondary"
+          aria-label="Select all"
+        >
+          10 selected
+        </MenuToggleCheckbox>
+      ]}
       aria-label="Secondary menu toggle with checkbox split button"
     />
   </React.Fragment>

package/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxWithToggleText.tsx

@@ -4,45 +4,39 @@ import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
 export const MenuToggleSplitButtonCheckboxWithToggleText: React.FunctionComponent = () => (
   <React.Fragment>
     <MenuToggle
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="split-button-checkbox-with-text-example"
-            key="split-checkbox-with-text"
-            aria-label="Select all"
-          />
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox
+          id="split-button-checkbox-with-text-example"
+          key="split-checkbox-with-text"
+          aria-label="Select all"
+        />
+      ]}
       aria-label="Menu toggle with checkbox split button and text"
     >
       10 selected
     </MenuToggle>{' '}
     <MenuToggle
       variant="primary"
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="split-button-checkbox-primary-example"
-            key="split-checkbox-primary"
-            aria-label="Select all"
-          />
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox
+          id="split-button-checkbox-primary-example"
+          key="split-checkbox-primary"
+          aria-label="Select all"
+        />
+      ]}
       aria-label="Primary menu toggle with checkbox split button"
     >
       10 selected
     </MenuToggle>{' '}
     <MenuToggle
       variant="secondary"
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="split-button-checkbox-secondary-example"
-            key="split-checkbox-secondary"
-            aria-label="Select all"
-          />
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox
+          id="split-button-checkbox-secondary-example"
+          key="split-checkbox-secondary"
+          aria-label="Select all"
+        />
+      ]}
       aria-label="Secondary menu toggle with checkbox split button"
     >
       10 selected

package/src/components/Modal/Modal.tsx

@@ -19,6 +19,8 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   children: React.ReactNode;
   /** Additional classes added to the modal. */
   className?: string;
+  /** Additional classes added to the modal backdrop. */
+  backdropClassName?: string;
   /** Flag to disable focus trap. */
   disableFocusTrap?: boolean;
   /** The element to focus when the modal opens. By default the first
@@ -114,12 +116,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
   isEmpty = (value: string | null | undefined) => value === null || value === undefined || value === '';
 
   componentDidMount() {
-    const {
-      appendTo,
-      'aria-describedby': ariaDescribedby,
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledby
-    } = this.props;
+    const { appendTo } = this.props;
     const target: HTMLElement = this.getElement(appendTo);
     const container = document.createElement('div');
     this.setState({ container });
@@ -131,11 +128,6 @@ class Modal extends React.Component<ModalProps, ModalState> {
     } else {
       target.classList.remove(css(styles.backdropOpen));
     }
-
-    if (!ariaDescribedby && !ariaLabel && !ariaLabelledby) {
-      // eslint-disable-next-line no-console
-      console.error('Modal: Specify at least one of: aria-describedby, aria-label, aria-labelledby.');
-    }
   }
 
   componentDidUpdate() {
@@ -192,6 +184,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
         ouiaSafe={ouiaSafe}
         position={position}
         elementToFocus={elementToFocus}
+        backdropClassName={props.backdropClassName}
         {...props}
       />,
       container