@patternfly/react-core 5.0.0-alpha.102 → 5.0.0-alpha.104

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.102",
+  "version": "5.0.0-alpha.104",
   "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",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "782c15760f0760651a5bf195578fd07582cd877c"
+  "gitHead": "71527891f7cac3fdaa4b067d83c7af495e760f72"
 }

package/src/components/AboutModal/AboutModal.tsx

@@ -7,8 +7,6 @@ import { AboutModalBoxCloseButton } from './AboutModalBoxCloseButton';
 import { AboutModalBox } from './AboutModalBox';
 import { Modal, ModalVariant } from '../Modal';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
-// eslint-disable-next-line camelcase
-// import c_about_modal_box_BackgroundImage from '@patternfly/react-tokens/dist/esm/c_about_modal_box_BackgroundImage';
 
 export interface AboutModalProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the about modal */
@@ -48,7 +46,7 @@ export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
   onClose = (_e): any => undefined,
   productName,
   trademark,
-  // backgroundImageSrc,
+  backgroundImageSrc,
   brandImageSrc,
   brandImageAlt,
   hasNoContentContainer = false,
@@ -89,13 +87,11 @@ export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
           hasNoBodyWrapper
         >
           <AboutModalBox
-            // style={
-              /* eslint-disable camelcase */
-              // backgroundImageSrc
-              //   ? { [c_about_modal_box_BackgroundImage.name as string]: `url(${backgroundImageSrc})` }
-              //   : {}
-              /* eslint-enable camelcase */
-            // }
+             style={
+              backgroundImageSrc
+                ? { ['--pf-v5-c-about-modal-box--BackgroundImage']: `url(${backgroundImageSrc})` } as React.CSSProperties  
+                : {}
+            }
             className={css(className)}
           >
             <AboutModalBoxBrand src={brandImageSrc} alt={brandImageAlt} />

package/src/components/AboutModal/examples/AboutModal.md

@@ -20,6 +20,3 @@ import bgImg from './patternfly-orb.svg';
 ```ts file="./AboutModalComplexUserPositionedContent.tsx"
 ```
 
-### Custom background image
-```ts file="./AboutModalCustomBackgroundImage.tsx"
-```

package/src/components/AboutModal/examples/AboutModalBasic.tsx

@@ -5,7 +5,7 @@ import brandImg from './brandImg.svg';
 export const AboutModalBasic: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const toggleModal = (_event: React.MouseEvent) => {
+  const toggleModal = (_event: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
@@ -16,10 +16,11 @@ export const AboutModalBasic: React.FunctionComponent = () => {
       </Button>
       <AboutModal
         isOpen={isModalOpen}
-        onClose={(e: React.MouseEvent<Element, MouseEvent>) => toggleModal(e)}
+        onClose={(e: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => toggleModal(e)}
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"
+        backgroundImageSrc='/assets/images/pfbg-icon.svg'
         productName="Product Name"
       >
         <TextContent>

package/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx

@@ -5,7 +5,7 @@ import brandImg from './brandImg.svg';
 export const AboutModalComplexUserPositionedContent: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const toggleModal = (_event: React.MouseEvent) => {
+  const toggleModal = (_event: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
@@ -16,10 +16,11 @@ export const AboutModalComplexUserPositionedContent: React.FunctionComponent = (
       </Button>
       <AboutModal
         isOpen={isModalOpen}
-        onClose={(e: React.MouseEvent<Element, MouseEvent>) => toggleModal(e)}
+        onClose={(e: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => toggleModal(e)}
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"
+        backgroundImageSrc='/assets/images/pfbg-icon.svg'
         hasNoContentContainer={true}
         productName="Product Name"
       >

package/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx

@@ -5,7 +5,7 @@ import brandImg from './brandImg.svg';
 export const AboutModalWithoutProductName: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const toggleModal = (_event: React.MouseEvent) => {
+  const toggleModal = (_event: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
@@ -16,10 +16,11 @@ export const AboutModalWithoutProductName: React.FunctionComponent = () => {
       </Button>
       <AboutModal
         isOpen={isModalOpen}
-        onClose={(event: any) => toggleModal(event)}
+        onClose={(e: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => toggleModal(e)}
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"
+        backgroundImageSrc='/assets/images/pfbg-icon.svg'
         aria-label="No product name about modal"
       >
         <TextContent>

package/src/components/Wizard/WizardHeader.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
 import { Button } from '../Button';
-import { Title } from '../Title';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export interface WizardHeaderProps {
@@ -31,19 +30,20 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   isCloseHidden,
   closeButtonAriaLabel,
   titleId,
-  descriptionComponent: Component = 'p',
+  descriptionComponent: Component = 'div',
   descriptionId
 }: WizardHeaderProps) => (
   <div className={css(styles.wizardHeader)}>
     {!isCloseHidden && (
-      <Button variant="plain" className={css(styles.wizardClose)} aria-label={closeButtonAriaLabel} onClick={onClose}>
-        <TimesIcon aria-hidden="true" />
-      </Button>
+      <div className={css(styles.wizardClose)}>
+        <Button variant="plain" aria-label={closeButtonAriaLabel} onClick={onClose}>
+          <TimesIcon aria-hidden="true" />
+        </Button>
+      </div>
     )}
-
-    <Title headingLevel="h2" size="3xl" className={css(styles.wizardTitle)} aria-label={title} id={titleId}>
-      {title || <>&nbsp;</>}
-    </Title>
+    <div className={css(styles.wizardTitle)}>
+      <h2 className={css(styles.wizardTitleText)} id={titleId}>{title || <>&nbsp;</>}</h2>
+    </div>
 
     {description && (
       <Component className={css(styles.wizardDescription)} id={descriptionId}>

package/src/deprecated/components/Wizard/WizardHeader.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
 import { Button } from '../../../components/Button';
-import { Title } from '../../../components/Title';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export interface WizardHeaderProps {
@@ -31,18 +30,20 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   hideClose,
   closeButtonAriaLabel,
   titleId,
-  descriptionComponent: Component = 'p',
+  descriptionComponent: Component = 'div',
   descriptionId
 }: WizardHeaderProps) => (
   <div className={css(styles.wizardHeader)}>
     {!hideClose && (
-      <Button variant="plain" className={css(styles.wizardClose)} aria-label={closeButtonAriaLabel} onClick={onClose}>
-        <TimesIcon aria-hidden="true" />
-      </Button>
+      <div className={css(styles.wizardClose)}>
+        <Button variant="plain" aria-label={closeButtonAriaLabel} onClick={onClose}>
+          <TimesIcon aria-hidden="true" />
+        </Button>
+      </div>
     )}
-    <Title headingLevel="h2" size="3xl" className={css(styles.wizardTitle)} aria-label={title} id={titleId}>
-      {title || <>&nbsp;</>}
-    </Title>
+    <div className={css(styles.wizardTitle)}>
+      <h2 className={css(styles.wizardTitleText)} id={titleId}>{title || <>&nbsp;</>}</h2>
+    </div>
     {description && (
       <Component className={css(styles.wizardDescription)} id={descriptionId}>
         {description}

package/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardHeader.test.tsx.snap

@@ -5,24 +5,24 @@ exports[`WizardHeader should match snapshot (auto-generated) 1`] = `
   <div
     class="pf-v5-c-wizard__header"
   >
-    <h2
-      aria-label="string"
-      class="pf-v5-c-title pf-m-3xl pf-v5-c-wizard__title"
-      data-ouia-component-id="OUIA-Generated-Title-1"
-      data-ouia-component-type="PF4/Title"
-      data-ouia-safe="true"
-      id="string"
+    <div
+      class="pf-v5-c-wizard__title"
     >
-      string
-    </h2>
-    <p
+      <h2
+        class="pf-v5-c-wizard__title-text"
+        id="string"
+      >
+        string
+      </h2>
+    </div>
+    <div
       class="pf-v5-c-wizard__description"
       id="string"
-    />
-    <div>
-      ReactNode
+    >
+      <div>
+        ReactNode
+      </div>
     </div>
-    <p />
   </div>
 </DocumentFragment>
 `;

package/src/deprecated/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap

@@ -8,37 +8,41 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
     <div
       class="pf-v5-c-wizard__header"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Close"
-        class="pf-v5-c-button pf-m-plain pf-v5-c-wizard__close"
-        data-ouia-component-id="OUIA-Generated-Button-plain-2"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
+      <div
+        class="pf-v5-c-wizard__close"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          role="img"
-          viewBox="0 0 352 512"
+        <button
+          aria-disabled="false"
+          aria-label="Close"
+          class="pf-v5-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-2"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <path
-            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-          />
-        </svg>
-      </button>
-      <h2
-        aria-label="Wizard title"
-        class="pf-v5-c-title pf-m-3xl pf-v5-c-wizard__title"
-        data-ouia-component-id="OUIA-Generated-Title-2"
-        data-ouia-component-type="PF4/Title"
-        data-ouia-safe="true"
-        id="pf-wizard-title-1"
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 352 512"
+          >
+            <path
+              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-wizard__title"
       >
-        Wizard title
-      </h2>
+        <h2
+          class="pf-v5-c-wizard__title-text"
+          id="pf-wizard-title-1"
+        >
+          Wizard title
+        </h2>
+      </div>
       <p
         class="pf-v5-c-wizard__description"
         id="pf-wizard-description-1"
@@ -277,37 +281,41 @@ exports[`Wizard Wizard should match snapshot 1`] = `
     <div
       class="pf-v5-c-wizard__header"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Close"
-        class="pf-v5-c-button pf-m-plain pf-v5-c-wizard__close"
-        data-ouia-component-id="OUIA-Generated-Button-plain-1"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
+      <div
+        class="pf-v5-c-wizard__close"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          role="img"
-          viewBox="0 0 352 512"
+        <button
+          aria-disabled="false"
+          aria-label="Close"
+          class="pf-v5-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-1"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <path
-            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-          />
-        </svg>
-      </button>
-      <h2
-        aria-label="Wizard title"
-        class="pf-v5-c-title pf-m-3xl pf-v5-c-wizard__title"
-        data-ouia-component-id="OUIA-Generated-Title-1"
-        data-ouia-component-type="PF4/Title"
-        data-ouia-safe="true"
-        id="pf-wizard-title-0"
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 352 512"
+          >
+            <path
+              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-wizard__title"
       >
-        Wizard title
-      </h2>
+        <h2
+          class="pf-v5-c-wizard__title-text"
+          id="pf-wizard-title-0"
+        >
+          Wizard title
+        </h2>
+      </div>
       <p
         class="pf-v5-c-wizard__description"
         id="pf-wizard-description-0"

package/src/components/AboutModal/examples/AboutModalCustomBackgroundImage.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
-import brandImg from './brandImg.svg';
-import bgImg from './patternfly-orb.svg';
-
-export const AboutModalCustomBackgroundImage: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
-
-  const toggleModal = (_event: React.MouseEvent) => {
-    setIsModalOpen(!isModalOpen);
-  };
-
-  return (
-    <React.Fragment>
-      <Button variant="primary" onClick={toggleModal}>
-        Show about modal
-      </Button>
-      <AboutModal
-        isOpen={isModalOpen}
-        onClose={(event: any) => toggleModal(event)}
-        trademark="Trademark and copyright information here"
-        brandImageSrc={brandImg}
-        brandImageAlt="Patternfly Logo"
-        backgroundImageSrc={bgImg}
-        aria-label="Background image about modal"
-      >
-        <TextContent>
-          <TextList component="dl">
-            <TextListItem component="dt">CFME Version</TextListItem>
-            <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
-          </TextList>
-        </TextContent>
-      </AboutModal>
-    </React.Fragment>
-  );
-};