@patternfly/react-core 6.0.0-alpha.65 → 6.0.0-alpha.67

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.64","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.66","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.64","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.66","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.64","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.66","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.65",
+  "version": "6.0.0-alpha.67",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -65,5 +65,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "c78a547d4e50b3766eead9a2814667c778c3c86f"
+  "gitHead": "d9e64b4ebcc17b91ea3ea8a1e3f8b60e901d496b"
 }

package/src/components/AboutModal/AboutModal.tsx

@@ -6,7 +6,7 @@ import { AboutModalBoxHeader } from './AboutModalBoxHeader';
 import { AboutModalBoxBrand } from './AboutModalBoxBrand';
 import { AboutModalBoxCloseButton } from './AboutModalBoxCloseButton';
 import { AboutModalBox } from './AboutModalBox';
-import { Modal, ModalVariant } from '../Modal';
+import { Modal, ModalVariant } from '../../deprecated/components/Modal';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 
 export interface AboutModalProps extends React.HTMLProps<HTMLDivElement> {

package/src/components/Label/examples/LabelGroupEditableAddModal.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 import {
   LabelGroup,
   Label,
-  Modal,
-  ModalVariant,
   Button,
   Form,
   FormGroup,
@@ -16,6 +14,7 @@ import {
   Radio,
   Popper
 } from '@patternfly/react-core';
+import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 
 export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
@@ -255,8 +254,8 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
           </Label>
         ))}
       </LabelGroup>
-      <Modal
-        variant={ModalVariant.small}
+      <ModalDeprecated
+        variant={ModalVariantDeprecated.small}
         title="Add Label"
         isOpen={isModalOpen}
         onClose={handleModalToggle}
@@ -359,7 +358,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
             />
           </FormGroup>
         </Form>
-      </Modal>
+      </ModalDeprecated>
     </div>
   );
 };

package/src/components/Modal/Modal.tsx

@@ -7,53 +7,29 @@ import { ModalContent } from './ModalContent';
 import { OUIAProps, getDefaultOUIAId } from '../../helpers';
 
 export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
-  /** Action buttons to add to the standard modal footer. Ignored if the footer property
-   * is passed in.
-   */
-  actions?: any;
   /** The parent container to append the modal to. Defaults to "document.body". */
   appendTo?: HTMLElement | (() => HTMLElement);
-  /** Id to use for the modal box descriptor. */
+  /** Id to use for the modal box description. This should match the ModalHeader labelId or descriptorId. */
   'aria-describedby'?: string;
-  /** Accessible descriptor of the modal. */
+  /**   Adds an accessible name to the modal when there is no title in the ModalHeader. */
   'aria-label'?: string;
-  /** Id to use for the modal box label. */
+  /** Id to use for the modal box label. This should include the ModalHeader labelId. */
   'aria-labelledby'?: string;
-  /** Accessible label applied to the modal box body. This should be used to communicate
-   * important information about the modal box body div element if needed, such as that it
-   * is scrollable.
-   */
-  bodyAriaLabel?: string;
-  /** Accessible role applied to the modal box body. This will default to "region" if the
-   * bodyAriaLabel property is passed in. Set to a more appropriate role as applicable
-   * based on the modal content and context.
-   */
-  bodyAriaRole?: string;
   /** Content rendered inside the modal. */
   children: React.ReactNode;
   /** Additional classes added to the modal. */
   className?: string;
-  /** Description of the modal. */
-  description?: React.ReactNode;
   /** Flag to disable focus trap. */
   disableFocusTrap?: boolean;
   /** The element to focus when the modal opens. By default the first
    * focusable element will receive focus.
    */
   elementToFocus?: HTMLElement | SVGElement | string;
-  /** Custom footer. */
-  footer?: React.ReactNode;
-  /** Flag indicating if modal content should be placed in a modal box body wrapper. */
-  hasNoBodyWrapper?: boolean;
-  /** Complex header (more than just text), supersedes the title property for header content. */
-  header?: React.ReactNode;
-  /** Optional help section for the modal header. */
-  help?: React.ReactNode;
   /** An id to use for the modal box container. */
   id?: string;
   /** Flag to show the modal. */
   isOpen?: boolean;
-  /** A callback for when the close button is clicked. */
+  /** Add callback for when the close button is clicked. This prop needs to be passed to render the close button */
   onClose?: (event: KeyboardEvent | React.MouseEvent) => void;
   /** Modal handles pressing of the escape key and closes the modal. If you want to handle
    * this yourself you can use this callback function. */
@@ -62,16 +38,6 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   position?: 'default' | 'top';
   /** Offset from alternate position. Can be any valid CSS length/percentage. */
   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;
-  /** 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.
-   */
-  titleIconVariant?: 'success' | 'danger' | 'warning' | 'info' | 'custom' | React.ComponentType<any>;
-  /** Optional title label text for screen readers. */
-  titleLabel?: string;
   /** Variant of the modal. */
   variant?: 'small' | 'medium' | 'large' | 'default';
   /** Default width of the modal. */
@@ -100,24 +66,10 @@ class Modal extends React.Component<ModalProps, ModalState> {
   static displayName = 'Modal';
   static currentId = 0;
   boxId = '';
-  labelId = '';
-  descriptorId = '';
 
   static defaultProps: PickOptional<ModalProps> = {
-    className: '',
     isOpen: false,
-    title: '',
-    titleIconVariant: null,
-    titleLabel: '',
-    'aria-label': '',
-    showClose: true,
-    'aria-describedby': '',
-    'aria-labelledby': '',
-    id: undefined,
-    actions: [] as any[],
-    onClose: () => undefined as any,
     variant: 'default',
-    hasNoBodyWrapper: false,
     appendTo: () => document.body,
     ouiaSafe: true,
     position: 'default'
@@ -126,11 +78,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
   constructor(props: ModalProps) {
     super(props);
     const boxIdNum = Modal.currentId++;
-    const labelIdNum = boxIdNum + 1;
-    const descriptorIdNum = boxIdNum + 2;
     this.boxId = props.id || `pf-modal-part-${boxIdNum}`;
-    this.labelId = `pf-modal-part-${labelIdNum}`;
-    this.descriptorId = `pf-modal-part-${descriptorIdNum}`;
 
     this.state = {
       container: undefined,
@@ -168,11 +116,9 @@ class Modal extends React.Component<ModalProps, ModalState> {
   componentDidMount() {
     const {
       appendTo,
-      title,
+      'aria-describedby': ariaDescribedby,
       'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledby,
-      hasNoBodyWrapper,
-      header
+      'aria-labelledby': ariaLabelledby
     } = this.props;
     const target: HTMLElement = this.getElement(appendTo);
     const container = document.createElement('div');
@@ -186,16 +132,9 @@ class Modal extends React.Component<ModalProps, ModalState> {
       target.classList.remove(css(styles.backdropOpen));
     }
 
-    if (this.isEmpty(title) && this.isEmpty(ariaLabel) && this.isEmpty(ariaLabelledby)) {
+    if (!ariaDescribedby && !ariaLabel && !ariaLabelledby) {
       // eslint-disable-next-line no-console
-      console.error('Modal: Specify at least one of: title, aria-label, aria-labelledby.');
-    }
-
-    if (this.isEmpty(ariaLabel) && this.isEmpty(ariaLabelledby) && (hasNoBodyWrapper || header)) {
-      // eslint-disable-next-line no-console
-      console.error(
-        'Modal: When using hasNoBodyWrapper or setting a custom header, ensure you assign an accessible name to the the modal container with aria-label or aria-labelledby.'
-      );
+      console.error('Modal: Specify at least one of: aria-describedby, aria-label, aria-labelledby.');
     }
   }
 
@@ -231,11 +170,6 @@ class Modal extends React.Component<ModalProps, ModalState> {
       'aria-labelledby': ariaLabelledby,
       'aria-label': ariaLabel,
       'aria-describedby': ariaDescribedby,
-      bodyAriaLabel,
-      bodyAriaRole,
-      title,
-      titleIconVariant,
-      titleLabel,
       ouiaId,
       ouiaSafe,
       position,
@@ -250,22 +184,15 @@ class Modal extends React.Component<ModalProps, ModalState> {
 
     return ReactDOM.createPortal(
       <ModalContent
-        {...props}
         boxId={this.boxId}
-        labelId={this.labelId}
-        descriptorId={this.descriptorId}
-        title={title}
-        titleIconVariant={titleIconVariant}
-        titleLabel={titleLabel}
         aria-label={ariaLabel}
         aria-describedby={ariaDescribedby}
         aria-labelledby={ariaLabelledby}
-        bodyAriaLabel={bodyAriaLabel}
-        bodyAriaRole={bodyAriaRole}
         ouiaId={ouiaId !== undefined ? ouiaId : this.state.ouiaStateId}
         ouiaSafe={ouiaSafe}
         position={position}
         elementToFocus={elementToFocus}
+        {...props}
       />,
       container
     ) as React.ReactElement;

package/src/components/Modal/ModalBox.tsx

@@ -4,9 +4,9 @@ import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
 import topSpacer from '@patternfly/react-tokens/dist/esm/c_modal_box_m_align_top_spacer';
 
 export interface ModalBoxProps extends React.HTMLProps<HTMLDivElement> {
-  /** Id to use for the modal box description. */
-  'aria-describedby': string;
-  /** Accessible descriptor of the modal. */
+  /** Id to use for the modal box description. This should match the ModalHeader labelId or descriptorId */
+  'aria-describedby'?: string;
+  /** Adds an accessible name to the modal when there is no title in the ModalHeader. */
   'aria-label'?: string;
   /** Id to use for the modal box label. */
   'aria-labelledby'?: string;
@@ -24,12 +24,12 @@ export interface ModalBoxProps extends React.HTMLProps<HTMLDivElement> {
 
 export const ModalBox: React.FunctionComponent<ModalBoxProps> = ({
   children,
-  className = '',
+  className,
   variant = 'default',
   position,
   positionOffset,
   'aria-labelledby': ariaLabelledby,
-  'aria-label': ariaLabel = '',
+  'aria-label': ariaLabel,
   'aria-describedby': ariaDescribedby,
   style,
   ...props
@@ -40,7 +40,6 @@ export const ModalBox: React.FunctionComponent<ModalBoxProps> = ({
   }
   return (
     <div
-      {...props}
       role="dialog"
       aria-label={ariaLabel || null}
       aria-labelledby={ariaLabelledby || null}
@@ -55,6 +54,7 @@ export const ModalBox: React.FunctionComponent<ModalBoxProps> = ({
         variant === 'medium' && styles.modifiers.md
       )}
       style={style}
+      {...props}
     >
       {children}
     </div>

package/src/components/Modal/ModalBoxCloseButton.tsx

@@ -18,7 +18,7 @@ export interface ModalBoxCloseButtonProps extends OUIAProps {
 
 export const ModalBoxCloseButton: React.FunctionComponent<ModalBoxCloseButtonProps> = ({
   className,
-  onClose = () => undefined as any,
+  onClose,
   'aria-label': ariaLabel = 'Close',
   ouiaId,
   ...props

package/src/components/Modal/ModalBoxTitle.tsx

@@ -17,27 +17,29 @@ export interface ModalBoxTitleProps {
   /** Additional classes added to the modal box title. */
   className?: string;
   /** Id of the modal box title. */
-  id: string;
+  id?: string;
   /** Content rendered inside the modal box title. */
   title: React.ReactNode;
   /** Optional alert icon (or other) to show before the title. When the predefined alert types
    * are used the default styling will be automatically applied. */
   titleIconVariant?: 'success' | 'danger' | 'warning' | 'info' | 'custom' | React.ComponentType<any>;
   /** Optional title label text for screen readers. */
-  titleLabel?: string;
+  titleScreenReaderText?: string;
 }
 
 export const ModalBoxTitle: React.FunctionComponent<ModalBoxTitleProps> = ({
-  className = '',
+  className,
   id,
   title,
   titleIconVariant,
-  titleLabel = '',
+  titleScreenReaderText,
   ...props
 }: ModalBoxTitleProps) => {
   const [hasTooltip, setHasTooltip] = React.useState(false);
   const h1 = React.useRef<HTMLHeadingElement>(null);
-  const label = titleLabel || (isVariantIcon(titleIconVariant) ? `${capitalize(titleIconVariant)} alert:` : titleLabel);
+  const label =
+    titleScreenReaderText ||
+    (isVariantIcon(titleIconVariant) ? `${capitalize(titleIconVariant)} alert:` : titleScreenReaderText);
   const variantIcons = {
     success: <CheckCircleIcon />,
     danger: <ExclamationCircleIcon />,

package/src/components/Modal/ModalContent.tsx

@@ -1,84 +1,39 @@
 import * as React from 'react';
 import { FocusTrap } from '../../helpers';
-import modalStyles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
 import bullsEyeStyles from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 import { css } from '@patternfly/react-styles';
 import { getOUIAProps, OUIAProps } from '../../helpers';
-
-import { Backdrop } from '../Backdrop/Backdrop';
-import { ModalBoxBody } from './ModalBoxBody';
+import { Backdrop } from '../Backdrop';
 import { ModalBoxCloseButton } from './ModalBoxCloseButton';
 import { ModalBox } from './ModalBox';
-import { ModalBoxFooter } from './ModalBoxFooter';
-import { ModalBoxDescription } from './ModalBoxDescription';
-import { ModalBoxHeader } from './ModalBoxHeader';
-import { ModalBoxTitle, isVariantIcon } from './ModalBoxTitle';
 
 export interface ModalContentProps extends OUIAProps {
-  /** Action buttons to add to the standard modal footer. Ignored if the footer property
-   * is passed in.
-   */
-  actions?: any;
-  /** Id to use for the modal box descriptor. */
+  /** Id to use for the modal box description. This should match the ModalHeader labelId or descriptorId. */
   'aria-describedby'?: string;
   /** Accessible descriptor of the modal. */
   'aria-label'?: string;
-  /** Id to use for the modal box label. */
-  'aria-labelledby'?: string | null;
-  /** Accessible label applied to the modal box body. This should be used to communicate
-   * important information about the modal box body div element if needed, such as that it
-   * is scrollable.
-   */
-  bodyAriaLabel?: string;
-  /** Accessible role applied to the modal box body. This will default to "region" if the
-   * bodyAriaLabel property is passed in. Set to a more appropriate role as applicable
-   * based on the modal content and context.
-   */
-  bodyAriaRole?: string;
+  /** Id to use for the modal box label. This should include the ModalHeader labelId. */
+  'aria-labelledby'?: string;
   /** Id of the modal box container. */
   boxId: string;
   /** Content rendered inside the modal. */
   children: React.ReactNode;
   /** Additional classes added to the modal box. */
   className?: string;
-  /** Description of the modal. */
-  description?: React.ReactNode;
-  /** Id of the modal box description. */
-  descriptorId: string;
   /** Flag to disable focus trap. */
   disableFocusTrap?: boolean;
   /** The element to focus when the modal opens. By default the first
    * focusable element will receive focus.
    */
   elementToFocus?: HTMLElement | SVGElement | string;
-  /** Custom footer. */
-  footer?: React.ReactNode;
-  /** Flag indicating if modal content should be placed in a modal box body wrapper. */
-  hasNoBodyWrapper?: boolean;
-  /** Complex header (more than just text), supersedes the title property for header content. */
-  header?: React.ReactNode;
-  /** Optional help section for the modal header. */
-  help?: React.ReactNode;
   /** Flag to show the modal. */
   isOpen?: boolean;
-  /** Id of the modal box title. */
-  labelId: string;
   /** A callback for when the close button is clicked. */
   onClose?: (event: KeyboardEvent | React.MouseEvent) => void;
   /** Position of the modal. By default a modal will be positioned vertically and horizontally centered. */
   position?: 'default' | 'top';
   /** Offset from alternate position. Can be any valid CSS length/percentage. */
   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;
-  /** 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.
-   */
-  titleIconVariant?: 'success' | 'danger' | 'warning' | 'info' | 'custom' | React.ComponentType<any>;
-  /** Optional title label text for screen readers. */
-  titleLabel?: string;
   /** Variant of the modal. */
   variant?: 'small' | 'medium' | 'large' | 'default';
   /** Default width of the modal. */
@@ -93,33 +48,19 @@ export interface ModalContentProps extends OUIAProps {
 
 export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   children,
-  className = '',
+  className,
   isOpen = false,
-  header = null,
-  help = null,
-  description = null,
-  title = '',
-  titleIconVariant = null,
-  titleLabel = '',
-  'aria-label': ariaLabel = '',
+  'aria-label': ariaLabel,
   'aria-describedby': ariaDescribedby,
   'aria-labelledby': ariaLabelledby,
-  bodyAriaLabel,
-  bodyAriaRole,
-  showClose = true,
-  footer = null,
-  actions = [],
-  onClose = () => undefined as any,
+  onClose,
   variant = 'default',
   position,
   positionOffset,
   width,
   maxWidth,
   boxId,
-  labelId,
-  descriptorId,
   disableFocusTrap = false,
-  hasNoBodyWrapper = false,
   ouiaId,
   ouiaSafe = true,
   elementToFocus,
@@ -129,62 +70,30 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
     return null;
   }
 
-  const modalBoxHeader = header ? (
-    <ModalBoxHeader help={help}>{header}</ModalBoxHeader>
-  ) : (
-    title && (
-      <ModalBoxHeader help={help}>
-        <ModalBoxTitle title={title} titleIconVariant={titleIconVariant} titleLabel={titleLabel} id={labelId} />
-        {description && <ModalBoxDescription id={descriptorId}>{description}</ModalBoxDescription>}
-      </ModalBoxHeader>
-    )
-  );
-
-  const modalBoxFooter = footer ? (
-    <ModalBoxFooter>{footer}</ModalBoxFooter>
-  ) : (
-    actions.length > 0 && <ModalBoxFooter>{actions}</ModalBoxFooter>
-  );
-
-  const defaultModalBodyAriaRole = bodyAriaLabel ? 'region' : undefined;
-
-  const hasNoDescription = !description && !ariaDescribedby;
-  const id = hasNoDescription ? descriptorId : undefined;
-
-  const modalBody = hasNoBodyWrapper ? (
-    children
-  ) : (
-    <ModalBoxBody aria-label={bodyAriaLabel} role={bodyAriaRole || defaultModalBodyAriaRole} {...props} id={id}>
-      {children}
-    </ModalBoxBody>
-  );
-  const ariaLabelledbyFormatted = (): null | string => {
-    if (ariaLabelledby === null) {
-      return null;
-    }
+  const ariaLabelledbyFormatted = (): string => {
     const idRefList: string[] = [];
-    if ((ariaLabel && boxId) !== '') {
+    if (ariaLabel && boxId) {
       idRefList.push(ariaLabel && boxId);
     }
     if (ariaLabelledby) {
       idRefList.push(ariaLabelledby);
     }
-    if (title) {
-      idRefList.push(labelId);
+    if (idRefList.length === 0) {
+      return undefined;
+    } else {
+      return idRefList.join(' ');
     }
-    return idRefList.join(' ');
   };
 
   const modalBox = (
     <ModalBox
-      id={boxId}
-      className={css(className, isVariantIcon(titleIconVariant) && modalStyles.modifiers[titleIconVariant])}
+      className={css(className)}
       variant={variant}
       position={position}
       positionOffset={positionOffset}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledbyFormatted()}
-      aria-describedby={ariaDescribedby || (hasNoBodyWrapper ? null : descriptorId)}
+      aria-describedby={ariaDescribedby}
       {...getOUIAProps(ModalContent.displayName, ouiaId, ouiaSafe)}
       style={
         {
@@ -194,11 +103,11 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
           })
         } as React.CSSProperties
       }
+      {...props}
+      id={boxId}
     >
-      {showClose && <ModalBoxCloseButton onClose={(event) => onClose(event)} ouiaId={ouiaId} />}
-      {modalBoxHeader}
-      {modalBody}
-      {modalBoxFooter}
+      {onClose && <ModalBoxCloseButton onClose={(event) => onClose(event)} ouiaId={ouiaId} />}
+      {children}
     </ModalBox>
   );
   return (