@react-ui-org/react-ui 0.52.1 → 0.53.0

package/src/lib/components/Modal/README.mdx

@@ -1,1360 +0,0 @@
----
-name: Modal
-menu: 'Miscellaneous'
-route: /components/modal
----
-
-# Modal
-
-Modal allows prompting users to take or complete an action.
-
-import {
-  Playground,
-  Props,
-} from 'docz'
-import {
-  Button,
-  CheckboxField,
-  FormLayout,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalTitle,
-  Radio,
-  ScrollView,
-  TextArea,
-  TextField,
-  Toolbar,
-  ToolbarGroup,
-  ToolbarItem,
-} from '../..'
-import Icon from '../../../docs/_components/Icon'
-
-## Basic Usage
-
-To implement the Modal component, you need to import it first:
-
-```js
-import {
-  Modal,
-  ModalHeader,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalTitle,
-} from '@react-ui-org/react-ui';
-```
-
-And use it:
-
-<Playground>
-  {() => {
-    const [modalOpen, setModalOpen] = React.useState(false);
-    const modalPrimaryButtonRef = React.useRef();
-    const modalCloseButtonRef = React.useRef();
-    return (
-      <>
-        <Button label="Launch modal" onClick={() => setModalOpen(true)} />
-        <div>
-          {modalOpen && (
-            <Modal
-              closeButtonRef={modalCloseButtonRef}
-              primaryButtonRef={modalPrimaryButtonRef}
-            >
-              <ModalHeader>
-                <ModalTitle>Delete the user?</ModalTitle>
-                <ModalCloseButton onClick={() => setModalOpen(false)} />
-              </ModalHeader>
-              <ModalBody>
-                <ModalContent>
-                  <p>
-                    Do you really want to delete the user <code>admin</code>?
-                    This cannot be undone.
-                  </p>
-                </ModalContent>
-              </ModalBody>
-              <ModalFooter>
-                <Button
-                  color="danger"
-                  label="Delete"
-                  onClick={() => setModalOpen(false)}
-                  ref={modalPrimaryButtonRef}
-                />
-                <Button
-                  color="secondary"
-                  label="Close"
-                  onClick={() => setModalOpen(false)}
-                  priority="outline"
-                  ref={modalCloseButtonRef}
-                />
-              </ModalFooter>
-            </Modal>
-          )}
-        </div>
-      </>
-    );
-  }}
-</Playground>
-
-See [API](#api) for all available options.
-
-## General Guidelines
-
-- Use modals to **confirm an action,** display a **blocking alert**, or reveal
-  **contextual options or settings** that cannot be displayed in line with the
-  parent content.
-
-- **The title** should communicate the **purpose of the modal** rather than a
-  generic text. Eg. “Delete the user?” tells more than “Are you sure?” or
-  “Warning”.
-
-- **Modal actions** should correspond to the modal purpose, too. E.g. “Delete”
-  tells better what happens rather than “OK”.
-
-- Modal **automatically focuses the first non-disabled form field** by default
-  which allows users to confirm the modal by hitting the enter key. When no
-  field is found then the primary button (in the footer) is focused. If there
-  are neither, it tries to focus any other focusable elements. In case there
-  are none, or [autoFocus](#autoFocus) is disabled, Modal itself is focused.
-
-- **Avoid stacking** of modals. While it may technically work, the modal is just
-  not designed for that.
-
-📖 [Read more about modals at Nielsen Norman Group.][nng-modal]
-
-## Composition
-
-Modal is decomposed into the following components:
-
-- [Modal](#api)
-  - [ModalHeader](#modalheader-1)
-    - [ModalTitle](#modaltitle)
-    - [ModalCloseButton](#modalclosebutton)
-  - [ModalBody](#modalbody-1)
-    - [ModalContent](#modalcontent)
-    (may be wrapped with [ScrollView](/components/scroll-view))
-  - [ModalFooter](#modalfooter-1)
-
-Using different combinations, you can compose different kinds of modals,
-e.g. dialog modal, blocking modal, scrollable modal, etc.
-
-<Playground>
-  {() => {
-    const [modalOpen, setModalOpen] = React.useState(null);
-    const modalPrimaryButtonRef = React.useRef();
-    const modalCloseButtonRef = React.useRef();
-    return (
-      <>
-        <Button
-          label="Launch blocking modal without title"
-          onClick={() => {
-            setModalOpen(1);
-            setTimeout(() => setModalOpen(null), 2500);
-          }}
-        />
-        <Button
-          label="Launch blocking modal with title"
-          onClick={() => {
-            setModalOpen(2);
-            setTimeout(() => setModalOpen(null), 3500);
-          }}
-        />
-        <Button
-          label="Launch modal as dialog"
-          onClick={() => setModalOpen(3)}
-        />
-        <Button
-          label="Launch modal as form"
-          onClick={() => setModalOpen(4)}
-        />
-        <div>
-          {modalOpen === 1 && (
-            <Modal>
-              <ModalBody>
-                <ModalContent>
-                  <p className="text-center">
-                    Application is being loaded.
-                    <span className="d-inline-flex align-items-center animation-spin-counterclockwise">
-                      <Icon icon="loading" />
-                    </span>
-                  </p>
-                </ModalContent>
-              </ModalBody>
-            </Modal>
-          )}
-          {modalOpen === 2 && (
-            <Modal>
-              <ModalHeader>
-                <ModalTitle>Action finished</ModalTitle>
-              </ModalHeader>
-              <ModalBody>
-                <ModalContent>
-                  <p>
-                    Action has been successfully finished.
-                    You will be redirected within a few seconds.
-                  </p>
-                </ModalContent>
-              </ModalBody>
-            </Modal>
-          )}
-          {modalOpen === 3 && (
-            <Modal
-              closeButtonRef={modalCloseButtonRef}
-              primaryButtonRef={modalPrimaryButtonRef}
-            >
-              <ModalHeader>
-                <ModalTitle>Delete the user?</ModalTitle>
-                <ModalCloseButton onClick={() => setModalOpen(false)} />
-              </ModalHeader>
-              <ModalBody>
-                <ModalContent>
-                  <p>
-                    Do you really want to delete the user <code>admin</code>?
-                    This cannot be undone.
-                  </p>
-                </ModalContent>
-              </ModalBody>
-              <ModalFooter>
-                <Button
-                  color="danger"
-                  label="Delete"
-                  onClick={() => setModalOpen(false)}
-                  ref={modalPrimaryButtonRef}
-                />
-                <Button
-                  color="secondary"
-                  label="Close"
-                  onClick={() => setModalOpen(false)}
-                  priority="outline"
-                  ref={modalCloseButtonRef}
-                />
-              </ModalFooter>
-            </Modal>
-          )}
-          {modalOpen === 4 && (
-            <Modal
-              closeButtonRef={modalCloseButtonRef}
-              primaryButtonRef={modalPrimaryButtonRef}
-            >
-              <ModalHeader>
-                <ModalTitle>Add new user</ModalTitle>
-                <ModalCloseButton onClick={() => setModalOpen(false)} />
-              </ModalHeader>
-              <ModalBody>
-                <ModalContent>
-                  <FormLayout fieldLayout="horizontal">
-                    <TextField label="Username" />
-                    <TextField label="Password" type="password" />
-                  </FormLayout>
-                </ModalContent>
-              </ModalBody>
-              <ModalFooter>
-                <Button
-                  label="Save"
-                  onClick={() => setModalOpen(false)}
-                  ref={modalPrimaryButtonRef}
-                />
-                <Button
-                  color="secondary"
-                  label="Close"
-                  onClick={() => setModalOpen(false)}
-                  priority="outline"
-                  ref={modalCloseButtonRef}
-                />
-              </ModalFooter>
-            </Modal>
-          )}
-        </div>
-      </>
-    );
-  }}
-</Playground>
-
-### ModalHeader
-
-ModalHeader is an optional part of the Modal which allows you to display the title
-of the modal and its close button.
-
-It is recommended to compose ModalHeader from the following elements. For title,
-use ModalTitle. For the close button, use ModalCloseButton, however it can
-be omitted if a close button is part of ModalFooter.
-
-There are two ways how to position elements within the ModalHeader:
-
-1. You can use provided positioning. Place previously mentioned elements into
-   the ModalHeader and use `justify` prop to set up the positioning of those
-   elements.
-2. You can customize positioning using another component (e.g.
-   [Toolbar](/components/toolbar)). In that case, set `justify` to `stretch` and
-   position elements on your own.
-
-<Playground>
-  {() => {
-    const [modalOpen, setModalOpen] = React.useState(false);
-    const [variant, setVariant] = React.useState(null);
-    const modalPrimaryButtonRef = React.useRef();
-    const modalCloseButtonRef = React.useRef();
-    return (
-      <>
-        <Button
-          label="Launch with close button"
-          onClick={() => {
-            setModalOpen(true);
-            setVariant(1);
-          }}
-        />
-        <Button
-          label="Launch without close button"
-          onClick={() => {
-            setModalOpen(true);
-            setVariant(2);
-          }}
-        />
-        <Button
-          label="Launch without close button and with centered title"
-          onClick={() => {
-            setModalOpen(true);
-            setVariant(3);
-          }}
-        />
-        <Button
-          label="Launch with custom layout"
-          onClick={() => {
-            setModalOpen(true);
-            setVariant(4);
-          }}
-        />
-        <div>
-          {modalOpen && (
-            <Modal
-              closeButtonRef={modalCloseButtonRef}
-              primaryButtonRef={modalPrimaryButtonRef}
-            >
-              {variant === 1 && (
-                <ModalHeader>
-                  <ModalTitle>Delete the user?</ModalTitle>
-                  <ModalCloseButton onClick={() => setModalOpen(false)} />
-                </ModalHeader>
-              )}
-              {variant === 2 && (
-                <ModalHeader>
-                  <ModalTitle>Delete the user?</ModalTitle>
-                </ModalHeader>
-              )}
-              {variant === 3 && (
-                <ModalHeader justify="center">
-                  <ModalTitle>Delete the user?</ModalTitle>
-                </ModalHeader>
-              )}
-              {variant === 4 && (
-                <ModalHeader justify="stretch">
-                  <Toolbar justify="space-between">
-                    <ToolbarItem>
-                      {''}
-                    </ToolbarItem>
-                    <ToolbarItem>
-                      <ModalTitle>Delete the user?</ModalTitle>
-                    </ToolbarItem>
-                    <ToolbarItem>
-                      <ModalCloseButton onClick={() => setModalOpen(false)} />
-                    </ToolbarItem>
-                  </Toolbar>
-                </ModalHeader>
-              )}
-              <ModalBody>
-                <ModalContent>
-                  <p>
-                    Do you really want to delete the user <code>admin</code>?
-                    This cannot be undone.
-                  </p>
-                </ModalContent>
-              </ModalBody>
-              <ModalFooter>
-                <Button
-                  color="danger"
-                  label="Delete"
-                  onClick={() => setModalOpen(false)}
-                  ref={modalPrimaryButtonRef}
-                />
-                <Button
-                  color="secondary"
-                  label="Close"
-                  onClick={() => setModalOpen(false)}
-                  priority="outline"
-                  ref={modalCloseButtonRef}
-                />
-              </ModalFooter>
-            </Modal>
-          )}
-        </div>
-      </>
-    );
-  }}
-</Playground>
-
-### ModalBody
-
-ModalBody is a mandatory part of the Modal which allows you to display the
-content of the Modal.
-
-Although the ModalBody allows you to display arbitrary content, you should not
-place content directly into the ModalBody, but wrap it with ModalContent first.
-
-In case your content is expected to be long, consider wrapping ModalContent
-with ScrollView. Check [Scrolling Long Content](#scrolling-long-content) section
-below.
-
-### ModalFooter
-
-ModalFooter is an optional part of the Modal which allows you to display
-user actions.
-
-There are two ways to position buttons within the ModalFooter:
-
-1. You can use provided positioning. Place Button component (or any arbitrary
-   element) and use `justify` prop to set up the positioning of those elements.
-2. You can customize positioning using another component (e.g.
-   [Toolbar](/components/toolbar)). In that case, set `justify` to `stretch`
-   and position elements on your own.
-
-<Playground>
-  {() => {
-    const [modalOpen, setModalOpen] = React.useState(false);
-    const [modalJustify, setModalJustify] = React.useState('center');
-    const modalPrimaryButtonRef = React.useRef();
-    const modalCloseButtonRef = React.useRef();
-    return (
-      <>
-        <Button
-          label="Launch modal with footer variants"
-          onClick={() => setModalOpen(true)}
-        />
-        <div>
-          {modalOpen && (
-            <Modal
-              closeButtonRef={modalCloseButtonRef}
-              primaryButtonRef={modalPrimaryButtonRef}
-            >
-              <ModalHeader>
-                <ModalTitle>Footer justification</ModalTitle>
-                <ModalCloseButton onClick={() => setModalOpen(false)} />
-              </ModalHeader>
-              <ModalBody>
-                <ModalContent>
-                  <Radio
-                    label="Footer justification"
-                    onChange={(e) => setModalJustify(e.target.value)}
-                    options={[
-                      {
-                        label: 'start',
-                        value: 'start',
-                      },
-                      {
-                        label: 'center',
-                        value: 'center',
-                      },
-                      {
-                        label: 'end',
-                        value: 'end',
-                      },
-                      {
-                        label: 'space-between',
-                        value: 'space-between',
-                      },
-                      {
-                        label: 'stretch (with a custom layout)',
-                        value: 'stretch',
-                      },
-                    ]}
-                    value={modalJustify}
-                  />
-                </ModalContent>
-              </ModalBody>
-              <ModalFooter justify={modalJustify}>
-                {
-                  modalJustify === 'stretch'
-                    ? (
-                      <Toolbar justify="space-between">
-                          <ToolbarGroup>
-                            <ToolbarItem>
-                              <Button
-                                color="danger"
-                                label="Delete"
-                                onClick={() => setModalOpen(false)}
-                                ref={modalPrimaryButtonRef}
-                              />
-                            </ToolbarItem>
-                            <ToolbarItem>
-                              <Button
-                                color="warning"
-                                label="Archive"
-                                onClick={() => setModalOpen(false)}
-                                ref={modalPrimaryButtonRef}
-                              />
-                            </ToolbarItem>
-                          </ToolbarGroup>
-                        <ToolbarItem>
-                          <Button
-                            color="secondary"
-                            label="Close"
-                            onClick={() => setModalOpen(false)}
-                            priority="outline"
-                            ref={modalCloseButtonRef}
-                          />
-                        </ToolbarItem>
-                      </Toolbar>
-                    ) : (
-                      <>
-                        <Button
-                          label="OK"
-                          onClick={() => setModalOpen(false)}
-                          ref={modalPrimaryButtonRef}
-                        />
-                        <Button
-                          color="secondary"
-                          label="Close"
-                          onClick={() => setModalOpen(false)}
-                          priority="outline"
-                          ref={modalCloseButtonRef}
-                        />
-                      </>
-                    )
-                }
-              </ModalFooter>
-            </Modal>
-          )}
-        </div>
-      </>
-    );
-  }}
-</Playground>
-
-## Sizes
-
-Modal is available in three fixed-width sizes: small, medium, large and fullscreen.
-Modals of any size automatically shrink when they cannot fit the screen width.
-
-<Playground>
-  {() => {
-    const [modalOpen, setModalOpen] = React.useState(false);
-    const [modalSize, setModalSize] = React.useState('small');
-    const modalPrimaryButtonRef = React.useRef();
-    const modalCloseButtonRef = React.useRef();
-    return (
-      <>
-        <Button
-          label="Launch small modal"
-          onClick={() => {
-            setModalSize('small');
-            setModalOpen(true);
-          }}
-        />
-        <Button
-          label="Launch medium modal"
-          onClick={() => {
-            setModalSize('medium');
-            setModalOpen(true);
-          }}
-        />
-        <Button
-          label="Launch large modal"
-          onClick={() => {
-            setModalSize('large');
-            setModalOpen(true);
-          }}
-        />
-        <Button
-          label="Launch fullscreen modal"
-          onClick={() => {
-            setModalSize('fullscreen');
-            setModalOpen(true);
-          }}
-        />
-        <div>
-          {modalOpen && (
-            <Modal
-              closeButtonRef={modalCloseButtonRef}
-              primaryButtonRef={modalPrimaryButtonRef}
-              size={modalSize}
-            >
-              <ModalHeader>
-                <ModalTitle>Delete the user?</ModalTitle>
-                <ModalCloseButton onClick={() => setModalOpen(false)} />
-              </ModalHeader>
-              <ModalBody>
-                <ModalContent>
-                  <p>
-                    Do you really want to delete the user <code>admin</code>?
-                    This cannot be undone.
-                  </p>
-                </ModalContent>
-              </ModalBody>
-              <ModalFooter>
-                <Button
-                  color="danger"
-                  label="Delete"
-                  onClick={() => setModalOpen(false)}
-                  ref={modalPrimaryButtonRef}
-                />
-                <Button
-                  color="secondary"
-                  label="Close"
-                  onClick={() => setModalOpen(false)}
-                  priority="outline"
-                  ref={modalCloseButtonRef}
-                />
-              </ModalFooter>
-            </Modal>
-          )}
-        </div>
-      </>
-    );
-  }}
-</Playground>
-
-On top of that, the modal can adjust to the width of its content.
-
-<Playground>
-  {() => {
-    const [modalOpen, setModalOpen] = React.useState(false);
-    const modalPrimaryButtonRef = React.useRef();
-    const modalCloseButtonRef = React.useRef();
-    return (
-      <>
-        <Button
-          label="Launch auto-width modal"
-          onClick={() => setModalOpen(true)}
-        />
-        <div>
-          {modalOpen && (
-            <Modal
-              closeButtonRef={modalCloseButtonRef}
-              primaryButtonRef={modalPrimaryButtonRef}
-              size="auto"
-            >
-              <ModalHeader>
-                <ModalTitle>Delete the user?</ModalTitle>
-                <ModalCloseButton onClick={() => setModalOpen(false)} />
-              </ModalHeader>
-              <ModalBody>
-                <ModalContent>
-                  <p>
-                    Do you really want to delete the user <code>admin</code>?
-                    This cannot be undone.
-                  </p>
-                </ModalContent>
-              </ModalBody>
-              <ModalFooter>
-                <Button
-                  color="danger"
-                  label="Delete"
-                  onClick={() => setModalOpen(false)}
-                  ref={modalPrimaryButtonRef}
-                />
-                <Button
-                  color="secondary"
-                  label="Close"
-                  onClick={() => setModalOpen(false)}
-                  priority="outline"
-                  ref={modalCloseButtonRef}
-                />
-              </ModalFooter>
-            </Modal>
-          )}
-        </div>
-      </>
-    );
-  }}
-</Playground>
-
-## Position
-
-Modal can be aligned either to the top or center of the screen.
-
-<Playground>
-  {() => {
-    const [modalOpen, setModalOpen] = React.useState(false);
-    const [modalPosition, setModalPosition] = React.useState('center');
-    const modalPrimaryButtonRef = React.useRef();
-    const modalCloseButtonRef = React.useRef();
-    return (
-      <>
-        <Button
-          label="Launch modal at center"
-          onClick={() => {
-            setModalPosition('center');
-            setModalOpen(true);
-          }}
-        />
-        <Button
-          label="Launch modal at top"
-          onClick={() => {
-            setModalPosition('top');
-            setModalOpen(true);
-          }}
-        />
-        <div>
-          {modalOpen && (
-            <Modal
-              closeButtonRef={modalCloseButtonRef}
-              position={modalPosition}
-              primaryButtonRef={modalPrimaryButtonRef}
-            >
-              <ModalHeader>
-                <ModalTitle>Delete the user?</ModalTitle>
-                <ModalCloseButton onClick={() => setModalOpen(false)} />
-              </ModalHeader>
-              <ModalBody>
-                <ModalContent>
-                  <p>
-                    Do you really want to delete the user <code>admin</code>?
-                    This cannot be undone.
-                  </p>
-                </ModalContent>
-              </ModalBody>
-              <ModalFooter>
-                <Button
-                  color="danger"
-                  label="Delete"
-                  onClick={() => setModalOpen(false)}
-                  ref={modalPrimaryButtonRef}
-                />
-                <Button
-                  color="secondary"
-                  label="Close"
-                  onClick={() => setModalOpen(false)}
-                  priority="outline"
-                  ref={modalCloseButtonRef}
-                />
-              </ModalFooter>
-            </Modal>
-          )}
-        </div>
-      </>
-    );
-  }}
-</Playground>
-
-## Forms in Modals
-
-You can safely place a FormLayout into a Modal of any size, including the
-auto-width Modal.
-
-<Playground>
-  {() => {
-    const [modalOpen, setModalOpen] = React.useState(false);
-    const [agree, setAgree] = React.useState(true);
-    const modalPrimaryButtonRef = React.useRef();
-    const modalCloseButtonRef = React.useRef();
-    return (
-      <>
-        <Button
-          label="Launch auto-width modal with auto-width form"
-          onClick={() => setModalOpen(true)}
-        />
-        <div>
-          {modalOpen && (
-            <Modal
-              closeButtonRef={modalCloseButtonRef}
-              primaryButtonRef={modalPrimaryButtonRef}
-              size="auto"
-            >
-              <ModalHeader>
-                <ModalTitle>Auto-width form inside auto-width modal</ModalTitle>
-                <ModalCloseButton onClick={() => setModalOpen(false)} />
-              </ModalHeader>
-              <ModalBody>
-                <ModalContent>
-                  <FormLayout autoWidth fieldLayout="horizontal">
-                    <TextField
-                      label="A form element"
-                      validationState="warning"
-                      validationText={`Account with this name already exists,
-                       pick a different one.`
-                      }
-                    />
-                    <TextField label="Another form element" />
-                    <TextField label="Yet another one" />
-                    <CheckboxField
-                      checked={agree}
-                      label="I agree"
-                      onChange={() => setAgree(!agree)}
-                    />
-                  </FormLayout>
-                </ModalContent>
-              </ModalBody>
-              <ModalFooter>
-                <Button
-                  color="primary"
-                  label="Save"
-                  onClick={() => setModalOpen(false)}
-                  ref={modalPrimaryButtonRef}
-                />
-                <Button
-                  color="secondary"
-                  label="Cancel"
-                  onClick={() => setModalOpen(false)}
-                  priority="outline"
-                  ref={modalCloseButtonRef}
-                />
-              </ModalFooter>
-            </Modal>
-          )}
-        </div>
-      </>
-    );
-  }}
-</Playground>
-
-👉 Inside Modal, we recommend using the `autoWidth` option of FormLayout. This
-prevents the Modal from unwanted horizontal expansion when a long validation
-text pops up during user's interaction with the form.
-
-👉 Beware of horizontal FormLayout inside `small` modals. While automatic
-overflow handling comes to the rescue in this kind of scenario, you will be
-better off with the combination of auto-sized modal and horizontal FormLayout.
-
-## Keyboard Control
-
-Modal can be controlled either by mouse or keyboard. To enhance user
-experience, primary action can be fired by pressing `Enter` key and the modal
-can be closed by pressing the `Escape` key.
-
-To enable it, you just need to pass a reference to the buttons using
-`primaryButtonRef` and `closeButtonRef` props on Modal. The advantage of passing
-the reference to the button is that if the button is disabled, the key press
-will not fire the event.
-
-## Autofocus
-
-Autofocus is implemented to enhance the user experience by automatically
-focusing an element within the Modal.
-
-How does it work? It tries to find `input`, `textarea`, and `select` elements
-inside of Modal and moves focus onto the first non-disabled one. If none is
-found and the `primaryButtonRef` prop on Modal is set, then the primary button
-is focused. If there are neither, it tries to focus any other focusable elements.
-In case there are none or `autoFocus` is disabled, Modal itself is focused.
-
-<Playground>
-  {() => {
-    const [modalOpen, setModalOpen] = React.useState(null);
-    const modalPrimaryButtonRef = React.useRef();
-    const modalCloseButtonRef = React.useRef();
-    return (
-      <>
-        <Button
-          label="Launch modal with autofocus and form"
-          onClick={() => setModalOpen(1)}
-        />
-        <Button
-          label="Launch modal with autofocus"
-          onClick={() => setModalOpen(2)}
-        />
-        <Button
-          label="Launch modal with autofocus disabled"
-          onClick={() => setModalOpen(3)}
-        />
-        <div>
-          {modalOpen === 1 && (
-            <Modal
-              closeButtonRef={modalCloseButtonRef}
-              primaryButtonRef={modalPrimaryButtonRef}
-            >
-              <ModalHeader>
-                <ModalTitle>Modal with autoFocus and form</ModalTitle>
-                <ModalCloseButton onClick={() => setModalOpen(null)} />
-              </ModalHeader>
-              <ModalBody>
-                <ModalContent>
-                  <FormLayout autoWidth fieldLayout="horizontal">
-                    <TextField
-                      disabled
-                      label="A form element"
-                    />
-                    <TextField label="Another form element" />
-                    <TextArea label="Yet another one" />
-                  </FormLayout>
-                </ModalContent>
-              </ModalBody>
-              <ModalFooter>
-                <Button
-                  label="Submit"
-                  onClick={() => setModalOpen(null)}
-                  ref={modalPrimaryButtonRef}
-                />
-                <Button
-                  color="secondary"
-                  label="Close"
-                  onClick={() => setModalOpen(null)}
-                  priority="outline"
-                  ref={modalCloseButtonRef}
-                />
-              </ModalFooter>
-            </Modal>
-          )}
-          {modalOpen === 2 && (
-            <Modal
-              closeButtonRef={modalCloseButtonRef}
-              primaryButtonRef={modalPrimaryButtonRef}
-            >
-              <ModalHeader>
-                <ModalTitle>Modal with autoFocus enabled with no form</ModalTitle>
-                <ModalCloseButton onClick={() => setModalOpen(null)} />
-              </ModalHeader>
-              <ModalBody>
-                <ModalContent>
-                  <p>
-                    This Modal autofocuses the primary button or any other
-                    focusable element.
-                  </p>
-                </ModalContent>
-              </ModalBody>
-              <ModalFooter>
-                <Button
-                  label="Acknowledge"
-                  onClick={() => setModalOpen(null)}
-                  ref={modalPrimaryButtonRef}
-                />
-                <Button
-                  color="secondary"
-                  label="Close"
-                  onClick={() => setModalOpen(null)}
-                  priority="outline"
-                  ref={modalCloseButtonRef}
-                />
-              </ModalFooter>
-            </Modal>
-          )}
-          {modalOpen === 3 && (
-            <Modal
-              autoFocus={false}
-              closeButtonRef={modalCloseButtonRef}
-              primaryButtonRef={modalPrimaryButtonRef}
-            >
-              <ModalHeader>
-                <ModalTitle>Modal with autoFocus disabled</ModalTitle>
-              </ModalHeader>
-              <ModalBody>
-                <ModalContent>
-                  <p>
-                    This Modal focuses the Modal element itself.
-                  </p>
-                </ModalContent>
-              </ModalBody>
-              <ModalFooter>
-                <Button
-                  label="Acknowledge"
-                  onClick={() => setModalOpen(null)}
-                  ref={modalPrimaryButtonRef}
-                />
-                <Button
-                  color="secondary"
-                  label="Close"
-                  onClick={() => setModalOpen(null)}
-                  priority="outline"
-                  ref={modalCloseButtonRef}
-                />
-              </ModalFooter>
-            </Modal>
-          )}
-        </div>
-      </>
-    );
-  }}
-</Playground>
-
-## Scrolling Long Content
-
-When modals become too long for the user's viewport or device, they scroll
-independent of the page itself. This can be done in three ways using the
-`scrolling` option of the ModalBody component:
-
-- `auto` (default) — ModalBody is responsible for scrolling,
-- `custom` — you must provide a custom component to handle scrolling,
-   typically an instance of [ScrollView](/components/scroll-view) wrapping
-   ModalContent,
-- `none` — entire Modal is responsible for scrolling.
-
-<Playground>
-  {() => {
-    const [modalOpen, setModalOpen] = React.useState(false);
-    const [modalScrolling, setModalScrolling] = React.useState('auto');
-    const modalCloseButtonRef = React.useRef();
-    const modalPrimaryButtonRef = React.useRef();
-    const modalContent = (
-      <ModalContent>
-        <p>
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
-          commodo ligula eget dolor. Aenean massa.
-        </p>
-        <p>
-          Cum sociis natoque penatibus et magnis dis parturient montes,
-          nascetur ridiculus mus. Donec quam felis, ultricies nec,
-          pellentesque eu, pretium quis, sem.
-        </p>
-        <p>
-          Nulla consequat massa quis enim. Donec pede justo, fringilla
-          vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus
-          ut, imperdiet a, venenatis vitae, justo.
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
-          commodo ligula eget dolor. Aenean massa.
-        </p>
-        <p>
-          Cum sociis natoque penatibus et magnis dis parturient montes,
-          nascetur ridiculus mus. Donec quam felis, ultricies nec,
-          pellentesque eu, pretium quis, sem.
-        </p>
-        <p>
-          Nulla consequat massa quis enim. Donec pede justo, fringilla
-          vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus
-          ut, imperdiet a, venenatis vitae, justo.
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
-          commodo ligula eget dolor. Aenean massa.
-        </p>
-        <p>
-          Cum sociis natoque penatibus et magnis dis parturient montes,
-          nascetur ridiculus mus. Donec quam felis, ultricies nec,
-          pellentesque eu, pretium quis, sem.
-        </p>
-        <p>
-          Nulla consequat massa quis enim. Donec pede justo, fringilla
-          vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus
-          ut, imperdiet a, venenatis vitae, justo.
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
-          commodo ligula eget dolor. Aenean massa.
-        </p>
-        <p>
-          Cum sociis natoque penatibus et magnis dis parturient montes,
-          nascetur ridiculus mus. Donec quam felis, ultricies nec,
-          pellentesque eu, pretium quis, sem.
-        </p>
-        <p>
-          Nulla consequat massa quis enim. Donec pede justo, fringilla
-          vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus
-          ut, imperdiet a, venenatis vitae, justo.
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
-          commodo ligula eget dolor. Aenean massa.
-        </p>
-        <p>
-          Cum sociis natoque penatibus et magnis dis parturient montes,
-          nascetur ridiculus mus. Donec quam felis, ultricies nec,
-          pellentesque eu, pretium quis, sem.
-        </p>
-        <p>
-          Nulla consequat massa quis enim. Donec pede justo, fringilla
-          vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus
-          ut, imperdiet a, venenatis vitae, justo.
-        </p>
-      </ModalContent>
-    )
-    return (
-      <>
-        <Button
-          label="Launch modal with scrolling body"
-          onClick={() => {
-            setModalScrolling('auto');
-            setModalOpen(true);
-          }}
-        />
-        <Button
-          label="Launch modal with ScrollView"
-          onClick={() => {
-            setModalScrolling('custom');
-            setModalOpen(true);
-          }}
-        />
-        <Button
-          label="Launch modal with non-scrolling body"
-          onClick={() => {
-            setModalScrolling('none');
-            setModalOpen(true);
-          }}
-        />
-        <div>
-          {modalOpen && (
-            <Modal
-              autoFocus={modalScrolling !== 'none'}
-              closeButtonRef={modalCloseButtonRef}
-              primaryButtonRef={modalPrimaryButtonRef}
-              size="small"
-            >
-              <ModalHeader>
-                <ModalTitle>Modal with long content</ModalTitle>
-                <ModalCloseButton onClick={() => setModalOpen(false)} />
-              </ModalHeader>
-              <ModalBody scrolling={modalScrolling}>
-                {
-                  modalScrolling === 'custom'
-                    ? (
-                      <ScrollView>
-                        {modalContent}
-                      </ScrollView>
-                    )
-                    : modalContent
-                }
-              </ModalBody>
-              <ModalFooter>
-                <Button
-                  label="OK"
-                  onClick={() => setModalOpen(false)}
-                  ref={modalPrimaryButtonRef}
-                />
-                <Button
-                  color="secondary"
-                  label="Close"
-                  onClick={() => setModalOpen(false)}
-                  priority="outline"
-                  ref={modalCloseButtonRef}
-                />
-              </ModalFooter>
-            </Modal>
-          )}
-        </div>
-      </>
-    );
-  }}
-</Playground>
-
-### Long Content and Autofocus
-
-👉 If you have a Modal with `scrolling` set to `none`, you may want to disable
-`autoFocus` to prevent the modal from scrolling to the end immediately after
-being opened.
-
-## Prevent Scrolling Underneath the Modal
-
-You can choose the mode in which Modal prevents the scroll of the page underneath.
-Default mode prevents scrolling on `<body>` element and accounts for the scrollbar
-width. If you choose `off`, there will be no scroll prevention. If you need more
-flexibility, define your methods `start` (called on Modal's mount) and `reset`
-(called on Modal unmount) wrapped by an object and handle scroll prevention
-yourself.
-
-<Playground>
-  {() => {
-    const [modalOpen, setModalOpen] = React.useState(null);
-    const modalPrimaryButtonRef = React.useRef();
-    const modalCloseButtonRef = React.useRef();
-    const customScrollPreventionObject = {
-      start: () => {
-        // YOUR CUSTOM SCROLL PREVENTING LOGIC GOES HERE
-        window.document.body.style.overflowY = 'hidden'
-      },
-      reset: () => {
-        // YOUR CUSTOM SCROLL RE-ENABLING LOGIC GOES HERE
-        window.document.body.style.overflowY = 'auto'
-      },
-    };
-    return (
-      <>
-        <Button
-          label="Launch modal with default scroll prevention"
-          onClick={() => setModalOpen(1)}
-        />
-        <Button
-          label="Launch modal with no scroll prevention"
-          onClick={() => setModalOpen(2)}
-        />
-        <Button
-          label="Launch modal with custom scroll prevention"
-          onClick={() => setModalOpen(3)}
-        />
-        <div>
-          {modalOpen === 1 && (
-            <Modal
-              closeButtonRef={modalCloseButtonRef}
-              primaryButtonRef={modalPrimaryButtonRef}
-            >
-              <ModalHeader>
-                <ModalTitle>Modal with default scroll prevention</ModalTitle>
-                <ModalCloseButton onClick={() => setModalOpen(null)} />
-              </ModalHeader>
-              <ModalBody>
-                <ModalContent>
-                  <p>
-                    This Modal uses default scroll prevention on the document's
-                    <code>body</code> element.
-                  </p>
-                </ModalContent>
-              </ModalBody>
-              <ModalFooter>
-                <Button
-                  label="Acknowledge"
-                  onClick={() => setModalOpen(null)}
-                  ref={modalPrimaryButtonRef}
-                />
-                <Button
-                  color="secondary"
-                  label="Close"
-                  onClick={() => setModalOpen(null)}
-                  priority="outline"
-                  ref={modalCloseButtonRef}
-                />
-              </ModalFooter>
-            </Modal>
-          )}
-          {modalOpen === 2 && (
-            <Modal
-              closeButtonRef={modalCloseButtonRef}
-              preventScrollUnderneath="off"
-              primaryButtonRef={modalPrimaryButtonRef}
-            >
-              <ModalHeader>
-                <ModalTitle>Modal with no scroll prevention</ModalTitle>
-                <ModalCloseButton onClick={() => setModalOpen(null)} />
-              </ModalHeader>
-              <ModalBody>
-                <ModalContent>
-                  <p>
-                    This Modal does not prevent scrolling.
-                  </p>
-                </ModalContent>
-              </ModalBody>
-              <ModalFooter>
-                <Button
-                  label="Acknowledge"
-                  onClick={() => setModalOpen(null)}
-                  ref={modalPrimaryButtonRef}
-                />
-                <Button
-                  color="secondary"
-                  label="Close"
-                  onClick={() => setModalOpen(null)}
-                  priority="outline"
-                  ref={modalCloseButtonRef}
-                />
-              </ModalFooter>
-            </Modal>
-          )}
-          {modalOpen === 3 && (
-            <Modal
-              closeButtonRef={modalCloseButtonRef}
-              preventScrollUnderneath={customScrollPreventionObject}
-              primaryButtonRef={modalPrimaryButtonRef}
-            >
-              <ModalHeader>
-                <ModalTitle>Modal with custom scroll prevention</ModalTitle>
-                <ModalCloseButton onClick={() => setModalOpen(null)} />
-              </ModalHeader>
-              <ModalBody>
-                <ModalContent>
-                  <p>
-                    This Modal uses provided custom functions to prevent scrolling
-                    and reset it on unmount.
-                  </p>
-                </ModalContent>
-              </ModalBody>
-              <ModalFooter>
-                <Button
-                  label="Acknowledge"
-                  onClick={() => setModalOpen(null)}
-                  ref={modalPrimaryButtonRef}
-                />
-                <Button
-                  color="secondary"
-                  label="Close"
-                  onClick={() => setModalOpen(null)}
-                  priority="outline"
-                  ref={modalCloseButtonRef}
-                />
-              </ModalFooter>
-            </Modal>
-          )}
-        </div>
-      </>
-    );
-  }}
-</Playground>
-
-<!-- markdownlint-disable MD024 -->
-
-## Forwarding HTML Attributes
-
-In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the:
-
-- `<div>` HTML element in case of the `Modal` component. This `<div>` is not the
-root, but its first child which represents the modal window.
-- root `<div>` HTML element in case of `ModalHeader`, `ModalBody`, `ModalContent`
-and `ModalFooter` components.
-- heading HTML element, which level can be specified through `level` option, in
-case of the `ModalTitle` component.
-- native HTML `<button>` in case of the `ModalCloseButton` component.
-
-This enables making the component interactive and helps to improve its
-accessibility.
-
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[div], [heading] and [button] element.
-
-## API
-
-<Props table of={Modal} />
-
-### ModalHeader
-
-<Props table of={ModalHeader} />
-
-### ModalTitle
-
-<Props table of={ModalTitle} />
-
-### ModalCloseButton
-
-<Props table of={ModalCloseButton} />
-
-### ModalBody
-
-<Props table of={ModalBody} />
-
-### ModalContent
-
-<Props table of={ModalContent} />
-
-### ModalFooter
-
-<Props table of={ModalFooter} />
-
-## Theming
-
-| Custom Property                                      | Description                                                   |
-|------------------------------------------------------|---------------------------------------------------------------|
-| `--rui-Modal__padding-x`                             | Inline padding of individual modal components                 |
-| `--rui-Modal__padding-y`                             | Block padding of individual modal components                  |
-| `--rui-Modal__background`                            | Modal background (including `url()` or gradient)              |
-| `--rui-Modal__box-shadow`                            | Modal box shadow                                              |
-| `--rui-Modal__separator__width`                      | Width of separator between modal header, body, and footer     |
-| `--rui-Modal__separator__color`                      | Color of separator between modal header, body, and footer     |
-| `--rui-Modal__outer-spacing-xs`                      | Spacing around modal, `xs` screen size                        |
-| `--rui-Modal__outer-spacing-sm`                      | Spacing around modal, `sm` screen size and bigger             |
-| `--rui-Modal__header__gap`                           | Modal header gap between children                             |
-| `--rui-Modal__footer__background`                    | Modal footer background (including `url()` or gradient)       |
-| `--rui-Modal__footer__gap`                           | Modal footer gap between children                             |
-| `--rui-Modal__backdrop__background`                  | Modal backdrop background (including `url()` or gradient)     |
-| `--rui-Modal--auto__min-width`                       | Min width of auto-sized modal (when enough screen estate)     |
-| `--rui-Modal--auto__max-width`                       | Max width of auto-sized modal (when enough screen estate)     |
-| `--rui-Modal--small__width`                          | Width of small modal                                          |
-| `--rui-Modal--medium__width`                         | Width of medium modal                                         |
-| `--rui-Modal--large__width`                          | Width of large modal                                          |
-| `--rui-Modal--fullscreen__width`                     | Width of fullscreen modal                                     |
-| `--rui-Modal--fullscreen__height`                    | Height of fullscreen modal                                    |
-
-[nng-modal]: https://www.nngroup.com/articles/modal-nonmodal-dialog/
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
-[heading]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#attributes
-[button]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes