@atlaskit/motion - npm Package Compare versions

Comparing version 1.1.2 to 1.2.0

CHANGELOG.md

 # @atlaskit/motion
 
+## 1.2.0
+
+### Minor Changes
+
+- [`a1c9465b456`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a1c9465b456) - - `FadeIn` now supports different exit directions using the `exitDirection` prop
+  - `FadeIn` now supports different distance options for animations, using the `distance` prop
+
 ## 1.1.2
@@ -4,0 +11,0 @@

dist/cjs/entering/fade-in.js

@@ -24,3 +24,3 @@ "use strict";
 
-var _excluded = ["children", "duration", "entranceDirection"];
+var _excluded = ["children", "duration", "entranceDirection", "exitDirection", "distance"];
 
@@ -31,21 +31,30 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-var entranceMotions = {
-  bottom: 'translate3d(0, calc(5% + 4px), 0)',
-  left: 'translate3d(calc(-5% - 4px), 0, 0)',
-  right: 'translate3d(calc(5% + 4px), 0, 0)',
-  top: 'translate3d(0, calc(-5% - 4px), 0)'
+var directionMotions = {
+  proportional: {
+    bottom: 'translate3d(0, calc(5% + 4px), 0)',
+    left: 'translate3d(calc(-5% - 4px), 0, 0)',
+    right: 'translate3d(calc(5% + 4px), 0, 0)',
+    top: 'translate3d(0, calc(-5% - 4px), 0)'
+  },
+  constant: {
+    bottom: 'translate3d(0, 4px, 0)',
+    left: 'translate3d(-4px, 0, 0)',
+    right: 'translate3d(4px, 0, 0)',
+    top: 'translate3d(0, -4px, 0)'
+  }
 };
-var exitMotions = {
-  bottom: 'translate3d(0, calc(-5% - 4px), 0)',
-  left: 'translate3d(calc(5% + 4px), 0, 0)',
-  right: 'translate3d(calc(-5% - 4px), 0, 0)',
-  top: 'translate3d(0, calc(5% + 4px), 0)'
+var invertedDirection = {
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left'
 };
 
-var fadeInAnimation = function fadeInAnimation(movement) {
+var fadeInAnimation = function fadeInAnimation(direction) {
+  var distance = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'proportional';
   return {
     from: _objectSpread({
       opacity: 0
-    }, movement !== undefined && {
-      transform: entranceMotions[movement]
+    }, direction !== undefined && {
+      transform: directionMotions[distance][direction]
     }),
@@ -56,3 +65,3 @@ '50%': {
     to: {
-      transform: movement !== undefined ? 'none' : undefined
+      transform: direction !== undefined ? 'none' : undefined
     }
@@ -64,12 +73,13 @@ };
 
-var fadeOutAnimation = function fadeOutAnimation(movement) {
+var fadeOutAnimation = function fadeOutAnimation(direction) {
+  var distance = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'proportional';
   return {
     from: {
       opacity: 1,
-      transform: movement !== undefined ? 'translate3d(0, 0, 0)' : undefined
+      transform: direction !== undefined ? 'translate3d(0, 0, 0)' : undefined
     },
     to: _objectSpread({
       opacity: 0
-    }, movement !== undefined && {
-      transform: exitMotions[movement]
+    }, direction !== undefined && {
+      transform: directionMotions[distance][direction]
     })
@@ -79,3 +89,3 @@ };
 /**
- * Props for controlling the behaviour of the FadeIn animation
+ * Props for controlling the behavior of the FadeIn animation
  */
@@ -90,8 +100,12 @@
       duration = _ref$duration === void 0 ? _durations.largeDurationMs : _ref$duration,
-      entranceSlideDirection = _ref.entranceDirection,
+      entranceDirection = _ref.entranceDirection,
+      exitDirection = _ref.exitDirection,
+      _ref$distance = _ref.distance,
+      distance = _ref$distance === void 0 ? 'proportional' : _ref$distance,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var invertedEntranceDirection = entranceDirection && invertedDirection[entranceDirection];
   return /*#__PURE__*/_react.default.createElement(_keyframesMotion.default, (0, _extends2.default)({
     duration: duration,
-    enteringAnimation: fadeInAnimation(entranceSlideDirection),
-    exitingAnimation: fadeOutAnimation(entranceSlideDirection),
+    enteringAnimation: fadeInAnimation(entranceDirection, distance),
+    exitingAnimation: fadeOutAnimation(exitDirection || invertedEntranceDirection, distance),
     animationTimingFunction: function animationTimingFunction() {
@@ -98,0 +112,0 @@ return _curves.easeInOut;

dist/cjs/version.json

 {
 	"name": "@atlaskit/motion",
-	"version": "1.1.2",
+	"version": "1.2.0",
 	"sideEffects": false
 }

dist/es2019/entering/fade-in.js

@@ -6,20 +6,28 @@ import _extends from "@babel/runtime/helpers/extends";
 import KeyframesMotion from './keyframes-motion';
-const entranceMotions = {
-  bottom: 'translate3d(0, calc(5% + 4px), 0)',
-  left: 'translate3d(calc(-5% - 4px), 0, 0)',
-  right: 'translate3d(calc(5% + 4px), 0, 0)',
-  top: 'translate3d(0, calc(-5% - 4px), 0)'
+const directionMotions = {
+  proportional: {
+    bottom: 'translate3d(0, calc(5% + 4px), 0)',
+    left: 'translate3d(calc(-5% - 4px), 0, 0)',
+    right: 'translate3d(calc(5% + 4px), 0, 0)',
+    top: 'translate3d(0, calc(-5% - 4px), 0)'
+  },
+  constant: {
+    bottom: 'translate3d(0, 4px, 0)',
+    left: 'translate3d(-4px, 0, 0)',
+    right: 'translate3d(4px, 0, 0)',
+    top: 'translate3d(0, -4px, 0)'
+  }
 };
-const exitMotions = {
-  bottom: 'translate3d(0, calc(-5% - 4px), 0)',
-  left: 'translate3d(calc(5% + 4px), 0, 0)',
-  right: 'translate3d(calc(-5% - 4px), 0, 0)',
-  top: 'translate3d(0, calc(5% + 4px), 0)'
+const invertedDirection = {
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left'
 };
-export const fadeInAnimation = movement => {
+export const fadeInAnimation = (direction, distance = 'proportional') => {
   return {
     from: {
       opacity: 0,
-      ...(movement !== undefined && {
-        transform: entranceMotions[movement]
+      ...(direction !== undefined && {
+        transform: directionMotions[distance][direction]
       })
@@ -31,15 +39,15 @@ },
     to: {
-      transform: movement !== undefined ? 'none' : undefined
+      transform: direction !== undefined ? 'none' : undefined
     }
   };
 };
-export const fadeOutAnimation = movement => ({
+export const fadeOutAnimation = (direction, distance = 'proportional') => ({
   from: {
     opacity: 1,
-    transform: movement !== undefined ? 'translate3d(0, 0, 0)' : undefined
+    transform: direction !== undefined ? 'translate3d(0, 0, 0)' : undefined
   },
   to: {
     opacity: 0,
-    ...(movement !== undefined && {
-      transform: exitMotions[movement]
+    ...(direction !== undefined && {
+      transform: directionMotions[distance][direction]
     })
@@ -49,3 +57,3 @@ }
 /**
- * Props for controlling the behaviour of the FadeIn animation
+ * Props for controlling the behavior of the FadeIn animation
  */
@@ -56,9 +64,12 @@
   duration = largeDurationMs,
-  entranceDirection: entranceSlideDirection,
+  entranceDirection,
+  exitDirection,
+  distance = 'proportional',
   ...props
 }) => {
+  const invertedEntranceDirection = entranceDirection && invertedDirection[entranceDirection];
   return /*#__PURE__*/React.createElement(KeyframesMotion, _extends({
     duration: duration,
-    enteringAnimation: fadeInAnimation(entranceSlideDirection),
-    exitingAnimation: fadeOutAnimation(entranceSlideDirection),
+    enteringAnimation: fadeInAnimation(entranceDirection, distance),
+    exitingAnimation: fadeOutAnimation(exitDirection || invertedEntranceDirection, distance),
     animationTimingFunction: () => easeInOut
@@ -65,0 +76,0 @@ }, props), children);

dist/es2019/version.json

 {
 	"name": "@atlaskit/motion",
-	"version": "1.1.2",
+	"version": "1.2.0",
 	"sideEffects": false
 }

dist/esm/entering/fade-in.js

 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "duration", "entranceDirection"];
+var _excluded = ["children", "duration", "entranceDirection", "exitDirection", "distance"];
 
@@ -14,20 +14,29 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 import KeyframesMotion from './keyframes-motion';
-var entranceMotions = {
-  bottom: 'translate3d(0, calc(5% + 4px), 0)',
-  left: 'translate3d(calc(-5% - 4px), 0, 0)',
-  right: 'translate3d(calc(5% + 4px), 0, 0)',
-  top: 'translate3d(0, calc(-5% - 4px), 0)'
+var directionMotions = {
+  proportional: {
+    bottom: 'translate3d(0, calc(5% + 4px), 0)',
+    left: 'translate3d(calc(-5% - 4px), 0, 0)',
+    right: 'translate3d(calc(5% + 4px), 0, 0)',
+    top: 'translate3d(0, calc(-5% - 4px), 0)'
+  },
+  constant: {
+    bottom: 'translate3d(0, 4px, 0)',
+    left: 'translate3d(-4px, 0, 0)',
+    right: 'translate3d(4px, 0, 0)',
+    top: 'translate3d(0, -4px, 0)'
+  }
 };
-var exitMotions = {
-  bottom: 'translate3d(0, calc(-5% - 4px), 0)',
-  left: 'translate3d(calc(5% + 4px), 0, 0)',
-  right: 'translate3d(calc(-5% - 4px), 0, 0)',
-  top: 'translate3d(0, calc(5% + 4px), 0)'
+var invertedDirection = {
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left'
 };
-export var fadeInAnimation = function fadeInAnimation(movement) {
+export var fadeInAnimation = function fadeInAnimation(direction) {
+  var distance = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'proportional';
   return {
     from: _objectSpread({
       opacity: 0
-    }, movement !== undefined && {
-      transform: entranceMotions[movement]
+    }, direction !== undefined && {
+      transform: directionMotions[distance][direction]
     }),
@@ -38,16 +47,17 @@ '50%': {
     to: {
-      transform: movement !== undefined ? 'none' : undefined
+      transform: direction !== undefined ? 'none' : undefined
     }
   };
 };
-export var fadeOutAnimation = function fadeOutAnimation(movement) {
+export var fadeOutAnimation = function fadeOutAnimation(direction) {
+  var distance = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'proportional';
   return {
     from: {
       opacity: 1,
-      transform: movement !== undefined ? 'translate3d(0, 0, 0)' : undefined
+      transform: direction !== undefined ? 'translate3d(0, 0, 0)' : undefined
     },
     to: _objectSpread({
       opacity: 0
-    }, movement !== undefined && {
-      transform: exitMotions[movement]
+    }, direction !== undefined && {
+      transform: directionMotions[distance][direction]
     })
@@ -57,3 +67,3 @@ };
 /**
- * Props for controlling the behaviour of the FadeIn animation
+ * Props for controlling the behavior of the FadeIn animation
  */
@@ -65,9 +75,13 @@
       duration = _ref$duration === void 0 ? largeDurationMs : _ref$duration,
-      entranceSlideDirection = _ref.entranceDirection,
+      entranceDirection = _ref.entranceDirection,
+      exitDirection = _ref.exitDirection,
+      _ref$distance = _ref.distance,
+      distance = _ref$distance === void 0 ? 'proportional' : _ref$distance,
       props = _objectWithoutProperties(_ref, _excluded);
 
+  var invertedEntranceDirection = entranceDirection && invertedDirection[entranceDirection];
   return /*#__PURE__*/React.createElement(KeyframesMotion, _extends({
     duration: duration,
-    enteringAnimation: fadeInAnimation(entranceSlideDirection),
-    exitingAnimation: fadeOutAnimation(entranceSlideDirection),
+    enteringAnimation: fadeInAnimation(entranceDirection, distance),
+    exitingAnimation: fadeOutAnimation(exitDirection || invertedEntranceDirection, distance),
     animationTimingFunction: function animationTimingFunction() {
@@ -74,0 +88,0 @@ return easeInOut;

dist/esm/version.json

 {
 	"name": "@atlaskit/motion",
-	"version": "1.1.2",
+	"version": "1.2.0",
 	"sideEffects": false
 }

dist/types/entering/fade-in.d.ts

 import React from 'react';
 import { ObjectInterpolation } from '@emotion/core';
 import { KeyframesMotionProps } from './keyframes-motion';
-import { Direction } from './types';
-export declare const fadeInAnimation: (movement?: Direction | undefined) => ObjectInterpolation<undefined>;
-export declare const fadeOutAnimation: (movement?: Direction | undefined) => ObjectInterpolation<undefined>;
+import type { Direction, Distance } from './types';
+export declare const fadeInAnimation: (direction?: Direction | undefined, distance?: Distance) => ObjectInterpolation<undefined>;
+export declare const fadeOutAnimation: (direction?: Direction | undefined, distance?: Distance) => ObjectInterpolation<undefined>;
 /**
- * Props for controlling the behaviour of the FadeIn animation
+ * Props for controlling the behavior of the FadeIn animation
  */
 export interface FadeKeyframesMotionProps extends KeyframesMotionProps {
     /**
-     * Sets an entering and exiting motion
+     * The direction the element will enter from using a slide animation. If undefined, no slide will be applied.
      */
     entranceDirection?: Direction;
+    /**
+     * The direction the element will exit to using a slide animation.
+     * If undefined but `entranceDirection` is set, it will exit to the opposite side by default.
+     */
+    exitDirection?: Direction;
+    /**
+     * The distance the element moves in a direction-based animation.
+     * A `proportional` distance is based on the size of the element.
+     * A `constant` distance will always move the same amount, regardless of size.
+     */
+    distance?: Distance;
 }
 declare const FadeIn: React.FC<FadeKeyframesMotionProps>;
 export default FadeIn;

dist/types/entering/types.d.ts

@@ -11,2 +11,8 @@ /// <reference types="react" />
 /**
+ * The distance the element moves in a direction-based animation.
+ * A `proportional` distance is based on the size of the element.
+ * A `constant` distance will always move the same amount, regardless of size.
+ */
+export declare type Distance = 'constant' | 'proportional';
+/**
  * Whether an element will fade on enter, on exit or both
@@ -13,0 +19,0 @@ */

package.json

 {
   "name": "@atlaskit/motion",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Atlassian motion variables, components and more.",
@@ -50,3 +50,3 @@ "publishConfig": {
     "@atlaskit/focus-ring": "^1.0.0",
-    "@atlaskit/logo": "^13.7.0",
+    "@atlaskit/logo": "^13.8.0",
     "@atlaskit/lozenge": "^11.1.0",
@@ -53,0 +53,0 @@ "@atlaskit/section-message": "^6.1.0",

No alert changes

Improved metrics

Total package byte prevSize

177743

increased by7.28%

Number of package files

135

increased by0.75%

Lines of code

3373

increased by1.69%

No dependency changes