@atlaskit/avatar - npm Package Compare versions

Comparing version 21.2.0 to 21.2.1

CHANGELOG.md

 # @atlaskit/avatar
 
+## 21.2.1
+
+### Patch Changes
+
+- [`4ba10567310`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ba10567310) - Internal changes.
+
 ## 21.2.0
@@ -4,0 +10,0 @@

dist/cjs/Avatar.js

@@ -20,6 +20,11 @@ "use strict";
 var _templateObject;
+/** @jsx jsx */
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.2.0";
+var packageVersion = "21.2.1";
+
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
 var getStyles = function getStyles(css, _ref) {
@@ -35,3 +40,3 @@ var size = _ref.size,
   return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", ";\n    padding: ", ";\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: ", ";\n      padding: ", ";\n    }\n\n    &::after {\n      background-color: transparent;\n      bottom: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      left: 0px;\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      right: 0px;\n      top: 0px;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), 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    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", ";\n    padding: ", ";\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: ", ";\n      padding: ", ";\n    }\n\n    &::after {\n      background-color: transparent;\n      inset: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), 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      "))
   );
@@ -38,0 +43,0 @@ };

dist/cjs/AvatarItem.js

@@ -18,2 +18,4 @@ "use strict";
 var _templateObject;
+/** @jsx jsx */
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -20,0 +22,0 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

dist/cjs/constants.js

@@ -8,3 +8,3 @@ "use strict";
 var _constants = require("@atlaskit/theme/constants");
-// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match, @atlaskit/design-system/no-deprecated-imports
 
@@ -11,0 +11,0 @@ var AVATAR_SIZES = {

dist/cjs/Presence.js

@@ -17,2 +17,4 @@ "use strict";
 
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
 var BusyIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("circle", {
@@ -19,0 +21,0 @@ fill: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),

dist/cjs/Status.js

@@ -17,2 +17,4 @@ "use strict";
 
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
 var ApprovedIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("circle", {
@@ -19,0 +21,0 @@ fill: "var(--ds-icon-success, ".concat(_colors.G400, ")"),

dist/cjs/Text.js

@@ -12,3 +12,3 @@ "use strict";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 var getStyles = function getStyles(isSecondary, shouldTruncate) {
@@ -15,0 +15,0 @@ return (0, _react.css)(_objectSpread(_objectSpread({

dist/cjs/version.json

 {
 	"name": "@atlaskit/avatar",
-	"version": "21.2.0",
+	"version": "21.2.1",
 	"sideEffects": false
 }

dist/es2019/Avatar.js

@@ -13,3 +13,6 @@ /** @jsx jsx */
 const packageName = "@atlaskit/avatar";
-const packageVersion = "21.2.0";
+const packageVersion = "21.2.1";
+
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
 const getStyles = (css, {
@@ -58,3 +61,3 @@ size,
       background-color: transparent;
-      bottom: 0px;
+      inset: 0px;
 
@@ -64,8 +67,5 @@ /* Added border-radius style to fix hover issue in safari */
       content: ' ';
-      left: 0px;
       opacity: 0;
       pointer-events: none;
       position: absolute;
-      right: 0px;
-      top: 0px;
       transition: opacity 200ms;
@@ -72,0 +72,0 @@ width: 100%;

dist/es2019/constants.js

@@ -1,2 +0,2 @@
-// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match, @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
@@ -3,0 +3,0 @@ export const AVATAR_SIZES = {

dist/es2019/Presence.js

@@ -6,2 +6,5 @@ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import IconWrapper from './IconWrapper';
+
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
 const BusyIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
@@ -8,0 +11,0 @@ fill: `var(--ds-icon-danger, ${R300})`,

dist/es2019/Status.js

@@ -6,2 +6,5 @@ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import IconWrapper from './IconWrapper';
+
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
 const ApprovedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
@@ -8,0 +11,0 @@ fill: `var(--ds-icon-success, ${G400})`,

dist/es2019/version.json

 {
 	"name": "@atlaskit/avatar",
-	"version": "21.2.0",
+	"version": "21.2.1",
 	"sideEffects": false
 }

dist/esm/Avatar.js

@@ -18,3 +18,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.2.0";
+var packageVersion = "21.2.1";
+
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
 var getStyles = function getStyles(css, _ref) {
@@ -30,3 +33,3 @@ var size = _ref.size,
   return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", ";\n    padding: ", ";\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: ", ";\n      padding: ", ";\n    }\n\n    &::after {\n      background-color: transparent;\n      bottom: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      left: 0px;\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      right: 0px;\n      top: 0px;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), 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    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", ";\n    padding: ", ";\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: ", ";\n      padding: ", ";\n    }\n\n    &::after {\n      background-color: transparent;\n      inset: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), 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      "))
   );
@@ -33,0 +36,0 @@ };

dist/esm/constants.js

@@ -1,2 +0,2 @@
-// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match, @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
@@ -3,0 +3,0 @@ export var AVATAR_SIZES = {

dist/esm/Presence.js

@@ -6,2 +6,5 @@ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import IconWrapper from './IconWrapper';
+
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
 var BusyIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
@@ -8,0 +11,0 @@ fill: "var(--ds-icon-danger, ".concat(R300, ")"),

dist/esm/Status.js

@@ -6,2 +6,5 @@ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import IconWrapper from './IconWrapper';
+
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
 var ApprovedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
@@ -8,0 +11,0 @@ fill: "var(--ds-icon-success, ".concat(G400, ")"),

dist/esm/version.json

 {
 	"name": "@atlaskit/avatar",
-	"version": "21.2.0",
+	"version": "21.2.1",
 	"sideEffects": false
 }

package.json

 {
   "name": "@atlaskit/avatar",
-  "version": "21.2.0",
+  "version": "21.2.1",
   "description": "An avatar is a visual representation of a user or entity.",
@@ -37,3 +37,3 @@ "publishConfig": {
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/theme": "^12.2.0",
+    "@atlaskit/theme": "^12.4.0",
     "@atlaskit/tokens": "^1.2.0",
@@ -48,3 +48,3 @@ "@babel/runtime": "^7.0.0",
   "devDependencies": {
-    "@atlaskit/button": "^16.5.0",
+    "@atlaskit/button": "^16.6.0",
     "@atlaskit/docs": "*",
@@ -51,0 +51,0 @@ "@atlaskit/ds-lib": "^2.1.1",

No alert changes

Improved metrics

Total package byte prevSize

215232

increased by0.51%

Lines of code

3864

increased by0.29%

Dependency changes

• Updated@atlaskit/theme@^12.4.0