What: Closes #11962

This PR enables support for AnimationsProvider.

PatternFly consumers will now be able to set animations for opt-in components once at the app level (instead of on every component via hasAnimations) while maintaining full backward compatibility.

Testing Instructions

To test the new context provider functionality:

1. Run yarn start and navigate to http://localhost:8002/components/alert#toast-alert-group

2. Copy and paste the code below into the demo TSX code:

   Click to expand

    // eslint-disable-next-line no-restricted-imports
    import React, { Fragment, useState } from 'react';
    import {
      Alert,
      AlertProps,
      AlertGroup,
      AlertActionCloseButton,
      AlertVariant,
      InputGroup,
      InputGroupItem
    } from '@patternfly/react-core';
    import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
    import { AnimationsProvider } from '@patternfly/react-core/dist/esm/helpers';
    export const AlertGroupToast: React.FunctionComponent = () => {
      const [alerts, setAlerts] = useState<Partial<AlertProps>[]>([]);
    
      const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {
        setAlerts((prevAlerts) => [{ title, variant, key }, ...prevAlerts]);
      };
    
      const removeAlert = (key: React.Key) => {
        setAlerts((prevAlerts) => [...prevAlerts.filter((alert) => alert.key !== key)]);
      };
    
      const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(' ');
    
      const getUniqueId = () => new Date().getTime();
    
      const addSuccessAlert = () => {
        addAlert('Toast success alert', 'success', getUniqueId());
      };
    
      const addDangerAlert = () => {
        addAlert('Toast danger alert', 'danger', getUniqueId());
      };
    
      const addInfoAlert = () => {
        addAlert('Toast info alert', 'info', getUniqueId());
      };
    
      return (
        <Fragment>
          <InputGroup style={{ marginBottom: '16px' }}>
            <InputGroupItem>
              <button onClick={addSuccessAlert} type="button" className={btnClasses}>
                Add toast success alert
              </button>
            </InputGroupItem>
            <InputGroupItem>
              <button onClick={addDangerAlert} type="button" className={btnClasses}>
                Add toast danger alert
              </button>
            </InputGroupItem>
            <InputGroupItem>
              <button onClick={addInfoAlert} type="button" className={btnClasses}>
                Add toast info alert
              </button>
            </InputGroupItem>
          </InputGroup>
          <AnimationsProvider config={{ hasAnimations: true }}>
            <AlertGroup isToast isLiveRegion>
              {alerts.map(({ key, variant, title }) => (
                <Alert
                  variant={AlertVariant[variant]}
                  title={title}
                  actionClose={
                    <AlertActionCloseButton
                      title={title as string}
                      variantLabel={`${variant} alert`}
                      onClose={() => removeAlert(key)}
                    />
                  }
                  key={key}
                />
              ))}
            </AlertGroup>
          </AnimationsProvider>
        </Fragment>
      );
    };
   

3. Verify the animations are applied to the component via the context provider rather than with the hasAnimations prop.

Additional Changes & Fixes

Converted class components to functional components to enable React Hooks usage useHasAnimations hook integration:

• AlertGroup.tsx - Required for useHasAnimations hook integration
• DualListSelector.tsx - Required for useHasAnimations hook integration

Quick Verification

1. Go to any example for a component that uses the hasAnimations prop.
2. Wrap with <AnimationsProvider config={{ hasAnimations: true }}>
3. Remove the hasAnimations prop from the child component.
4. Verify animations work as expected.

Testing Note: Since PatternFly example files don't typically import from /helpers, the ESLint configs require a React import with the // eslint-disable-next-line no-restricted-imports comment at the top of the file for local testing. Real consumers won't have this issue.

Success Criteria

• ✅ Component hasAnimations prop overrides provider when set
• ✅ Existing examples work unchanged without provider
• ✅ No console errors or TypeScript issues