@atlaskit/flag 17.8.8 → 17.9.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/flag
 
+## 17.9.0
+
+### Minor Changes
+
+- [`7118a6dc08262`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7118a6dc08262) -
+  [ux] Updated animations in Flag Group behind fg platform-dst-motion-uplift
+
+## 17.8.9
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 17.8.8
 
 ### Patch Changes

package/dist/cjs/flag-group.compiled.css

@@ -1,4 +1,5 @@
 
+._v56416ra{transition:var(--ds-flag-reposition,undefined)}
 ._v5641b8g{transition:transform .35s ease-in-out}
 ._v564glyw{transition:none}._12a7luct._12a7luct+*{transition-duration:175ms}
 ._1bsb1kdj{width:25pc}
@@ -10,7 +11,9 @@
 ._5sag5cps{animation-duration:0ms}
 ._kqsw1n9t{position:fixed}
 ._kqswstnw{position:absolute}
+._t9ec15wd{transform:translateY(200%) translateY(2pc)}
 ._t9ec1hw2{transform:translateX(0) translateY(100%) translateY(1pc)}
+._t9ec1pi4{transform:translateY(100%) translateY(1pc)}
 ._t9ec1ygq{transform:translate(0,0)}
 ._u7coidpf{inset-block-end:0}
 ._u7cooahv{inset-block-end:var(--ds-space-600,3pc)}

package/dist/cjs/flag-group.js

@@ -13,9 +13,12 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _css = require("@atlaskit/css");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _motion = require("@atlaskit/motion");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
+var _compiled = require("@atlaskit/primitives/compiled");
 var _constants = require("@atlaskit/theme/constants");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 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 = {
   hidden: "_3um015vq"
 };
 
+// transition: none is set on first-of-type to prevent a bug in Firefox
+// that causes a broken transition
+var groupStylesNew = {
+  root: "_v56416ra _kqswstnw _u7coidpf _1bsb1kdj _1eqkauwl",
+  first: "_t9ec1ygq _1pbyqfx8",
+  second: "_t9ec1pi4 _1pbyegat",
+  nth: "_t9ec15wd",
+  hidden: "_3um015vq"
+};
+
 // Transform needed to push up while 1st flag is leaving
 // Exiting time should match the exiting time of motion so is halved
 var dismissAllowedStyles = null;
@@ -77,7 +90,17 @@ var FlagGroup = function FlagGroup(props) {
   var renderChildren = function renderChildren() {
     return children && (0, _typeof2.default)(children) === 'object' ? _react.Children.map(children, function (flag, index) {
       var isDismissAllowed = index === 0;
-      return /*#__PURE__*/React.createElement(_motion.SlideIn, {
+      return (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(_compiled.Box, {
+        xcss: (0, _css.cx)(groupStylesNew.root, index === 0 && groupStylesNew.first, index === 1 && groupStylesNew.second, index >= 2 && groupStylesNew.nth, index >= 3 && groupStylesNew.hidden),
+        "data-vc-oob": true
+      }, /*#__PURE__*/React.createElement(_motion.Motion, {
+        enteringAnimation: "var(--ds-flag-enter, undefined)",
+        exitingAnimation: "var(--ds-flag-exit, undefined)"
+      }, /*#__PURE__*/React.createElement(FlagGroupContext.Provider, {
+        value:
+        // Only the first flag should be able to be dismissed.
+        isDismissAllowed ? dismissFlagContext : defaultFlagGroupContext
+      }, flag))) : /*#__PURE__*/React.createElement(_motion.SlideIn, {
         enterFrom: "left",
         fade: "inout",
         duration: "medium",

package/dist/es2019/flag-group.compiled.css

@@ -1,4 +1,5 @@
 
+._v56416ra{transition:var(--ds-flag-reposition,undefined)}
 ._v5641b8g{transition:transform .35s ease-in-out}
 ._v564glyw{transition:none}._12a7luct._12a7luct+*{transition-duration:175ms}
 ._1bsb1kdj{width:25pc}
@@ -10,7 +11,9 @@
 ._5sag5cps{animation-duration:0ms}
 ._kqsw1n9t{position:fixed}
 ._kqswstnw{position:absolute}
+._t9ec15wd{transform:translateY(200%) translateY(2pc)}
 ._t9ec1hw2{transform:translateX(0) translateY(100%) translateY(1pc)}
+._t9ec1pi4{transform:translateY(100%) translateY(1pc)}
 ._t9ec1ygq{transform:translate(0,0)}
 ._u7coidpf{inset-block-end:0}
 ._u7cooahv{inset-block-end:var(--ds-space-600,3pc)}

package/dist/es2019/flag-group.js

@@ -3,9 +3,12 @@ import "./flag-group.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Children, createContext, useContext, useMemo } from 'react';
+import { cx } from '@atlaskit/css';
 import noop from '@atlaskit/ds-lib/noop';
-import { ExitingPersistence, SlideIn } from '@atlaskit/motion';
+import { ExitingPersistence, SlideIn, Motion } from '@atlaskit/motion';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
+import { Box } from '@atlaskit/primitives/compiled';
 import { layers } from '@atlaskit/theme/constants';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 export const flagWidth = 400;
@@ -32,6 +35,16 @@ const groupStyles = {
   hidden: "_3um015vq"
 };
 
+// transition: none is set on first-of-type to prevent a bug in Firefox
+// that causes a broken transition
+const groupStylesNew = {
+  root: "_v56416ra _kqswstnw _u7coidpf _1bsb1kdj _1eqkauwl",
+  first: "_t9ec1ygq _1pbyqfx8",
+  second: "_t9ec1pi4 _1pbyegat",
+  nth: "_t9ec15wd",
+  hidden: "_3um015vq"
+};
+
 // Transform needed to push up while 1st flag is leaving
 // Exiting time should match the exiting time of motion so is halved
 const dismissAllowedStyles = null;
@@ -62,7 +75,17 @@ const FlagGroup = props => {
   const renderChildren = () => {
     return children && typeof children === 'object' ? Children.map(children, (flag, index) => {
       const isDismissAllowed = index === 0;
-      return /*#__PURE__*/React.createElement(SlideIn, {
+      return fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(Box, {
+        xcss: cx(groupStylesNew.root, index === 0 && groupStylesNew.first, index === 1 && groupStylesNew.second, index >= 2 && groupStylesNew.nth, index >= 3 && groupStylesNew.hidden),
+        "data-vc-oob": true
+      }, /*#__PURE__*/React.createElement(Motion, {
+        enteringAnimation: "var(--ds-flag-enter, undefined)",
+        exitingAnimation: "var(--ds-flag-exit, undefined)"
+      }, /*#__PURE__*/React.createElement(FlagGroupContext.Provider, {
+        value:
+        // Only the first flag should be able to be dismissed.
+        isDismissAllowed ? dismissFlagContext : defaultFlagGroupContext
+      }, flag))) : /*#__PURE__*/React.createElement(SlideIn, {
         enterFrom: "left",
         fade: "inout",
         duration: "medium",

package/dist/esm/flag-group.compiled.css

@@ -1,4 +1,5 @@
 
+._v56416ra{transition:var(--ds-flag-reposition,undefined)}
 ._v5641b8g{transition:transform .35s ease-in-out}
 ._v564glyw{transition:none}._12a7luct._12a7luct+*{transition-duration:175ms}
 ._1bsb1kdj{width:25pc}
@@ -10,7 +11,9 @@
 ._5sag5cps{animation-duration:0ms}
 ._kqsw1n9t{position:fixed}
 ._kqswstnw{position:absolute}
+._t9ec15wd{transform:translateY(200%) translateY(2pc)}
 ._t9ec1hw2{transform:translateX(0) translateY(100%) translateY(1pc)}
+._t9ec1pi4{transform:translateY(100%) translateY(1pc)}
 ._t9ec1ygq{transform:translate(0,0)}
 ._u7coidpf{inset-block-end:0}
 ._u7cooahv{inset-block-end:var(--ds-space-600,3pc)}

package/dist/esm/flag-group.js

@@ -4,9 +4,12 @@ import "./flag-group.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Children, createContext, useContext, useMemo } from 'react';
+import { cx } from '@atlaskit/css';
 import noop from '@atlaskit/ds-lib/noop';
-import { ExitingPersistence, SlideIn } from '@atlaskit/motion';
+import { ExitingPersistence, SlideIn, Motion } from '@atlaskit/motion';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
+import { Box } from '@atlaskit/primitives/compiled';
 import { layers } from '@atlaskit/theme/constants';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 export var flagWidth = 400;
@@ -33,6 +36,16 @@ var groupStyles = {
   hidden: "_3um015vq"
 };
 
+// transition: none is set on first-of-type to prevent a bug in Firefox
+// that causes a broken transition
+var groupStylesNew = {
+  root: "_v56416ra _kqswstnw _u7coidpf _1bsb1kdj _1eqkauwl",
+  first: "_t9ec1ygq _1pbyqfx8",
+  second: "_t9ec1pi4 _1pbyegat",
+  nth: "_t9ec15wd",
+  hidden: "_3um015vq"
+};
+
 // Transform needed to push up while 1st flag is leaving
 // Exiting time should match the exiting time of motion so is halved
 var dismissAllowedStyles = null;
@@ -67,7 +80,17 @@ var FlagGroup = function FlagGroup(props) {
   var renderChildren = function renderChildren() {
     return children && _typeof(children) === 'object' ? Children.map(children, function (flag, index) {
       var isDismissAllowed = index === 0;
-      return /*#__PURE__*/React.createElement(SlideIn, {
+      return fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(Box, {
+        xcss: cx(groupStylesNew.root, index === 0 && groupStylesNew.first, index === 1 && groupStylesNew.second, index >= 2 && groupStylesNew.nth, index >= 3 && groupStylesNew.hidden),
+        "data-vc-oob": true
+      }, /*#__PURE__*/React.createElement(Motion, {
+        enteringAnimation: "var(--ds-flag-enter, undefined)",
+        exitingAnimation: "var(--ds-flag-exit, undefined)"
+      }, /*#__PURE__*/React.createElement(FlagGroupContext.Provider, {
+        value:
+        // Only the first flag should be able to be dismissed.
+        isDismissAllowed ? dismissFlagContext : defaultFlagGroupContext
+      }, flag))) : /*#__PURE__*/React.createElement(SlideIn, {
         enterFrom: "left",
         fade: "inout",
         duration: "medium",

package/flag.docs.tsx

@@ -0,0 +1,58 @@
+import path from 'path';
+
+import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
+
+const documentation: ComponentStructuredContentSource[] = [
+	{
+		name: 'Flag',
+		description: 'A component for displaying brief messages.',
+		status: 'general-availability',
+		import: {
+			name: 'Flag',
+			package: '@atlaskit/flag',
+			type: 'default',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use for confirmations and alerts needing minimal interaction',
+			'Position at bottom left; overlays content',
+			'Default: dismissible, event-driven (e.g. avatar update). Bold: not dismissible, severity (success/loading/warning/error), collapsed/expanded',
+			'Use Banner for critical/system messages; Inline message when action is required; Modal for immediate action',
+		],
+		contentGuidelines: [
+			'Be clear about what went wrong for errors',
+			'Provide specific steps to resolve issues',
+			'Use a helpful, non-threatening tone',
+			'Clearly state potential consequences for warnings',
+			'Confirm outcome then get out of the way for success messages',
+			'Information: inform, no action needed',
+			'Warning: before action, empathy, offer alternative',
+			'Error: explain what went wrong and next step; use "we" not "you"',
+			'Success: confirm outcome, then get out of the way; option to view details',
+			'Be clear and concise; use a helpful, non-threatening tone',
+		],
+		accessibilityGuidelines: [
+			'Keep copy concise for zoom and long words',
+			'Use h2 for title via `headingLevel` prop; maintain heading hierarchy',
+			'Do not stack dismissible and non-dismissible flags',
+			'Do not rely on color alone for severity',
+			'Avoid dead ends—always indicate how to proceed',
+			'Do not use auto-dismiss for critical messages',
+			'Use descriptive link text that describes the destination',
+			'Ensure flag content is announced by screen readers',
+			'Consider screen reader announcement conflicts',
+		],
+		examples: [
+			{
+				name: 'Flag',
+				description: 'Flag example',
+				source: path.resolve(__dirname, './examples/ai/flag.tsx'),
+			},
+		],
+		keywords: ['flag', 'message', 'notification', 'alert', 'toast'],
+		categories: ['feedback'],
+	},
+];
+
+export default documentation;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "17.8.8",
+	"version": "17.9.0",
 	"description": "A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,18 +32,18 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^11.1.0",
+		"@atlaskit/analytics-next": "^11.2.0",
 		"@atlaskit/button": "^23.10.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^6.0.0",
 		"@atlaskit/heading": "^5.3.0",
-		"@atlaskit/icon": "^32.0.0",
+		"@atlaskit/icon": "^33.1.0",
 		"@atlaskit/motion": "^5.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/portal": "^5.2.0",
-		"@atlaskit/primitives": "^18.0.0",
+		"@atlaskit/primitives": "^18.1.0",
 		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tokens": "^11.1.0",
+		"@atlaskit/tokens": "^11.3.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0"
@@ -55,13 +55,14 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/docs": "^11.6.0",
-		"@atlaskit/drawer": "^11.0.0",
+		"@atlaskit/docs": "^11.7.0",
+		"@atlaskit/drawer": "^12.0.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/radio": "^8.4.0",
 		"@atlaskit/section-message": "^8.12.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlassian/ssr-tests": "workspace:^",
+		"@atlassian/structured-docs-types": "workspace:^",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
 		"react-dom": "^18.2.0"
@@ -98,6 +99,9 @@
 	"platform-feature-flags": {
 		"platform-dst-shape-theme-default": {
 			"type": "boolean"
+		},
+		"platform-dst-motion-uplift": {
+			"type": "boolean"
 		}
 	}
 }