@patternfly/react-core 4.223.1 → 4.224.0

package/src/components/Form/examples/FormBasic.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 FormBasic: 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>
+      <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-01"
+              className="pf-c-form__group-label-help"
+            >
+              <HelpIcon noVerticalAlign />
+            </button>
+          </Popover>
+        }
+        isRequired
+        fieldId="simple-form-name-01"
+        helperText="Include your middle name if you have one."
+      >
+        <TextInput
+          isRequired
+          type="text"
+          id="simple-form-name-01"
+          name="simple-form-name-01"
+          aria-describedby="simple-form-name-01-helper"
+          value={name}
+          onChange={handleNameChange}
+        />
+      </FormGroup>
+      <FormGroup label="Email" isRequired fieldId="simple-form-email-01">
+        <TextInput
+          isRequired
+          type="email"
+          id="simple-form-email-01"
+          name="simple-form-email-01"
+          value={email}
+          onChange={handleEmailChange}
+        />
+      </FormGroup>
+      <FormGroup label="Phone number" isRequired fieldId="simple-form-phone-01">
+        <TextInput
+          isRequired
+          type="tel"
+          id="simple-form-phone-01"
+          name="simple-form-phone-01"
+          placeholder="555-555-5555"
+          value={phone}
+          onChange={handlePhoneChange}
+        />
+      </FormGroup>
+      <FormGroup role="group" isInline fieldId="basic-form-checkbox-group" label="How can we contact you?">
+        <Checkbox label="Email" aria-label="Email" id="inlinecheck01" />
+        <Checkbox label="Phone" aria-label="Phone" id="inlinecheck02" />
+        <Checkbox label="Mail" aria-label="Mail" id="inlinecheck03" />
+      </FormGroup>
+      <FormGroup role="radiogroup" isInline fieldId="basic-form-radio-group" label="Time zone">
+        <Radio name="basic-inline-radio" label="Eastern" id="basic-inline-radio-01" />
+        <Radio name="basic-inline-radio" label="Central" id="basic-inline-radio-02" />
+        <Radio name="basic-inline-radio" label="Pacific" id="basic-inline-radio-03" />
+      </FormGroup>
+      <FormGroup label="Additional note" fieldId="simple-form-note-01">
+        <TextInput isDisabled type="text" id="simple-form-note-01" name="simple-form-number" value="disabled" />
+      </FormGroup>
+      <FormGroup fieldId="checkbox01">
+        <Checkbox label="I'd like updates via email." id="checkbox01" name="checkbox01" aria-label="Update via email" />
+      </FormGroup>
+      <ActionGroup>
+        <Button variant="primary">Submit</Button>
+        <Button variant="link">Cancel</Button>
+      </ActionGroup>
+    </Form>
+  );
+};

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

@@ -0,0 +1,324 @@
+import React from 'react';
+import {
+  Form,
+  FormGroup,
+  FormFieldGroup,
+  FormFieldGroupExpandable,
+  FormFieldGroupHeader,
+  TextInput,
+  Button
+} from '@patternfly/react-core';
+import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
+
+export const FormFieldGroups: React.FunctionComponent = () => {
+  const initialValues = {
+    '0-label1': '',
+    '0-label2': '',
+    '1-expanded-group1-label1': '',
+    '1-expanded-group1-label2': '',
+    '1-expanded-group2-label1': '',
+    '1-expanded-group2-label2': '',
+    '1-expanded-group3-label1': '',
+    '1-expanded-group3-label2': '',
+    '1-group1-label1': '',
+    '1-group1-label2': '',
+    '2-label1': '',
+    '2-label2': '',
+    '3-label1': '',
+    '3-label2': '',
+    '3-nonexpand-group1-label1': '',
+    '3-nonexpand-group1-label2': '',
+    '3-nonexpand-group2-label1': '',
+    '3-nonexpand-group2-label2': '',
+    '4-nonexpand-label1': '',
+    '4-nonexpand-label2': '',
+    '0-label3': '',
+    '0-label4': ''
+  };
+
+  const [inputValues, setInputValues] = React.useState(initialValues);
+
+  const handleChange = (value: string, event: React.FormEvent<HTMLInputElement>) => {
+    const { name } = event.currentTarget;
+    setInputValues({ ...inputValues, [name]: value });
+  };
+
+  return (
+    <Form>
+      <FormGroup label="Label 1" isRequired fieldId="0-label1">
+        <TextInput isRequired id="0-label1" name="0-label1" value={inputValues['0-label1']} onChange={handleChange} />
+      </FormGroup>
+      <FormGroup label="Label 2" isRequired fieldId="0-label2">
+        <TextInput isRequired id="0-label2" name="0-label2" value={inputValues['0-label2']} onChange={handleChange} />
+      </FormGroup>
+      <FormFieldGroupExpandable
+        isExpanded
+        toggleAriaLabel="Details"
+        header={
+          <FormFieldGroupHeader
+            titleText={{ text: 'Field group 1', id: 'field-group1-titleText-id' }}
+            titleDescription="Field group 1 description text."
+            actions={
+              <>
+                <Button variant="link">Delete all</Button> <Button variant="secondary">Add parameter</Button>
+              </>
+            }
+          />
+        }
+      >
+        <FormFieldGroupExpandable
+          isExpanded
+          toggleAriaLabel="Details"
+          header={
+            <FormFieldGroupHeader
+              titleText={{ text: 'Nested field group 1', id: 'nested-field-group1-titleText-id' }}
+              titleDescription="Nested field group 1 description text."
+              actions={
+                <Button variant="plain" aria-label="Remove">
+                  <TrashIcon />
+                </Button>
+              }
+            />
+          }
+        >
+          <FormGroup label="Label 1" isRequired fieldId="1-expanded-group1-label1">
+            <TextInput
+              isRequired
+              id="1-expanded-group1-label1"
+              name="1-expanded-group1-label1"
+              value={inputValues['1-expanded-group1-label1']}
+              onChange={handleChange}
+            />
+          </FormGroup>
+          <FormGroup label="Label 2" isRequired fieldId="1-expanded-group1-label2">
+            <TextInput
+              isRequired
+              id="1-expanded-group1-label2"
+              name="1-expanded-group1-label2"
+              value={inputValues['1-expanded-group1-label2']}
+              onChange={handleChange}
+            />
+          </FormGroup>
+        </FormFieldGroupExpandable>
+        <FormFieldGroupExpandable
+          toggleAriaLabel="Details"
+          header={
+            <FormFieldGroupHeader
+              titleText={{ text: 'Nested field group 2', id: 'nested-field-group2-titleText-id' }}
+              actions={
+                <Button variant="plain" aria-label="Remove">
+                  <TrashIcon />
+                </Button>
+              }
+            />
+          }
+        >
+          <FormGroup label="Label 1" isRequired fieldId="1-expanded-group2-label1">
+            <TextInput
+              isRequired
+              id="1-expanded-group2-label1"
+              name="1-expanded-group2-label1"
+              value={inputValues['1-expanded-group2-label1']}
+              onChange={handleChange}
+            />
+          </FormGroup>
+          <FormGroup label="Label 2" isRequired fieldId="1-expanded-group2-label2">
+            <TextInput
+              isRequired
+              id="1-expanded-group2-label2"
+              name="1-expanded-group2-label2"
+              value={inputValues['1-expanded-group2-label2']}
+              onChange={handleChange}
+            />
+          </FormGroup>
+        </FormFieldGroupExpandable>
+        <FormFieldGroupExpandable
+          toggleAriaLabel="Details"
+          header={
+            <FormFieldGroupHeader
+              titleText={{ text: 'Nested field group 3', id: 'nested-field-group3-titleText-id' }}
+              titleDescription="Field group 3 description text."
+              actions={
+                <Button variant="plain" aria-label="Remove">
+                  <TrashIcon />
+                </Button>
+              }
+            />
+          }
+        >
+          <FormGroup label="Label 1" isRequired fieldId="1-expanded-group3-label1">
+            <TextInput
+              isRequired
+              id="1-expanded-group3-label1"
+              name="1-expanded-group3-label1"
+              value={inputValues['1-expanded-group3-label1']}
+              onChange={handleChange}
+            />
+          </FormGroup>
+          <FormGroup label="Label 2" isRequired fieldId="1-expanded-group3-label2">
+            <TextInput
+              isRequired
+              id="1-expanded-group3-label2"
+              name="1-expanded-group3-label2"
+              value={inputValues['1-expanded-group3-label2']}
+              onChange={handleChange}
+            />
+          </FormGroup>
+        </FormFieldGroupExpandable>
+        <FormGroup label="Label 1" isRequired fieldId="1-group1-label1">
+          <TextInput
+            isRequired
+            id="1-group1-label1"
+            name="1-group1-label1"
+            value={inputValues['1-group1-label1']}
+            onChange={handleChange}
+          />
+        </FormGroup>
+        <FormGroup label="Label 2" isRequired fieldId="1-group1-label2">
+          <TextInput
+            isRequired
+            id="1-group1-label2"
+            name="1-group1-label2"
+            value={inputValues['1-group1-label2']}
+            onChange={handleChange}
+          />
+        </FormGroup>
+      </FormFieldGroupExpandable>
+      <FormFieldGroupExpandable
+        toggleAriaLabel="Details"
+        header={
+          <FormFieldGroupHeader
+            titleText={{ text: 'Field group 2', id: 'field-group2-titleText-id' }}
+            titleDescription="Field group 2 description text."
+            actions={
+              <>
+                <Button variant="link">Delete all</Button> <Button variant="secondary">Add parameter</Button>
+              </>
+            }
+          />
+        }
+      >
+        <FormGroup label="Label 1" isRequired fieldId="2-label1">
+          <TextInput isRequired id="2-label1" name="2-label1" value={inputValues['2-label1']} onChange={handleChange} />
+        </FormGroup>
+        <FormGroup label="Label 2" isRequired fieldId="2-label2">
+          <TextInput isRequired id="2-label2" name="2-label2" value={inputValues['2-label2']} onChange={handleChange} />
+        </FormGroup>
+      </FormFieldGroupExpandable>
+      <FormFieldGroupExpandable
+        isExpanded
+        toggleAriaLabel="Details"
+        header={
+          <FormFieldGroupHeader
+            titleText={{ text: 'Field group 3', id: 'field-group3-titleText-id' }}
+            titleDescription="Field group 3 description text."
+          />
+        }
+      >
+        <FormGroup label="Label 1" isRequired fieldId="3-label1">
+          <TextInput isRequired id="3-label1" name="3-label1" value={inputValues['3-label1']} onChange={handleChange} />
+        </FormGroup>
+        <FormGroup label="Label 2" isRequired fieldId="3-label2">
+          <TextInput isRequired id="3-label2" name="3-label2" value={inputValues['3-label2']} onChange={handleChange} />
+        </FormGroup>
+        <FormFieldGroup
+          header={
+            <FormFieldGroupHeader
+              titleText={{
+                text: 'Nested field group 1 (non-expandable)',
+                id: 'nested-field-group1-non-expandable-titleText-id'
+              }}
+            />
+          }
+        >
+          <FormGroup label="Label 1" isRequired fieldId="3-nonexpand-group1-label1">
+            <TextInput
+              isRequired
+              id="3-nonexpand-group1-label1"
+              name="3-nonexpand-group1-label1"
+              value={inputValues['3-nonexpand-group1-label1']}
+              onChange={handleChange}
+            />
+          </FormGroup>
+          <FormGroup label="Label 2" isRequired fieldId="3-nonexpand-group1-label2">
+            <TextInput
+              isRequired
+              id="3-nonexpand-group1-label2"
+              name="3-nonexpand-group1-label2"
+              value={inputValues['3-nonexpand-group1-label2']}
+              onChange={handleChange}
+            />
+          </FormGroup>
+        </FormFieldGroup>
+        <FormFieldGroup
+          header={
+            <FormFieldGroupHeader
+              titleText={{
+                text: 'Nested field group 2 (non-expandable)',
+                id: 'nested-field-group2-non-expandable-titleText-id'
+              }}
+              titleDescription="Field group 2 description text."
+            />
+          }
+        >
+          <FormGroup label="Label 1" isRequired fieldId="3-nonexpand-group2-label1">
+            <TextInput
+              isRequired
+              id="3-nonexpand-group2-label1"
+              name="3-nonexpand-group2-label1"
+              value={inputValues['3-nonexpand-group2-label1']}
+              onChange={handleChange}
+            />
+          </FormGroup>
+          <FormGroup label="Label 2" isRequired fieldId="3-nonexpand-group2-label2">
+            <TextInput
+              isRequired
+              id="3-nonexpand-group2-label2"
+              name="3-nonexpand-group2-label2"
+              value={inputValues['3-nonexpand-group2-label2']}
+              onChange={handleChange}
+            />
+          </FormGroup>
+        </FormFieldGroup>
+      </FormFieldGroupExpandable>
+      <FormFieldGroup
+        header={
+          <FormFieldGroupHeader
+            titleText={{ text: 'Field group 4 (non-expandable)', id: 'field-group4-non-expandable-titleText-id' }}
+            titleDescription="Field group 4 description text."
+            actions={
+              <>
+                <Button variant="link">Delete all</Button> <Button variant="secondary">Add parameter</Button>
+              </>
+            }
+          />
+        }
+      >
+        <FormGroup label="Label 1" isRequired fieldId="4-nonexpand-label1">
+          <TextInput
+            isRequired
+            id="4-nonexpand-label1"
+            name="4-nonexpand-label1"
+            value={inputValues['4-nonexpand-label1']}
+            onChange={handleChange}
+          />
+        </FormGroup>
+        <FormGroup label="Label 2" isRequired fieldId="4-nonexpand-label2">
+          <TextInput
+            isRequired
+            id="4-nonexpand-label2"
+            name="4-nonexpand-label2"
+            value={inputValues['4-nonexpand-label2']}
+            onChange={handleChange}
+          />
+        </FormGroup>
+      </FormFieldGroup>
+      <FormGroup label="Label 3" isRequired fieldId="0-label3">
+        <TextInput isRequired id="0-label3" name="0-label3" value={inputValues['0-label3']} onChange={handleChange} />
+      </FormGroup>
+      <FormGroup label="Label 4" isRequired fieldId="0-label4">
+        <TextInput isRequired id="0-label4" name="0-label4" value={inputValues['0-label4']} onChange={handleChange} />
+      </FormGroup>
+    </Form>
+  );
+};

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Form, FormGroup, TextInput, Grid, GridItem } from '@patternfly/react-core';
+
+export const FormGrid: 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>
+      <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."
+          >
+            <TextInput
+              isRequired
+              type="text"
+              id="grid-form-name-01"
+              name="grid-form-name-01"
+              aria-describedby="grid-form-name-01-helper"
+              value={name}
+              onChange={handleNameChange}
+            />
+          </FormGroup>
+        </GridItem>
+        <FormGroup label="Email" isRequired fieldId="grid-form-email-01">
+          <TextInput
+            isRequired
+            type="email"
+            id="grid-form-email-01"
+            name="grid-form-email-01"
+            value={email}
+            onChange={handleEmailChange}
+          />
+        </FormGroup>
+        <FormGroup label="Phone number" isRequired fieldId="grid-form-number-01">
+          <TextInput
+            isRequired
+            type="tel"
+            id="grid-form-number-01"
+            placeholder="555-555-5555"
+            name="grid-form-number-01"
+            value={phone}
+            onChange={handlePhoneChange}
+          />
+        </FormGroup>
+      </Grid>
+    </Form>
+  );
+};

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Form, FormGroup, TextInput, Popover } from '@patternfly/react-core';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+
+export const FormGroupLabelInfo: React.FunctionComponent = () => {
+  const [name, setName] = React.useState('');
+
+  const handleNameChange = (name: string, _event: React.FormEvent<HTMLInputElement>) => {
+    setName(name);
+  };
+
+  return (
+    <Form>
+      <FormGroup
+        label="Full name"
+        labelInfo="Additional label info"
+        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="form-group-label-info"
+              className="pf-c-form__group-label-help"
+            >
+              <HelpIcon noVerticalAlign />
+            </button>
+          </Popover>
+        }
+        isRequired
+        fieldId="form-group-label-info"
+        helperText="Include your middle name if you have one."
+      >
+        <TextInput
+          isRequired
+          type="text"
+          id="form-group-label-info"
+          name="form-group-label-info"
+          aria-describedby="form-group-label-info-helper"
+          value={name}
+          onChange={handleNameChange}
+        />
+      </FormGroup>
+    </Form>
+  );
+};