@atlaskit/avatar - npm Package Compare versions

Comparing version 21.10.4 to 21.11.0

dist/cjs/Avatar.js

@@ -14,2 +14,3 @@ "use strict";
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
@@ -32,3 +33,3 @@ var _AvatarImage = _interopRequireDefault(require("./AvatarImage"));
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.10.4";
+var packageVersion = "21.11.0";
 
@@ -42,3 +43,3 @@ // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
     _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,
@@ -45,0 +46,0 @@ isInteractive = _ref.isInteractive,

dist/cjs/AvatarImage.js

@@ -7,3 +7,3 @@ "use strict";
 });
-exports.default = exports.ICON_COLOR = exports.ICON_BACKGROUND = void 0;
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -13,4 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 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");
@@ -23,4 +26,2 @@ var _constants = require("./constants");
 // 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)({
@@ -30,4 +31,10 @@ display: 'block',
   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) {
@@ -79,13 +86,23 @@ var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
     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"),
@@ -92,0 +109,0 @@ "aria-hidden": isHidden

dist/es2019/Avatar.js

@@ -12,2 +12,3 @@ /**
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N70A } from '@atlaskit/theme/colors';
@@ -21,3 +22,3 @@ import AvatarImage from './AvatarImage';
 const packageName = "@atlaskit/avatar";
-const packageVersion = "21.10.4";
+const packageVersion = "21.11.0";
 
@@ -30,3 +31,3 @@ // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
   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,
@@ -33,0 +34,0 @@ isInteractive,

dist/es2019/AvatarImage.js

@@ -10,8 +10,9 @@ /**
 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({
@@ -21,4 +22,10 @@ display: 'block',
   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]) => {
@@ -67,13 +74,23 @@ return {
     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`,
@@ -80,0 +97,0 @@ "aria-hidden": isHidden

dist/esm/Avatar.js

@@ -17,2 +17,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N70A } from '@atlaskit/theme/colors';
@@ -26,3 +27,3 @@ import AvatarImage from './AvatarImage';
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.10.4";
+var packageVersion = "21.11.0";
 
@@ -36,3 +37,3 @@ // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
     _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,
@@ -39,0 +40,0 @@ isInteractive = _ref.isInteractive,

dist/esm/AvatarImage.js

@@ -14,8 +14,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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({
@@ -25,4 +26,10 @@ display: 'block',
   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) {
@@ -74,13 +81,23 @@ var _ref2 = _slicedToArray(_ref, 2),
     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"),
@@ -87,0 +104,0 @@ "aria-hidden": isHidden

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

@@ -14,4 +14,2 @@ /**
 }
-export declare const ICON_BACKGROUND: "var(--ds-icon-inverse)";
-export declare const ICON_COLOR: "var(--ds-icon-subtle)";
 /**
@@ -18,0 +16,0 @@ * __Avatar image__

dist/types/AvatarImage.d.ts

@@ -14,4 +14,2 @@ /**
 }
-export declare const ICON_BACKGROUND: "var(--ds-icon-inverse)";
-export declare const ICON_COLOR: "var(--ds-icon-subtle)";
 /**
@@ -18,0 +16,0 @@ * __Avatar image__

package.json

 {
 	"name": "@atlaskit/avatar",
-	"version": "21.10.4",
+	"version": "21.11.0",
 	"description": "An avatar is a visual representation of a user or entity.",
@@ -69,6 +69,6 @@ "publishConfig": {
 		"@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",
@@ -109,4 +109,7 @@ "jscodeshift": "^0.13.0",
 			"type": "boolean"
+		},
+		"platform.design-system-team.component-visual-refresh_t8zbo": {
+			"type": "boolean"
 		}
 	}
 }

No alert changes

Improved metrics

Total package byte prevSize

261651

increased by1.42%

Lines of code

4496

increased by1.12%

No dependency changes