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

package/src/demos/DatePicker/examples/DateTimePickerInModal.tsx

@@ -1,13 +1,6 @@
 import React from 'react';
-import {
-  DatePicker,
-  Modal,
-  ModalVariant,
-  Button,
-  TimePicker,
-  InputGroup,
-  InputGroupItem
-} from '@patternfly/react-core';
+import { DatePicker, Button, TimePicker, InputGroup, InputGroupItem } from '@patternfly/react-core';
+import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 
 export const SimpleModal = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -33,9 +26,9 @@ export const SimpleModal = () => {
       <Button variant="primary" onClick={handleModalToggle}>
         Launch modal
       </Button>
-      <Modal
+      <ModalDeprecated
         id="date-time-picker-modal"
-        variant={ModalVariant.small}
+        variant={ModalVariantDeprecated.small}
         title="Generic modal header"
         isOpen={isModalOpen}
         onEscapePress={onEscapePress}
@@ -57,7 +50,7 @@ export const SimpleModal = () => {
             <TimePicker menuAppendTo="parent" isOpen={isTimePickerOpen} setIsOpen={setIsTimePickerOpen} />
           </InputGroupItem>
         </InputGroup>
-      </Modal>
+      </ModalDeprecated>
     </React.Fragment>
   );
 };

package/src/demos/LabelGroupDemos.md

@@ -3,6 +3,7 @@ id: Label
 section: components
 ---
 
+import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 
 ## Demos
@@ -10,9 +11,11 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-i
 ### Editable labels with add dropdown
 
 ```ts file="../components/Label/examples/LabelGroupEditableAddDropdown.tsx"
+
 ```
 
 ### Editable labels with add modal
 
 ```ts file="../components/Label/examples/LabelGroupEditableAddModal.tsx"
+
 ```

package/src/demos/MultipleFileUploadDemos.md

@@ -4,6 +4,7 @@ section: components
 subsection: file-upload
 ---
 
+import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 ## Demos
@@ -13,4 +14,5 @@ import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 This demo shows how to add a modal to alert users that the file(s) they attempted to drop was of a non-acceptable type.
 
 ```ts file="./examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx"
+
 ```

package/src/demos/examples/Card/CardEventsView.tsx

@@ -14,6 +14,7 @@ import {
   Flex,
   FlexItem,
   Gallery,
+  Icon,
   MenuToggle,
   Select,
   SelectList,
@@ -39,7 +40,7 @@ export const CardEventsView: React.FunctionComponent = () => {
         Error
       </SelectOption>
       <SelectOption value="Warning" key="option3">
-        Error
+        Warning
       </SelectOption>
     </SelectList>
   );
@@ -76,7 +77,9 @@ export const CardEventsView: React.FunctionComponent = () => {
                 <DescriptionListTerm>
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
-                      <ExclamationCircleIcon aria-hidden="true" />
+                      <Icon status="danger">
+                        <ExclamationCircleIcon aria-hidden="true" />
+                      </Icon>
                     </FlexItem>
                     <FlexItem>
                       <span>Readiness probe failed</span>
@@ -88,14 +91,16 @@ export const CardEventsView: React.FunctionComponent = () => {
                   connection refused
                 </DescriptionListDescription>
                 <DescriptionListDescription>
-                  <Timestamp> Jun 17, 11:02 am </Timestamp>
+                  <Timestamp date={new Date('2023-06-17T11:02')} dateFormat="medium" timeFormat="short" />
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
-                      <CheckCircleIcon aria-hidden="true" />
+                      <Icon status="success">
+                        <CheckCircleIcon aria-hidden="true" />
+                      </Icon>
                     </FlexItem>
                     <FlexItem>
                       <span>Successful assignment</span>
@@ -106,7 +111,7 @@ export const CardEventsView: React.FunctionComponent = () => {
                   Successfully assigned default/example to ip-10-0-130-149.ec2.internal
                 </DescriptionListDescription>
                 <DescriptionListDescription>
-                  <Timestamp> Jun 17, 11:13 am </Timestamp>
+                  <Timestamp date={new Date('2023-06-17T11:13')} dateFormat="medium" timeFormat="short" />
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
@@ -122,14 +127,16 @@ export const CardEventsView: React.FunctionComponent = () => {
                 </DescriptionListTerm>
                 <DescriptionListDescription>Pulling image "openshift/hello-openshift"</DescriptionListDescription>
                 <DescriptionListDescription>
-                  <Timestamp> Jun 17, 10:59 am </Timestamp>
+                  <Timestamp date={new Date('2023-06-17T10:59')} dateFormat="medium" timeFormat="short" />
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
-                      <CheckCircleIcon aria-hidden="true" />
+                      <Icon status="success">
+                        <CheckCircleIcon aria-hidden="true" />
+                      </Icon>
                     </FlexItem>
                     <FlexItem>
                       <span>Created container</span>
@@ -138,7 +145,7 @@ export const CardEventsView: React.FunctionComponent = () => {
                 </DescriptionListTerm>
                 <DescriptionListDescription>Created container hello-openshift</DescriptionListDescription>
                 <DescriptionListDescription>
-                  <Timestamp> Jun 17, 10:45 am </Timestamp>
+                  <Timestamp date={new Date('2023-06-17T10:45')} dateFormat="medium" timeFormat="short" />
                 </DescriptionListDescription>
               </DescriptionListGroup>
             </DescriptionList>

package/src/demos/examples/Card/CardLogView.tsx

@@ -79,7 +79,7 @@ export const CardLogView: React.FunctionComponent = () => {
                   connection refused
                 </DescriptionListDescription>
                 <DescriptionListDescription>
-                  <Timestamp> Jun 17, 11:02 am </Timestamp>
+                  <Timestamp date={new Date('2023-06-17T11:02')} dateFormat="medium" timeFormat="short" />
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
@@ -88,21 +88,21 @@ export const CardLogView: React.FunctionComponent = () => {
                   Successfully assigned default/example to ip-10-0-130-149.ec2.internal
                 </DescriptionListDescription>
                 <DescriptionListDescription>
-                  <Timestamp> Jun 17, 11:13 am </Timestamp>
+                  <Timestamp date={new Date('2023-06-17T11:13')} dateFormat="medium" timeFormat="short" />
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>Pulling image</DescriptionListTerm>
                 <DescriptionListDescription>Pulling image "openshift/hello-openshift"</DescriptionListDescription>
                 <DescriptionListDescription>
-                  <Timestamp> Jun 17, 10:59 am </Timestamp>
+                  <Timestamp date={new Date('2023-06-17T10:59')} dateFormat="medium" timeFormat="short" />
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>Created container</DescriptionListTerm>
                 <DescriptionListDescription>Created container hello-openshift</DescriptionListDescription>
                 <DescriptionListDescription>
-                  <Timestamp> Jun 17, 10:45 am </Timestamp>
+                  <Timestamp date={new Date('2023-06-17T10:45')} dateFormat="medium" timeFormat="short" />
                 </DescriptionListDescription>
               </DescriptionListGroup>
             </DescriptionList>

package/src/demos/examples/Card/CardStatusTabbed.tsx

@@ -9,6 +9,7 @@ import {
   DescriptionListTerm,
   Flex,
   FlexItem,
+  Icon,
   Tab,
   TabContent,
   Tabs,
@@ -23,25 +24,41 @@ const descriptionListData = [
     status: 'Running',
     resourceName: 'Resource name that is long and can wrap',
     detail: '121 Systems',
-    icon: <CheckCircleIcon />
+    icon: (
+      <Icon status="success">
+        <CheckCircleIcon />
+      </Icon>
+    )
   },
   {
-    status: 'Ready',
+    status: 'Failed',
     resourceName: 'Resource name that is long and can wrap',
     detail: '123 Systems',
-    icon: <ExclamationCircleIcon />
+    icon: (
+      <Icon status="danger">
+        <ExclamationCircleIcon />
+      </Icon>
+    )
   },
   {
     status: 'Running',
     resourceName: 'Resource name that is long and can wrap',
     detail: '122 Systems',
-    icon: <CheckCircleIcon />
+    icon: (
+      <Icon status="success">
+        <CheckCircleIcon />
+      </Icon>
+    )
   },
   {
-    status: 'Ready',
+    status: 'Failed',
     resourceName: 'Resource name that is long and can wrap',
     detail: '124 Systems',
-    icon: <ExclamationCircleIcon />
+    icon: (
+      <Icon status="danger">
+        <ExclamationCircleIcon />
+      </Icon>
+    )
   }
 ];
 

package/src/demos/examples/Card/CardUtilizationDemo3.tsx

@@ -15,7 +15,8 @@ import {
   SelectList,
   SelectOption,
   MenuToggle,
-  MenuToggleElement
+  MenuToggleElement,
+  Icon
 } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import { Chart, ChartStack, ChartBar, ChartTooltip } from '@patternfly/react-charts';
@@ -79,7 +80,9 @@ export const CardUtilizationDemo3: React.FunctionComponent = () => {
                   <span>System</span>
                 </FlexItem>
                 <Flex>
-                  <ExclamationCircleIcon aria-hidden />
+                  <Icon status="danger">
+                    <ExclamationCircleIcon aria-hidden />
+                  </Icon>
                   <a href="#">25 incidents detected</a>
                 </Flex>
                 <FlexItem>

package/src/demos/examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx

@@ -5,10 +5,10 @@ import {
   MultipleFileUploadMain,
   MultipleFileUploadStatus,
   MultipleFileUploadStatusItem,
-  Modal,
   Checkbox,
   DropEvent
 } from '@patternfly/react-core';
+import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 interface readFile {
@@ -135,7 +135,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
             ))}
           </MultipleFileUploadStatus>
         )}
-        <Modal
+        <ModalDeprecated
           isOpen={!!modalText}
           title="Unsupported file"
           titleIconVariant="warning"
@@ -144,7 +144,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
           onClose={() => setModalText('')}
         >
           {modalText}
-        </Modal>
+        </ModalDeprecated>
       </MultipleFileUpload>
       <Checkbox
         id="horizontal-checkbox"

package/src/{next → deprecated}/components/Modal/Modal.tsx

@@ -7,29 +7,53 @@ 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 description. This should match the ModalHeader labelId or descriptorId. */
+  /** Id to use for the modal box descriptor. */
   'aria-describedby'?: string;
-  /**   Adds an accessible name to the modal when there is no title in the ModalHeader. */
+  /** Accessible descriptor of the modal. */
   'aria-label'?: string;
-  /** Id to use for the modal box label. This should include the ModalHeader labelId. */
+  /** Id to use for the modal box label. */
   '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;
-  /** Add callback for when the close button is clicked. This prop needs to be passed to render the close button */
+  /** A callback for when the close button is clicked. */
   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. */
@@ -38,6 +62,16 @@ 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. */
@@ -66,10 +100,24 @@ 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'
@@ -78,7 +126,11 @@ 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,
@@ -116,9 +168,11 @@ class Modal extends React.Component<ModalProps, ModalState> {
   componentDidMount() {
     const {
       appendTo,
-      'aria-describedby': ariaDescribedby,
+      title,
       'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledby
+      'aria-labelledby': ariaLabelledby,
+      hasNoBodyWrapper,
+      header
     } = this.props;
     const target: HTMLElement = this.getElement(appendTo);
     const container = document.createElement('div');
@@ -132,9 +186,16 @@ class Modal extends React.Component<ModalProps, ModalState> {
       target.classList.remove(css(styles.backdropOpen));
     }
 
-    if (!ariaDescribedby && !ariaLabel && !ariaLabelledby) {
+    if (this.isEmpty(title) && this.isEmpty(ariaLabel) && this.isEmpty(ariaLabelledby)) {
       // eslint-disable-next-line no-console
-      console.error('Modal: Specify at least one of: aria-describedby, aria-label, aria-labelledby.');
+      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.'
+      );
     }
   }
 
@@ -170,6 +231,11 @@ class Modal extends React.Component<ModalProps, ModalState> {
       'aria-labelledby': ariaLabelledby,
       'aria-label': ariaLabel,
       'aria-describedby': ariaDescribedby,
+      bodyAriaLabel,
+      bodyAriaRole,
+      title,
+      titleIconVariant,
+      titleLabel,
       ouiaId,
       ouiaSafe,
       position,
@@ -184,15 +250,22 @@ 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/{next → deprecated}/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. 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. */
+  /** Id to use for the modal box description. */
+  'aria-describedby': string;
+  /** Accessible descriptor of the modal. */
   '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,6 +40,7 @@ export const ModalBox: React.FunctionComponent<ModalBoxProps> = ({
   }
   return (
     <div
+      {...props}
       role="dialog"
       aria-label={ariaLabel || null}
       aria-labelledby={ariaLabelledby || null}
@@ -54,7 +55,6 @@ export const ModalBox: React.FunctionComponent<ModalBoxProps> = ({
         variant === 'medium' && styles.modifiers.md
       )}
       style={style}
-      {...props}
     >
       {children}
     </div>

package/src/{next → deprecated}/components/Modal/ModalBoxCloseButton.tsx

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

package/src/{next → deprecated}/components/Modal/ModalBoxTitle.tsx

@@ -17,29 +17,27 @@ 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. */
-  titleScreenReaderText?: string;
+  titleLabel?: string;
 }
 
 export const ModalBoxTitle: React.FunctionComponent<ModalBoxTitleProps> = ({
-  className,
+  className = '',
   id,
   title,
   titleIconVariant,
-  titleScreenReaderText,
+  titleLabel = '',
   ...props
 }: ModalBoxTitleProps) => {
   const [hasTooltip, setHasTooltip] = React.useState(false);
   const h1 = React.useRef<HTMLHeadingElement>(null);
-  const label =
-    titleScreenReaderText ||
-    (isVariantIcon(titleIconVariant) ? `${capitalize(titleIconVariant)} alert:` : titleScreenReaderText);
+  const label = titleLabel || (isVariantIcon(titleIconVariant) ? `${capitalize(titleIconVariant)} alert:` : titleLabel);
   const variantIcons = {
     success: <CheckCircleIcon />,
     danger: <ExclamationCircleIcon />,