@patternfly/react-core 5.0.0-alpha.54 → 5.0.0-alpha.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.54",
+  "version": "5.0.0-alpha.55",
   "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",
@@ -70,5 +70,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "1032b93276f93eb89b6e02893a14223e2fdfe25d"
+  "gitHead": "21de59660d27027e268526e8fe05cc359104a32e"
 }

package/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FileUpload, Form, FormGroup } from '@patternfly/react-core';
+import { FileUpload, Form, FormGroup, FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
 
 export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');
@@ -35,12 +35,7 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
 
   return (
     <Form>
-      <FormGroup
-        fieldId="text-file-with-restrictions-example"
-        helperText="Upload a CSV file"
-        helperTextInvalid="Must be a CSV file no larger than 1 KB"
-        validated={isRejected ? 'error' : 'default'}
-      >
+      <FormGroup fieldId="text-file-with-restrictions-example">
         <FileUpload
           id="text-file-with-restrictions-example"
           type="text"
@@ -62,6 +57,13 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
           validated={isRejected ? 'error' : 'default'}
           browseButtonText="Upload"
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={isRejected ? 'error' : 'default'}>
+              {isRejected ? 'Must be a CSV file no larger than 1 KB' : 'Upload a CSV file'}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );

package/src/components/Form/FormGroup.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Form/form';
 import { ASTERISK } from '../../helpers/htmlConstants';
 import { css } from '@patternfly/react-styles';
-import { ValidatedOptions } from '../../helpers/constants';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 
 export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
@@ -18,28 +17,12 @@ export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'l
   labelIcon?: React.ReactElement;
   /** Sets the FormGroup required. */
   isRequired?: boolean;
-  /**
-   * Sets the FormGroup validated. If you set to success, text color of helper text will be modified to indicate valid state.
-   * If set to error, text color of helper text will be modified to indicate error state.
-   * If set to warning, text color of helper text will be modified to indicate warning state.
-   */
-  validated?: 'success' | 'warning' | 'error' | 'default';
   /** Sets the FormGroup isInline. */
   isInline?: boolean;
   /** Sets the FormGroupControl to be stacked */
   isStack?: boolean;
   /** Removes top spacer from label. */
   hasNoPaddingTop?: boolean;
-  /** Helper text regarding the field. It can be a simple text or an object. */
-  helperText?: React.ReactNode;
-  /** Flag to position the helper text before the field. False by default */
-  isHelperTextBeforeField?: boolean;
-  /** Helper text after the field when the field is invalid. It can be a simple text or an object. */
-  helperTextInvalid?: React.ReactNode;
-  /** Icon displayed to the left of the helper text. */
-  helperTextIcon?: React.ReactNode;
-  /** Icon displayed to the left of the helper text when the field is invalid. */
-  helperTextInvalidIcon?: React.ReactNode;
   /** ID of an individual field or a group of multiple fields. Required when a role of "group" or "radiogroup" is passed in.
    * If only one field is included, its ID attribute and this prop must be the same.
    */
@@ -57,53 +40,13 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
   labelInfo,
   labelIcon,
   isRequired = false,
-  validated = 'default',
   isInline = false,
   hasNoPaddingTop = false,
   isStack = false,
-  helperText,
-  isHelperTextBeforeField = false,
-  helperTextInvalid,
-  helperTextIcon,
-  helperTextInvalidIcon,
   fieldId,
   role,
   ...props
 }: FormGroupProps) => {
-  const validHelperText =
-    typeof helperText !== 'string' ? (
-      helperText
-    ) : (
-      <div
-        className={css(
-          styles.formHelperText,
-          validated === ValidatedOptions.success && styles.modifiers.success,
-          validated === ValidatedOptions.warning && styles.modifiers.warning
-        )}
-        id={`${fieldId}-helper`}
-        aria-live="polite"
-      >
-        {helperTextIcon && <span className={css(styles.formHelperTextIcon)}>{helperTextIcon}</span>}
-        {helperText}
-      </div>
-    );
-
-  const inValidHelperText =
-    typeof helperTextInvalid !== 'string' ? (
-      helperTextInvalid
-    ) : (
-      <div className={css(styles.formHelperText, styles.modifiers.error)} id={`${fieldId}-helper`} aria-live="polite">
-        {helperTextInvalidIcon && <span className={css(styles.formHelperTextIcon)}>{helperTextInvalidIcon}</span>}
-        {helperTextInvalid}
-      </div>
-    );
-
-  const showValidHelperTxt = (validationType: 'success' | 'warning' | 'error' | 'default') =>
-    validationType !== ValidatedOptions.error && helperText ? validHelperText : '';
-
-  const helperTextToDisplay =
-    validated === ValidatedOptions.error && helperTextInvalid ? inValidHelperText : showValidHelperTxt(validated);
-
   const isGroupOrRadioGroup = role === 'group' || role === 'radiogroup';
   const LabelComponent = isGroupOrRadioGroup ? 'span' : 'label';
 
@@ -124,7 +67,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
 
   return (
     <GenerateId>
-      {randomId => (
+      {(randomId) => (
         <div
           className={css(styles.formGroup, className)}
           {...(role && { role })}
@@ -156,9 +99,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
               isStack && styles.modifiers.stack
             )}
           >
-            {isHelperTextBeforeField && helperTextToDisplay}
             {children}
-            {!isHelperTextBeforeField && helperTextToDisplay}
           </div>
         </div>
       )}

package/src/components/Form/FormHelperText.tsx

@@ -3,43 +3,19 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Form/form';
 
 export interface FormHelperTextProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the Helper Text Item */
+  /** Content rendered inside the helper text wrapper */
   children?: React.ReactNode;
-  /** Adds error styling to the Helper Text  * */
-  isError?: boolean;
-  /** Hides the helper text * */
-  isHidden?: boolean;
-  /** Additional classes added to the Helper Text Item  */
+  /** Additional classes added to the helper text wrapper  */
   className?: string;
-  /** Icon displayed to the left of the helper text. */
-  icon?: React.ReactNode;
-  /** Component type of the form helper text */
-  component?: 'p' | 'div';
 }
 
 export const FormHelperText: React.FunctionComponent<FormHelperTextProps> = ({
   children = null,
-  isError = false,
-  isHidden = true,
   className = '',
-  icon = null,
-  component = 'p',
   ...props
-}: FormHelperTextProps) => {
-  const Component = component as any;
-  return (
-    <Component
-      className={css(
-        styles.formHelperText,
-        isError && styles.modifiers.error,
-        isHidden && styles.modifiers.hidden,
-        className
-      )}
-      {...props}
-    >
-      {icon && <span className={css(styles.formHelperTextIcon)}>{icon}</span>}
-      {children}
-    </Component>
-  );
-};
+}: FormHelperTextProps) => (
+  <div className={css(styles.formHelperText, className)} {...props}>
+    {children}
+  </div>
+);
 FormHelperText.displayName = 'FormHelperText';

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

@@ -12,7 +12,7 @@ describe('FormGroup', () => {
 
   test('should render default form group variant', () => {
     const { asFragment } = render(
-      <FormGroup label="label" fieldId="label-id" helperText="this is helper text">
+      <FormGroup label="label" fieldId="label-id">
         <input id="label-id" />
       </FormGroup>
     );
@@ -21,7 +21,7 @@ describe('FormGroup', () => {
 
   test('should render inline form group variant', () => {
     render(
-      <FormGroup isInline label="label" fieldId="label-id" helperText="this is helper text">
+      <FormGroup isInline label="label" fieldId="label-id">
         <input id="label-id" />
       </FormGroup>
     );
@@ -30,13 +30,7 @@ describe('FormGroup', () => {
 
   test('should render no padding-top form group variant', () => {
     render(
-      <FormGroup
-        hasNoPaddingTop
-        label="label"
-        fieldId="label-id"
-        helperText="this is helper text"
-        data-testid="form-group-test-id"
-      >
+      <FormGroup hasNoPaddingTop label="label" fieldId="label-id" data-testid="form-group-test-id">
         <input id="label-id" />
       </FormGroup>
     );
@@ -80,30 +74,10 @@ describe('FormGroup', () => {
     expect(screen.getByText('label')).toBeInTheDocument();
   });
 
-  test('should render form group variant with node helperText', () => {
-    render(
-      <FormGroup label="Label" fieldId="label-id" helperText={<h1>Header</h1>}>
-        <input id="label-id" />
-      </FormGroup>
-    );
-
-    expect(screen.getByRole('heading', { name: 'Header' })).toBeInTheDocument();
-  });
-
-  test('should render form group variant with function helperText', () => {
-    render(
-      <FormGroup label="Label" fieldId="label-id" helperText={returnFunction()}>
-        <input id="label-id" />
-      </FormGroup>
-    );
-
-    expect(screen.getByText('label')).toBeInTheDocument();
-  });
-
   test('should render horizontal form group variant', () => {
     const { asFragment } = render(
       <Form isHorizontal>
-        <FormGroup label="label" fieldId="label-id" helperText="this is helperText">
+        <FormGroup label="label" fieldId="label-id">
           <input id="label-id" />
         </FormGroup>
       </Form>
@@ -114,18 +88,7 @@ describe('FormGroup', () => {
   test('should render stacked horizontal form group variant', () => {
     const { asFragment } = render(
       <Form isHorizontal>
-        <FormGroup label="label" fieldId="label-id" isStack helperText="this is helperText">
-          <input id="label-id" />
-        </FormGroup>
-      </Form>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('should render helper text above input', () => {
-    const { asFragment } = render(
-      <Form isHorizontal>
-        <FormGroup label="label" fieldId="label-id" helperText="this is helperText" isHelperTextBeforeField>
+        <FormGroup label="label" fieldId="label-id" isStack>
           <input id="label-id" />
         </FormGroup>
       </Form>
@@ -142,58 +105,6 @@ describe('FormGroup', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('should render form group invalid variant', () => {
-    const { asFragment } = render(
-      <FormGroup label="label" fieldId="label-id" validated={'error'} helperTextInvalid="Invalid FormGroup">
-        <input id="id" />
-      </FormGroup>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('should render form group validated success variant', () => {
-    const { asFragment } = render(
-      <FormGroup
-        label="label"
-        fieldId="label-id"
-        validated={ValidatedOptions.success}
-        helperText="Validated FormGroup"
-        data-testid="form-group-test-id"
-      >
-        <input id="id" />
-      </FormGroup>
-    );
-
-    expect(screen.getByTestId('form-group-test-id').querySelector('input + div')).toHaveClass('pf-m-success');
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('should render form group validated error variant', () => {
-    const { asFragment } = render(
-      <FormGroup label="label" fieldId="label-id" validated={ValidatedOptions.error} helperText="Validated FormGroup">
-        <input id="id" />
-      </FormGroup>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('should render form group validated warning variant', () => {
-    const { asFragment } = render(
-      <FormGroup
-        label="label"
-        fieldId="label-id"
-        validated={ValidatedOptions.warning}
-        helperText="Validated FormGroup"
-        data-testid="form-group-test-id"
-      >
-        <input id="id" />
-      </FormGroup>
-    );
-
-    expect(screen.getByTestId('form-group-test-id').querySelector('input + div')).toHaveClass('pf-m-warning');
-    expect(asFragment()).toMatchSnapshot();
-  });
-
   test('should render correctly when label is not a string with Children = Array', () => {
     const { asFragment } = render(
       <FormGroup fieldId="id" label={returnFunction()}>
@@ -245,7 +156,7 @@ describe('FormGroup', () => {
       const inputs = screen.getAllByRole('textbox');
 
       await user.click(labelElement);
-      inputs.forEach(input => {
+      inputs.forEach((input) => {
         expect(input).not.toHaveFocus();
       });
     });

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

@@ -7,20 +7,7 @@ import { FormHelperText } from '../FormHelperText';
 
 describe('FormHelperText', () => {
   test('renders with PatternFly Core styles', () => {
-    const { asFragment } = render(
-      <FormHelperText isError isHidden={false}>
-        test
-      </FormHelperText>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('renders with icon', () => {
-    const { asFragment } = render(
-      <FormHelperText isError isHidden={false} icon={<ExclamationCircleIcon />}>
-        test
-      </FormHelperText>
-    );
+    const { asFragment } = render(<FormHelperText>test</FormHelperText>);
     expect(asFragment()).toMatchSnapshot();
   });
 

package/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap

@@ -63,160 +63,6 @@ exports[`FormGroup should render default form group variant 1`] = `
       <input
         id="label-id"
       />
-      <div
-        aria-live="polite"
-        class="pf-c-form__helper-text"
-        id="label-id-helper"
-      >
-        this is helper text
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`FormGroup should render form group invalid variant 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-form__group"
-  >
-    <div
-      class="pf-c-form__group-label"
-    >
-      <label
-        class="pf-c-form__label"
-        for="label-id"
-      >
-        <span
-          class="pf-c-form__label-text"
-        >
-          label
-        </span>
-      </label>
-       
-    </div>
-    <div
-      class="pf-c-form__group-control"
-    >
-      <input
-        id="id"
-      />
-      <div
-        aria-live="polite"
-        class="pf-c-form__helper-text pf-m-error"
-        id="label-id-helper"
-      >
-        Invalid FormGroup
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`FormGroup should render form group validated error variant 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-form__group"
-  >
-    <div
-      class="pf-c-form__group-label"
-    >
-      <label
-        class="pf-c-form__label"
-        for="label-id"
-      >
-        <span
-          class="pf-c-form__label-text"
-        >
-          label
-        </span>
-      </label>
-       
-    </div>
-    <div
-      class="pf-c-form__group-control"
-    >
-      <input
-        id="id"
-      />
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`FormGroup should render form group validated success variant 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-form__group"
-    data-testid="form-group-test-id"
-  >
-    <div
-      class="pf-c-form__group-label"
-    >
-      <label
-        class="pf-c-form__label"
-        for="label-id"
-      >
-        <span
-          class="pf-c-form__label-text"
-        >
-          label
-        </span>
-      </label>
-       
-    </div>
-    <div
-      class="pf-c-form__group-control"
-    >
-      <input
-        id="id"
-      />
-      <div
-        aria-live="polite"
-        class="pf-c-form__helper-text pf-m-success"
-        id="label-id-helper"
-      >
-        Validated FormGroup
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`FormGroup should render form group validated warning variant 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-form__group"
-    data-testid="form-group-test-id"
-  >
-    <div
-      class="pf-c-form__group-label"
-    >
-      <label
-        class="pf-c-form__label"
-        for="label-id"
-      >
-        <span
-          class="pf-c-form__label-text"
-        >
-          label
-        </span>
-      </label>
-       
-    </div>
-    <div
-      class="pf-c-form__group-control"
-    >
-      <input
-        id="id"
-      />
-      <div
-        aria-live="polite"
-        class="pf-c-form__helper-text pf-m-warning"
-        id="label-id-helper"
-      >
-        Validated FormGroup
-      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -350,49 +196,6 @@ exports[`FormGroup should render form group with additonal label info 1`] = `
 </DocumentFragment>
 `;
 
-exports[`FormGroup should render helper text above input 1`] = `
-<DocumentFragment>
-  <form
-    class="pf-c-form pf-m-horizontal"
-    novalidate=""
-  >
-    <div
-      class="pf-c-form__group"
-    >
-      <div
-        class="pf-c-form__group-label"
-      >
-        <label
-          class="pf-c-form__label"
-          for="label-id"
-        >
-          <span
-            class="pf-c-form__label-text"
-          >
-            label
-          </span>
-        </label>
-         
-      </div>
-      <div
-        class="pf-c-form__group-control"
-      >
-        <div
-          aria-live="polite"
-          class="pf-c-form__helper-text"
-          id="label-id-helper"
-        >
-          this is helperText
-        </div>
-        <input
-          id="label-id"
-        />
-      </div>
-    </div>
-  </form>
-</DocumentFragment>
-`;
-
 exports[`FormGroup should render horizontal form group variant 1`] = `
 <DocumentFragment>
   <form
@@ -423,13 +226,6 @@ exports[`FormGroup should render horizontal form group variant 1`] = `
         <input
           id="label-id"
         />
-        <div
-          aria-live="polite"
-          class="pf-c-form__helper-text"
-          id="label-id-helper"
-        >
-          this is helperText
-        </div>
       </div>
     </div>
   </form>
@@ -466,13 +262,6 @@ exports[`FormGroup should render stacked horizontal form group variant 1`] = `
         <input
           id="label-id"
         />
-        <div
-          aria-live="polite"
-          class="pf-c-form__helper-text"
-          id="label-id-helper"
-        >
-          this is helperText
-        </div>
       </div>
     </div>
   </form>

package/src/components/Form/__tests__/__snapshots__/FormHelperText.test.tsx.snap

@@ -2,59 +2,32 @@
 
 exports[`FormHelperText LoginFooterItem  with custom node 1`] = `
 <DocumentFragment>
-  <p
-    class="pf-c-form__helper-text pf-m-hidden"
-  />
-  <div>
-    My custom node
+  <div
+    class="pf-c-form__helper-text"
+  >
+    <div>
+      My custom node
+    </div>
   </div>
-  <p />
 </DocumentFragment>
 `;
 
 exports[`FormHelperText className is added to the root element 1`] = `
 <DocumentFragment>
-  <p
-    class="pf-c-form__helper-text pf-m-hidden extra-class"
+  <div
+    class="pf-c-form__helper-text extra-class"
   >
     test
-  </p>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`FormHelperText renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
-  <p
-    class="pf-c-form__helper-text pf-m-error"
+  <div
+    class="pf-c-form__helper-text"
   >
     test
-  </p>
-</DocumentFragment>
-`;
-
-exports[`FormHelperText renders with icon 1`] = `
-<DocumentFragment>
-  <p
-    class="pf-c-form__helper-text pf-m-error"
-  >
-    <span
-      class="pf-c-form__helper-text-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 512 512"
-        width="1em"
-      >
-        <path
-          d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-        />
-      </svg>
-    </span>
-    test
-  </p>
+  </div>
 </DocumentFragment>
 `;