@atlaskit/avatar 21.10.3 → 21.11.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/avatar
 
+## 21.11.0
+
+### Minor Changes
+
+- [#116644](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116644)
+  [`40234970169dc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/40234970169dc) -
+  [ux] DSP-19190 We are testing a new visual appearance behind a feature flag. If successful it will
+  be released at a later date.
+
+## 21.10.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 21.10.3
 
 ### Patch 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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _AvatarImage = _interopRequireDefault(require("./AvatarImage"));
 var _constants = require("./constants");
@@ -28,7 +29,7 @@ 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.10.3";
+var packageVersion = "21.11.0";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
@@ -37,7 +38,7 @@ var getStyles = function getStyles(css, _ref) {
     radius = _ref.radius,
     appearance = _ref.appearance,
     _ref$borderColor = _ref.borderColor,
-    borderColor = _ref$borderColor === void 0 ? "var(--ds-surface-overlay, ".concat(_colors.N0, ")") : _ref$borderColor,
+    borderColor = _ref$borderColor === void 0 ? (0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') ? "var(--ds-surface, #FFFFFF)" : "var(--ds-surface-overlay, ".concat(_colors.N0, ")") : _ref$borderColor,
     stackIndex = _ref.stackIndex,
     isInteractive = _ref.isInteractive,
     isDisabled = _ref.isDisabled;

package/dist/cjs/AvatarImage.js

@@ -4,13 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ICON_COLOR = exports.ICON_BACKGROUND = void 0;
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _person = _interopRequireDefault(require("@atlaskit/icon/glyph/person"));
+var _person = _interopRequireDefault(require("@atlaskit/icon/core/person"));
+var _release = _interopRequireDefault(require("@atlaskit/icon/core/release"));
+var _person2 = _interopRequireDefault(require("@atlaskit/icon/glyph/person"));
 var _ship = _interopRequireDefault(require("@atlaskit/icon/glyph/ship"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("./constants");
 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; }
@@ -18,13 +21,17 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsxRuntime classic
  */ /** @jsx jsx */ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var ICON_BACKGROUND = exports.ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat(_colors.N0, ")");
-var ICON_COLOR = exports.ICON_COLOR = "var(--ds-icon-subtle, ".concat(_colors.N90, ")");
 var avatarDefaultIconStyles = (0, _react2.css)({
   display: 'block',
   width: '100%',
   height: '100%',
-  backgroundColor: ICON_COLOR
+  backgroundColor: "var(--ds-icon-subtle, ".concat(_colors.N90, ")")
+});
+var avatarDefaultIconVisualRefreshStyles = (0, _react2.css)({
+  display: 'block',
+  width: '100%',
+  height: '100%',
+  backgroundColor: "var(--ds-background-accent-gray-subtler, #DCDFE4)"
 });
 var nestedAvatarStyles = Object.entries(_constants.AVATAR_SIZES).reduce(function (styles, _ref) {
   var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
@@ -72,17 +79,27 @@ var AvatarImage = function AvatarImage(_ref3) {
   }, [src]);
   if (!src || hasImageErrored) {
     return (0, _react2.jsx)("span", {
-      css: [avatarDefaultIconStyles, nestedAvatarStyles[size]]
-    }, appearance === 'circle' ? (0, _react2.jsx)(_person.default, {
+      css: [(0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') ? avatarDefaultIconVisualRefreshStyles : avatarDefaultIconStyles, nestedAvatarStyles[size]]
+    }, appearance === 'circle' ? (0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') ? (0, _react2.jsx)(_person.default, {
       label: alt,
-      primaryColor: ICON_BACKGROUND,
-      secondaryColor: ICON_COLOR,
+      color: "var(--ds-icon-subtle, #626F86)",
+      testId: testId && "".concat(testId, "--person"),
+      spacing: "spacious"
+    }) : (0, _react2.jsx)(_person2.default, {
+      label: alt,
+      primaryColor: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
+      secondaryColor: "var(--ds-icon-subtle, ".concat(_colors.N90, ")"),
       testId: testId && "".concat(testId, "--person"),
       "aria-hidden": isHidden
+    }) : (0, _platformFeatureFlags.fg)('platform.design-system-team.component-visual-refresh_t8zbo') ? (0, _react2.jsx)(_release.default, {
+      label: alt,
+      color: "var(--ds-icon-subtle, #626F86)",
+      testId: testId && "".concat(testId, "--ship"),
+      spacing: "spacious"
     }) : (0, _react2.jsx)(_ship.default, {
       label: alt,
-      primaryColor: ICON_BACKGROUND,
-      secondaryColor: ICON_COLOR,
+      primaryColor: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
+      secondaryColor: "var(--ds-icon-subtle, ".concat(_colors.N90, ")"),
       testId: testId && "".concat(testId, "--ship"),
       "aria-hidden": isHidden
     }));

package/dist/es2019/Avatar.js

@@ -9,6 +9,7 @@ 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 { fg } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N70A } from '@atlaskit/theme/colors';
 import AvatarImage from './AvatarImage';
 import { ACTIVE_SCALE_FACTOR, AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH } from './constants';
@@ -17,7 +18,7 @@ import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 const packageName = "@atlaskit/avatar";
-const packageVersion = "21.10.3";
+const packageVersion = "21.11.0";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
@@ -25,7 +26,7 @@ const getStyles = (css, {
   size,
   radius,
   appearance,
-  borderColor = `var(--ds-surface-overlay, ${N0})`,
+  borderColor = fg('platform.design-system-team.component-visual-refresh_t8zbo') ? "var(--ds-surface, #FFFFFF)" : `var(--ds-surface-overlay, ${N0})`,
   stackIndex,
   isInteractive,
   isDisabled

package/dist/es2019/AvatarImage.js

@@ -7,17 +7,24 @@ 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 PersonIcon from '@atlaskit/icon/glyph/person';
+import PersonIcon from '@atlaskit/icon/core/person';
+import ReleaseIcon from '@atlaskit/icon/core/release';
+import PersonIconLegacy from '@atlaskit/icon/glyph/person';
 import ShipIcon from '@atlaskit/icon/glyph/ship';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N90 } from '@atlaskit/theme/colors';
 import { AVATAR_RADIUS, AVATAR_SIZES } from './constants';
-export const ICON_BACKGROUND = `var(--ds-icon-inverse, ${N0})`;
-export const ICON_COLOR = `var(--ds-icon-subtle, ${N90})`;
 const avatarDefaultIconStyles = css({
   display: 'block',
   width: '100%',
   height: '100%',
-  backgroundColor: ICON_COLOR
+  backgroundColor: `var(--ds-icon-subtle, ${N90})`
+});
+const avatarDefaultIconVisualRefreshStyles = css({
+  display: 'block',
+  width: '100%',
+  height: '100%',
+  backgroundColor: "var(--ds-background-accent-gray-subtler, #DCDFE4)"
 });
 const nestedAvatarStyles = Object.entries(AVATAR_SIZES).reduce((styles, [key, size]) => {
   return {
@@ -62,17 +69,27 @@ const AvatarImage = ({
   }, [src]);
   if (!src || hasImageErrored) {
     return jsx("span", {
-      css: [avatarDefaultIconStyles, nestedAvatarStyles[size]]
-    }, appearance === 'circle' ? jsx(PersonIcon, {
+      css: [fg('platform.design-system-team.component-visual-refresh_t8zbo') ? avatarDefaultIconVisualRefreshStyles : avatarDefaultIconStyles, nestedAvatarStyles[size]]
+    }, appearance === 'circle' ? fg('platform.design-system-team.component-visual-refresh_t8zbo') ? jsx(PersonIcon, {
       label: alt,
-      primaryColor: ICON_BACKGROUND,
-      secondaryColor: ICON_COLOR,
+      color: "var(--ds-icon-subtle, #626F86)",
+      testId: testId && `${testId}--person`,
+      spacing: "spacious"
+    }) : jsx(PersonIconLegacy, {
+      label: alt,
+      primaryColor: `var(--ds-icon-inverse, ${N0})`,
+      secondaryColor: `var(--ds-icon-subtle, ${N90})`,
       testId: testId && `${testId}--person`,
       "aria-hidden": isHidden
+    }) : fg('platform.design-system-team.component-visual-refresh_t8zbo') ? jsx(ReleaseIcon, {
+      label: alt,
+      color: "var(--ds-icon-subtle, #626F86)",
+      testId: testId && `${testId}--ship`,
+      spacing: "spacious"
     }) : jsx(ShipIcon, {
       label: alt,
-      primaryColor: ICON_BACKGROUND,
-      secondaryColor: ICON_COLOR,
+      primaryColor: `var(--ds-icon-inverse, ${N0})`,
+      secondaryColor: `var(--ds-icon-subtle, ${N90})`,
       testId: testId && `${testId}--ship`,
       "aria-hidden": isHidden
     }));

package/dist/esm/Avatar.js

@@ -14,6 +14,7 @@ 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 { fg } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N70A } from '@atlaskit/theme/colors';
 import AvatarImage from './AvatarImage';
 import { ACTIVE_SCALE_FACTOR, AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH } from './constants';
@@ -22,7 +23,7 @@ import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.10.3";
+var packageVersion = "21.11.0";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
@@ -31,7 +32,7 @@ var getStyles = function getStyles(css, _ref) {
     radius = _ref.radius,
     appearance = _ref.appearance,
     _ref$borderColor = _ref.borderColor,
-    borderColor = _ref$borderColor === void 0 ? "var(--ds-surface-overlay, ".concat(N0, ")") : _ref$borderColor,
+    borderColor = _ref$borderColor === void 0 ? fg('platform.design-system-team.component-visual-refresh_t8zbo') ? "var(--ds-surface, #FFFFFF)" : "var(--ds-surface-overlay, ".concat(N0, ")") : _ref$borderColor,
     stackIndex = _ref.stackIndex,
     isInteractive = _ref.isInteractive,
     isDisabled = _ref.isDisabled;

package/dist/esm/AvatarImage.js

@@ -11,17 +11,24 @@ 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 PersonIcon from '@atlaskit/icon/glyph/person';
+import PersonIcon from '@atlaskit/icon/core/person';
+import ReleaseIcon from '@atlaskit/icon/core/release';
+import PersonIconLegacy from '@atlaskit/icon/glyph/person';
 import ShipIcon from '@atlaskit/icon/glyph/ship';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N90 } from '@atlaskit/theme/colors';
 import { AVATAR_RADIUS, AVATAR_SIZES } from './constants';
-export var ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat(N0, ")");
-export var ICON_COLOR = "var(--ds-icon-subtle, ".concat(N90, ")");
 var avatarDefaultIconStyles = css({
   display: 'block',
   width: '100%',
   height: '100%',
-  backgroundColor: ICON_COLOR
+  backgroundColor: "var(--ds-icon-subtle, ".concat(N90, ")")
+});
+var avatarDefaultIconVisualRefreshStyles = css({
+  display: 'block',
+  width: '100%',
+  height: '100%',
+  backgroundColor: "var(--ds-background-accent-gray-subtler, #DCDFE4)"
 });
 var nestedAvatarStyles = Object.entries(AVATAR_SIZES).reduce(function (styles, _ref) {
   var _ref2 = _slicedToArray(_ref, 2),
@@ -69,17 +76,27 @@ var AvatarImage = function AvatarImage(_ref3) {
   }, [src]);
   if (!src || hasImageErrored) {
     return jsx("span", {
-      css: [avatarDefaultIconStyles, nestedAvatarStyles[size]]
-    }, appearance === 'circle' ? jsx(PersonIcon, {
+      css: [fg('platform.design-system-team.component-visual-refresh_t8zbo') ? avatarDefaultIconVisualRefreshStyles : avatarDefaultIconStyles, nestedAvatarStyles[size]]
+    }, appearance === 'circle' ? fg('platform.design-system-team.component-visual-refresh_t8zbo') ? jsx(PersonIcon, {
       label: alt,
-      primaryColor: ICON_BACKGROUND,
-      secondaryColor: ICON_COLOR,
+      color: "var(--ds-icon-subtle, #626F86)",
+      testId: testId && "".concat(testId, "--person"),
+      spacing: "spacious"
+    }) : jsx(PersonIconLegacy, {
+      label: alt,
+      primaryColor: "var(--ds-icon-inverse, ".concat(N0, ")"),
+      secondaryColor: "var(--ds-icon-subtle, ".concat(N90, ")"),
       testId: testId && "".concat(testId, "--person"),
       "aria-hidden": isHidden
+    }) : fg('platform.design-system-team.component-visual-refresh_t8zbo') ? jsx(ReleaseIcon, {
+      label: alt,
+      color: "var(--ds-icon-subtle, #626F86)",
+      testId: testId && "".concat(testId, "--ship"),
+      spacing: "spacious"
     }) : jsx(ShipIcon, {
       label: alt,
-      primaryColor: ICON_BACKGROUND,
-      secondaryColor: ICON_COLOR,
+      primaryColor: "var(--ds-icon-inverse, ".concat(N0, ")"),
+      secondaryColor: "var(--ds-icon-subtle, ".concat(N90, ")"),
       testId: testId && "".concat(testId, "--ship"),
       "aria-hidden": isHidden
     }));

package/dist/types/AvatarImage.d.ts

@@ -11,8 +11,6 @@ interface AvatarImageProps {
     src?: string;
     testId?: string;
 }
-export declare const ICON_BACKGROUND: "var(--ds-icon-inverse)";
-export declare const ICON_COLOR: "var(--ds-icon-subtle)";
 /**
  * __Avatar image__
  *

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

@@ -11,8 +11,6 @@ interface AvatarImageProps {
     src?: string;
     testId?: string;
 }
-export declare const ICON_BACKGROUND: "var(--ds-icon-inverse)";
-export declare const ICON_COLOR: "var(--ds-icon-subtle)";
 /**
  * __Avatar image__
  *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "21.10.3",
+	"version": "21.11.0",
 	"description": "An avatar is a visual representation of a user or entity.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -46,8 +46,8 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^9.3.0",
 		"@atlaskit/icon": "^22.5.0",
-		"@atlaskit/platform-feature-flags": "^0.2.0",
-		"@atlaskit/primitives": "^9.0.0",
+		"@atlaskit/platform-feature-flags": "^0.3.0",
+		"@atlaskit/primitives": "^10.0.0",
 		"@atlaskit/theme": "^12.11.0",
 		"@atlaskit/tokens": "^1.53.0",
 		"@babel/runtime": "^7.0.0",
@@ -66,10 +66,10 @@
 		"@atlaskit/textfield": "^6.4.0",
 		"@atlaskit/tooltip": "^18.5.0",
 		"@atlaskit/visual-regression": "*",
+		"@atlassian/feature-flags-test-utils": "*",
 		"@emotion/styled": "^11.0.0",
 		"@testing-library/react": "^12.1.5",
 		"@types/jscodeshift": "^0.11.0",
-		"color-contrast-checker": "^1.5.0",
 		"jest-in-case": "^1.0.2",
 		"jscodeshift": "^0.13.0",
 		"react-dom": "^16.8.0",
@@ -105,6 +105,9 @@
 	"platform-feature-flags": {
 		"platform.design-system-team.avatar-item-font-size_830x6": {
 			"type": "boolean"
+		},
+		"platform.design-system-team.component-visual-refresh_t8zbo": {
+			"type": "boolean"
 		}
 	}
 }