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

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"
     >

package/src/components/Menu/MenuItem.tsx

@@ -46,7 +46,9 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   actions?: React.ReactNode;
   /** Description of the menu item */
   description?: React.ReactNode;
-  /** Render external link icon */
+  /** Render an external link icon on focus or hover, and set the link's
+   * "target" attribute to a value of "_blank".
+   */
   isExternalLink?: boolean;
   /** Flag indicating if the option is selected */
   isSelected?: boolean;
@@ -191,7 +193,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
       if (flyoutVisible) {
         const flyoutMenu = (flyoutTarget as HTMLElement).nextElementSibling;
         const flyoutItems = Array.from(flyoutMenu.getElementsByTagName('UL')[0].children).filter(
-          el => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
+          (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
         );
         (flyoutItems[0].firstChild as HTMLElement).focus();
       } else {
@@ -232,7 +234,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   let drill: (event: React.KeyboardEvent | React.MouseEvent) => void;
   if (direction) {
     if (direction === 'down') {
-      drill = event =>
+      drill = (event) =>
         onDrillIn &&
         onDrillIn(
           event,
@@ -243,7 +245,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
           itemId
         );
     } else {
-      drill = event => onDrillOut && onDrillOut(event, parentMenu, itemId);
+      drill = (event) => onDrillOut && onDrillOut(event, parentMenu, itemId);
     }
   }
   let additionalProps = {} as any;
@@ -252,7 +254,8 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
       href: to,
       'aria-disabled': isDisabled ? true : null,
       // prevent invalid 'disabled' attribute on <a> tags
-      disabled: null
+      disabled: null,
+      target: isExternalLink ? '_blank' : null
     };
   } else if (Component === 'button') {
     additionalProps = {
@@ -317,7 +320,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
       {...props}
     >
       <GenerateId>
-        {randomId => (
+        {(randomId) => (
           <Component
             id={id}
             tabIndex={-1}
@@ -393,7 +396,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
             icon="favorites"
             isFavorited={isFavorited}
             aria-label={isFavorited ? 'starred' : 'not starred'}
-            onClick={event => onActionClick(event, itemId)}
+            onClick={(event) => onActionClick(event, itemId)}
             tabIndex={-1}
             actionId="fav"
           />

package/src/components/Menu/examples/Menu.md

@@ -67,7 +67,7 @@ To trigger an action when a specific item's action icon is selected, pass in the
 
 ### With links
 
-Use the `to` property to add a link to a `<MenuItem>` that directs users to a new page when the item is selected. Use the `isExternalLink` property when linking to external resources. This will annotate a menu item link with an external link icon when they navigate to the link or hover over it.
+Use the `to` property to add a link to a `<MenuItem>` that directs users to a new page when the item is selected. Use the `isExternalLink` property when linking to external resources. This will annotate a menu item link with an external link icon when they navigate to the link or hover over it, as well as add `target="_blank"` so that the link opens in a new tab or window.
 
 ```ts file="MenuWithLinks.tsx"
 

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/WizardNavItem.tsx

@@ -57,7 +57,8 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
   }
 
   const btnProps = {
-    disabled: isDisabled
+    disabled: isDisabled,
+    type: 'button' as const
   };
 
   const linkProps = {

package/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNavItem.test.tsx.snap

@@ -11,6 +11,7 @@ exports[`WizardNavItem should match snapshot (auto-generated) 1`] = `
       data-ouia-component-id="OUIA-Generated-WizardNavItem-1"
       data-ouia-component-type="PF4/WizardNavItem"
       data-ouia-safe="true"
+      type="button"
     />
     ReactNode
   </li>

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

@@ -111,6 +111,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                 data-ouia-component-id="OUIA-Generated-WizardNavItem-7"
                 data-ouia-component-type="PF4/WizardNavItem"
                 data-ouia-safe="true"
+                type="button"
               >
                 A
               </button>
@@ -125,6 +126,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                 data-ouia-component-id="OUIA-Generated-WizardNavItem-8"
                 data-ouia-component-type="PF4/WizardNavItem"
                 data-ouia-safe="true"
+                type="button"
               >
                 <span
                   class="pf-c-wizard__nav-link-text"
@@ -166,6 +168,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                     data-ouia-component-id="OUIA-Generated-WizardNavItem-9"
                     data-ouia-component-type="PF4/WizardNavItem"
                     data-ouia-safe="true"
+                    type="button"
                   >
                     B-1
                   </button>
@@ -179,6 +182,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                     data-ouia-component-id="OUIA-Generated-WizardNavItem-10"
                     data-ouia-component-type="PF4/WizardNavItem"
                     data-ouia-safe="true"
+                    type="button"
                   >
                     B-2
                   </button>
@@ -194,6 +198,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                 data-ouia-component-id="OUIA-Generated-WizardNavItem-11"
                 data-ouia-component-type="PF4/WizardNavItem"
                 data-ouia-safe="true"
+                type="button"
               >
                 C
               </button>
@@ -207,6 +212,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                 data-ouia-component-id="OUIA-Generated-WizardNavItem-12"
                 data-ouia-component-type="PF4/WizardNavItem"
                 data-ouia-safe="true"
+                type="button"
               >
                 D
               </button>
@@ -381,6 +387,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                 data-ouia-component-type="PF4/WizardNavItem"
                 data-ouia-safe="true"
                 id="step-A"
+                type="button"
               >
                 A
               </button>
@@ -395,6 +402,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                 data-ouia-component-type="PF4/WizardNavItem"
                 data-ouia-safe="true"
                 id="step-B"
+                type="button"
               >
                 B
               </button>
@@ -412,6 +420,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                     data-ouia-component-type="PF4/WizardNavItem"
                     data-ouia-safe="true"
                     id="step-B-1"
+                    type="button"
                   >
                     B-1
                   </button>
@@ -426,6 +435,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                     data-ouia-component-type="PF4/WizardNavItem"
                     data-ouia-safe="true"
                     id="step-B-2"
+                    type="button"
                   >
                     B-2
                   </button>
@@ -442,6 +452,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                 data-ouia-component-type="PF4/WizardNavItem"
                 data-ouia-safe="true"
                 id="step-C"
+                type="button"
               >
                 C
               </button>
@@ -456,6 +467,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                 data-ouia-component-type="PF4/WizardNavItem"
                 data-ouia-safe="true"
                 id="step-D"
+                type="button"
               >
                 D
               </button>
@@ -586,6 +598,7 @@ exports[`Wizard bare wiz 1`] = `
                 data-ouia-component-id="OUIA-Generated-WizardNavItem-13"
                 data-ouia-component-type="PF4/WizardNavItem"
                 data-ouia-safe="true"
+                type="button"
               >
                 A
               </button>

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