@patternfly/react-core 4.223.2 → 4.224.1

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

@@ -0,0 +1,118 @@
+import React from 'react';
+import {
+  Form,
+  FormGroup,
+  TextInput,
+  TextArea,
+  FormSelect,
+  FormSelectOption,
+  Checkbox,
+  ActionGroup,
+  Button,
+  Radio
+} from '@patternfly/react-core';
+
+export const FormHorizontal: React.FunctionComponent = () => {
+  const [name, setName] = React.useState('');
+  const [email, setEmail] = React.useState('');
+  const [experience, setExperience] = React.useState('');
+  const [option, setOption] = React.useState('please choose');
+
+  const handleNameChange = (name: string) => {
+    setName(name);
+  };
+
+  const handleEmailChange = (email: string) => {
+    setEmail(email);
+  };
+
+  const handleExperienceChange = (experience: string) => {
+    setExperience(experience);
+  };
+
+  const handleOptionChange = (value: string, _event: React.FormEvent<HTMLSelectElement>) => {
+    setOption(value);
+  };
+
+  const options = [
+    { value: 'select one', label: 'Select one', disabled: false },
+    { value: 'mr', label: 'Mr', disabled: false },
+    { value: 'miss', label: 'Miss', disabled: false },
+    { value: 'mrs', label: 'Mrs', disabled: false },
+    { value: 'ms', label: 'Ms', disabled: false },
+    { value: 'dr', label: 'Dr', disabled: false },
+    { value: 'other', label: 'Other', disabled: false }
+  ];
+
+  return (
+    <Form isHorizontal>
+      <FormGroup
+        label="Full name"
+        isRequired
+        fieldId="horizontal-form-name"
+        helperText="Include your middle name if you have one."
+      >
+        <TextInput
+          value={name}
+          isRequired
+          type="text"
+          id="horizontal-form-name"
+          aria-describedby="horizontal-form-name-helper"
+          name="horizontal-form-name"
+          onChange={handleNameChange}
+        />
+      </FormGroup>
+      <FormGroup label="Email" isRequired fieldId="horizontal-form-email">
+        <TextInput
+          value={email}
+          isRequired
+          type="email"
+          id="horizontal-form-email"
+          name="horizontal-form-email"
+          onChange={handleEmailChange}
+        />
+      </FormGroup>
+      <FormGroup label="Your title" fieldId="horizontal-form-title">
+        <FormSelect
+          value={option}
+          onChange={handleOptionChange}
+          id="horizontal-form-title"
+          name="horizontal-form-title"
+          aria-label="Your title"
+        >
+          {options.map((option, index) => (
+            <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
+          ))}
+        </FormSelect>
+      </FormGroup>
+      <FormGroup label="Your experience" fieldId="horizontal-form-exp">
+        <TextArea
+          value={experience}
+          onChange={handleExperienceChange}
+          id="horizontal-form-exp"
+          name="horizontal-form-exp"
+        />
+      </FormGroup>
+      <FormGroup
+        label="How can we contact you?"
+        isStack
+        fieldId="horizontal-form-checkbox-group"
+        hasNoPaddingTop
+        role="group"
+      >
+        <Checkbox label="Email" id="alt-form-checkbox-1" name="alt-form-checkbox-1" />
+        <Checkbox label="Phone" id="alt-form-checkbox-2" name="alt-form-checkbox-2" />
+        <Checkbox label="Mail" id="alt-form-checkbox-3" name="alt-form-checkbox-3" />
+      </FormGroup>
+      <FormGroup role="radiogroup" isStack fieldId="horizontal-form-radio-group" hasNoPaddingTop label="Time zone">
+        <Radio name="horizontal-inline-radio" label="Eastern" id="horizontal-inline-radio-01" />
+        <Radio name="horizontal-inline-radio" label="Central" id="horizontal-inline-radio-02" />
+        <Radio name="horizontal-inline-radio" label="Pacific" id="horizontal-inline-radio-03" />
+      </FormGroup>
+      <ActionGroup>
+        <Button variant="primary">Submit</Button>
+        <Button variant="link">Cancel</Button>
+      </ActionGroup>
+    </Form>
+  );
+};

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Form, FormGroup, Checkbox } 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>
+  );
+};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Form, FormGroup, Checkbox } from '@patternfly/react-core';
+
+export const FormHorizontalStacked: React.FunctionComponent = () => (
+  <Form isHorizontal>
+    <FormGroup role="group" label="Label" hasNoPaddingTop fieldId="horizontal-form-stacked-options" isStack>
+      <Checkbox label="option 1" id="option-01" />
+      <Checkbox label="option 2" id="option-02" />
+    </FormGroup>
+  </Form>
+);

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Form, FormGroup, TextInput, FormHelperText } from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+
+export const FormInvalid: React.FunctionComponent = () => {
+  type validate = 'success' | 'warning' | 'error' | 'default';
+
+  const [age, setAge] = React.useState('Five');
+  const [validated, setValidated] = React.useState<validate>('error');
+
+  const handleAgeChange = (age: string, _event: React.FormEvent<HTMLInputElement>) => {
+    setAge(age);
+    if (age === '') {
+      setValidated('default');
+    } else if (/^\d+$/.test(age)) {
+      setValidated('success');
+    } else {
+      setValidated('error');
+    }
+  };
+
+  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}
+      >
+        <TextInput
+          validated={validated}
+          value={age}
+          id="age-1"
+          aria-describedby="age-1-helper"
+          onChange={handleAgeChange}
+        />
+      </FormGroup>
+    </Form>
+  );
+};

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Alert, Form, FormAlert, FormGroup, TextInput, FormHelperText } from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+
+export const FormInvalidWithAlert: React.FunctionComponent = () => {
+  type validate = 'success' | 'warning' | 'error' | 'default';
+
+  const [age, setAge] = React.useState('Five');
+  const [validated, setValidated] = React.useState<validate>('error');
+
+  const handleAgeChange = (age: string, _event: React.FormEvent<HTMLInputElement>) => {
+    setAge(age);
+    if (age === '') {
+      setValidated('default');
+    } else if (/^\d+$/.test(age)) {
+      setValidated('success');
+    } else {
+      setValidated('error');
+    }
+  };
+
+  return (
+    <Form>
+      {validated === 'error' && (
+        <FormAlert>
+          <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}
+      >
+        <TextInput
+          validated={validated}
+          value={age}
+          id="age-2"
+          aria-describedby="age-2-helper"
+          onChange={handleAgeChange}
+        />
+      </FormGroup>
+    </Form>
+  );
+};

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

@@ -0,0 +1,122 @@
+import React from 'react';
+import { Form, FormGroup, TextInput, Checkbox, Popover, ActionGroup, Button, Radio } from '@patternfly/react-core';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+
+export const FormLimitWidth: React.FunctionComponent = () => {
+  const [name, setName] = React.useState('');
+  const [email, setEmail] = React.useState('');
+  const [phone, setPhone] = React.useState('');
+
+  const handleNameChange = (name: string) => {
+    setName(name);
+  };
+
+  const handleEmailChange = (email: string) => {
+    setEmail(email);
+  };
+
+  const handlePhoneChange = (phone: string) => {
+    setPhone(phone);
+  };
+
+  return (
+    <Form isWidthLimited>
+      <FormGroup
+        label="Full name"
+        labelIcon={
+          <Popover
+            headerContent={
+              <div>
+                The{' '}
+                <a href="https://schema.org/name" target="_blank" rel="noreferrer">
+                  name
+                </a>{' '}
+                of a{' '}
+                <a href="https://schema.org/Person" target="_blank" rel="noreferrer">
+                  Person
+                </a>
+              </div>
+            }
+            bodyContent={
+              <div>
+                Often composed of{' '}
+                <a href="https://schema.org/givenName" target="_blank" rel="noreferrer">
+                  givenName
+                </a>{' '}
+                and{' '}
+                <a href="https://schema.org/familyName" target="_blank" rel="noreferrer">
+                  familyName
+                </a>
+                .
+              </div>
+            }
+          >
+            <button
+              type="button"
+              aria-label="More info for name field"
+              onClick={e => e.preventDefault()}
+              aria-describedby="simple-form-name-02"
+              className="pf-c-form__group-label-help"
+            >
+              <HelpIcon noVerticalAlign />
+            </button>
+          </Popover>
+        }
+        isRequired
+        fieldId="simple-form-name-02"
+        helperText="Include your middle name if you have one."
+      >
+        <TextInput
+          isRequired
+          type="text"
+          id="simple-form-name-02"
+          name="simple-form-name-02"
+          aria-describedby="simple-form-name-02-helper"
+          value={name}
+          onChange={handleNameChange}
+        />
+      </FormGroup>
+      <FormGroup label="Email" isRequired fieldId="simple-form-email-02">
+        <TextInput
+          isRequired
+          type="email"
+          id="simple-form-email-02"
+          name="simple-form-email-02"
+          value={email}
+          onChange={handleEmailChange}
+        />
+      </FormGroup>
+      <FormGroup label="Phone number" isRequired fieldId="simple-form-number">
+        <TextInput
+          isRequired
+          type="tel"
+          placeholder="555-555-5555"
+          id="simple-form-number"
+          name="simple-form-number"
+          value={phone}
+          onChange={handlePhoneChange}
+        />
+      </FormGroup>
+      <FormGroup role="group" isInline fieldId="limit-width-form-checkbox-group" label="How can we contact you?">
+        <Checkbox label="Email" aria-label="Email" id="inlinecheck04" />
+        <Checkbox label="Phone" aria-label="Phone" id="inlinecheck05" />
+        <Checkbox label="Mail" aria-label="Mail" id="inlinecheck06" />
+      </FormGroup>
+      <FormGroup role="radiogroup" isInline fieldId="limit-width-form-radio-group" label="Time zone">
+        <Radio name="limit-width-radio" label="Eastern" id="limit-width-inline-radio-01" />
+        <Radio name="limit-width-radio" label="Central" id="limit-width-inline-radio-02" />
+        <Radio name="limit-width-radio" label="Pacific" id="limit-width-inline-radio-03" />
+      </FormGroup>
+      <FormGroup label="Additional note" fieldId="simple-form-note-02">
+        <TextInput isDisabled type="text" id="simple-form-note-02" name="simple-form-number" value="disabled" />
+      </FormGroup>
+      <FormGroup fieldId="checkbox02">
+        <Checkbox label="I'd like updates via email." id="checkbox02" name="checkbox02" aria-label="Update via email" />
+      </FormGroup>
+      <ActionGroup>
+        <Button variant="primary">Submit</Button>
+        <Button variant="link">Cancel</Button>
+      </ActionGroup>
+    </Form>
+  );
+};

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Form, FormGroup, FormSection, TextInput } from '@patternfly/react-core';
+
+export const FormSections: React.FunctionComponent = () => {
+  const [input1, setInput1] = React.useState('');
+  const [input2, setInput2] = React.useState('');
+
+  const handleInputChange1 = (input1: string, _event: React.FormEvent<HTMLInputElement>) => {
+    setInput1(input1);
+  };
+
+  const handleInputChange2 = (input2: string, _event: React.FormEvent<HTMLInputElement>) => {
+    setInput2(input2);
+  };
+
+  return (
+    <Form>
+      <FormSection>
+        <FormGroup label="Form section 1 input" isRequired fieldId="simple-form-section-1-input">
+          <TextInput
+            isRequired
+            type="text"
+            id="simple-form-section-1-input"
+            name="simple-form-section-1-input"
+            value={input1}
+            onChange={handleInputChange1}
+          />
+        </FormGroup>
+      </FormSection>
+      <FormSection title="Form section 2 (optional title)" titleElement="h2">
+        <FormGroup label="Form section 2 input" isRequired fieldId="simple-form-section-2-input">
+          <TextInput
+            isRequired
+            type="text"
+            id="simple-form-section-2-input"
+            name="simple-form-section-2-input"
+            value={input2}
+            onChange={handleInputChange2}
+          />
+        </FormGroup>
+      </FormSection>
+    </Form>
+  );
+};

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Form, FormGroup, 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');
+
+  const handleAgeChange = (age: string, _event: React.FormEvent<HTMLInputElement>) => {
+    setAge(age);
+    setValidated('default');
+    setHelperText('Validating...');
+  };
+
+  // useEffect is used to simulate a server call to validate the age 2000ms after the user has entered a value, preventing calling the server on every keystroke
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      if (/^\d+$/.test(age)) {
+        if (parseInt(age) >= 21) {
+          setValidated('success');
+          setHelperText('Enjoy your stay');
+        } else {
+          setValidated('warning');
+          setHelperText('You must be at least 21 years old to continue');
+        }
+      } else {
+        setValidated('error');
+        setInvalidText('Must be a number');
+      }
+    }, 2000);
+
+    return () => clearTimeout(timer);
+  }, [age]);
+
+  return (
+    <Form>
+      <FormGroup
+        label="Age"
+        type="number"
+        helperText={helperText}
+        helperTextInvalid={invalidText}
+        helperTextInvalidIcon={<ExclamationCircleIcon />}
+        fieldId="age-3"
+        validated={validated}
+      >
+        <TextInput
+          validated={validated}
+          value={age}
+          id="age-3"
+          aria-describedby="age-3-helper"
+          onChange={handleAgeChange}
+        />
+      </FormGroup>
+    </Form>
+  );
+};

package/src/components/Select/Select.tsx

@@ -297,39 +297,41 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       this.setState({ viewMoreNextIndex: -1 });
     }
 
-    const checkUpdatedChildren = (prevChildren: React.ReactElement[], currChildren: React.ReactElement[]) =>
-      prevChildren.some((prevChild: React.ReactElement, index: number) => {
-        const prevChildProps = prevChild.props;
-        const currChild = currChildren[index];
-        const { props: currChildProps } = currChild;
-
-        if (prevChildProps && currChildProps) {
-          return (
-            prevChildProps.value !== currChildProps.value ||
-            prevChildProps.label !== currChildProps.label ||
-            prevChildProps.isDisabled !== currChildProps.isDisabled ||
-            prevChildProps.isPlaceholder !== currChildProps.isPlaceholder
-          );
-        } else {
-          return prevChild !== currChild;
-        }
-      });
-
-    const hasUpdatedChildren =
-      prevProps.children.length !== this.props.children.length ||
-      checkUpdatedChildren(prevProps.children, this.props.children) ||
-      (this.props.isGrouped &&
-        prevProps.children.some(
-          (prevChild: React.ReactElement, index: number) =>
-            prevChild.type === SelectGroup &&
-            prevChild.props.children &&
-            this.props.children[index].props.children &&
-            (prevChild.props.children.length !== this.props.children[index].props.children.length ||
-              checkUpdatedChildren(prevChild.props.children, this.props.children[index].props.children))
-        ));
-
-    if (hasUpdatedChildren) {
-      this.updateTypeAheadFilteredChildren(prevState.typeaheadInputValue || '', null);
+    if (this.props.variant === 'typeahead' || this.props.variant === 'typeaheadmulti') {
+      const checkUpdatedChildren = (prevChildren: React.ReactElement[], currChildren: React.ReactElement[]) =>
+        Array.from(prevChildren).some((prevChild: React.ReactElement, index: number) => {
+          const prevChildProps = prevChild.props;
+          const currChild = currChildren[index];
+          const { props: currChildProps } = currChild;
+
+          if (prevChildProps && currChildProps) {
+            return (
+              prevChildProps.value !== currChildProps.value ||
+              prevChildProps.label !== currChildProps.label ||
+              prevChildProps.isDisabled !== currChildProps.isDisabled ||
+              prevChildProps.isPlaceholder !== currChildProps.isPlaceholder
+            );
+          } else {
+            return prevChild !== currChild;
+          }
+        });
+
+      const hasUpdatedChildren =
+        prevProps.children.length !== this.props.children.length ||
+        checkUpdatedChildren(prevProps.children, this.props.children) ||
+        (this.props.isGrouped &&
+          Array.from(prevProps.children).some(
+            (prevChild: React.ReactElement, index: number) =>
+              prevChild.type === SelectGroup &&
+              prevChild.props.children &&
+              this.props.children[index].props.children &&
+              (prevChild.props.children.length !== this.props.children[index].props.children.length ||
+                checkUpdatedChildren(prevChild.props.children, this.props.children[index].props.children))
+          ));
+
+      if (hasUpdatedChildren) {
+        this.updateTypeAheadFilteredChildren(prevState.typeaheadInputValue || '', null);
+      }
     }
 
     // for menus with favorites,

package/src/components/Wizard/Wizard.tsx

@@ -18,6 +18,10 @@ export interface WizardStep {
   name: React.ReactNode;
   /** The component to render in the main body */
   component?: any;
+  /** @beta The content to render in the drawer panel (use when hasDrawer prop is set on the wizard).   */
+  drawerPanelContent?: any;
+  /** @beta Custom drawer toggle button that opens the drawer. */
+  drawerToggleButton?: React.ReactNode;
   /** Setting to true hides the side nav and footer */
   isFinishedStep?: boolean;
   /** Enables or disables the step in the navigation. Enabled by default. */
@@ -100,6 +104,10 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   isOpen?: boolean;
   /** Flag indicating nav items with sub steps are expandable */
   isNavExpandable?: boolean;
+  /** @beta Flag indicating the wizard has a drawer for at least one of the wizard steps */
+  hasDrawer?: boolean;
+  /** @beta Flag indicating the wizard drawer is expanded */
+  isDrawerExpanded?: boolean;
 }
 
 interface WizardState {
@@ -135,10 +143,13 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
     onClose: () => undefined as any,
     appendTo: null as HTMLElement,
     isOpen: undefined,
-    isNavExpandable: false
+    isNavExpandable: false,
+    hasDrawer: false,
+    isDrawerExpanded: false
   };
   private titleId: string;
   private descriptionId: string;
+  private drawerRef: React.RefObject<any>;
 
   constructor(props: WizardProps) {
     super(props);
@@ -150,6 +161,8 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
       currentStep: this.props.startAtStep && Number.isInteger(this.props.startAtStep) ? this.props.startAtStep : 1,
       isNavOpen: false
     };
+
+    this.drawerRef = React.createRef();
   }
 
   private handleKeyClicks = (event: KeyboardEvent): void => {
@@ -340,6 +353,8 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
       titleId,
       descriptionId,
       isNavExpandable,
+      hasDrawer,
+      isDrawerExpanded,
       ...rest
       /* eslint-enable @typescript-eslint/no-unused-vars */
     } = this.props;
@@ -350,12 +365,14 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
     const computedSteps: WizardStep[] = this.initSteps(steps);
     const firstStep = activeStep === flattenedSteps[0];
     const isValid = activeStep && activeStep.enableNext !== undefined ? activeStep.enableNext : true;
+
     const nav = (isWizardNavOpen: boolean) => {
       const wizNavAProps = {
         isOpen: isWizardNavOpen,
         'aria-label': navAriaLabel,
         'aria-labelledby': (title || navAriaLabelledBy) && (navAriaLabelledBy || this.titleId)
       };
+
       return (
         <WizardNav {...wizNavAProps}>
           {computedSteps.map((step, index) => {
@@ -466,6 +483,8 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
             />
           )}
           <WizardToggle
+            hasDrawer={hasDrawer}
+            isDrawerExpanded={isDrawerExpanded}
             mainAriaLabel={mainAriaLabel}
             isInPage={isOpen === undefined}
             mainAriaLabelledBy={(title || mainAriaLabelledBy) && (mainAriaLabelledBy || this.titleId)}
@@ -509,6 +528,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
         </Modal>
       );
     }
+
     return wizard;
   }
 }