@atlaskit/avatar 21.3.5 → 21.3.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/avatar
 
+## 21.3.6
+
+### Patch Changes
+
+- [`599bfe90ee3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/599bfe90ee3) - Internal change to use shape tokens. There is no expected visual change.
+
 ## 21.3.5
 
 ### Patch Changes

package/dist/cjs/Avatar.js

@@ -22,7 +22,7 @@ var _templateObject;
 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.3.5";
+var packageVersion = "21.3.6";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 

package/dist/cjs/AvatarItem.js

@@ -24,14 +24,14 @@ var avatarItemStyles = (0, _react2.css)({
   maxWidth: '100%',
   paddingLeft: "var(--ds-space-100, 8px)",
   flex: '1 1 100%',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   lineHeight: '1.4'
 });
 var getStyles = function getStyles(css, _ref) {
   var backgroundColor = _ref.backgroundColor,
     isInteractive = _ref.isInteractive,
     isDisabled = _ref.isDisabled;
-  return (// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing, @repo/internal/react/no-css-string-literals
+  return (// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @repo/internal/react/no-css-string-literals
     css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    align-items: center;\n    background-color: ", ";\n    border-radius: ", "px;\n    border: ", "px solid transparent;\n    box-sizing: border-box;\n    color: inherit;\n    display: flex;\n    font-size: inherit;\n    font-style: normal;\n    font-weight: normal;\n    line-height: 1;\n    outline: none;\n    margin: ", ";\n    padding: ", ";\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, (0, _constants.borderRadius)(), _constants2.BORDER_WIDTH, "var(--ds-space-0, 0px)", "var(--ds-space-050, 4px)", isInteractive && "\n        :hover {\n          background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ", "var(--ds-border-focused, ".concat(_colors.B200, ")"), ";\n        }\n\n        :active {\n          background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.B50, ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: ".concat("var(--ds-opacity-disabled, 0.5)", ";\n        pointer-events: none;\n      "))
   );
 };

package/dist/cjs/IconWrapper.js

@@ -17,7 +17,7 @@ var iconWrapperStyles = (0, _react.css)({
   height: '100%',
   alignItems: 'center',
   alignContent: 'center',
-  borderRadius: '50%',
+  borderRadius: "var(--ds-border-radius-circle, 50%)",
   overflow: 'hidden'
 });
 

package/dist/cjs/Skeleton.js

@@ -32,11 +32,12 @@ var radiusStyles = Object.entries(_constants.AVATAR_RADIUS).reduce(function (sty
     key = _ref4[0],
     size = _ref4[1];
   return _objectSpread(_objectSpread({}, styles), {}, (0, _defineProperty2.default)({}, key, (0, _react.css)({
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     borderRadius: "".concat(size, "px")
   })));
 }, {});
 var defaultRadiusStyles = (0, _react.css)({
-  borderRadius: '50%'
+  borderRadius: "var(--ds-border-radius-circle, 50%)"
 });
 var strongOpacityStyles = (0, _react.css)({
   opacity: 0.3

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "21.3.5",
+	"version": "21.3.6",
 	"sideEffects": false
 }

package/dist/es2019/Avatar.js

@@ -10,7 +10,7 @@ import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 const packageName = "@atlaskit/avatar";
-const packageVersion = "21.3.5";
+const packageVersion = "21.3.6";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 

package/dist/es2019/AvatarItem.js

@@ -12,7 +12,7 @@ const avatarItemStyles = css({
   maxWidth: '100%',
   paddingLeft: "var(--ds-space-100, 8px)",
   flex: '1 1 100%',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   lineHeight: '1.4'
 });
 const getStyles = (css, {
@@ -20,7 +20,7 @@ const getStyles = (css, {
   isInteractive,
   isDisabled
 }) =>
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing, @repo/internal/react/no-css-string-literals
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @repo/internal/react/no-css-string-literals
 css`
     align-items: center;
     background-color: ${backgroundColor};

package/dist/es2019/IconWrapper.js

@@ -11,7 +11,7 @@ const iconWrapperStyles = css({
   height: '100%',
   alignItems: 'center',
   alignContent: 'center',
-  borderRadius: '50%',
+  borderRadius: "var(--ds-border-radius-circle, 50%)",
   overflow: 'hidden'
 });
 

package/dist/es2019/Skeleton.js

@@ -23,12 +23,13 @@ const radiusStyles = Object.entries(AVATAR_RADIUS).reduce((styles, [key, size])
   return {
     ...styles,
     [key]: css({
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
       borderRadius: `${size}px`
     })
   };
 }, {});
 const defaultRadiusStyles = css({
-  borderRadius: '50%'
+  borderRadius: "var(--ds-border-radius-circle, 50%)"
 });
 const strongOpacityStyles = css({
   opacity: 0.3

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "21.3.5",
+	"version": "21.3.6",
 	"sideEffects": false
 }

package/dist/esm/Avatar.js

@@ -15,7 +15,7 @@ import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.3.5";
+var packageVersion = "21.3.6";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 

package/dist/esm/AvatarItem.js

@@ -17,14 +17,14 @@ var avatarItemStyles = css({
   maxWidth: '100%',
   paddingLeft: "var(--ds-space-100, 8px)",
   flex: '1 1 100%',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   lineHeight: '1.4'
 });
 var getStyles = function getStyles(css, _ref) {
   var backgroundColor = _ref.backgroundColor,
     isInteractive = _ref.isInteractive,
     isDisabled = _ref.isDisabled;
-  return (// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing, @repo/internal/react/no-css-string-literals
+  return (// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @repo/internal/react/no-css-string-literals
     css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    align-items: center;\n    background-color: ", ";\n    border-radius: ", "px;\n    border: ", "px solid transparent;\n    box-sizing: border-box;\n    color: inherit;\n    display: flex;\n    font-size: inherit;\n    font-style: normal;\n    font-weight: normal;\n    line-height: 1;\n    outline: none;\n    margin: ", ";\n    padding: ", ";\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, borderRadius(), BORDER_WIDTH, "var(--ds-space-0, 0px)", "var(--ds-space-050, 4px)", isInteractive && "\n        :hover {\n          background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ", "var(--ds-border-focused, ".concat(B200, ")"), ";\n        }\n\n        :active {\n          background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat(B50, ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: ".concat("var(--ds-opacity-disabled, 0.5)", ";\n        pointer-events: none;\n      "))
   );
 };

package/dist/esm/IconWrapper.js

@@ -11,7 +11,7 @@ var iconWrapperStyles = css({
   height: '100%',
   alignItems: 'center',
   alignContent: 'center',
-  borderRadius: '50%',
+  borderRadius: "var(--ds-border-radius-circle, 50%)",
   overflow: 'hidden'
 });
 

package/dist/esm/Skeleton.js

@@ -28,11 +28,12 @@ var radiusStyles = Object.entries(AVATAR_RADIUS).reduce(function (styles, _ref3)
     key = _ref4[0],
     size = _ref4[1];
   return _objectSpread(_objectSpread({}, styles), {}, _defineProperty({}, key, css({
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     borderRadius: "".concat(size, "px")
   })));
 }, {});
 var defaultRadiusStyles = css({
-  borderRadius: '50%'
+  borderRadius: "var(--ds-border-radius-circle, 50%)"
 });
 var strongOpacityStyles = css({
   opacity: 0.3

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "21.3.5",
+	"version": "21.3.6",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/avatar",
-  "version": "21.3.5",
+  "version": "21.3.6",
   "description": "An avatar is a visual representation of a user or entity.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -43,7 +43,7 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.9.0",
+    "@atlaskit/tokens": "^1.11.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0"