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

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

@@ -15,7 +15,7 @@ propComponents:
     'FormFieldGroupHeader',
     'FormFieldGroupHeaderTitleTextObject',
     'Button',
-    'Popover',
+    'Popover'
   ]
 ---
 
@@ -41,62 +41,76 @@ import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 
 ## Examples
 
+When using helper text inside a `FormGroup`, the `HelperText` component should be wrapped with the `FormHelperText` component to provide additional spacing.
+
 ### Basic
 
 ```ts file="./FormBasic.tsx"
+
 ```
 
 ### Horizontal
 
 ```ts file="./FormHorizontal.tsx"
+
 ```
 
 ### Limit width
 
 ```ts file="./FormLimitWidth.tsx"
+
 ```
 
 ### Invalid
 
 ```ts file="./FormInvalid.tsx"
+
 ```
 
 ### Invalid with form alert
 
 ```ts file="./FormInvalidWithFormAlert.tsx"
+
 ```
 
 ### Validated
 
 ```ts file="./FormValidated.tsx"
+
 ```
 
 ### Horizontal stacked no padding top
 
 ```ts file="./FormHorizontalStacked.tsx"
+
 ```
 
 ### Horizontal stacked helper text on top
 
 ```ts file="./FormHorizontalHelper.tsx"
+
 ```
 
 ### Form group with additional label info
 
 ```ts file="./FormGroupLabelInfo.tsx"
+
 ```
 
 ### Form Sections
 
 ```ts file="./FormSections.tsx"
+
 ```
 
 ### Grid form
 
 ```ts file="./FormGrid.tsx"
+
 ```
 
 ### Field Groups
 
 ```ts file="./FormFieldGroups.tsx"
+
 ```

package/src/components/Form/examples/FormBasic.tsx

@@ -1,5 +1,17 @@
 import React from 'react';
-import { Form, FormGroup, TextInput, Checkbox, Popover, ActionGroup, Button, Radio } from '@patternfly/react-core';
+import {
+  Form,
+  FormGroup,
+  TextInput,
+  Checkbox,
+  Popover,
+  ActionGroup,
+  Button,
+  Radio,
+  HelperText,
+  HelperTextItem,
+  FormHelperText
+} from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
 export const FormBasic: React.FunctionComponent = () => {
@@ -54,7 +66,7 @@ export const FormBasic: React.FunctionComponent = () => {
             <button
               type="button"
               aria-label="More info for name field"
-              onClick={e => e.preventDefault()}
+              onClick={(e) => e.preventDefault()}
               aria-describedby="simple-form-name-01"
               className="pf-c-form__group-label-help"
             >
@@ -64,7 +76,6 @@ export const FormBasic: React.FunctionComponent = () => {
         }
         isRequired
         fieldId="simple-form-name-01"
-        helperText="Include your middle name if you have one."
       >
         <TextInput
           isRequired
@@ -75,6 +86,11 @@ export const FormBasic: React.FunctionComponent = () => {
           value={name}
           onChange={handleNameChange}
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>Include your middle name if you have one.</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
       <FormGroup label="Email" isRequired fieldId="simple-form-email-01">
         <TextInput

package/src/components/Form/examples/FormGrid.tsx

@@ -1,5 +1,14 @@
 import React from 'react';
-import { Form, FormGroup, TextInput, Grid, GridItem } from '@patternfly/react-core';
+import {
+  Form,
+  FormGroup,
+  TextInput,
+  Grid,
+  GridItem,
+  HelperText,
+  HelperTextItem,
+  FormHelperText
+} from '@patternfly/react-core';
 
 export const FormGrid: React.FunctionComponent = () => {
   const [name, setName] = React.useState('');
@@ -22,12 +31,7 @@ export const FormGrid: React.FunctionComponent = () => {
     <Form>
       <Grid hasGutter md={6}>
         <GridItem span={12}>
-          <FormGroup
-            label="Full name"
-            isRequired
-            fieldId="grid-form-name-01"
-            helperText="Include your middle name if you have one."
-          >
+          <FormGroup label="Full name" isRequired fieldId="grid-form-name-01">
             <TextInput
               isRequired
               type="text"
@@ -37,6 +41,11 @@ export const FormGrid: React.FunctionComponent = () => {
               value={name}
               onChange={handleNameChange}
             />
+            <FormHelperText>
+              <HelperText>
+                <HelperTextItem>Include your middle name if you have one.</HelperTextItem>
+              </HelperText>
+            </FormHelperText>
           </FormGroup>
         </GridItem>
         <FormGroup label="Email" isRequired fieldId="grid-form-email-01">

package/src/components/Form/examples/FormGroupLabelInfo.tsx

@@ -1,5 +1,13 @@
 import React from 'react';
-import { Form, FormGroup, TextInput, Popover } from '@patternfly/react-core';
+import {
+  Form,
+  FormGroup,
+  TextInput,
+  Popover,
+  HelperText,
+  HelperTextItem,
+  FormHelperText
+} from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
 export const FormGroupLabelInfo: React.FunctionComponent = () => {
@@ -45,7 +53,7 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => {
             <button
               type="button"
               aria-label="More info for name field"
-              onClick={e => e.preventDefault()}
+              onClick={(e) => e.preventDefault()}
               aria-describedby="form-group-label-info"
               className="pf-c-form__group-label-help"
             >
@@ -55,7 +63,6 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => {
         }
         isRequired
         fieldId="form-group-label-info"
-        helperText="Include your middle name if you have one."
       >
         <TextInput
           isRequired
@@ -66,6 +73,11 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => {
           value={name}
           onChange={handleNameChange}
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>Include your middle name if you have one.</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );

package/src/components/Form/examples/FormHorizontal.tsx

@@ -9,7 +9,10 @@ import {
   Checkbox,
   ActionGroup,
   Button,
-  Radio
+  Radio,
+  HelperText,
+  HelperTextItem,
+  FormHelperText
 } from '@patternfly/react-core';
 
 export const FormHorizontal: React.FunctionComponent = () => {
@@ -46,12 +49,7 @@ export const FormHorizontal: React.FunctionComponent = () => {
 
   return (
     <Form isHorizontal>
-      <FormGroup
-        label="Full name"
-        isRequired
-        fieldId="horizontal-form-name"
-        helperText="Include your middle name if you have one."
-      >
+      <FormGroup label="Full name" isRequired fieldId="horizontal-form-name">
         <TextInput
           value={name}
           isRequired
@@ -61,6 +59,11 @@ export const FormHorizontal: React.FunctionComponent = () => {
           name="horizontal-form-name"
           onChange={handleNameChange}
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>Include your middle name if you have one.</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
       <FormGroup label="Email" isRequired fieldId="horizontal-form-email">
         <TextInput

package/src/components/Form/examples/FormHorizontalHelper.tsx

@@ -1,23 +1,16 @@
 import React from 'react';
-import { Form, FormGroup, Checkbox } from '@patternfly/react-core';
+import { Form, FormGroup, Checkbox, HelperText, HelperTextItem, FormHelperText } from '@patternfly/react-core';
 
-export const FormHorizontalFormHelperText: React.FunctionComponent = () => {
-  const [helperText] = React.useState('Select all that apply:');
-
-  return (
-    <Form isHorizontal>
-      <FormGroup
-        label="Label"
-        helperText={helperText}
-        isHelperTextBeforeField
-        hasNoPaddingTop
-        isStack
-        fieldId="horizontal-form-helper-options"
-        role="group"
-      >
-        <Checkbox label="Option 1" id="option-03" />
-        <Checkbox label="Option 2" id="option-04" />
-      </FormGroup>
-    </Form>
-  );
-};
+export const FormHorizontalFormHelperText: React.FunctionComponent = () => (
+  <Form isHorizontal>
+    <FormGroup label="Label" hasNoPaddingTop isStack fieldId="horizontal-form-helper-options" role="group">
+      <FormHelperText>
+        <HelperText>
+          <HelperTextItem>Select all that apply:</HelperTextItem>
+        </HelperText>
+      </FormHelperText>
+      <Checkbox label="Option 1" id="option-03" />
+      <Checkbox label="Option 2" id="option-04" />
+    </FormGroup>
+  </Form>
+);

package/src/components/Form/examples/FormInvalid.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Form, FormGroup, TextInput, FormHelperText } from '@patternfly/react-core';
+import { Form, FormGroup, TextInput, HelperText, HelperTextItem, FormHelperText } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
 export const FormInvalid: React.FunctionComponent = () => {
@@ -21,19 +21,7 @@ export const FormInvalid: React.FunctionComponent = () => {
 
   return (
     <Form>
-      <FormGroup
-        label="Age"
-        type="number"
-        helperText={
-          <FormHelperText icon={<ExclamationCircleIcon />} isHidden={validated !== 'default'}>
-            Please enter your age
-          </FormHelperText>
-        }
-        helperTextInvalid="Must be a number"
-        helperTextInvalidIcon={<ExclamationCircleIcon />}
-        fieldId="age-1"
-        validated={validated}
-      >
+      <FormGroup label="Age" type="number" fieldId="age-1">
         <TextInput
           validated={validated}
           value={age}
@@ -41,6 +29,15 @@ export const FormInvalid: React.FunctionComponent = () => {
           aria-describedby="age-1-helper"
           onChange={handleAgeChange}
         />
+        {validated !== 'success' && (
+          <FormHelperText>
+            <HelperText>
+              <HelperTextItem icon={<ExclamationCircleIcon />} variant={validated}>
+                {validated === 'error' ? 'Must be a number' : 'Please enter your age'}
+              </HelperTextItem>
+            </HelperText>
+          </FormHelperText>
+        )}
       </FormGroup>
     </Form>
   );

package/src/components/Form/examples/FormInvalidWithFormAlert.tsx

@@ -1,5 +1,14 @@
 import React from 'react';
-import { Alert, Form, FormAlert, FormGroup, TextInput, FormHelperText } from '@patternfly/react-core';
+import {
+  Alert,
+  Form,
+  FormAlert,
+  FormGroup,
+  TextInput,
+  HelperText,
+  HelperTextItem,
+  FormHelperText
+} from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
 export const FormInvalidWithAlert: React.FunctionComponent = () => {
@@ -26,19 +35,7 @@ export const FormInvalidWithAlert: React.FunctionComponent = () => {
           <Alert variant="danger" title="Fill out all required fields before continuing." aria-live="polite" isInline />
         </FormAlert>
       )}
-      <FormGroup
-        label="Age"
-        type="number"
-        helperText={
-          <FormHelperText icon={<ExclamationCircleIcon />} isHidden={validated !== 'default'}>
-            Please enter your age
-          </FormHelperText>
-        }
-        helperTextInvalid="Must be a number"
-        helperTextInvalidIcon={<ExclamationCircleIcon />}
-        fieldId="age-2"
-        validated={validated}
-      >
+      <FormGroup label="Age" type="number" fieldId="age-2">
         <TextInput
           validated={validated}
           value={age}
@@ -46,6 +43,15 @@ export const FormInvalidWithAlert: React.FunctionComponent = () => {
           aria-describedby="age-2-helper"
           onChange={handleAgeChange}
         />
+        {validated !== 'success' && (
+          <FormHelperText>
+            <HelperText>
+              <HelperTextItem icon={<ExclamationCircleIcon />} variant={validated}>
+                {validated === 'error' ? 'Must be a number' : 'Please enter your age'}
+              </HelperTextItem>
+            </HelperText>
+          </FormHelperText>
+        )}
       </FormGroup>
     </Form>
   );

package/src/components/Form/examples/FormLimitWidth.tsx

@@ -1,5 +1,17 @@
 import React from 'react';
-import { Form, FormGroup, TextInput, Checkbox, Popover, ActionGroup, Button, Radio } from '@patternfly/react-core';
+import {
+  Form,
+  FormGroup,
+  TextInput,
+  Checkbox,
+  Popover,
+  ActionGroup,
+  Button,
+  Radio,
+  HelperText,
+  HelperTextItem,
+  FormHelperText
+} from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
 export const FormLimitWidth: React.FunctionComponent = () => {
@@ -54,7 +66,7 @@ export const FormLimitWidth: React.FunctionComponent = () => {
             <button
               type="button"
               aria-label="More info for name field"
-              onClick={e => e.preventDefault()}
+              onClick={(e) => e.preventDefault()}
               aria-describedby="simple-form-name-02"
               className="pf-c-form__group-label-help"
             >
@@ -64,7 +76,6 @@ export const FormLimitWidth: React.FunctionComponent = () => {
         }
         isRequired
         fieldId="simple-form-name-02"
-        helperText="Include your middle name if you have one."
       >
         <TextInput
           isRequired
@@ -75,6 +86,11 @@ export const FormLimitWidth: React.FunctionComponent = () => {
           value={name}
           onChange={handleNameChange}
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>Include your middle name if you have one.</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
       <FormGroup label="Email" isRequired fieldId="simple-form-email-02">
         <TextInput

package/src/components/Form/examples/FormValidated.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import { Form, FormGroup, TextInput } from '@patternfly/react-core';
+import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
 export const FormValidated: React.FunctionComponent = () => {
   type validate = 'success' | 'warning' | 'error' | 'default';
 
   const [age, setAge] = React.useState('Five');
-  const [invalidText, setInvalidText] = React.useState('Must be a number');
   const [validated, setValidated] = React.useState<validate>('default');
   const [helperText, setHelperText] = React.useState('Enter your age to continue');
 
@@ -29,7 +28,7 @@ export const FormValidated: React.FunctionComponent = () => {
         }
       } else {
         setValidated('error');
-        setInvalidText('Must be a number');
+        setHelperText('Must be a number');
       }
     }, 2000);
 
@@ -38,15 +37,7 @@ export const FormValidated: React.FunctionComponent = () => {
 
   return (
     <Form>
-      <FormGroup
-        label="Age"
-        type="number"
-        helperText={helperText}
-        helperTextInvalid={invalidText}
-        helperTextInvalidIcon={<ExclamationCircleIcon />}
-        fieldId="age-3"
-        validated={validated}
-      >
+      <FormGroup label="Age" type="number" fieldId="age-3">
         <TextInput
           validated={validated}
           value={age}
@@ -54,6 +45,13 @@ export const FormValidated: React.FunctionComponent = () => {
           aria-describedby="age-3-helper"
           onChange={handleAgeChange}
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={validated} {...(validated === 'error' && { icon: <ExclamationCircleIcon /> })}>
+              {helperText}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );

package/src/components/FormSelect/examples/FormSelectIconSpriteVariant.tsx

@@ -1,10 +1,18 @@
 import React from 'react';
-import { Form, FormGroup, FormSelect, FormSelectOption, ValidatedOptions } from '@patternfly/react-core';
+import {
+  Form,
+  FormGroup,
+  FormHelperText,
+  FormSelect,
+  FormSelectOption,
+  HelperText,
+  HelperTextItem,
+  ValidatedOptions
+} from '@patternfly/react-core';
 
 export const FormSelectIconSpriteVariant: React.FunctionComponent = () => {
   const [formSelectValue, setFormSelectValue] = React.useState('');
   const [validated, setValidated] = React.useState<ValidatedOptions>(ValidatedOptions.default);
-  const [invalidText, setInvalidText] = React.useState('You must choose something');
   const [helperText, setHelperText] = React.useState('');
 
   const onChange = (value: string) => {
@@ -19,7 +27,7 @@ export const FormSelectIconSpriteVariant: React.FunctionComponent = () => {
     } else {
       setFormSelectValue(value);
       setValidated(ValidatedOptions.error);
-      setInvalidText('You must chose Three (thought that was obvious)');
+      setHelperText('You must chose Three (thought that was obvious)');
     }
   };
 
@@ -32,14 +40,7 @@ export const FormSelectIconSpriteVariant: React.FunctionComponent = () => {
 
   return (
     <Form>
-      <FormGroup
-        label="Selection:"
-        type="string"
-        helperText={helperText}
-        helperTextInvalid={invalidText}
-        fieldId="selection"
-        validated={validated}
-      >
+      <FormGroup label="Selection:" type="string" fieldId="selection">
         <FormSelect
           validated={validated}
           isIconSprite
@@ -51,6 +52,11 @@ export const FormSelectIconSpriteVariant: React.FunctionComponent = () => {
             <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
           ))}
         </FormSelect>
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={validated}>{helperText}</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );

package/src/components/FormSelect/examples/FormSelectValidated.tsx

@@ -1,9 +1,17 @@
 import React from 'react';
-import { Form, FormGroup, FormSelect, FormSelectOption, ValidatedOptions } from '@patternfly/react-core';
+import {
+  Form,
+  FormGroup,
+  FormHelperText,
+  FormSelect,
+  FormSelectOption,
+  HelperText,
+  HelperTextItem,
+  ValidatedOptions
+} from '@patternfly/react-core';
 
 export const FormSelectValidated: React.FunctionComponent = () => {
   const [formValue, setFormValue] = React.useState('');
-  const [invalidText, setInvalidText] = React.useState('You must choose something');
   const [helperText, setHelperText] = React.useState('');
   const [validated, setValidated] = React.useState<ValidatedOptions>(ValidatedOptions.default);
 
@@ -24,7 +32,7 @@ export const FormSelectValidated: React.FunctionComponent = () => {
         setHelperText('You must select a value');
       } else {
         setValidated(ValidatedOptions.error);
-        setInvalidText('You must chose Three (thought that was obvious)');
+        setHelperText('You must chose Three (thought that was obvious)');
       }
     });
   };
@@ -38,14 +46,7 @@ export const FormSelectValidated: React.FunctionComponent = () => {
 
   return (
     <Form>
-      <FormGroup
-        label="Selection:"
-        type="string"
-        helperText={helperText}
-        helperTextInvalid={invalidText}
-        fieldId="selection"
-        validated={validated}
-      >
+      <FormGroup label="Selection:" type="string" fieldId="selection">
         <FormSelect
           id="selection"
           validated={validated}
@@ -63,6 +64,11 @@ export const FormSelectValidated: React.FunctionComponent = () => {
             />
           ))}
         </FormSelect>
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={validated}>{helperText}</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );

package/src/components/LoginPage/LoginForm.tsx

@@ -7,6 +7,7 @@ import { ValidatedOptions } from '../../helpers/constants';
 import { InputGroup } from '../InputGroup';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
+import { HelperText, HelperTextItem } from '../HelperText';
 
 export interface LoginFormProps extends Omit<React.HTMLProps<HTMLFormElement>, 'ref'> {
   /** Flag to indicate if the first dropdown item should not gain initial focus */
@@ -96,15 +97,16 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
 
   return (
     <Form className={className} {...props}>
-      <FormHelperText isError={!isValidUsername || !isValidPassword} isHidden={!showHelperText} icon={helperTextIcon}>
-        {helperText}
-      </FormHelperText>
-      <FormGroup
-        label={usernameLabel}
-        isRequired
-        validated={isValidUsername ? ValidatedOptions.default : ValidatedOptions.error}
-        fieldId="pf-login-username-id"
-      >
+      {showHelperText && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={!isValidUsername || !isValidPassword ? 'error' : 'default'} icon={helperTextIcon}>
+              {helperText}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
+      <FormGroup label={usernameLabel} isRequired fieldId="pf-login-username-id">
         <TextInput
           autoFocus={!noAutoFocus}
           id="pf-login-username-id"
@@ -116,12 +118,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
           onChange={onChangeUsername}
         />
       </FormGroup>
-      <FormGroup
-        label={passwordLabel}
-        isRequired
-        validated={isValidPassword ? ValidatedOptions.default : ValidatedOptions.error}
-        fieldId="pf-login-password-id"
-      >
+      <FormGroup label={passwordLabel} isRequired fieldId="pf-login-password-id">
         {isShowPasswordEnabled && (
           <InputGroup>
             {passwordInput}

package/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap

@@ -6,9 +6,6 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
     class="pf-c-form"
     novalidate=""
   >
-    <p
-      class="pf-c-form__helper-text pf-m-hidden"
-    />
     <div
       class="pf-c-form__group"
     >
@@ -150,9 +147,6 @@ exports[`LoginForm LoginForm with show password 1`] = `
     class="pf-c-form"
     novalidate=""
   >
-    <p
-      class="pf-c-form__helper-text pf-m-hidden"
-    />
     <div
       class="pf-c-form__group"
     >
@@ -294,9 +288,6 @@ exports[`LoginForm should render Login form 1`] = `
     class="pf-c-form"
     novalidate=""
   >
-    <p
-      class="pf-c-form__helper-text pf-m-hidden"
-    />
     <div
       class="pf-c-form__group"
     >