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

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/Card/examples/CardDeprecatedSelectable.tsx

@@ -1,127 +0,0 @@
-import React from 'react';
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardBody,
-  Dropdown,
-  DropdownList,
-  DropdownItem,
-  MenuToggle,
-  MenuToggleElement,
-  Divider
-} from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-
-export const CardLegacySelectable: React.FunctionComponent = () => {
-  const [selected, setSelected] = React.useState<string>('');
-  const [isKebabOpen, setIsKebabOpen] = React.useState<boolean>(false);
-
-  const onKeyDown = (event: React.KeyboardEvent) => {
-    if (event.target !== event.currentTarget) {
-      return;
-    }
-    if (['Enter', ' '].includes(event.key)) {
-      event.preventDefault();
-      const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
-      setSelected(newSelected);
-    }
-  };
-
-  const onClick = (event: React.MouseEvent) => {
-    const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
-    setSelected(newSelected);
-  };
-
-  const onChange = (_event: React.FormEvent<HTMLInputElement>, labelledById: string) => {
-    const newSelected = labelledById === selected ? '' : labelledById;
-    setSelected(newSelected);
-  };
-
-  const onToggle = (event: React.MouseEvent) => {
-    event?.stopPropagation();
-    setIsKebabOpen(!isKebabOpen);
-  };
-
-  const onSelect = (event: React.MouseEvent | undefined) => {
-    event?.stopPropagation();
-    setIsKebabOpen(!isKebabOpen);
-  };
-
-  const dropdownItems = (
-    <>
-      <DropdownItem key="action">Action</DropdownItem>
-      {/* Prevent default onClick functionality for example purposes */}
-      <DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
-        Link
-      </DropdownItem>
-      <DropdownItem key="disabled action" isDisabled>
-        Disabled Action
-      </DropdownItem>
-      <DropdownItem key="disabled link" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
-        Disabled Link
-      </DropdownItem>
-      <Divider component="li" key="separator" />
-      <DropdownItem key="separated action">Separated Action</DropdownItem>
-      <DropdownItem key="separated link" to="#" onClick={(event: any) => event.preventDefault()}>
-        Separated Link
-      </DropdownItem>
-    </>
-  );
-
-  const headerActions = (
-    <>
-      <Dropdown
-        onSelect={onSelect}
-        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-          <MenuToggle
-            ref={toggleRef}
-            isExpanded={isKebabOpen}
-            onClick={onToggle}
-            variant="plain"
-            aria-label="Card legacy selectable example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
-        )}
-        isOpen={isKebabOpen}
-        onOpenChange={(isOpen: boolean) => setIsKebabOpen(isOpen)}
-      >
-        <DropdownList>{dropdownItems}</DropdownList>
-      </Dropdown>
-    </>
-  );
-
-  return (
-    <>
-      <Card
-        id="legacy-first-card"
-        onKeyDown={onKeyDown}
-        onClick={onClick}
-        onSelectableInputChange={onChange}
-        isSelectable
-        isSelected={selected === 'legacy-first-card'}
-        hasSelectableInput
-        tabIndex={0}
-      >
-        <CardHeader actions={{ actions: headerActions }} />
-        <CardTitle>First legacy selectable card</CardTitle>
-        <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
-      </Card>
-      <br />
-      <Card
-        id="legacy-second-card"
-        onKeyDown={onKeyDown}
-        onClick={onClick}
-        onSelectableInputChange={onChange}
-        isSelectable
-        isSelected={selected === 'legacy-second-card'}
-        hasSelectableInput
-        tabIndex={0}
-      >
-        <CardTitle>Second legacy selectable card</CardTitle>
-        <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
-      </Card>
-    </>
-  );
-};