@atlaskit/avatar 25.2.0 → 25.3.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/avatar
 
+## 25.3.0
+
+### Minor Changes
+
+- [`e314c4cb133f7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e314c4cb133f7) -
+  [ux] Updates avatar and avatar group styles to reflect our new visual design language. These
+  changes were previously behind a feature flag and are now fully rolled out.
+
+## 25.2.1
+
+### Patch Changes
+
+- [`39e543109ec09`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/39e543109ec09) -
+  add type info to forwardRef components
+- Updated dependencies
+
 ## 25.2.0
 
 ### Minor Changes

package/dist/cjs/avatar-content.js

@@ -63,7 +63,7 @@ var AvatarContent = exports.AvatarContent = /*#__PURE__*/(0, _react.forwardRef)(
     appearance = _useAvatarContent.appearance,
     avatarImage = _useAvatarContent.avatarImage,
     _useAvatarContent$bor = _useAvatarContent.borderColor,
-    borderColor = _useAvatarContent$bor === void 0 ? (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? "var(--ds-surface, #FFFFFF)" : "var(--ds-surface-overlay, #FFFFFF)" : _useAvatarContent$bor,
+    borderColor = _useAvatarContent$bor === void 0 ? "var(--ds-surface, #FFFFFF)" : _useAvatarContent$bor,
     href = _useAvatarContent.href,
     isDisabled = _useAvatarContent.isDisabled,
     label = _useAvatarContent.label,

package/dist/cjs/avatar.js

@@ -24,7 +24,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 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 = "0.0.0-development";
+var packageVersion = "25.2.1";
 var containerStyles = null;
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions

package/dist/cjs/internal/avatar-image.compiled.css

@@ -1,7 +1,7 @@
 
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
-._2rkofajl{border-radius:var(--ds-radius-small,3px)}
 ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
 ._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}._16jlkb7n{flex-grow:1}
 ._175216xz svg{height:6pc}
@@ -15,7 +15,6 @@
 ._1o9zkb7n{flex-shrink:1}
 ._4t3i1osq{height:100%}
 ._bfhk1v33{background-color:var(--ds-background-accent-gray-subtler,#dcdfe4)}
-._bfhkr4aa{background-color:var(--ds-icon-subtle,#8993a4)}
 ._i0dl1osq{flex-basis:100%}
 ._w8l516xz svg{width:6pc}
 ._w8l51qr7 svg{width:8pc}

package/dist/cjs/internal/avatar-image.js

@@ -14,20 +14,17 @@ var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _person = _interopRequireDefault(require("@atlaskit/icon/core/migration/person"));
 var _releaseShip = _interopRequireDefault(require("@atlaskit/icon/core/migration/release--ship"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   image: "_16jlkb7n _1o9zkb7n _i0dl1osq _1e0c1txw _1bsb1osq _4t3i1osq",
-  icon: "_1e0c1txw _1bsb1osq _4t3i1osq",
-  iconBg: "_bfhkr4aa",
-  iconBGVisualRefresh: "_bfhk1v33",
+  icon: "_1e0c1txw _1bsb1osq _4t3i1osq _bfhk1v33",
   circle: "_2rko1rr0"
 };
 var borderRadiusMap = {
   xsmall: "_2rkolb4i",
   small: "_2rkolb4i",
-  medium: "_2rkofajl",
-  large: "_2rkofajl",
+  medium: "_2rko12b0",
+  large: "_2rko12b0",
   xlarge: "_2rko1qi0",
   xxlarge: "_2rkopb1k"
 };
@@ -64,16 +61,16 @@ var AvatarImage = function AvatarImage(_ref) {
   }, [src]);
   if (!src || hasImageErrored) {
     return /*#__PURE__*/React.createElement("span", {
-      className: (0, _runtime.ax)([styles.icon, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? styles.iconBGVisualRefresh : styles.iconBg, nestedSvgStylesMap[size]])
+      className: (0, _runtime.ax)([styles.icon, nestedSvgStylesMap[size]])
     }, appearance === 'circle' ? /*#__PURE__*/React.createElement(_person.default, {
       label: alt,
-      color: (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? "var(--ds-icon-subtle, #626F86)" : "var(--ds-icon-inverse, #FFFFFF)",
+      color: "var(--ds-icon-subtle, #626F86)",
       testId: testId && "".concat(testId, "--person"),
       spacing: "spacious",
       LEGACY_secondaryColor: "var(--ds-icon-subtle, #626F86)"
     }) : /*#__PURE__*/React.createElement(_releaseShip.default, {
       label: alt,
-      color: (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? "var(--ds-icon-subtle, #626F86)" : "var(--ds-icon-inverse, #FFFFFF)",
+      color: "var(--ds-icon-subtle, #626F86)",
       testId: testId && "".concat(testId, "--ship"),
       spacing: "spacious",
       LEGACY_secondaryColor: "var(--ds-icon-subtle, #626F86)"

package/dist/es2019/avatar-content.js

@@ -53,8 +53,7 @@ export const AvatarContent = /*#__PURE__*/forwardRef(({
     as: Container,
     appearance,
     avatarImage,
-    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-    borderColor = fg('platform-component-visual-refresh') ? "var(--ds-surface, #FFFFFF)" : "var(--ds-surface-overlay, #FFFFFF)",
+    borderColor = "var(--ds-surface, #FFFFFF)",
     href,
     isDisabled,
     label,

package/dist/es2019/avatar.js

@@ -12,7 +12,7 @@ import { PresenceWrapper } from './presence';
 import { StatusWrapper } from './status';
 import { getCustomElement } from './utilities';
 const packageName = "@atlaskit/avatar";
-const packageVersion = "0.0.0-development";
+const packageVersion = "25.2.1";
 const containerStyles = null;
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions

package/dist/es2019/internal/avatar-image.compiled.css

@@ -1,7 +1,7 @@
 
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
-._2rkofajl{border-radius:var(--ds-radius-small,3px)}
 ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
 ._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}._16jlkb7n{flex-grow:1}
 ._175216xz svg{height:6pc}
@@ -15,7 +15,6 @@
 ._1o9zkb7n{flex-shrink:1}
 ._4t3i1osq{height:100%}
 ._bfhk1v33{background-color:var(--ds-background-accent-gray-subtler,#dcdfe4)}
-._bfhkr4aa{background-color:var(--ds-icon-subtle,#8993a4)}
 ._i0dl1osq{flex-basis:100%}
 ._w8l516xz svg{width:6pc}
 ._w8l51qr7 svg{width:8pc}

package/dist/es2019/internal/avatar-image.js

@@ -5,19 +5,16 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useState } from 'react';
 import PersonIcon from '@atlaskit/icon/core/migration/person';
 import ReleaseIcon from '@atlaskit/icon/core/migration/release--ship';
-import { fg } from '@atlaskit/platform-feature-flags';
 const styles = {
   image: "_16jlkb7n _1o9zkb7n _i0dl1osq _1e0c1txw _1bsb1osq _4t3i1osq",
-  icon: "_1e0c1txw _1bsb1osq _4t3i1osq",
-  iconBg: "_bfhkr4aa",
-  iconBGVisualRefresh: "_bfhk1v33",
+  icon: "_1e0c1txw _1bsb1osq _4t3i1osq _bfhk1v33",
   circle: "_2rko1rr0"
 };
 const borderRadiusMap = {
   xsmall: "_2rkolb4i",
   small: "_2rkolb4i",
-  medium: "_2rkofajl",
-  large: "_2rkofajl",
+  medium: "_2rko12b0",
+  large: "_2rko12b0",
   xlarge: "_2rko1qi0",
   xxlarge: "_2rkopb1k"
 };
@@ -51,16 +48,16 @@ const AvatarImage = ({
   }, [src]);
   if (!src || hasImageErrored) {
     return /*#__PURE__*/React.createElement("span", {
-      className: ax([styles.icon, fg('platform-component-visual-refresh') ? styles.iconBGVisualRefresh : styles.iconBg, nestedSvgStylesMap[size]])
+      className: ax([styles.icon, nestedSvgStylesMap[size]])
     }, appearance === 'circle' ? /*#__PURE__*/React.createElement(PersonIcon, {
       label: alt,
-      color: fg('platform-component-visual-refresh') ? "var(--ds-icon-subtle, #626F86)" : "var(--ds-icon-inverse, #FFFFFF)",
+      color: "var(--ds-icon-subtle, #626F86)",
       testId: testId && `${testId}--person`,
       spacing: "spacious",
       LEGACY_secondaryColor: "var(--ds-icon-subtle, #626F86)"
     }) : /*#__PURE__*/React.createElement(ReleaseIcon, {
       label: alt,
-      color: fg('platform-component-visual-refresh') ? "var(--ds-icon-subtle, #626F86)" : "var(--ds-icon-inverse, #FFFFFF)",
+      color: "var(--ds-icon-subtle, #626F86)",
       testId: testId && `${testId}--ship`,
       spacing: "spacious",
       LEGACY_secondaryColor: "var(--ds-icon-subtle, #626F86)"

package/dist/esm/avatar-content.js

@@ -54,7 +54,7 @@ export var AvatarContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
     appearance = _useAvatarContent.appearance,
     avatarImage = _useAvatarContent.avatarImage,
     _useAvatarContent$bor = _useAvatarContent.borderColor,
-    borderColor = _useAvatarContent$bor === void 0 ? fg('platform-component-visual-refresh') ? "var(--ds-surface, #FFFFFF)" : "var(--ds-surface-overlay, #FFFFFF)" : _useAvatarContent$bor,
+    borderColor = _useAvatarContent$bor === void 0 ? "var(--ds-surface, #FFFFFF)" : _useAvatarContent$bor,
     href = _useAvatarContent.href,
     isDisabled = _useAvatarContent.isDisabled,
     label = _useAvatarContent.label,

package/dist/esm/avatar.js

@@ -15,7 +15,7 @@ import { PresenceWrapper } from './presence';
 import { StatusWrapper } from './status';
 import { getCustomElement } from './utilities';
 var packageName = "@atlaskit/avatar";
-var packageVersion = "0.0.0-development";
+var packageVersion = "25.2.1";
 var containerStyles = null;
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions

package/dist/esm/internal/avatar-image.compiled.css

@@ -1,7 +1,7 @@
 
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
-._2rkofajl{border-radius:var(--ds-radius-small,3px)}
 ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
 ._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}._16jlkb7n{flex-grow:1}
 ._175216xz svg{height:6pc}
@@ -15,7 +15,6 @@
 ._1o9zkb7n{flex-shrink:1}
 ._4t3i1osq{height:100%}
 ._bfhk1v33{background-color:var(--ds-background-accent-gray-subtler,#dcdfe4)}
-._bfhkr4aa{background-color:var(--ds-icon-subtle,#8993a4)}
 ._i0dl1osq{flex-basis:100%}
 ._w8l516xz svg{width:6pc}
 ._w8l51qr7 svg{width:8pc}

package/dist/esm/internal/avatar-image.js

@@ -6,19 +6,16 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useState } from 'react';
 import PersonIcon from '@atlaskit/icon/core/migration/person';
 import ReleaseIcon from '@atlaskit/icon/core/migration/release--ship';
-import { fg } from '@atlaskit/platform-feature-flags';
 var styles = {
   image: "_16jlkb7n _1o9zkb7n _i0dl1osq _1e0c1txw _1bsb1osq _4t3i1osq",
-  icon: "_1e0c1txw _1bsb1osq _4t3i1osq",
-  iconBg: "_bfhkr4aa",
-  iconBGVisualRefresh: "_bfhk1v33",
+  icon: "_1e0c1txw _1bsb1osq _4t3i1osq _bfhk1v33",
   circle: "_2rko1rr0"
 };
 var borderRadiusMap = {
   xsmall: "_2rkolb4i",
   small: "_2rkolb4i",
-  medium: "_2rkofajl",
-  large: "_2rkofajl",
+  medium: "_2rko12b0",
+  large: "_2rko12b0",
   xlarge: "_2rko1qi0",
   xxlarge: "_2rkopb1k"
 };
@@ -55,16 +52,16 @@ var AvatarImage = function AvatarImage(_ref) {
   }, [src]);
   if (!src || hasImageErrored) {
     return /*#__PURE__*/React.createElement("span", {
-      className: ax([styles.icon, fg('platform-component-visual-refresh') ? styles.iconBGVisualRefresh : styles.iconBg, nestedSvgStylesMap[size]])
+      className: ax([styles.icon, nestedSvgStylesMap[size]])
     }, appearance === 'circle' ? /*#__PURE__*/React.createElement(PersonIcon, {
       label: alt,
-      color: fg('platform-component-visual-refresh') ? "var(--ds-icon-subtle, #626F86)" : "var(--ds-icon-inverse, #FFFFFF)",
+      color: "var(--ds-icon-subtle, #626F86)",
       testId: testId && "".concat(testId, "--person"),
       spacing: "spacious",
       LEGACY_secondaryColor: "var(--ds-icon-subtle, #626F86)"
     }) : /*#__PURE__*/React.createElement(ReleaseIcon, {
       label: alt,
-      color: fg('platform-component-visual-refresh') ? "var(--ds-icon-subtle, #626F86)" : "var(--ds-icon-inverse, #FFFFFF)",
+      color: "var(--ds-icon-subtle, #626F86)",
       testId: testId && "".concat(testId, "--ship"),
       spacing: "spacious",
       LEGACY_secondaryColor: "var(--ds-icon-subtle, #626F86)"

package/dist/types/avatar-content.d.ts

@@ -17,5 +17,5 @@ type AvatarContentProps = {
  * - [Code](https://atlassian.design/components/avatar/code)
  * - [Usage](https://atlassian.design/components/avatar/usage)
  */
-export declare const AvatarContent: import("react").ForwardRefExoticComponent<AvatarContentProps & import("react").RefAttributes<HTMLElement>>;
+export declare const AvatarContent: React.ForwardRefExoticComponent<React.PropsWithoutRef<AvatarContentProps> & React.RefAttributes<HTMLElement>>;
 export {};

package/dist/types/avatar-item.d.ts

@@ -60,5 +60,5 @@ export interface AvatarItemProps {
  * - [Examples](https://atlassian.design/components/avatar/avatar-item/examples)
  * - [Code](https://atlassian.design/components/avatar/avatar-item/code)
  */
-declare const AvatarItem: import("react").ForwardRefExoticComponent<AvatarItemProps & import("react").RefAttributes<HTMLElement>>;
+declare const AvatarItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<AvatarItemProps> & React.RefAttributes<HTMLElement>>;
 export default AvatarItem;

package/dist/types/avatar.d.ts

@@ -108,5 +108,5 @@ export interface AvatarPropTypes {
  * - [Code](https://atlassian.design/components/avatar/code)
  * - [Usage](https://atlassian.design/components/avatar/usage)
  */
-declare const Avatar: import("react").ForwardRefExoticComponent<AvatarPropTypes & import("react").RefAttributes<HTMLElement>>;
+declare const Avatar: React.ForwardRefExoticComponent<React.PropsWithoutRef<AvatarPropTypes> & React.RefAttributes<HTMLElement>>;
 export default Avatar;

package/dist/types-ts4.5/avatar-content.d.ts

@@ -17,5 +17,5 @@ type AvatarContentProps = {
  * - [Code](https://atlassian.design/components/avatar/code)
  * - [Usage](https://atlassian.design/components/avatar/usage)
  */
-export declare const AvatarContent: import("react").ForwardRefExoticComponent<AvatarContentProps & import("react").RefAttributes<HTMLElement>>;
+export declare const AvatarContent: React.ForwardRefExoticComponent<React.PropsWithoutRef<AvatarContentProps> & React.RefAttributes<HTMLElement>>;
 export {};

package/dist/types-ts4.5/avatar-item.d.ts

@@ -60,5 +60,5 @@ export interface AvatarItemProps {
  * - [Examples](https://atlassian.design/components/avatar/avatar-item/examples)
  * - [Code](https://atlassian.design/components/avatar/avatar-item/code)
  */
-declare const AvatarItem: import("react").ForwardRefExoticComponent<AvatarItemProps & import("react").RefAttributes<HTMLElement>>;
+declare const AvatarItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<AvatarItemProps> & React.RefAttributes<HTMLElement>>;
 export default AvatarItem;

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

@@ -108,5 +108,5 @@ export interface AvatarPropTypes {
  * - [Code](https://atlassian.design/components/avatar/code)
  * - [Usage](https://atlassian.design/components/avatar/usage)
  */
-declare const Avatar: import("react").ForwardRefExoticComponent<AvatarPropTypes & import("react").RefAttributes<HTMLElement>>;
+declare const Avatar: React.ForwardRefExoticComponent<React.PropsWithoutRef<AvatarPropTypes> & React.RefAttributes<HTMLElement>>;
 export default Avatar;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "25.2.0",
+	"version": "25.3.0",
 	"description": "An avatar is a visual representation of a user or entity.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,7 +40,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.15.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tokens": "^6.3.0",
+		"@atlaskit/tokens": "^6.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3"
 	},
@@ -51,16 +51,16 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/button": "^23.4.0",
+		"@atlaskit/button": "^23.5.0",
 		"@atlaskit/code": "^17.2.0",
 		"@atlaskit/docs": "^11.1.0",
-		"@atlaskit/form": "^14.1.0",
+		"@atlaskit/form": "^14.2.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/range": "^9.2.0",
 		"@atlaskit/section-message": "^8.7.0",
 		"@atlaskit/textfield": "^8.0.0",
-		"@atlaskit/tooltip": "^20.4.0",
+		"@atlaskit/tooltip": "^20.5.0",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@atlassian/ssr-tests": "^0.3.0",
 		"@testing-library/react": "^13.4.0",
@@ -98,9 +98,6 @@
 		"platform.design-system-team.avatar-item-font-size_830x6": {
 			"type": "boolean"
 		},
-		"platform-component-visual-refresh": {
-			"type": "boolean"
-		},
 		"platform-visual-refresh-icons": {
 			"type": "boolean"
 		},