@patternfly/react-core 6.0.0-alpha.65 → 6.0.0-alpha.67

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

@@ -1,105 +0,0 @@
-import React from 'react';
-import { Button, Dropdown, DropdownList, DropdownItem, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
-
-import { Modal, ModalBody, ModalHeader, ModalFooter, ModalVariant } from '@patternfly/react-core/next';
-
-export const ModalWithDropdown: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-
-  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
-    setIsModalOpen(!isModalOpen);
-    setIsDropdownOpen(false);
-  };
-
-  const handleDropdownToggle = () => {
-    setIsDropdownOpen(!isDropdownOpen);
-  };
-
-  const onSelect = () => {
-    setIsDropdownOpen(!isDropdownOpen);
-    onFocus();
-  };
-
-  const onFocus = () => {
-    const element = document.getElementById('modal-dropdown-toggle');
-    (element as HTMLElement).focus();
-  };
-
-  const onEscapePress = (event: KeyboardEvent) => {
-    if (isDropdownOpen) {
-      setIsDropdownOpen(!isDropdownOpen);
-      onFocus();
-    } else {
-      handleModalToggle(event);
-    }
-  };
-
-  return (
-    <React.Fragment>
-      <Button variant="primary" onClick={handleModalToggle}>
-        Show dropdown modal
-      </Button>
-      <Modal
-        variant={ModalVariant.small}
-        isOpen={isModalOpen}
-        onClose={handleModalToggle}
-        onEscapePress={onEscapePress}
-        aria-labelledby="modal-with-dropdown"
-        aria-describedby="modal-box-body-with-dropdown"
-      >
-        <ModalHeader title="Dropdown modal" labelId="modal-with-dropdown" />
-        <ModalBody id="modal-box-body-with-dropdown">
-          <div>
-            Set the dropdown <strong>menuAppendTo</strong> prop to <em>parent</em> in order to allow the dropdown menu
-            break out of the modal container. You'll also want to handle closing of the modal yourself, by listening to
-            the <strong>onEscapePress</strong> callback on the Modal component, so you can close the Dropdown first if
-            it's open without closing the entire modal.
-          </div>
-          <br />
-          <div>
-            <Dropdown
-              isOpen={isDropdownOpen}
-              onSelect={onSelect}
-              onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
-              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-                <MenuToggle ref={toggleRef} onClick={handleDropdownToggle} isExpanded={isDropdownOpen}>
-                  Dropdown
-                </MenuToggle>
-              )}
-            >
-              <DropdownList>
-                <DropdownItem value={0} key="action">
-                  Action
-                </DropdownItem>
-                <DropdownItem
-                  value={1}
-                  key="link"
-                  to="#default-link2"
-                  // Prevent the default onClick functionality for example purposes
-                  onClick={(ev: any) => ev.preventDefault()}
-                >
-                  Link
-                </DropdownItem>
-                <DropdownItem value={2} isDisabled key="disabled action">
-                  Disabled Action
-                </DropdownItem>
-                <DropdownItem value={3} isDisabled key="disabled link" to="#default-link4">
-                  Disabled Link
-                </DropdownItem>
-              </DropdownList>
-            </Dropdown>
-          </div>
-        </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/ModalWithForm.tsx

@@ -1,191 +0,0 @@
-import React from 'react';
-import { Button, Form, FormGroup, FormGroupLabelHelp, Popover, TextInput } from '@patternfly/react-core';
-import { Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant } from '@patternfly/react-core/next';
-
-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 nameLabelHelpRef = React.useRef(null);
-  const emailLabelHelpRef = React.useRef(null);
-  const addressLabelHelpRef = React.useRef(null);
-
-  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"
-              labelHelp={
-                <Popover
-                  triggerRef={nameLabelHelpRef}
-                  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>
-                  }
-                >
-                  <FormGroupLabelHelp ref={nameLabelHelpRef} aria-label="More info for name field" />
-                </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"
-              labelHelp={
-                <Popover
-                  triggerRef={emailLabelHelpRef}
-                  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>
-                  }
-                >
-                  <FormGroupLabelHelp ref={emailLabelHelpRef} aria-label="More info for e-mail field" />
-                </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"
-              labelHelp={
-                <Popover
-                  triggerRef={addressLabelHelpRef}
-                  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>
-                  }
-                >
-                  <FormGroupLabelHelp ref={addressLabelHelpRef} aria-label="More info for address field" />
-                </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

@@ -1,63 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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/index.ts

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