@atlaskit/smart-card 22.3.0 → 22.3.2
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 +12 -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/FlexibleCard/components/elements/date-time/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/FlexibleCard/components/elements/date-time/index.js +1 -1
- 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/FlexibleCard/components/elements/date-time/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,17 @@
|
|
|
1
1
|
# @atlaskit/smart-card
|
|
2
2
|
|
|
3
|
+
## 22.3.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`d4f3f7afbe4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d4f3f7afbe4) - [ux] Smart Links: Change date format of the Flexible Smart Links' CreatedOn and ModifiedOn element to short month to better accommodate smaller space, including but not limited to Hover Preview.
|
|
8
|
+
|
|
9
|
+
## 22.3.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`829baeda46d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/829baeda46d) - [ux] Update token usages in the loading shimmer effect on inline cards.
|
|
14
|
+
|
|
3
15
|
## 22.3.0
|
|
4
16
|
|
|
5
17
|
### 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);
|