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

package/src/components/TextArea/examples/TextAreaValidated.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { Form, FormGroup, TextArea } from '@patternfly/react-core';
+import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextArea } from '@patternfly/react-core';
 
 export const TextAreaValidated: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');
-  const [invalidText, setInvalidText] = React.useState('You must have something to say');
   const [validated, setValidated] = React.useState<'default' | 'error' | 'warning' | 'success' | undefined>('default');
   const [helperText, setHelperText] = React.useState('Share your thoughts.');
   const simulateNetworkCall = (callback: Function) => {
@@ -21,7 +20,7 @@ export const TextAreaValidated: React.FunctionComponent = () => {
           setHelperText('Thanks for your comments!');
         } else {
           setValidated('error');
-          setInvalidText("You're being too brief, please enter at least 10 characters.");
+          setHelperText("You're being too brief, please enter at least 10 characters.");
         }
       } else {
         setValidated('warning');
@@ -31,21 +30,19 @@ export const TextAreaValidated: React.FunctionComponent = () => {
   };
   return (
     <Form>
-      <FormGroup
-        label="Comments:"
-        type="string"
-        helperText={helperText}
-        helperTextInvalid={invalidText}
-        fieldId="selection"
-        validated={validated}
-      >
+      <FormGroup label="Comments:" type="string" fieldId="selection">
         <TextArea
           value={value}
-          onChange={value => handleTextAreaChange(value)}
+          onChange={(value) => handleTextAreaChange(value)}
           isRequired
           validated={validated}
           aria-label="invalid text area example"
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={validated}>{helperText}</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );

package/src/components/Wizard/examples/WizardEnabledOnFormValidation.tsx

@@ -1,5 +1,14 @@
 import React from 'react';
-import { Form, FormGroup, TextInput, Wizard, WizardStep } from '@patternfly/react-core';
+import {
+  Form,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  TextInput,
+  Wizard,
+  WizardStep
+} from '@patternfly/react-core';
 interface PrevStepInfo {
   prevId?: string | number;
   prevName: React.ReactNode;
@@ -26,14 +35,7 @@ const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormP
 
   return (
     <Form>
-      <FormGroup
-        label="Age:"
-        type="number"
-        helperText="Write your age in numbers."
-        helperTextInvalid="Age has to be a number"
-        fieldId="age"
-        validated={validated}
-      >
+      <FormGroup label="Age:" type="number" fieldId="age">
         <TextInput
           validated={validated}
           value={value}
@@ -41,6 +43,13 @@ const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormP
           aria-describedby="age-helper"
           onChange={handleTextInputChange}
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={validated}>
+              {validated === 'error' ? 'Age has to be a number' : 'Write your age in numbers.'}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );

package/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx

@@ -14,7 +14,10 @@ import {
   WizardFooter,
   WizardContextConsumer,
   Alert,
-  EmptyStateIcon
+  EmptyStateIcon,
+  HelperText,
+  HelperTextItem,
+  FormHelperText
 } from '@patternfly/react-core';
 // eslint-disable-next-line patternfly-react/import-tokens-icons
 import { CogsIcon } from '@patternfly/react-icons';
@@ -94,14 +97,7 @@ const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormP
 
   return (
     <Form>
-      <FormGroup
-        label="Age:"
-        type="number"
-        helperText="Write your age in numbers."
-        helperTextInvalid="Age has to be a number"
-        fieldId="age"
-        validated={validated}
-      >
+      <FormGroup label="Age:" type="number" fieldId="age">
         <TextInput
           validated={validated}
           value={value}
@@ -109,6 +105,13 @@ const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormP
           aria-describedby="age-helper"
           onChange={handleTextInputChange}
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={validated}>
+              {validated === 'error' ? 'Age has to be a number' : 'Write your age in numbers.'}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );

package/src/demos/examples/HelperText/HelperTextDynamicVariantStaticText.tsx

@@ -40,7 +40,7 @@ export const HelperTextDynamicVariantDynamicText: React.FunctionComponent = () =
     setValue(inputValue);
   };
 
-  const filterValidations = () => Object.keys(inputValidation).filter(item => inputValidation[item] !== 'success');
+  const filterValidations = () => Object.keys(inputValidation).filter((item) => inputValidation[item] !== 'success');
 
   return (
     <Form>
@@ -55,7 +55,7 @@ export const HelperTextDynamicVariantDynamicText: React.FunctionComponent = () =
           aria-invalid={ruleCharacterTypes === 'error' || ruleLength === 'error'}
           value={value}
         />
-        <FormHelperText isHidden={false} component="div">
+        <FormHelperText>
           <HelperText component="ul">
             <HelperTextItem component="li" id="ruleLength" isDynamic variant={ruleLength as any}>
               Must be at least 5 characters in length

package/src/demos/examples/HelperText/HelperTextStaticVariantDynamicText.tsx

@@ -32,7 +32,7 @@ export const HelperTextStaticVariantDynamicText: React.FunctionComponent = () =>
           aria-invalid={inputValidation === 'error'}
           value={value}
         />
-        <FormHelperText isHidden={false} component="div">
+        <FormHelperText>
           <HelperText id="helper-text2" aria-live="polite">
             {inputValidation !== 'success' && (
               <HelperTextItem variant={inputValidation as any} hasIcon={inputValidation === 'error'}>

package/src/demos/examples/HelperText/HelperTextStaticVariantStaticText.tsx

@@ -19,7 +19,7 @@ export const HelperTextStaticVariantStaticText: React.FunctionComponent = () =>
           aria-describedby="helper-text1"
           value={value}
         />
-        <FormHelperText isHidden={false} component="div">
+        <FormHelperText>
           <HelperText id="helper-text1">
             <HelperTextItem variant={'default'}>Enter your middle name or your middle initial</HelperTextItem>
           </HelperText>

package/src/next/components/Wizard/examples/WizardEnabledOnFormValidation.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Form, FormGroup, TextInput } from '@patternfly/react-core';
+import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput } from '@patternfly/react-core';
 import { Wizard, WizardStep } from '@patternfly/react-core/next';
 
 interface SampleFormProps {
@@ -22,14 +22,7 @@ const SampleForm: React.FunctionComponent<SampleFormProps> = ({ value, isValid,
 
   return (
     <Form>
-      <FormGroup
-        label="Age:"
-        type="number"
-        helperText="Write your age in numbers."
-        helperTextInvalid="Age has to be a number"
-        fieldId="age"
-        validated={validated}
-      >
+      <FormGroup label="Age:" type="number" fieldId="age">
         <TextInput
           validated={validated}
           value={value}
@@ -37,6 +30,13 @@ const SampleForm: React.FunctionComponent<SampleFormProps> = ({ value, isValid,
           aria-describedby="age-helper"
           onChange={handleTextInputChange}
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={validated}>
+              {validated === 'error' ? 'Age has to be a number' : 'Write your age in numbers.'}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );

package/src/next/components/Wizard/examples/WizardValidateOnButtonPress.tsx

@@ -12,7 +12,10 @@ import {
   Progress,
   Form,
   FormGroup,
-  TextInput
+  TextInput,
+  HelperText,
+  HelperTextItem,
+  FormHelperText
 } from '@patternfly/react-core';
 import { Wizard, WizardStep, WizardFooterWrapper, useWizardContext } from '@patternfly/react-core/next';
 import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
@@ -118,14 +121,7 @@ const SampleForm: React.FunctionComponent<SampleFormProps> = ({ value, isValid,
 
   return (
     <Form>
-      <FormGroup
-        label="Age:"
-        type="number"
-        helperText="Write your age in numbers."
-        helperTextInvalid="Age has to be a number"
-        fieldId="age"
-        validated={validated}
-      >
+      <FormGroup label="Age:" type="number" fieldId="age">
         <TextInput
           validated={validated}
           value={value}
@@ -133,6 +129,13 @@ const SampleForm: React.FunctionComponent<SampleFormProps> = ({ value, isValid,
           aria-describedby="age-helper"
           onChange={handleTextInputChange}
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={validated}>
+              {validated === 'error' ? 'Age has to be a number' : 'Write your age in numbers.'}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );