@atlaskit/skeleton 0.5.0 → 0.5.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/skeleton
 
+## 0.5.2
+
+### Patch Changes
+
+- [#142024](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/142024)
+  [`a25bee9de4d3c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a25bee9de4d3c) -
+  Support to override color and shimmering color in keyframes
+
+## 0.5.1
+
+### Patch Changes
+
+- [#129411](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/129411)
+  [`300b0a472d9ce`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/300b0a472d9ce) -
+  Removes deprecated usage of ak/theme mixin functions and replaces them with their direct outputs
+- Updated dependencies
+
 ## 0.5.0
 
 ### Minor Changes

package/dist/cjs/ui/index.js

@@ -21,6 +21,18 @@ var skeletonStyles = (0, _react.css)(_objectSpread({}, shimmer.css));
 var activeShimmerStyles = (0, _react.css)({
   animationName: "".concat(shimmerKeyframes)
 });
+var getKeyframes = function getKeyframes(fromColor, toColor) {
+  return (0, _react.keyframes)({
+    from: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      backgroundColor: fromColor
+    },
+    to: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      backgroundColor: toColor
+    }
+  });
+};
 
 /**
  * __Skeleton__
@@ -35,6 +47,8 @@ var Skeleton = function Skeleton(_ref) {
     height = _ref.height,
     _ref$borderRadius = _ref.borderRadius,
     borderRadius = _ref$borderRadius === void 0 ? '100px' : _ref$borderRadius,
+    color = _ref.color,
+    ShimmeringEndColor = _ref.ShimmeringEndColor,
     _ref$isShimmering = _ref.isShimmering,
     isShimmering = _ref$isShimmering === void 0 ? false : _ref$isShimmering,
     groupName = _ref.groupName,
@@ -47,7 +61,9 @@ var Skeleton = function Skeleton(_ref) {
     {
       width: width,
       height: height,
-      borderRadius: borderRadius
+      borderRadius: borderRadius,
+      backgroundColor: color,
+      animationName: color && ShimmeringEndColor ? getKeyframes(color, ShimmeringEndColor) : undefined
     }]
   }, groupDataAttribute && (0, _defineProperty2.default)({}, groupDataAttribute, 'true')));
 };

package/dist/es2019/ui/index.js

@@ -16,6 +16,16 @@ const skeletonStyles = css({
 const activeShimmerStyles = css({
   animationName: `${shimmerKeyframes}`
 });
+const getKeyframes = (fromColor, toColor) => keyframes({
+  from: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    backgroundColor: fromColor
+  },
+  to: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    backgroundColor: toColor
+  }
+});
 
 /**
  * __Skeleton__
@@ -29,6 +39,8 @@ const Skeleton = ({
   width,
   height,
   borderRadius = '100px',
+  color,
+  ShimmeringEndColor,
   isShimmering = false,
   groupName,
   testId
@@ -41,7 +53,9 @@ const Skeleton = ({
     {
       width,
       height,
-      borderRadius
+      borderRadius,
+      backgroundColor: color,
+      animationName: color && ShimmeringEndColor ? getKeyframes(color, ShimmeringEndColor) : undefined
     }]
   }, groupDataAttribute && {
     [groupDataAttribute]: 'true'

package/dist/esm/ui/index.js

@@ -16,6 +16,18 @@ var skeletonStyles = css(_objectSpread({}, shimmer.css));
 var activeShimmerStyles = css({
   animationName: "".concat(shimmerKeyframes)
 });
+var getKeyframes = function getKeyframes(fromColor, toColor) {
+  return keyframes({
+    from: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      backgroundColor: fromColor
+    },
+    to: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      backgroundColor: toColor
+    }
+  });
+};
 
 /**
  * __Skeleton__
@@ -30,6 +42,8 @@ var Skeleton = function Skeleton(_ref) {
     height = _ref.height,
     _ref$borderRadius = _ref.borderRadius,
     borderRadius = _ref$borderRadius === void 0 ? '100px' : _ref$borderRadius,
+    color = _ref.color,
+    ShimmeringEndColor = _ref.ShimmeringEndColor,
     _ref$isShimmering = _ref.isShimmering,
     isShimmering = _ref$isShimmering === void 0 ? false : _ref$isShimmering,
     groupName = _ref.groupName,
@@ -42,7 +56,9 @@ var Skeleton = function Skeleton(_ref) {
     {
       width: width,
       height: height,
-      borderRadius: borderRadius
+      borderRadius: borderRadius,
+      backgroundColor: color,
+      animationName: color && ShimmeringEndColor ? getKeyframes(color, ShimmeringEndColor) : undefined
     }]
   }, groupDataAttribute && _defineProperty({}, groupDataAttribute, 'true')));
 };

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

@@ -10,6 +10,14 @@ type SkeletonProps = {
      * Defaults to 100px to allow for any reasonable size skeleton having rounded corners.
      */
     borderRadius?: string | number;
+    /**
+     * Overrides the default color of skeleton, and overrides the default shimmering start color if ShimmeringEndColor also provided.
+     */
+    color?: string;
+    /**
+     * Overrides the default shimmering ending color of skeleton.
+     */
+    ShimmeringEndColor?: string;
     /**
      * Enables the shimmering animation.
      */
@@ -31,5 +39,5 @@ type SkeletonProps = {
  * - [Examples](https://atlassian.design/components/skeleton/examples)
  * - [Code](https://atlassian.design/components/skeleton/code)
  */
-declare const Skeleton: ({ width, height, borderRadius, isShimmering, groupName, testId, }: SkeletonProps) => jsx.JSX.Element;
+declare const Skeleton: ({ width, height, borderRadius, color, ShimmeringEndColor, isShimmering, groupName, testId, }: SkeletonProps) => jsx.JSX.Element;
 export default Skeleton;

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

@@ -10,6 +10,14 @@ type SkeletonProps = {
      * Defaults to 100px to allow for any reasonable size skeleton having rounded corners.
      */
     borderRadius?: string | number;
+    /**
+     * Overrides the default color of skeleton, and overrides the default shimmering start color if ShimmeringEndColor also provided.
+     */
+    color?: string;
+    /**
+     * Overrides the default shimmering ending color of skeleton.
+     */
+    ShimmeringEndColor?: string;
     /**
      * Enables the shimmering animation.
      */
@@ -31,5 +39,5 @@ type SkeletonProps = {
  * - [Examples](https://atlassian.design/components/skeleton/examples)
  * - [Code](https://atlassian.design/components/skeleton/code)
  */
-declare const Skeleton: ({ width, height, borderRadius, isShimmering, groupName, testId, }: SkeletonProps) => jsx.JSX.Element;
+declare const Skeleton: ({ width, height, borderRadius, color, ShimmeringEndColor, isShimmering, groupName, testId, }: SkeletonProps) => jsx.JSX.Element;
 export default Skeleton;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/skeleton",
-	"version": "0.5.0",
+	"version": "0.5.2",
 	"description": "A skeleton acts as a placeholder for content, usually while the content loads.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -16,8 +16,6 @@
 	"atlaskit:src": "src/index.tsx",
 	"atlassian": {
 		"team": "Design System Team",
-		"inPublicMirror": false,
-		"releaseModel": "continuous",
 		"website": {
 			"name": "Skeleton",
 			"category": "Components",
@@ -28,7 +26,7 @@
 		"runReact18": true
 	},
 	"dependencies": {
-		"@atlaskit/theme": "^12.12.0",
+		"@atlaskit/theme": "^13.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},