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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.102",
+  "version": "5.0.0-alpha.103",
   "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": "6b1ff3ecf91538a866ee0b7b49ef733d40aef763"
 }

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/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>
-  );
-};