@patternfly/react-core 5.2.0-prerelease.9 → 5.3.0-prerelease.1

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/ClipboardCopy/__tests__/Generated/ClipboardCopy.test.tsx

@@ -1,40 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { ClipboardCopy } from '../../ClipboardCopy';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('ClipboardCopy should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(
-    <ClipboardCopy
-      className={'string'}
-      hoverTip={"'Copy to clipboard'"}
-      clickTip={"'Successfully copied to clipboard!'"}
-      textAriaLabel={"'Copyable input'"}
-      toggleAriaLabel={"'Show content'"}
-      isReadOnly={false}
-      isExpanded={false}
-      isCode={false}
-      variant={'inline'}
-      position={'auto'}
-      maxWidth={"'150px'"}
-      exitDelay={1600}
-      entryDelay={100}
-      onCopy={(event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => {
-        const clipboard = event.currentTarget.parentElement;
-        const el = document.createElement('input');
-        el.value = text.toString();
-        clipboard.appendChild(el);
-        el.select();
-        document.execCommand('copy');
-        clipboard.removeChild(el);
-      }}
-      onChange={(): any => undefined}
-      children={<div>ReactNode</div>}
-    />
-  );
-  expect(asFragment()).toMatchSnapshot();
-});

package/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap

@@ -1,55 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-clipboard-copy string"
-    data-ouia-component-type="PF5/ClipboardCopy"
-    data-ouia-safe="true"
-  >
-    <div
-      class="pf-v5-c-clipboard-copy__group"
-    >
-      <span
-        class="pf-v5-c-form-control"
-      >
-        <input
-          aria-invalid="false"
-          aria-label="'Copyable input'"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-          data-ouia-component-type="PF5/TextInput"
-          data-ouia-safe="true"
-          id="text-input-0"
-          type="text"
-          value="[object Object]"
-        />
-      </span>
-      <button
-        aria-disabled="false"
-        aria-label="'Copy to clipboard'"
-        aria-labelledby="copy-button-0 text-input-0"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-1"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
-        id="copy-button-0"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 448 512"
-          width="1em"
-        >
-          <path
-            d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-</DocumentFragment>
-`;