@atlaskit/media-ui 24.0.2 → 25.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/media-ui
 
+## 25.0.0
+
+### Major Changes
+
+- [`e6122bf1c9a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e6122bf1c9a) - MEX-2481 revert and re-introduce a new fix for media border gap issue
+
+## 24.0.3
+
+### Patch Changes
+
+- [`6900f89eb0e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6900f89eb0e) - Internal changes to use space tokens. There is no expected visual or behaviour change.
+
 ## 24.0.2
 
 ### Patch Changes
@@ -2089,7 +2101,7 @@ Bumped dependencies.
 
 ## 7.3.0
 
-- [minor][023cb45" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/023cb45"
+- [minor][023cb45](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/023cb45"
   d):
 
   - Add i18n support to MediaViewer
@@ -2102,7 +2114,7 @@ Bumped dependencies.
 
 ## 7.2.0
 
-- [minor][439dde6" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/439dde6"
+- [minor][439dde6](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/439dde6"
   d):
 
   - rotate local image preview in cards based on the file orientation

package/dist/cjs/MediaInlineCard/Frame/styled.js

@@ -33,7 +33,7 @@ var isSelected = function isSelected(_ref) {
 // NB: `padding` consistent with @mentions.
 // NB: `display: inline` required for `box-decoration-break` to work.
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
-var Wrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 16px;\n  padding: 2px 4px 2px 4px;\n  box-decoration-break: clone;\n  display: inline;\n  border-radius: ", "px;\n  color: ", ";\n  background-color: ", ";\n  ", ";\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), (0, _constants.borderRadius)(), (0, _components.themed)({
+var Wrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 16px;\n  padding: ", " ", "\n    ", " ", ";\n  box-decoration-break: clone;\n  display: inline;\n  border-radius: ", "px;\n  color: ", ";\n  background-color: ", ";\n  ", ";\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", (0, _constants.borderRadius)(), (0, _components.themed)({
   light: "var(--ds-text, ".concat(_colors.N900, ")"),
   dark: "var(--ds-text, ".concat(_colors.DN600, ")")
 }), (0, _components.themed)({

package/dist/cjs/MediaInlineCard/Icon.js

@@ -19,5 +19,5 @@ var Icon = _styled.default.img(_templateObject || (_templateObject = (0, _tagged
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
 exports.Icon = Icon;
-var AKIconWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: calc(-1 * ", ");\n"])), "var(--ds-space-025, 2px)");
+var AKIconWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: ", ";\n"])), "var(--ds-space-negative-025, -2px)");
 exports.AKIconWrapper = AKIconWrapper;

package/dist/cjs/customMediaPlayer/index.js

@@ -51,7 +51,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; } } /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */ // Keep media player components used in media-viewer to use static colors from the new color palette to
 // support the hybrid theming in media viewer https://product-fabric.atlassian.net/browse/DSP-6067
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "24.0.2";
+var packageVersion = "25.0.0";
 var MEDIUM_VIDEO_MAX_WIDTH = 400;
 var SMALL_VIDEO_MAX_WIDTH = 160;
 var MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;

package/dist/cjs/mediaImage/index.js

@@ -270,16 +270,6 @@ var MediaImage = /*#__PURE__*/function (_Component) {
         }
       }
 
-      /*
-        For images with borders, there may be an intermittent gap between the image and the border due to weird browser behaviour.
-        Part of the solution is to expand the image equally in all directions (width & height) by 1px, and the below calculation is to ensure just that.
-         Read more: https://product-fabric.atlassian.net/browse/MEX-2481
-      */
-
-      if (this.props.expandByPixel !== undefined) {
-        percentSize = "calc(".concat(percentSize, " + ").concat(this.props.expandByPixel, "px)");
-      }
-
       /*
         When isStretchingAllowed is false image is as big as it is, but as small as container
         (according to strategy - cover or fit).

package/dist/es2019/MediaInlineCard/Frame/styled.js

@@ -36,7 +36,8 @@ const isSelected = ({
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
 export const Wrapper = styled.span`
   line-height: 16px;
-  padding: 2px 4px 2px 4px;
+  padding: ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}
+    ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"};
   box-decoration-break: clone;
   display: inline;
   border-radius: ${akBorderRadius()}px;

package/dist/es2019/MediaInlineCard/Icon.js

@@ -20,5 +20,5 @@ export const Icon = styled.img`
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
 export const AKIconWrapper = styled.span`
-  margin-right: calc(-1 * ${"var(--ds-space-025, 2px)"});
+  margin-right: ${"var(--ds-space-negative-025, -2px)"};
 `;

package/dist/es2019/customMediaPlayer/index.js

@@ -34,7 +34,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { SkipTenBackwardIcon, SkipTenForwardIcon } from './icons';
 import { getControlsWrapperClassName } from './getControlsWrapperClassName';
 const packageName = "@atlaskit/media-ui";
-const packageVersion = "24.0.2";
+const packageVersion = "25.0.0";
 const MEDIUM_VIDEO_MAX_WIDTH = 400;
 const SMALL_VIDEO_MAX_WIDTH = 160;
 const MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;

package/dist/es2019/mediaImage/index.js

@@ -248,16 +248,6 @@ export class MediaImage extends Component {
       }
     }
 
-    /*
-      For images with borders, there may be an intermittent gap between the image and the border due to weird browser behaviour.
-      Part of the solution is to expand the image equally in all directions (width & height) by 1px, and the below calculation is to ensure just that.
-       Read more: https://product-fabric.atlassian.net/browse/MEX-2481
-    */
-
-    if (this.props.expandByPixel !== undefined) {
-      percentSize = `calc(${percentSize} + ${this.props.expandByPixel}px)`;
-    }
-
     /*
       When isStretchingAllowed is false image is as big as it is, but as small as container
       (according to strategy - cover or fit).

package/dist/esm/MediaInlineCard/Frame/styled.js

@@ -26,7 +26,7 @@ var isSelected = function isSelected(_ref) {
 // NB: `padding` consistent with @mentions.
 // NB: `display: inline` required for `box-decoration-break` to work.
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
-export var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: 16px;\n  padding: 2px 4px 2px 4px;\n  box-decoration-break: clone;\n  display: inline;\n  border-radius: ", "px;\n  color: ", ";\n  background-color: ", ";\n  ", ";\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), akBorderRadius(), themed({
+export var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: 16px;\n  padding: ", " ", "\n    ", " ", ";\n  box-decoration-break: clone;\n  display: inline;\n  border-radius: ", "px;\n  color: ", ";\n  background-color: ", ";\n  ", ";\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", akBorderRadius(), themed({
   light: "var(--ds-text, ".concat(N900, ")"),
   dark: "var(--ds-text, ".concat(DN600, ")")
 }), themed({

package/dist/esm/MediaInlineCard/Icon.js

@@ -11,4 +11,4 @@ export var Icon = styled.img(_templateObject || (_templateObject = _taggedTempla
 // Used for 'untrue' icons which claim to be 16x16 but
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
-export var AKIconWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: calc(-1 * ", ");\n"])), "var(--ds-space-025, 2px)");
+export var AKIconWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n"])), "var(--ds-space-negative-025, -2px)");

package/dist/esm/customMediaPlayer/index.js

@@ -44,7 +44,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { SkipTenBackwardIcon, SkipTenForwardIcon } from './icons';
 import { getControlsWrapperClassName } from './getControlsWrapperClassName';
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "24.0.2";
+var packageVersion = "25.0.0";
 var MEDIUM_VIDEO_MAX_WIDTH = 400;
 var SMALL_VIDEO_MAX_WIDTH = 160;
 var MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;

package/dist/esm/mediaImage/index.js

@@ -261,16 +261,6 @@ export var MediaImage = /*#__PURE__*/function (_Component) {
         }
       }
 
-      /*
-        For images with borders, there may be an intermittent gap between the image and the border due to weird browser behaviour.
-        Part of the solution is to expand the image equally in all directions (width & height) by 1px, and the below calculation is to ensure just that.
-         Read more: https://product-fabric.atlassian.net/browse/MEX-2481
-      */
-
-      if (this.props.expandByPixel !== undefined) {
-        percentSize = "calc(".concat(percentSize, " + ").concat(this.props.expandByPixel, "px)");
-      }
-
       /*
         When isStretchingAllowed is false image is as big as it is, but as small as container
         (according to strategy - cover or fit).

package/dist/types/mediaImage/index.d.ts

@@ -11,7 +11,6 @@ export interface MediaImageProps {
     onImageError?: () => void;
     loading?: 'lazy' | 'eager';
     forceSyncDisplay?: boolean;
-    expandByPixel?: number;
 }
 export interface MediaImageState {
     isImageLoaded: boolean;

package/dist/types-ts4.5/mediaImage/index.d.ts

@@ -11,7 +11,6 @@ export interface MediaImageProps {
     onImageError?: () => void;
     loading?: 'lazy' | 'eager';
     forceSyncDisplay?: boolean;
-    expandByPixel?: number;
 }
 export interface MediaImageState {
     isImageLoaded: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-ui",
-  "version": "24.0.2",
+  "version": "25.0.0",
   "description": "Includes common components and utilities used by other media packages",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^16.9.0",
+    "@atlaskit/button": "^16.10.0",
     "@atlaskit/code": "^14.6.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/icon-file-type": "^6.4.0",
@@ -33,7 +33,7 @@
     "@atlaskit/select": "^16.5.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.20.0",
+    "@atlaskit/tokens": "^1.22.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/width-detector": "^4.1.0",
     "@babel/runtime": "^7.0.0",
@@ -53,7 +53,7 @@
   "devDependencies": {
     "@af/visual-regression": "*",
     "@atlaskit/analytics-listeners": "^8.7.0",
-    "@atlaskit/button": "^16.9.0",
+    "@atlaskit/button": "^16.10.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",

package/report.api.md

@@ -439,8 +439,6 @@ export interface MediaImageProps {
   // (undocumented)
   dataURI: string;
   // (undocumented)
-  expandByPixel?: number;
-  // (undocumented)
   forceSyncDisplay?: boolean;
   // (undocumented)
   loading?: 'eager' | 'lazy';

package/tmp/api-report-tmp.d.ts

@@ -377,8 +377,6 @@ export interface MediaImageProps {
     // (undocumented)
     dataURI: string;
     // (undocumented)
-    expandByPixel?: number;
-    // (undocumented)
     forceSyncDisplay?: boolean;
     // (undocumented)
     loading?: 'eager' | 'lazy';