@atlaskit/share 3.0.13 → 3.1.2

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/share
 
+## 3.1.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 3.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 3.1.0
+
+### Minor Changes
+
+- [`c3963026311`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c3963026311) - [ux] Instrumented `@atlaskit/share` with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
 ## 3.0.13
 
 ### Patch Changes

package/dist/cjs/components/CopyLinkButton.js

@@ -41,6 +41,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
 var _i18n = require("../i18n");
@@ -183,7 +185,7 @@ var CopyLinkButton = /*#__PURE__*/function (_React$Component) {
         content: function content() {
           return /*#__PURE__*/_react.default.createElement(_styled.InlineDialogContentWrapper, null, /*#__PURE__*/_react.default.createElement(MessageContainer, null, /*#__PURE__*/_react.default.createElement(_checkCircle.default, {
             label: "",
-            primaryColor: _colors.G300
+            primaryColor: (0, _tokens.token)('color.icon.success', _colors.G300)
           }), /*#__PURE__*/_react.default.createElement(MessageSpan, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.copiedToClipboardMessage))));
         },
         isOpen: shouldShowCopiedMessage,

package/dist/cjs/components/IntegrationButton.js

@@ -19,12 +19,14 @@ var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _excluded = ["text", "textColor", "IntegrationIcon"];
 
 var _templateObject, _templateObject2;
 
 var IntegrationButtonCopyWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  display: flex;\n  justify-content: left;\n"])), function (props) {
-  return props.theme.textColor || _colors.N500;
+  return props.theme.textColor || (0, _tokens.token)('color.text', _colors.N500);
 });
 
 var IntegrationIconWrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 1px 8px 0 0;\n"])));

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

@@ -23,6 +23,6 @@ var CustomFooterWrapper = _styledComponents.default.div(_templateObject2 || (_te
 
 exports.CustomFooterWrapper = CustomFooterWrapper;
 
-var SpinnerWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  widht: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-content: center;\n"])));
+var SpinnerWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-content: center;\n"])));
 
 exports.SpinnerWrapper = SpinnerWrapper;

package/dist/cjs/components/ShareForm.js

@@ -47,6 +47,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
 var _i18n = require("../i18n");
@@ -200,7 +202,7 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
         position: "top"
       }, /*#__PURE__*/_react.default.createElement(_error.default, {
         label: formatMessage(_i18n.messages.shareFailureIconLabel),
-        primaryColor: _colors.R400
+        primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R400)
       }))), /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
         appearance: buttonAppearance,
         type: "submit",

package/dist/cjs/components/SplitButton.js

@@ -31,6 +31,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _i18n = require("../i18n");
 
 var _analytics = require("./analytics");
@@ -101,7 +103,7 @@ var SplitButtonDropdown = function SplitButtonDropdown(props) {
       key: integration.type,
       testId: "split-button-dropdownitem-".concat(integration.type)
     }, /*#__PURE__*/_react.default.createElement(DropDownIntegrationButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_IntegrationButton.default, {
-      textColor: _colors.N800,
+      textColor: (0, _tokens.token)('color.text', _colors.N800),
       appearance: "subtle",
       onClick: function onClick() {
         return onIntegrationButtonClick(integration);

package/dist/cjs/components/monochromeSlackIcon.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+// TODO : https://product-fabric.atlassian.net/browse/DSP-3518
 var SlackIcon = function SlackIcon() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     width: "100",

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/share",
-	"version": "3.0.13"
+	"version": "3.1.2"
 }

package/dist/es2019/components/CopyLinkButton.js

@@ -8,6 +8,7 @@ import LinkFilledIcon from '@atlaskit/icon/glyph/link-filled';
 import Popup from '@atlaskit/popup';
 import { G300 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 import { messages } from '../i18n';
 import { InlineDialogContentWrapper } from './ShareFormWrapper/styled';
@@ -126,7 +127,7 @@ export class CopyLinkButton extends React.Component {
       zIndex: Z_INDEX,
       content: () => /*#__PURE__*/React.createElement(InlineDialogContentWrapper, null, /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(CheckCircleIcon, {
         label: "",
-        primaryColor: G300
+        primaryColor: token('color.icon.success', G300)
       }), /*#__PURE__*/React.createElement(MessageSpan, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.copiedToClipboardMessage)))),
       isOpen: shouldShowCopiedMessage,
       onClose: this.handleDismissCopiedMessage,

package/dist/es2019/components/IntegrationButton.js

@@ -2,8 +2,9 @@ import React from 'react';
 import styled from 'styled-components';
 import Button from '@atlaskit/button/custom-theme-button';
 import { N500 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 const IntegrationButtonCopyWrapper = styled.span`
-  color: ${props => props.theme.textColor || N500};
+  color: ${props => props.theme.textColor || token('color.text', N500)};
   display: flex;
   justify-content: left;
 `;

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

@@ -8,7 +8,7 @@ export const CustomFooterWrapper = styled.div`
   margin: 0 ${-gridSize() * 3}px ${-gridSize() * 2}px ${-gridSize() * 3}px;
 `;
 export const SpinnerWrapper = styled.div`
-  widht: 100%;
+  width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;

package/dist/es2019/components/ShareForm.js

@@ -10,6 +10,7 @@ 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 { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 import { messages } from '../i18n';
 import { TabType } from '../types';
@@ -153,7 +154,7 @@ class InternalForm extends React.PureComponent {
         position: "top"
       }, /*#__PURE__*/React.createElement(ErrorIcon, {
         label: formatMessage(messages.shareFailureIconLabel),
-        primaryColor: R400
+        primaryColor: token('color.icon.danger', R400)
       }))), /*#__PURE__*/React.createElement(Button, {
         appearance: buttonAppearance,
         type: "submit",

package/dist/es2019/components/SplitButton.js

@@ -7,6 +7,7 @@ import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdow
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import { N800 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 import { messages } from '../i18n';
 import { shareIntegrationButtonEvent } from './analytics';
 import IntegrationButton from './IntegrationButton';
@@ -82,7 +83,7 @@ const SplitButtonDropdown = props => {
     key: integration.type,
     testId: `split-button-dropdownitem-${integration.type}`
   }, /*#__PURE__*/React.createElement(DropDownIntegrationButtonWrapper, null, /*#__PURE__*/React.createElement(IntegrationButton, {
-    textColor: N800,
+    textColor: token('color.text', N800),
     appearance: "subtle",
     onClick: () => onIntegrationButtonClick(integration),
     shouldFitContainer: true,

package/dist/es2019/components/monochromeSlackIcon.js

@@ -1,3 +1,5 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+// TODO : https://product-fabric.atlassian.net/browse/DSP-3518
 import React from 'react';
 
 const SlackIcon = () => {

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/share",
-	"version": "3.0.13"
+	"version": "3.1.2"
 }

package/dist/esm/components/CopyLinkButton.js

@@ -22,6 +22,7 @@ import LinkFilledIcon from '@atlaskit/icon/glyph/link-filled';
 import Popup from '@atlaskit/popup';
 import { G300 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 import { messages } from '../i18n';
 import { InlineDialogContentWrapper } from './ShareFormWrapper/styled';
@@ -151,7 +152,7 @@ export var CopyLinkButton = /*#__PURE__*/function (_React$Component) {
         content: function content() {
           return /*#__PURE__*/React.createElement(InlineDialogContentWrapper, null, /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(CheckCircleIcon, {
             label: "",
-            primaryColor: G300
+            primaryColor: token('color.icon.success', G300)
           }), /*#__PURE__*/React.createElement(MessageSpan, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.copiedToClipboardMessage))));
         },
         isOpen: shouldShowCopiedMessage,

package/dist/esm/components/IntegrationButton.js

@@ -8,8 +8,9 @@ import React from 'react';
 import styled from 'styled-components';
 import Button from '@atlaskit/button/custom-theme-button';
 import { N500 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 var IntegrationButtonCopyWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  display: flex;\n  justify-content: left;\n"])), function (props) {
-  return props.theme.textColor || N500;
+  return props.theme.textColor || token('color.text', N500);
 });
 var IntegrationIconWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 1px 8px 0 0;\n"])));
 

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

@@ -6,4 +6,4 @@ import styled from 'styled-components';
 import { gridSize } from '@atlaskit/theme/constants';
 export var BottomMessageWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n"])), gridSize() * 44);
 export var CustomFooterWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  /* Must match inline dialog padding. */\n  margin: 0 ", "px ", "px ", "px;\n"])), -gridSize() * 3, -gridSize() * 2, -gridSize() * 3);
-export var SpinnerWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  widht: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-content: center;\n"])));
+export var SpinnerWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-content: center;\n"])));

package/dist/esm/components/ShareForm.js

@@ -28,6 +28,7 @@ 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 { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 import { messages } from '../i18n';
 import { TabType } from '../types';
@@ -151,7 +152,7 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
         position: "top"
       }, /*#__PURE__*/React.createElement(ErrorIcon, {
         label: formatMessage(messages.shareFailureIconLabel),
-        primaryColor: R400
+        primaryColor: token('color.icon.danger', R400)
       }))), /*#__PURE__*/React.createElement(Button, {
         appearance: buttonAppearance,
         type: "submit",

package/dist/esm/components/SplitButton.js

@@ -13,6 +13,7 @@ import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdow
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import { N800 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 import { messages } from '../i18n';
 import { shareIntegrationButtonEvent } from './analytics';
 import IntegrationButton from './IntegrationButton';
@@ -71,7 +72,7 @@ var SplitButtonDropdown = function SplitButtonDropdown(props) {
       key: integration.type,
       testId: "split-button-dropdownitem-".concat(integration.type)
     }, /*#__PURE__*/React.createElement(DropDownIntegrationButtonWrapper, null, /*#__PURE__*/React.createElement(IntegrationButton, {
-      textColor: N800,
+      textColor: token('color.text', N800),
       appearance: "subtle",
       onClick: function onClick() {
         return onIntegrationButtonClick(integration);

package/dist/esm/components/monochromeSlackIcon.js

@@ -1,3 +1,5 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+// TODO : https://product-fabric.atlassian.net/browse/DSP-3518
 import React from 'react';
 
 var SlackIcon = function SlackIcon() {

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/share",
-	"version": "3.0.13"
+	"version": "3.1.2"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/share",
-  "version": "3.0.13",
+  "version": "3.1.2",
   "description": "Fabric Share Element",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/button": "^16.0.0",
+    "@atlaskit/button": "^16.2.0",
     "@atlaskit/dropdown-menu": "^11.1.0",
     "@atlaskit/form": "^8.5.0",
     "@atlaskit/icon": "^21.10.0",
@@ -42,8 +42,9 @@
     "@atlaskit/tabs": "^13.2.3",
     "@atlaskit/textarea": "^4.3.0",
     "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.8.0",
     "@atlaskit/tooltip": "^17.5.0",
-    "@atlaskit/user-picker": "^8.6.0",
+    "@atlaskit/user-picker": "^8.8.0",
     "@atlaskit/util-service-support": "^6.1.0",
     "@babel/runtime": "^7.0.0",
     "fast-deep-equal": "^3.1.1",
@@ -58,7 +59,7 @@
   },
   "devDependencies": {
     "@atlaskit/docs": "^9.0.0",
-    "@atlaskit/editor-test-helpers": "^16.1.0",
+    "@atlaskit/editor-test-helpers": "^17.0.0",
     "@atlaskit/flag": "^14.5.0",
     "@atlaskit/section-message": "^6.0.0",
     "@atlaskit/select": "^15.0.0",
@@ -100,7 +101,8 @@
     "@repo/internal": {
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
-      "deprecation": "no-deprecated-imports"
+      "deprecation": "no-deprecated-imports",
+      "theming": "tokens"
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"