@patternfly/react-core 6.0.0-alpha.19 → 6.0.0-alpha.20

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/Toolbar/__tests__/__snapshots__/ToolbarItem.test.tsx.snap

@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ToolbarItem should map width breakpoints 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-toolbar__item"
-    widths="[object Object]"
-  >
-    Test
-  </div>
-</DocumentFragment>
-`;

package/src/components/Toolbar/examples/ToolbarWidths.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { Toolbar, ToolbarItem, ToolbarContent } from '@patternfly/react-core';
-import { Button } from '@patternfly/react-core';
-
-export const ToolbarWidths: React.FunctionComponent = () => {
-  const widths = {
-    default: '100px',
-    sm: '80px',
-    md: '150px',
-    lg: '200px',
-    xl: '250px',
-    '2xl': '300px'
-  };
-
-  const items = (
-    <React.Fragment>
-      <ToolbarItem widths={widths}>
-        <Button variant="secondary" style={{ width: '100%' }}>
-          Action
-        </Button>
-      </ToolbarItem>
-    </React.Fragment>
-  );
-
-  return (
-    <Toolbar id="toolbar-widths">
-      <ToolbarContent>{items}</ToolbarContent>
-    </Toolbar>
-  );
-};