@atlaskit/onboarding 13.0.1 → 13.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/components/spotlight-inner.js +2 -0
  3. package/dist/cjs/styled/modal.js +1 -1
  4. package/dist/cjs/utils/use-element-box.js +27 -6
  5. package/dist/es2019/components/spotlight-inner.js +5 -1
  6. package/dist/es2019/styled/modal.js +1 -1
  7. package/dist/es2019/utils/use-element-box.js +27 -6
  8. package/dist/esm/components/spotlight-inner.js +2 -0
  9. package/dist/esm/styled/modal.js +1 -1
  10. package/dist/esm/utils/use-element-box.js +27 -6
  11. package/package.json +12 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/onboarding
2
2
 
3
+ ## 13.0.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#123425](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/123425)
8
+ [`9d24a5a33ee9e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9d24a5a33ee9e) -
9
+ Add setTimeout to defer state update on cloned target to avoid content shifting issue when
10
+ scrollbars are on the page
11
+
12
+ ## 13.0.2
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies
17
+
3
18
  ## 13.0.1
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/components/spotlight-inner.js CHANGED
@@ -69,6 +69,8 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
69
69
  top: top,
70
70
  width: width,
71
71
  position: 'fixed'
72
+ }, width === 0 && (0, _platformFeatureFlags.fg)('scroll-lock-replacement') && {
73
+ visibility: 'hidden'
72
74
  });
73
75
  });
74
76
  return _this;
package/dist/cjs/styled/modal.js CHANGED
@@ -18,7 +18,7 @@ var modalBodyStyles = (0, _react.css)({
18
18
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-array-arguments -- Ignored via go/DSP-18766
19
19
  var modalHeadingStyles = (0, _react.css)({
20
20
  color: 'inherit',
21
- font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
21
+ font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
22
22
  marginBlockEnd: "var(--ds-space-100, 8px)"
23
23
  });
24
24
  var modalImageStyles = (0, _react.css)({
package/dist/cjs/utils/use-element-box.js CHANGED
@@ -8,6 +8,7 @@ exports.ElementBox = void 0;
8
8
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
9
  var _react = require("react");
10
10
  var _bindEventListener = require("bind-event-listener");
11
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
11
12
  // The minimum interval between position updates in milliseconds
12
13
  var POSITION_UPDATE_INTERVAL = 200;
13
14
  var getElementRect = function getElementRect(element) {
@@ -35,7 +36,15 @@ var useResizeAwareElementBox = function useResizeAwareElementBox(element, update
35
36
  setBox = _useState2[1];
36
37
  (0, _react.useLayoutEffect)(function () {
37
38
  if (updateMethod === 'resizeListener') {
38
- setBox(getElementRect(element));
39
+ if ((0, _platformFeatureFlags.fg)('scroll-lock-replacement')) {
40
+ // use setTimeout 0 to defer the state update to avoid content shifting when pages have scrollbars
41
+ // more details are https://www.loom.com/share/96a5d7c2afd74146a3c005bf20a8c69e?sid=968b00c1-e5ab-4ea0-9fe4-e534fe7088e4
42
+ setTimeout(function () {
43
+ setBox(getElementRect(element));
44
+ }, 0);
45
+ } else {
46
+ setBox(getElementRect(element));
47
+ }
39
48
  }
40
49
  }, [element, updateMethod]);
41
50
  (0, _react.useEffect)(function () {
@@ -76,11 +85,23 @@ var usePollingElementBox = function usePollingElementBox(element, updateMethod)
76
85
  setTop = _useState10[1];
77
86
  (0, _react.useLayoutEffect)(function () {
78
87
  if (updateMethod === 'polling') {
79
- var newBox = getElementRect(element);
80
- setWidth(newBox.width);
81
- setHeight(newBox.height);
82
- setLeft(newBox.left);
83
- setTop(newBox.top);
88
+ if ((0, _platformFeatureFlags.fg)('scroll-lock-replacement')) {
89
+ // use setTimeout 0 to defer the state update to avoid content shifting when pages have scrollbars
90
+ // more details are https://www.loom.com/share/96a5d7c2afd74146a3c005bf20a8c69e?sid=968b00c1-e5ab-4ea0-9fe4-e534fe7088e4
91
+ setTimeout(function () {
92
+ var newBox = getElementRect(element);
93
+ setWidth(newBox.width);
94
+ setHeight(newBox.height);
95
+ setLeft(newBox.left);
96
+ setTop(newBox.top);
97
+ }, 0);
98
+ } else {
99
+ var newBox = getElementRect(element);
100
+ setWidth(newBox.width);
101
+ setHeight(newBox.height);
102
+ setLeft(newBox.left);
103
+ setTop(newBox.top);
104
+ }
84
105
  }
85
106
  }, [element, updateMethod]);
86
107
 
package/dist/es2019/components/spotlight-inner.js CHANGED
@@ -50,7 +50,11 @@ class SpotlightInner extends React.Component {
50
50
  left,
51
51
  top,
52
52
  width,
53
- position: 'fixed'
53
+ position: 'fixed',
54
+ // when width is 0, set visibility hidden to avoid the target flashing issue
55
+ ...(width === 0 && fg('scroll-lock-replacement') && {
56
+ visibility: 'hidden'
57
+ })
54
58
  };
55
59
  });
56
60
  }
package/dist/es2019/styled/modal.js CHANGED
@@ -12,7 +12,7 @@ const modalBodyStyles = css({
12
12
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-array-arguments -- Ignored via go/DSP-18766
13
13
  const modalHeadingStyles = css({
14
14
  color: 'inherit',
15
- font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
15
+ font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
16
16
  marginBlockEnd: "var(--ds-space-100, 8px)"
17
17
  });
18
18
  const modalImageStyles = css({
package/dist/es2019/utils/use-element-box.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
2
2
  import { bind } from 'bind-event-listener';
3
+ import { fg } from '@atlaskit/platform-feature-flags';
3
4
  // The minimum interval between position updates in milliseconds
4
5
  const POSITION_UPDATE_INTERVAL = 200;
5
6
  const getElementRect = element => {
@@ -25,7 +26,15 @@ const useResizeAwareElementBox = (element, updateMethod) => {
25
26
  });
26
27
  useLayoutEffect(() => {
27
28
  if (updateMethod === 'resizeListener') {
28
- setBox(getElementRect(element));
29
+ if (fg('scroll-lock-replacement')) {
30
+ // use setTimeout 0 to defer the state update to avoid content shifting when pages have scrollbars
31
+ // more details are https://www.loom.com/share/96a5d7c2afd74146a3c005bf20a8c69e?sid=968b00c1-e5ab-4ea0-9fe4-e534fe7088e4
32
+ setTimeout(() => {
33
+ setBox(getElementRect(element));
34
+ }, 0);
35
+ } else {
36
+ setBox(getElementRect(element));
37
+ }
29
38
  }
30
39
  }, [element, updateMethod]);
31
40
  useEffect(() => {
@@ -54,11 +63,23 @@ const usePollingElementBox = (element, updateMethod) => {
54
63
  const [top, setTop] = useState(0);
55
64
  useLayoutEffect(() => {
56
65
  if (updateMethod === 'polling') {
57
- const newBox = getElementRect(element);
58
- setWidth(newBox.width);
59
- setHeight(newBox.height);
60
- setLeft(newBox.left);
61
- setTop(newBox.top);
66
+ if (fg('scroll-lock-replacement')) {
67
+ // use setTimeout 0 to defer the state update to avoid content shifting when pages have scrollbars
68
+ // more details are https://www.loom.com/share/96a5d7c2afd74146a3c005bf20a8c69e?sid=968b00c1-e5ab-4ea0-9fe4-e534fe7088e4
69
+ setTimeout(() => {
70
+ const newBox = getElementRect(element);
71
+ setWidth(newBox.width);
72
+ setHeight(newBox.height);
73
+ setLeft(newBox.left);
74
+ setTop(newBox.top);
75
+ }, 0);
76
+ } else {
77
+ const newBox = getElementRect(element);
78
+ setWidth(newBox.width);
79
+ setHeight(newBox.height);
80
+ setLeft(newBox.left);
81
+ setTop(newBox.top);
82
+ }
62
83
  }
63
84
  }, [element, updateMethod]);
64
85
 
package/dist/esm/components/spotlight-inner.js CHANGED
@@ -62,6 +62,8 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
62
62
  top: top,
63
63
  width: width,
64
64
  position: 'fixed'
65
+ }, width === 0 && fg('scroll-lock-replacement') && {
66
+ visibility: 'hidden'
65
67
  });
66
68
  });
67
69
  return _this;
package/dist/esm/styled/modal.js CHANGED
@@ -12,7 +12,7 @@ var modalBodyStyles = css({
12
12
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-array-arguments -- Ignored via go/DSP-18766
13
13
  var modalHeadingStyles = css({
14
14
  color: 'inherit',
15
- font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
15
+ font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
16
16
  marginBlockEnd: "var(--ds-space-100, 8px)"
17
17
  });
18
18
  var modalImageStyles = css({
package/dist/esm/utils/use-element-box.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
2
  import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
3
3
  import { bind } from 'bind-event-listener';
4
+ import { fg } from '@atlaskit/platform-feature-flags';
4
5
  // The minimum interval between position updates in milliseconds
5
6
  var POSITION_UPDATE_INTERVAL = 200;
6
7
  var getElementRect = function getElementRect(element) {
@@ -28,7 +29,15 @@ var useResizeAwareElementBox = function useResizeAwareElementBox(element, update
28
29
  setBox = _useState2[1];
29
30
  useLayoutEffect(function () {
30
31
  if (updateMethod === 'resizeListener') {
31
- setBox(getElementRect(element));
32
+ if (fg('scroll-lock-replacement')) {
33
+ // use setTimeout 0 to defer the state update to avoid content shifting when pages have scrollbars
34
+ // more details are https://www.loom.com/share/96a5d7c2afd74146a3c005bf20a8c69e?sid=968b00c1-e5ab-4ea0-9fe4-e534fe7088e4
35
+ setTimeout(function () {
36
+ setBox(getElementRect(element));
37
+ }, 0);
38
+ } else {
39
+ setBox(getElementRect(element));
40
+ }
32
41
  }
33
42
  }, [element, updateMethod]);
34
43
  useEffect(function () {
@@ -69,11 +78,23 @@ var usePollingElementBox = function usePollingElementBox(element, updateMethod)
69
78
  setTop = _useState10[1];
70
79
  useLayoutEffect(function () {
71
80
  if (updateMethod === 'polling') {
72
- var newBox = getElementRect(element);
73
- setWidth(newBox.width);
74
- setHeight(newBox.height);
75
- setLeft(newBox.left);
76
- setTop(newBox.top);
81
+ if (fg('scroll-lock-replacement')) {
82
+ // use setTimeout 0 to defer the state update to avoid content shifting when pages have scrollbars
83
+ // more details are https://www.loom.com/share/96a5d7c2afd74146a3c005bf20a8c69e?sid=968b00c1-e5ab-4ea0-9fe4-e534fe7088e4
84
+ setTimeout(function () {
85
+ var newBox = getElementRect(element);
86
+ setWidth(newBox.width);
87
+ setHeight(newBox.height);
88
+ setLeft(newBox.left);
89
+ setTop(newBox.top);
90
+ }, 0);
91
+ } else {
92
+ var newBox = getElementRect(element);
93
+ setWidth(newBox.width);
94
+ setHeight(newBox.height);
95
+ setLeft(newBox.left);
96
+ setTop(newBox.top);
97
+ }
77
98
  }
78
99
  }, [element, updateMethod]);
79
100
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/onboarding",
3
- "version": "13.0.1",
3
+ "version": "13.0.3",
4
4
  "description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -43,13 +43,13 @@
43
43
  "@atlaskit/heading": "^5.1.0",
44
44
  "@atlaskit/layering": "^2.0.0",
45
45
  "@atlaskit/modal-dialog": "^13.0.0",
46
- "@atlaskit/motion": "^5.0.0",
46
+ "@atlaskit/motion": "^5.1.0",
47
47
  "@atlaskit/platform-feature-flags": "^1.1.0",
48
48
  "@atlaskit/popper": "^7.0.0",
49
49
  "@atlaskit/portal": "^5.0.0",
50
50
  "@atlaskit/primitives": "^14.1.0",
51
- "@atlaskit/theme": "^17.0.0",
52
- "@atlaskit/tokens": "^4.2.0",
51
+ "@atlaskit/theme": "^18.0.0",
52
+ "@atlaskit/tokens": "^4.3.0",
53
53
  "@babel/runtime": "^7.0.0",
54
54
  "@emotion/react": "^11.7.1",
55
55
  "bind-event-listener": "^3.0.0",
@@ -66,11 +66,11 @@
66
66
  "react-dom": "^18.2.0"
67
67
  },
68
68
  "devDependencies": {
69
- "@af/accessibility-testing": "*",
70
- "@af/integration-testing": "*",
71
- "@af/visual-regression": "*",
72
- "@atlaskit/ssr": "*",
73
- "@atlaskit/visual-regression": "*",
69
+ "@af/accessibility-testing": "^2.0.0",
70
+ "@af/integration-testing": "^0.5.0",
71
+ "@af/visual-regression": "^1.3.0",
72
+ "@atlaskit/ssr": "^0.4.0",
73
+ "@atlaskit/visual-regression": "^0.10.0",
74
74
  "@testing-library/react": "^13.4.0",
75
75
  "@testing-library/react-hooks": "^8.0.1",
76
76
  "@testing-library/user-event": "^14.4.3",
@@ -86,6 +86,9 @@
86
86
  "platform_design_system_team_onboarding_noderesolve": {
87
87
  "type": "boolean"
88
88
  },
89
+ "scroll-lock-replacement": {
90
+ "type": "boolean"
91
+ },
89
92
  "design-system-closed-all-when-click-outside": {
90
93
  "type": "boolean",
91
94
  "referenceOnly": true