@patternfly/react-core 6.0.0-alpha.3 → 6.0.0-alpha.30

package/src/next/components/Modal/examples/ModalWithForm.tsx

@@ -0,0 +1,211 @@
+import React from 'react';
+import { Button, Form, FormGroup, Popover, TextInput } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant } from '@patternfly/react-core/next';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import formStyles from '@patternfly/react-styles/css/components/Form/form';
+
+export const ModalWithForm: React.FunctionComponent = () => {
+  const [isModalOpen, setModalOpen] = React.useState(false);
+  const [nameValue, setNameValue] = React.useState('');
+  const [emailValue, setEmailValue] = React.useState('');
+  const [addressValue, setAddressValue] = React.useState('');
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setModalOpen(!isModalOpen);
+  };
+
+  const handleNameInputChange = (_event, value: string) => {
+    setNameValue(value);
+  };
+
+  const handleEmailInputChange = (_event, value: string) => {
+    setEmailValue(value);
+  };
+  const handleAddressInputChange = (_event, value: string) => {
+    setAddressValue(value);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show modal with form
+      </Button>
+      <Modal
+        variant={ModalVariant.small}
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        aria-labelledby="form-modal-title"
+        aria-describedby="modal-box-description-form"
+      >
+        <ModalHeader
+          title="Create account"
+          description="Enter your personal information below to create an account."
+          descriptorId="modal-box-description-form"
+          labelId="form-modal-title"
+        />
+        <ModalBody>
+          <Form id="modal-with-form-form">
+            <FormGroup
+              label="Name"
+              labelIcon={
+                <Popover
+                  headerContent={
+                    <div>
+                      The
+                      <a href="https://schema.org/name" target="_blank" rel="noopener noreferrer">
+                        name
+                      </a>
+                      of a
+                      <a href="https://schema.org/Person" target="_blank" rel="noopener noreferrer">
+                        Person
+                      </a>
+                    </div>
+                  }
+                  bodyContent={
+                    <div>
+                      Often composed of
+                      <a href="https://schema.org/givenName" target="_blank" rel="noopener noreferrer">
+                        givenName
+                      </a>
+                      and
+                      <a href="https://schema.org/familyName" target="_blank" rel="noopener noreferrer">
+                        familyName
+                      </a>
+                      .
+                    </div>
+                  }
+                >
+                  <button
+                    type="button"
+                    aria-label="More info for name field"
+                    onClick={(e) => e.preventDefault()}
+                    aria-describedby="modal-with-form-form-name"
+                    className={formStyles.formGroupLabelHelp}
+                  >
+                    <HelpIcon />
+                  </button>
+                </Popover>
+              }
+              isRequired
+              fieldId="modal-with-form-form-name"
+            >
+              <TextInput
+                isRequired
+                type="email"
+                id="modal-with-form-form-name"
+                name="modal-with-form-form-name"
+                value={nameValue}
+                onChange={handleNameInputChange}
+              />
+            </FormGroup>
+            <FormGroup
+              label="E-mail"
+              labelIcon={
+                <Popover
+                  headerContent={
+                    <div>
+                      The
+                      <a href="https://schema.org/email" target="_blank" rel="noopener noreferrer">
+                        e-mail
+                      </a>
+                      of a
+                      <a href="https://schema.org/Person" target="_blank" rel="noopener noreferrer">
+                        person
+                      </a>
+                    </div>
+                  }
+                  bodyContent={
+                    <div>
+                      Valid
+                      <a href="https://schema.org/email" target="_blank" rel="noopener noreferrer">
+                        e-mail
+                      </a>
+                      address.
+                    </div>
+                  }
+                >
+                  <button
+                    type="button"
+                    aria-label="More info for e-mail field"
+                    onClick={(e) => e.preventDefault()}
+                    aria-describedby="modal-with-form-form-email"
+                    className={formStyles.formGroupLabelHelp}
+                  >
+                    <HelpIcon />
+                  </button>
+                </Popover>
+              }
+              isRequired
+              fieldId="modal-with-form-form-email"
+            >
+              <TextInput
+                isRequired
+                type="email"
+                id="modal-with-form-form-email"
+                name="modal-with-form-form-email"
+                value={emailValue}
+                onChange={handleEmailInputChange}
+              />
+            </FormGroup>
+            <FormGroup
+              label="Address"
+              labelIcon={
+                <Popover
+                  headerContent={
+                    <div>
+                      The
+                      <a href="https://schema.org/address" target="_blank" rel="noopener noreferrer">
+                        adress
+                      </a>
+                      of a
+                      <a href="https://schema.org/Person" target="_blank" rel="noopener noreferrer">
+                        person
+                      </a>
+                    </div>
+                  }
+                  bodyContent={
+                    <div>
+                      Valid
+                      <a href="https://schema.org/PostalAddress" target="_blank" rel="noopener noreferrer">
+                        postal address.
+                      </a>
+                    </div>
+                  }
+                >
+                  <button
+                    type="button"
+                    aria-label="More info for address field"
+                    onClick={(e) => e.preventDefault()}
+                    aria-describedby="modal-with-form-form-address"
+                    className={formStyles.formGroupLabelHelp}
+                  >
+                    <HelpIcon />
+                  </button>
+                </Popover>
+              }
+              isRequired
+              fieldId="modal-with-form-form-address"
+            >
+              <TextInput
+                isRequired
+                type="email"
+                id="modal-with-form-form-address"
+                name="modal-with-form-form-address"
+                value={addressValue}
+                onChange={handleAddressInputChange}
+              />
+            </FormGroup>
+          </Form>
+        </ModalBody>
+        <ModalFooter>
+          <Button key="create" variant="primary" form="modal-with-form-form" onClick={handleModalToggle}>
+            Confirm
+          </Button>
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </React.Fragment>
+  );
+};

package/src/next/components/Modal/examples/ModalWithHelp.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Button, Popover } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+
+export const ModalWithHelp: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show with help modal
+      </Button>
+      <Modal
+        variant="small"
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        aria-labelledby="with-help-modal-title"
+        aria-describedby="modal-box-body-with-help"
+      >
+        <ModalHeader
+          title="With help modal"
+          labelId="with-help-modal-title"
+          help={
+            <Popover
+              headerContent={<div>Help Popover</div>}
+              bodyContent={
+                <div>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla
+                  turpis.
+                </div>
+              }
+              footerContent="Popover Footer"
+            >
+              <Button variant="plain" aria-label="Help">
+                <HelpIcon />
+              </Button>
+            </Popover>
+          }
+        />
+        <ModalBody id="modal-box-body-with-help">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </ModalBody>
+        <ModalFooter>
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </React.Fragment>
+  );
+};

package/src/next/components/Modal/examples/ModalWithOverflowingContent.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalHeader, ModalFooter, ModalVariant } from '@patternfly/react-core/next';
+
+export const ModalWithOverflowingContent: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show modal
+      </Button>
+      <Modal
+        variant={ModalVariant.small}
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        aria-labelledby="scrollable-modal-title"
+        aria-describedby="modal-box-body-scrollable"
+      >
+        <ModalHeader title="Modal with overflowing content" labelId="scrollable-modal-title" />
+        <ModalBody tabIndex={0} id="modal-box-body-scrollable" aria-label="Scrollable modal content">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Semper auctor neque vitae
+          tempus. Diam donec adipiscing tristique risus. Augue eget arcu dictum varius duis. Ut enim blandit volutpat
+          maecenas volutpat blandit aliquam. Sit amet mauris commodo quis imperdiet massa tincidunt. Habitant morbi
+          tristique senectus et netus. Fames ac turpis egestas sed tempus urna. Neque laoreet suspendisse interdum
+          consectetur libero id. Volutpat lacus laoreet non curabitur gravida arcu ac tortor. Porta nibh venenatis cras
+          sed felis eget velit. Nullam non nisi est sit amet facilisis. Nunc mi ipsum faucibus vitae. Lorem sed risus
+          ultricies tristique nulla aliquet enim tortor at. Egestas sed tempus urna et pharetra pharetra massa massa
+          ultricies. Lacinia quis vel eros donec ac odio tempor orci. Malesuada fames ac turpis egestas integer eget
+          aliquet.
+          <br />
+          <br />
+          Neque aliquam vestibulum morbi blandit cursus risus at ultrices. Molestie at elementum eu facilisis sed odio
+          morbi. Elit pellentesque habitant morbi tristique. Consequat nisl vel pretium lectus quam id leo in vitae.
+          Quis varius quam quisque id diam vel quam elementum. Viverra nam libero justo laoreet sit amet cursus.
+          Sollicitudin tempor id eu nisl nunc. Orci nulla pellentesque dignissim enim sit amet venenatis. Dignissim enim
+          sit amet venenatis urna cursus eget. Iaculis at erat pellentesque adipiscing commodo elit. Faucibus pulvinar
+          elementum integer enim neque volutpat. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Nunc mattis
+          enim ut tellus elementum sagittis vitae. Blandit cursus risus at ultrices. Tellus mauris a diam maecenas sed
+          enim. Non diam phasellus vestibulum lorem sed risus ultricies tristique nulla.
+          <br />
+          <br />
+          Nulla pharetra diam sit amet nisl suscipit adipiscing. Ac tortor vitae purus faucibus ornare suspendisse sed
+          nisi. Sed felis eget velit aliquet sagittis id consectetur purus. Tincidunt tortor aliquam nulla facilisi cras
+          fermentum. Volutpat est velit egestas dui id ornare arcu odio. Pharetra magna ac placerat vestibulum. Ultrices
+          sagittis orci a scelerisque purus semper eget duis at. Nisi est sit amet facilisis magna etiam tempor orci eu.
+          Convallis tellus id interdum velit. Facilisis sed odio morbi quis commodo odio aenean sed.
+          <br />
+          <br />
+          Eu scelerisque felis imperdiet proin fermentum leo vel orci porta. Facilisi etiam dignissim diam quis enim
+          lobortis scelerisque fermentum. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Magna
+          etiam tempor orci eu lobortis elementum. Quis auctor elit sed vulputate mi sit. Eleifend quam adipiscing vitae
+          proin sagittis nisl rhoncus mattis rhoncus. Erat velit scelerisque in dictum non. Sit amet nulla facilisi
+          morbi tempus iaculis urna. Enim ut tellus elementum sagittis vitae et leo duis ut. Lectus arcu bibendum at
+          varius vel pharetra vel turpis. Morbi tristique senectus et netus et. Eget aliquet nibh praesent tristique
+          magna sit amet purus gravida. Nisl purus in mollis nunc sed id semper risus. Id neque aliquam vestibulum
+          morbi. Mauris a diam maecenas sed enim ut sem. Egestas tellus rutrum tellus pellentesque.
+        </ModalBody>
+        <ModalFooter>
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </React.Fragment>
+  );
+};

package/src/next/components/Modal/examples/ModalWithWizard.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Button, Wizard, WizardHeader, WizardStep } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core/next';
+
+export const ModalWithWizard: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen);
+  };
+
+  const handleWizardToggle = () => {
+    setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen);
+  };
+
+  const numberedSteps = [1, 2, 3, 4].map((stepNumber) => (
+    <WizardStep name={`Step ${stepNumber}`} key={`Step ${stepNumber}`} id={`with-wizard-step-${stepNumber}`}>
+      {`Step ${stepNumber}`}
+    </WizardStep>
+  ));
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show wizard modal
+      </Button>
+      <Modal
+        variant={ModalVariant.large}
+        isOpen={isModalOpen}
+        aria-labelledby="modal-wizard-label"
+        aria-describedby="modal-wizard-description"
+      >
+        <Wizard
+          height={400}
+          header={
+            <WizardHeader
+              title="Wizard modal"
+              titleId="modal-wizard-label"
+              description="This is a wizard inside of a modal."
+              descriptionId="modal-wizard-description"
+              onClose={handleWizardToggle}
+              closeButtonAriaLabel="Close wizard"
+            />
+          }
+          onClose={handleWizardToggle}
+        >
+          {numberedSteps}
+          <WizardStep
+            name="Review"
+            id="with-wizard-review-step"
+            footer={{ nextButtonText: 'Finish', onNext: handleWizardToggle }}
+          >
+            Review step
+          </WizardStep>
+        </Wizard>
+      </Modal>
+    </React.Fragment>
+  );
+};

package/src/next/components/Modal/index.ts

@@ -0,0 +1,4 @@
+export * from './Modal';
+export * from './ModalBody';
+export * from './ModalHeader';
+export * from './ModalFooter';

package/src/next/components/index.ts

@@ -1 +1 @@
-export * from './';
+export * from './Modal';

package/src/styles/index.ts

@@ -0,0 +1 @@
+export * from './sizes';

package/src/components/Accordion/__tests__/Generated/AccordionContent.test.tsx

@@ -1,23 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AccordionContent } from '../../AccordionContent';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('AccordionContent should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(
-    <AccordionContent
-      children={<>ReactNode</>}
-      className={"''"}
-      id={"''"}
-      isHidden={false}
-      isFixed={false}
-      aria-label={"''"}
-      component={() => <div />}
-    />
-  );
-  expect(asFragment()).toMatchSnapshot();
-});

package/src/components/Accordion/__tests__/Generated/AccordionItem.test.tsx

@@ -1,13 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AccordionItem } from '../../AccordionItem';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('AccordionItem should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(<AccordionItem children={<>ReactNode</>} />);
-  expect(asFragment()).toMatchSnapshot();
-});

package/src/components/Accordion/__tests__/Generated/AccordionToggle.test.tsx

@@ -1,21 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AccordionToggle } from '../../AccordionToggle';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('AccordionToggle should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(
-    <AccordionToggle
-      children={<>ReactNode</>}
-      className={"''"}
-      isExpanded={false}
-      id={'string'}
-      component={() => <div />}
-    />
-  );
-  expect(asFragment()).toMatchSnapshot();
-});

package/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionContent.test.tsx.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AccordionContent should match snapshot (auto-generated) 1`] = `
-<DocumentFragment>
-  <div />
-</DocumentFragment>
-`;

package/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionItem.test.tsx.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AccordionItem should match snapshot (auto-generated) 1`] = `
-<DocumentFragment>
-  ReactNode
-</DocumentFragment>
-`;

package/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionToggle.test.tsx.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AccordionToggle should match snapshot (auto-generated) 1`] = `
-<DocumentFragment>
-  <div />
-</DocumentFragment>
-`;

package/src/components/Avatar/examples/example.css

@@ -1,3 +0,0 @@
-#ws-react-c-avatar-bordered---dark {
-  background: var(--pf-v5-global--BackgroundColor--dark-100);
-}

package/src/components/EmptyState/examples/EmptyStateCustomIconColor.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
-import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
-/* eslint-disable camelcase */
-import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_success_color_100';
-
-export const EmptyStateCustomIconColor: React.FunctionComponent = () => (
-  <EmptyState>
-    <EmptyStateHeader
-      titleText="Custom icon color"
-      headingLevel="h4"
-      icon={<EmptyStateIcon icon={CheckIcon} color={global_success_color_100.var} />}
-    />
-    <EmptyStateBody>
-      This represents the empty state pattern in PatternFly with a custom icon color. Hopefully it's simple enough to
-      use but flexible enough to meet a variety of needs.
-    </EmptyStateBody>
-  </EmptyState>
-);

package/src/components/HelperText/examples/HelperTextDynamic.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { HelperText, HelperTextItem } from '@patternfly/react-core';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-
-export const HelperTextDynamic: React.FunctionComponent = () => (
-  <React.Fragment>
-    <HelperText>
-      <HelperTextItem isDynamic>This is default helper text</HelperTextItem>
-    </HelperText>
-    <HelperText>
-      <HelperTextItem isDynamic variant="indeterminate">
-        This is indeterminate helper text
-      </HelperTextItem>
-    </HelperText>
-    <HelperText>
-      <HelperTextItem isDynamic variant="warning">
-        This is warning helper text
-      </HelperTextItem>
-    </HelperText>
-    <HelperText>
-      <HelperTextItem isDynamic variant="success">
-        This is success helper text
-      </HelperTextItem>
-    </HelperText>
-    <HelperText>
-      <HelperTextItem isDynamic variant="error">
-        This is error helper text
-      </HelperTextItem>
-    </HelperText>
-    <HelperText>
-      <HelperTextItem isDynamic variant="error" icon={<TimesIcon />}>
-        This is error helper text with a custom icon
-      </HelperTextItem>
-    </HelperText>
-    <HelperText>
-      <HelperTextItem isDynamic variant="error" hasIcon={false}>
-        This is error helper text with no icon
-      </HelperTextItem>
-    </HelperText>
-  </React.Fragment>
-);

package/src/components/HelperText/examples/HelperTextDynamicList.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { HelperText, HelperTextItem } from '@patternfly/react-core';
-
-export const HelperTextDynamicList: React.FunctionComponent = () => (
-  <HelperText component="ul">
-    <HelperTextItem isDynamic variant="success" component="li">
-      Must be at least 14 characters
-    </HelperTextItem>
-    <HelperTextItem isDynamic variant="error" component="li">
-      Cannot contain any variation of the word "redhat"
-    </HelperTextItem>
-    <HelperTextItem isDynamic variant="success" component="li">
-      Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols
-    </HelperTextItem>
-  </HelperText>
-);

package/src/components/HelperText/examples/HelperTextMultipleStatic.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { HelperText, HelperTextItem } from '@patternfly/react-core';
-
-export const HelperTextMultipleStatic: React.FunctionComponent = () => (
-  <HelperText>
-    <HelperTextItem>This is default helper text</HelperTextItem>
-    <HelperTextItem>This is another default helper text in the same block</HelperTextItem>
-    <HelperTextItem>And this is more default text in the same block</HelperTextItem>
-  </HelperText>
-);

package/src/components/HelperText/examples/HelperTextStaticWithDefaultIcon.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { HelperText, HelperTextItem } from '@patternfly/react-core';
-
-export const HelperTextStaticWithDefaultIcon: React.FunctionComponent = () => (
-  <React.Fragment>
-    <HelperText>
-      <HelperTextItem hasIcon>This is default helper text</HelperTextItem>
-    </HelperText>
-    <HelperText>
-      <HelperTextItem variant="indeterminate" hasIcon>
-        This is indeterminate helper text
-      </HelperTextItem>
-    </HelperText>
-    <HelperText>
-      <HelperTextItem variant="warning" hasIcon>
-        This is warning helper text
-      </HelperTextItem>
-    </HelperText>
-    <HelperText>
-      <HelperTextItem variant="success" hasIcon>
-        This is success helper text
-      </HelperTextItem>
-    </HelperText>
-    <HelperText>
-      <HelperTextItem variant="error" hasIcon>
-        This is error helper text
-      </HelperTextItem>
-    </HelperText>
-  </React.Fragment>
-);