@atlaskit/spinner - npm Package Compare versions

Comparing version 10.0.5 to 10.0.6

CHANGELOG.md

 # @atlaskit/spinner
 
+## 10.0.6
+- [patch] [d263485853](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/d263485853):
+
+  - update Spinner component's usage of styled-components to work in v3 and v4
+
 ## 10.0.5
@@ -4,0 +9,0 @@ - Updated dependencies [1e826b2966](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/1e826b2966):

dist/package.json

 {
 	"name": "@atlaskit/spinner",
-	"version": "10.0.5",
+	"version": "10.0.6",
 	"sideEffects": false
 }

package.json

 {
   "name": "@atlaskit/spinner",
-  "version": "10.0.5",
+  "version": "10.0.6",
   "description": "A React component that displays a spinning icon to show a loading state",
@@ -34,3 +34,3 @@ "license": "Apache-2.0",
     "@atlaskit/build-utils": "^2.0.0",
-    "@atlaskit/button": "^12.0.0",
+    "@atlaskit/button": "^12.0.1",
     "@atlaskit/docs": "^7.0.2",
@@ -37,0 +37,0 @@ "@atlaskit/ssr": "^0.0.1",

Spinner/styledContainer.js

@@ -1,2 +0,2 @@
-import styled, { keyframes } from 'styled-components';
+import styled, { keyframes, css } from 'styled-components';
 
@@ -21,11 +21,11 @@ /* Define keyframes statically to prevent a perfomance issue in styled components v1 where the keyframes function
      * the same way we do with the other lifecycle stages */
-    return "animation: ".concat(delay, "s ").concat(keyframeNames.noop, ";");
+    return css(["\n      animation: ", "s ", ";\n    "], delay, keyframeNames.noop);
   }
 
   if (phase === 'ENTER' || phase === 'IDLE') {
-    return "animation: 1s ease-in-out forwards ".concat(keyframeNames.enterRotate, ";");
+    return css(["\n      animation: 1s ease-in-out forwards ", ";\n    "], keyframeNames.enterRotate);
   }
 
   if (phase === 'LEAVE') {
-    return "animation: 0.53s ease-in-out forwards ".concat(keyframeNames.leaveRotate, ",\n      0.2s ease-in-out 0.33s ").concat(keyframeNames.leaveOpacity, ";");
+    return css(["\n      animation: 0.53s ease-in-out forwards ", ",\n        0.2s ease-in-out 0.33s ", ";\n    "], keyframeNames.leaveRotate, keyframeNames.leaveOpacity);
   }
@@ -44,4 +44,4 @@
   componentId: "sc-1qs8wxp-0"
-})(["\n  ", " display: flex;\n  height: ", ";\n  width: ", ";\n\n  /* Rapidly creating and removing spinners will result in multiple spinners being visible while\n   * they complete their exit animations. This rules hides the spinner if another one has been\n   * added. */\n  div + & {\n    display: none;\n  }\n"], getContainerAnimation, getSize, getSize);
+})(["\n  ", "\n  display: flex;\n  height: ", ";\n  width: ", ";\n\n  /* Rapidly creating and removing spinners will result in multiple spinners being visible while\n   * they complete their exit animations. This rules hides the spinner if another one has been\n   * added. */\n  div + & {\n    display: none;\n  }\n"], getContainerAnimation, getSize, getSize);
 Container.displayName = 'SpinnerContainer';
 export default Container;

Spinner/styledSvg.js

@@ -66,12 +66,14 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
   var circumference = getStrokeCircumference(props.size);
-  var idleRotation = "0.86s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite ".concat(keyframeNames.rotate);
-  var spinUpStroke = "0.8s ease-in-out ".concat(getEnterStrokeKeyframe(props.size));
-  var spinUpOpacity = "0.2s ease-in-out ".concat(keyframeNames.enterOpacity);
-  var activeAnimations = [idleRotation];
 
-  if (props.phase === 'ENTER') {
-    activeAnimations.push(spinUpStroke, spinUpOpacity);
-  }
+  var animation = function animation(animProps) {
+    var baseAnimation = '0.86s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite';
 
-  return css(["\n      animation: ", ";\n      fill: none;\n      stroke: ", ";\n      stroke-dasharray: ", "px;\n      stroke-dashoffset: ", "px;\n      stroke-linecap: round;\n      stroke-width: ", "px;\n      transform-origin: center;\n    "], activeAnimations.join(', '), getStrokeColor, circumference, circumference * 0.8, getStrokeWidth(props.size));
+    if (animProps.phase === 'ENTER') {
+      return css(["\n          animation: ", " ", ",\n            0.8s ease-in-out ", ",\n            0.2s ease-in-out ", ";\n        "], baseAnimation, keyframeNames.rotate, getEnterStrokeKeyframe(animProps.size), keyframeNames.enterOpacity);
+    }
+
+    return css(["\n        animation: ", " ", ";\n      "], baseAnimation, keyframeNames.rotate);
+  };
+
+  return css(["\n      ", "\n      fill: none;\n      stroke: ", ";\n      stroke-dasharray: ", "px;\n      stroke-dashoffset: ", "px;\n      stroke-linecap: round;\n      stroke-width: ", "px;\n      transform-origin: center;\n    "], animation, getStrokeColor, circumference, circumference * 0.8, getStrokeWidth(props.size));
 });
@@ -78,0 +80,0 @@ var Svg = styled.svg.withConfig({

version.json

 {
 	"name": "@atlaskit/spinner",
-	"version": "10.0.5",
+	"version": "10.0.6",
 	"sideEffects": false
 }

No alert changes

Improved metrics

Total package byte prevSize

40593

increased by0.97%

Worsened metrics

Lines of code

327

decreased by-0.3%

No dependency changes