@patternfly/react-core 4.223.2 → 4.223.3

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