@atlaskit/flag 17.8.9 → 17.9.1

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 (17) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/auto-dismiss-flag.js +1 -1
  3. package/dist/cjs/flag-group.compiled.css +3 -0
  4. package/dist/cjs/flag-group.js +24 -1
  5. package/dist/cjs/flag.js +1 -1
  6. package/dist/cjs/theme.js +22 -23
  7. package/dist/es2019/auto-dismiss-flag.js +1 -1
  8. package/dist/es2019/flag-group.compiled.css +3 -0
  9. package/dist/es2019/flag-group.js +25 -2
  10. package/dist/es2019/flag.js +1 -1
  11. package/dist/es2019/theme.js +22 -23
  12. package/dist/esm/auto-dismiss-flag.js +1 -1
  13. package/dist/esm/flag-group.compiled.css +3 -0
  14. package/dist/esm/flag-group.js +25 -2
  15. package/dist/esm/flag.js +1 -1
  16. package/dist/esm/theme.js +22 -23
  17. package/package.json +9 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/flag
2
2
 
3
+ ## 17.9.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`7aef1e49e90ea`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7aef1e49e90ea) -
8
+ Removes redundant fallback color values via @atlaskit/theme
9
+ - Updated dependencies
10
+
11
+ ## 17.9.0
12
+
13
+ ### Minor Changes
14
+
15
+ - [`7118a6dc08262`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7118a6dc08262) -
16
+ [ux] Updated animations in Flag Group behind fg platform-dst-motion-uplift
17
+
3
18
  ## 17.8.9
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/auto-dismiss-flag.js CHANGED
@@ -14,7 +14,7 @@ var _flag = _interopRequireDefault(require("./flag"));
14
14
  var _flagGroup = require("./flag-group");
15
15
  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" != _typeof(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); }
16
16
  var packageName = "@atlaskit/flag";
17
- var packageVersion = "0.0.0-development";
17
+ var packageVersion = "17.9.1";
18
18
  var AUTO_DISMISS_SECONDS = exports.AUTO_DISMISS_SECONDS = 8;
19
19
 
20
20
  /**
package/dist/cjs/flag-group.compiled.css CHANGED
@@ -1,4 +1,5 @@
1
1
 
2
+ ._v56412q3{transition:var(--ds-flag-reposition,transform .3s cubic-bezier(.4,0,0,1))}
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: "_v56412q3 _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, 250ms cubic-bezier(0, 0.4, 0, 1) SlideIn50PercentLeft, 250ms cubic-bezier(0, 0.4, 0, 1) FadeIn)",
98
+ exitingAnimation: "var(--ds-flag-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOut15PercentLeft, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
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/cjs/flag.js CHANGED
@@ -41,7 +41,7 @@ var flagWrapperStyles = null;
41
41
  var analyticsAttributes = {
42
42
  componentName: 'flag',
43
43
  packageName: "@atlaskit/flag",
44
- packageVersion: "0.0.0-development"
44
+ packageVersion: "17.9.1"
45
45
  };
46
46
  var transitionStyles = null;
47
47
 
package/dist/cjs/theme.js CHANGED
@@ -10,7 +10,6 @@ var _statusError = _interopRequireDefault(require("@atlaskit/icon/core/status-er
10
10
  var _statusInformation = _interopRequireDefault(require("@atlaskit/icon/core/status-information"));
11
11
  var _statusSuccess = _interopRequireDefault(require("@atlaskit/icon/core/status-success"));
12
12
  var _statusWarning = _interopRequireDefault(require("@atlaskit/icon/core/status-warning"));
13
- var _colors = require("@atlaskit/theme/colors");
14
13
  var flagBackgroundColor = exports.flagBackgroundColor = {
15
14
  error: 'color.background.danger.bold',
16
15
  info: 'color.background.neutral.bold',
@@ -50,34 +49,34 @@ var flagTextColor = exports.flagTextColor = {
50
49
  warning: 'color.text.warning.inverse'
51
50
  };
52
51
  var flagTextColorToken = exports.flagTextColorToken = {
53
- error: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
54
- info: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
55
- normal: "var(--ds-text, ".concat(_colors.N800, ")"),
56
- success: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
57
- warning: "var(--ds-text-warning-inverse, ".concat(_colors.N700, ")")
52
+ error: "var(--ds-text-inverse, #FFFFFF)",
53
+ info: "var(--ds-text-inverse, #FFFFFF)",
54
+ normal: "var(--ds-text, #292A2E)",
55
+ success: "var(--ds-text-inverse, #FFFFFF)",
56
+ warning: "var(--ds-text-warning-inverse, #292A2E)"
58
57
  };
59
58
  // TODO: DSP-2519 Interaction tokens should be used for hovered and pressed states
60
59
  // https://product-fabric.atlassian.net/browse/DSP-2519
61
60
  var actionBackgroundColor = exports.actionBackgroundColor = {
62
61
  success: {
63
- default: "var(--ds-background-inverse-subtle, ".concat(_colors.N30A, ")"),
64
- active: "var(--ds-background-inverse-subtle-pressed, ".concat(_colors.N30A, ")"),
65
- pressed: "var(--ds-background-inverse-subtle-hovered, ".concat(_colors.N30A, ")")
62
+ default: "var(--ds-background-inverse-subtle, #00000029)",
63
+ active: "var(--ds-background-inverse-subtle-pressed, #00000052)",
64
+ pressed: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
66
65
  },
67
66
  info: {
68
- default: "var(--ds-background-inverse-subtle, ".concat(_colors.N30A, ")"),
69
- active: "var(--ds-background-inverse-subtle-pressed, ".concat(_colors.N30A, ")"),
70
- pressed: "var(--ds-background-inverse-subtle-hovered, ".concat(_colors.N30A, ")")
67
+ default: "var(--ds-background-inverse-subtle, #00000029)",
68
+ active: "var(--ds-background-inverse-subtle-pressed, #00000052)",
69
+ pressed: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
71
70
  },
72
71
  error: {
73
- default: "var(--ds-background-inverse-subtle, ".concat(_colors.N30A, ")"),
74
- active: "var(--ds-background-inverse-subtle-pressed, ".concat(_colors.N30A, ")"),
75
- pressed: "var(--ds-background-inverse-subtle-hovered, ".concat(_colors.N30A, ")")
72
+ default: "var(--ds-background-inverse-subtle, #00000029)",
73
+ active: "var(--ds-background-inverse-subtle-pressed, #00000052)",
74
+ pressed: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
76
75
  },
77
76
  warning: {
78
- default: "var(--ds-background-inverse-subtle, ".concat(_colors.N30A, ")"),
79
- active: "var(--ds-background-inverse-subtle-pressed, ".concat(_colors.N30A, ")"),
80
- pressed: "var(--ds-background-inverse-subtle-hovered, ".concat(_colors.N30A, ")")
77
+ default: "var(--ds-background-inverse-subtle, #00000029)",
78
+ active: "var(--ds-background-inverse-subtle-pressed, #00000052)",
79
+ pressed: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
81
80
  },
82
81
  normal: {
83
82
  default: 'none',
@@ -86,9 +85,9 @@ var actionBackgroundColor = exports.actionBackgroundColor = {
86
85
  }
87
86
  };
88
87
  var actionTextColor = exports.actionTextColor = {
89
- success: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
90
- info: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
91
- error: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
92
- warning: "var(--ds-text-warning-inverse, ".concat(_colors.N700, ")"),
93
- normal: "var(--ds-link, ".concat(_colors.B400, ")")
88
+ success: "var(--ds-text-inverse, #FFFFFF)",
89
+ info: "var(--ds-text-inverse, #FFFFFF)",
90
+ error: "var(--ds-text-inverse, #FFFFFF)",
91
+ warning: "var(--ds-text-warning-inverse, #292A2E)",
92
+ normal: "var(--ds-link, #1868DB)"
94
93
  };
package/dist/es2019/auto-dismiss-flag.js CHANGED
@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
5
5
  import Flag from './flag';
6
6
  import { useFlagGroup } from './flag-group';
7
7
  const packageName = "@atlaskit/flag";
8
- const packageVersion = "0.0.0-development";
8
+ const packageVersion = "17.9.1";
9
9
  export const AUTO_DISMISS_SECONDS = 8;
10
10
 
11
11
  /**
package/dist/es2019/flag-group.compiled.css CHANGED
@@ -1,4 +1,5 @@
1
1
 
2
+ ._v56412q3{transition:var(--ds-flag-reposition,transform .3s cubic-bezier(.4,0,0,1))}
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: "_v56412q3 _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, 250ms cubic-bezier(0, 0.4, 0, 1) SlideIn50PercentLeft, 250ms cubic-bezier(0, 0.4, 0, 1) FadeIn)",
83
+ exitingAnimation: "var(--ds-flag-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOut15PercentLeft, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
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/es2019/flag.js CHANGED
@@ -28,7 +28,7 @@ const flagWrapperStyles = null;
28
28
  const analyticsAttributes = {
29
29
  componentName: 'flag',
30
30
  packageName: "@atlaskit/flag",
31
- packageVersion: "0.0.0-development"
31
+ packageVersion: "17.9.1"
32
32
  };
33
33
  const transitionStyles = null;
34
34
 
package/dist/es2019/theme.js CHANGED
@@ -3,7 +3,6 @@ import ErrorIcon from '@atlaskit/icon/core/status-error';
3
3
  import InformationIcon from '@atlaskit/icon/core/status-information';
4
4
  import SuccessIcon from '@atlaskit/icon/core/status-success';
5
5
  import WarningIcon from '@atlaskit/icon/core/status-warning';
6
- import { B400, N0, N30A, N700, N800 } from '@atlaskit/theme/colors';
7
6
  export const flagBackgroundColor = {
8
7
  error: 'color.background.danger.bold',
9
8
  info: 'color.background.neutral.bold',
@@ -43,34 +42,34 @@ export const flagTextColor = {
43
42
  warning: 'color.text.warning.inverse'
44
43
  };
45
44
  export const flagTextColorToken = {
46
- error: `var(--ds-text-inverse, ${N0})`,
47
- info: `var(--ds-text-inverse, ${N0})`,
48
- normal: `var(--ds-text, ${N800})`,
49
- success: `var(--ds-text-inverse, ${N0})`,
50
- warning: `var(--ds-text-warning-inverse, ${N700})`
45
+ error: "var(--ds-text-inverse, #FFFFFF)",
46
+ info: "var(--ds-text-inverse, #FFFFFF)",
47
+ normal: "var(--ds-text, #292A2E)",
48
+ success: "var(--ds-text-inverse, #FFFFFF)",
49
+ warning: "var(--ds-text-warning-inverse, #292A2E)"
51
50
  };
52
51
  // TODO: DSP-2519 Interaction tokens should be used for hovered and pressed states
53
52
  // https://product-fabric.atlassian.net/browse/DSP-2519
54
53
  export const actionBackgroundColor = {
55
54
  success: {
56
- default: `var(--ds-background-inverse-subtle, ${N30A})`,
57
- active: `var(--ds-background-inverse-subtle-pressed, ${N30A})`,
58
- pressed: `var(--ds-background-inverse-subtle-hovered, ${N30A})`
55
+ default: "var(--ds-background-inverse-subtle, #00000029)",
56
+ active: "var(--ds-background-inverse-subtle-pressed, #00000052)",
57
+ pressed: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
59
58
  },
60
59
  info: {
61
- default: `var(--ds-background-inverse-subtle, ${N30A})`,
62
- active: `var(--ds-background-inverse-subtle-pressed, ${N30A})`,
63
- pressed: `var(--ds-background-inverse-subtle-hovered, ${N30A})`
60
+ default: "var(--ds-background-inverse-subtle, #00000029)",
61
+ active: "var(--ds-background-inverse-subtle-pressed, #00000052)",
62
+ pressed: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
64
63
  },
65
64
  error: {
66
- default: `var(--ds-background-inverse-subtle, ${N30A})`,
67
- active: `var(--ds-background-inverse-subtle-pressed, ${N30A})`,
68
- pressed: `var(--ds-background-inverse-subtle-hovered, ${N30A})`
65
+ default: "var(--ds-background-inverse-subtle, #00000029)",
66
+ active: "var(--ds-background-inverse-subtle-pressed, #00000052)",
67
+ pressed: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
69
68
  },
70
69
  warning: {
71
- default: `var(--ds-background-inverse-subtle, ${N30A})`,
72
- active: `var(--ds-background-inverse-subtle-pressed, ${N30A})`,
73
- pressed: `var(--ds-background-inverse-subtle-hovered, ${N30A})`
70
+ default: "var(--ds-background-inverse-subtle, #00000029)",
71
+ active: "var(--ds-background-inverse-subtle-pressed, #00000052)",
72
+ pressed: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
74
73
  },
75
74
  normal: {
76
75
  default: 'none',
@@ -79,9 +78,9 @@ export const actionBackgroundColor = {
79
78
  }
80
79
  };
81
80
  export const actionTextColor = {
82
- success: `var(--ds-text-inverse, ${N0})`,
83
- info: `var(--ds-text-inverse, ${N0})`,
84
- error: `var(--ds-text-inverse, ${N0})`,
85
- warning: `var(--ds-text-warning-inverse, ${N700})`,
86
- normal: `var(--ds-link, ${B400})`
81
+ success: "var(--ds-text-inverse, #FFFFFF)",
82
+ info: "var(--ds-text-inverse, #FFFFFF)",
83
+ error: "var(--ds-text-inverse, #FFFFFF)",
84
+ warning: "var(--ds-text-warning-inverse, #292A2E)",
85
+ normal: "var(--ds-link, #1868DB)"
87
86
  };
package/dist/esm/auto-dismiss-flag.js CHANGED
@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
5
5
  import Flag from './flag';
6
6
  import { useFlagGroup } from './flag-group';
7
7
  var packageName = "@atlaskit/flag";
8
- var packageVersion = "0.0.0-development";
8
+ var packageVersion = "17.9.1";
9
9
  export var AUTO_DISMISS_SECONDS = 8;
10
10
 
11
11
  /**
package/dist/esm/flag-group.compiled.css CHANGED
@@ -1,4 +1,5 @@
1
1
 
2
+ ._v56412q3{transition:var(--ds-flag-reposition,transform .3s cubic-bezier(.4,0,0,1))}
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: "_v56412q3 _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, 250ms cubic-bezier(0, 0.4, 0, 1) SlideIn50PercentLeft, 250ms cubic-bezier(0, 0.4, 0, 1) FadeIn)",
88
+ exitingAnimation: "var(--ds-flag-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOut15PercentLeft, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
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/dist/esm/flag.js CHANGED
@@ -32,7 +32,7 @@ var flagWrapperStyles = null;
32
32
  var analyticsAttributes = {
33
33
  componentName: 'flag',
34
34
  packageName: "@atlaskit/flag",
35
- packageVersion: "0.0.0-development"
35
+ packageVersion: "17.9.1"
36
36
  };
37
37
  var transitionStyles = null;
38
38
 
package/dist/esm/theme.js CHANGED
@@ -3,7 +3,6 @@ import ErrorIcon from '@atlaskit/icon/core/status-error';
3
3
  import InformationIcon from '@atlaskit/icon/core/status-information';
4
4
  import SuccessIcon from '@atlaskit/icon/core/status-success';
5
5
  import WarningIcon from '@atlaskit/icon/core/status-warning';
6
- import { B400, N0, N30A, N700, N800 } from '@atlaskit/theme/colors';
7
6
  export var flagBackgroundColor = {
8
7
  error: 'color.background.danger.bold',
9
8
  info: 'color.background.neutral.bold',
@@ -43,34 +42,34 @@ export var flagTextColor = {
43
42
  warning: 'color.text.warning.inverse'
44
43
  };
45
44
  export var flagTextColorToken = {
46
- error: "var(--ds-text-inverse, ".concat(N0, ")"),
47
- info: "var(--ds-text-inverse, ".concat(N0, ")"),
48
- normal: "var(--ds-text, ".concat(N800, ")"),
49
- success: "var(--ds-text-inverse, ".concat(N0, ")"),
50
- warning: "var(--ds-text-warning-inverse, ".concat(N700, ")")
45
+ error: "var(--ds-text-inverse, #FFFFFF)",
46
+ info: "var(--ds-text-inverse, #FFFFFF)",
47
+ normal: "var(--ds-text, #292A2E)",
48
+ success: "var(--ds-text-inverse, #FFFFFF)",
49
+ warning: "var(--ds-text-warning-inverse, #292A2E)"
51
50
  };
52
51
  // TODO: DSP-2519 Interaction tokens should be used for hovered and pressed states
53
52
  // https://product-fabric.atlassian.net/browse/DSP-2519
54
53
  export var actionBackgroundColor = {
55
54
  success: {
56
- default: "var(--ds-background-inverse-subtle, ".concat(N30A, ")"),
57
- active: "var(--ds-background-inverse-subtle-pressed, ".concat(N30A, ")"),
58
- pressed: "var(--ds-background-inverse-subtle-hovered, ".concat(N30A, ")")
55
+ default: "var(--ds-background-inverse-subtle, #00000029)",
56
+ active: "var(--ds-background-inverse-subtle-pressed, #00000052)",
57
+ pressed: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
59
58
  },
60
59
  info: {
61
- default: "var(--ds-background-inverse-subtle, ".concat(N30A, ")"),
62
- active: "var(--ds-background-inverse-subtle-pressed, ".concat(N30A, ")"),
63
- pressed: "var(--ds-background-inverse-subtle-hovered, ".concat(N30A, ")")
60
+ default: "var(--ds-background-inverse-subtle, #00000029)",
61
+ active: "var(--ds-background-inverse-subtle-pressed, #00000052)",
62
+ pressed: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
64
63
  },
65
64
  error: {
66
- default: "var(--ds-background-inverse-subtle, ".concat(N30A, ")"),
67
- active: "var(--ds-background-inverse-subtle-pressed, ".concat(N30A, ")"),
68
- pressed: "var(--ds-background-inverse-subtle-hovered, ".concat(N30A, ")")
65
+ default: "var(--ds-background-inverse-subtle, #00000029)",
66
+ active: "var(--ds-background-inverse-subtle-pressed, #00000052)",
67
+ pressed: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
69
68
  },
70
69
  warning: {
71
- default: "var(--ds-background-inverse-subtle, ".concat(N30A, ")"),
72
- active: "var(--ds-background-inverse-subtle-pressed, ".concat(N30A, ")"),
73
- pressed: "var(--ds-background-inverse-subtle-hovered, ".concat(N30A, ")")
70
+ default: "var(--ds-background-inverse-subtle, #00000029)",
71
+ active: "var(--ds-background-inverse-subtle-pressed, #00000052)",
72
+ pressed: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
74
73
  },
75
74
  normal: {
76
75
  default: 'none',
@@ -79,9 +78,9 @@ export var actionBackgroundColor = {
79
78
  }
80
79
  };
81
80
  export var actionTextColor = {
82
- success: "var(--ds-text-inverse, ".concat(N0, ")"),
83
- info: "var(--ds-text-inverse, ".concat(N0, ")"),
84
- error: "var(--ds-text-inverse, ".concat(N0, ")"),
85
- warning: "var(--ds-text-warning-inverse, ".concat(N700, ")"),
86
- normal: "var(--ds-link, ".concat(B400, ")")
81
+ success: "var(--ds-text-inverse, #FFFFFF)",
82
+ info: "var(--ds-text-inverse, #FFFFFF)",
83
+ error: "var(--ds-text-inverse, #FFFFFF)",
84
+ warning: "var(--ds-text-warning-inverse, #292A2E)",
85
+ normal: "var(--ds-link, #1868DB)"
87
86
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/flag",
3
- "version": "17.8.9",
3
+ "version": "17.9.1",
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",
41
- "@atlaskit/motion": "^5.4.0",
40
+ "@atlaskit/icon": "^33.1.0",
41
+ "@atlaskit/motion": "^5.5.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.4.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
  }