@atlaskit/avatar 21.12.0 → 21.13.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/avatar
 
+## 21.13.0
+
+### Minor Changes
+
+- [#128333](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/128333)
+  [`e8ee91f820e6f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e8ee91f820e6f) -
+  Refactors the way focus-rings are applied to avatars and avatar-groups in relation to custom
+  border colors.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 21.12.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 21.12.0
 
 ### Minor Changes

package/dist/cjs/Avatar.js

@@ -11,6 +11,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactUid = require("react-uid");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _AvatarImage = _interopRequireDefault(require("./AvatarImage"));
@@ -29,7 +30,14 @@ 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.12.0";
+var packageVersion = "21.13.0";
+var getTestId = function getTestId(testId, children) {
+  return !children ? {
+    'data-testid': "".concat(testId, "--inner")
+  } : {
+    testId: "".concat(testId, "--inner")
+  };
+};
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
@@ -43,7 +51,7 @@ var getStyles = function getStyles(css, _ref) {
     isInteractive = _ref.isInteractive,
     isDisabled = _ref.isDisabled;
   return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t\talign-items: stretch;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", ";\n\t\tbox-sizing: content-box;\n\t\tcursor: inherit;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\toutline: none;\n\t\toverflow: hidden;\n\t\tposition: static;\n\t\ttransform: translateZ(0);\n\t\ttransition:\n\t\t\ttransform 200ms,\n\t\t\topacity 200ms;\n\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\tborder: none;\n\t\tmargin: ", ";\n\t\tpadding: ", ";\n\n\t\t&::-moz-focus-inner {\n\t\t\tborder: 0;\n\t\t\tmargin: ", ";\n\t\t\tpadding: ", ";\n\t\t}\n\n\t\t&::after {\n\t\t\tbackground-color: transparent;\n\t\t\tinset: 0px;\n\n\t\t\t/* Added border-radius style to fix hover issue in safari */\n\t\t\tborder-radius: ", ";\n\t\t\tcontent: ' ';\n\t\t\topacity: 0;\n\t\t\tpointer-events: none;\n\t\t\tposition: absolute;\n\t\t\ttransition: opacity 200ms;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n    ", "\n\t"])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), _constants.BORDER_WIDTH, borderColor, "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(_constants.BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(_colors.B300, ")"), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ", "var(--ds-interaction-hovered, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ", "var(--ds-interaction-pressed, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(").concat(_constants.ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n          pointer-events: none;\n          background-color: ", "var(--ds-surface, ".concat(_colors.N0, ")"), ";\n        }\n      "))
+    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t\talign-items: stretch;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", ";\n\t\tbox-sizing: content-box;\n\t\tcursor: inherit;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\toutline: none;\n\t\toverflow: hidden;\n\t\tposition: static;\n\t\ttransform: translateZ(0);\n\t\ttransition:\n\t\t\ttransform 200ms,\n\t\t\topacity 200ms;\n\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\tborder: none;\n\t\tmargin: ", ";\n\t\tpadding: ", ";\n\n\t\t&::-moz-focus-inner {\n\t\t\tborder: 0;\n\t\t\tmargin: ", ";\n\t\t\tpadding: ", ";\n\t\t}\n\n\t\t&::after {\n\t\t\tbackground-color: transparent;\n\t\t\tinset: 0px;\n\n\t\t\t/* Added border-radius style to fix hover issue in safari */\n\t\t\tborder-radius: ", ";\n\t\t\tcontent: ' ';\n\t\t\topacity: 0;\n\t\t\tpointer-events: none;\n\t\t\tposition: absolute;\n\t\t\ttransition: opacity 200ms;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t:focus {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n    ", "\n\t"])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), _constants.BORDER_WIDTH, borderColor, "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :hover {\n        &::after {\n          background-color: ".concat("var(--ds-interaction-hovered, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ", "var(--ds-interaction-pressed, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(", _constants.ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n          pointer-events: none;\n          background-color: ", "var(--ds-surface, ".concat(_colors.N0, ")"), ";\n        }\n      "))
   );
 };
 
@@ -123,13 +131,6 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     }
     onClick(event, analyticsEvent);
   }, [createAnalyticsEvent, isDisabled, onClick]);
-  var getTestId = function getTestId(testId, children) {
-    return !children ? {
-      'data-testid': "".concat(testId, "--inner")
-    } : {
-      testId: "".concat(testId, "--inner")
-    };
-  };
   var componentProps = function componentProps() {
     if (isDisabled) {
       return {
@@ -190,7 +191,11 @@ 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);
+    if (children) {
+      return children(props);
+    }
+    var element = (0, _utilities.getCustomElement)(isDisabled, href, onClick);
+    return element === 'a' || element === 'button' ? (0, _react2.jsx)(_focusRing.default, null, /*#__PURE__*/(0, _react.createElement)(element, props)) : ( /*#__PURE__*/(0, _react.createElement)(element, props));
   }), isPresence && (0, _react2.jsx)(_Presence.PresenceWrapper, {
     appearance: appearance,
     size: size,

package/dist/es2019/Avatar.js

@@ -9,8 +9,9 @@ import { createElement, forwardRef, isValidElement, useCallback, useEffect, useR
 import { ClassNames, jsx } from '@emotion/react';
 import { useUIDSeed } from 'react-uid';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import FocusRing from '@atlaskit/focus-ring';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { B300, N0, N70A } from '@atlaskit/theme/colors';
+import { N0, N70A } from '@atlaskit/theme/colors';
 import AvatarImage from './AvatarImage';
 import { ACTIVE_SCALE_FACTOR, AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH } from './constants';
 import { useAvatarContext } from './context';
@@ -18,7 +19,12 @@ import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 const packageName = "@atlaskit/avatar";
-const packageVersion = "21.12.0";
+const packageVersion = "21.13.0";
+const getTestId = (testId, children) => !children ? {
+  'data-testid': `${testId}--inner`
+} : {
+  testId: `${testId}--inner`
+};
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
@@ -75,16 +81,15 @@ css`
 			width: 100%;
 		}
 
+		:focus {
+			box-shadow: none;
+		}
+
 		${stackIndex && `position: relative;`}
 
 		${isInteractive && `
       cursor: pointer;
 
-      :focus {
-        outline: none;
-        box-shadow: 0 0 0 ${BORDER_WIDTH}px ${`var(--ds-border-focused, ${B300})`}
-      }
-
       :hover {
         &::after {
           background-color: ${`var(--ds-interaction-hovered, ${N70A})`};
@@ -198,11 +203,6 @@ const Avatar = /*#__PURE__*/forwardRef(({
     }
     onClick(event, analyticsEvent);
   }, [createAnalyticsEvent, isDisabled, onClick]);
-  const getTestId = (testId, children) => !children ? {
-    'data-testid': `${testId}--inner`
-  } : {
-    testId: `${testId}--inner`
-  };
   const componentProps = () => {
     if (isDisabled) {
       return {
@@ -269,7 +269,11 @@ const Avatar = /*#__PURE__*/forwardRef(({
       }),
       ref
     };
-    return children ? children(props) : /*#__PURE__*/createElement(getCustomElement(isDisabled, href, onClick), props);
+    if (children) {
+      return children(props);
+    }
+    const element = getCustomElement(isDisabled, href, onClick);
+    return element === 'a' || element === 'button' ? jsx(FocusRing, null, /*#__PURE__*/createElement(element, props)) : ( /*#__PURE__*/createElement(element, props));
   }), isPresence && jsx(PresenceWrapper, {
     appearance: appearance,
     size: size,

package/dist/esm/Avatar.js

@@ -14,8 +14,9 @@ import { createElement, forwardRef, isValidElement, useCallback, useEffect, useR
 import { ClassNames, jsx } from '@emotion/react';
 import { useUIDSeed } from 'react-uid';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import FocusRing from '@atlaskit/focus-ring';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { B300, N0, N70A } from '@atlaskit/theme/colors';
+import { N0, N70A } from '@atlaskit/theme/colors';
 import AvatarImage from './AvatarImage';
 import { ACTIVE_SCALE_FACTOR, AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH } from './constants';
 import { useAvatarContext } from './context';
@@ -23,7 +24,14 @@ import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.12.0";
+var packageVersion = "21.13.0";
+var getTestId = function getTestId(testId, children) {
+  return !children ? {
+    'data-testid': "".concat(testId, "--inner")
+  } : {
+    testId: "".concat(testId, "--inner")
+  };
+};
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
@@ -37,7 +45,7 @@ var getStyles = function getStyles(css, _ref) {
     isInteractive = _ref.isInteractive,
     isDisabled = _ref.isDisabled;
   return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t\talign-items: stretch;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", ";\n\t\tbox-sizing: content-box;\n\t\tcursor: inherit;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\toutline: none;\n\t\toverflow: hidden;\n\t\tposition: static;\n\t\ttransform: translateZ(0);\n\t\ttransition:\n\t\t\ttransform 200ms,\n\t\t\topacity 200ms;\n\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\tborder: none;\n\t\tmargin: ", ";\n\t\tpadding: ", ";\n\n\t\t&::-moz-focus-inner {\n\t\t\tborder: 0;\n\t\t\tmargin: ", ";\n\t\t\tpadding: ", ";\n\t\t}\n\n\t\t&::after {\n\t\t\tbackground-color: transparent;\n\t\t\tinset: 0px;\n\n\t\t\t/* Added border-radius style to fix hover issue in safari */\n\t\t\tborder-radius: ", ";\n\t\t\tcontent: ' ';\n\t\t\topacity: 0;\n\t\t\tpointer-events: none;\n\t\t\tposition: absolute;\n\t\t\ttransition: opacity 200ms;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n    ", "\n\t"])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), BORDER_WIDTH, borderColor, "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(B300, ")"), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ", "var(--ds-interaction-hovered, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ", "var(--ds-interaction-pressed, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(").concat(ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n          pointer-events: none;\n          background-color: ", "var(--ds-surface, ".concat(N0, ")"), ";\n        }\n      "))
+    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t\talign-items: stretch;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", ";\n\t\tbox-sizing: content-box;\n\t\tcursor: inherit;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\toutline: none;\n\t\toverflow: hidden;\n\t\tposition: static;\n\t\ttransform: translateZ(0);\n\t\ttransition:\n\t\t\ttransform 200ms,\n\t\t\topacity 200ms;\n\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\tborder: none;\n\t\tmargin: ", ";\n\t\tpadding: ", ";\n\n\t\t&::-moz-focus-inner {\n\t\t\tborder: 0;\n\t\t\tmargin: ", ";\n\t\t\tpadding: ", ";\n\t\t}\n\n\t\t&::after {\n\t\t\tbackground-color: transparent;\n\t\t\tinset: 0px;\n\n\t\t\t/* Added border-radius style to fix hover issue in safari */\n\t\t\tborder-radius: ", ";\n\t\t\tcontent: ' ';\n\t\t\topacity: 0;\n\t\t\tpointer-events: none;\n\t\t\tposition: absolute;\n\t\t\ttransition: opacity 200ms;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t:focus {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n    ", "\n\t"])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), BORDER_WIDTH, borderColor, "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :hover {\n        &::after {\n          background-color: ".concat("var(--ds-interaction-hovered, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ", "var(--ds-interaction-pressed, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(", ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n          pointer-events: none;\n          background-color: ", "var(--ds-surface, ".concat(N0, ")"), ";\n        }\n      "))
   );
 };
 
@@ -117,13 +125,6 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     }
     onClick(event, analyticsEvent);
   }, [createAnalyticsEvent, isDisabled, onClick]);
-  var getTestId = function getTestId(testId, children) {
-    return !children ? {
-      'data-testid': "".concat(testId, "--inner")
-    } : {
-      testId: "".concat(testId, "--inner")
-    };
-  };
   var componentProps = function componentProps() {
     if (isDisabled) {
       return {
@@ -184,7 +185,11 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       }),
       ref: ref
     });
-    return children ? children(props) : /*#__PURE__*/createElement(getCustomElement(isDisabled, href, onClick), props);
+    if (children) {
+      return children(props);
+    }
+    var element = getCustomElement(isDisabled, href, onClick);
+    return element === 'a' || element === 'button' ? jsx(FocusRing, null, /*#__PURE__*/createElement(element, props)) : ( /*#__PURE__*/createElement(element, props));
   }), isPresence && jsx(PresenceWrapper, {
     appearance: appearance,
     size: size,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "21.12.0",
+	"version": "21.13.0",
 	"description": "An avatar is a visual representation of a user or entity.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -44,12 +44,13 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^9.3.0",
-		"@atlaskit/icon": "^22.8.0",
+		"@atlaskit/analytics-next": "^10.0.0",
+		"@atlaskit/focus-ring": "^1.5.0",
+		"@atlaskit/icon": "^22.11.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^11.1.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.56.0",
+		"@atlaskit/tokens": "^1.57.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"@emotion/serialize": "^1.1.0",
@@ -64,7 +65,7 @@
 		"@atlaskit/ds-lib": "^2.3.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/textfield": "^6.4.0",
-		"@atlaskit/tooltip": "^18.5.0",
+		"@atlaskit/tooltip": "^18.6.0",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "*",
 		"@emotion/styled": "^11.0.0",