@atlaskit/avatar - npm Package Compare versions

Comparing version 21.3.2 to 21.3.3

CHANGELOG.md

 # @atlaskit/avatar
 
+## 21.3.3
+
+### Patch Changes
+
+- [`e2d375fa634`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e2d375fa634) - Refactor how some internal styles are applied; no functional changes.
+
 ## 21.3.2
@@ -4,0 +10,0 @@

dist/cjs/Avatar.js

@@ -25,3 +25,3 @@ "use strict";
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.3.2";
+var packageVersion = "21.3.3";
 
@@ -28,0 +28,0 @@ // eslint-disable-next-line @repo/internal/react/consistent-types-definitions

dist/cjs/AvatarImage.js

@@ -8,2 +8,3 @@ "use strict";
 exports.default = exports.ICON_COLOR = exports.ICON_BACKGROUND = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -16,5 +17,4 @@ var _react = require("react");
 var _constants = require("./constants");
-/** @jsx jsx */
-// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
-
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 var ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat((0, _colors.background)(), ")");
@@ -30,2 +30,14 @@ exports.ICON_BACKGROUND = ICON_BACKGROUND;
 });
+var nestedAvatarStyles = Object.entries(_constants.AVATAR_SIZES).reduce(function (styles, _ref) {
+  var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+    key = _ref2[0],
+    size = _ref2[1];
+  return _objectSpread(_objectSpread({}, styles), {}, (0, _defineProperty2.default)({}, key, (0, _react2.css)({
+    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    '& svg': {
+      width: "".concat(size, "px"),
+      height: "".concat(size, "px")
+    }
+  })));
+}, {});
 var avatarImageStyles = (0, _react2.css)({
@@ -37,2 +49,3 @@ display: 'flex',
 });
+
 /**
@@ -43,9 +56,9 @@ * __Avatar image__
  */
-var AvatarImage = function AvatarImage(_ref) {
-  var _ref$alt = _ref.alt,
-    alt = _ref$alt === void 0 ? '' : _ref$alt,
-    src = _ref.src,
-    appearance = _ref.appearance,
-    size = _ref.size,
-    testId = _ref.testId;
+var AvatarImage = function AvatarImage(_ref3) {
+  var _ref3$alt = _ref3.alt,
+    alt = _ref3$alt === void 0 ? '' : _ref3$alt,
+    src = _ref3.src,
+    appearance = _ref3.appearance,
+    size = _ref3.size,
+    testId = _ref3.testId;
   var _useState = (0, _react.useState)(false),
@@ -63,11 +76,3 @@ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     return (0, _react2.jsx)("span", {
-      css: [avatarDefaultIconStyles,
-      // TODO: These dynamic SVG styles can't be set in 'style'. On a refactor, use a css custom property to pass down the size
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-      {
-        '& svg': {
-          width: "".concat(_constants.AVATAR_SIZES[size], "px"),
-          height: "".concat(_constants.AVATAR_SIZES[size], "px")
-        }
-      }]
+      css: [avatarDefaultIconStyles, nestedAvatarStyles[size]]
     }, appearance === 'circle' ? (0, _react2.jsx)(_person.default, {
@@ -74,0 +79,0 @@ label: alt,

dist/cjs/constants.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.ICON_SIZES = exports.ICON_OFFSET = exports.BORDER_WIDTH = exports.AVATAR_SIZES = exports.AVATAR_RADIUS = exports.ACTIVE_SCALE_FACTOR = void 0;
+exports.ICON_SIZES = exports.ICON_OFFSET = exports.CSS_VAR_AVATAR_BGCOLOR = exports.BORDER_WIDTH = exports.AVATAR_SIZES = exports.AVATAR_RADIUS = exports.ACTIVE_SCALE_FACTOR = void 0;
 var _constants = require("@atlaskit/theme/constants");
@@ -35,2 +35,4 @@ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match, @atlaskit/design-system/no-deprecated-imports
 exports.ACTIVE_SCALE_FACTOR = ACTIVE_SCALE_FACTOR;
+var CSS_VAR_AVATAR_BGCOLOR = '--avatar-background-color';
+exports.CSS_VAR_AVATAR_BGCOLOR = CSS_VAR_AVATAR_BGCOLOR;
 var ICON_SIZES = {
@@ -37,0 +39,0 @@ small: 12,

dist/cjs/Skeleton.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
@@ -7,26 +8,41 @@ value: true
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("@emotion/react");
 var _constants = require("./constants");
-/** @jsx jsx */
-// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+var skeletonStyles = (0, _react.css)({
+  display: 'inline-block',
+  backgroundColor: "var(".concat(_constants.CSS_VAR_AVATAR_BGCOLOR, ")"),
+  border: "".concat(_constants.BORDER_WIDTH, "px solid transparent")
+});
+var sizeStyles = Object.entries(_constants.AVATAR_SIZES).reduce(function (styles, _ref) {
+  var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+    key = _ref2[0],
+    size = _ref2[1];
+  return _objectSpread(_objectSpread({}, styles), {}, (0, _defineProperty2.default)({}, key, (0, _react.css)({
+    width: "".concat(size, "px"),
+    height: "".concat(size, "px")
+  })));
+}, {});
 
-var getStyles = function getStyles(_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'circle' : _ref$appearance,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'currentColor' : _ref$color,
-    _ref$weight = _ref.weight,
-    weight = _ref$weight === void 0 ? 'normal' : _ref$weight;
-  return (0, _react.css)({
-    display: 'inline-block',
-    width: "".concat(_constants.AVATAR_SIZES[size], "px"),
-    height: "".concat(_constants.AVATAR_SIZES[size], "px"),
-    backgroundColor: color,
-    border: "".concat(_constants.BORDER_WIDTH, "px solid transparent"),
-    borderRadius: "".concat(appearance === 'square' ? "".concat(_constants.AVATAR_RADIUS[size], "px") : '50%'),
-    opacity: "".concat(weight === 'strong' ? 0.3 : 0.15)
-  });
-};
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+var radiusStyles = Object.entries(_constants.AVATAR_RADIUS).reduce(function (styles, _ref3) {
+  var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+    key = _ref4[0],
+    size = _ref4[1];
+  return _objectSpread(_objectSpread({}, styles), {}, (0, _defineProperty2.default)({}, key, (0, _react.css)({
+    borderRadius: "".concat(size, "px")
+  })));
+}, {});
+var defaultRadiusStyles = (0, _react.css)({
+  borderRadius: '50%'
+});
+var strongOpacityStyles = (0, _react.css)({
+  opacity: 0.3
+});
+var defaultOpacityStyles = (0, _react.css)({
+  opacity: 0.15
+});
 
@@ -41,16 +57,10 @@ /**
  */
-var Skeleton = function Skeleton(_ref2) {
-  var size = _ref2.size,
-    appearance = _ref2.appearance,
-    color = _ref2.color,
-    weight = _ref2.weight;
+var Skeleton = function Skeleton(_ref5) {
+  var size = _ref5.size,
+    appearance = _ref5.appearance,
+    color = _ref5.color,
+    weight = _ref5.weight;
   return (0, _react.jsx)("div", {
-    // TODO: Refactor styles to follow css prop rules
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    css: getStyles({
-      size: size,
-      appearance: appearance,
-      color: color,
-      weight: weight
-    })
+    css: [skeletonStyles, sizeStyles[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' ? radiusStyles[size !== null && size !== void 0 ? size : 'medium'] : defaultRadiusStyles, weight === 'strong' ? strongOpacityStyles : defaultOpacityStyles],
+    style: (0, _defineProperty2.default)({}, _constants.CSS_VAR_AVATAR_BGCOLOR, color !== null && color !== void 0 ? color : 'currentColor')
   });
@@ -57,0 +67,0 @@ };

dist/cjs/Text.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
@@ -8,22 +7,22 @@ value: true
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
-var getStyles = function getStyles(isSecondary, shouldTruncate) {
-  return (0, _react.css)(_objectSpread(_objectSpread({
-    display: 'block',
-    margin: "var(--ds-space-0, 0px)",
-    color: "var(--ds-text, ".concat(_colors.N900, ")")
-  }, shouldTruncate && {
-    overflowX: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  }), isSecondary && {
-    color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
-    fontSize: '0.85em'
-  }));
-};
+/** @jsx jsx */
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 
+var baseStyles = (0, _react.css)({
+  display: 'block',
+  margin: "var(--ds-space-0, 0px)",
+  color: "var(--ds-text, ".concat(_colors.N900, ")")
+});
+var truncateStyles = (0, _react.css)({
+  overflowX: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+var secondaryStyles = (0, _react.css)({
+  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
+  fontSize: '0.85em'
+});
+
 /**
@@ -38,11 +37,7 @@ * __Text__
     shouldTruncate = _ref.shouldTruncate;
-  return (
-    // TODO: Refactor styles to follow css prop rules
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    (0, _react.jsx)("span", {
-      css: getStyles(isSecondary, shouldTruncate)
-    }, children)
-  );
+  return (0, _react.jsx)("span", {
+    css: [baseStyles, isSecondary && secondaryStyles, shouldTruncate && truncateStyles]
+  }, children);
 };
 var _default = Text;
 exports.default = _default;

dist/cjs/version.json

 {
 	"name": "@atlaskit/avatar",
-	"version": "21.3.2",
+	"version": "21.3.3",
 	"sideEffects": false
 }

dist/es2019/Avatar.js

@@ -13,3 +13,3 @@ /** @jsx jsx */
 const packageName = "@atlaskit/avatar";
-const packageVersion = "21.3.2";
+const packageVersion = "21.3.3";
 
@@ -16,0 +16,0 @@ // eslint-disable-next-line @repo/internal/react/consistent-types-definitions

dist/es2019/AvatarImage.js

@@ -17,2 +17,14 @@ /** @jsx jsx */
 });
+const nestedAvatarStyles = Object.entries(AVATAR_SIZES).reduce((styles, [key, size]) => {
+  return {
+    ...styles,
+    [key]: css({
+      // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+      '& svg': {
+        width: `${size}px`,
+        height: `${size}px`
+      }
+    })
+  };
+}, {});
 const avatarImageStyles = css({
@@ -24,2 +36,3 @@ display: 'flex',
 });
+
 /**
@@ -46,11 +59,3 @@ * __Avatar image__
     return jsx("span", {
-      css: [avatarDefaultIconStyles,
-      // TODO: These dynamic SVG styles can't be set in 'style'. On a refactor, use a css custom property to pass down the size
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-      {
-        '& svg': {
-          width: `${AVATAR_SIZES[size]}px`,
-          height: `${AVATAR_SIZES[size]}px`
-        }
-      }]
+      css: [avatarDefaultIconStyles, nestedAvatarStyles[size]]
     }, appearance === 'circle' ? jsx(PersonIcon, {
@@ -57,0 +62,0 @@ label: alt,

dist/es2019/constants.js

@@ -23,2 +23,3 @@ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match, @atlaskit/design-system/no-deprecated-imports
 export const ACTIVE_SCALE_FACTOR = 0.9;
+export const CSS_VAR_AVATAR_BGCOLOR = '--avatar-background-color';
 export const ICON_SIZES = {
@@ -25,0 +26,0 @@ small: 12,

dist/es2019/Skeleton.js

@@ -5,18 +5,37 @@ /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
-import { AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH } from './constants';
-const getStyles = ({
-  size = 'medium',
-  appearance = 'circle',
-  color = 'currentColor',
-  weight = 'normal'
-}) => css({
+import { AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH, CSS_VAR_AVATAR_BGCOLOR } from './constants';
+const skeletonStyles = css({
   display: 'inline-block',
-  width: `${AVATAR_SIZES[size]}px`,
-  height: `${AVATAR_SIZES[size]}px`,
-  backgroundColor: color,
-  border: `${BORDER_WIDTH}px solid transparent`,
-  borderRadius: `${appearance === 'square' ? `${AVATAR_RADIUS[size]}px` : '50%'}`,
-  opacity: `${weight === 'strong' ? 0.3 : 0.15}`
+  backgroundColor: `var(${CSS_VAR_AVATAR_BGCOLOR})`,
+  border: `${BORDER_WIDTH}px solid transparent`
 });
+const sizeStyles = Object.entries(AVATAR_SIZES).reduce((styles, [key, size]) => {
+  return {
+    ...styles,
+    [key]: css({
+      width: `${size}px`,
+      height: `${size}px`
+    })
+  };
+}, {});
 
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+const radiusStyles = Object.entries(AVATAR_RADIUS).reduce((styles, [key, size]) => {
+  return {
+    ...styles,
+    [key]: css({
+      borderRadius: `${size}px`
+    })
+  };
+}, {});
+const defaultRadiusStyles = css({
+  borderRadius: '50%'
+});
+const strongOpacityStyles = css({
+  opacity: 0.3
+});
+const defaultOpacityStyles = css({
+  opacity: 0.15
+});
+
 /**
@@ -36,11 +55,7 @@ * __Skeleton__
 }) => jsx("div", {
-  // TODO: Refactor styles to follow css prop rules
-  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-  css: getStyles({
-    size,
-    appearance,
-    color,
-    weight
-  })
+  css: [skeletonStyles, sizeStyles[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' ? radiusStyles[size !== null && size !== void 0 ? size : 'medium'] : defaultRadiusStyles, weight === 'strong' ? strongOpacityStyles : defaultOpacityStyles],
+  style: {
+    [CSS_VAR_AVATAR_BGCOLOR]: color !== null && color !== void 0 ? color : 'currentColor'
+  }
 });
 export default Skeleton;

dist/es2019/Text.js

@@ -6,16 +6,16 @@ /** @jsx jsx */
 import { N200, N900 } from '@atlaskit/theme/colors';
-const getStyles = (isSecondary, shouldTruncate) => css({
+const baseStyles = css({
   display: 'block',
   margin: "var(--ds-space-0, 0px)",
-  color: `var(--ds-text, ${N900})`,
-  ...(shouldTruncate && {
-    overflowX: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  }),
-  ...(isSecondary && {
-    color: `var(--ds-text-subtlest, ${N200})`,
-    fontSize: '0.85em'
-  })
+  color: `var(--ds-text, ${N900})`
 });
+const truncateStyles = css({
+  overflowX: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+const secondaryStyles = css({
+  color: `var(--ds-text-subtlest, ${N200})`,
+  fontSize: '0.85em'
+});
 
@@ -31,8 +31,5 @@ /**
   shouldTruncate
-}) =>
-// TODO: Refactor styles to follow css prop rules
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-jsx("span", {
-  css: getStyles(isSecondary, shouldTruncate)
+}) => jsx("span", {
+  css: [baseStyles, isSecondary && secondaryStyles, shouldTruncate && truncateStyles]
 }, children);
 export default Text;

dist/es2019/version.json

 {
 	"name": "@atlaskit/avatar",
-	"version": "21.3.2",
+	"version": "21.3.3",
 	"sideEffects": false
 }

dist/esm/Avatar.js

@@ -18,3 +18,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.3.2";
+var packageVersion = "21.3.3";
 
@@ -21,0 +21,0 @@ // eslint-disable-next-line @repo/internal/react/consistent-types-definitions

dist/esm/AvatarImage.js

@@ -0,2 +1,5 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /** @jsx jsx */
@@ -18,2 +21,14 @@ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 });
+var nestedAvatarStyles = Object.entries(AVATAR_SIZES).reduce(function (styles, _ref) {
+  var _ref2 = _slicedToArray(_ref, 2),
+    key = _ref2[0],
+    size = _ref2[1];
+  return _objectSpread(_objectSpread({}, styles), {}, _defineProperty({}, key, css({
+    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    '& svg': {
+      width: "".concat(size, "px"),
+      height: "".concat(size, "px")
+    }
+  })));
+}, {});
 var avatarImageStyles = css({
@@ -25,2 +40,3 @@ display: 'flex',
 });
+
 /**
@@ -31,9 +47,9 @@ * __Avatar image__
  */
-var AvatarImage = function AvatarImage(_ref) {
-  var _ref$alt = _ref.alt,
-    alt = _ref$alt === void 0 ? '' : _ref$alt,
-    src = _ref.src,
-    appearance = _ref.appearance,
-    size = _ref.size,
-    testId = _ref.testId;
+var AvatarImage = function AvatarImage(_ref3) {
+  var _ref3$alt = _ref3.alt,
+    alt = _ref3$alt === void 0 ? '' : _ref3$alt,
+    src = _ref3.src,
+    appearance = _ref3.appearance,
+    size = _ref3.size,
+    testId = _ref3.testId;
   var _useState = useState(false),
@@ -51,11 +67,3 @@ _useState2 = _slicedToArray(_useState, 2),
     return jsx("span", {
-      css: [avatarDefaultIconStyles,
-      // TODO: These dynamic SVG styles can't be set in 'style'. On a refactor, use a css custom property to pass down the size
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-      {
-        '& svg': {
-          width: "".concat(AVATAR_SIZES[size], "px"),
-          height: "".concat(AVATAR_SIZES[size], "px")
-        }
-      }]
+      css: [avatarDefaultIconStyles, nestedAvatarStyles[size]]
     }, appearance === 'circle' ? jsx(PersonIcon, {
@@ -62,0 +70,0 @@ label: alt,

dist/esm/constants.js

@@ -23,2 +23,3 @@ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match, @atlaskit/design-system/no-deprecated-imports
 export var ACTIVE_SCALE_FACTOR = 0.9;
+export var CSS_VAR_AVATAR_BGCOLOR = '--avatar-background-color';
 export var ICON_SIZES = {
@@ -25,0 +26,0 @@ small: 12,

dist/esm/Skeleton.js

@@ -0,1 +1,5 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /** @jsx jsx */
@@ -5,23 +9,37 @@ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import { css, jsx } from '@emotion/react';
-import { AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH } from './constants';
-var getStyles = function getStyles(_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'circle' : _ref$appearance,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'currentColor' : _ref$color,
-    _ref$weight = _ref.weight,
-    weight = _ref$weight === void 0 ? 'normal' : _ref$weight;
-  return css({
-    display: 'inline-block',
-    width: "".concat(AVATAR_SIZES[size], "px"),
-    height: "".concat(AVATAR_SIZES[size], "px"),
-    backgroundColor: color,
-    border: "".concat(BORDER_WIDTH, "px solid transparent"),
-    borderRadius: "".concat(appearance === 'square' ? "".concat(AVATAR_RADIUS[size], "px") : '50%'),
-    opacity: "".concat(weight === 'strong' ? 0.3 : 0.15)
-  });
-};
+import { AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH, CSS_VAR_AVATAR_BGCOLOR } from './constants';
+var skeletonStyles = css({
+  display: 'inline-block',
+  backgroundColor: "var(".concat(CSS_VAR_AVATAR_BGCOLOR, ")"),
+  border: "".concat(BORDER_WIDTH, "px solid transparent")
+});
+var sizeStyles = Object.entries(AVATAR_SIZES).reduce(function (styles, _ref) {
+  var _ref2 = _slicedToArray(_ref, 2),
+    key = _ref2[0],
+    size = _ref2[1];
+  return _objectSpread(_objectSpread({}, styles), {}, _defineProperty({}, key, css({
+    width: "".concat(size, "px"),
+    height: "".concat(size, "px")
+  })));
+}, {});
 
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+var radiusStyles = Object.entries(AVATAR_RADIUS).reduce(function (styles, _ref3) {
+  var _ref4 = _slicedToArray(_ref3, 2),
+    key = _ref4[0],
+    size = _ref4[1];
+  return _objectSpread(_objectSpread({}, styles), {}, _defineProperty({}, key, css({
+    borderRadius: "".concat(size, "px")
+  })));
+}, {});
+var defaultRadiusStyles = css({
+  borderRadius: '50%'
+});
+var strongOpacityStyles = css({
+  opacity: 0.3
+});
+var defaultOpacityStyles = css({
+  opacity: 0.15
+});
+
 /**
@@ -35,18 +53,12 @@ * __Skeleton__
  */
-var Skeleton = function Skeleton(_ref2) {
-  var size = _ref2.size,
-    appearance = _ref2.appearance,
-    color = _ref2.color,
-    weight = _ref2.weight;
+var Skeleton = function Skeleton(_ref5) {
+  var size = _ref5.size,
+    appearance = _ref5.appearance,
+    color = _ref5.color,
+    weight = _ref5.weight;
   return jsx("div", {
-    // TODO: Refactor styles to follow css prop rules
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    css: getStyles({
-      size: size,
-      appearance: appearance,
-      color: color,
-      weight: weight
-    })
+    css: [skeletonStyles, sizeStyles[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' ? radiusStyles[size !== null && size !== void 0 ? size : 'medium'] : defaultRadiusStyles, weight === 'strong' ? strongOpacityStyles : defaultOpacityStyles],
+    style: _defineProperty({}, CSS_VAR_AVATAR_BGCOLOR, color !== null && color !== void 0 ? color : 'currentColor')
   });
 };
 export default Skeleton;

dist/esm/Text.js

@@ -1,4 +0,1 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /** @jsx jsx */
@@ -9,16 +6,16 @@ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import { N200, N900 } from '@atlaskit/theme/colors';
-var getStyles = function getStyles(isSecondary, shouldTruncate) {
-  return css(_objectSpread(_objectSpread({
-    display: 'block',
-    margin: "var(--ds-space-0, 0px)",
-    color: "var(--ds-text, ".concat(N900, ")")
-  }, shouldTruncate && {
-    overflowX: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  }), isSecondary && {
-    color: "var(--ds-text-subtlest, ".concat(N200, ")"),
-    fontSize: '0.85em'
-  }));
-};
+var baseStyles = css({
+  display: 'block',
+  margin: "var(--ds-space-0, 0px)",
+  color: "var(--ds-text, ".concat(N900, ")")
+});
+var truncateStyles = css({
+  overflowX: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+var secondaryStyles = css({
+  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
+  fontSize: '0.85em'
+});
 
@@ -34,10 +31,6 @@ /**
     shouldTruncate = _ref.shouldTruncate;
-  return (
-    // TODO: Refactor styles to follow css prop rules
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    jsx("span", {
-      css: getStyles(isSecondary, shouldTruncate)
-    }, children)
-  );
+  return jsx("span", {
+    css: [baseStyles, isSecondary && secondaryStyles, shouldTruncate && truncateStyles]
+  }, children);
 };
 export default Text;

dist/esm/version.json

 {
 	"name": "@atlaskit/avatar",
-	"version": "21.3.2",
+	"version": "21.3.3",
 	"sideEffects": false
 }

dist/types-ts4.5/constants.d.ts

@@ -6,3 +6,4 @@ import { AvatarSizeMap, IndicatorSizeType } from './types';
 export declare const ACTIVE_SCALE_FACTOR = 0.9;
+export declare const CSS_VAR_AVATAR_BGCOLOR = "--avatar-background-color";
 export declare const ICON_SIZES: Record<IndicatorSizeType, number>;
 export declare const ICON_OFFSET: Record<IndicatorSizeType, number>;

dist/types/constants.d.ts

@@ -6,3 +6,4 @@ import { AvatarSizeMap, IndicatorSizeType } from './types';
 export declare const ACTIVE_SCALE_FACTOR = 0.9;
+export declare const CSS_VAR_AVATAR_BGCOLOR = "--avatar-background-color";
 export declare const ICON_SIZES: Record<IndicatorSizeType, number>;
 export declare const ICON_OFFSET: Record<IndicatorSizeType, number>;

package.json

 {
   "name": "@atlaskit/avatar",
-  "version": "21.3.2",
+  "version": "21.3.3",
   "description": "An avatar is a visual representation of a user or entity.",
@@ -27,3 +27,3 @@ "publishConfig": {
     "team": "Design System Team",
-    "releaseModel": "scheduled",
+    "releaseModel": "continuous",
     "website": {
@@ -47,3 +47,3 @@ "name": "Avatar",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.5.0",
     "@babel/runtime": "^7.0.0",
@@ -73,2 +73,3 @@ "@emotion/react": "^11.7.1",
     "color-contrast-checker": "^1.5.0",
+    "jest-axe": "^4.0.0",
     "jscodeshift": "^0.13.0",
@@ -75,0 +76,0 @@ "react-dom": "^16.8.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

237555

increased by3.69%

Number of package files

110

increased by0.92%

Lines of code

4435

increased by4.4%

Worsened metrics

Dev dependency count

21

increased by5%

Dependency changes

• Updated@atlaskit/tokens@^1.5.0