@atlaskit/smart-card 22.3.0 → 22.3.1
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 +2 -3
- package/dist/es2019/view/InlineCard/Icon.js +2 -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 +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @atlaskit/smart-card
|
|
2
2
|
|
|
3
|
+
## 22.3.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`829baeda46d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/829baeda46d) - [ux] Update token usages in the loading shimmer effect on inline cards.
|
|
8
|
+
|
|
3
9
|
## 22.3.0
|
|
4
10
|
|
|
5
11
|
### Minor 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
|
|
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 ", " 0%,\n ", " 20%,\n ", " 40%,\n ", " 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)('utility.UNSAFE_util.transparent', '#f6f7f8'), (0, _tokens.token)('color.skeleton', '#edeef1'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), 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
|
|
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 ", " 0%,\n ", " 20%,\n ", " 40%,\n ", " 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)('utility.UNSAFE_util.transparent', '#f6f7f8'), (0, _tokens.token)('color.skeleton', '#edeef1'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), placeholderShimmer);
|
|
38
38
|
|
|
39
39
|
exports.Shimmer = Shimmer;
|
package/dist/es2019/version.json
CHANGED
|
@@ -18,13 +18,12 @@ const LoadingSkeleton = ({
|
|
|
18
18
|
border-radius: 2px;
|
|
19
19
|
user-select: none;
|
|
20
20
|
background: ${token('color.skeleton.subtle', '#f6f7f8')};
|
|
21
|
-
// TODO: https://product-fabric.atlassian.net/browse/DSP-4236
|
|
22
21
|
background-image: linear-gradient(
|
|
23
22
|
to right,
|
|
24
|
-
${token('
|
|
23
|
+
${token('utility.UNSAFE_util.transparent', '#f6f7f8')} 0%,
|
|
25
24
|
${token('color.skeleton', '#edeef1')} 20%,
|
|
26
25
|
${token('color.skeleton.subtle', '#f6f7f8')} 40%,
|
|
27
|
-
${token('color.skeleton.subtle', '#f6f7f8')}100%
|
|
26
|
+
${token('color.skeleton.subtle', '#f6f7f8')} 100%
|
|
28
27
|
);
|
|
29
28
|
background-repeat: no-repeat;
|
|
30
29
|
background-size: 280% 100%;
|
|
@@ -43,13 +43,12 @@ export const Shimmer = styled.span`
|
|
|
43
43
|
left: 50%;
|
|
44
44
|
transform: translate(-50%, -50%);
|
|
45
45
|
background: ${token('color.skeleton.subtle', '#f6f7f8')};
|
|
46
|
-
// TODO: https://product-fabric.atlassian.net/browse/DSP-4236
|
|
47
46
|
background-image: linear-gradient(
|
|
48
47
|
to right,
|
|
49
|
-
${token('
|
|
48
|
+
${token('utility.UNSAFE_util.transparent', '#f6f7f8')} 0%,
|
|
50
49
|
${token('color.skeleton', '#edeef1')} 20%,
|
|
51
50
|
${token('color.skeleton.subtle', '#f6f7f8')} 40%,
|
|
52
|
-
${token('color.skeleton.subtle', '#f6f7f8')}100%
|
|
51
|
+
${token('color.skeleton.subtle', '#f6f7f8')} 100%
|
|
53
52
|
);
|
|
54
53
|
background-repeat: no-repeat;
|
|
55
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
|
|
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 ", " 0%,\n ", " 20%,\n ", " 40%,\n ", " 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('utility.UNSAFE_util.transparent', '#f6f7f8'), token('color.skeleton', '#edeef1'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), 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
|
|
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 ", " 0%,\n ", " 20%,\n ", " 40%,\n ", " 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('utility.UNSAFE_util.transparent', '#f6f7f8'), token('color.skeleton', '#edeef1'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), placeholderShimmer);
|