@atlaskit/avatar 21.4.4 → 21.4.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/avatar
 
+## 21.4.6
+
+### Patch Changes
+
+- [#70213](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70213) [`31068e587071`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/31068e587071) - [ux] Removes decorative images of presence and status from view of assistive technologies. The presence and status are announced as part of the labeling of the parent component and therefore no longer necessary.
+
+## 21.4.5
+
+### Patch Changes
+
+- [#67339](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67339) [`33c37b4c2c1e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/33c37b4c2c1e) - [ux] Remove nested images introduced in 21.4.3
+
 ## 21.4.4
 
 ### Patch Changes

package/dist/cjs/Avatar.js

@@ -23,7 +23,7 @@ var _templateObject;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.4.4";
+var packageVersion = "21.4.6";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
@@ -42,13 +42,11 @@ var getStyles = function getStyles(css, _ref) {
 };
 
 /**
- * __Avatar__
- *
  * An avatar is a visual representation of a user or entity.
  *
  * - [Examples](https://atlassian.design/components/avatar/examples)
  * - [Code](https://atlassian.design/components/avatar/code)
- * - [Usage](https://atlassian.design/components/avatar/usage)
+ * - [Usage](https://atlassian.design/components/avatar/usage).
  */
 var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   var analyticsContext = _ref2.analyticsContext,
@@ -107,7 +105,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     analyticsEvent.context.push(context);
 
     /**
-     * Replicating the logic in the `withAnalyticsEvents` HOC
+     * Replicating the logic in the `withAnalyticsEvents` HOC.
      */
     var clone = analyticsEvent.clone();
     if (clone) {
@@ -141,10 +139,11 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   // if status or presence are nodes this is not added to the label by default
   var defaultLabel = [name, isStatus && !customStatusNode && "(".concat(status, ")"), isPresence && !customPresenceNode && "(".concat(presence, ")")].filter(Boolean).join(' ');
   var isInteractive = onClick || href || isDisabled;
+  var containerShouldBeImage = Boolean(!isInteractive && defaultLabel);
   return (0, _react2.jsx)(AvatarContainer, {
     "data-testid": testId,
-    role: isInteractive || !defaultLabel ? undefined : 'img',
-    "aria-labelledby": isInteractive || !defaultLabel ? undefined : "".concat(uuid, "-label"),
+    role: containerShouldBeImage ? 'img' : undefined,
+    "aria-labelledby": containerShouldBeImage ? "".concat(uuid, "-label") : undefined,
     style: {
       display: 'inline-block',
       position: 'relative',
@@ -167,10 +166,10 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
       'aria-label': label || defaultLabel
     }), {}, {
       children: (0, _react2.jsx)(_AvatarImage.default
-      // Only pass the name if there is an image provided. We want the
-      // icons to be presentational if they don't show anything important.
+      // Only pass in the name if an image is provded and the
+      // container is not being used as an `img` role
       , {
-        alt: src ? name : undefined,
+        alt: !containerShouldBeImage && src ? name : undefined,
         appearance: appearance,
         size: size,
         src: src,
@@ -190,7 +189,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     borderColor: borderColor,
     status: typeof status === 'string' ? status : undefined,
     testId: testId
-  }, customStatusNode), !isInteractive && defaultLabel ? (0, _react2.jsx)("span", {
+  }, customStatusNode), containerShouldBeImage ? (0, _react2.jsx)("span", {
     id: "".concat(uuid, "-label"),
     hidden: true
   }, defaultLabel) : undefined);

package/dist/cjs/AvatarImage.js

@@ -59,6 +59,7 @@ var AvatarImage = function AvatarImage(_ref3) {
     hasImageErrored = _useState2[0],
     setHasImageErrored = _useState2[1];
   var borderRadius = appearance === 'circle' ? '50%' : "".concat(_constants.AVATAR_RADIUS[size], "px");
+  var isHidden = !alt ? true : undefined;
 
   // If src changes, reset state
   (0, _react.useEffect)(function () {
@@ -71,12 +72,14 @@ var AvatarImage = function AvatarImage(_ref3) {
       label: alt,
       primaryColor: ICON_BACKGROUND,
       secondaryColor: ICON_COLOR,
-      testId: testId && "".concat(testId, "--person")
+      testId: testId && "".concat(testId, "--person"),
+      "aria-hidden": isHidden
     }) : (0, _react2.jsx)(_ship.default, {
       label: alt,
       primaryColor: ICON_BACKGROUND,
       secondaryColor: ICON_COLOR,
-      testId: testId && "".concat(testId, "--ship")
+      testId: testId && "".concat(testId, "--ship"),
+      "aria-hidden": isHidden
     }));
   }
   return (0, _react2.jsx)("img", {
@@ -89,7 +92,8 @@ var AvatarImage = function AvatarImage(_ref3) {
     },
     onError: function onError() {
       return setHasImageErrored(true);
-    }
+    },
+    "aria-hidden": isHidden
   });
 };
 var _default = exports.default = AvatarImage;

package/dist/cjs/Presence.js

@@ -54,13 +54,11 @@ function getPresence(presence) {
 }
 
 /**
- * __Avatar presence__
- *
  * A presence shows an avatar’s availability.
  *
  * - [Examples](https://atlassian.design/components/avatar/avatar-presence/examples)
  * - [Code](https://atlassian.design/components/avatar/avatar-presence/code)
- * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage)
+ * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage).
  */
 var AvatarPresence = function AvatarPresence(_ref) {
   var borderColor = _ref.borderColor,
@@ -78,8 +76,6 @@ var AvatarPresence = function AvatarPresence(_ref) {
 };
 var _default = exports.default = AvatarPresence;
 /**
- * __Presence wrapper__
- *
  * A presence wrapper is used internally to position presence ontop of the avatar.
  */
 var PresenceWrapper = exports.PresenceWrapper = function PresenceWrapper(_ref2) {
@@ -91,6 +87,7 @@ var PresenceWrapper = exports.PresenceWrapper = function PresenceWrapper(_ref2)
     testId = _ref2.testId;
   var position = appearance === 'square' ? -4 : _constants.ICON_OFFSET[size];
   return /*#__PURE__*/_react.default.createElement("span", {
+    "aria-hidden": "true",
     "data-testid": testId && "".concat(testId, "--presence"),
     style: {
       pointerEvents: 'none',

package/dist/cjs/Status.js

@@ -53,12 +53,10 @@ function getStatus(status) {
 }
 
 /**
- * __Avatar status__
- *
  * An avatar status shows contextual information, such as if someone approves or declines something.
  *
  * - [Examples](https://atlassian.design/components/avatar/avatar-status/examples)
- * - [Code](https://atlassian.design/components/avatar/avatar-status/code)
+ * - [Code](https://atlassian.design/components/avatar/avatar-status/code).
  */
 var AvatarStatus = function AvatarStatus(_ref) {
   var borderColor = _ref.borderColor,
@@ -76,9 +74,7 @@ var AvatarStatus = function AvatarStatus(_ref) {
 };
 var _default = exports.default = AvatarStatus;
 /**
- * Status wrapper**
- *
- * A status wrapper is used internally to position status ontop of the avatar.
+ * A status wrapper is used internally to position status on top of the avatar.
  */
 var StatusWrapper = exports.StatusWrapper = function StatusWrapper(_ref2) {
   var size = _ref2.size,
@@ -89,6 +85,7 @@ var StatusWrapper = exports.StatusWrapper = function StatusWrapper(_ref2) {
     testId = _ref2.testId;
   var position = appearance === 'square' ? 0 : _constants.ICON_OFFSET[size];
   return /*#__PURE__*/_react.default.createElement("span", {
+    "aria-hidden": "true",
     "data-testid": testId && "".concat(testId, "--status"),
     style: {
       position: 'absolute',

package/dist/es2019/Avatar.js

@@ -11,7 +11,7 @@ import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 const packageName = "@atlaskit/avatar";
-const packageVersion = "21.4.4";
+const packageVersion = "21.4.6";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
@@ -117,13 +117,11 @@ css`
   `;
 
 /**
- * __Avatar__
- *
  * An avatar is a visual representation of a user or entity.
  *
  * - [Examples](https://atlassian.design/components/avatar/examples)
  * - [Code](https://atlassian.design/components/avatar/code)
- * - [Usage](https://atlassian.design/components/avatar/usage)
+ * - [Usage](https://atlassian.design/components/avatar/usage).
  */
 const Avatar = /*#__PURE__*/forwardRef(({
   analyticsContext,
@@ -182,7 +180,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
     analyticsEvent.context.push(context);
 
     /**
-     * Replicating the logic in the `withAnalyticsEvents` HOC
+     * Replicating the logic in the `withAnalyticsEvents` HOC.
      */
     const clone = analyticsEvent.clone();
     if (clone) {
@@ -217,10 +215,11 @@ const Avatar = /*#__PURE__*/forwardRef(({
   // if status or presence are nodes this is not added to the label by default
   const defaultLabel = [name, isStatus && !customStatusNode && `(${status})`, isPresence && !customPresenceNode && `(${presence})`].filter(Boolean).join(' ');
   const isInteractive = onClick || href || isDisabled;
+  const containerShouldBeImage = Boolean(!isInteractive && defaultLabel);
   return jsx(AvatarContainer, {
     "data-testid": testId,
-    role: isInteractive || !defaultLabel ? undefined : 'img',
-    "aria-labelledby": isInteractive || !defaultLabel ? undefined : `${uuid}-label`,
+    role: containerShouldBeImage ? 'img' : undefined,
+    "aria-labelledby": containerShouldBeImage ? `${uuid}-label` : undefined,
     style: {
       display: 'inline-block',
       position: 'relative',
@@ -246,10 +245,10 @@ const Avatar = /*#__PURE__*/forwardRef(({
         'aria-label': label || defaultLabel
       }),
       children: jsx(AvatarImage
-      // Only pass the name if there is an image provided. We want the
-      // icons to be presentational if they don't show anything important.
+      // Only pass in the name if an image is provded and the
+      // container is not being used as an `img` role
       , {
-        alt: src ? name : undefined,
+        alt: !containerShouldBeImage && src ? name : undefined,
         appearance: appearance,
         size: size,
         src: src,
@@ -269,7 +268,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
     borderColor: borderColor,
     status: typeof status === 'string' ? status : undefined,
     testId: testId
-  }, customStatusNode), !isInteractive && defaultLabel ? jsx("span", {
+  }, customStatusNode), containerShouldBeImage ? jsx("span", {
     id: `${uuid}-label`,
     hidden: true
   }, defaultLabel) : undefined);

package/dist/es2019/AvatarImage.js

@@ -47,6 +47,7 @@ const AvatarImage = ({
 }) => {
   const [hasImageErrored, setHasImageErrored] = useState(false);
   const borderRadius = appearance === 'circle' ? '50%' : `${AVATAR_RADIUS[size]}px`;
+  const isHidden = !alt ? true : undefined;
 
   // If src changes, reset state
   useEffect(() => {
@@ -59,12 +60,14 @@ const AvatarImage = ({
       label: alt,
       primaryColor: ICON_BACKGROUND,
       secondaryColor: ICON_COLOR,
-      testId: testId && `${testId}--person`
+      testId: testId && `${testId}--person`,
+      "aria-hidden": isHidden
     }) : jsx(ShipIcon, {
       label: alt,
       primaryColor: ICON_BACKGROUND,
       secondaryColor: ICON_COLOR,
-      testId: testId && `${testId}--ship`
+      testId: testId && `${testId}--ship`,
+      "aria-hidden": isHidden
     }));
   }
   return jsx("img", {
@@ -75,7 +78,8 @@ const AvatarImage = ({
     style: {
       borderRadius: borderRadius
     },
-    onError: () => setHasImageErrored(true)
+    onError: () => setHasImageErrored(true),
+    "aria-hidden": isHidden
   });
 };
 export default AvatarImage;

package/dist/es2019/Presence.js

@@ -43,13 +43,11 @@ function getPresence(presence) {
 }
 
 /**
- * __Avatar presence__
- *
  * A presence shows an avatar’s availability.
  *
  * - [Examples](https://atlassian.design/components/avatar/avatar-presence/examples)
  * - [Code](https://atlassian.design/components/avatar/avatar-presence/code)
- * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage)
+ * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage).
  */
 const AvatarPresence = ({
   borderColor,
@@ -66,8 +64,6 @@ const AvatarPresence = ({
 }, getPresence(presence)) : children);
 export default AvatarPresence;
 /**
- * __Presence wrapper__
- *
  * A presence wrapper is used internally to position presence ontop of the avatar.
  */
 export const PresenceWrapper = ({
@@ -80,6 +76,7 @@ export const PresenceWrapper = ({
 }) => {
   const position = appearance === 'square' ? -4 : ICON_OFFSET[size];
   return /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true",
     "data-testid": testId && `${testId}--presence`,
     style: {
       pointerEvents: 'none',

package/dist/es2019/Status.js

@@ -42,12 +42,10 @@ function getStatus(status) {
 }
 
 /**
- * __Avatar status__
- *
  * An avatar status shows contextual information, such as if someone approves or declines something.
  *
  * - [Examples](https://atlassian.design/components/avatar/avatar-status/examples)
- * - [Code](https://atlassian.design/components/avatar/avatar-status/code)
+ * - [Code](https://atlassian.design/components/avatar/avatar-status/code).
  */
 const AvatarStatus = ({
   borderColor,
@@ -64,9 +62,7 @@ const AvatarStatus = ({
 }, getStatus(status)) : children);
 export default AvatarStatus;
 /**
- * Status wrapper**
- *
- * A status wrapper is used internally to position status ontop of the avatar.
+ * A status wrapper is used internally to position status on top of the avatar.
  */
 export const StatusWrapper = ({
   size,
@@ -78,6 +74,7 @@ export const StatusWrapper = ({
 }) => {
   const position = appearance === 'square' ? 0 : ICON_OFFSET[size];
   return /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true",
     "data-testid": testId && `${testId}--status`,
     style: {
       position: 'absolute',

package/dist/esm/Avatar.js

@@ -16,7 +16,7 @@ import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.4.4";
+var packageVersion = "21.4.6";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
@@ -35,13 +35,11 @@ var getStyles = function getStyles(css, _ref) {
 };
 
 /**
- * __Avatar__
- *
  * An avatar is a visual representation of a user or entity.
  *
  * - [Examples](https://atlassian.design/components/avatar/examples)
  * - [Code](https://atlassian.design/components/avatar/code)
- * - [Usage](https://atlassian.design/components/avatar/usage)
+ * - [Usage](https://atlassian.design/components/avatar/usage).
  */
 var Avatar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var analyticsContext = _ref2.analyticsContext,
@@ -100,7 +98,7 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     analyticsEvent.context.push(context);
 
     /**
-     * Replicating the logic in the `withAnalyticsEvents` HOC
+     * Replicating the logic in the `withAnalyticsEvents` HOC.
      */
     var clone = analyticsEvent.clone();
     if (clone) {
@@ -134,10 +132,11 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   // if status or presence are nodes this is not added to the label by default
   var defaultLabel = [name, isStatus && !customStatusNode && "(".concat(status, ")"), isPresence && !customPresenceNode && "(".concat(presence, ")")].filter(Boolean).join(' ');
   var isInteractive = onClick || href || isDisabled;
+  var containerShouldBeImage = Boolean(!isInteractive && defaultLabel);
   return jsx(AvatarContainer, {
     "data-testid": testId,
-    role: isInteractive || !defaultLabel ? undefined : 'img',
-    "aria-labelledby": isInteractive || !defaultLabel ? undefined : "".concat(uuid, "-label"),
+    role: containerShouldBeImage ? 'img' : undefined,
+    "aria-labelledby": containerShouldBeImage ? "".concat(uuid, "-label") : undefined,
     style: {
       display: 'inline-block',
       position: 'relative',
@@ -160,10 +159,10 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       'aria-label': label || defaultLabel
     }), {}, {
       children: jsx(AvatarImage
-      // Only pass the name if there is an image provided. We want the
-      // icons to be presentational if they don't show anything important.
+      // Only pass in the name if an image is provded and the
+      // container is not being used as an `img` role
       , {
-        alt: src ? name : undefined,
+        alt: !containerShouldBeImage && src ? name : undefined,
         appearance: appearance,
         size: size,
         src: src,
@@ -183,7 +182,7 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     borderColor: borderColor,
     status: typeof status === 'string' ? status : undefined,
     testId: testId
-  }, customStatusNode), !isInteractive && defaultLabel ? jsx("span", {
+  }, customStatusNode), containerShouldBeImage ? jsx("span", {
     id: "".concat(uuid, "-label"),
     hidden: true
   }, defaultLabel) : undefined);

package/dist/esm/AvatarImage.js

@@ -54,6 +54,7 @@ var AvatarImage = function AvatarImage(_ref3) {
     hasImageErrored = _useState2[0],
     setHasImageErrored = _useState2[1];
   var borderRadius = appearance === 'circle' ? '50%' : "".concat(AVATAR_RADIUS[size], "px");
+  var isHidden = !alt ? true : undefined;
 
   // If src changes, reset state
   useEffect(function () {
@@ -66,12 +67,14 @@ var AvatarImage = function AvatarImage(_ref3) {
       label: alt,
       primaryColor: ICON_BACKGROUND,
       secondaryColor: ICON_COLOR,
-      testId: testId && "".concat(testId, "--person")
+      testId: testId && "".concat(testId, "--person"),
+      "aria-hidden": isHidden
     }) : jsx(ShipIcon, {
       label: alt,
       primaryColor: ICON_BACKGROUND,
       secondaryColor: ICON_COLOR,
-      testId: testId && "".concat(testId, "--ship")
+      testId: testId && "".concat(testId, "--ship"),
+      "aria-hidden": isHidden
     }));
   }
   return jsx("img", {
@@ -84,7 +87,8 @@ var AvatarImage = function AvatarImage(_ref3) {
     },
     onError: function onError() {
       return setHasImageErrored(true);
-    }
+    },
+    "aria-hidden": isHidden
   });
 };
 export default AvatarImage;

package/dist/esm/Presence.js

@@ -43,13 +43,11 @@ function getPresence(presence) {
 }
 
 /**
- * __Avatar presence__
- *
  * A presence shows an avatar’s availability.
  *
  * - [Examples](https://atlassian.design/components/avatar/avatar-presence/examples)
  * - [Code](https://atlassian.design/components/avatar/avatar-presence/code)
- * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage)
+ * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage).
  */
 var AvatarPresence = function AvatarPresence(_ref) {
   var borderColor = _ref.borderColor,
@@ -67,8 +65,6 @@ var AvatarPresence = function AvatarPresence(_ref) {
 };
 export default AvatarPresence;
 /**
- * __Presence wrapper__
- *
  * A presence wrapper is used internally to position presence ontop of the avatar.
  */
 export var PresenceWrapper = function PresenceWrapper(_ref2) {
@@ -80,6 +76,7 @@ export var PresenceWrapper = function PresenceWrapper(_ref2) {
     testId = _ref2.testId;
   var position = appearance === 'square' ? -4 : ICON_OFFSET[size];
   return /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true",
     "data-testid": testId && "".concat(testId, "--presence"),
     style: {
       pointerEvents: 'none',

package/dist/esm/Status.js

@@ -42,12 +42,10 @@ function getStatus(status) {
 }
 
 /**
- * __Avatar status__
- *
  * An avatar status shows contextual information, such as if someone approves or declines something.
  *
  * - [Examples](https://atlassian.design/components/avatar/avatar-status/examples)
- * - [Code](https://atlassian.design/components/avatar/avatar-status/code)
+ * - [Code](https://atlassian.design/components/avatar/avatar-status/code).
  */
 var AvatarStatus = function AvatarStatus(_ref) {
   var borderColor = _ref.borderColor,
@@ -65,9 +63,7 @@ var AvatarStatus = function AvatarStatus(_ref) {
 };
 export default AvatarStatus;
 /**
- * Status wrapper**
- *
- * A status wrapper is used internally to position status ontop of the avatar.
+ * A status wrapper is used internally to position status on top of the avatar.
  */
 export var StatusWrapper = function StatusWrapper(_ref2) {
   var size = _ref2.size,
@@ -78,6 +74,7 @@ export var StatusWrapper = function StatusWrapper(_ref2) {
     testId = _ref2.testId;
   var position = appearance === 'square' ? 0 : ICON_OFFSET[size];
   return /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true",
     "data-testid": testId && "".concat(testId, "--status"),
     style: {
       position: 'absolute',

package/dist/types/Avatar.d.ts

@@ -4,7 +4,6 @@ import { AppearanceType, AvatarClickEventHandler, Presence, SizeType, Status } f
 export interface CustomAvatarProps {
     /**
      * This is used in render props so is okay to be defined.
-     * eslint-disable-next-line consistent-props-definitions
      */
     'aria-label'?: string;
     tabIndex?: number;
@@ -99,13 +98,11 @@ export interface AvatarPropTypes {
     as?: keyof JSX.IntrinsicElements | React.ComponentType<React.AllHTMLAttributes<HTMLElement>>;
 }
 /**
- * __Avatar__
- *
  * An avatar is a visual representation of a user or entity.
  *
  * - [Examples](https://atlassian.design/components/avatar/examples)
  * - [Code](https://atlassian.design/components/avatar/code)
- * - [Usage](https://atlassian.design/components/avatar/usage)
+ * - [Usage](https://atlassian.design/components/avatar/usage).
  */
 declare const Avatar: import("react").ForwardRefExoticComponent<AvatarPropTypes & import("react").RefAttributes<HTMLElement>>;
 export default Avatar;

package/dist/types/Presence.d.ts

@@ -12,22 +12,16 @@ export interface PresenceProps {
      */
     children?: ReactNode;
     /**
-     * The type of presence indicator to show
+     * The type of presence indicator to show.
      */
     presence?: Presence;
-    /**
-     * Test Id
-     */
-    testId?: string;
 }
 /**
- * __Avatar presence__
- *
  * A presence shows an avatar’s availability.
  *
  * - [Examples](https://atlassian.design/components/avatar/avatar-presence/examples)
  * - [Code](https://atlassian.design/components/avatar/avatar-presence/code)
- * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage)
+ * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage).
  */
 declare const AvatarPresence: FC<PresenceProps>;
 export default AvatarPresence;
@@ -37,8 +31,6 @@ export interface PresenceWrapperProps extends PresenceProps {
     testId?: string;
 }
 /**
- * __Presence wrapper__
- *
  * A presence wrapper is used internally to position presence ontop of the avatar.
  */
 export declare const PresenceWrapper: FC<PresenceWrapperProps>;

package/dist/types/Skeleton.d.ts

@@ -2,9 +2,21 @@
 import { FC } from 'react';
 import { AppearanceType, SizeType } from './types';
 export interface SkeletonProps {
+    /**
+     * Indicates the shape of the avatar skeleton. Most avatars are circular, but square avatars can be used for container objects.
+     */
     appearance?: AppearanceType;
+    /**
+     * Color of the skeleton. By default, it will inherit the current text color.
+     */
     color?: string;
+    /**
+     * Defines the size of the avatar skeleton.
+     */
     size?: SizeType;
+    /**
+     * Defines the opacity of the avatar skeleton. Use `weight="normal"` for the default opacity, or `weight="strong"` for a bolder opacity.
+     */
     weight?: 'normal' | 'strong';
 }
 /**

package/dist/types/Status.d.ts

@@ -12,30 +12,24 @@ export interface StatusProps {
      */
     children?: ReactNode;
     /**
-     * Content to use as a custom status indicator. Not needed if consuming
-     * `Status` separate to `Avatar`.
+     * The type of status indicator to show.
      */
     status?: Status;
 }
 /**
- * __Avatar status__
- *
  * An avatar status shows contextual information, such as if someone approves or declines something.
  *
  * - [Examples](https://atlassian.design/components/avatar/avatar-status/examples)
- * - [Code](https://atlassian.design/components/avatar/avatar-status/code)
+ * - [Code](https://atlassian.design/components/avatar/avatar-status/code).
  */
 declare const AvatarStatus: FC<StatusProps>;
 export default AvatarStatus;
 interface StatusWrapperProps extends StatusProps {
     appearance: AppearanceType;
     size: IndicatorSizeType;
-    children: ReactNode;
     testId?: string;
 }
 /**
- * Status wrapper**
- *
- * A status wrapper is used internally to position status ontop of the avatar.
+ * A status wrapper is used internally to position status on top of the avatar.
  */
 export declare const StatusWrapper: FC<StatusWrapperProps>;

package/dist/types-ts4.5/Avatar.d.ts

@@ -4,7 +4,6 @@ import { AppearanceType, AvatarClickEventHandler, Presence, SizeType, Status } f
 export interface CustomAvatarProps {
     /**
      * This is used in render props so is okay to be defined.
-     * eslint-disable-next-line consistent-props-definitions
      */
     'aria-label'?: string;
     tabIndex?: number;
@@ -99,13 +98,11 @@ export interface AvatarPropTypes {
     as?: keyof JSX.IntrinsicElements | React.ComponentType<React.AllHTMLAttributes<HTMLElement>>;
 }
 /**
- * __Avatar__
- *
  * An avatar is a visual representation of a user or entity.
  *
  * - [Examples](https://atlassian.design/components/avatar/examples)
  * - [Code](https://atlassian.design/components/avatar/code)
- * - [Usage](https://atlassian.design/components/avatar/usage)
+ * - [Usage](https://atlassian.design/components/avatar/usage).
  */
 declare const Avatar: import("react").ForwardRefExoticComponent<AvatarPropTypes & import("react").RefAttributes<HTMLElement>>;
 export default Avatar;

package/dist/types-ts4.5/Presence.d.ts

@@ -12,22 +12,16 @@ export interface PresenceProps {
      */
     children?: ReactNode;
     /**
-     * The type of presence indicator to show
+     * The type of presence indicator to show.
      */
     presence?: Presence;
-    /**
-     * Test Id
-     */
-    testId?: string;
 }
 /**
- * __Avatar presence__
- *
  * A presence shows an avatar’s availability.
  *
  * - [Examples](https://atlassian.design/components/avatar/avatar-presence/examples)
  * - [Code](https://atlassian.design/components/avatar/avatar-presence/code)
- * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage)
+ * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage).
  */
 declare const AvatarPresence: FC<PresenceProps>;
 export default AvatarPresence;
@@ -37,8 +31,6 @@ export interface PresenceWrapperProps extends PresenceProps {
     testId?: string;
 }
 /**
- * __Presence wrapper__
- *
  * A presence wrapper is used internally to position presence ontop of the avatar.
  */
 export declare const PresenceWrapper: FC<PresenceWrapperProps>;

package/dist/types-ts4.5/Skeleton.d.ts

@@ -2,9 +2,21 @@
 import { FC } from 'react';
 import { AppearanceType, SizeType } from './types';
 export interface SkeletonProps {
+    /**
+     * Indicates the shape of the avatar skeleton. Most avatars are circular, but square avatars can be used for container objects.
+     */
     appearance?: AppearanceType;
+    /**
+     * Color of the skeleton. By default, it will inherit the current text color.
+     */
     color?: string;
+    /**
+     * Defines the size of the avatar skeleton.
+     */
     size?: SizeType;
+    /**
+     * Defines the opacity of the avatar skeleton. Use `weight="normal"` for the default opacity, or `weight="strong"` for a bolder opacity.
+     */
     weight?: 'normal' | 'strong';
 }
 /**

package/dist/types-ts4.5/Status.d.ts

@@ -12,30 +12,24 @@ export interface StatusProps {
      */
     children?: ReactNode;
     /**
-     * Content to use as a custom status indicator. Not needed if consuming
-     * `Status` separate to `Avatar`.
+     * The type of status indicator to show.
      */
     status?: Status;
 }
 /**
- * __Avatar status__
- *
  * An avatar status shows contextual information, such as if someone approves or declines something.
  *
  * - [Examples](https://atlassian.design/components/avatar/avatar-status/examples)
- * - [Code](https://atlassian.design/components/avatar/avatar-status/code)
+ * - [Code](https://atlassian.design/components/avatar/avatar-status/code).
  */
 declare const AvatarStatus: FC<StatusProps>;
 export default AvatarStatus;
 interface StatusWrapperProps extends StatusProps {
     appearance: AppearanceType;
     size: IndicatorSizeType;
-    children: ReactNode;
     testId?: string;
 }
 /**
- * Status wrapper**
- *
- * A status wrapper is used internally to position status ontop of the avatar.
+ * A status wrapper is used internally to position status on top of the avatar.
  */
 export declare const StatusWrapper: FC<StatusWrapperProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/avatar",
-  "version": "21.4.4",
+  "version": "21.4.6",
   "description": "An avatar is a visual representation of a user or entity.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -46,7 +46,7 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.33.0",
+    "@atlaskit/tokens": "^1.35.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0",
@@ -67,6 +67,7 @@
     "@testing-library/react": "^12.1.5",
     "@types/jscodeshift": "^0.11.0",
     "color-contrast-checker": "^1.5.0",
+    "jest-in-case": "^1.0.2",
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
     "typescript": "~4.9.5",