@atlaskit/renderer 108.6.3 → 108.6.5

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/renderer
 
+## 108.6.5
+
+### Patch Changes
+
+- [`f486dbd535c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f486dbd535c) - MEX-2481 Fix minor gap between image and border
+- Updated dependencies
+
+## 108.6.4
+
+### Patch Changes
+
+- [`0d603996f7f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0d603996f7f) - [ux] TSLA-609 update code block wrap button and copy button to work in dark/light theme by adding back the wrapper element behind the buttons.
+
 ## 108.6.3
 
 ### Patch Changes

package/dist/cjs/react/nodes/codeBlock/components/codeBlockButtonContainer.js

@@ -13,7 +13,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var codeBlockButtonsWrapper = (0, _react.css)({
   position: 'sticky',
-  top: '0px'
+  top: '0px',
+  background: "".concat("var(--ds-surface, ".concat(_colors.N20, ")"))
 });
 var codeBlockButtonsStyle = (0, _react.css)({
   display: 'flex',
@@ -27,15 +28,15 @@ var codeBlockButtonsStyle = (0, _react.css)({
   button: {
     height: '32px',
     width: '32px',
-    border: "2px solid ".concat("var(--ds-border-inverse, ".concat(_colors.N0, ")")),
+    border: "2px solid ".concat("var(--ds-border, ".concat(_colors.N0, ")")),
     borderRadius: '4px',
     marginLeft: '4px',
     padding: '2px',
-    background: "".concat("var(--ds-background-neutral-subtle, ".concat(_colors.N20, ")")),
+    background: "".concat("var(--ds-surface-overlay, ".concat(_colors.N20, ")")),
     color: "var(--ds-icon, rgb(66, 82, 110))",
     '&:hover': {
       borderWidth: '2px',
-      backgroundColor: "".concat("var(--ds-background-neutral-hovered, ".concat(_colors.N30, ")")),
+      backgroundColor: "".concat("var(--ds-surface-overlay-hovered, ".concat(_colors.N30, ")")),
       height: '32px',
       width: '32px'
     },

package/dist/cjs/react/nodes/codeBlock/components/codeBlockWrapButton.js

@@ -25,11 +25,7 @@ var WrapIcon = function WrapIcon() {
   }, (0, _react.jsx)("g", {
     fill: "currentColor",
     clipPath: "url(#clip0_654_431)"
-  }, (0, _react.jsx)("rect", {
-    width: "24",
-    height: "24",
-    fillOpacity: "0.01"
-  }), (0, _react.jsx)("path", {
+  }, (0, _react.jsx)("path", {
     d: "M20 4h-1v16h1V4ZM3 8a1 1 0 0 1 1-1h9.5a4.5 4.5 0 1 1 0 9h-2.086l.293.293a1 1 0 0 1-1.414 1.414l-2-2a1 1 0 0 1 0-1.414l2-2a1 1 0 0 1 1.414 1.414l-.293.293H13.5a2.5 2.5 0 0 0 0-5H4a1 1 0 0 1-1-1Z",
     clipRule: "evenodd",
     fillRule: "evenodd"

package/dist/cjs/react/nodes/media.js

@@ -63,6 +63,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
           border: !!borderMark
         })
       }, (0, _react2.jsx)(_MediaCard.MediaCard, (0, _extends2.default)({
+        expandByPixel: borderMark && _ui.IMAGE_AND_BORDER_ADJUSTMENT,
         mediaProvider: mediaProvider,
         contextIdentifierProvider: contextIdentifierProvider
       }, _this.props, {
@@ -79,8 +80,8 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         "data-color": borderColor,
         "data-size": borderWidth,
         style: {
-          width: '100%',
-          height: '100%',
+          width: "calc(100% - ".concat(_ui.IMAGE_AND_BORDER_ADJUSTMENT, "px)"),
+          height: "calc(100% - ".concat(_ui.IMAGE_AND_BORDER_ADJUSTMENT, "px)"),
           borderColor: paletteColorValue,
           borderWidth: "".concat(borderWidth, "px"),
           borderStyle: 'solid',

package/dist/cjs/ui/MediaCard.js

@@ -227,7 +227,8 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
         alt = _this$props4.alt,
         featureFlags = _this$props4.featureFlags,
         ssr = _this$props4.ssr,
-        rendererAppearance = _this$props4.rendererAppearance;
+        rendererAppearance = _this$props4.rendererAppearance,
+        expandByPixel = _this$props4.expandByPixel;
       if (imageStatus === 'loading' || !url) {
         return this.renderLoadingCard();
       }
@@ -241,6 +242,7 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
       // context is not really used when the type is external and we want to render the component asap
       , {
         mediaClientConfig: mediaClientConfig,
+        expandByPixel: expandByPixel,
         alt: alt,
         identifier: identifier,
         dimensions: cardDimensions,
@@ -276,7 +278,8 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
         forceOpenMediaViewer = _this$props5.shouldOpenMediaViewer,
         featureFlags = _this$props5.featureFlags,
         shouldEnableDownloadButton = _this$props5.shouldEnableDownloadButton,
-        ssr = _this$props5.ssr;
+        ssr = _this$props5.ssr,
+        expandByPixel = _this$props5.expandByPixel;
       var isMobile = rendererAppearance === 'mobile';
       var shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
       var isInlinePlayer = isMobile ? false : shouldPlayInline;
@@ -312,6 +315,7 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
         originalDimensions: originalDimensions,
         fileState: fileState
       }), /*#__PURE__*/_react.default.createElement(_mediaCard.Card, {
+        expandByPixel: expandByPixel,
         identifier: identifier,
         alt: alt,
         contextId: contextId,

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

@@ -55,7 +55,7 @@ exports.NORMAL_SEVERITY_THRESHOLD = NORMAL_SEVERITY_THRESHOLD;
 var DEGRADED_SEVERITY_THRESHOLD = 3000;
 exports.DEGRADED_SEVERITY_THRESHOLD = DEGRADED_SEVERITY_THRESHOLD;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.6.3";
+var packageVersion = "108.6.5";
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "108.6.3",
+	"version": "108.6.5",
 	"sideEffects": false
 }

package/dist/es2019/react/nodes/codeBlock/components/codeBlockButtonContainer.js

@@ -5,7 +5,8 @@ import CodeWrapButton from './codeBlockWrapButton';
 import { N0, N20, N30, N700 } from '@atlaskit/theme/colors';
 const codeBlockButtonsWrapper = css({
   position: 'sticky',
-  top: '0px'
+  top: '0px',
+  background: `${`var(--ds-surface, ${N20})`}`
 });
 const codeBlockButtonsStyle = css({
   display: 'flex',
@@ -19,15 +20,15 @@ const codeBlockButtonsStyle = css({
   button: {
     height: '32px',
     width: '32px',
-    border: `2px solid ${`var(--ds-border-inverse, ${N0})`}`,
+    border: `2px solid ${`var(--ds-border, ${N0})`}`,
     borderRadius: '4px',
     marginLeft: '4px',
     padding: '2px',
-    background: `${`var(--ds-background-neutral-subtle, ${N20})`}`,
+    background: `${`var(--ds-surface-overlay, ${N20})`}`,
     color: `${"var(--ds-icon, rgb(66, 82, 110))"}`,
     '&:hover': {
       borderWidth: '2px',
-      backgroundColor: `${`var(--ds-background-neutral-hovered, ${N30})`}`,
+      backgroundColor: `${`var(--ds-surface-overlay-hovered, ${N30})`}`,
       height: '32px',
       width: '32px'
     },

package/dist/es2019/react/nodes/codeBlock/components/codeBlockWrapButton.js

@@ -17,11 +17,7 @@ const WrapIcon = () => {
   }, jsx("g", {
     fill: "currentColor",
     clipPath: "url(#clip0_654_431)"
-  }, jsx("rect", {
-    width: "24",
-    height: "24",
-    fillOpacity: "0.01"
-  }), jsx("path", {
+  }, jsx("path", {
     d: "M20 4h-1v16h1V4ZM3 8a1 1 0 0 1 1-1h9.5a4.5 4.5 0 1 1 0 9h-2.086l.293.293a1 1 0 0 1-1.414 1.414l-2-2a1 1 0 0 1 0-1.414l2-2a1 1 0 0 1 1.414 1.414l-.293.293H13.5a2.5 2.5 0 0 0 0-5H4a1 1 0 0 1-1-1Z",
     clipRule: "evenodd",
     fillRule: "evenodd"

package/dist/es2019/react/nodes/media.js

@@ -7,7 +7,7 @@ import { jsx } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { mediaLinkStyle } from '@atlaskit/editor-common/ui';
+import { mediaLinkStyle, IMAGE_AND_BORDER_ADJUSTMENT } from '@atlaskit/editor-common/ui';
 import { MediaCard } from '../../ui/MediaCard';
 import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
 import { getEventHandler } from '../../utils';
@@ -44,6 +44,7 @@ export default class Media extends PureComponent {
           }
         }
       }, jsx(MediaCard, _extends({
+        expandByPixel: borderMark && IMAGE_AND_BORDER_ADJUSTMENT,
         mediaProvider: mediaProvider,
         contextIdentifierProvider: contextIdentifierProvider
       }, this.props, {
@@ -60,8 +61,8 @@ export default class Media extends PureComponent {
         "data-color": borderColor,
         "data-size": borderWidth,
         style: {
-          width: '100%',
-          height: '100%',
+          width: `calc(100% - ${IMAGE_AND_BORDER_ADJUSTMENT}px)`,
+          height: `calc(100% - ${IMAGE_AND_BORDER_ADJUSTMENT}px)`,
           borderColor: paletteColorValue,
           borderWidth: `${borderWidth}px`,
           borderStyle: 'solid',

package/dist/es2019/ui/MediaCard.js

@@ -159,7 +159,8 @@ export class MediaCardInternal extends Component {
       alt,
       featureFlags,
       ssr,
-      rendererAppearance
+      rendererAppearance,
+      expandByPixel
     } = this.props;
     if (imageStatus === 'loading' || !url) {
       return this.renderLoadingCard();
@@ -174,6 +175,7 @@ export class MediaCardInternal extends Component {
     // context is not really used when the type is external and we want to render the component asap
     , {
       mediaClientConfig: mediaClientConfig,
+      expandByPixel: expandByPixel,
       alt: alt,
       identifier: identifier,
       dimensions: cardDimensions,
@@ -208,7 +210,8 @@ export class MediaCardInternal extends Component {
       shouldOpenMediaViewer: forceOpenMediaViewer,
       featureFlags,
       shouldEnableDownloadButton,
-      ssr
+      ssr,
+      expandByPixel
     } = this.props;
     const isMobile = rendererAppearance === 'mobile';
     const shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
@@ -245,6 +248,7 @@ export class MediaCardInternal extends Component {
       originalDimensions,
       fileState
     }), /*#__PURE__*/React.createElement(Card, {
+      expandByPixel: expandByPixel,
       identifier: identifier,
       alt: alt,
       contextId: contextId,

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

@@ -35,7 +35,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "108.6.3";
+const packageVersion = "108.6.5";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "108.6.3",
+	"version": "108.6.5",
 	"sideEffects": false
 }

package/dist/esm/react/nodes/codeBlock/components/codeBlockButtonContainer.js

@@ -5,7 +5,8 @@ import CodeWrapButton from './codeBlockWrapButton';
 import { N0, N20, N30, N700 } from '@atlaskit/theme/colors';
 var codeBlockButtonsWrapper = css({
   position: 'sticky',
-  top: '0px'
+  top: '0px',
+  background: "".concat("var(--ds-surface, ".concat(N20, ")"))
 });
 var codeBlockButtonsStyle = css({
   display: 'flex',
@@ -19,15 +20,15 @@ var codeBlockButtonsStyle = css({
   button: {
     height: '32px',
     width: '32px',
-    border: "2px solid ".concat("var(--ds-border-inverse, ".concat(N0, ")")),
+    border: "2px solid ".concat("var(--ds-border, ".concat(N0, ")")),
     borderRadius: '4px',
     marginLeft: '4px',
     padding: '2px',
-    background: "".concat("var(--ds-background-neutral-subtle, ".concat(N20, ")")),
+    background: "".concat("var(--ds-surface-overlay, ".concat(N20, ")")),
     color: "var(--ds-icon, rgb(66, 82, 110))",
     '&:hover': {
       borderWidth: '2px',
-      backgroundColor: "".concat("var(--ds-background-neutral-hovered, ".concat(N30, ")")),
+      backgroundColor: "".concat("var(--ds-surface-overlay-hovered, ".concat(N30, ")")),
       height: '32px',
       width: '32px'
     },

package/dist/esm/react/nodes/codeBlock/components/codeBlockWrapButton.js

@@ -17,11 +17,7 @@ var WrapIcon = function WrapIcon() {
   }, jsx("g", {
     fill: "currentColor",
     clipPath: "url(#clip0_654_431)"
-  }, jsx("rect", {
-    width: "24",
-    height: "24",
-    fillOpacity: "0.01"
-  }), jsx("path", {
+  }, jsx("path", {
     d: "M20 4h-1v16h1V4ZM3 8a1 1 0 0 1 1-1h9.5a4.5 4.5 0 1 1 0 9h-2.086l.293.293a1 1 0 0 1-1.414 1.414l-2-2a1 1 0 0 1 0-1.414l2-2a1 1 0 0 1 1.414 1.414l-.293.293H13.5a2.5 2.5 0 0 0 0-5H4a1 1 0 0 1-1-1Z",
     clipRule: "evenodd",
     fillRule: "evenodd"

package/dist/esm/react/nodes/media.js

@@ -15,7 +15,7 @@ import { jsx } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { mediaLinkStyle } from '@atlaskit/editor-common/ui';
+import { mediaLinkStyle, IMAGE_AND_BORDER_ADJUSTMENT } from '@atlaskit/editor-common/ui';
 import { MediaCard } from '../../ui/MediaCard';
 import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
 import { getEventHandler } from '../../utils';
@@ -55,6 +55,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
           border: !!borderMark
         })
       }, jsx(MediaCard, _extends({
+        expandByPixel: borderMark && IMAGE_AND_BORDER_ADJUSTMENT,
         mediaProvider: mediaProvider,
         contextIdentifierProvider: contextIdentifierProvider
       }, _this.props, {
@@ -71,8 +72,8 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         "data-color": borderColor,
         "data-size": borderWidth,
         style: {
-          width: '100%',
-          height: '100%',
+          width: "calc(100% - ".concat(IMAGE_AND_BORDER_ADJUSTMENT, "px)"),
+          height: "calc(100% - ".concat(IMAGE_AND_BORDER_ADJUSTMENT, "px)"),
           borderColor: paletteColorValue,
           borderWidth: "".concat(borderWidth, "px"),
           borderStyle: 'solid',

package/dist/esm/ui/MediaCard.js

@@ -215,7 +215,8 @@ export var MediaCardInternal = /*#__PURE__*/function (_Component) {
         alt = _this$props4.alt,
         featureFlags = _this$props4.featureFlags,
         ssr = _this$props4.ssr,
-        rendererAppearance = _this$props4.rendererAppearance;
+        rendererAppearance = _this$props4.rendererAppearance,
+        expandByPixel = _this$props4.expandByPixel;
       if (imageStatus === 'loading' || !url) {
         return this.renderLoadingCard();
       }
@@ -229,6 +230,7 @@ export var MediaCardInternal = /*#__PURE__*/function (_Component) {
       // context is not really used when the type is external and we want to render the component asap
       , {
         mediaClientConfig: mediaClientConfig,
+        expandByPixel: expandByPixel,
         alt: alt,
         identifier: identifier,
         dimensions: cardDimensions,
@@ -264,7 +266,8 @@ export var MediaCardInternal = /*#__PURE__*/function (_Component) {
         forceOpenMediaViewer = _this$props5.shouldOpenMediaViewer,
         featureFlags = _this$props5.featureFlags,
         shouldEnableDownloadButton = _this$props5.shouldEnableDownloadButton,
-        ssr = _this$props5.ssr;
+        ssr = _this$props5.ssr,
+        expandByPixel = _this$props5.expandByPixel;
       var isMobile = rendererAppearance === 'mobile';
       var shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
       var isInlinePlayer = isMobile ? false : shouldPlayInline;
@@ -300,6 +303,7 @@ export var MediaCardInternal = /*#__PURE__*/function (_Component) {
         originalDimensions: originalDimensions,
         fileState: fileState
       }), /*#__PURE__*/React.createElement(Card, {
+        expandByPixel: expandByPixel,
         identifier: identifier,
         alt: alt,
         contextId: contextId,

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

@@ -45,7 +45,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.6.3";
+var packageVersion = "108.6.5";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "108.6.3",
+	"version": "108.6.5",
 	"sideEffects": false
 }

package/dist/types/ui/MediaCard.d.ts

@@ -40,6 +40,7 @@ export interface MediaCardProps {
     featureFlags?: MediaFeatureFlags;
     shouldEnableDownloadButton?: boolean;
     ssr?: MediaSSR;
+    expandByPixel?: number;
 }
 export interface State {
     mediaClientConfig?: MediaClientConfig;

package/dist/types-ts4.5/ui/MediaCard.d.ts

@@ -40,6 +40,7 @@ export interface MediaCardProps {
     featureFlags?: MediaFeatureFlags;
     shouldEnableDownloadButton?: boolean;
     ssr?: MediaSSR;
+    expandByPixel?: number;
 }
 export interface State {
     mediaClientConfig?: MediaClientConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "108.6.3",
+  "version": "108.6.5",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,30 +24,30 @@
     }
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^26.0.0",
+    "@atlaskit/adf-schema": "^26.1.0",
     "@atlaskit/adf-utils": "^19.0.0",
     "@atlaskit/analytics-listeners": "^8.7.0",
     "@atlaskit/analytics-namespaced-context": "^6.7.0",
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^16.8.0",
     "@atlaskit/code": "^14.6.0",
-    "@atlaskit/editor-common": "^74.15.0",
-    "@atlaskit/editor-json-transformer": "^8.9.0",
+    "@atlaskit/editor-common": "^74.19.0",
+    "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-shared-styles": "^2.4.0",
     "@atlaskit/emoji": "^67.4.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/link-datasource": "^0.27.0",
-    "@atlaskit/media-card": "^76.0.0",
+    "@atlaskit/link-datasource": "^0.28.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-ui": "^23.1.0",
+    "@atlaskit/media-ui": "^23.2.0",
     "@atlaskit/media-viewer": "^48.0.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/smart-card": "^26.9.0",
     "@atlaskit/status": "^1.3.0",
-    "@atlaskit/task-decision": "^17.6.0",
+    "@atlaskit/task-decision": "^17.7.0",
     "@atlaskit/theme": "^12.5.0",
     "@atlaskit/tokens": "^1.11.0",
     "@atlaskit/tooltip": "^17.8.0",
@@ -71,9 +71,8 @@
   "devDependencies": {
     "@atlaskit/analytics-gas-types": "^5.1.0",
     "@atlaskit/css-reset": "^6.5.0",
-    "@atlaskit/editor-core": "^185.8.0",
-    "@atlaskit/editor-test-helpers": "^18.8.0",
-    "@atlaskit/inline-edit": "^12.3.3",
+    "@atlaskit/editor-core": "^185.11.0",
+    "@atlaskit/editor-test-helpers": "^18.10.0",
     "@atlaskit/link-provider": "^1.6.0",
     "@atlaskit/link-test-helpers": "^4.1.0",
     "@atlaskit/media-core": "^34.1.0",