@atlaskit/flag 17.8.9 → 17.9.0

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 (8) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/flag-group.compiled.css +3 -0
  3. package/dist/cjs/flag-group.js +24 -1
  4. package/dist/es2019/flag-group.compiled.css +3 -0
  5. package/dist/es2019/flag-group.js +25 -2
  6. package/dist/esm/flag-group.compiled.css +3 -0
  7. package/dist/esm/flag-group.js +25 -2
  8. package/package.json +8 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/flag
2
2
 
3
+ ## 17.9.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`7118a6dc08262`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7118a6dc08262) -
8
+ [ux] Updated animations in Flag Group behind fg platform-dst-motion-uplift
9
+
3
10
  ## 17.8.9
4
11
 
5
12
  ### Patch Changes
package/dist/cjs/flag-group.compiled.css CHANGED
@@ -1,4 +1,5 @@
1
1
 
2
+ ._v56416ra{transition:var(--ds-flag-reposition,undefined)}
2
3
  ._v5641b8g{transition:transform .35s ease-in-out}
3
4
  ._v564glyw{transition:none}._12a7luct._12a7luct+*{transition-duration:175ms}
4
5
  ._1bsb1kdj{width:25pc}
@@ -10,7 +11,9 @@
10
11
  ._5sag5cps{animation-duration:0ms}
11
12
  ._kqsw1n9t{position:fixed}
12
13
  ._kqswstnw{position:absolute}
14
+ ._t9ec15wd{transform:translateY(200%) translateY(2pc)}
13
15
  ._t9ec1hw2{transform:translateX(0) translateY(100%) translateY(1pc)}
16
+ ._t9ec1pi4{transform:translateY(100%) translateY(1pc)}
14
17
  ._t9ec1ygq{transform:translate(0,0)}
15
18
  ._u7coidpf{inset-block-end:0}
16
19
  ._u7cooahv{inset-block-end:var(--ds-space-600,3pc)}
package/dist/cjs/flag-group.js CHANGED
@@ -13,9 +13,12 @@ var _react = _interopRequireWildcard(require("react"));
13
13
  var React = _react;
14
14
  var _runtime = require("@compiled/react/runtime");
15
15
  var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
16
+ var _css = require("@atlaskit/css");
16
17
  var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
17
18
  var _motion = require("@atlaskit/motion");
19
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
20
  var _portal = _interopRequireDefault(require("@atlaskit/portal"));
21
+ var _compiled = require("@atlaskit/primitives/compiled");
19
22
  var _constants = require("@atlaskit/theme/constants");
20
23
  var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
21
24
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -43,6 +46,16 @@ var groupStyles = {
43
46
  hidden: "_3um015vq"
44
47
  };
45
48
 
49
+ // transition: none is set on first-of-type to prevent a bug in Firefox
50
+ // that causes a broken transition
51
+ var groupStylesNew = {
52
+ root: "_v56416ra _kqswstnw _u7coidpf _1bsb1kdj _1eqkauwl",
53
+ first: "_t9ec1ygq _1pbyqfx8",
54
+ second: "_t9ec1pi4 _1pbyegat",
55
+ nth: "_t9ec15wd",
56
+ hidden: "_3um015vq"
57
+ };
58
+
46
59
  // Transform needed to push up while 1st flag is leaving
47
60
  // Exiting time should match the exiting time of motion so is halved
48
61
  var dismissAllowedStyles = null;
@@ -77,7 +90,17 @@ var FlagGroup = function FlagGroup(props) {
77
90
  var renderChildren = function renderChildren() {
78
91
  return children && (0, _typeof2.default)(children) === 'object' ? _react.Children.map(children, function (flag, index) {
79
92
  var isDismissAllowed = index === 0;
80
- return /*#__PURE__*/React.createElement(_motion.SlideIn, {
93
+ return (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(_compiled.Box, {
94
+ xcss: (0, _css.cx)(groupStylesNew.root, index === 0 && groupStylesNew.first, index === 1 && groupStylesNew.second, index >= 2 && groupStylesNew.nth, index >= 3 && groupStylesNew.hidden),
95
+ "data-vc-oob": true
96
+ }, /*#__PURE__*/React.createElement(_motion.Motion, {
97
+ enteringAnimation: "var(--ds-flag-enter, undefined)",
98
+ exitingAnimation: "var(--ds-flag-exit, undefined)"
99
+ }, /*#__PURE__*/React.createElement(FlagGroupContext.Provider, {
100
+ value:
101
+ // Only the first flag should be able to be dismissed.
102
+ isDismissAllowed ? dismissFlagContext : defaultFlagGroupContext
103
+ }, flag))) : /*#__PURE__*/React.createElement(_motion.SlideIn, {
81
104
  enterFrom: "left",
82
105
  fade: "inout",
83
106
  duration: "medium",
package/dist/es2019/flag-group.compiled.css CHANGED
@@ -1,4 +1,5 @@
1
1
 
2
+ ._v56416ra{transition:var(--ds-flag-reposition,undefined)}
2
3
  ._v5641b8g{transition:transform .35s ease-in-out}
3
4
  ._v564glyw{transition:none}._12a7luct._12a7luct+*{transition-duration:175ms}
4
5
  ._1bsb1kdj{width:25pc}
@@ -10,7 +11,9 @@
10
11
  ._5sag5cps{animation-duration:0ms}
11
12
  ._kqsw1n9t{position:fixed}
12
13
  ._kqswstnw{position:absolute}
14
+ ._t9ec15wd{transform:translateY(200%) translateY(2pc)}
13
15
  ._t9ec1hw2{transform:translateX(0) translateY(100%) translateY(1pc)}
16
+ ._t9ec1pi4{transform:translateY(100%) translateY(1pc)}
14
17
  ._t9ec1ygq{transform:translate(0,0)}
15
18
  ._u7coidpf{inset-block-end:0}
16
19
  ._u7cooahv{inset-block-end:var(--ds-space-600,3pc)}
package/dist/es2019/flag-group.js CHANGED
@@ -3,9 +3,12 @@ import "./flag-group.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import { Children, createContext, useContext, useMemo } from 'react';
6
+ import { cx } from '@atlaskit/css';
6
7
  import noop from '@atlaskit/ds-lib/noop';
7
- import { ExitingPersistence, SlideIn } from '@atlaskit/motion';
8
+ import { ExitingPersistence, SlideIn, Motion } from '@atlaskit/motion';
9
+ import { fg } from '@atlaskit/platform-feature-flags';
8
10
  import Portal from '@atlaskit/portal';
11
+ import { Box } from '@atlaskit/primitives/compiled';
9
12
  import { layers } from '@atlaskit/theme/constants';
10
13
  import VisuallyHidden from '@atlaskit/visually-hidden';
11
14
  export const flagWidth = 400;
@@ -32,6 +35,16 @@ const groupStyles = {
32
35
  hidden: "_3um015vq"
33
36
  };
34
37
 
38
+ // transition: none is set on first-of-type to prevent a bug in Firefox
39
+ // that causes a broken transition
40
+ const groupStylesNew = {
41
+ root: "_v56416ra _kqswstnw _u7coidpf _1bsb1kdj _1eqkauwl",
42
+ first: "_t9ec1ygq _1pbyqfx8",
43
+ second: "_t9ec1pi4 _1pbyegat",
44
+ nth: "_t9ec15wd",
45
+ hidden: "_3um015vq"
46
+ };
47
+
35
48
  // Transform needed to push up while 1st flag is leaving
36
49
  // Exiting time should match the exiting time of motion so is halved
37
50
  const dismissAllowedStyles = null;
@@ -62,7 +75,17 @@ const FlagGroup = props => {
62
75
  const renderChildren = () => {
63
76
  return children && typeof children === 'object' ? Children.map(children, (flag, index) => {
64
77
  const isDismissAllowed = index === 0;
65
- return /*#__PURE__*/React.createElement(SlideIn, {
78
+ return fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(Box, {
79
+ xcss: cx(groupStylesNew.root, index === 0 && groupStylesNew.first, index === 1 && groupStylesNew.second, index >= 2 && groupStylesNew.nth, index >= 3 && groupStylesNew.hidden),
80
+ "data-vc-oob": true
81
+ }, /*#__PURE__*/React.createElement(Motion, {
82
+ enteringAnimation: "var(--ds-flag-enter, undefined)",
83
+ exitingAnimation: "var(--ds-flag-exit, undefined)"
84
+ }, /*#__PURE__*/React.createElement(FlagGroupContext.Provider, {
85
+ value:
86
+ // Only the first flag should be able to be dismissed.
87
+ isDismissAllowed ? dismissFlagContext : defaultFlagGroupContext
88
+ }, flag))) : /*#__PURE__*/React.createElement(SlideIn, {
66
89
  enterFrom: "left",
67
90
  fade: "inout",
68
91
  duration: "medium",
package/dist/esm/flag-group.compiled.css CHANGED
@@ -1,4 +1,5 @@
1
1
 
2
+ ._v56416ra{transition:var(--ds-flag-reposition,undefined)}
2
3
  ._v5641b8g{transition:transform .35s ease-in-out}
3
4
  ._v564glyw{transition:none}._12a7luct._12a7luct+*{transition-duration:175ms}
4
5
  ._1bsb1kdj{width:25pc}
@@ -10,7 +11,9 @@
10
11
  ._5sag5cps{animation-duration:0ms}
11
12
  ._kqsw1n9t{position:fixed}
12
13
  ._kqswstnw{position:absolute}
14
+ ._t9ec15wd{transform:translateY(200%) translateY(2pc)}
13
15
  ._t9ec1hw2{transform:translateX(0) translateY(100%) translateY(1pc)}
16
+ ._t9ec1pi4{transform:translateY(100%) translateY(1pc)}
14
17
  ._t9ec1ygq{transform:translate(0,0)}
15
18
  ._u7coidpf{inset-block-end:0}
16
19
  ._u7cooahv{inset-block-end:var(--ds-space-600,3pc)}
package/dist/esm/flag-group.js CHANGED
@@ -4,9 +4,12 @@ import "./flag-group.compiled.css";
4
4
  import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import { Children, createContext, useContext, useMemo } from 'react';
7
+ import { cx } from '@atlaskit/css';
7
8
  import noop from '@atlaskit/ds-lib/noop';
8
- import { ExitingPersistence, SlideIn } from '@atlaskit/motion';
9
+ import { ExitingPersistence, SlideIn, Motion } from '@atlaskit/motion';
10
+ import { fg } from '@atlaskit/platform-feature-flags';
9
11
  import Portal from '@atlaskit/portal';
12
+ import { Box } from '@atlaskit/primitives/compiled';
10
13
  import { layers } from '@atlaskit/theme/constants';
11
14
  import VisuallyHidden from '@atlaskit/visually-hidden';
12
15
  export var flagWidth = 400;
@@ -33,6 +36,16 @@ var groupStyles = {
33
36
  hidden: "_3um015vq"
34
37
  };
35
38
 
39
+ // transition: none is set on first-of-type to prevent a bug in Firefox
40
+ // that causes a broken transition
41
+ var groupStylesNew = {
42
+ root: "_v56416ra _kqswstnw _u7coidpf _1bsb1kdj _1eqkauwl",
43
+ first: "_t9ec1ygq _1pbyqfx8",
44
+ second: "_t9ec1pi4 _1pbyegat",
45
+ nth: "_t9ec15wd",
46
+ hidden: "_3um015vq"
47
+ };
48
+
36
49
  // Transform needed to push up while 1st flag is leaving
37
50
  // Exiting time should match the exiting time of motion so is halved
38
51
  var dismissAllowedStyles = null;
@@ -67,7 +80,17 @@ var FlagGroup = function FlagGroup(props) {
67
80
  var renderChildren = function renderChildren() {
68
81
  return children && _typeof(children) === 'object' ? Children.map(children, function (flag, index) {
69
82
  var isDismissAllowed = index === 0;
70
- return /*#__PURE__*/React.createElement(SlideIn, {
83
+ return fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(Box, {
84
+ xcss: cx(groupStylesNew.root, index === 0 && groupStylesNew.first, index === 1 && groupStylesNew.second, index >= 2 && groupStylesNew.nth, index >= 3 && groupStylesNew.hidden),
85
+ "data-vc-oob": true
86
+ }, /*#__PURE__*/React.createElement(Motion, {
87
+ enteringAnimation: "var(--ds-flag-enter, undefined)",
88
+ exitingAnimation: "var(--ds-flag-exit, undefined)"
89
+ }, /*#__PURE__*/React.createElement(FlagGroupContext.Provider, {
90
+ value:
91
+ // Only the first flag should be able to be dismissed.
92
+ isDismissAllowed ? dismissFlagContext : defaultFlagGroupContext
93
+ }, flag))) : /*#__PURE__*/React.createElement(SlideIn, {
71
94
  enterFrom: "left",
72
95
  fade: "inout",
73
96
  duration: "medium",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/flag",
3
- "version": "17.8.9",
3
+ "version": "17.9.0",
4
4
  "description": "A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -32,18 +32,18 @@
32
32
  }
33
33
  },
34
34
  "dependencies": {
35
- "@atlaskit/analytics-next": "^11.1.0",
35
+ "@atlaskit/analytics-next": "^11.2.0",
36
36
  "@atlaskit/button": "^23.10.0",
37
37
  "@atlaskit/css": "^0.19.0",
38
38
  "@atlaskit/ds-lib": "^6.0.0",
39
39
  "@atlaskit/heading": "^5.3.0",
40
- "@atlaskit/icon": "^33.0.0",
40
+ "@atlaskit/icon": "^33.1.0",
41
41
  "@atlaskit/motion": "^5.4.0",
42
42
  "@atlaskit/platform-feature-flags": "^1.1.0",
43
43
  "@atlaskit/portal": "^5.2.0",
44
- "@atlaskit/primitives": "^18.0.0",
44
+ "@atlaskit/primitives": "^18.1.0",
45
45
  "@atlaskit/theme": "^22.0.0",
46
- "@atlaskit/tokens": "^11.1.0",
46
+ "@atlaskit/tokens": "^11.3.0",
47
47
  "@atlaskit/visually-hidden": "^3.0.0",
48
48
  "@babel/runtime": "^7.0.0",
49
49
  "@compiled/react": "^0.20.0"
@@ -99,6 +99,9 @@
99
99
  "platform-feature-flags": {
100
100
  "platform-dst-shape-theme-default": {
101
101
  "type": "boolean"
102
+ },
103
+ "platform-dst-motion-uplift": {
104
+ "type": "boolean"
102
105
  }
103
106
  }
104
107
  }