@atlaskit/avatar - npm Package Compare versions

Comparing version 21.12.1 to 21.13.0

dist/cjs/Avatar.js

@@ -14,2 +14,3 @@ "use strict";
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -33,3 +34,10 @@ var _colors = require("@atlaskit/theme/colors");
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.12.1";
+var packageVersion = "21.13.0";
+var getTestId = function getTestId(testId, children) {
+  return !children ? {
+    'data-testid': "".concat(testId, "--inner")
+  } : {
+    testId: "".concat(testId, "--inner")
+  };
+};
 
@@ -48,3 +56,3 @@ // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
   return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t\talign-items: stretch;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", ";\n\t\tbox-sizing: content-box;\n\t\tcursor: inherit;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\toutline: none;\n\t\toverflow: hidden;\n\t\tposition: static;\n\t\ttransform: translateZ(0);\n\t\ttransition:\n\t\t\ttransform 200ms,\n\t\t\topacity 200ms;\n\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\tborder: none;\n\t\tmargin: ", ";\n\t\tpadding: ", ";\n\n\t\t&::-moz-focus-inner {\n\t\t\tborder: 0;\n\t\t\tmargin: ", ";\n\t\t\tpadding: ", ";\n\t\t}\n\n\t\t&::after {\n\t\t\tbackground-color: transparent;\n\t\t\tinset: 0px;\n\n\t\t\t/* Added border-radius style to fix hover issue in safari */\n\t\t\tborder-radius: ", ";\n\t\t\tcontent: ' ';\n\t\t\topacity: 0;\n\t\t\tpointer-events: none;\n\t\t\tposition: absolute;\n\t\t\ttransition: opacity 200ms;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n    ", "\n\t"])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), _constants.BORDER_WIDTH, borderColor, "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(_constants.BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(_colors.B300, ")"), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ", "var(--ds-interaction-hovered, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ", "var(--ds-interaction-pressed, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(").concat(_constants.ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n          pointer-events: none;\n          background-color: ", "var(--ds-surface, ".concat(_colors.N0, ")"), ";\n        }\n      "))
+    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t\talign-items: stretch;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", ";\n\t\tbox-sizing: content-box;\n\t\tcursor: inherit;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\toutline: none;\n\t\toverflow: hidden;\n\t\tposition: static;\n\t\ttransform: translateZ(0);\n\t\ttransition:\n\t\t\ttransform 200ms,\n\t\t\topacity 200ms;\n\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\tborder: none;\n\t\tmargin: ", ";\n\t\tpadding: ", ";\n\n\t\t&::-moz-focus-inner {\n\t\t\tborder: 0;\n\t\t\tmargin: ", ";\n\t\t\tpadding: ", ";\n\t\t}\n\n\t\t&::after {\n\t\t\tbackground-color: transparent;\n\t\t\tinset: 0px;\n\n\t\t\t/* Added border-radius style to fix hover issue in safari */\n\t\t\tborder-radius: ", ";\n\t\t\tcontent: ' ';\n\t\t\topacity: 0;\n\t\t\tpointer-events: none;\n\t\t\tposition: absolute;\n\t\t\ttransition: opacity 200ms;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t:focus {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n    ", "\n\t"])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), _constants.BORDER_WIDTH, borderColor, "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :hover {\n        &::after {\n          background-color: ".concat("var(--ds-interaction-hovered, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ", "var(--ds-interaction-pressed, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(", _constants.ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n          pointer-events: none;\n          background-color: ", "var(--ds-surface, ".concat(_colors.N0, ")"), ";\n        }\n      "))
   );
@@ -129,9 +137,2 @@ };
   }, [createAnalyticsEvent, isDisabled, onClick]);
-  var getTestId = function getTestId(testId, children) {
-    return !children ? {
-      'data-testid': "".concat(testId, "--inner")
-    } : {
-      testId: "".concat(testId, "--inner")
-    };
-  };
   var componentProps = function componentProps() {
@@ -197,3 +198,7 @@ if (isDisabled) {
     });
-    return children ? children(props) : /*#__PURE__*/(0, _react.createElement)((0, _utilities.getCustomElement)(isDisabled, href, onClick), props);
+    if (children) {
+      return children(props);
+    }
+    var element = (0, _utilities.getCustomElement)(isDisabled, href, onClick);
+    return element === 'a' || element === 'button' ? (0, _react2.jsx)(_focusRing.default, null, /*#__PURE__*/(0, _react.createElement)(element, props)) : ( /*#__PURE__*/(0, _react.createElement)(element, props));
   }), isPresence && (0, _react2.jsx)(_Presence.PresenceWrapper, {
@@ -200,0 +205,0 @@ appearance: appearance,

dist/es2019/Avatar.js

@@ -12,4 +12,5 @@ /**
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import FocusRing from '@atlaskit/focus-ring';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { B300, N0, N70A } from '@atlaskit/theme/colors';
+import { N0, N70A } from '@atlaskit/theme/colors';
 import AvatarImage from './AvatarImage';
@@ -22,3 +23,8 @@ import { ACTIVE_SCALE_FACTOR, AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH } from './constants';
 const packageName = "@atlaskit/avatar";
-const packageVersion = "21.12.1";
+const packageVersion = "21.13.0";
+const getTestId = (testId, children) => !children ? {
+  'data-testid': `${testId}--inner`
+} : {
+  testId: `${testId}--inner`
+};
 
@@ -80,2 +86,6 @@ // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
+		:focus {
+			box-shadow: none;
+		}
+
 		${stackIndex && `position: relative;`}
@@ -86,7 +96,2 @@
 
-      :focus {
-        outline: none;
-        box-shadow: 0 0 0 ${BORDER_WIDTH}px ${`var(--ds-border-focused, ${B300})`}
-      }
-
       :hover {
@@ -205,7 +210,2 @@ &::after {
   }, [createAnalyticsEvent, isDisabled, onClick]);
-  const getTestId = (testId, children) => !children ? {
-    'data-testid': `${testId}--inner`
-  } : {
-    testId: `${testId}--inner`
-  };
   const componentProps = () => {
@@ -277,3 +277,7 @@ if (isDisabled) {
     };
-    return children ? children(props) : /*#__PURE__*/createElement(getCustomElement(isDisabled, href, onClick), props);
+    if (children) {
+      return children(props);
+    }
+    const element = getCustomElement(isDisabled, href, onClick);
+    return element === 'a' || element === 'button' ? jsx(FocusRing, null, /*#__PURE__*/createElement(element, props)) : ( /*#__PURE__*/createElement(element, props));
   }), isPresence && jsx(PresenceWrapper, {
@@ -280,0 +284,0 @@ appearance: appearance,

dist/esm/Avatar.js

@@ -17,4 +17,5 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import FocusRing from '@atlaskit/focus-ring';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { B300, N0, N70A } from '@atlaskit/theme/colors';
+import { N0, N70A } from '@atlaskit/theme/colors';
 import AvatarImage from './AvatarImage';
@@ -27,3 +28,10 @@ import { ACTIVE_SCALE_FACTOR, AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH } from './constants';
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.12.1";
+var packageVersion = "21.13.0";
+var getTestId = function getTestId(testId, children) {
+  return !children ? {
+    'data-testid': "".concat(testId, "--inner")
+  } : {
+    testId: "".concat(testId, "--inner")
+  };
+};
 
@@ -42,3 +50,3 @@ // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
   return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t\talign-items: stretch;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", ";\n\t\tbox-sizing: content-box;\n\t\tcursor: inherit;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\toutline: none;\n\t\toverflow: hidden;\n\t\tposition: static;\n\t\ttransform: translateZ(0);\n\t\ttransition:\n\t\t\ttransform 200ms,\n\t\t\topacity 200ms;\n\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\tborder: none;\n\t\tmargin: ", ";\n\t\tpadding: ", ";\n\n\t\t&::-moz-focus-inner {\n\t\t\tborder: 0;\n\t\t\tmargin: ", ";\n\t\t\tpadding: ", ";\n\t\t}\n\n\t\t&::after {\n\t\t\tbackground-color: transparent;\n\t\t\tinset: 0px;\n\n\t\t\t/* Added border-radius style to fix hover issue in safari */\n\t\t\tborder-radius: ", ";\n\t\t\tcontent: ' ';\n\t\t\topacity: 0;\n\t\t\tpointer-events: none;\n\t\t\tposition: absolute;\n\t\t\ttransition: opacity 200ms;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n    ", "\n\t"])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), BORDER_WIDTH, borderColor, "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(B300, ")"), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ", "var(--ds-interaction-hovered, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ", "var(--ds-interaction-pressed, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(").concat(ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n          pointer-events: none;\n          background-color: ", "var(--ds-surface, ".concat(N0, ")"), ";\n        }\n      "))
+    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t\talign-items: stretch;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", ";\n\t\tbox-sizing: content-box;\n\t\tcursor: inherit;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\toutline: none;\n\t\toverflow: hidden;\n\t\tposition: static;\n\t\ttransform: translateZ(0);\n\t\ttransition:\n\t\t\ttransform 200ms,\n\t\t\topacity 200ms;\n\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\tborder: none;\n\t\tmargin: ", ";\n\t\tpadding: ", ";\n\n\t\t&::-moz-focus-inner {\n\t\t\tborder: 0;\n\t\t\tmargin: ", ";\n\t\t\tpadding: ", ";\n\t\t}\n\n\t\t&::after {\n\t\t\tbackground-color: transparent;\n\t\t\tinset: 0px;\n\n\t\t\t/* Added border-radius style to fix hover issue in safari */\n\t\t\tborder-radius: ", ";\n\t\t\tcontent: ' ';\n\t\t\topacity: 0;\n\t\t\tpointer-events: none;\n\t\t\tposition: absolute;\n\t\t\ttransition: opacity 200ms;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t:focus {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n    ", "\n\t"])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), BORDER_WIDTH, borderColor, "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :hover {\n        &::after {\n          background-color: ".concat("var(--ds-interaction-hovered, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ", "var(--ds-interaction-pressed, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(", ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n          pointer-events: none;\n          background-color: ", "var(--ds-surface, ".concat(N0, ")"), ";\n        }\n      "))
   );
@@ -123,9 +131,2 @@ };
   }, [createAnalyticsEvent, isDisabled, onClick]);
-  var getTestId = function getTestId(testId, children) {
-    return !children ? {
-      'data-testid': "".concat(testId, "--inner")
-    } : {
-      testId: "".concat(testId, "--inner")
-    };
-  };
   var componentProps = function componentProps() {
@@ -191,3 +192,7 @@ if (isDisabled) {
     });
-    return children ? children(props) : /*#__PURE__*/createElement(getCustomElement(isDisabled, href, onClick), props);
+    if (children) {
+      return children(props);
+    }
+    var element = getCustomElement(isDisabled, href, onClick);
+    return element === 'a' || element === 'button' ? jsx(FocusRing, null, /*#__PURE__*/createElement(element, props)) : ( /*#__PURE__*/createElement(element, props));
   }), isPresence && jsx(PresenceWrapper, {
@@ -194,0 +199,0 @@ appearance: appearance,

package.json

 {
 	"name": "@atlaskit/avatar",
-	"version": "21.12.1",
+	"version": "21.13.0",
 	"description": "An avatar is a visual representation of a user or entity.",
@@ -48,3 +48,4 @@ "publishConfig": {
 		"@atlaskit/analytics-next": "^10.0.0",
-		"@atlaskit/icon": "^22.10.0",
+		"@atlaskit/focus-ring": "^1.5.0",
+		"@atlaskit/icon": "^22.11.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
@@ -68,3 +69,3 @@ "@atlaskit/primitives": "^11.1.0",
 		"@atlaskit/textfield": "^6.4.0",
-		"@atlaskit/tooltip": "^18.5.0",
+		"@atlaskit/tooltip": "^18.6.0",
 		"@atlaskit/visual-regression": "*",
@@ -71,0 +72,0 @@ "@atlassian/feature-flags-test-utils": "*",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

262823

increased by0.29%

Lines of code

4514

increased by0.29%

Worsened metrics

Dependency count

12

increased by9.09%

Dependency changes

• + Added@atlaskit/focus-ring@^1.5.0

• + Added@atlaskit/focus-ring@1.6.0(transitive)

• Updated@atlaskit/icon@^22.11.0