diff --git a/packages/react-components/react-message-bar/library/package.json b/packages/react-components/react-message-bar/library/package.json index 4ec5f583a371d..2f5ebe74b1a1b 100644 --- a/packages/react-components/react-message-bar/library/package.json +++ b/packages/react-components/react-message-bar/library/package.json @@ -22,7 +22,7 @@ "@fluentui/react-icons": "^2.0.245", "@fluentui/react-jsx-runtime": "^9.0.48", "@fluentui/react-motion": "^9.6.4", - "@fluentui/react-motion-components-preview": "^0.4.0", + "@fluentui/react-motion-components-preview": "^0.4.0", "@fluentui/react-shared-contexts": "^9.21.2", "@fluentui/react-link": "^9.3.5", "@fluentui/react-theme": "^9.1.24", diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.motions.tsx b/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.motions.tsx index be2025867cb1b..59d3fd94f4508 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.motions.tsx +++ b/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.motions.tsx @@ -2,23 +2,28 @@ import { motionTokens, createPresenceComponent, PresenceDirection, AtomMotion } // TODO: import these atoms from react-motion-components-preview once they're available there +interface FadeAtomParams { + direction: PresenceDirection; + duration: number; + easing?: string; + fromValue?: number; +} + /** * Generates a motion atom object for a fade in or fade out. * @param direction - The functional direction of the motion: 'enter' or 'exit'. * @param duration - The duration of the motion in milliseconds. * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`. + * @param fromValue - The starting opacity value. Defaults to 0. * @returns A motion atom object with opacity keyframes and the supplied duration and easing. */ const fadeAtom = ({ direction, duration, easing = motionTokens.curveLinear, -}: { - direction: PresenceDirection; - duration: number; - easing?: string; -}): AtomMotion => { - const keyframes = [{ opacity: 0 }, { opacity: 1 }]; + fromValue = 0, +}: FadeAtomParams): AtomMotion => { + const keyframes = [{ opacity: fromValue }, { opacity: 1 }]; if (direction === 'exit') { keyframes.reverse(); }