@atlaskit/teams-avatar 2.0.0 → 2.0.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/teams-avatar
 
+## 2.0.2
+
+### Patch Changes
+
+- [#118053](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/118053)
+  [`536325e780241`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/536325e780241) -
+  Fix to align with the regular avatar styles
+
+## 2.0.1
+
+### Patch Changes
+
+- [#117222](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117222)
+  [`acb92790d7b4b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/acb92790d7b4b) -
+  Update the usage of `@atlaskit/avatar` to ensure compatibility with the latest version.
+- Updated dependencies
+
 ## 2.0.0
 
 ### Major Changes

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

@@ -28,11 +28,9 @@ function TeamAvatar(_ref) {
     size: size,
     src: src,
     testId: "".concat(testId, "-team-avatar")
-  }), function (innerProps) {
-    return /*#__PURE__*/_react.default.createElement(_teamsAvatarImage.TeamAvatarImage, (0, _extends2.default)({
-      src: src,
-      size: size,
-      testId: testId
-    }, innerProps));
-  });
+  }), /*#__PURE__*/_react.default.createElement(_teamsAvatarImage.TeamAvatarImage, {
+    src: src,
+    size: size,
+    testId: testId
+  }));
 }

package/dist/cjs/ui/teams-avatar/teams-avatar-image/fallback/index.compiled.css

@@ -0,0 +1,5 @@
+._18u0v77o{margin-left:var(--ds-space-025,2px)}
+._19pkv77o{margin-top:var(--ds-space-025,2px)}
+._1e0c1txw{display:flex}
+._2hwxv77o{margin-right:var(--ds-space-025,2px)}
+._otyrv77o{margin-bottom:var(--ds-space-025,2px)}

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

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,10 +6,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FallbackAvatar = FallbackAvatar;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var styles = {
+  wrapper: "_1e0c1txw _19pkv77o _2hwxv77o _otyrv77o _18u0v77o"
+};
 function FallbackAvatar(props) {
-  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.wrapper
+  }, /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
     width: "32",
     height: "32",
     viewBox: "0 0 32 32",
@@ -44,5 +53,5 @@ function FallbackAvatar(props) {
     height: "32",
     rx: "4",
     fill: "white"
-  }))));
+  })))));
 }

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TeamAvatarImage = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
@@ -15,7 +14,6 @@ var _people = _interopRequireDefault(require("@atlaskit/icon/glyph/people"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _fallback = require("./fallback");
-var _excluded = ["alt", "src", "size", "testId"];
 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; } /**
  * @jsxRuntime classic
@@ -77,8 +75,7 @@ var TeamAvatarImage = exports.TeamAvatarImage = function TeamAvatarImage(_ref3)
     alt = _ref3$alt === void 0 ? '' : _ref3$alt,
     src = _ref3.src,
     size = _ref3.size,
-    testId = _ref3.testId,
-    rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
+    testId = _ref3.testId;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     hasImageErrored = _useState2[0],
@@ -106,7 +103,7 @@ var TeamAvatarImage = exports.TeamAvatarImage = function TeamAvatarImage(_ref3)
       testId: testId && "".concat(testId, "--team")
     }));
   }
-  return (0, _react2.jsx)("span", rest, (0, _react2.jsx)("img", {
+  return (0, _react2.jsx)(_avatar.AvatarContent, null, (0, _react2.jsx)("img", {
     src: src,
     alt: alt,
     "data-testid": testId && "".concat(testId, "--image"),

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

@@ -18,9 +18,9 @@ export default function TeamAvatar({
     size: size,
     src: src,
     testId: `${testId}-team-avatar`
-  }), innerProps => /*#__PURE__*/React.createElement(TeamAvatarImage, _extends({
+  }), /*#__PURE__*/React.createElement(TeamAvatarImage, {
     src: src,
     size: size,
     testId: testId
-  }, innerProps)));
+  }));
 }

package/dist/es2019/ui/teams-avatar/teams-avatar-image/fallback/index.compiled.css

@@ -0,0 +1,5 @@
+._18u0v77o{margin-left:var(--ds-space-025,2px)}
+._19pkv77o{margin-top:var(--ds-space-025,2px)}
+._1e0c1txw{display:flex}
+._2hwxv77o{margin-right:var(--ds-space-025,2px)}
+._otyrv77o{margin-bottom:var(--ds-space-025,2px)}

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

@@ -1,7 +1,16 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { Box } from '@atlaskit/primitives/compiled';
+const styles = {
+  wrapper: "_1e0c1txw _19pkv77o _2hwxv77o _otyrv77o _18u0v77o"
+};
 export function FallbackAvatar(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.wrapper
+  }, /*#__PURE__*/React.createElement("svg", _extends({
     width: "32",
     height: "32",
     viewBox: "0 0 32 32",
@@ -37,5 +46,5 @@ export function FallbackAvatar(props) {
     height: "32",
     rx: "4",
     fill: "white"
-  }))));
+  })))));
 }

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

@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { AVATAR_SIZES } from '@atlaskit/avatar';
+import { AVATAR_SIZES, AvatarContent } from '@atlaskit/avatar';
 import TeamIcon from '@atlaskit/icon/glyph/people';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N90 } from '@atlaskit/theme/colors';
@@ -66,8 +66,7 @@ export const TeamAvatarImage = ({
   alt = '',
   src,
   size,
-  testId,
-  ...rest
+  testId
 }) => {
   const [hasImageErrored, setHasImageErrored] = useState(false);
 
@@ -93,7 +92,7 @@ export const TeamAvatarImage = ({
       testId: testId && `${testId}--team`
     }));
   }
-  return jsx("span", rest, jsx("img", {
+  return jsx(AvatarContent, null, jsx("img", {
     src: src,
     alt: alt,
     "data-testid": testId && `${testId}--image`,

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

@@ -20,11 +20,9 @@ export default function TeamAvatar(_ref) {
     size: size,
     src: src,
     testId: "".concat(testId, "-team-avatar")
-  }), function (innerProps) {
-    return /*#__PURE__*/React.createElement(TeamAvatarImage, _extends({
-      src: src,
-      size: size,
-      testId: testId
-    }, innerProps));
-  });
+  }), /*#__PURE__*/React.createElement(TeamAvatarImage, {
+    src: src,
+    size: size,
+    testId: testId
+  }));
 }

package/dist/esm/ui/teams-avatar/teams-avatar-image/fallback/index.compiled.css

@@ -0,0 +1,5 @@
+._18u0v77o{margin-left:var(--ds-space-025,2px)}
+._19pkv77o{margin-top:var(--ds-space-025,2px)}
+._1e0c1txw{display:flex}
+._2hwxv77o{margin-right:var(--ds-space-025,2px)}
+._otyrv77o{margin-bottom:var(--ds-space-025,2px)}

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

@@ -1,7 +1,16 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { Box } from '@atlaskit/primitives/compiled';
+var styles = {
+  wrapper: "_1e0c1txw _19pkv77o _2hwxv77o _otyrv77o _18u0v77o"
+};
 export function FallbackAvatar(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.wrapper
+  }, /*#__PURE__*/React.createElement("svg", _extends({
     width: "32",
     height: "32",
     viewBox: "0 0 32 32",
@@ -37,5 +46,5 @@ export function FallbackAvatar(props) {
     height: "32",
     rx: "4",
     fill: "white"
-  }))));
+  })))));
 }

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

@@ -1,7 +1,5 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["alt", "src", "size", "testId"];
 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) { _defineProperty(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; }
 /**
@@ -12,7 +10,7 @@ import { useEffect, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { AVATAR_SIZES } from '@atlaskit/avatar';
+import { AVATAR_SIZES, AvatarContent } from '@atlaskit/avatar';
 import TeamIcon from '@atlaskit/icon/glyph/people';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N90 } from '@atlaskit/theme/colors';
@@ -73,8 +71,7 @@ export var TeamAvatarImage = function TeamAvatarImage(_ref3) {
     alt = _ref3$alt === void 0 ? '' : _ref3$alt,
     src = _ref3.src,
     size = _ref3.size,
-    testId = _ref3.testId,
-    rest = _objectWithoutProperties(_ref3, _excluded);
+    testId = _ref3.testId;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     hasImageErrored = _useState2[0],
@@ -102,7 +99,7 @@ export var TeamAvatarImage = function TeamAvatarImage(_ref3) {
       testId: testId && "".concat(testId, "--team")
     }));
   }
-  return jsx("span", rest, jsx("img", {
+  return jsx(AvatarContent, null, jsx("img", {
     src: src,
     alt: alt,
     "data-testid": testId && "".concat(testId, "--image"),

package/dist/types/ui/teams-avatar/teams-avatar-image/index.d.ts

@@ -1,15 +1,15 @@
 import { jsx } from '@emotion/react';
-import { type CustomAvatarProps, type SizeType } from '@atlaskit/avatar';
+import { type SizeType } from '@atlaskit/avatar';
 type AvatarImageProps = {
     size: SizeType;
     alt?: string;
     src?: string;
     testId?: string;
-} & CustomAvatarProps;
+};
 /**
  * __Avatar image__
  *
  * An avatar image is an internal component used to control the rendering phases of an image.
  */
-export declare const TeamAvatarImage: ({ alt, src, size, testId, ...rest }: AvatarImageProps) => jsx.JSX.Element;
+export declare const TeamAvatarImage: ({ alt, src, size, testId }: AvatarImageProps) => jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/teams-avatar/teams-avatar-image/index.d.ts

@@ -1,15 +1,15 @@
 import { jsx } from '@emotion/react';
-import { type CustomAvatarProps, type SizeType } from '@atlaskit/avatar';
+import { type SizeType } from '@atlaskit/avatar';
 type AvatarImageProps = {
     size: SizeType;
     alt?: string;
     src?: string;
     testId?: string;
-} & CustomAvatarProps;
+};
 /**
  * __Avatar image__
  *
  * An avatar image is an internal component used to control the rendering phases of an image.
  */
-export declare const TeamAvatarImage: ({ alt, src, size, testId, ...rest }: AvatarImageProps) => jsx.JSX.Element;
+export declare const TeamAvatarImage: ({ alt, src, size, testId }: AvatarImageProps) => jsx.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/teams-avatar",
-	"version": "2.0.0",
+	"version": "2.0.2",
 	"description": "A team avatar is a visual representation of a team.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,11 +35,13 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/avatar": "^22.0.0",
-		"@atlaskit/icon": "^24.0.0",
+		"@atlaskit/avatar": "^23.0.0",
+		"@atlaskit/css": "^0.10.0",
+		"@atlaskit/icon": "^24.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
+		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/theme": "^17.0.0",
-		"@atlaskit/tokens": "^4.0.0",
+		"@atlaskit/tokens": "^4.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},