feat(Modal,Backdrop): Add opt-in animation support

packages/react-core/src/components/Backdrop/Backdrop.tsx

@@ -1,20 +1,41 @@
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
+import stylesAnimated from '@patternfly/react-styles/css/components/BackdropAnimations/backdrop-animations';
+import { useHasAnimations } from '../../helpers';
 
 export interface BackdropProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the backdrop */
   children?: React.ReactNode;
   /** Additional classes added to the backdrop */
   className?: string;
+  /** Flag indicating whether animations are enabled. */
+  hasAnimations?: boolean;
+  /** Flag to show the backdrop. Used in conjunction with `hasAnimations`. */
+  isVisible?: boolean;
 }
 
 export const Backdrop: React.FunctionComponent<BackdropProps> = ({
   children = null,
   className = '',
+  hasAnimations: hasAnimationsProp,
+  isVisible,
   ...props
-}: BackdropProps) => (
-  <div {...props} className={css(styles.backdrop, className)}>
-    {children}
-  </div>
-);
+}: BackdropProps) => {
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
+
+  return (
+    <div
+      {...props}
+      className={css(
+        styles.backdrop,
+        hasAnimations && stylesAnimated.backdropAnimated,
+        hasAnimations && isVisible === true && stylesAnimated.backdropAnimatedVisible,
+        hasAnimations && isVisible !== true && stylesAnimated.backdropAnimatedHidden,
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};
 Backdrop.displayName = 'Backdrop';

packages/react-core/src/components/Modal/Modal.tsx

@@ -53,6 +53,8 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
   ouiaSafe?: boolean;
+  /** Flag indicating whether animations are enabled. */
+  hasAnimations?: boolean;
 }
 
 export enum ModalVariant {

packages/react-core/src/components/Modal/ModalBox.tsx

@@ -1,5 +1,6 @@
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
+import stylesAnimated from '@patternfly/react-styles/css/components/ModalAnimations/modal-animations';
 import topSpacer from '@patternfly/react-tokens/dist/esm/c_modal_box_m_align_top_spacer';
 
 export interface ModalBoxProps extends React.HTMLProps<HTMLDivElement> {
@@ -19,6 +20,10 @@ export interface ModalBoxProps extends React.HTMLProps<HTMLDivElement> {
   positionOffset?: string;
   /** Variant of the modal. */
   variant?: 'small' | 'medium' | 'large' | 'default';
+  /** Flag indicating whether animations are enabled. */
+  hasAnimations?: boolean;
+  /** Flag to show the modal. */
+  isOpen?: boolean;
 }
 
 export const ModalBox: React.FunctionComponent<ModalBoxProps> = ({
@@ -31,6 +36,8 @@ export const ModalBox: React.FunctionComponent<ModalBoxProps> = ({
   'aria-label': ariaLabel,
   'aria-describedby': ariaDescribedby,
   style,
+  isOpen,
+  hasAnimations,
   ...props
 }: ModalBoxProps) => {
   if (positionOffset) {
@@ -46,6 +53,9 @@ export const ModalBox: React.FunctionComponent<ModalBoxProps> = ({
       aria-modal="true"
       className={css(
         styles.modalBox,
+        hasAnimations && stylesAnimated.modalAnimated,
+        hasAnimations && isOpen === true && stylesAnimated.modalAnimatedOpen,
+        hasAnimations && isOpen !== true && stylesAnimated.modalAnimatedClosed,
         className,
         position === 'top' && styles.modifiers.alignTop,
         variant === 'large' && styles.modifiers.lg,

packages/react-core/src/components/Modal/ModalContent.tsx

@@ -1,7 +1,7 @@
 import { FocusTrap } from '../../helpers';
 import bullsEyeStyles from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 import { css } from '@patternfly/react-styles';
-import { getOUIAProps, OUIAProps } from '../../helpers';
+import { getOUIAProps, OUIAProps, useHasAnimations } from '../../helpers';
 import { Backdrop } from '../Backdrop';
 import { ModalBoxCloseButton } from './ModalBoxCloseButton';
 import { ModalBox } from './ModalBox';
@@ -49,6 +49,8 @@ export interface ModalContentProps extends OUIAProps {
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
   ouiaSafe?: boolean;
+  /** Flag indicating whether animations are enabled. */
+  hasAnimations?: boolean;
 }
 
 export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
@@ -72,9 +74,12 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   ouiaSafe = true,
   elementToFocus,
   focusTrapId,
+  hasAnimations: hasAnimationsProp,
   ...props
 }: ModalContentProps) => {
-  if (!isOpen) {
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
+
+  if (!isOpen && !hasAnimations) {
     return null;
   }
 
@@ -91,6 +96,8 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   const modalBox = (
     <ModalBox
       className={css(className)}
+      isOpen={isOpen}
+      hasAnimations={hasAnimations}
       variant={variant}
       position={position}
       positionOffset={positionOffset}
@@ -113,10 +120,15 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
       {children}
     </ModalBox>
   );
+  let focusTrapActive = !disableFocusTrap;
+  if (hasAnimations) {
+    focusTrapActive = !disableFocusTrap && isOpen;
+  }
+
   return (
-    <Backdrop className={css(backdropClassName)} id={backdropId}>
+    <Backdrop className={css(backdropClassName)} id={backdropId} hasAnimations={hasAnimations} isVisible={isOpen}>
       <FocusTrap
-        active={!disableFocusTrap}
+        active={focusTrapActive}
         focusTrapOptions={{
           clickOutsideDeactivates: true,
           tabbableOptions: { displayCheck: 'none' },

packages/react-core/src/components/Modal/examples/Modal.css

@@ -0,0 +1,81 @@
+/**
+ * Modal.css
+ *
+ * To fix an issue with the PR preview deployment,
+ * this file contains the contents of the new modal-animations.css + backdrop-animations.css
+ */
+
+
+/* --- modal-animations.css ------ */
+
+.pf-v6-c-modal-animated {
+    --pf-v6-c-modal-animated--Transition:
+        opacity 240ms cubic-bezier(0.4, 0.14, 1, 1),
+        transform 240ms cubic-bezier(0.4, 0.14, 1, 1),
+        visibility 0ms linear 240ms;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transform: translate3d(0, -24px, 0);
+    transform-origin: top center;
+    transition: var(--pf-v6-c-modal-animated--Transition);
+}
+
+.pf-v6-c-modal-animated-open {
+    --pf-v6-c-modal-animated--Transition:
+        transform 240ms cubic-bezier(0, 0, 0.2, 1),
+        visibility 0ms linear 0ms;
+    opacity: 1;
+    visibility: visible;
+    pointer-events: unset;
+    transform: translate3d(0, 0, 0);
+}
+
+.pf-v6-c-modal-animated-closed {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transform: translate3d(0, -24px, 0);
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+    .pf-v6-c-modal-animated,
+    .pf-v6-c-modal-animated-open,
+    .pf-v6-c-modal-animated-closed {
+        transition: none;
+    }
+}
+
+/* --- backdrop-animations.css --- */
+
+.pf-v6-c-backdrop-animated {
+    background-color: transparent;
+    visibility: hidden;
+    pointer-events: none;
+    transition:
+    background-color 240ms cubic-bezier(0.4, 0.14, 1, 1), /* Carbon equivalent: duration-moderate-02 + motion(exit, expressive) */
+    visibility 0ms linear 240ms; /* Carbon equivalent: duration-moderate-02 */
+}
+
+.pf-v6-c-backdrop-animated-visible {
+    background-color: var(--pf-v6-c-backdrop--BackgroundColor);
+    visibility: visible;
+    pointer-events: unset;
+    transition:
+    background-color 240ms cubic-bezier(0, 0, 0.2, 1),
+    visibility 0ms linear 0ms;
+}
+
+.pf-v6-c-backdrop-animated-hidden {
+    background-color: transparent;
+    visibility: hidden;
+    pointer-events: none;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+    .pf-v6-c-backdrop-animated,
+    .pf-v6-c-backdrop-animated-visible,
+    .pf-v6-c-backdrop-animated-hidden {
+        transition: none;
+    }
+}

packages/react-core/src/components/Modal/examples/Modal.md

@@ -11,6 +11,7 @@ import RhUiWarningIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warnin
 import RhUiAttentionBellFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-attention-bell-fill-icon';
 import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import formStyles from '@patternfly/react-styles/css/components/Form/form';
+import './Modal.css';
 
 ## Examples
 
@@ -154,3 +155,19 @@ To customize which element inside the modal receives focus when initially opened
 ```ts file="./ModalCustomFocus.tsx"
 
 ```
+
+### Animated modal (hasAnimations)
+
+To allow modals to animate as they open and close, set the `hasAnimations` property on the modal.
+
+```ts file="./ModalAnimated.tsx"
+
+```
+
+### Animated modal (AnimationsProvider)
+
+To enable animations globally, wrap your application with `AnimationsProvider`. All modals within the provider will animate without needing individual `hasAnimations` props.
+
+```ts file="./ModalAnimatedProvider.tsx"
+
+```

packages/react-core/src/components/Modal/examples/ModalAnimated.tsx

@@ -0,0 +1,44 @@
+import { Fragment, useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, ModalVariant } from '@patternfly/react-core';
+
+export const ModalAnimated: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen);
+  };
+
+  return (
+    <Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show animated modal
+      </Button>
+      <Modal
+        hasAnimations
+        variant={ModalVariant.large}
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        aria-labelledby="modal-animated-label"
+        aria-describedby="modal-animated-description"
+        elementToFocus="#modal-animated-confirm-button"
+      >
+        <ModalHeader title="Animated Modal Header" labelId="modal-animated-label" />
+        <ModalBody id="modal-animated-description">
+          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 id="modal-animated-confirm-button" key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </Fragment>
+  );
+};

packages/react-core/src/components/Modal/examples/ModalAnimatedProvider.tsx

@@ -0,0 +1,58 @@
+import { Fragment, useState } from 'react';
+import {
+  AnimationsProvider,
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  ModalVariant
+} from '@patternfly/react-core';
+
+export const ModalAnimatedProvider: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen);
+  };
+
+  return (
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <Fragment>
+        <Button variant="primary" onClick={handleModalToggle}>
+          Show animated modal (via AnimationsProvider)
+        </Button>
+        <Modal
+          variant={ModalVariant.large}
+          isOpen={isModalOpen}
+          onClose={handleModalToggle}
+          aria-labelledby="modal-animated-provider-label"
+          aria-describedby="modal-animated-provider-description"
+          elementToFocus="#modal-animated-provider-confirm-button"
+        >
+          <ModalHeader title="Animated Modal Header" labelId="modal-animated-provider-label" />
+          <ModalBody id="modal-animated-provider-description">
+            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
+              id="modal-animated-provider-confirm-button"
+              key="confirm"
+              variant="primary"
+              onClick={handleModalToggle}
+            >
+              Confirm
+            </Button>
+            <Button key="cancel" variant="link" onClick={handleModalToggle}>
+              Cancel
+            </Button>
+          </ModalFooter>
+        </Modal>
+      </Fragment>
+    </AnimationsProvider>
+  );
+};

packages/react-styles/src/css/components/BackdropAnimations/backdrop-animations.css

@@ -0,0 +1,31 @@
+.pf-v6-c-backdrop-animated {
+    background-color: transparent;
+    visibility: hidden;
+    pointer-events: none;
+    transition:
+    background-color 240ms cubic-bezier(0.4, 0.14, 1, 1), /* Carbon equivalent: duration-moderate-02 + motion(exit, expressive) */
+    visibility 0ms linear 240ms; /* Carbon equivalent: duration-moderate-02 */
+}
+
+.pf-v6-c-backdrop-animated-visible {
+    background-color: var(--pf-v6-c-backdrop--BackgroundColor);
+    visibility: visible;
+    pointer-events: unset;
+    transition:
+    background-color 240ms cubic-bezier(0, 0, 0.2, 1),
+    visibility 0ms linear 0ms;
+}
+
+.pf-v6-c-backdrop-animated-hidden {
+    background-color: transparent;
+    visibility: hidden;
+    pointer-events: none;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+    .pf-v6-c-backdrop-animated,
+    .pf-v6-c-backdrop-animated-visible,
+    .pf-v6-c-backdrop-animated-hidden {
+        transition: none;
+    }
+}