From 49bcb04e0d573bafeec0dcdf15e9af734700bb64 Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Wed, 3 Sep 2025 11:13:45 -0400
Subject: [PATCH 1/5] feat(AnimationsProvider): update opt-in components with
 useHasAnimations, add AnimationsProvider to helpers, add md files for
 documentation

fix(components): update hasAnimations to fall back to context

fix(md): remove cssPrefix

fix(alertgroup): fix tests
---
 .../src/components/Alert/AlertGroup.tsx       | 122 +++++++------
 .../src/components/Alert/AlertGroupInline.tsx |   4 +-
 .../Alert/__tests__/AlertGroup.test.tsx       |  12 +-
 .../DualListSelector/DualListSelector.tsx     |  71 ++++----
 .../DualListSelectorTreeItem.tsx              |   4 +-
 .../Form/FormFieldGroupExpandable.tsx         |   4 +-
 .../Form/InternalFormFieldGroup.tsx           |   4 +-
 .../components/SearchInput/SearchInput.tsx    |   4 +-
 .../src/components/TreeView/TreeView.tsx      |   4 +-
 .../components/TreeView/TreeViewListItem.tsx  |   4 +-
 .../__snapshots__/TreeView.test.tsx.snap      |   2 +-
 .../AnimationsProvider/AnimationsProvider.tsx | 105 ++++++++++++
 .../__tests__/AnimationsProvider.test.tsx     | 134 +++++++++++++++
 .../examples/AnimationsProvider.md            | 161 ++++++++++++++++++
 .../examples/AnimationsProviderBasic.tsx      |  69 ++++++++
 .../src/helpers/AnimationsProvider/index.ts   |   1 +
 packages/react-core/src/helpers/index.ts      |   1 +
 .../src/components/Table/Table.tsx            |   4 +-
 18 files changed, 595 insertions(+), 115 deletions(-)
 create mode 100644 packages/react-core/src/helpers/AnimationsProvider/AnimationsProvider.tsx
 create mode 100644 packages/react-core/src/helpers/AnimationsProvider/__tests__/AnimationsProvider.test.tsx
 create mode 100644 packages/react-core/src/helpers/AnimationsProvider/examples/AnimationsProvider.md
 create mode 100644 packages/react-core/src/helpers/AnimationsProvider/examples/AnimationsProviderBasic.tsx
 create mode 100644 packages/react-core/src/helpers/AnimationsProvider/index.ts

diff --git a/packages/react-core/src/components/Alert/AlertGroup.tsx b/packages/react-core/src/components/Alert/AlertGroup.tsx
index 26028c1e16b..ed845ac32dc 100644
--- a/packages/react-core/src/components/Alert/AlertGroup.tsx
+++ b/packages/react-core/src/components/Alert/AlertGroup.tsx
@@ -1,7 +1,8 @@
-import { Component } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import * as ReactDOM from 'react-dom';
 import { canUseDOM } from '../../helpers';
 import { AlertGroupInline } from './AlertGroupInline';
+import { useHasAnimations } from '../../helpers';
 
 export interface AlertGroupProps extends Omit<React.HTMLProps<HTMLUListElement>, 'className'> {
   /** Additional classes added to the AlertGroup */
@@ -26,78 +27,73 @@ export interface AlertGroupProps extends Omit<React.HTMLProps<HTMLUListElement>,
   'aria-label'?: string;
 }
 
-interface AlertGroupState {
-  container: HTMLElement;
-}
-
-class AlertGroup extends Component<AlertGroupProps, AlertGroupState> {
-  static displayName = 'AlertGroup';
-  state = {
-    container: undefined
-  } as AlertGroupState;
-
-  componentDidMount() {
-    const container = document.createElement('div');
-    const target: HTMLElement = this.getTargetElement();
-    this.setState({ container });
-    target.appendChild(container);
-  }
+export const AlertGroup: React.FunctionComponent<AlertGroupProps> = ({
+  className,
+  children,
+  hasAnimations: localHasAnimations,
+  isToast,
+  isLiveRegion,
+  onOverflowClick,
+  overflowMessage,
+  'aria-label': ariaLabel,
 
-  componentWillUnmount() {
-    const target: HTMLElement = this.getTargetElement();
-    if (this.state.container) {
-      target.removeChild(this.state.container);
-    }
-  }
+  appendTo, // do not pass down to ul
+  ...props
+}: AlertGroupProps) => {
+  const containerRef = useRef<HTMLElement | null>(null);
+  const [isContainerReady, setIsContainerReady] = useState(false);
+  const hasAnimations = useHasAnimations(localHasAnimations);
 
-  getTargetElement() {
-    const appendTo = this.props.appendTo;
+  const getTargetElement = () => {
     if (typeof appendTo === 'function') {
       return appendTo();
     }
     return appendTo || document.body;
-  }
+  };
+
+  useEffect(() => {
+    if (isToast && canUseDOM) {
+      const container = document.createElement('div');
+      const target = getTargetElement();
+      containerRef.current = container;
+      target.appendChild(container);
+      setIsContainerReady(true);
 
-  render() {
-    const {
-      className,
-      children,
-      hasAnimations = false,
-      isToast,
-      isLiveRegion,
-      onOverflowClick,
-      overflowMessage,
-      'aria-label': ariaLabel,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      appendTo, // do not pass down to ul
-      ...props
-    } = this.props;
-    const alertGroup = (
-      <AlertGroupInline
-        onOverflowClick={onOverflowClick}
-        className={className}
-        isToast={isToast}
-        isLiveRegion={isLiveRegion}
-        overflowMessage={overflowMessage}
-        aria-label={ariaLabel}
-        hasAnimations={hasAnimations}
-        {...props}
-      >
-        {children}
-      </AlertGroupInline>
-    );
-    if (!this.props.isToast) {
-      return alertGroup;
+      return () => {
+        if (containerRef.current) {
+          target.removeChild(containerRef.current);
+          containerRef.current = null;
+        }
+        setIsContainerReady(false);
+      };
     }
+  }, [isToast, appendTo]);
 
-    const container = this.state.container;
+  const alertGroup = (
+    <AlertGroupInline
+      onOverflowClick={onOverflowClick}
+      className={className}
+      isToast={isToast}
+      isLiveRegion={isLiveRegion}
+      overflowMessage={overflowMessage}
+      aria-label={ariaLabel}
+      hasAnimations={hasAnimations}
+      {...props}
+    >
+      {children}
+    </AlertGroupInline>
+  );
 
-    if (!canUseDOM || !container) {
-      return null;
-    }
+  if (!isToast) {
+    return alertGroup;
+  }
+
+  const container = containerRef.current;
 
-    return ReactDOM.createPortal(alertGroup, container);
+  if (!canUseDOM || !container || !isContainerReady) {
+    return null;
   }
-}
 
-export { AlertGroup };
+  return ReactDOM.createPortal(alertGroup, container);
+};
+AlertGroup.displayName = 'AlertGroup';
diff --git a/packages/react-core/src/components/Alert/AlertGroupInline.tsx b/packages/react-core/src/components/Alert/AlertGroupInline.tsx
index 95622162b11..391647de280 100644
--- a/packages/react-core/src/components/Alert/AlertGroupInline.tsx
+++ b/packages/react-core/src/components/Alert/AlertGroupInline.tsx
@@ -4,17 +4,19 @@ import styles from '@patternfly/react-styles/css/components/Alert/alert-group';
 import { AlertGroupProps } from './AlertGroup';
 import { AlertProps } from '../Alert';
 import { AlertGroupContext } from './AlertGroupContext';
+import { useHasAnimations } from '../../helpers';
 
 export const AlertGroupInline: React.FunctionComponent<AlertGroupProps> = ({
   className,
   children,
-  hasAnimations,
+  hasAnimations: localHasAnimations,
   isToast,
   isLiveRegion,
   onOverflowClick,
   overflowMessage,
   ...props
 }: AlertGroupProps) => {
+  const hasAnimations = useHasAnimations(localHasAnimations);
   const [handleTransitionEnd, setHandleTransitionEnd] = useState<() => void>(() => () => {});
 
   const updateTransitionEnd = (onTransitionEnd: () => void) => {
diff --git a/packages/react-core/src/components/Alert/__tests__/AlertGroup.test.tsx b/packages/react-core/src/components/Alert/__tests__/AlertGroup.test.tsx
index 4b5bade997a..aca2c9a8fcd 100644
--- a/packages/react-core/src/components/Alert/__tests__/AlertGroup.test.tsx
+++ b/packages/react-core/src/components/Alert/__tests__/AlertGroup.test.tsx
@@ -56,14 +56,16 @@ test('Standard Alert Group is not a toast alert group', () => {
   expect(screen.getByText('alert title').parentElement).not.toHaveClass('pf-m-toast');
 });
 
-test('Toast Alert Group contains expected modifier class', () => {
+test('Toast Alert Group contains expected modifier class', async () => {
   render(
     <AlertGroup isToast aria-label="group label">
       <Alert variant="warning" title="alert title" />
     </AlertGroup>
   );
 
-  expect(screen.getByLabelText('group label')).toHaveClass('pf-m-toast');
+  // Wait for the portal to be created and rendered
+  const alertGroup = await screen.findByLabelText('group label');
+  expect(alertGroup).toHaveClass('pf-m-toast');
 });
 
 test('Calls the callback set by updateTransitionEnd when transition ends and animations are enabled', async () => {
@@ -90,7 +92,8 @@ test('Calls the callback set by updateTransitionEnd when transition ends and ani
     </AlertGroup>
   );
 
-  await user.click(screen.getByLabelText('Close'));
+  const closeButton = await screen.findByLabelText('Close');
+  await user.click(closeButton);
   expect(mockCallback).not.toHaveBeenCalled();
   fireEvent.transitionEnd(screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item') as HTMLElement);
   expect(mockCallback).toHaveBeenCalled();
@@ -120,7 +123,8 @@ test('Does not call the callback set by updateTransitionEnd when transition ends
     </AlertGroup>
   );
 
-  await user.click(screen.getByLabelText('Close'));
+  const closeButton = await screen.findByLabelText('Close');
+  await user.click(closeButton);
   expect(mockCallback).toHaveBeenCalledTimes(1);
   // The transitionend event firing should not cause the callback to be called again
   fireEvent.transitionEnd(screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item') as HTMLElement);
diff --git a/packages/react-core/src/components/DualListSelector/DualListSelector.tsx b/packages/react-core/src/components/DualListSelector/DualListSelector.tsx
index a8eed78a257..6e4aa6fb69b 100644
--- a/packages/react-core/src/components/DualListSelector/DualListSelector.tsx
+++ b/packages/react-core/src/components/DualListSelector/DualListSelector.tsx
@@ -1,8 +1,8 @@
-import { Component } from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
-import { GenerateId, PickOptional } from '../../helpers';
+import { GenerateId } from '../../helpers';
 import { DualListSelectorContext } from './DualListSelectorContext';
+import { useHasAnimations } from '../../helpers';
 
 /** Acts as a container for all other DualListSelector sub-components when using a
  * composable dual list selector.
@@ -24,41 +24,34 @@ export interface DualListSelectorProps {
   hasAnimations?: boolean;
 }
 
-class DualListSelector extends Component<DualListSelectorProps> {
-  static displayName = 'DualListSelector';
-  static defaultProps: PickOptional<DualListSelectorProps> = {
-    children: '',
-    isTree: false,
-    hasAnimations: false
-  };
+export const DualListSelector: React.FunctionComponent<DualListSelectorProps> = ({
+  className,
+  children,
+  id,
+  isTree = false,
+  hasAnimations: localHasAnimations,
+  ...props
+}: DualListSelectorProps) => {
+  const hasAnimations = useHasAnimations(localHasAnimations);
 
-  constructor(props: DualListSelectorProps) {
-    super(props);
-  }
-
-  render() {
-    const { className, children, id, isTree, hasAnimations, ...props } = this.props;
-
-    return (
-      <DualListSelectorContext.Provider value={{ isTree, hasAnimations }}>
-        <GenerateId>
-          {(randomId) => (
-            <div
-              className={css(
-                styles.dualListSelector,
-                hasAnimations && isTree && styles.modifiers.animateExpand,
-                className
-              )}
-              id={id || randomId}
-              {...props}
-            >
-              {children}
-            </div>
-          )}
-        </GenerateId>
-      </DualListSelectorContext.Provider>
-    );
-  }
-}
-
-export { DualListSelector };
+  return (
+    <DualListSelectorContext.Provider value={{ isTree, hasAnimations }}>
+      <GenerateId>
+        {(randomId) => (
+          <div
+            className={css(
+              styles.dualListSelector,
+              hasAnimations && isTree && styles.modifiers.animateExpand,
+              className
+            )}
+            id={id || randomId}
+            {...props}
+          >
+            {children}
+          </div>
+        )}
+      </GenerateId>
+    </DualListSelectorContext.Provider>
+  );
+};
+DualListSelector.displayName = 'DualListSelector';
diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorTreeItem.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorTreeItem.tsx
index 94141f9f38e..d9fd32082da 100644
--- a/packages/react-core/src/components/DualListSelector/DualListSelectorTreeItem.tsx
+++ b/packages/react-core/src/components/DualListSelector/DualListSelectorTreeItem.tsx
@@ -6,6 +6,7 @@ import { Badge } from '../Badge';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { flattenTree } from './treeUtils';
 import { DualListSelectorListContext } from './DualListSelectorContext';
+import { useHasAnimations } from '../../helpers';
 
 export interface DualListSelectorTreeItemProps extends React.HTMLProps<HTMLLIElement> {
   /** Content rendered inside the dual list selector. */
@@ -58,7 +59,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
   badgeProps,
   itemData,
   isDisabled = false,
-  hasAnimations,
+  hasAnimations: localHasAnimations,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   useMemo,
   ...props
@@ -66,6 +67,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
   const ref = useRef(null);
   const [isExpanded, setIsExpanded] = useState(defaultExpanded || false);
   const { setFocusedOption } = useContext(DualListSelectorListContext);
+  const hasAnimations = useHasAnimations(localHasAnimations);
 
   useEffect(() => {
     setIsExpanded(defaultExpanded);
diff --git a/packages/react-core/src/components/Form/FormFieldGroupExpandable.tsx b/packages/react-core/src/components/Form/FormFieldGroupExpandable.tsx
index 369a5adf3fc..bd0e7f9e21d 100644
--- a/packages/react-core/src/components/Form/FormFieldGroupExpandable.tsx
+++ b/packages/react-core/src/components/Form/FormFieldGroupExpandable.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { InternalFormFieldGroup } from './InternalFormFieldGroup';
+import { useHasAnimations } from '../../helpers';
 
 export interface FormFieldGroupExpandableProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {
   /** Anything that can be rendered as form field group content. */
@@ -25,10 +26,11 @@ export const FormFieldGroupExpandable: React.FunctionComponent<FormFieldGroupExp
   header,
   isExpanded = false,
   toggleAriaLabel,
-  hasAnimations,
+  hasAnimations: localHasAnimations,
   ...props
 }: FormFieldGroupExpandableProps) => {
   const [localIsExpanded, setIsExpanded] = useState(isExpanded);
+  const hasAnimations = useHasAnimations(localHasAnimations);
 
   return (
     <InternalFormFieldGroup
diff --git a/packages/react-core/src/components/Form/InternalFormFieldGroup.tsx b/packages/react-core/src/components/Form/InternalFormFieldGroup.tsx
index 100e4bde1a1..39f6749a028 100644
--- a/packages/react-core/src/components/Form/InternalFormFieldGroup.tsx
+++ b/packages/react-core/src/components/Form/InternalFormFieldGroup.tsx
@@ -2,6 +2,7 @@ import styles from '@patternfly/react-styles/css/components/Form/form';
 import { css } from '@patternfly/react-styles';
 import { FormFieldGroupToggle } from './FormFieldGroupToggle';
 import { GenerateId } from '../../helpers';
+import { useHasAnimations } from '../../helpers';
 
 export interface InternalFormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label' | 'onToggle'> {
   /** Anything that can be rendered as form field group content. */
@@ -33,9 +34,10 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
   isExpanded,
   onToggle,
   toggleAriaLabel,
-  hasAnimations,
+  hasAnimations: localHasAnimations,
   ...props
 }: InternalFormFieldGroupProps) => {
+  const hasAnimations = useHasAnimations(localHasAnimations);
   const headerTitleText = header ? header.props.titleText : null;
   if (isExpandable && !toggleAriaLabel && !headerTitleText) {
     // eslint-disable-next-line no-console
diff --git a/packages/react-core/src/components/SearchInput/SearchInput.tsx b/packages/react-core/src/components/SearchInput/SearchInput.tsx
index ddb9f96a1dd..c85d49b0f60 100644
--- a/packages/react-core/src/components/SearchInput/SearchInput.tsx
+++ b/packages/react-core/src/components/SearchInput/SearchInput.tsx
@@ -13,6 +13,7 @@ import { AdvancedSearchMenu } from './AdvancedSearchMenu';
 import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities } from '../TextInputGroup';
 import { InputGroup, InputGroupItem } from '../InputGroup';
 import { Popper } from '../../helpers';
+import { useHasAnimations } from '../../helpers';
 import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 import inputGroupStyles from '@patternfly/react-styles/css/components/InputGroup/input-group';
 
@@ -180,7 +181,8 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   const popperRef = useRef(null);
   const [focusAfterExpandChange, setFocusAfterExpandChange] = useState(false);
 
-  const { isExpanded, onToggleExpand, toggleAriaLabel, hasAnimations } = expandableInput || {};
+  const { isExpanded, onToggleExpand, toggleAriaLabel, hasAnimations: localHasAnimations } = expandableInput || {};
+  const hasAnimations = useHasAnimations(localHasAnimations);
 
   useEffect(() => {
     // this effect and the focusAfterExpandChange variable are needed to focus the input/toggle as needed when the
diff --git a/packages/react-core/src/components/TreeView/TreeView.tsx b/packages/react-core/src/components/TreeView/TreeView.tsx
index 890a86782ba..ebd57522277 100644
--- a/packages/react-core/src/components/TreeView/TreeView.tsx
+++ b/packages/react-core/src/components/TreeView/TreeView.tsx
@@ -1,6 +1,7 @@
 import { TreeViewList } from './TreeViewList';
 import { TreeViewCheckProps, TreeViewListItem } from './TreeViewListItem';
 import { TreeViewRoot } from './TreeViewRoot';
+import { useHasAnimations } from '../../helpers';
 
 /** Properties that make up a tree view data item. These properties should be passed in as an
  * object to one of the various tree view component properties which accept TreeViewDataItem as
@@ -135,9 +136,10 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
   useMemo,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledby,
-  hasAnimations,
+  hasAnimations: localHasAnimations,
   ...props
 }: TreeViewProps) => {
+  const hasAnimations = useHasAnimations(localHasAnimations);
   const treeViewList = (
     <TreeViewList
       isNested={isNested}
diff --git a/packages/react-core/src/components/TreeView/TreeViewListItem.tsx b/packages/react-core/src/components/TreeView/TreeViewListItem.tsx
index 841f3f602b5..feefa3eb111 100644
--- a/packages/react-core/src/components/TreeView/TreeViewListItem.tsx
+++ b/packages/react-core/src/components/TreeView/TreeViewListItem.tsx
@@ -5,6 +5,7 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
 import { TreeViewDataItem } from './TreeView';
 import { Badge } from '../Badge';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+import { useHasAnimations } from '../../helpers';
 
 export interface TreeViewCheckProps extends Omit<Partial<React.InputHTMLAttributes<HTMLInputElement>>, 'checked'> {
   checked?: boolean | null;
@@ -102,10 +103,11 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
   expandedIcon,
   action,
   compareItems,
-  hasAnimations,
+  hasAnimations: localHasAnimations,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   useMemo
 }: TreeViewListItemProps) => {
+  const hasAnimations = useHasAnimations(localHasAnimations);
   const [internalIsExpanded, setIsExpanded] = useState(defaultExpanded);
   useEffect(() => {
     if (isExpanded !== undefined && isExpanded !== null) {
diff --git a/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap b/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap
index 8b523ae077c..6f0bf3de7c5 100644
--- a/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap
+++ b/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap
@@ -105,7 +105,7 @@ exports[`Matches snapshot 1`] = `
               TreeViewListItem useMemo: undefined
             </p>
             <p>
-              TreeViewListItem hasAnimations: undefined
+              TreeViewListItem hasAnimations: false
             </p>
             <button>
               compareItems clicker
diff --git a/packages/react-core/src/helpers/AnimationsProvider/AnimationsProvider.tsx b/packages/react-core/src/helpers/AnimationsProvider/AnimationsProvider.tsx
new file mode 100644
index 00000000000..29a34fb153e
--- /dev/null
+++ b/packages/react-core/src/helpers/AnimationsProvider/AnimationsProvider.tsx
@@ -0,0 +1,105 @@
+import { createContext, useContext, FunctionComponent, ReactNode } from 'react';
+
+/** Configuration for animations throughout PatternFly components */
+export interface AnimationsConfig {
+  /** Whether animations are enabled globally */
+  hasAnimations?: boolean;
+}
+
+/** Props for the AnimationsProvider component */
+export interface AnimationsProviderProps {
+  /** Animation configuration settings */
+  config?: AnimationsConfig;
+  /** Child components that will have access to the animations context */
+  children: ReactNode;
+}
+
+/** Context to provide animations configuration to child components */
+const AnimationsContext = createContext<AnimationsConfig>({
+  hasAnimations: false
+});
+
+/**
+ * AnimationsProvider is an application-level provider that provides uniform
+ * animation configuration for all PatternFly React components via the React context API.
+ *
+ * **Usage**: Place this provider at the root of your application to enable global
+ * animation control without requiring manual prop drilling throughout your component tree.
+ *
+ * **Benefits**:
+ * - Centralized animation control for the entire application
+ * - Respects user accessibility preferences (reduced motion)
+ * - Components can still override the global setting when needed
+ * - Works with all PatternFly components that support animations
+ *
+ * @example
+ * ```tsx
+ * // App.tsx - Place at your application root
+ * import { AnimationsProvider } from '@patternfly/react-core';
+ *
+ * const App = () => (
+ *   <AnimationsProvider config={{ hasAnimations: true }}>
+ *     <MyApplication />
+ *   </AnimationsProvider>
+ * );
+ * ```
+ */
+export const AnimationsProvider: FunctionComponent<AnimationsProviderProps> = ({
+  config = { hasAnimations: false },
+  children
+}) => <AnimationsContext.Provider value={config}>{children}</AnimationsContext.Provider>;
+
+/**
+ * Hook to access the animations configuration from the nearest AnimationsProvider.
+ *
+ * This hook allows components to check if animations are enabled and override
+ * their local hasAnimations prop accordingly.
+ *
+ * @returns The animations configuration object
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = ({ hasAnimations: localHasAnimations, ...props }) => {
+ *   const { hasAnimations: contextHasAnimations } = useAnimationsConfig();
+ *   const hasAnimations = localHasAnimations ?? contextHasAnimations;
+ *
+ *   return <div className={hasAnimations ? 'with-animations' : ''} {...props} />;
+ * };
+ * ```
+ */
+export const useAnimationsConfig = (): AnimationsConfig => {
+  const context = useContext(AnimationsContext);
+
+  if (context === undefined) {
+    // Return default config if no provider is found
+    return { hasAnimations: false };
+  }
+
+  return context;
+};
+
+/**
+ * Utility hook that combines local hasAnimations prop with context configuration.
+ * The local prop takes precedence when explicitly set, otherwise falls back to context.
+ *
+ * @param localHasAnimations - The hasAnimations prop passed directly to the component
+ * @returns The resolved hasAnimations value
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = ({ hasAnimations: localHasAnimations, ...props }) => {
+ *   const hasAnimations = useHasAnimations(localHasAnimations);
+ *
+ *   return <div className={hasAnimations ? 'animated' : 'static'} {...props} />;
+ * };
+ * ```
+ */
+export const useHasAnimations = (localHasAnimations?: boolean): boolean => {
+  const { hasAnimations: contextHasAnimations } = useAnimationsConfig();
+
+  // Local prop takes precedence when explicitly set (including false)
+  // If local prop is undefined, fall back to context
+  return localHasAnimations !== undefined ? localHasAnimations : (contextHasAnimations ?? false);
+};
+
+AnimationsProvider.displayName = 'AnimationsProvider';
diff --git a/packages/react-core/src/helpers/AnimationsProvider/__tests__/AnimationsProvider.test.tsx b/packages/react-core/src/helpers/AnimationsProvider/__tests__/AnimationsProvider.test.tsx
new file mode 100644
index 00000000000..23225bf98f9
--- /dev/null
+++ b/packages/react-core/src/helpers/AnimationsProvider/__tests__/AnimationsProvider.test.tsx
@@ -0,0 +1,134 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { AnimationsProvider, useAnimationsConfig, useHasAnimations } from '../AnimationsProvider';
+
+// Test component that uses the useAnimationsConfig hook
+const TestConfigComponent = () => {
+  const { hasAnimations } = useAnimationsConfig();
+  return <div data-testid="config">{hasAnimations ? 'animations-enabled' : 'animations-disabled'}</div>;
+};
+
+// Test component that uses the useHasAnimations hook with a local prop
+const TestHasAnimationsComponent = ({ hasAnimations: localHasAnimations }: { hasAnimations?: boolean }) => {
+  const hasAnimations = useHasAnimations(localHasAnimations);
+  return <div data-testid="has-animations">{hasAnimations ? 'animations-enabled' : 'animations-disabled'}</div>;
+};
+
+describe('AnimationsProvider', () => {
+  test('renders children correctly', () => {
+    render(
+      <AnimationsProvider config={{ hasAnimations: true }}>
+        <div data-testid="child">Test Child</div>
+      </AnimationsProvider>
+    );
+
+    expect(screen.getByTestId('child')).toBeInTheDocument();
+    expect(screen.getByTestId('child')).toHaveTextContent('Test Child');
+  });
+
+  test('provides default config when no config is passed', () => {
+    render(
+      <AnimationsProvider>
+        <TestConfigComponent />
+      </AnimationsProvider>
+    );
+
+    expect(screen.getByTestId('config')).toHaveTextContent('animations-disabled');
+  });
+
+  test('provides animations enabled config', () => {
+    render(
+      <AnimationsProvider config={{ hasAnimations: true }}>
+        <TestConfigComponent />
+      </AnimationsProvider>
+    );
+
+    expect(screen.getByTestId('config')).toHaveTextContent('animations-enabled');
+  });
+
+  test('provides animations disabled config', () => {
+    render(
+      <AnimationsProvider config={{ hasAnimations: false }}>
+        <TestConfigComponent />
+      </AnimationsProvider>
+    );
+
+    expect(screen.getByTestId('config')).toHaveTextContent('animations-disabled');
+  });
+
+  test('useAnimationsConfig returns default config when no provider', () => {
+    render(<TestConfigComponent />);
+
+    expect(screen.getByTestId('config')).toHaveTextContent('animations-disabled');
+  });
+
+  test('useHasAnimations uses context when no local prop provided', () => {
+    render(
+      <AnimationsProvider config={{ hasAnimations: true }}>
+        <TestHasAnimationsComponent />
+      </AnimationsProvider>
+    );
+
+    expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-enabled');
+  });
+
+  test('useHasAnimations uses local prop when provided (true)', () => {
+    render(
+      <AnimationsProvider config={{ hasAnimations: false }}>
+        <TestHasAnimationsComponent hasAnimations={true} />
+      </AnimationsProvider>
+    );
+
+    expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-enabled');
+  });
+
+  test('useHasAnimations uses local prop when provided (false)', () => {
+    render(
+      <AnimationsProvider config={{ hasAnimations: true }}>
+        <TestHasAnimationsComponent hasAnimations={false} />
+      </AnimationsProvider>
+    );
+
+    expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-disabled');
+  });
+
+  test('useHasAnimations works without provider', () => {
+    render(<TestHasAnimationsComponent />);
+
+    expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-disabled');
+  });
+
+  test('useHasAnimations with local prop and no provider', () => {
+    render(<TestHasAnimationsComponent hasAnimations={true} />);
+
+    expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-enabled');
+  });
+
+  test('works in app-level scenario with multiple components', () => {
+    // Simulate realistic app-level usage
+    const MockApp = () => (
+      <div>
+        <header>
+          <TestConfigComponent />
+        </header>
+        <main>
+          <TestHasAnimationsComponent />
+          <TestHasAnimationsComponent hasAnimations={false} /> {/* Component override */}
+        </main>
+      </div>
+    );
+
+    render(
+      <AnimationsProvider config={{ hasAnimations: true }}>
+        <MockApp />
+      </AnimationsProvider>
+    );
+
+    const configs = screen.getAllByTestId('config');
+    const hasAnimationsComponents = screen.getAllByTestId('has-animations');
+
+    expect(configs[0]).toHaveTextContent('animations-enabled'); // Header uses provider
+    expect(hasAnimationsComponents[0]).toHaveTextContent('animations-enabled'); // Main uses provider
+    expect(hasAnimationsComponents[1]).toHaveTextContent('animations-disabled'); // Component override
+  });
+});
diff --git a/packages/react-core/src/helpers/AnimationsProvider/examples/AnimationsProvider.md b/packages/react-core/src/helpers/AnimationsProvider/examples/AnimationsProvider.md
new file mode 100644
index 00000000000..b22bca1b25a
--- /dev/null
+++ b/packages/react-core/src/helpers/AnimationsProvider/examples/AnimationsProvider.md
@@ -0,0 +1,161 @@
+---
+id: Animations provider  
+section: helpers
+subsection: providers
+---
+
+# Animations provider
+
+## Examples
+
+### Application-level setup
+
+The AnimationsProvider should be placed at the root of your application to provide global animation configuration for all PatternFly components.
+
+```tsx
+// App.tsx or index.tsx
+import React from 'react';
+import { AnimationsProvider } from '@patternfly/react-core';
+import { MyApplication } from './MyApplication';
+
+const App: React.FunctionComponent = () => {
+  return (
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <MyApplication />
+    </AnimationsProvider>
+  );
+};
+
+export default App;
+```
+
+```tsx
+// MyApplication.tsx - Your main app component
+import React from 'react';
+import { Page, TreeView, Alert } from '@patternfly/react-core';
+
+export const MyApplication: React.FunctionComponent = () => {
+  const treeData = [
+    {
+      name: 'Applications',
+      id: 'apps',
+      children: [
+        { name: 'Frontend', id: 'frontend' },
+        { name: 'Backend', id: 'backend' }
+      ]
+    }
+  ];
+
+  return (
+    <Page>
+      {/* All PatternFly components will inherit animation settings */}
+      <Alert title="Welcome" variant="info" />
+      <TreeView data={treeData} />
+    </Page>
+  );
+};
+```
+
+### Disable animations globally
+
+For accessibility or performance reasons, you can disable animations globally by setting `hasAnimations: false`.
+
+```tsx
+// App.tsx - Disable animations for the entire application
+import React from 'react';
+import { AnimationsProvider } from '@patternfly/react-core';
+import { MyApplication } from './MyApplication';
+
+const App: React.FunctionComponent = () => {
+  return (
+    <AnimationsProvider config={{ hasAnimations: false }}>
+      <MyApplication />
+    </AnimationsProvider>
+  );
+};
+```
+
+### Conditional animations based on user preferences
+
+You can integrate with user preferences or system settings to conditionally enable animations.
+
+```tsx
+// App.tsx - Respect user's motion preferences
+import React from 'react';
+import { AnimationsProvider } from '@patternfly/react-core';
+import { MyApplication } from './MyApplication';
+
+const App: React.FunctionComponent = () => {
+  // Respect user's reduced motion preference
+  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  
+  return (
+    <AnimationsProvider config={{ hasAnimations: !prefersReducedMotion }}>
+      <MyApplication />
+    </AnimationsProvider>
+  );
+};
+```
+
+### Override provider with component prop
+
+Individual components can still override the global animation setting when needed.
+
+```tsx
+// SomePageComponent.tsx - Part of your application
+import React from 'react';
+import { TreeView, Alert } from '@patternfly/react-core';
+
+export const SomePageComponent: React.FunctionComponent = () => {
+  const data = [
+    {
+      name: 'Important Data',
+      id: 'data-1',
+      children: [
+        { name: 'Item 1', id: 'item-1' },
+        { name: 'Item 2', id: 'item-2' }
+      ]
+    }
+  ];
+
+  return (
+    <div>
+      {/* Uses global animation setting from AnimationsProvider */}
+      <Alert title="Status Update" variant="success" />
+      
+      {/* This specific TreeView overrides to disable animations */}
+      <TreeView data={data} hasAnimations={false} />
+    </div>
+  );
+};
+```
+
+### Integration with React Router
+
+A typical real-world setup with React Router and other providers.
+
+```tsx
+// App.tsx - Complete application setup
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { AnimationsProvider } from '@patternfly/react-core';
+import { HomePage } from './pages/HomePage';
+import { SettingsPage } from './pages/SettingsPage';
+
+const App: React.FunctionComponent = () => {
+  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  
+  return (
+    <AnimationsProvider config={{ hasAnimations: !prefersReducedMotion }}>
+      <Router>
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/settings" element={<SettingsPage />} />
+        </Routes>
+      </Router>
+    </AnimationsProvider>
+  );
+};
+
+export default App;
+```
diff --git a/packages/react-core/src/helpers/AnimationsProvider/examples/AnimationsProviderBasic.tsx b/packages/react-core/src/helpers/AnimationsProvider/examples/AnimationsProviderBasic.tsx
new file mode 100644
index 00000000000..345d922ca34
--- /dev/null
+++ b/packages/react-core/src/helpers/AnimationsProvider/examples/AnimationsProviderBasic.tsx
@@ -0,0 +1,69 @@
+import { TreeView } from '@patternfly/react-core';
+import { AnimationsProvider } from '../AnimationsProvider';
+
+export const AnimationsProviderBasic = () => {
+  const data = [
+    {
+      name: 'Application 1',
+      id: 'app-1',
+      children: [
+        {
+          name: 'Settings',
+          id: 'app-1-settings'
+        },
+        {
+          name: 'Current',
+          id: 'app-1-current'
+        }
+      ]
+    },
+    {
+      name: 'Application 2',
+      id: 'app-2',
+      children: [
+        {
+          name: 'Settings',
+          id: 'app-2-settings'
+        },
+        {
+          name: 'Loader',
+          id: 'app-2-loader',
+          children: [
+            {
+              name: 'Loading App 1',
+              id: 'app-2-loader-1'
+            },
+            {
+              name: 'Loading App 2',
+              id: 'app-2-loader-2'
+            }
+          ]
+        }
+      ]
+    }
+  ];
+
+  return (
+    <>
+      <h3>With Animations (Provider)</h3>
+      <AnimationsProvider config={{ hasAnimations: true }}>
+        <TreeView data={data} aria-label="Tree view with animations enabled" />
+      </AnimationsProvider>
+
+      <br />
+
+      <h3>Without Animations (Provider)</h3>
+      <AnimationsProvider config={{ hasAnimations: false }}>
+        <TreeView data={data} aria-label="Tree view with animations disabled" />
+      </AnimationsProvider>
+
+      <br />
+
+      <h3>Mixed Animations (Provider + Override)</h3>
+      <AnimationsProvider config={{ hasAnimations: true }}>
+        <p>Provider has animations enabled, but component overrides to disable:</p>
+        <TreeView data={data} hasAnimations={false} aria-label="Tree view with provider animations overridden" />
+      </AnimationsProvider>
+    </>
+  );
+};
diff --git a/packages/react-core/src/helpers/AnimationsProvider/index.ts b/packages/react-core/src/helpers/AnimationsProvider/index.ts
new file mode 100644
index 00000000000..dd81c3538b8
--- /dev/null
+++ b/packages/react-core/src/helpers/AnimationsProvider/index.ts
@@ -0,0 +1 @@
+export * from './AnimationsProvider';
diff --git a/packages/react-core/src/helpers/index.ts b/packages/react-core/src/helpers/index.ts
index c2aee2b6820..7e13cd4b17c 100644
--- a/packages/react-core/src/helpers/index.ts
+++ b/packages/react-core/src/helpers/index.ts
@@ -1,3 +1,4 @@
+export * from './AnimationsProvider';
 export * from './constants';
 export * from './FocusTrap/FocusTrap';
 export * from './GenerateId/GenerateId';
diff --git a/packages/react-table/src/components/Table/Table.tsx b/packages/react-table/src/components/Table/Table.tsx
index 1db307282e8..c81f48af795 100644
--- a/packages/react-table/src/components/Table/Table.tsx
+++ b/packages/react-table/src/components/Table/Table.tsx
@@ -8,6 +8,7 @@ import { IVisibility } from './utils/decorators/classNames';
 import { handleArrows, setTabIndex } from '@patternfly/react-core/dist/esm/helpers/KeyboardHandler';
 import { KeyTypes } from '@patternfly/react-core/dist/esm/helpers/constants';
 import { useOUIAProps, OUIAProps } from '@patternfly/react-core/dist/esm/helpers/OUIA/ouia';
+import { useHasAnimations } from '@patternfly/react-core/dist/esm/helpers';
 import { TableGridBreakpoint, TableVariant } from './TableTypes';
 
 export interface BaseCellProps {
@@ -103,13 +104,14 @@ const TableBase: React.FunctionComponent<TableProps> = ({
   isNested = false,
   isStriped = false,
   isExpandable = false,
-  hasAnimations = false,
+  hasAnimations: localHasAnimations,
   hasNoInset = false,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   nestedHeaderColumnSpans,
   selectableRowCaptionText,
   ...props
 }: TableProps) => {
+  const hasAnimations = useHasAnimations(localHasAnimations);
   const ref = useRef(null);
   const tableRef = innerRef || ref;
 

From 751cb84735aaabc2e7e65c586c20d7a29207ca10 Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Tue, 9 Sep 2025 16:00:22 -0400
Subject: [PATCH 2/5] chore(AnimationsProvider): Add tests

---
 .../Alert/__tests__/AlertGroup.test.tsx       | 94 +++++++++++++++++++
 .../__tests__/DualListSelector.test.tsx       | 28 ++++++
 .../FormFieldGroupExpandable.test.tsx         | 30 ++++++
 .../__tests__/SearchInput.test.tsx            | 52 ++++++++++
 .../TreeView/__tests__/TreeView.test.tsx      | 28 ++++++
 .../__tests__/AnimationsProvider.test.tsx     | 25 +++++
 .../components/Table/__tests__/Table.test.tsx | 28 ++++++
 .../__snapshots__/Table.test.tsx.snap         |  2 +-
 8 files changed, 286 insertions(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/Alert/__tests__/AlertGroup.test.tsx b/packages/react-core/src/components/Alert/__tests__/AlertGroup.test.tsx
index aca2c9a8fcd..2ecb60351a0 100644
--- a/packages/react-core/src/components/Alert/__tests__/AlertGroup.test.tsx
+++ b/packages/react-core/src/components/Alert/__tests__/AlertGroup.test.tsx
@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
 import { Alert } from '../../Alert';
 import { AlertGroup } from '../../Alert';
 import { AlertActionCloseButton } from '../../../components/Alert/AlertActionCloseButton';
+import { AnimationsProvider } from '../../../helpers/AnimationsProvider';
 
 test('Alert Group renders without children', () => {
   render(
@@ -130,3 +131,96 @@ test('Does not call the callback set by updateTransitionEnd when transition ends
   fireEvent.transitionEnd(screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item') as HTMLElement);
   expect(mockCallback).toHaveBeenCalledTimes(1);
 });
+
+// Animation context tests
+test('respects AnimationsProvider context when no local hasAnimations prop', () => {
+  const mockCallback = jest.fn();
+
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <AlertGroup isToast appendTo={document.body}>
+        <Alert
+          isLiveRegion
+          title={'Test Alert'}
+          actionClose={<AlertActionCloseButton aria-label="Close" onClose={mockCallback} />}
+        />
+      </AlertGroup>
+    </AnimationsProvider>
+  );
+
+  const closeButton = screen.getByLabelText('Close');
+  fireEvent.click(closeButton);
+  expect(mockCallback).not.toHaveBeenCalled();
+
+  // Should call callback on transition end when animations are enabled via context
+  fireEvent.transitionEnd(screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item') as HTMLElement);
+  expect(mockCallback).toHaveBeenCalled();
+});
+
+test('local hasAnimations prop takes precedence over context', () => {
+  window.matchMedia = (query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {}, // deprecated
+    removeListener: () => {}, // deprecated
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => true
+  });
+
+  const mockCallback = jest.fn();
+
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <AlertGroup hasAnimations={false} isToast appendTo={document.body}>
+        <Alert
+          isLiveRegion
+          title={'Test Alert'}
+          actionClose={<AlertActionCloseButton aria-label="Close" onClose={mockCallback} />}
+        />
+      </AlertGroup>
+    </AnimationsProvider>
+  );
+
+  const closeButton = screen.getByLabelText('Close');
+  fireEvent.click(closeButton);
+  expect(mockCallback).toHaveBeenCalledTimes(1);
+
+  // Should not call callback again on transition end when local hasAnimations=false overrides context
+  fireEvent.transitionEnd(screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item') as HTMLElement);
+  expect(mockCallback).toHaveBeenCalledTimes(1);
+});
+
+test('works without AnimationsProvider (backward compatibility)', () => {
+  window.matchMedia = (query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {}, // deprecated
+    removeListener: () => {}, // deprecated
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => true
+  });
+
+  const mockCallback = jest.fn();
+
+  render(
+    <AlertGroup isToast appendTo={document.body}>
+      <Alert
+        isLiveRegion
+        title={'Test Alert'}
+        actionClose={<AlertActionCloseButton aria-label="Close" onClose={mockCallback} />}
+      />
+    </AlertGroup>
+  );
+
+  const closeButton = screen.getByLabelText('Close');
+  fireEvent.click(closeButton);
+  expect(mockCallback).toHaveBeenCalledTimes(1);
+
+  // Should not call callback again on transition end when no context and no local hasAnimations
+  fireEvent.transitionEnd(screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item') as HTMLElement);
+  expect(mockCallback).toHaveBeenCalledTimes(1);
+});
diff --git a/packages/react-core/src/components/DualListSelector/__tests__/DualListSelector.test.tsx b/packages/react-core/src/components/DualListSelector/__tests__/DualListSelector.test.tsx
index 3d59432fac2..3d3601fe8a1 100644
--- a/packages/react-core/src/components/DualListSelector/__tests__/DualListSelector.test.tsx
+++ b/packages/react-core/src/components/DualListSelector/__tests__/DualListSelector.test.tsx
@@ -3,6 +3,7 @@ import styles from '@patternfly/react-styles/css/components/DualListSelector/dua
 import { DualListSelector } from '../DualListSelector';
 import { DualListSelectorPane } from '../DualListSelectorPane';
 import { SearchInput } from '../../SearchInput';
+import { AnimationsProvider } from '../../../helpers/AnimationsProvider';
 
 // The following tests can be removed as part of https://github.com/patternfly/patternfly-react/issues/11838
 describe('Opt-in animations', () => {
@@ -29,6 +30,33 @@ describe('Opt-in animations', () => {
 
     expect(screen.getByTestId('test-id')).toHaveClass(styles.modifiers.animateExpand);
   });
+
+  // Animation context tests
+  test('respects AnimationsProvider context when no local hasAnimations prop', () => {
+    render(
+      <AnimationsProvider config={{ hasAnimations: true }}>
+        <DualListSelector isTree data-testid="test-id" />
+      </AnimationsProvider>
+    );
+
+    expect(screen.getByTestId('test-id')).toHaveClass(styles.modifiers.animateExpand);
+  });
+
+  test('local hasAnimations prop takes precedence over context', () => {
+    render(
+      <AnimationsProvider config={{ hasAnimations: true }}>
+        <DualListSelector isTree hasAnimations={false} data-testid="test-id" />
+      </AnimationsProvider>
+    );
+
+    expect(screen.getByTestId('test-id')).not.toHaveClass(styles.modifiers.animateExpand);
+  });
+
+  test('works without AnimationsProvider (backward compatibility)', () => {
+    render(<DualListSelector isTree data-testid="test-id" />);
+
+    expect(screen.getByTestId('test-id')).not.toHaveClass(styles.modifiers.animateExpand);
+  });
 });
 
 // Following tests should be moved to a separate DualListSelectorPane test file
diff --git a/packages/react-core/src/components/Form/__tests__/FormFieldGroupExpandable.test.tsx b/packages/react-core/src/components/Form/__tests__/FormFieldGroupExpandable.test.tsx
index bca95890361..b5d96014ff0 100644
--- a/packages/react-core/src/components/Form/__tests__/FormFieldGroupExpandable.test.tsx
+++ b/packages/react-core/src/components/Form/__tests__/FormFieldGroupExpandable.test.tsx
@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { FormFieldGroupExpandable } from '../FormFieldGroupExpandable';
+import { AnimationsProvider } from '../../../helpers/AnimationsProvider';
 import styles from '@patternfly/react-styles/css/components/Form/form';
 
 test('Does not render children by default', () => {
@@ -53,3 +54,32 @@ test(`Renders with class ${styles.modifiers.expandable} when hasAnimations is tr
 
   expect(screen.getByRole('group')).toHaveClass(styles.modifiers.expandable);
 });
+
+// Regression tests for AnimationsProvider context
+test('respects AnimationsProvider context when no local hasAnimations prop', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <FormFieldGroupExpandable toggleAriaLabel="Toggle label">Child content</FormFieldGroupExpandable>
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByRole('group')).toHaveClass(styles.modifiers.expandable);
+});
+
+test('local hasAnimations prop takes precedence over context', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <FormFieldGroupExpandable hasAnimations={false} toggleAriaLabel="Toggle label">
+        Child content
+      </FormFieldGroupExpandable>
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByRole('group')).not.toHaveClass(styles.modifiers.expandable);
+});
+
+test('works without AnimationsProvider (backward compatibility)', () => {
+  render(<FormFieldGroupExpandable toggleAriaLabel="Toggle label">Child content</FormFieldGroupExpandable>);
+
+  expect(screen.getByRole('group')).not.toHaveClass(styles.modifiers.expandable);
+});
diff --git a/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx b/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx
index 5ffbfd717d8..a545ebe7579 100644
--- a/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx
+++ b/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx
@@ -5,6 +5,7 @@ import userEvent from '@testing-library/user-event';
 import { SearchInput } from '../SearchInput';
 import { FormGroup } from '../../Form';
 import { Button } from '../../Button';
+import { AnimationsProvider } from '../../../helpers/AnimationsProvider';
 import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
 import badgeStyles from '@patternfly/react-styles/css/components/Badge/badge';
 import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
@@ -363,3 +364,54 @@ test('Additional props are spread when inputProps prop is passed', () => {
   render(<SearchInput aria-label="Test input" inputProps={{ autofocus: 'true' }} />);
   expect(screen.getByLabelText('Test input')).toHaveAttribute('autofocus', 'true');
 });
+
+// Animation context tests
+test('respects AnimationsProvider context when no local hasAnimations prop for expandable input', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <SearchInput
+        data-testid="test-id"
+        expandableInput={{
+          isExpanded: false,
+          onToggleExpand: () => {},
+          toggleAriaLabel: 'Test label'
+        }}
+      />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByTestId('test-id')).toHaveClass(`${inputGroupStyles.modifiers.searchExpandable}`);
+});
+
+test('local hasAnimations prop takes precedence over context for expandable input', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <SearchInput
+        data-testid="test-id"
+        expandableInput={{
+          hasAnimations: false,
+          isExpanded: false,
+          onToggleExpand: () => {},
+          toggleAriaLabel: 'Test label'
+        }}
+      />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByTestId('test-id')).not.toHaveClass(`${inputGroupStyles.modifiers.searchExpandable}`);
+});
+
+test('works without AnimationsProvider for expandable input (backward compatibility)', () => {
+  render(
+    <SearchInput
+      data-testid="test-id"
+      expandableInput={{
+        isExpanded: false,
+        onToggleExpand: () => {},
+        toggleAriaLabel: 'Test label'
+      }}
+    />
+  );
+
+  expect(screen.getByTestId('test-id')).not.toHaveClass(`${inputGroupStyles.modifiers.searchExpandable}`);
+});
diff --git a/packages/react-core/src/components/TreeView/__tests__/TreeView.test.tsx b/packages/react-core/src/components/TreeView/__tests__/TreeView.test.tsx
index 4143d8e09c0..766ba8b3d94 100644
--- a/packages/react-core/src/components/TreeView/__tests__/TreeView.test.tsx
+++ b/packages/react-core/src/components/TreeView/__tests__/TreeView.test.tsx
@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { TreeView } from '../TreeView';
+import { AnimationsProvider } from '../../../helpers/AnimationsProvider';
 
 jest.mock('../TreeViewList', () => ({
   TreeViewList: ({
@@ -293,6 +294,33 @@ test('Passes hasAnimations to TreeViewListItem', () => {
 
   expect(screen.getByText('TreeViewListItem hasAnimations: true')).toBeVisible();
 });
+
+// Animation context tests
+test('respects AnimationsProvider context when no local hasAnimations prop', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <TreeView data={[basicData]} />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByText('TreeViewListItem hasAnimations: true')).toBeVisible();
+});
+
+test('local hasAnimations prop takes precedence over context', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <TreeView data={[basicData]} hasAnimations={false} />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByText('TreeViewListItem hasAnimations: false')).toBeVisible();
+});
+
+test('works without AnimationsProvider (backward compatibility)', () => {
+  render(<TreeView data={[basicData]} />);
+
+  expect(screen.getByText('TreeViewListItem hasAnimations: false')).toBeVisible();
+});
 test('Passes data.children to TreeViewListItem', () => {
   render(<TreeView data={[{ ...basicData, children: [{ name: 'Child 1' }] }]} />);
 
diff --git a/packages/react-core/src/helpers/AnimationsProvider/__tests__/AnimationsProvider.test.tsx b/packages/react-core/src/helpers/AnimationsProvider/__tests__/AnimationsProvider.test.tsx
index 23225bf98f9..07dc8f1f933 100644
--- a/packages/react-core/src/helpers/AnimationsProvider/__tests__/AnimationsProvider.test.tsx
+++ b/packages/react-core/src/helpers/AnimationsProvider/__tests__/AnimationsProvider.test.tsx
@@ -131,4 +131,29 @@ describe('AnimationsProvider', () => {
     expect(hasAnimationsComponents[0]).toHaveTextContent('animations-enabled'); // Main uses provider
     expect(hasAnimationsComponents[1]).toHaveTextContent('animations-disabled'); // Component override
   });
+
+  test('handles dynamic context changes', () => {
+    const TestComponent = ({ hasAnimations }: { hasAnimations: boolean }) => (
+      <AnimationsProvider config={{ hasAnimations }}>
+        <TestConfigComponent />
+        <TestHasAnimationsComponent />
+      </AnimationsProvider>
+    );
+
+    const { rerender } = render(<TestComponent hasAnimations={true} />);
+
+    // Initially animations enabled
+    expect(screen.getByTestId('config')).toHaveTextContent('animations-enabled');
+    expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-enabled');
+
+    // Change to disabled
+    rerender(<TestComponent hasAnimations={false} />);
+    expect(screen.getByTestId('config')).toHaveTextContent('animations-disabled');
+    expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-disabled');
+
+    // Change back to enabled
+    rerender(<TestComponent hasAnimations={true} />);
+    expect(screen.getByTestId('config')).toHaveTextContent('animations-enabled');
+    expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-enabled');
+  });
 });
diff --git a/packages/react-table/src/components/Table/__tests__/Table.test.tsx b/packages/react-table/src/components/Table/__tests__/Table.test.tsx
index 200dadee15f..6ab0daccf47 100644
--- a/packages/react-table/src/components/Table/__tests__/Table.test.tsx
+++ b/packages/react-table/src/components/Table/__tests__/Table.test.tsx
@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/react';
 import { Table } from '../Table';
 import { Td } from '../Td';
 import { Th } from '../Th';
+import { AnimationsProvider, useAnimationsConfig, useHasAnimations } from '@patternfly/react-core/dist/esm/helpers';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 
 test('Renders without children', () => {
@@ -57,6 +58,33 @@ test(`Renders with class ${styles.modifiers.animateExpand} hasAnimations is true
   expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.modifiers.animateExpand);
 });
 
+// Animation context tests for expandable tables
+test('respects AnimationsProvider context when no local hasAnimations prop for expandable table', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <Table isExpandable aria-label="Test table" />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.modifiers.animateExpand);
+});
+
+test('local hasAnimations prop takes precedence over context for expandable table', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <Table isExpandable hasAnimations={false} aria-label="Test table" />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.animateExpand);
+});
+
+test('works without AnimationsProvider (backward compatibility) for expandable table', () => {
+  render(<Table isExpandable aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.animateExpand);
+});
+
 test('Matches snapshot without children', () => {
   const { asFragment } = render(<Table />);
 
diff --git a/packages/react-table/src/components/Table/__tests__/__snapshots__/Table.test.tsx.snap b/packages/react-table/src/components/Table/__tests__/__snapshots__/Table.test.tsx.snap
index d9dc561162d..27d07108ce6 100644
--- a/packages/react-table/src/components/Table/__tests__/__snapshots__/Table.test.tsx.snap
+++ b/packages/react-table/src/components/Table/__tests__/__snapshots__/Table.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Matches snapshot without children 1`] = `
 <DocumentFragment>
   <table
     class="pf-v6-c-table pf-m-grid-md"
-    data-ouia-component-id="OUIA-Generated-Table-9"
+    data-ouia-component-id="OUIA-Generated-Table-12"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
     role="grid"

From 85d2847fd15c0517aa346057338be230bf50d6b8 Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Thu, 18 Sep 2025 14:56:33 -0400
Subject: [PATCH 3/5] feat(AnimationsProvider): update tests, set config to
 required, rename prop to hasAnimationsProp to match existing conventions

---
 .../src/components/Alert/AlertGroup.tsx       |   4 +-
 .../src/components/Alert/AlertGroupInline.tsx |   4 +-
 .../Alert/__tests__/AlertGroup.test.tsx       | 123 +++-----
 .../DualListSelector/DualListSelector.tsx     |   4 +-
 .../DualListSelectorTreeItem.tsx              |   4 +-
 .../Form/FormFieldGroupExpandable.tsx         |   4 +-
 .../Form/InternalFormFieldGroup.tsx           |   4 +-
 .../components/SearchInput/SearchInput.tsx    |   4 +-
 .../src/components/TreeView/TreeView.tsx      |   4 +-
 .../components/TreeView/TreeViewListItem.tsx  |   4 +-
 .../AnimationsProvider/AnimationsProvider.tsx |  23 +-
 .../__tests__/AnimationsProvider.test.tsx     | 262 +++++++++---------
 .../examples/AnimationsProviderBasic.tsx      |  69 -----
 .../src/components/Table/Table.tsx            |   4 +-
 14 files changed, 199 insertions(+), 318 deletions(-)
 delete mode 100644 packages/react-core/src/helpers/AnimationsProvider/examples/AnimationsProviderBasic.tsx

diff --git a/packages/react-core/src/components/Alert/AlertGroup.tsx b/packages/react-core/src/components/Alert/AlertGroup.tsx
index ed845ac32dc..ceacd82e664 100644
--- a/packages/react-core/src/components/Alert/AlertGroup.tsx
+++ b/packages/react-core/src/components/Alert/AlertGroup.tsx
@@ -30,7 +30,7 @@ export interface AlertGroupProps extends Omit<React.HTMLProps<HTMLUListElement>,
 export const AlertGroup: React.FunctionComponent<AlertGroupProps> = ({
   className,
   children,
-  hasAnimations: localHasAnimations,
+  hasAnimations: hasAnimationsProp,
   isToast,
   isLiveRegion,
   onOverflowClick,
@@ -42,7 +42,7 @@ export const AlertGroup: React.FunctionComponent<AlertGroupProps> = ({
 }: AlertGroupProps) => {
   const containerRef = useRef<HTMLElement | null>(null);
   const [isContainerReady, setIsContainerReady] = useState(false);
-  const hasAnimations = useHasAnimations(localHasAnimations);
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
 
   const getTargetElement = () => {
     if (typeof appendTo === 'function') {
diff --git a/packages/react-core/src/components/Alert/AlertGroupInline.tsx b/packages/react-core/src/components/Alert/AlertGroupInline.tsx
index 391647de280..390a78771da 100644
--- a/packages/react-core/src/components/Alert/AlertGroupInline.tsx
+++ b/packages/react-core/src/components/Alert/AlertGroupInline.tsx
@@ -9,14 +9,14 @@ import { useHasAnimations } from '../../helpers';
 export const AlertGroupInline: React.FunctionComponent<AlertGroupProps> = ({
   className,
   children,
-  hasAnimations: localHasAnimations,
+  hasAnimations: hasAnimationsProp,
   isToast,
   isLiveRegion,
   onOverflowClick,
   overflowMessage,
   ...props
 }: AlertGroupProps) => {
-  const hasAnimations = useHasAnimations(localHasAnimations);
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
   const [handleTransitionEnd, setHandleTransitionEnd] = useState<() => void>(() => () => {});
 
   const updateTransitionEnd = (onTransitionEnd: () => void) => {
diff --git a/packages/react-core/src/components/Alert/__tests__/AlertGroup.test.tsx b/packages/react-core/src/components/Alert/__tests__/AlertGroup.test.tsx
index 2ecb60351a0..03255da4a9c 100644
--- a/packages/react-core/src/components/Alert/__tests__/AlertGroup.test.tsx
+++ b/packages/react-core/src/components/Alert/__tests__/AlertGroup.test.tsx
@@ -96,6 +96,8 @@ test('Calls the callback set by updateTransitionEnd when transition ends and ani
   const closeButton = await screen.findByLabelText('Close');
   await user.click(closeButton);
   expect(mockCallback).not.toHaveBeenCalled();
+  // fireEvent is needed here because transitionEnd is a browser event that occurs automatically
+  // when CSS transitions complete, not a user interaction that userEvent can simulate
   fireEvent.transitionEnd(screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item') as HTMLElement);
   expect(mockCallback).toHaveBeenCalled();
 });
@@ -128,99 +130,50 @@ test('Does not call the callback set by updateTransitionEnd when transition ends
   await user.click(closeButton);
   expect(mockCallback).toHaveBeenCalledTimes(1);
   // The transitionend event firing should not cause the callback to be called again
+  // fireEvent is needed here because transitionEnd is a browser event that occurs automatically
+  // when CSS transitions complete, not a user interaction that userEvent can simulate
   fireEvent.transitionEnd(screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item') as HTMLElement);
   expect(mockCallback).toHaveBeenCalledTimes(1);
 });
 
-// Animation context tests
-test('respects AnimationsProvider context when no local hasAnimations prop', () => {
-  const mockCallback = jest.fn();
-
-  render(
-    <AnimationsProvider config={{ hasAnimations: true }}>
-      <AlertGroup isToast appendTo={document.body}>
-        <Alert
-          isLiveRegion
-          title={'Test Alert'}
-          actionClose={<AlertActionCloseButton aria-label="Close" onClose={mockCallback} />}
-        />
-      </AlertGroup>
-    </AnimationsProvider>
-  );
-
-  const closeButton = screen.getByLabelText('Close');
-  fireEvent.click(closeButton);
-  expect(mockCallback).not.toHaveBeenCalled();
-
-  // Should call callback on transition end when animations are enabled via context
-  fireEvent.transitionEnd(screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item') as HTMLElement);
-  expect(mockCallback).toHaveBeenCalled();
-});
-
-test('local hasAnimations prop takes precedence over context', () => {
-  window.matchMedia = (query) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: () => {}, // deprecated
-    removeListener: () => {}, // deprecated
-    addEventListener: () => {},
-    removeEventListener: () => {},
-    dispatchEvent: () => true
+describe('Animation context behavior', () => {
+  test('respects AnimationsProvider context when no local hasAnimations prop', () => {
+    render(
+      <AnimationsProvider config={{ hasAnimations: true }}>
+        <AlertGroup>
+          <Alert title="Test Alert" />
+        </AlertGroup>
+      </AnimationsProvider>
+    );
+
+    // Should apply animation class when animations are enabled via context
+    const alertGroupItem = screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item');
+    expect(alertGroupItem).toHaveClass('pf-m-offstage-top');
   });
 
-  const mockCallback = jest.fn();
+  test('local hasAnimations prop takes precedence over context', () => {
+    render(
+      <AnimationsProvider config={{ hasAnimations: true }}>
+        <AlertGroup hasAnimations={false}>
+          <Alert title="Test Alert" />
+        </AlertGroup>
+      </AnimationsProvider>
+    );
+
+    // Should not apply animation class when local hasAnimations=false overrides context
+    const alertGroupItem = screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item');
+    expect(alertGroupItem).not.toHaveClass('pf-m-offstage-top');
+  });
 
-  render(
-    <AnimationsProvider config={{ hasAnimations: true }}>
-      <AlertGroup hasAnimations={false} isToast appendTo={document.body}>
-        <Alert
-          isLiveRegion
-          title={'Test Alert'}
-          actionClose={<AlertActionCloseButton aria-label="Close" onClose={mockCallback} />}
-        />
+  test('works without AnimationsProvider (backward compatibility)', () => {
+    render(
+      <AlertGroup>
+        <Alert title="Test Alert" />
       </AlertGroup>
-    </AnimationsProvider>
-  );
+    );
 
-  const closeButton = screen.getByLabelText('Close');
-  fireEvent.click(closeButton);
-  expect(mockCallback).toHaveBeenCalledTimes(1);
-
-  // Should not call callback again on transition end when local hasAnimations=false overrides context
-  fireEvent.transitionEnd(screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item') as HTMLElement);
-  expect(mockCallback).toHaveBeenCalledTimes(1);
-});
-
-test('works without AnimationsProvider (backward compatibility)', () => {
-  window.matchMedia = (query) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: () => {}, // deprecated
-    removeListener: () => {}, // deprecated
-    addEventListener: () => {},
-    removeEventListener: () => {},
-    dispatchEvent: () => true
+    // Should not apply animation class when no context and no local hasAnimations
+    const alertGroupItem = screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item');
+    expect(alertGroupItem).not.toHaveClass('pf-m-offstage-top');
   });
-
-  const mockCallback = jest.fn();
-
-  render(
-    <AlertGroup isToast appendTo={document.body}>
-      <Alert
-        isLiveRegion
-        title={'Test Alert'}
-        actionClose={<AlertActionCloseButton aria-label="Close" onClose={mockCallback} />}
-      />
-    </AlertGroup>
-  );
-
-  const closeButton = screen.getByLabelText('Close');
-  fireEvent.click(closeButton);
-  expect(mockCallback).toHaveBeenCalledTimes(1);
-
-  // Should not call callback again on transition end when no context and no local hasAnimations
-  fireEvent.transitionEnd(screen.getByText('Test Alert').closest('.pf-v6-c-alert-group__item') as HTMLElement);
-  expect(mockCallback).toHaveBeenCalledTimes(1);
 });
diff --git a/packages/react-core/src/components/DualListSelector/DualListSelector.tsx b/packages/react-core/src/components/DualListSelector/DualListSelector.tsx
index 6e4aa6fb69b..29b6b9d5fd8 100644
--- a/packages/react-core/src/components/DualListSelector/DualListSelector.tsx
+++ b/packages/react-core/src/components/DualListSelector/DualListSelector.tsx
@@ -29,10 +29,10 @@ export const DualListSelector: React.FunctionComponent<DualListSelectorProps> =
   children,
   id,
   isTree = false,
-  hasAnimations: localHasAnimations,
+  hasAnimations: hasAnimationsProp,
   ...props
 }: DualListSelectorProps) => {
-  const hasAnimations = useHasAnimations(localHasAnimations);
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
 
   return (
     <DualListSelectorContext.Provider value={{ isTree, hasAnimations }}>
diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorTreeItem.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorTreeItem.tsx
index d9fd32082da..33c3539090d 100644
--- a/packages/react-core/src/components/DualListSelector/DualListSelectorTreeItem.tsx
+++ b/packages/react-core/src/components/DualListSelector/DualListSelectorTreeItem.tsx
@@ -59,7 +59,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
   badgeProps,
   itemData,
   isDisabled = false,
-  hasAnimations: localHasAnimations,
+  hasAnimations: hasAnimationsProp,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   useMemo,
   ...props
@@ -67,7 +67,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
   const ref = useRef(null);
   const [isExpanded, setIsExpanded] = useState(defaultExpanded || false);
   const { setFocusedOption } = useContext(DualListSelectorListContext);
-  const hasAnimations = useHasAnimations(localHasAnimations);
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
 
   useEffect(() => {
     setIsExpanded(defaultExpanded);
diff --git a/packages/react-core/src/components/Form/FormFieldGroupExpandable.tsx b/packages/react-core/src/components/Form/FormFieldGroupExpandable.tsx
index bd0e7f9e21d..b5285b5e758 100644
--- a/packages/react-core/src/components/Form/FormFieldGroupExpandable.tsx
+++ b/packages/react-core/src/components/Form/FormFieldGroupExpandable.tsx
@@ -26,11 +26,11 @@ export const FormFieldGroupExpandable: React.FunctionComponent<FormFieldGroupExp
   header,
   isExpanded = false,
   toggleAriaLabel,
-  hasAnimations: localHasAnimations,
+  hasAnimations: hasAnimationsProp,
   ...props
 }: FormFieldGroupExpandableProps) => {
   const [localIsExpanded, setIsExpanded] = useState(isExpanded);
-  const hasAnimations = useHasAnimations(localHasAnimations);
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
 
   return (
     <InternalFormFieldGroup
diff --git a/packages/react-core/src/components/Form/InternalFormFieldGroup.tsx b/packages/react-core/src/components/Form/InternalFormFieldGroup.tsx
index 39f6749a028..bdd55af3e00 100644
--- a/packages/react-core/src/components/Form/InternalFormFieldGroup.tsx
+++ b/packages/react-core/src/components/Form/InternalFormFieldGroup.tsx
@@ -34,10 +34,10 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
   isExpanded,
   onToggle,
   toggleAriaLabel,
-  hasAnimations: localHasAnimations,
+  hasAnimations: hasAnimationsProp,
   ...props
 }: InternalFormFieldGroupProps) => {
-  const hasAnimations = useHasAnimations(localHasAnimations);
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
   const headerTitleText = header ? header.props.titleText : null;
   if (isExpandable && !toggleAriaLabel && !headerTitleText) {
     // eslint-disable-next-line no-console
diff --git a/packages/react-core/src/components/SearchInput/SearchInput.tsx b/packages/react-core/src/components/SearchInput/SearchInput.tsx
index c85d49b0f60..d61f0ff3f99 100644
--- a/packages/react-core/src/components/SearchInput/SearchInput.tsx
+++ b/packages/react-core/src/components/SearchInput/SearchInput.tsx
@@ -181,8 +181,8 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   const popperRef = useRef(null);
   const [focusAfterExpandChange, setFocusAfterExpandChange] = useState(false);
 
-  const { isExpanded, onToggleExpand, toggleAriaLabel, hasAnimations: localHasAnimations } = expandableInput || {};
-  const hasAnimations = useHasAnimations(localHasAnimations);
+  const { isExpanded, onToggleExpand, toggleAriaLabel, hasAnimations: hasAnimationsProp } = expandableInput || {};
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
 
   useEffect(() => {
     // this effect and the focusAfterExpandChange variable are needed to focus the input/toggle as needed when the
diff --git a/packages/react-core/src/components/TreeView/TreeView.tsx b/packages/react-core/src/components/TreeView/TreeView.tsx
index ebd57522277..b6cd5a0c950 100644
--- a/packages/react-core/src/components/TreeView/TreeView.tsx
+++ b/packages/react-core/src/components/TreeView/TreeView.tsx
@@ -136,10 +136,10 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
   useMemo,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledby,
-  hasAnimations: localHasAnimations,
+  hasAnimations: hasAnimationsProp,
   ...props
 }: TreeViewProps) => {
-  const hasAnimations = useHasAnimations(localHasAnimations);
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
   const treeViewList = (
     <TreeViewList
       isNested={isNested}
diff --git a/packages/react-core/src/components/TreeView/TreeViewListItem.tsx b/packages/react-core/src/components/TreeView/TreeViewListItem.tsx
index feefa3eb111..ce04ba41af0 100644
--- a/packages/react-core/src/components/TreeView/TreeViewListItem.tsx
+++ b/packages/react-core/src/components/TreeView/TreeViewListItem.tsx
@@ -103,11 +103,11 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
   expandedIcon,
   action,
   compareItems,
-  hasAnimations: localHasAnimations,
+  hasAnimations: hasAnimationsProp,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   useMemo
 }: TreeViewListItemProps) => {
-  const hasAnimations = useHasAnimations(localHasAnimations);
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
   const [internalIsExpanded, setIsExpanded] = useState(defaultExpanded);
   useEffect(() => {
     if (isExpanded !== undefined && isExpanded !== null) {
diff --git a/packages/react-core/src/helpers/AnimationsProvider/AnimationsProvider.tsx b/packages/react-core/src/helpers/AnimationsProvider/AnimationsProvider.tsx
index 29a34fb153e..4192ad449cb 100644
--- a/packages/react-core/src/helpers/AnimationsProvider/AnimationsProvider.tsx
+++ b/packages/react-core/src/helpers/AnimationsProvider/AnimationsProvider.tsx
@@ -9,7 +9,7 @@ export interface AnimationsConfig {
 /** Props for the AnimationsProvider component */
 export interface AnimationsProviderProps {
   /** Animation configuration settings */
-  config?: AnimationsConfig;
+  config: AnimationsConfig;
   /** Child components that will have access to the animations context */
   children: ReactNode;
 }
@@ -44,10 +44,9 @@ const AnimationsContext = createContext<AnimationsConfig>({
  * );
  * ```
  */
-export const AnimationsProvider: FunctionComponent<AnimationsProviderProps> = ({
-  config = { hasAnimations: false },
-  children
-}) => <AnimationsContext.Provider value={config}>{children}</AnimationsContext.Provider>;
+export const AnimationsProvider: FunctionComponent<AnimationsProviderProps> = ({ config, children }) => (
+  <AnimationsContext.Provider value={config}>{children}</AnimationsContext.Provider>
+);
 
 /**
  * Hook to access the animations configuration from the nearest AnimationsProvider.
@@ -59,9 +58,9 @@ export const AnimationsProvider: FunctionComponent<AnimationsProviderProps> = ({
  *
  * @example
  * ```tsx
- * const MyComponent = ({ hasAnimations: localHasAnimations, ...props }) => {
+ * const MyComponent = ({ hasAnimations: hasAnimationsProp, ...props }) => {
  *   const { hasAnimations: contextHasAnimations } = useAnimationsConfig();
- *   const hasAnimations = localHasAnimations ?? contextHasAnimations;
+ *   const hasAnimations = hasAnimationsProp ?? contextHasAnimations;
  *
  *   return <div className={hasAnimations ? 'with-animations' : ''} {...props} />;
  * };
@@ -82,24 +81,24 @@ export const useAnimationsConfig = (): AnimationsConfig => {
  * Utility hook that combines local hasAnimations prop with context configuration.
  * The local prop takes precedence when explicitly set, otherwise falls back to context.
  *
- * @param localHasAnimations - The hasAnimations prop passed directly to the component
+ * @param hasAnimationsProp - The hasAnimations prop passed directly to the component
  * @returns The resolved hasAnimations value
  *
  * @example
  * ```tsx
- * const MyComponent = ({ hasAnimations: localHasAnimations, ...props }) => {
- *   const hasAnimations = useHasAnimations(localHasAnimations);
+ * const MyComponent = ({ hasAnimations: hasAnimationsProp, ...props }) => {
+ *   const hasAnimations = useHasAnimations(hasAnimationsProp);
  *
  *   return <div className={hasAnimations ? 'animated' : 'static'} {...props} />;
  * };
  * ```
  */
-export const useHasAnimations = (localHasAnimations?: boolean): boolean => {
+export const useHasAnimations = (hasAnimationsProp?: boolean): boolean => {
   const { hasAnimations: contextHasAnimations } = useAnimationsConfig();
 
   // Local prop takes precedence when explicitly set (including false)
   // If local prop is undefined, fall back to context
-  return localHasAnimations !== undefined ? localHasAnimations : (contextHasAnimations ?? false);
+  return hasAnimationsProp ?? contextHasAnimations ?? false;
 };
 
 AnimationsProvider.displayName = 'AnimationsProvider';
diff --git a/packages/react-core/src/helpers/AnimationsProvider/__tests__/AnimationsProvider.test.tsx b/packages/react-core/src/helpers/AnimationsProvider/__tests__/AnimationsProvider.test.tsx
index 07dc8f1f933..48bf5e3cbbf 100644
--- a/packages/react-core/src/helpers/AnimationsProvider/__tests__/AnimationsProvider.test.tsx
+++ b/packages/react-core/src/helpers/AnimationsProvider/__tests__/AnimationsProvider.test.tsx
@@ -9,151 +9,149 @@ const TestConfigComponent = () => {
 };
 
 // Test component that uses the useHasAnimations hook with a local prop
-const TestHasAnimationsComponent = ({ hasAnimations: localHasAnimations }: { hasAnimations?: boolean }) => {
-  const hasAnimations = useHasAnimations(localHasAnimations);
+const TestHasAnimationsComponent = ({ hasAnimations: hasAnimationsProp }: { hasAnimations?: boolean }) => {
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
   return <div data-testid="has-animations">{hasAnimations ? 'animations-enabled' : 'animations-disabled'}</div>;
 };
 
-describe('AnimationsProvider', () => {
-  test('renders children correctly', () => {
-    render(
-      <AnimationsProvider config={{ hasAnimations: true }}>
-        <div data-testid="child">Test Child</div>
-      </AnimationsProvider>
-    );
-
-    expect(screen.getByTestId('child')).toBeInTheDocument();
-    expect(screen.getByTestId('child')).toHaveTextContent('Test Child');
-  });
-
-  test('provides default config when no config is passed', () => {
-    render(
-      <AnimationsProvider>
-        <TestConfigComponent />
-      </AnimationsProvider>
-    );
+test('renders children correctly', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <div data-testid="child">Test Child</div>
+    </AnimationsProvider>
+  );
 
-    expect(screen.getByTestId('config')).toHaveTextContent('animations-disabled');
-  });
+  expect(screen.getByTestId('child')).toBeInTheDocument();
+  expect(screen.getByTestId('child')).toHaveTextContent('Test Child');
+});
 
-  test('provides animations enabled config', () => {
-    render(
-      <AnimationsProvider config={{ hasAnimations: true }}>
-        <TestConfigComponent />
-      </AnimationsProvider>
-    );
+test('provides explicit config', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: false }}>
+      <TestConfigComponent />
+    </AnimationsProvider>
+  );
 
-    expect(screen.getByTestId('config')).toHaveTextContent('animations-enabled');
-  });
+  expect(screen.getByTestId('config')).toHaveTextContent('animations-disabled');
+});
 
-  test('provides animations disabled config', () => {
-    render(
-      <AnimationsProvider config={{ hasAnimations: false }}>
-        <TestConfigComponent />
-      </AnimationsProvider>
-    );
+test('provides animations enabled config', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <TestConfigComponent />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByTestId('config')).toHaveTextContent('animations-enabled');
+});
 
-    expect(screen.getByTestId('config')).toHaveTextContent('animations-disabled');
-  });
+test('provides animations disabled config', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: false }}>
+      <TestConfigComponent />
+    </AnimationsProvider>
+  );
 
-  test('useAnimationsConfig returns default config when no provider', () => {
-    render(<TestConfigComponent />);
+  expect(screen.getByTestId('config')).toHaveTextContent('animations-disabled');
+});
 
-    expect(screen.getByTestId('config')).toHaveTextContent('animations-disabled');
-  });
+test('useAnimationsConfig returns default config when no provider', () => {
+  render(<TestConfigComponent />);
 
-  test('useHasAnimations uses context when no local prop provided', () => {
-    render(
-      <AnimationsProvider config={{ hasAnimations: true }}>
-        <TestHasAnimationsComponent />
-      </AnimationsProvider>
-    );
-
-    expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-enabled');
-  });
-
-  test('useHasAnimations uses local prop when provided (true)', () => {
-    render(
-      <AnimationsProvider config={{ hasAnimations: false }}>
-        <TestHasAnimationsComponent hasAnimations={true} />
-      </AnimationsProvider>
-    );
-
-    expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-enabled');
-  });
-
-  test('useHasAnimations uses local prop when provided (false)', () => {
-    render(
-      <AnimationsProvider config={{ hasAnimations: true }}>
-        <TestHasAnimationsComponent hasAnimations={false} />
-      </AnimationsProvider>
-    );
-
-    expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-disabled');
-  });
-
-  test('useHasAnimations works without provider', () => {
-    render(<TestHasAnimationsComponent />);
-
-    expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-disabled');
-  });
-
-  test('useHasAnimations with local prop and no provider', () => {
-    render(<TestHasAnimationsComponent hasAnimations={true} />);
-
-    expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-enabled');
-  });
-
-  test('works in app-level scenario with multiple components', () => {
-    // Simulate realistic app-level usage
-    const MockApp = () => (
-      <div>
-        <header>
-          <TestConfigComponent />
-        </header>
-        <main>
-          <TestHasAnimationsComponent />
-          <TestHasAnimationsComponent hasAnimations={false} /> {/* Component override */}
-        </main>
-      </div>
-    );
-
-    render(
-      <AnimationsProvider config={{ hasAnimations: true }}>
-        <MockApp />
-      </AnimationsProvider>
-    );
-
-    const configs = screen.getAllByTestId('config');
-    const hasAnimationsComponents = screen.getAllByTestId('has-animations');
-
-    expect(configs[0]).toHaveTextContent('animations-enabled'); // Header uses provider
-    expect(hasAnimationsComponents[0]).toHaveTextContent('animations-enabled'); // Main uses provider
-    expect(hasAnimationsComponents[1]).toHaveTextContent('animations-disabled'); // Component override
-  });
-
-  test('handles dynamic context changes', () => {
-    const TestComponent = ({ hasAnimations }: { hasAnimations: boolean }) => (
-      <AnimationsProvider config={{ hasAnimations }}>
-        <TestConfigComponent />
-        <TestHasAnimationsComponent />
-      </AnimationsProvider>
-    );
+  expect(screen.getByTestId('config')).toHaveTextContent('animations-disabled');
+});
+
+test('useHasAnimations uses context when no local prop provided', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <TestHasAnimationsComponent />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-enabled');
+});
+
+test('useHasAnimations uses local prop when provided (true)', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: false }}>
+      <TestHasAnimationsComponent hasAnimations={true} />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-enabled');
+});
+
+test('useHasAnimations uses local prop when provided (false)', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <TestHasAnimationsComponent hasAnimations={false} />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-disabled');
+});
 
-    const { rerender } = render(<TestComponent hasAnimations={true} />);
+test('useHasAnimations works without provider', () => {
+  render(<TestHasAnimationsComponent />);
 
-    // Initially animations enabled
-    expect(screen.getByTestId('config')).toHaveTextContent('animations-enabled');
-    expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-enabled');
+  expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-disabled');
+});
+
+test('useHasAnimations with local prop and no provider', () => {
+  render(<TestHasAnimationsComponent hasAnimations={true} />);
+
+  expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-enabled');
+});
 
-    // Change to disabled
-    rerender(<TestComponent hasAnimations={false} />);
-    expect(screen.getByTestId('config')).toHaveTextContent('animations-disabled');
-    expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-disabled');
+test('works in app-level scenario with multiple components', () => {
+  // Simulate realistic app-level usage
+  const MockApp = () => (
+    <div>
+      <header>
+        <TestConfigComponent />
+      </header>
+      <main>
+        <TestHasAnimationsComponent />
+        <TestHasAnimationsComponent hasAnimations={false} /> {/* Component override */}
+      </main>
+    </div>
+  );
+
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <MockApp />
+    </AnimationsProvider>
+  );
+
+  const configs = screen.getAllByTestId('config');
+  const hasAnimationsComponents = screen.getAllByTestId('has-animations');
+
+  expect(configs[0]).toHaveTextContent('animations-enabled'); // Header uses provider
+  expect(hasAnimationsComponents[0]).toHaveTextContent('animations-enabled'); // Main uses provider
+  expect(hasAnimationsComponents[1]).toHaveTextContent('animations-disabled'); // Component override
+});
 
-    // Change back to enabled
-    rerender(<TestComponent hasAnimations={true} />);
-    expect(screen.getByTestId('config')).toHaveTextContent('animations-enabled');
-    expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-enabled');
-  });
+test('handles dynamic context changes', () => {
+  const TestComponent = ({ hasAnimations }: { hasAnimations: boolean }) => (
+    <AnimationsProvider config={{ hasAnimations }}>
+      <TestConfigComponent />
+      <TestHasAnimationsComponent />
+    </AnimationsProvider>
+  );
+
+  const { rerender } = render(<TestComponent hasAnimations={true} />);
+
+  // Initially animations enabled
+  expect(screen.getByTestId('config')).toHaveTextContent('animations-enabled');
+  expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-enabled');
+
+  // Change to disabled
+  rerender(<TestComponent hasAnimations={false} />);
+  expect(screen.getByTestId('config')).toHaveTextContent('animations-disabled');
+  expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-disabled');
+
+  // Change back to enabled
+  rerender(<TestComponent hasAnimations={true} />);
+  expect(screen.getByTestId('config')).toHaveTextContent('animations-enabled');
+  expect(screen.getByTestId('has-animations')).toHaveTextContent('animations-enabled');
 });
diff --git a/packages/react-core/src/helpers/AnimationsProvider/examples/AnimationsProviderBasic.tsx b/packages/react-core/src/helpers/AnimationsProvider/examples/AnimationsProviderBasic.tsx
deleted file mode 100644
index 345d922ca34..00000000000
--- a/packages/react-core/src/helpers/AnimationsProvider/examples/AnimationsProviderBasic.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { TreeView } from '@patternfly/react-core';
-import { AnimationsProvider } from '../AnimationsProvider';
-
-export const AnimationsProviderBasic = () => {
-  const data = [
-    {
-      name: 'Application 1',
-      id: 'app-1',
-      children: [
-        {
-          name: 'Settings',
-          id: 'app-1-settings'
-        },
-        {
-          name: 'Current',
-          id: 'app-1-current'
-        }
-      ]
-    },
-    {
-      name: 'Application 2',
-      id: 'app-2',
-      children: [
-        {
-          name: 'Settings',
-          id: 'app-2-settings'
-        },
-        {
-          name: 'Loader',
-          id: 'app-2-loader',
-          children: [
-            {
-              name: 'Loading App 1',
-              id: 'app-2-loader-1'
-            },
-            {
-              name: 'Loading App 2',
-              id: 'app-2-loader-2'
-            }
-          ]
-        }
-      ]
-    }
-  ];
-
-  return (
-    <>
-      <h3>With Animations (Provider)</h3>
-      <AnimationsProvider config={{ hasAnimations: true }}>
-        <TreeView data={data} aria-label="Tree view with animations enabled" />
-      </AnimationsProvider>
-
-      <br />
-
-      <h3>Without Animations (Provider)</h3>
-      <AnimationsProvider config={{ hasAnimations: false }}>
-        <TreeView data={data} aria-label="Tree view with animations disabled" />
-      </AnimationsProvider>
-
-      <br />
-
-      <h3>Mixed Animations (Provider + Override)</h3>
-      <AnimationsProvider config={{ hasAnimations: true }}>
-        <p>Provider has animations enabled, but component overrides to disable:</p>
-        <TreeView data={data} hasAnimations={false} aria-label="Tree view with provider animations overridden" />
-      </AnimationsProvider>
-    </>
-  );
-};
diff --git a/packages/react-table/src/components/Table/Table.tsx b/packages/react-table/src/components/Table/Table.tsx
index c81f48af795..1cdcd5a2881 100644
--- a/packages/react-table/src/components/Table/Table.tsx
+++ b/packages/react-table/src/components/Table/Table.tsx
@@ -104,14 +104,14 @@ const TableBase: React.FunctionComponent<TableProps> = ({
   isNested = false,
   isStriped = false,
   isExpandable = false,
-  hasAnimations: localHasAnimations,
+  hasAnimations: hasAnimationsProp,
   hasNoInset = false,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   nestedHeaderColumnSpans,
   selectableRowCaptionText,
   ...props
 }: TableProps) => {
-  const hasAnimations = useHasAnimations(localHasAnimations);
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
   const ref = useRef(null);
   const tableRef = innerRef || ref;
 

From 207bcad2c3733d0907bd4ce49c10ccb666a1f6fe Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Thu, 18 Sep 2025 15:17:27 -0400
Subject: [PATCH 4/5] feat(AnimationsProvider): delete AnimationsProvider.md

---
 .../examples/AnimationsProvider.md            | 161 ------------------
 1 file changed, 161 deletions(-)
 delete mode 100644 packages/react-core/src/helpers/AnimationsProvider/examples/AnimationsProvider.md

diff --git a/packages/react-core/src/helpers/AnimationsProvider/examples/AnimationsProvider.md b/packages/react-core/src/helpers/AnimationsProvider/examples/AnimationsProvider.md
deleted file mode 100644
index b22bca1b25a..00000000000
--- a/packages/react-core/src/helpers/AnimationsProvider/examples/AnimationsProvider.md
+++ /dev/null
@@ -1,161 +0,0 @@
----
-id: Animations provider  
-section: helpers
-subsection: providers
----
-
-# Animations provider
-
-## Examples
-
-### Application-level setup
-
-The AnimationsProvider should be placed at the root of your application to provide global animation configuration for all PatternFly components.
-
-```tsx
-// App.tsx or index.tsx
-import React from 'react';
-import { AnimationsProvider } from '@patternfly/react-core';
-import { MyApplication } from './MyApplication';
-
-const App: React.FunctionComponent = () => {
-  return (
-    <AnimationsProvider config={{ hasAnimations: true }}>
-      <MyApplication />
-    </AnimationsProvider>
-  );
-};
-
-export default App;
-```
-
-```tsx
-// MyApplication.tsx - Your main app component
-import React from 'react';
-import { Page, TreeView, Alert } from '@patternfly/react-core';
-
-export const MyApplication: React.FunctionComponent = () => {
-  const treeData = [
-    {
-      name: 'Applications',
-      id: 'apps',
-      children: [
-        { name: 'Frontend', id: 'frontend' },
-        { name: 'Backend', id: 'backend' }
-      ]
-    }
-  ];
-
-  return (
-    <Page>
-      {/* All PatternFly components will inherit animation settings */}
-      <Alert title="Welcome" variant="info" />
-      <TreeView data={treeData} />
-    </Page>
-  );
-};
-```
-
-### Disable animations globally
-
-For accessibility or performance reasons, you can disable animations globally by setting `hasAnimations: false`.
-
-```tsx
-// App.tsx - Disable animations for the entire application
-import React from 'react';
-import { AnimationsProvider } from '@patternfly/react-core';
-import { MyApplication } from './MyApplication';
-
-const App: React.FunctionComponent = () => {
-  return (
-    <AnimationsProvider config={{ hasAnimations: false }}>
-      <MyApplication />
-    </AnimationsProvider>
-  );
-};
-```
-
-### Conditional animations based on user preferences
-
-You can integrate with user preferences or system settings to conditionally enable animations.
-
-```tsx
-// App.tsx - Respect user's motion preferences
-import React from 'react';
-import { AnimationsProvider } from '@patternfly/react-core';
-import { MyApplication } from './MyApplication';
-
-const App: React.FunctionComponent = () => {
-  // Respect user's reduced motion preference
-  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-  
-  return (
-    <AnimationsProvider config={{ hasAnimations: !prefersReducedMotion }}>
-      <MyApplication />
-    </AnimationsProvider>
-  );
-};
-```
-
-### Override provider with component prop
-
-Individual components can still override the global animation setting when needed.
-
-```tsx
-// SomePageComponent.tsx - Part of your application
-import React from 'react';
-import { TreeView, Alert } from '@patternfly/react-core';
-
-export const SomePageComponent: React.FunctionComponent = () => {
-  const data = [
-    {
-      name: 'Important Data',
-      id: 'data-1',
-      children: [
-        { name: 'Item 1', id: 'item-1' },
-        { name: 'Item 2', id: 'item-2' }
-      ]
-    }
-  ];
-
-  return (
-    <div>
-      {/* Uses global animation setting from AnimationsProvider */}
-      <Alert title="Status Update" variant="success" />
-      
-      {/* This specific TreeView overrides to disable animations */}
-      <TreeView data={data} hasAnimations={false} />
-    </div>
-  );
-};
-```
-
-### Integration with React Router
-
-A typical real-world setup with React Router and other providers.
-
-```tsx
-// App.tsx - Complete application setup
-import React from 'react';
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import { AnimationsProvider } from '@patternfly/react-core';
-import { HomePage } from './pages/HomePage';
-import { SettingsPage } from './pages/SettingsPage';
-
-const App: React.FunctionComponent = () => {
-  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-  
-  return (
-    <AnimationsProvider config={{ hasAnimations: !prefersReducedMotion }}>
-      <Router>
-        <Routes>
-          <Route path="/" element={<HomePage />} />
-          <Route path="/settings" element={<SettingsPage />} />
-        </Routes>
-      </Router>
-    </AnimationsProvider>
-  );
-};
-
-export default App;
-```

From c4a3b807da1810113d0c6a1276cc0399bbbf25e2 Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Thu, 18 Sep 2025 15:32:49 -0400
Subject: [PATCH 5/5] remove comment in AlertGroup for appendTo

---
 packages/react-core/src/components/Alert/AlertGroup.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/Alert/AlertGroup.tsx b/packages/react-core/src/components/Alert/AlertGroup.tsx
index ceacd82e664..9780c1e5908 100644
--- a/packages/react-core/src/components/Alert/AlertGroup.tsx
+++ b/packages/react-core/src/components/Alert/AlertGroup.tsx
@@ -37,7 +37,7 @@ export const AlertGroup: React.FunctionComponent<AlertGroupProps> = ({
   overflowMessage,
   'aria-label': ariaLabel,
 
-  appendTo, // do not pass down to ul
+  appendTo,
   ...props
 }: AlertGroupProps) => {
   const containerRef = useRef<HTMLElement | null>(null);