@atlaskit/onboarding 11.2.7 → 11.3.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/onboarding
 
+## 11.3.1
+
+### Patch Changes
+
+- [#92007](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92007) [`85525725cb0d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/85525725cb0d) - Migrated to the new button component
+
+## 11.3.0
+
+### Minor Changes
+
+- [#84838](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/84838) [`e3dc0b4099fe`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e3dc0b4099fe) - [ux] Now the pulsing animations in both the standard Spotlight and the dedicated Pulse component respect `prefers-reduced-motion` user preferences. If a user sets their system preferences to reduce motion, instead of a pulsing animation we will show a static 'discovery' outline.
+
 ## 11.2.7
 
 ### Patch Changes

package/dist/cjs/components/spotlight-dialog.js

@@ -27,7 +27,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "11.2.7";
+var packageVersion = "11.3.1";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);

package/dist/cjs/styled/target.js

@@ -9,6 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@emotion/react");
+var _motion = require("@atlaskit/motion");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _excluded = ["children", "bgColor", "radius", "style", "testId"],
@@ -32,7 +33,10 @@ var pulseKeyframes = (0, _react.keyframes)({
 // This is needed for unit tests
 var pulseKeyframesName = exports.pulseKeyframesName = pulseKeyframes.name;
 var animationStyles = (0, _react.css)({
-  animation: "".concat(pulseKeyframes, " 3000ms ").concat(easing, " infinite")
+  animation: "".concat(pulseKeyframes, " 3000ms ").concat(easing, " infinite"),
+  // Keep a purple boxshadow on the Pulse component if `prefers-reduced-motion`
+  // is applied so we still have a functioning semantic affordance.
+  boxShadow: baseShadow
 });
 
 // IE11 and Edge: z-index needed because fixed position calculates z-index relative
@@ -69,21 +73,21 @@ var TargetInner = exports.TargetInner = function TargetInner(_ref2) {
   var children = _ref2.children,
     pulse = _ref2.pulse,
     props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-  return (
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    (0, _react.jsx)(Base, (0, _extends2.default)({}, props, {
-      css: [pulse && animationStyles]
-    }), children)
-  );
+  return (0, _react.jsx)(Base
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , (0, _extends2.default)({}, props, {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    css: [pulse && animationStyles, _motion.reduceMotionAsPerUserPreference]
+  }), children);
 };
 var targetOverlayStyles = (0, _react.css)({
   width: '100%',
   height: '100%',
   position: 'absolute',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  top: 0,
+  insetBlockStart: 0,
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  left: 0
+  insetInlineStart: 0
 });
 
 /**
@@ -118,11 +122,12 @@ var Pulse = exports.Pulse = function Pulse(_ref3) {
     pulse = _ref3$pulse === void 0 ? true : _ref3$pulse,
     testId = _ref3.testId,
     props = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
-  return (
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    (0, _react.jsx)(Base, (0, _extends2.default)({}, props, {
-      css: [pulse && animationStyles],
-      testId: testId
-    }), children)
-  );
+  return (0, _react.jsx)(Base
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , (0, _extends2.default)({}, props, {
+    css: [pulse && animationStyles,
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    _motion.reduceMotionAsPerUserPreference],
+    testId: testId
+  }), children);
 };

package/dist/es2019/components/spotlight-dialog.js

@@ -7,7 +7,7 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 const packageName = "@atlaskit/onboarding";
-const packageVersion = "11.2.7";
+const packageVersion = "11.3.1";
 class SpotlightDialog extends Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/styled/target.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 
 import { css, jsx, keyframes } from '@emotion/react';
+import { reduceMotionAsPerUserPreference } from '@atlaskit/motion';
 import { P300 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 // NOTE:
@@ -19,7 +20,10 @@ const pulseKeyframes = keyframes({
 // This is needed for unit tests
 export const pulseKeyframesName = pulseKeyframes.name;
 const animationStyles = css({
-  animation: `${pulseKeyframes} 3000ms ${easing} infinite`
+  animation: `${pulseKeyframes} 3000ms ${easing} infinite`,
+  // Keep a purple boxshadow on the Pulse component if `prefers-reduced-motion`
+  // is applied so we still have a functioning semantic affordance.
+  boxShadow: baseShadow
 });
 
 // IE11 and Edge: z-index needed because fixed position calculates z-index relative
@@ -56,19 +60,20 @@ export const TargetInner = ({
   children,
   pulse,
   ...props
-}) =>
+}) => jsx(Base
 // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-jsx(Base, _extends({}, props, {
-  css: [pulse && animationStyles]
+, _extends({}, props, {
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+  css: [pulse && animationStyles, reduceMotionAsPerUserPreference]
 }), children);
 const targetOverlayStyles = css({
   width: '100%',
   height: '100%',
   position: 'absolute',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  top: 0,
+  insetBlockStart: 0,
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  left: 0
+  insetInlineStart: 0
 });
 
 /**
@@ -100,9 +105,11 @@ export const Pulse = ({
   pulse = true,
   testId,
   ...props
-}) =>
+}) => jsx(Base
 // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-jsx(Base, _extends({}, props, {
-  css: [pulse && animationStyles],
+, _extends({}, props, {
+  css: [pulse && animationStyles,
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+  reduceMotionAsPerUserPreference],
   testId: testId
 }), children);

package/dist/esm/components/spotlight-dialog.js

@@ -17,7 +17,7 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "11.2.7";
+var packageVersion = "11.3.1";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   _inherits(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);

package/dist/esm/styled/target.js

@@ -9,6 +9,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /** @jsx jsx */
 
 import { css, jsx, keyframes } from '@emotion/react';
+import { reduceMotionAsPerUserPreference } from '@atlaskit/motion';
 import { P300 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 // NOTE:
@@ -26,7 +27,10 @@ var pulseKeyframes = keyframes({
 // This is needed for unit tests
 export var pulseKeyframesName = pulseKeyframes.name;
 var animationStyles = css({
-  animation: "".concat(pulseKeyframes, " 3000ms ").concat(easing, " infinite")
+  animation: "".concat(pulseKeyframes, " 3000ms ").concat(easing, " infinite"),
+  // Keep a purple boxshadow on the Pulse component if `prefers-reduced-motion`
+  // is applied so we still have a functioning semantic affordance.
+  boxShadow: baseShadow
 });
 
 // IE11 and Edge: z-index needed because fixed position calculates z-index relative
@@ -63,21 +67,21 @@ export var TargetInner = function TargetInner(_ref2) {
   var children = _ref2.children,
     pulse = _ref2.pulse,
     props = _objectWithoutProperties(_ref2, _excluded2);
-  return (
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    jsx(Base, _extends({}, props, {
-      css: [pulse && animationStyles]
-    }), children)
-  );
+  return jsx(Base
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , _extends({}, props, {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    css: [pulse && animationStyles, reduceMotionAsPerUserPreference]
+  }), children);
 };
 var targetOverlayStyles = css({
   width: '100%',
   height: '100%',
   position: 'absolute',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  top: 0,
+  insetBlockStart: 0,
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  left: 0
+  insetInlineStart: 0
 });
 
 /**
@@ -112,11 +116,12 @@ export var Pulse = function Pulse(_ref3) {
     pulse = _ref3$pulse === void 0 ? true : _ref3$pulse,
     testId = _ref3.testId,
     props = _objectWithoutProperties(_ref3, _excluded3);
-  return (
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    jsx(Base, _extends({}, props, {
-      css: [pulse && animationStyles],
-      testId: testId
-    }), children)
-  );
+  return jsx(Base
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , _extends({}, props, {
+    css: [pulse && animationStyles,
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    reduceMotionAsPerUserPreference],
+    testId: testId
+  }), children);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/onboarding",
-  "version": "11.2.7",
+  "version": "11.3.1",
   "description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -39,15 +39,16 @@
     }
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/button": "^17.8.0",
-    "@atlaskit/ds-lib": "^2.2.0",
-    "@atlaskit/heading": "^2.1.0",
-    "@atlaskit/modal-dialog": "^12.10.0",
+    "@atlaskit/analytics-next": "^9.3.0",
+    "@atlaskit/button": "^17.14.0",
+    "@atlaskit/ds-lib": "^2.3.0",
+    "@atlaskit/heading": "^2.2.0",
+    "@atlaskit/modal-dialog": "^12.11.0",
+    "@atlaskit/motion": "^1.5.0",
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/portal": "^4.4.0",
     "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.42.0",
+    "@atlaskit/tokens": "^1.43.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",