@atlaskit/avatar 21.3.2 → 21.3.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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
 
 ### Patch Changes

package/dist/cjs/Avatar.js

@@ -22,7 +22,7 @@ var _templateObject;
 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; }
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.3.2";
+var packageVersion = "21.3.3";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 

package/dist/cjs/AvatarImage.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
@@ -12,9 +13,8 @@ var _person = _interopRequireDefault(require("@atlaskit/icon/glyph/person"));
 var _ship = _interopRequireDefault(require("@atlaskit/icon/glyph/ship"));
 var _colors = require("@atlaskit/theme/colors");
 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)(), ")");
 exports.ICON_BACKGROUND = ICON_BACKGROUND;
 var ICON_COLOR = "var(--ds-icon-subtle, ".concat(_colors.N90, ")");
@@ -25,24 +25,37 @@ var avatarDefaultIconStyles = (0, _react2.css)({
   height: '100%',
   backgroundColor: ICON_COLOR
 });
+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)({
   display: 'flex',
   width: '100%',
   height: '100%',
   flex: '1 1 100%'
 });
+
 /**
  * __Avatar image__
  *
  * An avatar image is an internal component used to control the rendering phases of an 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),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     hasImageErrored = _useState2[0],
@@ -55,15 +68,7 @@ var AvatarImage = function AvatarImage(_ref) {
   }, [src]);
   if (!src || hasImageErrored) {
     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, {
       label: alt,
       primaryColor: ICON_BACKGROUND,

package/dist/cjs/Skeleton.js

@@ -1,33 +1,49 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   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
+});
 
 /**
  * __Skeleton__
@@ -37,20 +53,14 @@ var getStyles = function getStyles(_ref) {
  * - [Examples](https://atlassian.design/components/avatar/avatar-skeleton/examples)
  * - [Code](https://atlassian.design/components/avatar/avatar-skeleton/code)
  */
-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')
   });
 };
 var _default = Skeleton;

package/dist/cjs/Text.js

@@ -1,29 +1,28 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   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'
+});
 
 /**
  * __Text__
@@ -34,13 +33,9 @@ var Text = function Text(_ref) {
   var isSecondary = _ref.isSecondary,
     children = _ref.children,
     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;

package/dist/cjs/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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");
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match, @atlaskit/design-system/no-deprecated-imports
 
@@ -31,6 +31,8 @@ var BORDER_WIDTH = 2;
 exports.BORDER_WIDTH = BORDER_WIDTH;
 var ACTIVE_SCALE_FACTOR = 0.9;
 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 = {
   small: 12,
   medium: 14,

package/dist/cjs/version.json

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

package/dist/es2019/Avatar.js

@@ -10,7 +10,7 @@ import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 const packageName = "@atlaskit/avatar";
-const packageVersion = "21.3.2";
+const packageVersion = "21.3.3";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 

package/dist/es2019/AvatarImage.js

@@ -14,12 +14,25 @@ const avatarDefaultIconStyles = css({
   height: '100%',
   backgroundColor: ICON_COLOR
 });
+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({
   display: 'flex',
   width: '100%',
   height: '100%',
   flex: '1 1 100%'
 });
+
 /**
  * __Avatar image__
  *
@@ -41,15 +54,7 @@ const AvatarImage = ({
   }, [src]);
   if (!src || hasImageErrored) {
     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, {
       label: alt,
       primaryColor: ICON_BACKGROUND,

package/dist/es2019/Skeleton.js

@@ -2,20 +2,39 @@
 // 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';
-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
 });
 
 /**
@@ -32,13 +51,9 @@ const Skeleton = ({
   color,
   weight
 }) => 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;

package/dist/es2019/Text.js

@@ -3,19 +3,19 @@
 
 import { css, jsx } from '@emotion/react';
 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'
 });
 
 /**
@@ -27,10 +27,7 @@ const Text = ({
   isSecondary,
   children,
   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;

package/dist/es2019/constants.js

@@ -20,6 +20,7 @@ export const AVATAR_RADIUS = {
 };
 export const BORDER_WIDTH = 2;
 export const ACTIVE_SCALE_FACTOR = 0.9;
+export const CSS_VAR_AVATAR_BGCOLOR = '--avatar-background-color';
 export const ICON_SIZES = {
   small: 12,
   medium: 14,

package/dist/es2019/version.json

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

package/dist/esm/Avatar.js

@@ -15,7 +15,7 @@ import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.3.2";
+var packageVersion = "21.3.3";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 

package/dist/esm/AvatarImage.js

@@ -1,4 +1,7 @@
+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 */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import { useEffect, useState } from 'react';
@@ -15,24 +18,37 @@ var avatarDefaultIconStyles = css({
   height: '100%',
   backgroundColor: ICON_COLOR
 });
+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({
   display: 'flex',
   width: '100%',
   height: '100%',
   flex: '1 1 100%'
 });
+
 /**
  * __Avatar image__
  *
  * An avatar image is an internal component used to control the rendering phases of an 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),
     _useState2 = _slicedToArray(_useState, 2),
     hasImageErrored = _useState2[0],
@@ -45,15 +61,7 @@ var AvatarImage = function AvatarImage(_ref) {
   }, [src]);
   if (!src || hasImageErrored) {
     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, {
       label: alt,
       primaryColor: ICON_BACKGROUND,

package/dist/esm/Skeleton.js

@@ -1,27 +1,45 @@
+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 */
 // 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
+});
 
 /**
  * __Skeleton__
@@ -31,20 +49,14 @@ var getStyles = function getStyles(_ref) {
  * - [Examples](https://atlassian.design/components/avatar/avatar-skeleton/examples)
  * - [Code](https://atlassian.design/components/avatar/avatar-skeleton/code)
  */
-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;

package/dist/esm/Text.js

@@ -1,25 +1,22 @@
-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 */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 
 import { css, jsx } from '@emotion/react';
 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'
+});
 
 /**
  * __Text__
@@ -30,12 +27,8 @@ var Text = function Text(_ref) {
   var isSecondary = _ref.isSecondary,
     children = _ref.children,
     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;

package/dist/esm/constants.js

@@ -20,6 +20,7 @@ export var AVATAR_RADIUS = {
 };
 export var BORDER_WIDTH = 2;
 export var ACTIVE_SCALE_FACTOR = 0.9;
+export var CSS_VAR_AVATAR_BGCOLOR = '--avatar-background-color';
 export var ICON_SIZES = {
   small: 12,
   medium: 14,

package/dist/esm/version.json

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

package/dist/types/constants.d.ts

@@ -3,5 +3,6 @@ export declare const AVATAR_SIZES: AvatarSizeMap;
 export declare const AVATAR_RADIUS: AvatarSizeMap;
 export declare const BORDER_WIDTH = 2;
 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/dist/types-ts4.5/constants.d.ts

@@ -3,5 +3,6 @@ export declare const AVATAR_SIZES: AvatarSizeMap;
 export declare const AVATAR_RADIUS: AvatarSizeMap;
 export declare const BORDER_WIDTH = 2;
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/avatar",
-  "version": "21.3.2",
+  "version": "21.3.3",
   "description": "An avatar is a visual representation of a user or entity.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,7 +24,7 @@
   "atlaskit:src": "src/index.ts",
   "atlassian": {
     "team": "Design System Team",
-    "releaseModel": "scheduled",
+    "releaseModel": "continuous",
     "website": {
       "name": "Avatar",
       "category": "Components"
@@ -43,7 +43,7 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.5.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0"
@@ -68,6 +68,7 @@
     "@testing-library/react": "^12.1.5",
     "@types/jscodeshift": "^0.11.0",
     "color-contrast-checker": "^1.5.0",
+    "jest-axe": "^4.0.0",
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
     "typescript": "~4.9.5",

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,170 @@
+## API Report File for "@atlaskit/avatar"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+/// <reference types="react" />
+
+import { FC } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { MouseEventHandler } from 'react';
+import { ReactNode } from 'react';
+import { Ref } from 'react';
+import { RefAttributes } from 'react';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+
+// @public (undocumented)
+export const ACTIVE_SCALE_FACTOR = 0.9;
+
+// @public (undocumented)
+export type AppearanceType = 'circle' | 'square';
+
+// @public
+const Avatar: ForwardRefExoticComponent<AvatarPropTypes & RefAttributes<HTMLElement>>;
+export default Avatar;
+
+// @public (undocumented)
+export const AVATAR_RADIUS: AvatarSizeMap;
+
+// @public (undocumented)
+export const AVATAR_SIZES: AvatarSizeMap;
+
+// @public (undocumented)
+export type AvatarClickEventHandler = (event: React.MouseEvent, analyticsEvent?: UIAnalyticsEvent) => void;
+
+// @public
+export const AvatarItem: ForwardRefExoticComponent<AvatarItemProps & RefAttributes<HTMLElement>>;
+
+// @public (undocumented)
+export interface AvatarItemProps {
+    avatar: ReactNode;
+    backgroundColor?: string;
+    children?: (props: CustomAvatarItemProps) => ReactNode;
+    href?: string;
+    isDisabled?: boolean;
+    isTruncationDisabled?: boolean;
+    label?: string;
+    onClick?: AvatarClickEventHandler;
+    primaryText?: ReactNode;
+    secondaryText?: ReactNode;
+    target?: '_blank' | '_parent' | '_self' | '_top';
+    testId?: string;
+}
+
+// @public (undocumented)
+export interface AvatarPropTypes {
+    analyticsContext?: Record<string, any>;
+    appearance?: AppearanceType;
+    borderColor?: string;
+    children?: (props: CustomAvatarProps) => ReactNode;
+    href?: string;
+    isDisabled?: boolean;
+    label?: string;
+    name?: string;
+    onClick?: AvatarClickEventHandler;
+    presence?: ('busy' | 'focus' | 'offline' | 'online') | ReactNode;
+    size?: SizeType;
+    src?: string;
+    stackIndex?: number;
+    status?: ('approved' | 'declined' | 'locked') | ReactNode;
+    tabIndex?: number;
+    target?: '_blank' | '_parent' | '_self' | '_top';
+    testId?: string;
+}
+
+// @public (undocumented)
+type AvatarSizeMap = Record<SizeType, number>;
+
+// @public (undocumented)
+export const BORDER_WIDTH = 2;
+
+// @public (undocumented)
+export interface CustomAvatarItemProps {
+    // (undocumented)
+    'aria-disabled'?: 'false' | 'true' | boolean | undefined;
+    'aria-label'?: string;
+    // (undocumented)
+    children: ReactNode;
+    // (undocumented)
+    className?: string;
+    // (undocumented)
+    href?: string;
+    // (undocumented)
+    onClick?: MouseEventHandler;
+    // (undocumented)
+    ref: Ref<HTMLElement>;
+    // (undocumented)
+    testId?: string;
+}
+
+// @public (undocumented)
+export interface CustomAvatarProps {
+    'aria-label'?: string;
+    // (undocumented)
+    children: ReactNode;
+    // (undocumented)
+    className?: string;
+    // (undocumented)
+    href?: string;
+    // (undocumented)
+    onClick?: MouseEventHandler;
+    // (undocumented)
+    ref: Ref<HTMLElement>;
+    // (undocumented)
+    tabIndex?: number;
+    // (undocumented)
+    testId?: string;
+}
+
+// @public (undocumented)
+export type IndicatorSizeType = 'large' | 'medium' | 'small' | 'xlarge';
+
+// @public
+export const Presence: FC<PresenceProps>;
+
+// @public (undocumented)
+export interface PresenceProps {
+    borderColor?: string;
+    children?: ReactNode;
+    presence?: PresenceType;
+    testId?: string;
+}
+
+// @public (undocumented)
+export type PresenceType = 'busy' | 'focus' | 'offline' | 'online' | ReactNode;
+
+// @public (undocumented)
+export type SizeType = 'large' | 'medium' | 'small' | 'xlarge' | 'xsmall' | 'xxlarge';
+
+// @public
+export const Skeleton: FC<SkeletonProps>;
+
+// @public (undocumented)
+export interface SkeletonProps {
+    // (undocumented)
+    appearance?: AppearanceType;
+    // (undocumented)
+    color?: string;
+    // (undocumented)
+    size?: SizeType;
+    // (undocumented)
+    weight?: 'normal' | 'strong';
+}
+
+// @public
+export const Status: FC<StatusProps>;
+
+// @public (undocumented)
+export interface StatusProps {
+    borderColor?: string;
+    children?: ReactNode;
+    status?: StatusType;
+}
+
+// @public (undocumented)
+export type StatusType = ('approved' | 'declined' | 'locked') | ReactNode;
+
+// (No @packageDocumentation comment for this package)
+
+```