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 d8f983eaf3723f..be2025867cb1b6 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 @@ -9,11 +9,15 @@ import { motionTokens, createPresenceComponent, PresenceDirection, AtomMotion } * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`. * @returns A motion atom object with opacity keyframes and the supplied duration and easing. */ -const fadeAtom = ( - direction: PresenceDirection, - duration: number, - easing: string = motionTokens.curveLinear, -): AtomMotion => { +const fadeAtom = ({ + direction, + duration, + easing = motionTokens.curveLinear, +}: { + direction: PresenceDirection; + duration: number; + easing?: string; +}): AtomMotion => { const keyframes = [{ opacity: 0 }, { opacity: 1 }]; if (direction === 'exit') { keyframes.reverse(); @@ -33,14 +37,20 @@ const fadeAtom = ( * @param duration - The duration of the motion in milliseconds. * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveDecelerateMid`. */ -const slideAtom = ( - direction: PresenceDirection, - axis: 'X' | 'Y', - distance: string, - duration: number, - easing: string = motionTokens.curveDecelerateMid, -): AtomMotion => { - const keyframes = [{ transform: `translate${axis}(${distance})` }, { transform: 'translate${axis}(0)' }]; +const slideAtom = ({ + direction, + axis, + distance, + duration, + easing = motionTokens.curveDecelerateMid, +}: { + direction: PresenceDirection; + axis: 'X' | 'Y'; + distance: string; + duration: number; + easing?: string; +}): AtomMotion => { + const keyframes = [{ transform: `translate${axis}(${distance})` }, { transform: `translate${axis}(0)` }]; if (direction === 'exit') { keyframes.reverse(); } @@ -55,9 +65,12 @@ export const SlideInFadeOut = createPresenceComponent(() => { const duration = motionTokens.durationGentle; return { - enter: [fadeAtom('enter', duration), slideAtom('enter', 'Y', '-100%', duration)], + enter: [ + fadeAtom({ direction: 'enter', duration }), + slideAtom({ direction: 'enter', axis: 'Y', distance: '-100%', duration }), + ], - exit: fadeAtom('exit', duration), + exit: fadeAtom({ direction: 'exit', duration }), }; }); @@ -65,6 +78,6 @@ export const FadeOut = createPresenceComponent(() => { return { enter: [], - exit: fadeAtom('exit', motionTokens.durationGentle), + exit: fadeAtom({ direction: 'exit', duration: motionTokens.durationGentle }), }; });