@atlaskit/empty-state - npm Package Compare versions

Comparing version 3.0.9 to 3.1.0

CHANGELOG.md

 # @atlaskit/empty-state
 
+## 3.1.0
+- [minor] Adds new imageWidth and imageHeight props, useful for fixing the image dimensions while it's loading so the page doesn't bounce around. Changes the root element to use max-width instead of width so it shrinks down in smaller containers. [3209be4](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/3209be4)
+
 ## 3.0.9
@@ -4,0 +7,0 @@ - [patch] Pulling the shared styles from @atlaskit/theme and removed dependency on util-shraed-styles [7d51a09](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/7d51a09)

dist/cjs/EmptyState/index.js

@@ -57,2 +57,4 @@ 'use strict';
           imageUrl = _props.imageUrl,
+          imageWidth = _props.imageWidth,
+          imageHeight = _props.imageHeight,
           maxImageWidth = _props.maxImageWidth,
@@ -88,3 +90,5 @@ maxImageHeight = _props.maxImageHeight,
           maxWidth: maxImageWidth,
-          maxHeight: maxImageHeight
+          maxHeight: maxImageHeight,
+          width: imageWidth,
+          height: imageHeight
         }),
@@ -91,0 +95,0 @@ _react2.default.createElement(

dist/cjs/styled/Container.js

@@ -11,3 +11,3 @@ 'use strict';
 
-var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  margin: ', 'px auto;\n  text-align: center;\n  width: ', 'px;\n'], ['\n  margin: ', 'px auto;\n  text-align: center;\n  width: ', 'px;\n']);
+var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  margin: ', 'px auto;\n  text-align: center;\n  /* Use max-width so the component can shrink on smaller viewports. */\n  max-width: ', 'px;\n'], ['\n  margin: ', 'px auto;\n  text-align: center;\n  /* Use max-width so the component can shrink on smaller viewports. */\n  max-width: ', 'px;\n']);
 
@@ -14,0 +14,0 @@ var _styledComponents = require('styled-components');

dist/cjs/styled/Image.js

@@ -11,3 +11,3 @@ 'use strict';
 
-var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  max-width: ', 'px;\n  max-height: ', 'px;\n  margin: 0 auto ', 'px;\n  display: block;\n'], ['\n  max-width: ', 'px;\n  max-height: ', 'px;\n  margin: 0 auto ', 'px;\n  display: block;\n']);
+var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  max-width: ', 'px;\n  max-height: ', 'px;\n  width: ', ';\n  height: ', ';\n  margin: 0 auto ', 'px;\n  display: block;\n'], ['\n  max-width: ', 'px;\n  max-height: ', 'px;\n  width: ', ';\n  height: ', ';\n  margin: 0 auto ', 'px;\n  display: block;\n']);
 
@@ -26,4 +26,8 @@ var _styledComponents = require('styled-components');
   return props.maxHeight;
+}, function (props) {
+  return props.width || 'auto';
+}, function (props) {
+  return props.height || 'auto';
 }, (0, _theme.gridSize)() * 3);
 
 exports.default = Image;

dist/esm/EmptyState/index.js

@@ -31,2 +31,4 @@ import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
           imageUrl = _props.imageUrl,
+          imageWidth = _props.imageWidth,
+          imageHeight = _props.imageHeight,
           maxImageWidth = _props.maxImageWidth,
@@ -62,3 +64,5 @@ maxImageHeight = _props.maxImageHeight,
           maxWidth: maxImageWidth,
-          maxHeight: maxImageHeight
+          maxHeight: maxImageHeight,
+          width: imageWidth,
+          height: imageHeight
         }),
@@ -65,0 +69,0 @@ React.createElement(

dist/esm/styled/Container.js

 import _taggedTemplateLiteral from 'babel-runtime/helpers/taggedTemplateLiteral';
 
-var _templateObject = _taggedTemplateLiteral(['\n  margin: ', 'px auto;\n  text-align: center;\n  width: ', 'px;\n'], ['\n  margin: ', 'px auto;\n  text-align: center;\n  width: ', 'px;\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  margin: ', 'px auto;\n  text-align: center;\n  /* Use max-width so the component can shrink on smaller viewports. */\n  max-width: ', 'px;\n'], ['\n  margin: ', 'px auto;\n  text-align: center;\n  /* Use max-width so the component can shrink on smaller viewports. */\n  max-width: ', 'px;\n']);
 
@@ -5,0 +5,0 @@ import styled from 'styled-components';

dist/esm/styled/Image.js

 import _taggedTemplateLiteral from 'babel-runtime/helpers/taggedTemplateLiteral';
 
-var _templateObject = _taggedTemplateLiteral(['\n  max-width: ', 'px;\n  max-height: ', 'px;\n  margin: 0 auto ', 'px;\n  display: block;\n'], ['\n  max-width: ', 'px;\n  max-height: ', 'px;\n  margin: 0 auto ', 'px;\n  display: block;\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  max-width: ', 'px;\n  max-height: ', 'px;\n  width: ', ';\n  height: ', ';\n  margin: 0 auto ', 'px;\n  display: block;\n'], ['\n  max-width: ', 'px;\n  max-height: ', 'px;\n  width: ', ';\n  height: ', ';\n  margin: 0 auto ', 'px;\n  display: block;\n']);
 
@@ -12,4 +12,8 @@ import styled from 'styled-components';
   return props.maxHeight;
+}, function (props) {
+  return props.width || 'auto';
+}, function (props) {
+  return props.height || 'auto';
 }, gridSize() * 3);
 
 export default Image;

dist/package.json

 {
 	"name": "@atlaskit/empty-state",
-	"version": "3.0.9",
+	"version": "3.1.0",
 	"sideEffects": false
 }

package.json

 {
   "name": "@atlaskit/empty-state",
-  "version": "3.0.9",
+  "version": "3.1.0",
   "description": "A React component used for presenting various empty states (no items, empty search, broken link, welcome screen etc.)",
@@ -40,2 +40,2 @@ "license": "Apache-2.0",
   }
-}
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37680

increased by8.29%

Lines of code

367

increased by5.46%

No dependency changes