@atlaskit/teams-avatar 2.5.0 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/teams-avatar
 
+## 2.6.0
+
+### Minor Changes
+
+- [`e993a197e2357`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e993a197e2357) -
+  Fix stale avatar and error state when teamId changes by keying TeamAvatarImage on teamId in the
+  T26 branch
+
 ## 2.5.0
 
 ### Minor Changes

package/dist/cjs/ui/teams-avatar/index.js

@@ -42,6 +42,7 @@ function TeamAvatar(_ref) {
       size: size,
       testId: "".concat(testId, "-team-avatar")
     }), /*#__PURE__*/_react.default.createElement(_avatar.AvatarContent, null, /*#__PURE__*/_react.default.createElement(_teamsAvatarImage.TeamAvatarImage, {
+      key: teamId,
       src: src,
       size: size,
       testId: testId,

package/dist/cjs/ui/teams-avatar/teams-avatar-image/index.js

@@ -13,6 +13,7 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _fallback = require("./fallback");
 var _constants = require("./fallback/constants");
 var _utils = require("./utils");
@@ -83,9 +84,10 @@ var TeamAvatarImage = exports.TeamAvatarImage = function TeamAvatarImage(_ref) {
     hasImageErrored = _useState2[0],
     setHasImageErrored = _useState2[1];
   var avatarSrc = (0, _utils.getTeamAvatarSrc)(src, teamId);
-
-  // If src changes, reset state
   (0, _react.useEffect)(function () {
+    if ((0, _platformFeatureFlags.fg)('enable_teams_t26_design_drop_core_experiences')) {
+      return;
+    }
     setHasImageErrored(false);
   }, [avatarSrc]);
   if ((!avatarSrc || hasImageErrored) && !(0, _platformFeatureFlags.fg)('enable_teams_t26_design_drop_core_experiences')) {
@@ -99,14 +101,15 @@ var TeamAvatarImage = exports.TeamAvatarImage = function TeamAvatarImage(_ref) {
   }
   if ((0, _platformFeatureFlags.fg)('enable_teams_t26_design_drop_core_experiences')) {
     var resolvedSrc = hasImageErrored ? _constants.TEAM_FALLBACK_AVATAR_DATA_URI : avatarSrc;
-    return /*#__PURE__*/React.createElement("img", {
+    return /*#__PURE__*/React.createElement(_compiled.Box, {
+      as: "img",
       src: resolvedSrc,
       alt: alt,
-      "data-testid": testId && "".concat(testId, "--image"),
+      testId: testId && "".concat(testId, "--image"),
+      xcss: avatarImageStyles.image,
       onError: function onError() {
         return setHasImageErrored(true);
-      },
-      className: (0, _runtime.ax)([avatarImageStyles.image])
+      }
     });
   }
   return /*#__PURE__*/React.createElement("span", {

package/dist/es2019/ui/teams-avatar/index.js

@@ -29,6 +29,7 @@ export default function TeamAvatar({
       size: size,
       testId: `${testId}-team-avatar`
     }), /*#__PURE__*/React.createElement(AvatarContent, null, /*#__PURE__*/React.createElement(TeamAvatarImage, {
+      key: teamId,
       src: src,
       size: size,
       testId: testId,

package/dist/es2019/ui/teams-avatar/teams-avatar-image/index.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useState } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 import { FallbackAvatar } from './fallback';
 import { TEAM_FALLBACK_AVATAR_DATA_URI } from './fallback/constants';
 import { getTeamAvatarSrc } from './utils';
@@ -69,9 +70,10 @@ export const TeamAvatarImage = ({
 }) => {
   const [hasImageErrored, setHasImageErrored] = useState(false);
   const avatarSrc = getTeamAvatarSrc(src, teamId);
-
-  // If src changes, reset state
   useEffect(() => {
+    if (fg('enable_teams_t26_design_drop_core_experiences')) {
+      return;
+    }
     setHasImageErrored(false);
   }, [avatarSrc]);
   if ((!avatarSrc || hasImageErrored) && !fg('enable_teams_t26_design_drop_core_experiences')) {
@@ -85,12 +87,13 @@ export const TeamAvatarImage = ({
   }
   if (fg('enable_teams_t26_design_drop_core_experiences')) {
     const resolvedSrc = hasImageErrored ? TEAM_FALLBACK_AVATAR_DATA_URI : avatarSrc;
-    return /*#__PURE__*/React.createElement("img", {
+    return /*#__PURE__*/React.createElement(Box, {
+      as: "img",
       src: resolvedSrc,
       alt: alt,
-      "data-testid": testId && `${testId}--image`,
-      onError: () => setHasImageErrored(true),
-      className: ax([avatarImageStyles.image])
+      testId: testId && `${testId}--image`,
+      xcss: avatarImageStyles.image,
+      onError: () => setHasImageErrored(true)
     });
   }
   return /*#__PURE__*/React.createElement("span", {

package/dist/esm/ui/teams-avatar/index.js

@@ -33,6 +33,7 @@ export default function TeamAvatar(_ref) {
       size: size,
       testId: "".concat(testId, "-team-avatar")
     }), /*#__PURE__*/React.createElement(AvatarContent, null, /*#__PURE__*/React.createElement(TeamAvatarImage, {
+      key: teamId,
       src: src,
       size: size,
       testId: testId,

package/dist/esm/ui/teams-avatar/teams-avatar-image/index.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useState } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 import { FallbackAvatar } from './fallback';
 import { TEAM_FALLBACK_AVATAR_DATA_URI } from './fallback/constants';
 import { getTeamAvatarSrc } from './utils';
@@ -74,9 +75,10 @@ export var TeamAvatarImage = function TeamAvatarImage(_ref) {
     hasImageErrored = _useState2[0],
     setHasImageErrored = _useState2[1];
   var avatarSrc = getTeamAvatarSrc(src, teamId);
-
-  // If src changes, reset state
   useEffect(function () {
+    if (fg('enable_teams_t26_design_drop_core_experiences')) {
+      return;
+    }
     setHasImageErrored(false);
   }, [avatarSrc]);
   if ((!avatarSrc || hasImageErrored) && !fg('enable_teams_t26_design_drop_core_experiences')) {
@@ -90,14 +92,15 @@ export var TeamAvatarImage = function TeamAvatarImage(_ref) {
   }
   if (fg('enable_teams_t26_design_drop_core_experiences')) {
     var resolvedSrc = hasImageErrored ? TEAM_FALLBACK_AVATAR_DATA_URI : avatarSrc;
-    return /*#__PURE__*/React.createElement("img", {
+    return /*#__PURE__*/React.createElement(Box, {
+      as: "img",
       src: resolvedSrc,
       alt: alt,
-      "data-testid": testId && "".concat(testId, "--image"),
+      testId: testId && "".concat(testId, "--image"),
+      xcss: avatarImageStyles.image,
       onError: function onError() {
         return setHasImageErrored(true);
-      },
-      className: ax([avatarImageStyles.image])
+      }
     });
   }
   return /*#__PURE__*/React.createElement("span", {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/teams-avatar",
-	"version": "2.5.0",
+	"version": "2.6.0",
 	"description": "A team avatar is a visual representation of a team.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -50,7 +50,7 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/ssr": "workspace:^",
-		"@atlassian/teams-app-internal-playground": "^1.14.0",
+		"@atlassian/teams-app-internal-playground": "^2.0.0",
 		"@testing-library/react": "^16.3.0",
 		"react-dom": "^18.2.0",
 		"wait-for-expect": "^1.2.0"