@atlaskit/flag 15.0.7 → 15.0.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/flag
 
+## 15.0.8
+
+### Patch Changes
+
+- [`842bb999a85`](https://bitbucket.org/atlassian/atlassian-frontend/commits/842bb999a85) - Internal change only. Replace usages of Inline/Stack with stable version from `@atlaskit/primitives`.
+
 ## 15.0.7
 
 ### Patch Changes

package/dist/cjs/auto-dismiss-flag.js

@@ -15,7 +15,7 @@ var _flagGroup = require("./flag-group");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var packageName = "@atlaskit/flag";
-var packageVersion = "15.0.7";
+var packageVersion = "15.0.8";
 var AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/cjs/flag-actions.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
-var _dsExplorations = require("@atlaskit/ds-explorations");
+var _inline = _interopRequireDefault(require("@atlaskit/primitives/inline"));
 var _constants = require("@atlaskit/theme/constants");
 var _constants2 = require("./constants");
 var _theme = require("./theme");
@@ -43,6 +43,11 @@ var appearanceNormalButtonStyles = (0, _react.css)({
     padding: '0 !important'
   }
 });
+var appearanceNormalActionsContainerStyles = (0, _react.css)({
+  '&&, a&&': {
+    transform: 'translateX(-2px)'
+  }
+});
 var FlagActions = function FlagActions(props) {
   var _props$appearance = props.appearance,
     appearance = _props$appearance === void 0 ? _constants2.DEFAULT_APPEARANCE : _props$appearance,
@@ -54,14 +59,13 @@ var FlagActions = function FlagActions(props) {
     return null;
   }
   var isBold = appearance !== _constants2.DEFAULT_APPEARANCE;
-  return (0, _react.jsx)(_dsExplorations.UNSAFE_Inline, {
-    gap: "space.100",
-    flexWrap: "wrap",
-    alignItems: "center",
-    divider: isBold ? null : '·',
-    UNSAFE_style: isBold ? undefined : {
-      transform: "translateX(-2px)"
-    },
+  return (0, _react.jsx)("span", {
+    css: !isBold && appearanceNormalActionsContainerStyles
+  }, (0, _react.jsx)(_inline.default, {
+    space: "100",
+    shouldWrap: true,
+    alignBlock: "center",
+    separator: isBold ? undefined : '·',
     testId: testId && "".concat(testId, "-actions")
   }, actions.map(function (action, index) {
     var _ref;
@@ -75,9 +79,9 @@ var FlagActions = function FlagActions(props) {
       testId: action.testId,
       key: index,
       style: (_ref = {}, (0, _defineProperty2.default)(_ref, _constants2.VAR_COLOR, _theme.actionTextColor[appearance]), (0, _defineProperty2.default)(_ref, _constants2.VAR_BG_COLOR, _theme.actionBackgroundColor[appearance].default), (0, _defineProperty2.default)(_ref, _constants2.VAR_BG_COLOR_HOVER, _theme.actionBackgroundColor[appearance].pressed), (0, _defineProperty2.default)(_ref, _constants2.VAR_BG_COLOR_ACTIVE, _theme.actionBackgroundColor[appearance].active), (0, _defineProperty2.default)(_ref, _constants2.VAR_FOCUS_COLOR, _theme.flagFocusRingColor[appearance]), _ref),
-      css: [buttonStyles, appearance === 'normal' && appearanceNormalButtonStyles]
+      css: [buttonStyles, appearance === _constants2.DEFAULT_APPEARANCE && appearanceNormalButtonStyles]
     }, action.content);
-  }));
+  })));
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/cjs/flag.js

@@ -11,6 +11,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _dsExplorations = require("@atlaskit/ds-explorations");
+var _inline = _interopRequireDefault(require("@atlaskit/primitives/inline"));
+var _stack = _interopRequireDefault(require("@atlaskit/primitives/stack"));
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
@@ -24,8 +26,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.0.7"
+  packageVersion: "15.0.8"
 };
+var transitionStyles = (0, _react2.css)({
+  flexGrow: 1,
+  transition: "gap 0.3s"
+});
 
 /**
  * __Flag__
@@ -125,24 +131,21 @@ var Flag = function Flag(props) {
     role: "alert",
     tabIndex: 0,
     testId: testId
-  }, autoDismissProps), (0, _react2.jsx)(_dsExplorations.UNSAFE_Inline, {
-    gap: "space.200"
+  }, autoDismissProps), (0, _react2.jsx)(_inline.default, {
+    space: "200"
   }, (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, {
     alignItems: "start",
     UNSAFE_style: {
       color: iconColor,
       flexShrink: 0
     }
-  }, icon), (0, _react2.jsx)(_dsExplorations.UNSAFE_Stack, {
-    gap: shouldRenderGap ? 'space.100' : 'space.0' // Gap exists even when not expanded due to Expander internals always being in the DOM
-    ,
-    UNSAFE_style: {
-      flexGrow: 1,
-      transition: "gap 0.3s"
-    }
-  }, (0, _react2.jsx)(_dsExplorations.UNSAFE_Inline, {
-    gap: "space.100",
-    justifyContent: "spaceBetween"
+  }, icon), (0, _react2.jsx)("span", {
+    css: transitionStyles
+  }, (0, _react2.jsx)(_stack.default, {
+    space: shouldRenderGap ? '100' : '0' // Gap exists even when not expanded due to Expander internals always being in the DOM
+  }, (0, _react2.jsx)(_inline.default, {
+    space: "100",
+    spread: "space-between"
   }, (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, {
     display: "block",
     UNSAFE_style: {
@@ -179,7 +182,7 @@ var Flag = function Flag(props) {
     appearance: appearance,
     linkComponent: linkComponent,
     testId: testId
-  }))))));
+  })))))));
 };
 var _default = Flag;
 exports.default = _default;

package/dist/cjs/internal/expander.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _dsExplorations = require("@atlaskit/ds-explorations");
+var _stack = _interopRequireDefault(require("@atlaskit/primitives/stack"));
 var _motion = require("@atlaskit/motion");
 var Expander = function Expander(_ref) {
   var children = _ref.children,
@@ -34,8 +35,8 @@ var Expander = function Expander(_ref) {
       UNSAFE_style: {
         width: '100%'
       }
-    }, props), /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Stack, {
-      gap: "space.100"
+    }, props), /*#__PURE__*/_react.default.createElement(_stack.default, {
+      space: "100"
     }, children));
   })));
 };

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "15.0.7",
+	"version": "15.0.8",
 	"sideEffects": false
 }

package/dist/es2019/auto-dismiss-flag.js

@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 const packageName = "@atlaskit/flag";
-const packageVersion = "15.0.7";
+const packageVersion = "15.0.8";
 export const AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/es2019/flag-actions.js

@@ -3,7 +3,7 @@
 
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
-import { UNSAFE_Inline as Inline } from '@atlaskit/ds-explorations';
+import Inline from '@atlaskit/primitives/inline';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { DEFAULT_APPEARANCE, VAR_COLOR, VAR_BG_COLOR, VAR_BG_COLOR_HOVER, VAR_BG_COLOR_ACTIVE, VAR_FOCUS_COLOR } from './constants';
 import { flagFocusRingColor, actionBackgroundColor, actionTextColor } from './theme';
@@ -35,6 +35,11 @@ const appearanceNormalButtonStyles = css({
     padding: '0 !important'
   }
 });
+const appearanceNormalActionsContainerStyles = css({
+  '&&, a&&': {
+    transform: 'translateX(-2px)'
+  }
+});
 const FlagActions = props => {
   const {
     appearance = DEFAULT_APPEARANCE,
@@ -46,14 +51,13 @@ const FlagActions = props => {
     return null;
   }
   const isBold = appearance !== DEFAULT_APPEARANCE;
-  return jsx(Inline, {
-    gap: "space.100",
-    flexWrap: "wrap",
-    alignItems: "center",
-    divider: isBold ? null : '·',
-    UNSAFE_style: isBold ? undefined : {
-      transform: `translateX(-2px)`
-    },
+  return jsx("span", {
+    css: !isBold && appearanceNormalActionsContainerStyles
+  }, jsx(Inline, {
+    space: "100",
+    shouldWrap: true,
+    alignBlock: "center",
+    separator: isBold ? undefined : '·',
     testId: testId && `${testId}-actions`
   }, actions.map((action, index) => jsx(Button, {
     onClick: action.onClick,
@@ -71,8 +75,8 @@ const FlagActions = props => {
       [VAR_BG_COLOR_ACTIVE]: actionBackgroundColor[appearance].active,
       [VAR_FOCUS_COLOR]: flagFocusRingColor[appearance]
     },
-    css: [buttonStyles, appearance === 'normal' && appearanceNormalButtonStyles]
-  }, action.content)));
+    css: [buttonStyles, appearance === DEFAULT_APPEARANCE && appearanceNormalButtonStyles]
+  }, action.content))));
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/es2019/flag.js

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { useCallback, useEffect, useState } from 'react';
-import { jsx } from '@emotion/react';
-import { UNSAFE_Box as Box, UNSAFE_Inline as Inline, UNSAFE_Stack as Stack, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
+import { jsx, css } from '@emotion/react';
+import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
+import Inline from '@atlaskit/primitives/inline';
+import Stack from '@atlaskit/primitives/stack';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import noop from '@atlaskit/ds-lib/noop';
 import FocusRing from '@atlaskit/focus-ring';
@@ -14,8 +16,12 @@ import { Expander, DismissButton } from './internal';
 const analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.0.7"
+  packageVersion: "15.0.8"
 };
+const transitionStyles = css({
+  flexGrow: 1,
+  transition: `gap 0.3s`
+});
 
 /**
  * __Flag__
@@ -112,23 +118,20 @@ const Flag = props => {
     tabIndex: 0,
     testId: testId
   }, autoDismissProps), jsx(Inline, {
-    gap: "space.200"
+    space: "200"
   }, jsx(Box, {
     alignItems: "start",
     UNSAFE_style: {
       color: iconColor,
       flexShrink: 0
     }
-  }, icon), jsx(Stack, {
-    gap: shouldRenderGap ? 'space.100' : 'space.0' // Gap exists even when not expanded due to Expander internals always being in the DOM
-    ,
-    UNSAFE_style: {
-      flexGrow: 1,
-      transition: `gap 0.3s`
-    }
+  }, icon), jsx("span", {
+    css: transitionStyles
+  }, jsx(Stack, {
+    space: shouldRenderGap ? '100' : '0' // Gap exists even when not expanded due to Expander internals always being in the DOM
   }, jsx(Inline, {
-    gap: "space.100",
-    justifyContent: "spaceBetween"
+    space: "100",
+    spread: "space-between"
   }, jsx(Box, {
     display: "block",
     UNSAFE_style: {
@@ -165,6 +168,6 @@ const Flag = props => {
     appearance: appearance,
     linkComponent: linkComponent,
     testId: testId
-  }))))));
+  })))))));
 };
 export default Flag;

package/dist/es2019/internal/expander.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { UNSAFE_Box as Box, UNSAFE_Stack as Stack } from '@atlaskit/ds-explorations';
+import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+import Stack from '@atlaskit/primitives/stack';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
 const Expander = ({
   children,
@@ -28,7 +29,7 @@ const Expander = ({
       width: '100%'
     }
   }, props), /*#__PURE__*/React.createElement(Stack, {
-    gap: "space.100"
+    space: "100"
   }, children)))));
 };
 

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "15.0.7",
+	"version": "15.0.8",
 	"sideEffects": false
 }

package/dist/esm/auto-dismiss-flag.js

@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 var packageName = "@atlaskit/flag";
-var packageVersion = "15.0.7";
+var packageVersion = "15.0.8";
 export var AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/esm/flag-actions.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
-import { UNSAFE_Inline as Inline } from '@atlaskit/ds-explorations';
+import Inline from '@atlaskit/primitives/inline';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { DEFAULT_APPEARANCE, VAR_COLOR, VAR_BG_COLOR, VAR_BG_COLOR_HOVER, VAR_BG_COLOR_ACTIVE, VAR_FOCUS_COLOR } from './constants';
 import { flagFocusRingColor, actionBackgroundColor, actionTextColor } from './theme';
@@ -36,6 +36,11 @@ var appearanceNormalButtonStyles = css({
     padding: '0 !important'
   }
 });
+var appearanceNormalActionsContainerStyles = css({
+  '&&, a&&': {
+    transform: 'translateX(-2px)'
+  }
+});
 var FlagActions = function FlagActions(props) {
   var _props$appearance = props.appearance,
     appearance = _props$appearance === void 0 ? DEFAULT_APPEARANCE : _props$appearance,
@@ -47,14 +52,13 @@ var FlagActions = function FlagActions(props) {
     return null;
   }
   var isBold = appearance !== DEFAULT_APPEARANCE;
-  return jsx(Inline, {
-    gap: "space.100",
-    flexWrap: "wrap",
-    alignItems: "center",
-    divider: isBold ? null : '·',
-    UNSAFE_style: isBold ? undefined : {
-      transform: "translateX(-2px)"
-    },
+  return jsx("span", {
+    css: !isBold && appearanceNormalActionsContainerStyles
+  }, jsx(Inline, {
+    space: "100",
+    shouldWrap: true,
+    alignBlock: "center",
+    separator: isBold ? undefined : '·',
     testId: testId && "".concat(testId, "-actions")
   }, actions.map(function (action, index) {
     var _ref;
@@ -68,9 +72,9 @@ var FlagActions = function FlagActions(props) {
       testId: action.testId,
       key: index,
       style: (_ref = {}, _defineProperty(_ref, VAR_COLOR, actionTextColor[appearance]), _defineProperty(_ref, VAR_BG_COLOR, actionBackgroundColor[appearance].default), _defineProperty(_ref, VAR_BG_COLOR_HOVER, actionBackgroundColor[appearance].pressed), _defineProperty(_ref, VAR_BG_COLOR_ACTIVE, actionBackgroundColor[appearance].active), _defineProperty(_ref, VAR_FOCUS_COLOR, flagFocusRingColor[appearance]), _ref),
-      css: [buttonStyles, appearance === 'normal' && appearanceNormalButtonStyles]
+      css: [buttonStyles, appearance === DEFAULT_APPEARANCE && appearanceNormalButtonStyles]
     }, action.content);
-  }));
+  })));
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/esm/flag.js

@@ -5,8 +5,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /** @jsx jsx */
 import { useCallback, useEffect, useState } from 'react';
-import { jsx } from '@emotion/react';
-import { UNSAFE_Box as Box, UNSAFE_Inline as Inline, UNSAFE_Stack as Stack, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
+import { jsx, css } from '@emotion/react';
+import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
+import Inline from '@atlaskit/primitives/inline';
+import Stack from '@atlaskit/primitives/stack';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import noop from '@atlaskit/ds-lib/noop';
 import FocusRing from '@atlaskit/focus-ring';
@@ -18,8 +20,12 @@ import { Expander, DismissButton } from './internal';
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.0.7"
+  packageVersion: "15.0.8"
 };
+var transitionStyles = css({
+  flexGrow: 1,
+  transition: "gap 0.3s"
+});
 
 /**
  * __Flag__
@@ -120,23 +126,20 @@ var Flag = function Flag(props) {
     tabIndex: 0,
     testId: testId
   }, autoDismissProps), jsx(Inline, {
-    gap: "space.200"
+    space: "200"
   }, jsx(Box, {
     alignItems: "start",
     UNSAFE_style: {
       color: iconColor,
       flexShrink: 0
     }
-  }, icon), jsx(Stack, {
-    gap: shouldRenderGap ? 'space.100' : 'space.0' // Gap exists even when not expanded due to Expander internals always being in the DOM
-    ,
-    UNSAFE_style: {
-      flexGrow: 1,
-      transition: "gap 0.3s"
-    }
+  }, icon), jsx("span", {
+    css: transitionStyles
+  }, jsx(Stack, {
+    space: shouldRenderGap ? '100' : '0' // Gap exists even when not expanded due to Expander internals always being in the DOM
   }, jsx(Inline, {
-    gap: "space.100",
-    justifyContent: "spaceBetween"
+    space: "100",
+    spread: "space-between"
   }, jsx(Box, {
     display: "block",
     UNSAFE_style: {
@@ -173,6 +176,6 @@ var Flag = function Flag(props) {
     appearance: appearance,
     linkComponent: linkComponent,
     testId: testId
-  }))))));
+  })))))));
 };
 export default Flag;

package/dist/esm/internal/expander.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { UNSAFE_Box as Box, UNSAFE_Stack as Stack } from '@atlaskit/ds-explorations';
+import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+import Stack from '@atlaskit/primitives/stack';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
 var Expander = function Expander(_ref) {
   var children = _ref.children,
@@ -28,7 +29,7 @@ var Expander = function Expander(_ref) {
         width: '100%'
       }
     }, props), /*#__PURE__*/React.createElement(Stack, {
-      gap: "space.100"
+      space: "100"
     }, children));
   })));
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "15.0.7",
+	"version": "15.0.8",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/flag",
-  "version": "15.0.7",
+  "version": "15.0.8",
   "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/"
@@ -15,7 +15,6 @@
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
-    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -43,6 +42,7 @@
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/motion": "^1.3.0",
     "@atlaskit/portal": "^4.0.0",
+    "@atlaskit/primitives": "^0.3.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^1.2.0",
     "@atlaskit/visually-hidden": "^1.1.0",