feat: allow for flexible position in position animation component

2 files changed, 19 insertions, 9 deletions

diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx
index de38ee30a..3d6b5f8dc 100644
--- a/packages/instant/src/components/animations/position_animation.tsx
+++ b/packages/instant/src/components/animations/position_animation.tsx
@@ -23,18 +23,19 @@ const generateTransitionInfoCss = (
 };
 
 const slideKeyframeGenerator = (
+    position: string,
     top?: TransitionInfo,
     bottom?: TransitionInfo,
     left?: TransitionInfo,
     right?: TransitionInfo,
 ) => keyframes`
     from {
-        position: relative;
+        position: ${position};
         ${generateTransitionInfoCss('from', top, bottom, left, right)}
     }
 
     to {
-        position: relative;
+        position: ${position};
         ${generateTransitionInfoCss('to', top, bottom, left, right)}
     }
 `;
@@ -44,7 +45,7 @@ export interface TransitionInfo {
     to: string;
 }
 
-export interface PositionAnimationProps {
+export interface PositionAnimationSettings {
     top?: TransitionInfo;
     bottom?: TransitionInfo;
     left?: TransitionInfo;
@@ -53,18 +54,22 @@ export interface PositionAnimationProps {
     direction?: string;
 }
 
+export interface PositionAnimationProps extends PositionAnimationSettings {
+    position: string;
+}
+
 export const PositionAnimation =
     styled.div <
     PositionAnimationProps >
     `
     animation-name: ${props =>
         css`
-            ${slideKeyframeGenerator(props.top, props.bottom, props.left, props.right)};
+            ${slideKeyframeGenerator(props.position, props.top, props.bottom, props.left, props.right)};
         `};
     animation-duration: 0.3s;
     animation-timing-function: ${props => props.timingFunction};
     animation-delay: 0s;
     animation-iteration-count: 1;
     animation-fill-mode: ${props => props.direction || 'none'};
-    position: relative;
+    position: ${props => props.position};
 `;
diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx
index 99533a2f0..9f1535297 100644
--- a/packages/instant/src/components/animations/slide_animations.tsx
+++ b/packages/instant/src/components/animations/slide_animations.tsx
@@ -3,16 +3,21 @@ import { Keyframes } from 'styled-components';
 
 import { css, keyframes, styled } from '../../style/theme';
 
-import { PositionAnimation, PositionAnimationProps } from './position_animation';
+import { PositionAnimation, PositionAnimationSettings } from './position_animation';
 
 export type SlideAnimationPhase = 'slideIn' | 'slideOut';
 export interface SlideAnimationProps {
+    position: string;
     phase: SlideAnimationPhase;
-    slideIn: PositionAnimationProps;
-    slideOut: PositionAnimationProps;
+    slideIn: PositionAnimationSettings;
+    slideOut: PositionAnimationSettings;
 }
 
 export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
     const propsToUse = props.phase === 'slideIn' ? props.slideIn : props.slideOut;
-    return <PositionAnimation {...propsToUse}>{props.children}</PositionAnimation>;
+    return (
+        <PositionAnimation position={props.position} {...propsToUse}>
+            {props.children}
+        </PositionAnimation>
+    );
 };