@atlaskit/spinner - npm Package Compare versions

Comparing version 15.1.6 to 15.1.7

CHANGELOG.md

 # @atlaskit/spinner
 
+## 15.1.7
+
+### Patch Changes
+
+- [`f0674fc2e61`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f0674fc2e61) - Styles have been rewritten to ensure future compatibility with compiled.
+- Updated dependencies
+
 ## 15.1.6
@@ -4,0 +11,0 @@

dist/cjs/spinner.js

@@ -10,4 +10,2 @@ "use strict";
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
@@ -19,15 +17,11 @@
 
-var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
+var _components = require("@atlaskit/theme/components");
 
 var _constants = require("./constants");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+/** @jsx jsx */
 
-var rotate = (0, _core.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  to { transform: rotate(360deg); }\n"]))); // There are three parts to the load in animation:
-// 1. Fade in
-// 2. Accelerated spin
-// 3. Stretch the spinner line
-
-var loadIn = (0, _core.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    transform: rotate(50deg);\n    opacity: 0;\n    stroke-dashoffset: 60;\n  }\n  to {\n    transform: rotate(230deg);\n    opacity: 1;\n    stroke-dashoffset: 50;\n  }\n"])));
-
+/**
+ * Returns the appropriate circle stroke color.
+ */
 function getStrokeColor(_ref) {
@@ -44,2 +38,64 @@ var mode = _ref.mode,
 
+var rotate = (0, _core.keyframes)({
+  to: {
+    transform: 'rotate(360deg)'
+  }
+});
+var rotateStyles = (0, _core.css)({
+  animation: "".concat(rotate, " 0.86s infinite"),
+  animationTimingFunction: 'cubic-bezier(0.4, 0.15, 0.6, 0.85)',
+  transformOrigin: 'center'
+});
+/**
+ * There are three parts to the load in animation:
+ * 1. Fade in
+ * 2. Accelerated spin
+ * 3. Stretch the spinner line
+ */
+
+var loadIn = (0, _core.keyframes)({
+  from: {
+    transform: 'rotate(50deg)',
+    opacity: 0,
+    strokeDashoffset: 60
+  },
+  to: {
+    transform: 'rotate(230deg)',
+    opacity: 1,
+    strokeDashoffset: 50
+  }
+});
+var loadInStyles = (0, _core.css)({
+  animation: "".concat(loadIn, " 1s ease-in-out"),
+
+  /**
+   * When the animation completes, stay at the last frame of the animation.
+   */
+  animationFillMode: 'forwards',
+
+  /**
+   * We are going to animate this in.
+   */
+  opacity: 0
+});
+var wrapperStyles = (0, _core.css)({
+  display: 'inline-flex',
+
+  /**
+   * Align better inline with text.
+   */
+  verticalAlign: 'middle'
+});
+var circleStyles = (0, _core.css)({
+  fill: 'none',
+  strokeDasharray: 60,
+  strokeDashoffset: 'inherit',
+  strokeLinecap: 'round',
+  strokeWidth: 1.5,
+  '@media screen and (forced-colors: active)': {
+    filter: 'grayscale(100%)',
+    stroke: 'CanvasText'
+  }
+});
+
 var _default = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function Spinner(_ref2, ref) {
@@ -54,32 +110,54 @@ var testId = _ref2.testId,
   var size = typeof providedSize === 'number' ? providedSize : _constants.presetSizes[providedSize];
-  return (0, _core.jsx)(_components.default.Consumer, null, function (tokens) {
-    var strokeColor = getStrokeColor({
-      mode: tokens.mode,
-      appearance: appearance
-    }); // The Spinner animation uses a combination of two
-    // css animations on two separate elements.
+  var animationDelay = "".concat(delay, "ms");
 
-    return (0, _core.jsx)("span", {
-      /* This span exists to off-load animations from the circle element,
-       which were causing performance issues (style recalculations) on Safari and older versions of Chrome.
-       This can be removed and styles placed back on the circle element once Safari fixes this bug and off-loads rendering to the GPU from the CPU.
-       */
-      css: (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n                transform-origin: center;\n                animation: ", " 0.86s infinite;\n                animation-delay: ", "ms;\n                animation-timing-function: cubic-bezier(0.4, 0.15, 0.6, 0.85);\n                height: ", "px;\n                width: ", "px;\n                display: inline-flex;\n                /* align better inline with text */\n                vertical-align: middle;\n              "])), rotate, delay, size, size),
-      "data-testid": testId && "".concat(testId, "-wrapper")
-    }, (0, _core.jsx)("svg", {
-      height: size,
+  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
+      mode = _useGlobalTheme.mode;
+
+  var stroke = getStrokeColor({
+    mode: mode,
+    appearance: appearance
+  });
+  /**
+   * The Spinner animation uses a combination of two
+   * css animations on two separate elements.
+   */
+
+  return (0, _core.jsx)("span", {
+    /**
+     * This span exists to off-load animations from the circle element,
+     * which were causing performance issues (style recalculations)
+     * on Safari and older versions of Chrome.
+     *
+     * This can be removed and styles placed back on the circle element once
+     * Safari fixes this bug and off-loads rendering to the GPU from the CPU.
+     */
+    css: [wrapperStyles, rotateStyles],
+    "data-testid": testId && "".concat(testId, "-wrapper"),
+    style: {
+      animationDelay: animationDelay,
       width: size,
-      viewBox: "0 0 16 16",
-      xmlns: "http://www.w3.org/2000/svg",
-      "data-testid": testId,
-      ref: ref,
-      css: (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n                  /* We are going to animate this in */\n                  opacity: 0;\n                  animation: ", " 1s ease-in-out;\n                  /* When the animation completes, stay at the last frame of the animation */\n                  animation-fill-mode: forwards;\n                  animation-delay: ", "ms;\n                  fill: none;\n                  stroke: ", ";\n                  stroke-width: 1.5;\n                  stroke-linecap: round;\n                  stroke-dasharray: 60;\n                  stroke-dashoffset: inherit;\n                  @media screen and (forced-colors: active) {\n                    filter: grayscale(100%);\n                    stroke: CanvasText;\n                  }\n                "])), loadIn, delay, strokeColor)
-    }, (0, _core.jsx)("circle", {
-      cx: "8",
-      cy: "8",
-      r: "7"
-    })));
-  });
+      height: size
+    }
+  }, (0, _core.jsx)("svg", {
+    height: size,
+    width: size,
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": testId,
+    ref: ref,
+    css: loadInStyles,
+    style: {
+      animationDelay: animationDelay
+    }
+  }, (0, _core.jsx)("circle", {
+    cx: "8",
+    cy: "8",
+    r: "7",
+    css: circleStyles,
+    style: {
+      stroke: stroke
+    }
+  })));
 }));
 
 exports.default = _default;

dist/cjs/version.json

 {
 	"name": "@atlaskit/spinner",
-	"version": "15.1.6",
+	"version": "15.1.7",
 	"sideEffects": false
 }

dist/es2019/spinner.js

@@ -5,24 +5,8 @@ /** @jsx jsx */
 import { DN500, DN900, N0, N500 } from '@atlaskit/theme/colors';
-import GlobalTheme from '@atlaskit/theme/components';
+import { useGlobalTheme } from '@atlaskit/theme/components';
 import { presetSizes } from './constants';
-const rotate = keyframes`
-  to { transform: rotate(360deg); }
-`; // There are three parts to the load in animation:
-// 1. Fade in
-// 2. Accelerated spin
-// 3. Stretch the spinner line
 
-const loadIn = keyframes`
-  from {
-    transform: rotate(50deg);
-    opacity: 0;
-    stroke-dashoffset: 60;
-  }
-  to {
-    transform: rotate(230deg);
-    opacity: 1;
-    stroke-dashoffset: 50;
-  }
-`;
-
+/**
+ * Returns the appropriate circle stroke color.
+ */
 function getStrokeColor({
@@ -39,2 +23,63 @@ mode,
 
+const rotate = keyframes({
+  to: {
+    transform: 'rotate(360deg)'
+  }
+});
+const rotateStyles = css({
+  animation: `${rotate} 0.86s infinite`,
+  animationTimingFunction: 'cubic-bezier(0.4, 0.15, 0.6, 0.85)',
+  transformOrigin: 'center'
+});
+/**
+ * There are three parts to the load in animation:
+ * 1. Fade in
+ * 2. Accelerated spin
+ * 3. Stretch the spinner line
+ */
+
+const loadIn = keyframes({
+  from: {
+    transform: 'rotate(50deg)',
+    opacity: 0,
+    strokeDashoffset: 60
+  },
+  to: {
+    transform: 'rotate(230deg)',
+    opacity: 1,
+    strokeDashoffset: 50
+  }
+});
+const loadInStyles = css({
+  animation: `${loadIn} 1s ease-in-out`,
+
+  /**
+   * When the animation completes, stay at the last frame of the animation.
+   */
+  animationFillMode: 'forwards',
+
+  /**
+   * We are going to animate this in.
+   */
+  opacity: 0
+});
+const wrapperStyles = css({
+  display: 'inline-flex',
+
+  /**
+   * Align better inline with text.
+   */
+  verticalAlign: 'middle'
+});
+const circleStyles = css({
+  fill: 'none',
+  strokeDasharray: 60,
+  strokeDashoffset: 'inherit',
+  strokeLinecap: 'round',
+  strokeWidth: 1.5,
+  '@media screen and (forced-colors: active)': {
+    filter: 'grayscale(100%)',
+    stroke: 'CanvasText'
+  }
+});
 export default /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Spinner({
@@ -47,57 +92,51 @@ testId,
   const size = typeof providedSize === 'number' ? providedSize : presetSizes[providedSize];
-  return jsx(GlobalTheme.Consumer, null, tokens => {
-    const strokeColor = getStrokeColor({
-      mode: tokens.mode,
-      appearance
-    }); // The Spinner animation uses a combination of two
-    // css animations on two separate elements.
+  const animationDelay = `${delay}ms`;
+  const {
+    mode
+  } = useGlobalTheme();
+  const stroke = getStrokeColor({
+    mode,
+    appearance
+  });
+  /**
+   * The Spinner animation uses a combination of two
+   * css animations on two separate elements.
+   */
 
-    return jsx("span", {
-      /* This span exists to off-load animations from the circle element,
-       which were causing performance issues (style recalculations) on Safari and older versions of Chrome.
-       This can be removed and styles placed back on the circle element once Safari fixes this bug and off-loads rendering to the GPU from the CPU.
-       */
-      css: css`
-                transform-origin: center;
-                animation: ${rotate} 0.86s infinite;
-                animation-delay: ${delay}ms;
-                animation-timing-function: cubic-bezier(0.4, 0.15, 0.6, 0.85);
-                height: ${size}px;
-                width: ${size}px;
-                display: inline-flex;
-                /* align better inline with text */
-                vertical-align: middle;
-              `,
-      "data-testid": testId && `${testId}-wrapper`
-    }, jsx("svg", {
-      height: size,
+  return jsx("span", {
+    /**
+     * This span exists to off-load animations from the circle element,
+     * which were causing performance issues (style recalculations)
+     * on Safari and older versions of Chrome.
+     *
+     * This can be removed and styles placed back on the circle element once
+     * Safari fixes this bug and off-loads rendering to the GPU from the CPU.
+     */
+    css: [wrapperStyles, rotateStyles],
+    "data-testid": testId && `${testId}-wrapper`,
+    style: {
+      animationDelay,
       width: size,
-      viewBox: "0 0 16 16",
-      xmlns: "http://www.w3.org/2000/svg",
-      "data-testid": testId,
-      ref: ref,
-      css: css`
-                  /* We are going to animate this in */
-                  opacity: 0;
-                  animation: ${loadIn} 1s ease-in-out;
-                  /* When the animation completes, stay at the last frame of the animation */
-                  animation-fill-mode: forwards;
-                  animation-delay: ${delay}ms;
-                  fill: none;
-                  stroke: ${strokeColor};
-                  stroke-width: 1.5;
-                  stroke-linecap: round;
-                  stroke-dasharray: 60;
-                  stroke-dashoffset: inherit;
-                  @media screen and (forced-colors: active) {
-                    filter: grayscale(100%);
-                    stroke: CanvasText;
-                  }
-                `
-    }, jsx("circle", {
-      cx: "8",
-      cy: "8",
-      r: "7"
-    })));
-  });
+      height: size
+    }
+  }, jsx("svg", {
+    height: size,
+    width: size,
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": testId,
+    ref: ref,
+    css: loadInStyles,
+    style: {
+      animationDelay
+    }
+  }, jsx("circle", {
+    cx: "8",
+    cy: "8",
+    r: "7",
+    css: circleStyles,
+    style: {
+      stroke
+    }
+  })));
 }));

dist/es2019/version.json

 {
 	"name": "@atlaskit/spinner",
-	"version": "15.1.6",
+	"version": "15.1.7",
 	"sideEffects": false
 }

dist/esm/spinner.js

@@ -1,5 +0,1 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
 /** @jsx jsx */
@@ -9,11 +5,8 @@ import React from 'react';
 import { DN500, DN900, N0, N500 } from '@atlaskit/theme/colors';
-import GlobalTheme from '@atlaskit/theme/components';
+import { useGlobalTheme } from '@atlaskit/theme/components';
 import { presetSizes } from './constants';
-var rotate = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  to { transform: rotate(360deg); }\n"]))); // There are three parts to the load in animation:
-// 1. Fade in
-// 2. Accelerated spin
-// 3. Stretch the spinner line
 
-var loadIn = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(50deg);\n    opacity: 0;\n    stroke-dashoffset: 60;\n  }\n  to {\n    transform: rotate(230deg);\n    opacity: 1;\n    stroke-dashoffset: 50;\n  }\n"])));
-
+/**
+ * Returns the appropriate circle stroke color.
+ */
 function getStrokeColor(_ref) {
@@ -30,2 +23,63 @@ var mode = _ref.mode,
 
+var rotate = keyframes({
+  to: {
+    transform: 'rotate(360deg)'
+  }
+});
+var rotateStyles = css({
+  animation: "".concat(rotate, " 0.86s infinite"),
+  animationTimingFunction: 'cubic-bezier(0.4, 0.15, 0.6, 0.85)',
+  transformOrigin: 'center'
+});
+/**
+ * There are three parts to the load in animation:
+ * 1. Fade in
+ * 2. Accelerated spin
+ * 3. Stretch the spinner line
+ */
+
+var loadIn = keyframes({
+  from: {
+    transform: 'rotate(50deg)',
+    opacity: 0,
+    strokeDashoffset: 60
+  },
+  to: {
+    transform: 'rotate(230deg)',
+    opacity: 1,
+    strokeDashoffset: 50
+  }
+});
+var loadInStyles = css({
+  animation: "".concat(loadIn, " 1s ease-in-out"),
+
+  /**
+   * When the animation completes, stay at the last frame of the animation.
+   */
+  animationFillMode: 'forwards',
+
+  /**
+   * We are going to animate this in.
+   */
+  opacity: 0
+});
+var wrapperStyles = css({
+  display: 'inline-flex',
+
+  /**
+   * Align better inline with text.
+   */
+  verticalAlign: 'middle'
+});
+var circleStyles = css({
+  fill: 'none',
+  strokeDasharray: 60,
+  strokeDashoffset: 'inherit',
+  strokeLinecap: 'round',
+  strokeWidth: 1.5,
+  '@media screen and (forced-colors: active)': {
+    filter: 'grayscale(100%)',
+    stroke: 'CanvasText'
+  }
+});
 export default /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Spinner(_ref2, ref) {
@@ -40,30 +94,52 @@ var testId = _ref2.testId,
   var size = typeof providedSize === 'number' ? providedSize : presetSizes[providedSize];
-  return jsx(GlobalTheme.Consumer, null, function (tokens) {
-    var strokeColor = getStrokeColor({
-      mode: tokens.mode,
-      appearance: appearance
-    }); // The Spinner animation uses a combination of two
-    // css animations on two separate elements.
+  var animationDelay = "".concat(delay, "ms");
 
-    return jsx("span", {
-      /* This span exists to off-load animations from the circle element,
-       which were causing performance issues (style recalculations) on Safari and older versions of Chrome.
-       This can be removed and styles placed back on the circle element once Safari fixes this bug and off-loads rendering to the GPU from the CPU.
-       */
-      css: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                transform-origin: center;\n                animation: ", " 0.86s infinite;\n                animation-delay: ", "ms;\n                animation-timing-function: cubic-bezier(0.4, 0.15, 0.6, 0.85);\n                height: ", "px;\n                width: ", "px;\n                display: inline-flex;\n                /* align better inline with text */\n                vertical-align: middle;\n              "])), rotate, delay, size, size),
-      "data-testid": testId && "".concat(testId, "-wrapper")
-    }, jsx("svg", {
-      height: size,
+  var _useGlobalTheme = useGlobalTheme(),
+      mode = _useGlobalTheme.mode;
+
+  var stroke = getStrokeColor({
+    mode: mode,
+    appearance: appearance
+  });
+  /**
+   * The Spinner animation uses a combination of two
+   * css animations on two separate elements.
+   */
+
+  return jsx("span", {
+    /**
+     * This span exists to off-load animations from the circle element,
+     * which were causing performance issues (style recalculations)
+     * on Safari and older versions of Chrome.
+     *
+     * This can be removed and styles placed back on the circle element once
+     * Safari fixes this bug and off-loads rendering to the GPU from the CPU.
+     */
+    css: [wrapperStyles, rotateStyles],
+    "data-testid": testId && "".concat(testId, "-wrapper"),
+    style: {
+      animationDelay: animationDelay,
       width: size,
-      viewBox: "0 0 16 16",
-      xmlns: "http://www.w3.org/2000/svg",
-      "data-testid": testId,
-      ref: ref,
-      css: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                  /* We are going to animate this in */\n                  opacity: 0;\n                  animation: ", " 1s ease-in-out;\n                  /* When the animation completes, stay at the last frame of the animation */\n                  animation-fill-mode: forwards;\n                  animation-delay: ", "ms;\n                  fill: none;\n                  stroke: ", ";\n                  stroke-width: 1.5;\n                  stroke-linecap: round;\n                  stroke-dasharray: 60;\n                  stroke-dashoffset: inherit;\n                  @media screen and (forced-colors: active) {\n                    filter: grayscale(100%);\n                    stroke: CanvasText;\n                  }\n                "])), loadIn, delay, strokeColor)
-    }, jsx("circle", {
-      cx: "8",
-      cy: "8",
-      r: "7"
-    })));
-  });
+      height: size
+    }
+  }, jsx("svg", {
+    height: size,
+    width: size,
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": testId,
+    ref: ref,
+    css: loadInStyles,
+    style: {
+      animationDelay: animationDelay
+    }
+  }, jsx("circle", {
+    cx: "8",
+    cy: "8",
+    r: "7",
+    css: circleStyles,
+    style: {
+      stroke: stroke
+    }
+  })));
 }));

dist/esm/version.json

 {
 	"name": "@atlaskit/spinner",
-	"version": "15.1.6",
+	"version": "15.1.7",
 	"sideEffects": false
 }

package.json

 {
   "name": "@atlaskit/spinner",
-  "version": "15.1.6",
+  "version": "15.1.7",
   "description": "A spinner is an animated spinning icon that lets users know content is being loaded.",
@@ -27,3 +27,3 @@ "publishConfig": {
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.6.0",
+    "@atlaskit/tokens": "^0.7.0",
     "@babel/runtime": "^7.0.0",
@@ -37,3 +37,3 @@ "@emotion/core": "^10.0.9"
     "@atlaskit/avatar": "^20.5.0",
-    "@atlaskit/button": "^16.1.0",
+    "@atlaskit/button": "^16.2.0",
     "@atlaskit/docs": "*",
@@ -67,3 +67,4 @@ "@atlaskit/icon": "^21.10.0",
       "styling": [
-        "emotion"
+        "emotion",
+        "static"
       ]
@@ -70,0 +71,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

862

increased by26.02%

Worsened metrics

Total package byte prevSize

66736

decreased by-1.29%

Dependency changes

• + Added@atlaskit/tokens@0.7.3(transitive)

• - Removed@atlaskit/tokens@0.6.3(transitive)

• Updated@atlaskit/tokens@^0.7.0