@patternfly/react-core 5.0.0-alpha.69 → 5.0.0-alpha.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.69",
+  "version": "5.0.0-alpha.70",
   "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",
@@ -41,7 +41,7 @@
   "scripts": {
     "build:umd": "rollup -c --environment IS_PRODUCTION",
     "build:single:packages": "node ../../scripts/build-single-packages.js --config single-packages.config.json",
-    "clean": "rimraf dist",
+    "clean": "rimraf dist components layouts helpers next deprecated node_modules",
     "generate": "node scripts/copyStyles.js",
     "subpaths": "node scripts/createSubpaths.js"
   },
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "d6a4c242e02d38bd99910318571cda3adbfb1d9c"
+  "gitHead": "753176875ba927d0dabff46ea1f50bf7fab13698"
 }

package/src/components/AboutModal/AboutModal.tsx

@@ -2,12 +2,13 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import { AboutModalBoxContent } from './AboutModalBoxContent';
 import { AboutModalBoxHeader } from './AboutModalBoxHeader';
-import { AboutModalBoxHero } from './AboutModalBoxHero';
 import { AboutModalBoxBrand } from './AboutModalBoxBrand';
 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 */
@@ -26,7 +27,7 @@ export interface AboutModalProps extends React.HTMLProps<HTMLDivElement> {
   brandImageSrc: string;
   /** The alternate text of the brand image  */
   brandImageAlt: string;
-  /** The URL of the image for the background  */
+  /** The URL or file path of the image for the background  */
   backgroundImageSrc?: string;
   /** Prevents the about modal from rendering content inside a container; allows for more flexible layouts  */
   hasNoContentContainer?: boolean;
@@ -59,7 +60,10 @@ export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
 }: AboutModalProps) => {
   if (brandImageSrc && !brandImageAlt) {
     // eslint-disable-next-line no-console
-    console.error('AboutModal:', 'brandImageAlt is required when a brandImageSrc is specified, and should not be an empty string.');
+    console.error(
+      'AboutModal:',
+      'brandImageAlt is required when a brandImageSrc is specified, and should not be an empty string.'
+    );
   }
 
   if (!productName && !ariaLabel) {
@@ -72,11 +76,11 @@ export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
   }
   return (
     <GenerateId prefix="pf-about-modal-title-">
-      {ariaLabelledBy => (
+      {(ariaLabelledBy) => (
         <Modal
           isOpen={isOpen}
           variant={ModalVariant.large}
-          {...(productName && {'aria-labelledby': ariaLabelledBy})}
+          {...(productName && { 'aria-labelledby': ariaLabelledBy })}
           aria-label={ariaLabel}
           onEscapePress={onClose}
           showClose={false}
@@ -84,18 +88,22 @@ export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
           disableFocusTrap={disableFocusTrap}
           hasNoBodyWrapper
         >
-          <AboutModalBox className={css(className)}>
+          <AboutModalBox
+            style={
+              /* eslint-disable camelcase */
+              backgroundImageSrc
+                ? { [c_about_modal_box_BackgroundImage.name as string]: `url(${backgroundImageSrc})` }
+                : {}
+              /* eslint-enable camelcase */
+            }
+            className={css(className)}
+          >
             <AboutModalBoxBrand src={brandImageSrc} alt={brandImageAlt} />
             <AboutModalBoxCloseButton aria-label={closeButtonAriaLabel} onClose={onClose} />
             {productName && <AboutModalBoxHeader id={ariaLabelledBy} productName={productName} />}
-            <AboutModalBoxContent
-              trademark={trademark}
-              hasNoContentContainer={hasNoContentContainer}
-              {...props}
-            >
+            <AboutModalBoxContent trademark={trademark} hasNoContentContainer={hasNoContentContainer} {...props}>
               {children}
             </AboutModalBoxContent>
-            <AboutModalBoxHero backgroundImageSrc={backgroundImageSrc} />
           </AboutModalBox>
         </Modal>
       )}

package/src/components/BackgroundImage/BackgroundImage.tsx

@@ -1,80 +1,30 @@
 import * as React from 'react';
-// Commented imports that no longer exist. This component will be updated with issue #8452 resolution
-
-// import cssVar from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage';
-// import cssVarName2x from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage_2x';
-// import cssVarNameSm from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage_sm';
-// import cssVarNameSm2x from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage_sm_2x';
-// import cssVarNameLg from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage_lg';
-// import cssVarNameFilter from '@patternfly/react-tokens/dist/esm/c_background_image_Filter';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/BackgroundImage/background-image';
-
-export interface BackgroundImageSrcMap {
-  xs: string;
-  xs2x: string;
-  sm: string;
-  sm2x: string;
-  lg: string;
-}
-
-// const defaultFilter = (
-//   <filter>
-//     <feColorMatrix type="matrix" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
-//     <feComponentTransfer colorInterpolationFilters="sRGB" result="duotone">
-//       <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncR>
-//       <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncG>
-//       <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncB>
-//       <feFuncA type="table" tableValues="0 1"></feFuncA>
-//     </feComponentTransfer>
-//   </filter>
-// );
+// eslint-disable-next-line camelcase
+import c_background_image_BackgroundImage from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage';
 
 export interface BackgroundImageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'src'> {
-  /** Additional classes added to the background. */
+  /** Additional classes added to the background image. */
   className?: string;
-  /** Override svg filter to use */
-  filter?: React.ReactElement;
-  /** Override image styles using a string or BackgroundImageSrc */
-  src: string | BackgroundImageSrcMap;
+  /** The URL or file path of the image for the background */
+  src: string;
 }
 
-// let filterCounter = 0;
-
 export const BackgroundImage: React.FunctionComponent<BackgroundImageProps> = ({
   className,
-  // src,
-  // filter = defaultFilter,
+  src,
   ...props
-}: BackgroundImageProps) => 
-  // const getUrlValue = (size: keyof BackgroundImageSrcMap) => {
-  //   if (typeof src === 'string') {
-  //     return `url(${src})`;
-  //   } else if (typeof src === 'object') {
-  //     return `url(${src[size]})`;
-  //   }
-
-  //   return '';
-  // };
-
-  // const filterNum = React.useMemo(() => filterCounter++, []);
-  // const filterId = `patternfly-background-image-filter-overlay${filterNum}`;
-  // const style = {
-  //   [cssVar.name]: getUrlValue('xs'),
-  //   [cssVarName2x.name]: getUrlValue('xs2x'),
-  //   [cssVarNameSm.name]: getUrlValue('sm'),
-  //   [cssVarNameSm2x.name]: getUrlValue('sm2x'),
-  //   [cssVarNameLg.name]: getUrlValue('lg'),
-  // [cssVarNameFilter.name]: `url(#${filterId})`
-  // } as React.CSSProperties;
+}: BackgroundImageProps) => (
+  <div
+    className={css(styles.backgroundImage, className)}
+    /* eslint-disable camelcase */
+    style={{
+      [c_background_image_BackgroundImage.name as string]: `url(${src})`
+    }}
+    /* eslint-enable camelcase */
+    {...props}
+  ></div>
+);
 
-   (
-    // TODO: removed inline style add it  back with issue #8452 resolution. Also commented out the "React.cloneElement(filter, { id: filterId })} "
-    <div className={css(styles.backgroundImage, className)} {...props}>
-      <svg xmlns="http://www.w3.org/2000/svg" className="pf-c-background-image__filter" width="0" height="0">
-        {/* {React.cloneElement(filter, { id: filterId })} */}
-      </svg>
-    </div>
-  )
-;
 BackgroundImage.displayName = 'BackgroundImage';

package/src/components/BackgroundImage/__tests__/__snapshots__/BackgroundImage.test.tsx.snap

@@ -4,15 +4,8 @@ exports[`BackgroundImage 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-background-image"
-    src="[object Object]"
-  >
-    <svg
-      class="pf-c-background-image__filter"
-      height="0"
-      width="0"
-      xmlns="http://www.w3.org/2000/svg"
-    />
-  </div>
+    style="--pf-c-background-image--BackgroundImage: url([object Object]);"
+  />
 </DocumentFragment>
 `;
 
@@ -20,14 +13,7 @@ exports[`allows passing in a single string as the image src 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-background-image"
-    src="/assets/images/pfbg_1200.jpg"
-  >
-    <svg
-      class="pf-c-background-image__filter"
-      height="0"
-      width="0"
-      xmlns="http://www.w3.org/2000/svg"
-    />
-  </div>
+    style="--pf-c-background-image--BackgroundImage: url(/assets/images/pfbg_1200.jpg);"
+  />
 </DocumentFragment>
 `;

package/src/components/BackgroundImage/examples/BackgroundImageBasic.tsx

@@ -1,15 +1,6 @@
 import React from 'react';
 import { BackgroundImage } from '@patternfly/react-core';
 
-/**
- * Note: When using background-filter.svg, you must also include #image_overlay as the fragment identifier
- */
-const images = {
-  xs: '/assets/images/pfbg_576.jpg',
-  xs2x: '/assets/images/pfbg_576@2x.jpg',
-  sm: '/assets/images/pfbg_768.jpg',
-  sm2x: '/assets/images/pfbg_768@2x.jpg',
-  lg: '/assets/images/pfbg_1200.jpg'
-};
-
-export const BackgroundImageBasic: React.FunctionComponent = () => <BackgroundImage src={images} />;
+export const BackgroundImageBasic: React.FunctionComponent = () => (
+  <BackgroundImage src="/assets/images/pfbg-icon.svg" />
+);

package/src/components/Form/FormContext.tsx

@@ -0,0 +1,129 @@
+import React, { Dispatch, SetStateAction } from 'react';
+
+export interface FormContextProps {
+  /** Record of values for all fieldIds */
+  values: Record<string, string>;
+  /** Record of errors for all fieldIds */
+  errors: Record<string, string>;
+  /** Record of touched state for all fieldIds */
+  touched: Record<string, boolean>;
+  /** Flag to determine the overall validity. True if the record of errors is empty. */
+  isValid: boolean;
+
+  /** Get the value for a given fieldId */
+  getValue(fieldId: string): string;
+  /** Set the value for a given fieldId */
+  setValue(fieldId: string, value: string): void;
+  /** Set multiple values within the managed record of values */
+  setValues: Dispatch<SetStateAction<Record<string, string>>>;
+
+  /** Get the error message for a given fieldId */
+  getError(fieldId: string): string;
+  /** Set the error message for a given fieldId */
+  setError(fieldId: string, error: string | undefined): void;
+  /** Set multiple errors within the managed record of errors */
+  setErrors: Dispatch<SetStateAction<Record<string, string>>>;
+
+  /** Used to determine touched state for a given fieldId */
+  isTouched(fieldId: string): boolean;
+  /** Used to update the touched state for a given fieldId */
+  setTouched(fieldId: string, isTouched: boolean): void;
+
+  /** Triggers all fieldId-specific validators */
+  validate(): Record<string, string | null>;
+  /** Set a validator for a specific fieldId */
+  setValidator(fieldId: string, validate: (value: string) => string | null): void;
+}
+
+const FormContext = React.createContext({} as FormContextProps);
+
+export const FormContextConsumer = FormContext.Consumer;
+
+export interface FormContextProviderProps {
+  /** Record of initial values */
+  initialValues?: Record<string, string>;
+  /** Any react node. Can optionally use render function to return context props. */
+  children?: React.ReactNode | ((props: FormContextProps) => React.ReactNode);
+}
+
+export const FormContextProvider: React.FC<FormContextProviderProps> = ({ initialValues, children }) => {
+  const [values, setValues] = React.useState<Record<string, string>>(initialValues || {});
+  const [errors, setErrors] = React.useState<Record<string, string>>({});
+  const [validators, setValidators] = React.useState<Record<string, Function>>({});
+  const [touched, setTouched] = React.useState<Record<string, boolean>>({});
+  const isValid = Object.keys(errors)?.length === 0;
+
+  const getValue = (fieldId: string) =>
+    Object.entries(values).reduce((acc, [id, value]) => (id === fieldId ? value : acc), '');
+
+  const setValue = (fieldId: string, value: string, triggerValidation: boolean = true) => {
+    if (values[fieldId] !== value) {
+      setValues((prevValues) => ({ ...prevValues, [fieldId]: value }));
+      triggerValidation && validators[fieldId]?.(value);
+    }
+  };
+
+  const getError = (fieldId: string) =>
+    Object.entries(errors).reduce((acc, [id, error]) => (id === fieldId ? error : acc), '');
+
+  const setError = (fieldId: string, error: string) =>
+    errors[fieldId] !== error &&
+    setErrors(({ [fieldId]: _, ...prevErrors }) => ({
+      ...prevErrors,
+      ...(!!error && { [fieldId]: error })
+    }));
+
+  const isTouched = (fieldId: string) =>
+    Object.entries(touched).reduce((acc, [id, isTouched]) => (id === fieldId ? isTouched : acc), false);
+
+  const setFieldTouched = (fieldId: string, isTouched: boolean) =>
+    touched[fieldId] !== isTouched &&
+    setTouched(({ [fieldId]: _, ...prevTouched }) => ({
+      ...prevTouched,
+      ...(isTouched && { [fieldId]: isTouched })
+    }));
+
+  const setValidator = (fieldId: string, validate: (value: string) => string | null) =>
+    validators[fieldId] !== validate && setValidators((prevValidators) => ({ ...prevValidators, [fieldId]: validate }));
+
+  // Accumulate and return errors from all fields with validators.
+  const validate = () =>
+    Object.entries(validators)?.reduce((acc: Record<string, string>, [id, validateField]) => {
+      const fieldError = validateField(values[id]);
+
+      if (fieldError) {
+        acc[id] = fieldError;
+      }
+
+      return acc;
+    }, {});
+
+  return (
+    <FormContext.Provider
+      value={{
+        values,
+        errors,
+        touched,
+        isValid,
+        setValues,
+        setErrors,
+        getValue,
+        setValue,
+        getError,
+        setError,
+        validate,
+        setValidator,
+        isTouched,
+        setTouched: setFieldTouched
+      }}
+    >
+      {typeof children === 'function' ? (
+        <FormContext.Consumer>{(formContext) => children(formContext)}</FormContext.Consumer>
+      ) : (
+        children
+      )}
+    </FormContext.Provider>
+  );
+};
+
+export const useFormContext = () => React.useContext(FormContext);

package/src/components/Form/__tests__/FormContext.test.tsx

@@ -0,0 +1,238 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { FormContextConsumer, FormContextProvider } from '../FormContext';
+
+const customRender = (ui, initialValues?: Record<string, any>) => {
+  return render(<FormContextProvider initialValues={initialValues}>{ui}</FormContextProvider>);
+};
+
+test('consumers can show all values from "values" provided by "initialValues"', () => {
+  const initialValues = { fieldOneId: 'some value', fieldTwoId: 'some other value' };
+
+  customRender(
+    <FormContextConsumer>
+      {({ values }) => Object.values(values).map((value) => <span key={value}>{value}</span>)}
+    </FormContextConsumer>,
+    initialValues
+  );
+
+  Object.values(initialValues).forEach((initialValue) => expect(screen.getByText(initialValue)).toBeVisible());
+});
+
+test('consumer results in "isValid" as "true" without errors and "false" with errors', async () => {
+  const user = userEvent.setup();
+  const initialValues = { someId: 'some value' };
+  const onChange = (setValue, setError) => (event) => {
+    const { value } = event.target;
+    setValue('someId', value);
+
+    if (!value) {
+      setError('someId', 'Some error!');
+    }
+  };
+
+  customRender(
+    <FormContextConsumer>
+      {({ values, setValue, setError, isValid }) => (
+        <>
+          <input onChange={onChange(setValue, setError)} value={values.someId} />
+          {`isValid: ${isValid}`}
+        </>
+      )}
+    </FormContextConsumer>,
+    initialValues
+  );
+
+  expect(screen.getByText(/^isValid:/)).toHaveTextContent('isValid: true');
+
+  await user.clear(screen.getByRole('textbox'));
+  expect(screen.getByText(/^isValid:/)).toHaveTextContent('isValid: false');
+});
+
+test('using getValue, the consumer can show a value passed from initialValues', () => {
+  customRender(<FormContextConsumer>{({ getValue }) => <>{getValue('someId')}</>}</FormContextConsumer>, {
+    someId: 'some value'
+  });
+
+  expect(screen.getByText('some value')).toBeVisible();
+});
+
+test('sets a new value for a single field using setValue', async () => {
+  const user = userEvent.setup();
+
+  customRender(
+    <FormContextConsumer>
+      {({ getValue, setValue }) => {
+        return <input onChange={(event) => setValue('someId', event.target.value)} value={getValue('someId')} />;
+      }}
+    </FormContextConsumer>,
+    {
+      someId: 'some value'
+    }
+  );
+
+  const consumerInput = screen.getByRole('textbox');
+
+  await user.clear(consumerInput);
+  await user.type(consumerInput, 'some updated value');
+
+  expect(consumerInput).toHaveValue('some updated value');
+});
+
+test('using setValues, consumers can set multiple values at once', async () => {
+  const user = userEvent.setup();
+  const newValues = { someId: 'updated value', someNewId: 'new value' };
+
+  customRender(
+    <FormContextConsumer>
+      {({ values, setValues }) => {
+        return (
+          <>
+            <input type="checkbox" onClick={() => setValues(newValues)} />
+            {Object.entries(values).map(([fieldId, value]) => (
+              <span key={fieldId}>{`${fieldId}: ${value}`}</span>
+            ))}
+          </>
+        );
+      }}
+    </FormContextConsumer>,
+    {
+      someId: 'some value'
+    }
+  );
+
+  await user.click(screen.getByRole('checkbox'));
+  Object.entries(newValues).map(([fieldId, value]) => expect(screen.getByText(`${fieldId}: ${value}`)).toBeVisible());
+});
+
+test('using getError, the consumer returns an error', async () => {
+  const user = userEvent.setup();
+
+  customRender(
+    <FormContextConsumer>
+      {({ getError, setError }) => (
+        <>
+          <input type="checkbox" onClick={() => setError('someId', 'some error!')} />
+          {getError('someId')}
+        </>
+      )}
+    </FormContextConsumer>
+  );
+
+  await user.click(screen.getByRole('checkbox'));
+  expect(screen.getByText('some error!')).toBeVisible();
+});
+
+test('sets a new error for a single field using setError', async () => {
+  const user = userEvent.setup();
+
+  customRender(
+    <FormContextConsumer>
+      {({ errors, setError }) => {
+        return (
+          <>
+            <input type="checkbox" onClick={() => setError('someId', 'some error!')} />
+            {`Error: ${errors.someId}`}
+          </>
+        );
+      }}
+    </FormContextConsumer>
+  );
+
+  await user.click(screen.getByRole('checkbox'));
+  expect(screen.getByText(/^Error:/)).toHaveTextContent('Error: some error!');
+});
+
+test('using setErrors, consumers can set multiple errors at once', async () => {
+  const user = userEvent.setup();
+  const newErrors = { someId: 'some error!', someNewId: 'new field error!' };
+
+  customRender(
+    <FormContextConsumer>
+      {({ errors, setErrors }) => {
+        return (
+          <>
+            <input type="checkbox" onClick={() => setErrors(newErrors)} />
+            {Object.entries(errors).map(([fieldId, error]) => (
+              <span key={fieldId}>{`${fieldId}: ${error}`}</span>
+            ))}
+          </>
+        );
+      }}
+    </FormContextConsumer>,
+    {
+      someId: 'some value'
+    }
+  );
+
+  await user.click(screen.getByRole('checkbox'));
+  Object.entries(newErrors).map(([fieldId, error]) => expect(screen.getByText(`${fieldId}: ${error}`)).toBeVisible());
+});
+
+test('sets a new touched state for a single field using setTouched', async () => {
+  const user = userEvent.setup();
+
+  customRender(
+    <FormContextConsumer>
+      {({ touched, setTouched }) => {
+        return (
+          <>
+            <input type="checkbox" onClick={() => setTouched('someId', true)} />
+            {`isTouched: ${touched.someId}`}
+          </>
+        );
+      }}
+    </FormContextConsumer>
+  );
+
+  await user.click(screen.getByRole('checkbox'));
+  expect(screen.getByText(/^isTouched:/)).toHaveTextContent('isTouched: true');
+});
+
+test("can get a single field's touched state by using isTouched", async () => {
+  const user = userEvent.setup();
+
+  customRender(
+    <FormContextConsumer>
+      {({ touched, setTouched, isTouched }) => {
+        return (
+          <>
+            <input type="checkbox" onClick={() => setTouched('someId', !touched.someId)} />
+            {`isTouched: ${isTouched('someId')}`}
+          </>
+        );
+      }}
+    </FormContextConsumer>
+  );
+
+  const consumerCheckbox = screen.getByRole('checkbox');
+
+  await user.click(consumerCheckbox);
+  expect(screen.getByText(/^isTouched:/)).toHaveTextContent('isTouched: true');
+
+  await user.click(consumerCheckbox);
+  expect(screen.getByText(/^isTouched:/)).toHaveTextContent('isTouched: false');
+});
+
+test('validate returns errors set by the "setValidator" function', async () => {
+  const user = userEvent.setup();
+
+  customRender(
+    <FormContextConsumer>
+      {({ validate, setValidator }) => {
+        const errors = validate();
+
+        return (
+          <>
+            <input type="checkbox" onClick={() => setValidator('someId', (value) => (!value ? 'some error!' : null))} />
+            {`Error: ${errors.someId}`}
+          </>
+        );
+      }}
+    </FormContextConsumer>
+  );
+
+  await user.click(screen.getByRole('checkbox'));
+  expect(screen.getByText(/^Error:/)).toHaveTextContent('Error: some error!');
+});

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

@@ -14,6 +14,8 @@ propComponents:
     'FormFieldGroupExpandable',
     'FormFieldGroupHeader',
     'FormFieldGroupHeaderTitleTextObject',
+    'FormContextProps',
+    'FormContextProviderProps',
     'Button',
     'Popover'
   ]
@@ -114,3 +116,9 @@ When using helper text inside a `FormGroup`, the `HelperText` component should b
 ```ts file="./FormFieldGroups.tsx"
 
 ```
+
+### Form state
+
+```ts file="./FormState.tsx" isBeta
+
+```