@atlaskit/smart-card 23.1.3 → 23.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/cjs/version.json +1 -1
- package/dist/cjs/view/FlexibleCard/components/common/loading-skeleton/index.js +1 -1
- package/dist/cjs/view/InlineCard/Icon.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/es2019/view/FlexibleCard/components/common/loading-skeleton/index.js +3 -3
- package/dist/es2019/view/InlineCard/Icon.js +3 -3
- package/dist/esm/version.json +1 -1
- package/dist/esm/view/FlexibleCard/components/common/loading-skeleton/index.js +1 -1
- package/dist/esm/view/InlineCard/Icon.js +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @atlaskit/smart-card
|
|
2
2
|
|
|
3
|
+
## 23.1.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`e6d8d32e33e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e6d8d32e33e) - [ux] Update token usages in the loading shimmer effect to be smoother for inline cards. Updated appearances only visible in applications configured to use the new Tokens API (currently in alpha).
|
|
8
|
+
|
|
3
9
|
## 23.1.3
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
package/dist/cjs/version.json
CHANGED
|
@@ -22,7 +22,7 @@ var LoadingSkeleton = function LoadingSkeleton(_ref) {
|
|
|
22
22
|
width = _ref.width,
|
|
23
23
|
height = _ref.height;
|
|
24
24
|
var animationNameStyles = (0, _react2.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n 0% { background-position: 50% 0; }\n 100% { background-position: -50% 0; }\n "])));
|
|
25
|
-
var styles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: ", "rem;\n height: ", "rem;\n border-radius: 2px;\n user-select: none;\n background: ", ";\n background-image: linear-gradient(\n to right,\n
|
|
25
|
+
var styles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: ", "rem;\n height: ", "rem;\n border-radius: 2px;\n user-select: none;\n background: ", ";\n background-image: linear-gradient(\n to right,\n transparent 0%,\n ", " 20%,\n transparent 40%,\n transparent 100%\n );\n background-repeat: no-repeat;\n background-size: 280% 100%;\n display: inline-block;\n\n animation-duration: 1s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: ", ";\n animation-timing-function: linear;\n "])), width, height, (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton', '#edeef1'), animationNameStyles);
|
|
26
26
|
return (0, _react2.jsx)("span", {
|
|
27
27
|
css: styles,
|
|
28
28
|
"data-testid": testId
|
|
@@ -34,6 +34,6 @@ var AKIconWrapper = _styled.default.span(_templateObject3 || (_templateObject3 =
|
|
|
34
34
|
|
|
35
35
|
exports.AKIconWrapper = AKIconWrapper;
|
|
36
36
|
|
|
37
|
-
var Shimmer = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n height: 14px;\n width: 14px;\n margin-right: 4px;\n border-radius: 2px;\n user-select: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: ", ";\n background-image: linear-gradient(\n to right,\n
|
|
37
|
+
var Shimmer = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n height: 14px;\n width: 14px;\n margin-right: 4px;\n border-radius: 2px;\n user-select: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: ", ";\n background-image: linear-gradient(\n to right,\n transparent 0%,\n ", " 20%,\n transparent 40%,\n transparent 100%\n );\n background-repeat: no-repeat;\n background-size: 40px 14px;\n display: inline-block;\n\n animation-duration: 1s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: ", ";\n animation-timing-function: linear;\n"])), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton', '#edeef1'), placeholderShimmer);
|
|
38
38
|
|
|
39
39
|
exports.Shimmer = Shimmer;
|
package/dist/es2019/version.json
CHANGED
|
@@ -20,10 +20,10 @@ const LoadingSkeleton = ({
|
|
|
20
20
|
background: ${token('color.skeleton.subtle', '#f6f7f8')};
|
|
21
21
|
background-image: linear-gradient(
|
|
22
22
|
to right,
|
|
23
|
-
|
|
23
|
+
transparent 0%,
|
|
24
24
|
${token('color.skeleton', '#edeef1')} 20%,
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
transparent 40%,
|
|
26
|
+
transparent 100%
|
|
27
27
|
);
|
|
28
28
|
background-repeat: no-repeat;
|
|
29
29
|
background-size: 280% 100%;
|
|
@@ -45,10 +45,10 @@ export const Shimmer = styled.span`
|
|
|
45
45
|
background: ${token('color.skeleton.subtle', '#f6f7f8')};
|
|
46
46
|
background-image: linear-gradient(
|
|
47
47
|
to right,
|
|
48
|
-
|
|
48
|
+
transparent 0%,
|
|
49
49
|
${token('color.skeleton', '#edeef1')} 20%,
|
|
50
|
-
|
|
51
|
-
|
|
50
|
+
transparent 40%,
|
|
51
|
+
transparent 100%
|
|
52
52
|
);
|
|
53
53
|
background-repeat: no-repeat;
|
|
54
54
|
background-size: 40px 14px;
|
package/dist/esm/version.json
CHANGED
|
@@ -12,7 +12,7 @@ var LoadingSkeleton = function LoadingSkeleton(_ref) {
|
|
|
12
12
|
width = _ref.width,
|
|
13
13
|
height = _ref.height;
|
|
14
14
|
var animationNameStyles = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% { background-position: 50% 0; }\n 100% { background-position: -50% 0; }\n "])));
|
|
15
|
-
var styles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: ", "rem;\n height: ", "rem;\n border-radius: 2px;\n user-select: none;\n background: ", ";\n background-image: linear-gradient(\n to right,\n
|
|
15
|
+
var styles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: ", "rem;\n height: ", "rem;\n border-radius: 2px;\n user-select: none;\n background: ", ";\n background-image: linear-gradient(\n to right,\n transparent 0%,\n ", " 20%,\n transparent 40%,\n transparent 100%\n );\n background-repeat: no-repeat;\n background-size: 280% 100%;\n display: inline-block;\n\n animation-duration: 1s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: ", ";\n animation-timing-function: linear;\n "])), width, height, token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton', '#edeef1'), animationNameStyles);
|
|
16
16
|
return jsx("span", {
|
|
17
17
|
css: styles,
|
|
18
18
|
"data-testid": testId
|
|
@@ -16,4 +16,4 @@ export var Icon = styled.img(_templateObject2 || (_templateObject2 = _taggedTemp
|
|
|
16
16
|
// TODO: Replace this override with proper AtlasKit solution.
|
|
17
17
|
|
|
18
18
|
export var AKIconWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin-right: -2px;\n"])));
|
|
19
|
-
export var Shimmer = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n height: 14px;\n width: 14px;\n margin-right: 4px;\n border-radius: 2px;\n user-select: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: ", ";\n background-image: linear-gradient(\n to right,\n
|
|
19
|
+
export var Shimmer = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n height: 14px;\n width: 14px;\n margin-right: 4px;\n border-radius: 2px;\n user-select: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: ", ";\n background-image: linear-gradient(\n to right,\n transparent 0%,\n ", " 20%,\n transparent 40%,\n transparent 100%\n );\n background-repeat: no-repeat;\n background-size: 40px 14px;\n display: inline-block;\n\n animation-duration: 1s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: ", ";\n animation-timing-function: linear;\n"])), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton', '#edeef1'), placeholderShimmer);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/smart-card",
|
|
3
|
-
"version": "23.1.
|
|
3
|
+
"version": "23.1.4",
|
|
4
4
|
"description": "Smart card component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"@atlaskit/icon-object": "^6.2.0",
|
|
42
42
|
"@atlaskit/icon-priority": "^6.3.0",
|
|
43
43
|
"@atlaskit/in-product-testing": "^0.1.0",
|
|
44
|
-
"@atlaskit/linking-common": "^1.
|
|
44
|
+
"@atlaskit/linking-common": "^1.11.0",
|
|
45
45
|
"@atlaskit/logo": "^13.10.0",
|
|
46
46
|
"@atlaskit/lozenge": "^11.3.0",
|
|
47
47
|
"@atlaskit/media-common": "^2.17.0",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"uuid": "^3.1.0"
|
|
67
67
|
},
|
|
68
68
|
"peerDependencies": {
|
|
69
|
-
"@atlaskit/link-provider": "^1.3.
|
|
69
|
+
"@atlaskit/link-provider": "^1.3.4",
|
|
70
70
|
"react": "^16.8.0",
|
|
71
71
|
"react-dom": "^16.8.0",
|
|
72
72
|
"react-intl-next": "npm:react-intl@^5.18.1"
|