feat: allow for flexible position in position animation component

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};
 `;

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>
+    );
 };

packages/instant/src/components/sliding_error.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 
-import { PositionAnimationProps } from './animations/position_animation';
+import { PositionAnimationSettings } from './animations/position_animation';
 import { SlideAnimation, SlideAnimationPhase } from './animations/slide_animations';
 
 import { Container, Flex, Text } from './ui';
@@ -37,14 +37,14 @@ export interface SlidingErrorProps extends ErrorProps {
 }
 export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props => {
     const slideAmount = '120px';
-    const slideUp: PositionAnimationProps = {
+    const slideUp: PositionAnimationSettings = {
         timingFunction: 'ease-in',
         top: {
             from: slideAmount,
             to: '0px',
         },
     };
-    const slideDown: PositionAnimationProps = {
+    const slideDown: PositionAnimationSettings = {
         timingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
         top: {
             from: '0px',
@@ -53,7 +53,7 @@ export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props =
         direction: 'forwards',
     };
     return (
-        <SlideAnimation slideIn={slideUp} slideOut={slideDown} phase={props.phase}>
+        <SlideAnimation position="relative" slideIn={slideUp} slideOut={slideDown} phase={props.phase}>
             <Error icon={props.icon} message={props.message} />
         </SlideAnimation>
     );