@atlaskit/avatar 21.3.7 → 21.3.9

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/avatar
 
+## 21.3.9
+
+### Patch Changes
+
+- [`fd6bb9c9184`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fd6bb9c9184) - Delete version.json
+- Updated dependencies
+
+## 21.3.8
+
+### Patch Changes
+
+- [`7a3cbead067`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7a3cbead067) - Default content for label
+
 ## 21.3.7
 
 ### 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.7";
+var packageVersion = "21.3.9";
 
 // 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.7";
+const packageVersion = "21.3.9";
 
 // 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.7";
+var packageVersion = "21.3.9";
 
 // 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.7",
+  "version": "21.3.9",
   "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.15.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0"
@@ -53,6 +53,7 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/visual-regression": "*",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/ssr": "*",

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?: (string & {}) | Omit<ReactNode, string> | PresenceType | null;
+    size?: SizeType;
+    src?: string;
+    stackIndex?: number;
+    status?: (string & {}) | Omit<ReactNode, string> | StatusType | null;
+    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';
+
+// @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';
+
+// (No @packageDocumentation comment for this package)
+
+```

package/dist/cjs/version.json

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

package/dist/es2019/version.json

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

package/dist/esm/version.json

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