@atlaskit/avatar 21.3.6 → 21.3.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/avatar
 
+## 21.3.8
+
+### Patch Changes
+
+- [`7a3cbead067`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7a3cbead067) - Default content for label
+
+## 21.3.7
+
+### Patch Changes
+
+- [`4ae083a7e66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ae083a7e66) - Use `@af/accessibility-testing` for default jest-axe config and jest-axe import in accessibility testing.
+
 ## 21.3.6
 
 ### 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.6";
+var packageVersion = "21.3.8";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
@@ -130,6 +130,17 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
       onClick: onClick
     });
   };
+  var isPresence = isValidIconSize && presence && !status;
+  var isStatus = isValidIconSize && status;
+
+  // add presence or status to the label by default if presence and status are passed as a string
+  // if status or presence are nodes this is not added to the label by default
+  var generateDefaultLabel = function generateDefaultLabel() {
+    if (!name && !status && !presence) {
+      return;
+    }
+    return "".concat(name || '', " ").concat(isStatus && !customStatusNode ? "(".concat(status, ")") : '', " ").concat(isPresence && !customPresenceNode ? "(".concat(presence, ")") : '');
+  };
   return (0, _react2.jsx)("div", {
     "data-testid": testId,
     style: {
@@ -151,7 +162,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
         isDisabled: isDisabled
       })
     }, componentProps()), testId && getTestId(testId, children)), (onClick || href) && {
-      'aria-label': label
+      'aria-label': label || generateDefaultLabel()
     }), {}, {
       children: (0, _react2.jsx)(_AvatarImage.default, {
         alt: name,
@@ -163,12 +174,12 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
       ref: ref
     });
     return children ? children(props) : /*#__PURE__*/(0, _react.createElement)((0, _utilities.getCustomElement)(isDisabled, href, onClick), props);
-  }), isValidIconSize && presence && !status && (0, _react2.jsx)(_Presence.PresenceWrapper, {
+  }), isPresence && (0, _react2.jsx)(_Presence.PresenceWrapper, {
     appearance: appearance,
     size: size,
     presence: typeof presence === 'string' ? presence : undefined,
     testId: testId
-  }, customPresenceNode), isValidIconSize && status && (0, _react2.jsx)(_Status.StatusWrapper, {
+  }, customPresenceNode), isStatus && (0, _react2.jsx)(_Status.StatusWrapper, {
     appearance: appearance,
     size: size,
     borderColor: borderColor,

package/dist/cjs/AvatarImage.js

@@ -30,7 +30,7 @@ var nestedAvatarStyles = Object.entries(_constants.AVATAR_SIZES).reduce(function
     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
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
     '& svg': {
       width: "".concat(size, "px"),
       height: "".concat(size, "px")

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.6";
+const packageVersion = "21.3.8";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
@@ -207,6 +207,17 @@ const Avatar = /*#__PURE__*/forwardRef(({
       })
     };
   };
+  const isPresence = isValidIconSize && presence && !status;
+  const isStatus = isValidIconSize && status;
+
+  // add presence or status to the label by default if presence and status are passed as a string
+  // if status or presence are nodes this is not added to the label by default
+  const generateDefaultLabel = () => {
+    if (!name && !status && !presence) {
+      return;
+    }
+    return `${name || ''} ${isStatus && !customStatusNode ? `(${status})` : ''} ${isPresence && !customPresenceNode ? `(${presence})` : ''}`;
+  };
   return jsx("div", {
     "data-testid": testId,
     style: {
@@ -231,7 +242,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
       ...componentProps(),
       ...(testId && getTestId(testId, children)),
       ...((onClick || href) && {
-        'aria-label': label
+        'aria-label': label || generateDefaultLabel()
       }),
       children: jsx(AvatarImage, {
         alt: name,
@@ -243,12 +254,12 @@ const Avatar = /*#__PURE__*/forwardRef(({
       ref
     };
     return children ? children(props) : /*#__PURE__*/createElement(getCustomElement(isDisabled, href, onClick), props);
-  }), isValidIconSize && presence && !status && jsx(PresenceWrapper, {
+  }), isPresence && jsx(PresenceWrapper, {
     appearance: appearance,
     size: size,
     presence: typeof presence === 'string' ? presence : undefined,
     testId: testId
-  }, customPresenceNode), isValidIconSize && status && jsx(StatusWrapper, {
+  }, customPresenceNode), isStatus && jsx(StatusWrapper, {
     appearance: appearance,
     size: size,
     borderColor: borderColor,

package/dist/es2019/AvatarImage.js

@@ -18,7 +18,7 @@ const nestedAvatarStyles = Object.entries(AVATAR_SIZES).reduce((styles, [key, si
   return {
     ...styles,
     [key]: css({
-      // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+      // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
       '& svg': {
         width: `${size}px`,
         height: `${size}px`

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.6";
+var packageVersion = "21.3.8";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
@@ -123,6 +123,17 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       onClick: onClick
     });
   };
+  var isPresence = isValidIconSize && presence && !status;
+  var isStatus = isValidIconSize && status;
+
+  // add presence or status to the label by default if presence and status are passed as a string
+  // if status or presence are nodes this is not added to the label by default
+  var generateDefaultLabel = function generateDefaultLabel() {
+    if (!name && !status && !presence) {
+      return;
+    }
+    return "".concat(name || '', " ").concat(isStatus && !customStatusNode ? "(".concat(status, ")") : '', " ").concat(isPresence && !customPresenceNode ? "(".concat(presence, ")") : '');
+  };
   return jsx("div", {
     "data-testid": testId,
     style: {
@@ -144,7 +155,7 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
         isDisabled: isDisabled
       })
     }, componentProps()), testId && getTestId(testId, children)), (onClick || href) && {
-      'aria-label': label
+      'aria-label': label || generateDefaultLabel()
     }), {}, {
       children: jsx(AvatarImage, {
         alt: name,
@@ -156,12 +167,12 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       ref: ref
     });
     return children ? children(props) : /*#__PURE__*/createElement(getCustomElement(isDisabled, href, onClick), props);
-  }), isValidIconSize && presence && !status && jsx(PresenceWrapper, {
+  }), isPresence && jsx(PresenceWrapper, {
     appearance: appearance,
     size: size,
     presence: typeof presence === 'string' ? presence : undefined,
     testId: testId
-  }, customPresenceNode), isValidIconSize && status && jsx(StatusWrapper, {
+  }, customPresenceNode), isStatus && jsx(StatusWrapper, {
     appearance: appearance,
     size: size,
     borderColor: borderColor,

package/dist/esm/AvatarImage.js

@@ -23,7 +23,7 @@ var nestedAvatarStyles = Object.entries(AVATAR_SIZES).reduce(function (styles, _
     key = _ref2[0],
     size = _ref2[1];
   return _objectSpread(_objectSpread({}, styles), {}, _defineProperty({}, key, css({
-    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
     '& svg': {
       width: "".concat(size, "px"),
       height: "".concat(size, "px")

package/dist/types/Avatar.d.ts

@@ -22,9 +22,9 @@ export interface AvatarPropTypes {
      */
     appearance?: AppearanceType;
     /**
-     * Used to provide better content to screen readers when using presence/status. Rather
-     * than a screen reader speaking "online, approved, John Smith", passing in a label
-     * allows a custom message like "John Smith (approved and online)".
+     * Used to provide custom content to screen readers.
+     * Status or presence is not added to the label by default if it passed as nodes.
+     * If status or presence is passed as a string, the default content format is "John Smith (online)".
      */
     label?: string;
     /**

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

@@ -22,9 +22,9 @@ export interface AvatarPropTypes {
      */
     appearance?: AppearanceType;
     /**
-     * Used to provide better content to screen readers when using presence/status. Rather
-     * than a screen reader speaking "online, approved, John Smith", passing in a label
-     * allows a custom message like "John Smith (approved and online)".
+     * Used to provide custom content to screen readers.
+     * Status or presence is not added to the label by default if it passed as nodes.
+     * If status or presence is passed as a string, the default content format is "John Smith (online)".
      */
     label?: string;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/avatar",
-  "version": "21.3.6",
+  "version": "21.3.8",
   "description": "An avatar is a visual representation of a user or entity.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -43,7 +43,7 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.11.0",
+    "@atlaskit/tokens": "^1.14.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0"
@@ -52,11 +52,10 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.8.0",
-    "@atlaskit/docs": "*",
+    "@af/accessibility-testing": "*",
+    "@af/visual-regression": "*",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/visual-regression": "*",
@@ -65,7 +64,6 @@
     "@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/dist/cjs/version.json

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

package/dist/es2019/version.json

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

package/dist/esm/version.json

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