@atlaskit/share 4.2.2 → 4.2.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/share
 
+## 4.2.3
+
+### Patch Changes
+
+- [`d6d8c718bd8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6d8c718bd8) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
+
 ## 4.2.2
 
 ### Patch Changes

package/dist/cjs/components/LazyShareForm/LazyShareForm.js

@@ -19,6 +19,8 @@ var _utils = require("../utils");
 /** @jsx jsx */
 /** @jsxFrag */
 
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
 /**
  * A Share form content which is lazy-loaded.
  * Make sure this component is not exported inside main entry points `src/index.ts`
@@ -64,7 +66,7 @@ function LazyShareForm(props) {
     }
   }, bottomMessage) : null, customFooter && selectedIntegration === null && (0, _react2.jsx)("div", {
     css: {
-      margin: "0 ".concat(-(0, _constants.gridSize)() * 3, "px ").concat(-(0, _constants.gridSize)() * 2, "px ").concat(-(0, _constants.gridSize)() * 3, "px")
+      margin: "0 calc(-1 * ".concat("var(--ds-space-300, 24px)", ") calc(-1 * ", "var(--ds-space-200, 16px)", ") calc(-1 * ", "var(--ds-space-300, 24px)", ")")
     }
   }, customFooter));
   _react.default.useEffect(function () {

package/dist/cjs/components/ShareForm.js

@@ -24,7 +24,6 @@ var _form = _interopRequireDefault(require("@atlaskit/form"));
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
 var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
 var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _i18n = require("../i18n");
 var _types = require("../types");
@@ -44,7 +43,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var submitButtonWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: auto;\n"])));
 var centerAlignedIconWrapperStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-self: center;\n  padding: 0 10px;\n\n  > div {\n    line-height: 1;\n  }\n"])));
-var formWrapperStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", "px;\n  width: 100%;\n\n  /* jira has a class override font settings on h1 in gh-custom-field-pickers.css */\n  #ghx-modes-tools #ghx-share & h1:first-child {\n    margin-top: 0;\n  }\n"])), (0, _constants.gridSize)());
+var formWrapperStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n  width: 100%;\n\n  /* jira has a class override font settings on h1 in gh-custom-field-pickers.css */\n  #ghx-modes-tools #ghx-share & h1:first-child {\n    margin-top: 0;\n  }\n"])), "var(--ds-space-100, 8px)");
 exports.formWrapperStyles = formWrapperStyles;
 var formFooterStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-start;\n"])));
 exports.formFooterStyles = formFooterStyles;

package/dist/cjs/components/ShareFormWrapper/styled.js

@@ -7,14 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.InlineDialogFormWrapper = exports.InlineDialogContentWrapper = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
-var _constants = require("@atlaskit/theme/constants");
 /** @jsx jsx */
 
 var InlineDialogFormWrapper = function InlineDialogFormWrapper(_ref) {
   var children = _ref.children;
   return (0, _react2.jsx)("div", {
     css: {
-      width: "".concat((0, _constants.gridSize)() * 44, "px")
+      width: "".concat(8 * 44, "px")
     }
   }, children);
 };
@@ -30,7 +29,7 @@ var InlineDialogContentWrapper = function InlineDialogContentWrapper(_ref2) {
   var children = _ref2.children;
   return (0, _react2.jsx)("div", {
     css: {
-      padding: "".concat((0, _constants.gridSize)() * 2, "px ").concat((0, _constants.gridSize)() * 3, "px")
+      padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-300, 24px)")
     }
   }, children);
 };

package/dist/cjs/components/ShareHeader.js

@@ -9,14 +9,13 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
-var _constants = require("@atlaskit/theme/constants");
 var _typography = require("@atlaskit/theme/typography");
 var _i18n = require("../i18n");
 var _templateObject, _templateObject2;
 /** @jsx jsx */
 var headerWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n"])));
 var getFormHeaderTitleStyles = function getFormHeaderTitleStyles(theme) {
-  return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  line-height: ", "px;\n  margin-right: ", "px;\n  margin-top: ", "px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  > span {\n    font-size: initial;\n  }\n"])), (0, _typography.h500)(theme), (0, _constants.gridSize)() * 4, (0, _constants.gridSize)() * 4, (0, _constants.gridSize)() * 4);
+  return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  line-height: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  > span {\n    font-size: initial;\n  }\n"])), (0, _typography.h500)(theme), "var(--ds-font-lineHeight-500, 32px)", "var(--ds-space-400, 32px)", "var(--ds-space-400, 32px)");
 };
 exports.getFormHeaderTitleStyles = getFormHeaderTitleStyles;
 var ShareHeader = function ShareHeader(_ref) {

package/dist/cjs/components/analytics/analytics.js

@@ -13,7 +13,7 @@ var buildAttributes = function buildAttributes() {
   var attributes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return _objectSpread({
     packageName: "@atlaskit/share",
-    packageVersion: "4.2.2"
+    packageVersion: "4.2.3"
   }, attributes);
 };
 var createEvent = function createEvent(eventType, source, action, actionSubject, actionSubjectId) {

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/share",
-	"version": "4.2.2"
+	"version": "4.2.3"
 }

package/dist/es2019/components/LazyShareForm/LazyShareForm.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
 import { messages } from '../../i18n';
 import { INTEGRATION_MODAL_SOURCE } from '../analytics/analytics';
@@ -61,7 +62,7 @@ function LazyShareForm(props) {
     }
   }, bottomMessage) : null, customFooter && selectedIntegration === null && jsx("div", {
     css: {
-      margin: `0 ${-gridSize() * 3}px ${-gridSize() * 2}px ${-gridSize() * 3}px`
+      margin: `0 calc(-1 * ${"var(--ds-space-300, 24px)"}) calc(-1 * ${"var(--ds-space-200, 16px)"}) calc(-1 * ${"var(--ds-space-300, 24px)"})`
     }
   }, customFooter));
   React.useEffect(() => {

package/dist/es2019/components/ShareForm.js

@@ -10,7 +10,6 @@ import Form from '@atlaskit/form';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
 import { R400 } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import { messages } from '../i18n';
 import { TabType } from '../types';
@@ -34,7 +33,7 @@ const centerAlignedIconWrapperStyles = css`
   }
 `;
 export const formWrapperStyles = css`
-  margin-top: ${gridSize()}px;
+  margin-top: ${"var(--ds-space-100, 8px)"};
   width: 100%;
 
   /* jira has a class override font settings on h1 in gh-custom-field-pickers.css */

package/dist/es2019/components/ShareFormWrapper/styled.js

@@ -2,12 +2,11 @@
 
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { gridSize } from '@atlaskit/theme/constants';
 export const InlineDialogFormWrapper = ({
   children
 }) => jsx("div", {
   css: {
-    width: `${gridSize() * 44}px`
+    width: `${8 * 44}px`
   }
 }, children);
 
@@ -21,6 +20,6 @@ export const InlineDialogContentWrapper = ({
   children
 }) => jsx("div", {
   css: {
-    padding: `${gridSize() * 2}px ${gridSize() * 3}px`
+    padding: `${"var(--ds-space-200, 16px)"} ${"var(--ds-space-300, 24px)"}`
   }
 }, children);

package/dist/es2019/components/ShareHeader.js

@@ -2,7 +2,6 @@
 import React from 'react';
 import { css, jsx, useTheme } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
-import { gridSize } from '@atlaskit/theme/constants';
 import { h500 } from '@atlaskit/theme/typography';
 import { messages } from '../i18n';
 const headerWrapperStyles = css`
@@ -11,9 +10,9 @@ const headerWrapperStyles = css`
 `;
 export const getFormHeaderTitleStyles = theme => css`
   ${h500(theme)}
-  line-height: ${gridSize() * 4}px;
-  margin-right: ${gridSize() * 4}px;
-  margin-top: ${gridSize() * 4}px;
+  line-height: ${"var(--ds-font-lineHeight-500, 32px)"};
+  margin-right: ${"var(--ds-space-400, 32px)"};
+  margin-top: ${"var(--ds-space-400, 32px)"};
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/dist/es2019/components/analytics/analytics.js

@@ -1,7 +1,7 @@
 import { isEmail, isTeam, isUser } from '@atlaskit/smart-user-picker';
 const buildAttributes = (attributes = {}) => ({
   packageName: "@atlaskit/share",
-  packageVersion: "4.2.2",
+  packageVersion: "4.2.3",
   ...attributes
 });
 const createEvent = (eventType, source, action, actionSubject, actionSubjectId, attributes = {}) => ({

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/share",
-	"version": "4.2.2"
+	"version": "4.2.3"
 }

package/dist/esm/components/LazyShareForm/LazyShareForm.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
 import { messages } from '../../i18n';
 import { INTEGRATION_MODAL_SOURCE } from '../analytics/analytics';
@@ -56,7 +57,7 @@ function LazyShareForm(props) {
     }
   }, bottomMessage) : null, customFooter && selectedIntegration === null && jsx("div", {
     css: {
-      margin: "0 ".concat(-gridSize() * 3, "px ").concat(-gridSize() * 2, "px ").concat(-gridSize() * 3, "px")
+      margin: "0 calc(-1 * ".concat("var(--ds-space-300, 24px)", ") calc(-1 * ", "var(--ds-space-200, 16px)", ") calc(-1 * ", "var(--ds-space-300, 24px)", ")")
     }
   }, customFooter));
   React.useEffect(function () {

package/dist/esm/components/ShareForm.js

@@ -22,7 +22,6 @@ import Form from '@atlaskit/form';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
 import { R400 } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import { messages } from '../i18n';
 import { TabType } from '../types';
@@ -34,7 +33,7 @@ import { ShareHeader } from './ShareHeader';
 import { UserPickerField } from './UserPickerField';
 var submitButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: auto;\n"])));
 var centerAlignedIconWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-self: center;\n  padding: 0 10px;\n\n  > div {\n    line-height: 1;\n  }\n"])));
-export var formWrapperStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-top: ", "px;\n  width: 100%;\n\n  /* jira has a class override font settings on h1 in gh-custom-field-pickers.css */\n  #ghx-modes-tools #ghx-share & h1:first-child {\n    margin-top: 0;\n  }\n"])), gridSize());
+export var formWrapperStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  width: 100%;\n\n  /* jira has a class override font settings on h1 in gh-custom-field-pickers.css */\n  #ghx-modes-tools #ghx-share & h1:first-child {\n    margin-top: 0;\n  }\n"])), "var(--ds-space-100, 8px)");
 export var formFooterStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-start;\n"])));
 var formFieldStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-bottom: 12px;\n"])));
 var integrationWrapperStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));

package/dist/esm/components/ShareFormWrapper/styled.js

@@ -2,12 +2,11 @@
 
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { gridSize } from '@atlaskit/theme/constants';
 export var InlineDialogFormWrapper = function InlineDialogFormWrapper(_ref) {
   var children = _ref.children;
   return jsx("div", {
     css: {
-      width: "".concat(gridSize() * 44, "px")
+      width: "".concat(8 * 44, "px")
     }
   }, children);
 };
@@ -22,7 +21,7 @@ export var InlineDialogContentWrapper = function InlineDialogContentWrapper(_ref
   var children = _ref2.children;
   return jsx("div", {
     css: {
-      padding: "".concat(gridSize() * 2, "px ").concat(gridSize() * 3, "px")
+      padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-300, 24px)")
     }
   }, children);
 };

package/dist/esm/components/ShareHeader.js

@@ -4,12 +4,11 @@ var _templateObject, _templateObject2;
 import React from 'react';
 import { css, jsx, useTheme } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
-import { gridSize } from '@atlaskit/theme/constants';
 import { h500 } from '@atlaskit/theme/typography';
 import { messages } from '../i18n';
 var headerWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
 export var getFormHeaderTitleStyles = function getFormHeaderTitleStyles(theme) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  line-height: ", "px;\n  margin-right: ", "px;\n  margin-top: ", "px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  > span {\n    font-size: initial;\n  }\n"])), h500(theme), gridSize() * 4, gridSize() * 4, gridSize() * 4);
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  line-height: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  > span {\n    font-size: initial;\n  }\n"])), h500(theme), "var(--ds-font-lineHeight-500, 32px)", "var(--ds-space-400, 32px)", "var(--ds-space-400, 32px)");
 };
 export var ShareHeader = function ShareHeader(_ref) {
   var title = _ref.title;

package/dist/esm/components/analytics/analytics.js

@@ -6,7 +6,7 @@ var buildAttributes = function buildAttributes() {
   var attributes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return _objectSpread({
     packageName: "@atlaskit/share",
-    packageVersion: "4.2.2"
+    packageVersion: "4.2.3"
   }, attributes);
 };
 var createEvent = function createEvent(eventType, source, action, actionSubject, actionSubjectId) {

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/share",
-	"version": "4.2.2"
+	"version": "4.2.3"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/share",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "description": "Fabric Share Element",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
     "@atlaskit/smart-user-picker": "^6.1.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/tabs": "^13.4.0",
-    "@atlaskit/textarea": "^4.6.0",
+    "@atlaskit/textarea": "^4.7.0",
     "@atlaskit/theme": "^12.5.0",
     "@atlaskit/tokens": "^1.4.0",
     "@atlaskit/tooltip": "^17.8.0",
@@ -69,10 +69,10 @@
   },
   "devDependencies": {
     "@atlaskit/docs": "^9.1.0",
-    "@atlaskit/editor-test-helpers": "^18.3.0",
+    "@atlaskit/editor-test-helpers": "^18.5.0",
     "@atlaskit/flag": "^15.2.0",
     "@atlaskit/section-message": "^6.4.0",
-    "@atlaskit/select": "^16.2.0",
+    "@atlaskit/select": "^16.4.0",
     "@atlaskit/toggle": "^12.6.0",
     "@atlaskit/util-data-test": "^17.8.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",