@atlaskit/flag 15.0.9 → 15.0.10

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/flag
 
+## 15.0.10
+
+### Patch Changes
+
+- [`74c1b81a476`](https://bitbucket.org/atlassian/atlassian-frontend/commits/74c1b81a476) - Replaces use of `gridSize` with space tokens. There is no expected visual change.
+
 ## 15.0.9
 
 ### 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.9";
+var packageVersion = "15.0.10";
 var AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/cjs/flag-actions.js

@@ -9,32 +9,30 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("@emotion/react");
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 var _inline = _interopRequireDefault(require("@atlaskit/primitives/inline"));
-var _constants = require("@atlaskit/theme/constants");
-var _constants2 = require("./constants");
+var _constants = require("./constants");
 var _theme = require("./theme");
 /* eslint-disable @repo/internal/styles/no-nested-styles */
 /** @jsx jsx */
 
-var gridSize = (0, _constants.gridSize)();
 var buttonStyles = (0, _react.css)({
   '&&, a&&': {
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-    padding: "0 ".concat(gridSize, "px !important"),
-    background: "var(".concat(_constants2.VAR_BG_COLOR, ")"),
-    color: "var(".concat(_constants2.VAR_COLOR, ") !important"),
+    padding: "0 ".concat("var(--ds-space-100, 8px)", " !important"),
+    background: "var(".concat(_constants.VAR_BG_COLOR, ")"),
+    color: "var(".concat(_constants.VAR_COLOR, ") !important"),
     fontWeight: "var(--ds-font-weight-medium, 500)"
   },
   '&&:focus, a&&:focus': {
-    boxShadow: "0 0 0 2px var(".concat(_constants2.VAR_FOCUS_COLOR, ")")
+    boxShadow: "0 0 0 2px var(".concat(_constants.VAR_FOCUS_COLOR, ")")
   },
   '&&:hover, &&:active, a&&:hover, a&&:active': {
     textDecoration: 'underline'
   },
   '&&:hover': {
-    backgroundColor: "var(".concat(_constants2.VAR_BG_COLOR_HOVER, ")")
+    backgroundColor: "var(".concat(_constants.VAR_BG_COLOR_HOVER, ")")
   },
   '&&:active': {
-    backgroundColor: "var(".concat(_constants2.VAR_BG_COLOR_ACTIVE, ")")
+    backgroundColor: "var(".concat(_constants.VAR_BG_COLOR_ACTIVE, ")")
   }
 });
 var appearanceNormalButtonStyles = (0, _react.css)({
@@ -50,7 +48,7 @@ var appearanceNormalActionsContainerStyles = (0, _react.css)({
 });
 var FlagActions = function FlagActions(props) {
   var _props$appearance = props.appearance,
-    appearance = _props$appearance === void 0 ? _constants2.DEFAULT_APPEARANCE : _props$appearance,
+    appearance = _props$appearance === void 0 ? _constants.DEFAULT_APPEARANCE : _props$appearance,
     _props$actions = props.actions,
     actions = _props$actions === void 0 ? [] : _props$actions,
     linkComponent = props.linkComponent,
@@ -58,7 +56,7 @@ var FlagActions = function FlagActions(props) {
   if (!actions.length) {
     return null;
   }
-  var isBold = appearance !== _constants2.DEFAULT_APPEARANCE;
+  var isBold = appearance !== _constants.DEFAULT_APPEARANCE;
   return (0, _react.jsx)("span", {
     css: !isBold && appearanceNormalActionsContainerStyles
   }, (0, _react.jsx)(_inline.default, {
@@ -78,8 +76,8 @@ var FlagActions = function FlagActions(props) {
       spacing: "compact",
       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 === _constants2.DEFAULT_APPEARANCE && appearanceNormalButtonStyles]
+      style: (_ref = {}, (0, _defineProperty2.default)(_ref, _constants.VAR_COLOR, _theme.actionTextColor[appearance]), (0, _defineProperty2.default)(_ref, _constants.VAR_BG_COLOR, _theme.actionBackgroundColor[appearance].default), (0, _defineProperty2.default)(_ref, _constants.VAR_BG_COLOR_HOVER, _theme.actionBackgroundColor[appearance].pressed), (0, _defineProperty2.default)(_ref, _constants.VAR_BG_COLOR_ACTIVE, _theme.actionBackgroundColor[appearance].active), (0, _defineProperty2.default)(_ref, _constants.VAR_FOCUS_COLOR, _theme.flagFocusRingColor[appearance]), _ref),
+      css: [buttonStyles, appearance === _constants.DEFAULT_APPEARANCE && appearanceNormalButtonStyles]
     }, action.content);
   })));
 };

package/dist/cjs/flag-group.js

@@ -17,6 +17,8 @@ var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _constants = require("@atlaskit/theme/constants");
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
 var gridSize = (0, _constants.gridSize)();
 var flagWidth = gridSize * 50;
 exports.flagWidth = flagWidth;

package/dist/cjs/flag.js

@@ -26,7 +26,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.0.9"
+  packageVersion: "15.0.10"
 };
 var transitionStyles = (0, _react2.css)({
   flexGrow: 1,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "15.0.9",
+	"version": "15.0.10",
 	"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.9";
+const packageVersion = "15.0.10";
 export const AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/es2019/flag-actions.js

@@ -4,14 +4,12 @@
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 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';
-const gridSize = getGridSize();
 const buttonStyles = css({
   '&&, a&&': {
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-    padding: `0 ${gridSize}px !important`,
+    padding: `0 ${"var(--ds-space-100, 8px)"} !important`,
     background: `var(${VAR_BG_COLOR})`,
     color: `var(${VAR_COLOR}) !important`,
     fontWeight: "var(--ds-font-weight-medium, 500)"

package/dist/es2019/flag-group.js

@@ -6,6 +6,7 @@ import { easeIn, ExitingPersistence, SlideIn } from '@atlaskit/motion';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import noop from '@atlaskit/ds-lib/noop';
 import Portal from '@atlaskit/portal';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
 const gridSize = getGridSize();
 export const flagWidth = gridSize * 50;

package/dist/es2019/flag.js

@@ -16,7 +16,7 @@ import { Expander, DismissButton } from './internal';
 const analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.0.9"
+  packageVersion: "15.0.10"
 };
 const transitionStyles = css({
   flexGrow: 1,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "15.0.9",
+	"version": "15.0.10",
 	"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.9";
+var packageVersion = "15.0.10";
 export var AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/esm/flag-actions.js

@@ -5,14 +5,12 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 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';
-var gridSize = getGridSize();
 var buttonStyles = css({
   '&&, a&&': {
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-    padding: "0 ".concat(gridSize, "px !important"),
+    padding: "0 ".concat("var(--ds-space-100, 8px)", " !important"),
     background: "var(".concat(VAR_BG_COLOR, ")"),
     color: "var(".concat(VAR_COLOR, ") !important"),
     fontWeight: "var(--ds-font-weight-medium, 500)"

package/dist/esm/flag-group.js

@@ -7,6 +7,7 @@ import { easeIn, ExitingPersistence, SlideIn } from '@atlaskit/motion';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import noop from '@atlaskit/ds-lib/noop';
 import Portal from '@atlaskit/portal';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
 var gridSize = getGridSize();
 export var flagWidth = gridSize * 50;

package/dist/esm/flag.js

@@ -20,7 +20,7 @@ import { Expander, DismissButton } from './internal';
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.0.9"
+  packageVersion: "15.0.10"
 };
 var transitionStyles = css({
   flexGrow: 1,

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/flag",
-  "version": "15.0.9",
+  "version": "15.0.10",
   "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/"