From 2d4c4d869cc3e0f3868b0d6a5050468e71adaa7c Mon Sep 17 00:00:00 2001
From: Gustavo Murcia <gmurcia@redhat.com>
Date: Thu, 9 Jul 2026 17:10:39 -0400
Subject: [PATCH 1/4] feat(Modal,Backdrop): Add animation support

[WIP] This is an initial and in-progress implementation of Modal and
Backdrop animation support.

These changes were cherry-picked (file-level) from branch
gmurcia/tearsheet, originating from the following commits:
  - c027e56bb chore: Initial modal/backdrop animation impl
  - 1927470f0 chore: Animation tweaks.
  - a7f41028e chore: Implement TearsheetGroup for unbounded tearsheet levels

Commit-generated-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/Backdrop/Backdrop.tsx      | 18 +++++++-
 .../react-core/src/components/Modal/Modal.tsx |  2 +
 .../src/components/Modal/ModalBox.tsx         | 10 +++++
 .../src/components/Modal/ModalContent.tsx     | 16 +++++--
 .../src/components/Modal/examples/Modal.md    | 14 +++++-
 .../Modal/examples/ModalAnimated.tsx          | 43 +++++++++++++++++++
 .../backdrop-animations.css                   | 36 ++++++++++++++++
 .../ModalAnimations/modal-animations.css      | 42 ++++++++++++++++++
 .../react-tokens/scripts/generateTokens.mjs   |  6 +--
 scripts/build-single-packages.mjs             |  1 +
 10 files changed, 179 insertions(+), 9 deletions(-)
 create mode 100644 packages/react-core/src/components/Modal/examples/ModalAnimated.tsx
 create mode 100644 packages/react-styles/src/css/components/BackdropAnimations/backdrop-animations.css
 create mode 100644 packages/react-styles/src/css/components/ModalAnimations/modal-animations.css

diff --git a/packages/react-core/src/components/Backdrop/Backdrop.tsx b/packages/react-core/src/components/Backdrop/Backdrop.tsx
index c564a8b7f53..d17bbfb3817 100644
--- a/packages/react-core/src/components/Backdrop/Backdrop.tsx
+++ b/packages/react-core/src/components/Backdrop/Backdrop.tsx
@@ -1,19 +1,35 @@
 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';
 
 export interface BackdropProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the backdrop */
   children?: React.ReactNode;
   /** Additional classes added to the backdrop */
   className?: string;
+  /** Whether the Backdrop should open/close with animations. (BETA) */
+  animated?: boolean;
+  /** Flag to show the backdrop. Used in conjunction with `animated` (BETA) */
+  isVisible?: boolean;
 }
 
 export const Backdrop: React.FunctionComponent<BackdropProps> = ({
   children = null,
   className = '',
+  animated,
+  isVisible,
   ...props
 }: BackdropProps) => (
-  <div {...props} className={css(styles.backdrop, className)}>
+  <div
+    {...props}
+    className={css(
+      styles.backdrop,
+      animated && stylesAnimated.backdropAnimated,
+      animated && isVisible === true && stylesAnimated.backdropAnimatedVisible,
+      animated && isVisible !== true && stylesAnimated.backdropAnimatedHidden,
+      className
+    )}
+  >
     {children}
   </div>
 );
diff --git a/packages/react-core/src/components/Modal/Modal.tsx b/packages/react-core/src/components/Modal/Modal.tsx
index 281c379eebc..aebfd22146e 100644
--- a/packages/react-core/src/components/Modal/Modal.tsx
+++ b/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;
+  /** Whether the Modal should open/close with animations. (BETA) */
+  animated?: boolean;
 }
 
 export enum ModalVariant {
diff --git a/packages/react-core/src/components/Modal/ModalBox.tsx b/packages/react-core/src/components/Modal/ModalBox.tsx
index ed4d4b4b24b..30eaac0518f 100644
--- a/packages/react-core/src/components/Modal/ModalBox.tsx
+++ b/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';
+  /** Whether the Modal should open/close with animations. (BETA) */
+  animated?: 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,
+  animated,
   ...props
 }: ModalBoxProps) => {
   if (positionOffset) {
@@ -46,6 +53,9 @@ export const ModalBox: React.FunctionComponent<ModalBoxProps> = ({
       aria-modal="true"
       className={css(
         styles.modalBox,
+        animated && stylesAnimated.modalAnimated,
+        animated && isOpen === true && stylesAnimated.modalAnimatedOpen,
+        animated && isOpen !== true && stylesAnimated.modalAnimatedClosed,
         className,
         position === 'top' && styles.modifiers.alignTop,
         variant === 'large' && styles.modifiers.lg,
diff --git a/packages/react-core/src/components/Modal/ModalContent.tsx b/packages/react-core/src/components/Modal/ModalContent.tsx
index 38e311c8cfa..3d6698086cb 100644
--- a/packages/react-core/src/components/Modal/ModalContent.tsx
+++ b/packages/react-core/src/components/Modal/ModalContent.tsx
@@ -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;
+  /** Whether the Modal should open/close with animations. (BETA) */
+  animated?: boolean;
 }
 
 export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
@@ -72,9 +74,10 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   ouiaSafe = true,
   elementToFocus,
   focusTrapId,
+  animated,
   ...props
 }: ModalContentProps) => {
-  if (!isOpen) {
+  if (!isOpen && !animated) {
     return null;
   }
 
@@ -91,6 +94,8 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   const modalBox = (
     <ModalBox
       className={css(className)}
+      isOpen={isOpen}
+      animated={animated}
       variant={variant}
       position={position}
       positionOffset={positionOffset}
@@ -113,10 +118,15 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
       {children}
     </ModalBox>
   );
+  let focusTrapActive = !disableFocusTrap;
+  if (animated) {
+    focusTrapActive = !disableFocusTrap && isOpen;
+  }
+
   return (
-    <Backdrop className={css(backdropClassName)} id={backdropId}>
+    <Backdrop className={css(backdropClassName)} id={backdropId} animated={animated} isVisible={isOpen}>
       <FocusTrap
-        active={!disableFocusTrap}
+        active={focusTrapActive}
         focusTrapOptions={{
           clickOutsideDeactivates: true,
           tabbableOptions: { displayCheck: 'none' },
diff --git a/packages/react-core/src/components/Modal/examples/Modal.md b/packages/react-core/src/components/Modal/examples/Modal.md
index ecfcf4bf74b..c56749af1eb 100644
--- a/packages/react-core/src/components/Modal/examples/Modal.md
+++ b/packages/react-core/src/components/Modal/examples/Modal.md
@@ -7,9 +7,10 @@ ouia: true
 ---
 
 import { Fragment, useRef, useState } from 'react';
-import RhUiWarningIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-icon';
+import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 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 HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import formStyles from '@patternfly/react-styles/css/components/Form/form';
 
 ## Examples
@@ -154,3 +155,12 @@ To customize which element inside the modal receives focus when initially opened
 ```ts file="./ModalCustomFocus.tsx"
 
 ```
+
+### Animated modal
+
+To allow modals to animate as they open and close, set the `animated` property accordingly.
+_Animated modals may have an impact on rendering performance_
+
+```ts file="./ModalAnimated.tsx"
+
+```
diff --git a/packages/react-core/src/components/Modal/examples/ModalAnimated.tsx b/packages/react-core/src/components/Modal/examples/ModalAnimated.tsx
new file mode 100644
index 00000000000..dc9cc78531e
--- /dev/null
+++ b/packages/react-core/src/components/Modal/examples/ModalAnimated.tsx
@@ -0,0 +1,43 @@
+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
+        animated
+        variant={ModalVariant.large}
+        isOpen={isModalOpen}
+        aria-labelledby="modal-animated-label"
+        aria-describedby="modal-animated-description"
+        elementToFocus="#modal-custom-focus-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-custom-focus-confirm-button" key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </Fragment>
+  );
+};
diff --git a/packages/react-styles/src/css/components/BackdropAnimations/backdrop-animations.css b/packages/react-styles/src/css/components/BackdropAnimations/backdrop-animations.css
new file mode 100644
index 00000000000..c76f0cc4015
--- /dev/null
+++ b/packages/react-styles/src/css/components/BackdropAnimations/backdrop-animations.css
@@ -0,0 +1,36 @@
+.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;
+}
+
+/* TODO [Gustavo]: My local setup has reduced animations at the OS level which kicks this media query on.
+     Chrome doesn't have an easy way to FORCE animations on in this case so commenting this out for now.
+     It should be enabled if PR is merged in. */
+/* *
+@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;
+    }
+}
+/* */
diff --git a/packages/react-styles/src/css/components/ModalAnimations/modal-animations.css b/packages/react-styles/src/css/components/ModalAnimations/modal-animations.css
new file mode 100644
index 00000000000..b22cb28b5e6
--- /dev/null
+++ b/packages/react-styles/src/css/components/ModalAnimations/modal-animations.css
@@ -0,0 +1,42 @@
+.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);
+}
+
+/* TODO [Gustavo]: My local setup has reduced animations at the OS level which kicks this media query on.
+     Chrome doesn't have an easy way to FORCE animations on in this case so commenting this out for now.
+     It should be enabled if PR is merged in. */
+/* *
+@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;
+    }
+}
+/* */
diff --git a/packages/react-tokens/scripts/generateTokens.mjs b/packages/react-tokens/scripts/generateTokens.mjs
index 8da03dcdfd7..a5943f5f5c3 100644
--- a/packages/react-tokens/scripts/generateTokens.mjs
+++ b/packages/react-tokens/scripts/generateTokens.mjs
@@ -33,11 +33,11 @@ const getDeclarations = (cssAst) =>
     .reduce((acc, val) => acc.concat(val), []); // flatten
 
 const formatFilePathToName = (filePath) => {
-  // const filePathArr = filePath.split('/');
+  const normalizedPath = filePath.replace(/\\/g, '/');
   let prefix = '';
-  if (filePath.includes('components/')) {
+  if (normalizedPath.includes('components/')) {
     prefix = 'c_';
-  } else if (filePath.includes('layouts/')) {
+  } else if (normalizedPath.includes('layouts/')) {
     prefix = 'l_';
   }
   return `${prefix}${basename(filePath, '.css').replace(/-+/g, '_')}`;
diff --git a/scripts/build-single-packages.mjs b/scripts/build-single-packages.mjs
index afa1bfd3c13..54e65142217 100644
--- a/scripts/build-single-packages.mjs
+++ b/scripts/build-single-packages.mjs
@@ -43,6 +43,7 @@ const components = {
 };
 
 async function createPackage(component) {
+  component = component.replaceAll('\\', '/');
   const cmds = [];
   let destFile = component.replace(/[^/]+\.js$/g, 'package.json').replace('/dist/esm/', '/dist/dynamic/');
 

From bcfd6b4995422e0cbd01f06b0d1e2a05ea9d4333 Mon Sep 17 00:00:00 2001
From: Gustavo Murcia <gmurcia@redhat.com>
Date: Thu, 9 Jul 2026 19:36:21 -0400
Subject: [PATCH 2/4] refactor: Previous ad-hoc animation impl now aligns with
 standard PF AnimationsProvider + hooks

Replace custom `animated` prop with `hasAnimations` across Modal,
ModalContent, ModalBox, and Backdrop. Wire up `useHasAnimations` hook
in ModalContent and Backdrop so both participate in AnimationsProvider
context. Add second example demonstrating the AnimationsProvider path.

Generated-by: Claude <noreply@anthropic.com>
Co-authored-by: Claude <noreply@anthropic.com>
---
 .../src/components/Backdrop/Backdrop.tsx      | 41 +++++++------
 .../react-core/src/components/Modal/Modal.tsx |  4 +-
 .../src/components/Modal/ModalBox.tsx         | 12 ++--
 .../src/components/Modal/ModalContent.tsx     | 18 +++---
 .../src/components/Modal/examples/Modal.md    | 13 ++++-
 .../Modal/examples/ModalAnimated.tsx          |  6 +-
 .../Modal/examples/ModalAnimatedProvider.tsx  | 57 +++++++++++++++++++
 7 files changed, 111 insertions(+), 40 deletions(-)
 create mode 100644 packages/react-core/src/components/Modal/examples/ModalAnimatedProvider.tsx

diff --git a/packages/react-core/src/components/Backdrop/Backdrop.tsx b/packages/react-core/src/components/Backdrop/Backdrop.tsx
index d17bbfb3817..3dea142179b 100644
--- a/packages/react-core/src/components/Backdrop/Backdrop.tsx
+++ b/packages/react-core/src/components/Backdrop/Backdrop.tsx
@@ -1,36 +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;
-  /** Whether the Backdrop should open/close with animations. (BETA) */
-  animated?: boolean;
-  /** Flag to show the backdrop. Used in conjunction with `animated` (BETA) */
+  /** 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 = '',
-  animated,
+  hasAnimations: hasAnimationsProp,
   isVisible,
   ...props
-}: BackdropProps) => (
-  <div
-    {...props}
-    className={css(
-      styles.backdrop,
-      animated && stylesAnimated.backdropAnimated,
-      animated && isVisible === true && stylesAnimated.backdropAnimatedVisible,
-      animated && isVisible !== true && stylesAnimated.backdropAnimatedHidden,
-      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';
diff --git a/packages/react-core/src/components/Modal/Modal.tsx b/packages/react-core/src/components/Modal/Modal.tsx
index aebfd22146e..bb916ef52ed 100644
--- a/packages/react-core/src/components/Modal/Modal.tsx
+++ b/packages/react-core/src/components/Modal/Modal.tsx
@@ -53,8 +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;
-  /** Whether the Modal should open/close with animations. (BETA) */
-  animated?: boolean;
+  /** Flag indicating whether animations are enabled. */
+  hasAnimations?: boolean;
 }
 
 export enum ModalVariant {
diff --git a/packages/react-core/src/components/Modal/ModalBox.tsx b/packages/react-core/src/components/Modal/ModalBox.tsx
index 30eaac0518f..17d8a0b3a8d 100644
--- a/packages/react-core/src/components/Modal/ModalBox.tsx
+++ b/packages/react-core/src/components/Modal/ModalBox.tsx
@@ -20,8 +20,8 @@ export interface ModalBoxProps extends React.HTMLProps<HTMLDivElement> {
   positionOffset?: string;
   /** Variant of the modal. */
   variant?: 'small' | 'medium' | 'large' | 'default';
-  /** Whether the Modal should open/close with animations. (BETA) */
-  animated?: boolean;
+  /** Flag indicating whether animations are enabled. */
+  hasAnimations?: boolean;
   /** Flag to show the modal. */
   isOpen?: boolean;
 }
@@ -37,7 +37,7 @@ export const ModalBox: React.FunctionComponent<ModalBoxProps> = ({
   'aria-describedby': ariaDescribedby,
   style,
   isOpen,
-  animated,
+  hasAnimations,
   ...props
 }: ModalBoxProps) => {
   if (positionOffset) {
@@ -53,9 +53,9 @@ export const ModalBox: React.FunctionComponent<ModalBoxProps> = ({
       aria-modal="true"
       className={css(
         styles.modalBox,
-        animated && stylesAnimated.modalAnimated,
-        animated && isOpen === true && stylesAnimated.modalAnimatedOpen,
-        animated && isOpen !== true && stylesAnimated.modalAnimatedClosed,
+        hasAnimations && stylesAnimated.modalAnimated,
+        hasAnimations && isOpen === true && stylesAnimated.modalAnimatedOpen,
+        hasAnimations && isOpen !== true && stylesAnimated.modalAnimatedClosed,
         className,
         position === 'top' && styles.modifiers.alignTop,
         variant === 'large' && styles.modifiers.lg,
diff --git a/packages/react-core/src/components/Modal/ModalContent.tsx b/packages/react-core/src/components/Modal/ModalContent.tsx
index 3d6698086cb..499959b4ab9 100644
--- a/packages/react-core/src/components/Modal/ModalContent.tsx
+++ b/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,8 +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;
-  /** Whether the Modal should open/close with animations. (BETA) */
-  animated?: boolean;
+  /** Flag indicating whether animations are enabled. */
+  hasAnimations?: boolean;
 }
 
 export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
@@ -74,10 +74,12 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   ouiaSafe = true,
   elementToFocus,
   focusTrapId,
-  animated,
+  hasAnimations: hasAnimationsProp,
   ...props
 }: ModalContentProps) => {
-  if (!isOpen && !animated) {
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
+
+  if (!isOpen && !hasAnimations) {
     return null;
   }
 
@@ -95,7 +97,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
     <ModalBox
       className={css(className)}
       isOpen={isOpen}
-      animated={animated}
+      hasAnimations={hasAnimations}
       variant={variant}
       position={position}
       positionOffset={positionOffset}
@@ -119,12 +121,12 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
     </ModalBox>
   );
   let focusTrapActive = !disableFocusTrap;
-  if (animated) {
+  if (hasAnimations) {
     focusTrapActive = !disableFocusTrap && isOpen;
   }
 
   return (
-    <Backdrop className={css(backdropClassName)} id={backdropId} animated={animated} isVisible={isOpen}>
+    <Backdrop className={css(backdropClassName)} id={backdropId} hasAnimations={hasAnimations} isVisible={isOpen}>
       <FocusTrap
         active={focusTrapActive}
         focusTrapOptions={{
diff --git a/packages/react-core/src/components/Modal/examples/Modal.md b/packages/react-core/src/components/Modal/examples/Modal.md
index c56749af1eb..75e2c8ab8e5 100644
--- a/packages/react-core/src/components/Modal/examples/Modal.md
+++ b/packages/react-core/src/components/Modal/examples/Modal.md
@@ -156,11 +156,18 @@ To customize which element inside the modal receives focus when initially opened
 
 ```
 
-### Animated modal
+### Animated modal (hasAnimations)
 
-To allow modals to animate as they open and close, set the `animated` property accordingly.
-_Animated modals may have an impact on rendering performance_
+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"
+
+```
diff --git a/packages/react-core/src/components/Modal/examples/ModalAnimated.tsx b/packages/react-core/src/components/Modal/examples/ModalAnimated.tsx
index dc9cc78531e..79bd114b943 100644
--- a/packages/react-core/src/components/Modal/examples/ModalAnimated.tsx
+++ b/packages/react-core/src/components/Modal/examples/ModalAnimated.tsx
@@ -14,12 +14,12 @@ export const ModalAnimated: React.FunctionComponent = () => {
         Show animated modal
       </Button>
       <Modal
-        animated
+        hasAnimations
         variant={ModalVariant.large}
         isOpen={isModalOpen}
         aria-labelledby="modal-animated-label"
         aria-describedby="modal-animated-description"
-        elementToFocus="#modal-custom-focus-confirm-button"
+        elementToFocus="#modal-animated-confirm-button"
       >
         <ModalHeader title="Animated Modal Header" labelId="modal-animated-label" />
         <ModalBody id="modal-animated-description">
@@ -30,7 +30,7 @@ export const ModalAnimated: React.FunctionComponent = () => {
           est laborum.
         </ModalBody>
         <ModalFooter>
-          <Button id="modal-custom-focus-confirm-button" key="confirm" variant="primary" onClick={handleModalToggle}>
+          <Button id="modal-animated-confirm-button" key="confirm" variant="primary" onClick={handleModalToggle}>
             Confirm
           </Button>
           <Button key="cancel" variant="link" onClick={handleModalToggle}>
diff --git a/packages/react-core/src/components/Modal/examples/ModalAnimatedProvider.tsx b/packages/react-core/src/components/Modal/examples/ModalAnimatedProvider.tsx
new file mode 100644
index 00000000000..eda7ef31c08
--- /dev/null
+++ b/packages/react-core/src/components/Modal/examples/ModalAnimatedProvider.tsx
@@ -0,0 +1,57 @@
+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}
+          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>
+  );
+};

From df1305e68e808bc3915918b3aeebf794bf471466 Mon Sep 17 00:00:00 2001
From: Gustavo Murcia <gmurcia@redhat.com>
Date: Thu, 9 Jul 2026 19:50:42 -0400
Subject: [PATCH 3/4] chore: Cleanup

---
 packages/react-core/src/components/Modal/examples/Modal.md   | 4 +---
 .../components/BackdropAnimations/backdrop-animations.css    | 5 -----
 .../src/css/components/ModalAnimations/modal-animations.css  | 5 -----
 3 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/packages/react-core/src/components/Modal/examples/Modal.md b/packages/react-core/src/components/Modal/examples/Modal.md
index 75e2c8ab8e5..f2727587cf5 100644
--- a/packages/react-core/src/components/Modal/examples/Modal.md
+++ b/packages/react-core/src/components/Modal/examples/Modal.md
@@ -7,10 +7,8 @@ ouia: true
 ---
 
 import { Fragment, useRef, useState } from 'react';
-import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
-import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
+import RhUiWarningIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-icon';
 import RhUiAttentionBellFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-attention-bell-fill-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import formStyles from '@patternfly/react-styles/css/components/Form/form';
 
 ## Examples
diff --git a/packages/react-styles/src/css/components/BackdropAnimations/backdrop-animations.css b/packages/react-styles/src/css/components/BackdropAnimations/backdrop-animations.css
index c76f0cc4015..4ca23410911 100644
--- a/packages/react-styles/src/css/components/BackdropAnimations/backdrop-animations.css
+++ b/packages/react-styles/src/css/components/BackdropAnimations/backdrop-animations.css
@@ -22,10 +22,6 @@
     pointer-events: none;
 }
 
-/* TODO [Gustavo]: My local setup has reduced animations at the OS level which kicks this media query on.
-     Chrome doesn't have an easy way to FORCE animations on in this case so commenting this out for now.
-     It should be enabled if PR is merged in. */
-/* *
 @media screen and (prefers-reduced-motion: reduce) {
     .pf-v6-c-backdrop-animated,
     .pf-v6-c-backdrop-animated-visible,
@@ -33,4 +29,3 @@
         transition: none;
     }
 }
-/* */
diff --git a/packages/react-styles/src/css/components/ModalAnimations/modal-animations.css b/packages/react-styles/src/css/components/ModalAnimations/modal-animations.css
index b22cb28b5e6..e03c3f0f98b 100644
--- a/packages/react-styles/src/css/components/ModalAnimations/modal-animations.css
+++ b/packages/react-styles/src/css/components/ModalAnimations/modal-animations.css
@@ -28,10 +28,6 @@
     transform: translate3d(0, -24px, 0);
 }
 
-/* TODO [Gustavo]: My local setup has reduced animations at the OS level which kicks this media query on.
-     Chrome doesn't have an easy way to FORCE animations on in this case so commenting this out for now.
-     It should be enabled if PR is merged in. */
-/* *
 @media screen and (prefers-reduced-motion: reduce) {
     .pf-v6-c-modal-animated,
     .pf-v6-c-modal-animated-open,
@@ -39,4 +35,3 @@
         transition: none;
     }
 }
-/* */

From fa54f31d3aedb5c130a663fad75240cc79369a01 Mon Sep 17 00:00:00 2001
From: Gustavo Murcia <gmurcia@redhat.com>
Date: Thu, 9 Jul 2026 20:37:21 -0400
Subject: [PATCH 4/4] chore: PR feedback

- Add missing onClose handler to ModalAnimated example
- Add missing onClose handler to ModalAnimatedProvider example

Generated-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../react-core/src/components/Modal/examples/ModalAnimated.tsx   | 1 +
 .../src/components/Modal/examples/ModalAnimatedProvider.tsx      | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/react-core/src/components/Modal/examples/ModalAnimated.tsx b/packages/react-core/src/components/Modal/examples/ModalAnimated.tsx
index 79bd114b943..96a289e6c6f 100644
--- a/packages/react-core/src/components/Modal/examples/ModalAnimated.tsx
+++ b/packages/react-core/src/components/Modal/examples/ModalAnimated.tsx
@@ -17,6 +17,7 @@ export const ModalAnimated: React.FunctionComponent = () => {
         hasAnimations
         variant={ModalVariant.large}
         isOpen={isModalOpen}
+        onClose={handleModalToggle}
         aria-labelledby="modal-animated-label"
         aria-describedby="modal-animated-description"
         elementToFocus="#modal-animated-confirm-button"
diff --git a/packages/react-core/src/components/Modal/examples/ModalAnimatedProvider.tsx b/packages/react-core/src/components/Modal/examples/ModalAnimatedProvider.tsx
index eda7ef31c08..66a800e7acc 100644
--- a/packages/react-core/src/components/Modal/examples/ModalAnimatedProvider.tsx
+++ b/packages/react-core/src/components/Modal/examples/ModalAnimatedProvider.tsx
@@ -25,6 +25,7 @@ export const ModalAnimatedProvider: React.FunctionComponent = () => {
         <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"