@atlaskit/editor-core 185.11.0 → 185.12.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-core
 
+## 185.12.0
+
+### Minor Changes
+
+- [`ad94cd465e4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ad94cd465e4) - ED-18748: [ux] Adding chevron to floating toolbar cell background
+
+## 185.11.3
+
+### Patch Changes
+
+- [`f486dbd535c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f486dbd535c) - MEX-2481 Fix minor gap between image and border
+- Updated dependencies
+
 ## 185.11.0
 
 ### Minor Changes

package/dist/cjs/plugins/media/nodeviews/mediaNodeView/media.js

@@ -18,6 +18,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _utils = require("@atlaskit/editor-common/utils");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
+var _ui = require("@atlaskit/editor-common/ui");
 var _mediaCard = require("@atlaskit/media-card");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _react = _interopRequireWildcard(require("react"));
@@ -221,6 +222,7 @@ var MediaNode = /*#__PURE__*/function (_Component) {
           border: !!borderMark
         })
       }, /*#__PURE__*/_react.default.createElement(_mediaCard.Card, {
+        expandByPixel: borderMark && _ui.IMAGE_AND_BORDER_ADJUSTMENT,
         mediaClientConfig: mediaClientConfig,
         resizeMode: "stretchy-fit",
         dimensions: maxDimensions,

package/dist/cjs/plugins/media/nodeviews/styles.js

@@ -8,6 +8,7 @@ exports.figureWrapper = exports.MediaSingleNodeSelector = exports.MediaInlineNod
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
+var _ui = require("@atlaskit/editor-common/ui");
 var _templateObject, _templateObject2, _templateObject3;
 /** @jsx jsx */
 var MediaInlineNodeSelector = 'media-inline-node';
@@ -32,7 +33,9 @@ var MediaCardWrapper = function MediaCardWrapper(_ref) {
       borderColor: "var(--custom-palette-color)",
       borderWidth: "".concat(calculatedBorderWidth, "px"),
       borderStyle: 'solid',
-      borderRadius: "".concat(calculatedBorderWidth * 2, "px")
+      borderRadius: "".concat(calculatedBorderWidth * 2, "px"),
+      width: calculatedBorderWidth > 0 ? "calc(100% - ".concat(_ui.IMAGE_AND_BORDER_ADJUSTMENT, "px)") : undefined,
+      height: calculatedBorderWidth > 0 ? "calc(100% - ".concat(_ui.IMAGE_AND_BORDER_ADJUSTMENT, "px)") : undefined
     }
   }, (0, _react2.jsx)("div", {
     css: forcedDimensions,

package/dist/cjs/ui/ColorPickerButton/index.js

@@ -22,16 +22,18 @@ var _common = require("../ColorPalette/Palettes/common");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _consts = require("../../plugins/analytics/consts");
 var _types = require("../../plugins/analytics/types");
-var _templateObject, _templateObject2, _templateObject3;
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 // helps adjusts position of popup
 var colorPickerButtonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
+var colorPickerExpandContainer = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0px -4px;\n"])));
 
 // Control the size of color picker buttons and preview
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4134
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var colorPickerWrapper = function colorPickerWrapper(theme) {
-  return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: 8px 0px;\n"])), (0, _constants.borderRadius)(), (0, _components.themed)({
+  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: 8px 0px;\n"])), (0, _constants.borderRadius)(), (0, _components.themed)({
     light: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
     dark: "var(--ds-surface-overlay, ".concat(_colors.DN50, ")")
   })(theme), _colors.N60A, _colors.N60A);
@@ -166,7 +168,7 @@ var ColorPickerButton = function ColorPickerButton(props) {
   };
   var title = props.title || '';
   var currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
-  var buttonStyle = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 6px;\n    background-color: ", ";\n    ", "\n    &:before {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      align-self: center;\n      content: '';\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      padding: 0;\n    }\n  "])), "var(--ds-background-neutral, transparent)", /* If custom props size height, override the button base height property */
+  var buttonStyle = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 0 10px;\n    background-color: ", ";\n    ", "\n    &:before {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      align-self: center;\n      content: '';\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      padding: 0;\n      margin: 0px 2px;\n    }\n  "])), "var(--ds-background-neutral, transparent)", /* If custom props size height, override the button base height property */
   !!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && "height: inherit;", _common.DEFAULT_BORDER_COLOR, (0, _constants.borderRadius)(), currentColor || 'transparent', ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px', ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px');
   return (0, _react2.jsx)("div", {
     css: colorPickerButtonWrapper
@@ -185,7 +187,12 @@ var ColorPickerButton = function ColorPickerButton(props) {
         setIsOpenedByKeyboard(true);
       }
     },
-    css: buttonStyle
+    css: buttonStyle,
+    iconAfter: (0, _react2.jsx)("span", {
+      css: colorPickerExpandContainer
+    }, (0, _react2.jsx)(_chevronDown.default, {
+      label: ""
+    }))
   })), renderPopup());
 };
 var _default = (0, _analyticsNext.withAnalyticsContext)({

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "185.11.0";
+var version = "185.12.0";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "185.11.0",
+	"version": "185.12.0",
 	"sideEffects": false
 }

package/dist/es2019/plugins/media/nodeviews/mediaNodeView/media.js

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { withImageLoader } from '@atlaskit/editor-common/utils';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
+import { IMAGE_AND_BORDER_ADJUSTMENT } from '@atlaskit/editor-common/ui';
 import { Card, CardLoading } from '@atlaskit/media-card';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import React, { Component } from 'react';
@@ -160,6 +161,7 @@ export class MediaNode extends Component {
         }
       }
     }, /*#__PURE__*/React.createElement(Card, {
+      expandByPixel: borderMark && IMAGE_AND_BORDER_ADJUSTMENT,
       mediaClientConfig: mediaClientConfig,
       resizeMode: "stretchy-fit",
       dimensions: maxDimensions,

package/dist/es2019/plugins/media/nodeviews/styles.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
+import { IMAGE_AND_BORDER_ADJUSTMENT } from '@atlaskit/editor-common/ui';
 export const MediaInlineNodeSelector = 'media-inline-node';
 export const MediaSingleNodeSelector = 'media-single-node';
 export const figureWrapper = css`
@@ -29,7 +30,9 @@ export const MediaCardWrapper = ({
       borderColor: `var(--custom-palette-color)`,
       borderWidth: `${calculatedBorderWidth}px`,
       borderStyle: 'solid',
-      borderRadius: `${calculatedBorderWidth * 2}px`
+      borderRadius: `${calculatedBorderWidth * 2}px`,
+      width: calculatedBorderWidth > 0 ? `calc(100% - ${IMAGE_AND_BORDER_ADJUSTMENT}px)` : undefined,
+      height: calculatedBorderWidth > 0 ? `calc(100% - ${IMAGE_AND_BORDER_ADJUSTMENT}px)` : undefined
     }
   }, jsx("div", {
     css: forcedDimensions,

package/dist/es2019/ui/ColorPickerButton/index.js

@@ -14,10 +14,15 @@ import { DEFAULT_BORDER_COLOR } from '../ColorPalette/Palettes/common';
 import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { editorAnalyticsChannel } from '../../plugins/analytics/consts';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../plugins/analytics/types';
+import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+
 // helps adjusts position of popup
 const colorPickerButtonWrapper = css`
   position: relative;
 `;
+const colorPickerExpandContainer = css`
+  margin: 0px -4px;
+`;
 
 // Control the size of color picker buttons and preview
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4134
@@ -152,7 +157,7 @@ const ColorPickerButton = props => {
   const title = props.title || '';
   const currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
   const buttonStyle = css`
-    padding: 6px;
+    padding: 0 10px;
     background-color: ${"var(--ds-background-neutral, transparent)"};
     ${
   /* If custom props size height, override the button base height property */!!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && `height: inherit;`}
@@ -168,6 +173,7 @@ const ColorPickerButton = props => {
       width: ${((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px'};
       height: ${((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px'};
       padding: 0;
+      margin: 0px 2px;
     }
   `;
   return jsx("div", {
@@ -187,7 +193,12 @@ const ColorPickerButton = props => {
         setIsOpenedByKeyboard(true);
       }
     },
-    css: buttonStyle
+    css: buttonStyle,
+    iconAfter: jsx("span", {
+      css: colorPickerExpandContainer
+    }, jsx(ExpandIcon, {
+      label: ""
+    }))
   })), renderPopup());
 };
 export default withAnalyticsContext({

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "185.11.0";
+export const version = "185.12.0";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "185.11.0",
+	"version": "185.12.0",
 	"sideEffects": false
 }

package/dist/esm/plugins/media/nodeviews/mediaNodeView/media.js

@@ -12,6 +12,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { withImageLoader } from '@atlaskit/editor-common/utils';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
+import { IMAGE_AND_BORDER_ADJUSTMENT } from '@atlaskit/editor-common/ui';
 import { Card, CardLoading } from '@atlaskit/media-card';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import React, { Component } from 'react';
@@ -209,6 +210,7 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
           border: !!borderMark
         })
       }, /*#__PURE__*/React.createElement(Card, {
+        expandByPixel: borderMark && IMAGE_AND_BORDER_ADJUSTMENT,
         mediaClientConfig: mediaClientConfig,
         resizeMode: "stretchy-fit",
         dimensions: maxDimensions,

package/dist/esm/plugins/media/nodeviews/styles.js

@@ -3,6 +3,7 @@ var _templateObject, _templateObject2, _templateObject3;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
+import { IMAGE_AND_BORDER_ADJUSTMENT } from '@atlaskit/editor-common/ui';
 export var MediaInlineNodeSelector = 'media-inline-node';
 export var MediaSingleNodeSelector = 'media-single-node';
 export var figureWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0;\n"])));
@@ -22,7 +23,9 @@ export var MediaCardWrapper = function MediaCardWrapper(_ref) {
       borderColor: "var(--custom-palette-color)",
       borderWidth: "".concat(calculatedBorderWidth, "px"),
       borderStyle: 'solid',
-      borderRadius: "".concat(calculatedBorderWidth * 2, "px")
+      borderRadius: "".concat(calculatedBorderWidth * 2, "px"),
+      width: calculatedBorderWidth > 0 ? "calc(100% - ".concat(IMAGE_AND_BORDER_ADJUSTMENT, "px)") : undefined,
+      height: calculatedBorderWidth > 0 ? "calc(100% - ".concat(IMAGE_AND_BORDER_ADJUSTMENT, "px)") : undefined
     }
   }, jsx("div", {
     css: forcedDimensions,

package/dist/esm/ui/ColorPickerButton/index.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
@@ -17,14 +17,17 @@ import { DEFAULT_BORDER_COLOR } from '../ColorPalette/Palettes/common';
 import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { editorAnalyticsChannel } from '../../plugins/analytics/consts';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../plugins/analytics/types';
+import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+
 // helps adjusts position of popup
 var colorPickerButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+var colorPickerExpandContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 0px -4px;\n"])));
 
 // Control the size of color picker buttons and preview
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4134
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var colorPickerWrapper = function colorPickerWrapper(theme) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: 8px 0px;\n"])), borderRadius(), themed({
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: 8px 0px;\n"])), borderRadius(), themed({
     light: "var(--ds-surface-overlay, ".concat(N0, ")"),
     dark: "var(--ds-surface-overlay, ".concat(DN50, ")")
   })(theme), N60A, N60A);
@@ -159,7 +162,7 @@ var ColorPickerButton = function ColorPickerButton(props) {
   };
   var title = props.title || '';
   var currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
-  var buttonStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    padding: 6px;\n    background-color: ", ";\n    ", "\n    &:before {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      align-self: center;\n      content: '';\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      padding: 0;\n    }\n  "])), "var(--ds-background-neutral, transparent)", /* If custom props size height, override the button base height property */
+  var buttonStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding: 0 10px;\n    background-color: ", ";\n    ", "\n    &:before {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      align-self: center;\n      content: '';\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      padding: 0;\n      margin: 0px 2px;\n    }\n  "])), "var(--ds-background-neutral, transparent)", /* If custom props size height, override the button base height property */
   !!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && "height: inherit;", DEFAULT_BORDER_COLOR, borderRadius(), currentColor || 'transparent', ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px', ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px');
   return jsx("div", {
     css: colorPickerButtonWrapper
@@ -178,7 +181,12 @@ var ColorPickerButton = function ColorPickerButton(props) {
         setIsOpenedByKeyboard(true);
       }
     },
-    css: buttonStyle
+    css: buttonStyle,
+    iconAfter: jsx("span", {
+      css: colorPickerExpandContainer
+    }, jsx(ExpandIcon, {
+      label: ""
+    }))
   })), renderPopup());
 };
 export default withAnalyticsContext({

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "185.11.0";
+export var version = "185.12.0";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "185.11.0",
+	"version": "185.12.0",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "185.11.0",
+  "version": "185.12.0",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,6 +30,12 @@
     "releaseModel": "continuous",
     "website": {
       "name": "Editor Core"
+    },
+    "integrationTests": {
+      "additionalBrowsers": [
+        "desktop-firefox",
+        "desktop-webkit"
+      ]
     }
   },
   "dependencies": {
@@ -49,7 +55,7 @@
     "@atlaskit/code": "^14.6.0",
     "@atlaskit/date": "^0.10.0",
     "@atlaskit/datetime-picker": "^12.7.0",
-    "@atlaskit/editor-common": "^74.17.0",
+    "@atlaskit/editor-common": "^74.19.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-markdown-transformer": "^5.2.0",
     "@atlaskit/editor-palette": "1.5.1",
@@ -70,16 +76,16 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/icon-object": "^6.3.0",
     "@atlaskit/link-analytics": "^8.2.0",
-    "@atlaskit/link-datasource": "^0.27.0",
+    "@atlaskit/link-datasource": "^0.28.0",
     "@atlaskit/link-picker": "^1.26.0",
     "@atlaskit/locale": "^2.5.0",
     "@atlaskit/logo": "^13.14.0",
-    "@atlaskit/media-card": "^76.0.0",
+    "@atlaskit/media-card": "^76.1.0",
     "@atlaskit/media-client": "^23.1.0",
     "@atlaskit/media-common": "^7.1.0",
     "@atlaskit/media-filmstrip": "^47.0.0",
     "@atlaskit/media-picker": "^66.1.0",
-    "@atlaskit/media-ui": "^23.1.0",
+    "@atlaskit/media-ui": "^23.2.0",
     "@atlaskit/media-viewer": "^48.0.0",
     "@atlaskit/mention": "^22.1.0",
     "@atlaskit/menu": "^1.9.0",
@@ -142,11 +148,11 @@
     "@af/editor-libra": "*",
     "@af/integration-testing": "*",
     "@atlaskit/code": "^14.6.0",
-    "@atlaskit/collab-provider": "9.6.0",
+    "@atlaskit/collab-provider": "9.6.1",
     "@atlaskit/dropdown-menu": "^11.10.0",
     "@atlaskit/editor-extension-dropbox": "^0.4.0",
     "@atlaskit/editor-plugin-table": "^2.0.0",
-    "@atlaskit/editor-test-helpers": "^18.9.0",
+    "@atlaskit/editor-test-helpers": "^18.10.0",
     "@atlaskit/flag": "^15.2.0",
     "@atlaskit/link-provider": "^1.6.0",
     "@atlaskit/link-test-helpers": "^4.1.0",
@@ -248,13 +254,5 @@
       "type": "boolean",
       "referenceOnly": "true"
     }
-  },
-  "tests": {
-    "integration": {
-      "additionalBrowsers": [
-        "desktop-firefox",
-        "desktop-webkit"
-      ]
-    }
   }
 }