@atlaskit/avatar - npm Package Compare versions

Comparing version 21.8.0 to 21.9.0

dist/cjs/Avatar.js

@@ -27,3 +27,3 @@ "use strict";
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.8.0";
+var packageVersion = "21.9.0";
 
@@ -30,0 +30,0 @@ // eslint-disable-next-line @repo/internal/react/consistent-types-definitions

dist/cjs/AvatarItem.js

@@ -12,6 +12,7 @@ "use strict";
 var _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _constants2 = require("./constants");
-var _Text = _interopRequireDefault(require("./Text"));
 var _utilities = require("./utilities");
@@ -30,2 +31,15 @@ var _templateObject;
 });
+var secondaryTextOldStyles = (0, _react2.css)({
+  color: "var(--ds-text-subtlest, #626F86)",
+  fontSize: '0.85em'
+});
+var baseTextStyles = (0, _react2.css)({
+  display: 'block',
+  color: "var(--ds-text, #172B4D)"
+});
+var truncationStyles = (0, _react2.css)({
+  overflowX: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
 var getStyles = function getStyles(css, _ref) {
@@ -95,8 +109,13 @@ var backgroundColor = _ref.backgroundColor,
         css: avatarItemStyles
-      }, (0, _react2.jsx)(_Text.default, {
-        shouldTruncate: !isTruncationDisabled
-      }, primaryText), (0, _react2.jsx)(_Text.default, {
-        isSecondary: true,
-        shouldTruncate: !isTruncationDisabled
-      }, secondaryText)))
+      }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.avatar-item-font-size_830x6') ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_primitives.Text, {
+        maxLines: isTruncationDisabled ? undefined : 1
+      }, primaryText), (0, _react2.jsx)(_primitives.Text, {
+        color: "color.text.subtlest",
+        maxLines: isTruncationDisabled ? undefined : 1,
+        size: "UNSAFE_small"
+      }, secondaryText)) : (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("span", {
+        css: [baseTextStyles, !isTruncationDisabled && truncationStyles]
+      }, primaryText), (0, _react2.jsx)("span", {
+        css: [baseTextStyles, secondaryTextOldStyles, !isTruncationDisabled && truncationStyles]
+      }, secondaryText))))
     });
@@ -103,0 +122,0 @@ return children ? children(props) : /*#__PURE__*/(0, _react.createElement)((0, _utilities.getCustomElement)(isDisabled, href, onClick), props);

dist/es2019/Avatar.js

@@ -15,3 +15,3 @@ /** @jsx jsx */
 const packageName = "@atlaskit/avatar";
-const packageVersion = "21.8.0";
+const packageVersion = "21.9.0";
 
@@ -18,0 +18,0 @@ // eslint-disable-next-line @repo/internal/react/consistent-types-definitions

dist/es2019/AvatarItem.js

@@ -5,6 +5,7 @@ /** @jsx jsx */
 import { ClassNames, css, jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { Text } from '@atlaskit/primitives';
 import { B200, B50, N30 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { BORDER_WIDTH } from './constants';
-import Text from './Text';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
@@ -18,2 +19,15 @@ const avatarItemStyles = css({
 });
+const secondaryTextOldStyles = css({
+  color: "var(--ds-text-subtlest, #626F86)",
+  fontSize: '0.85em'
+});
+const baseTextStyles = css({
+  display: 'block',
+  color: "var(--ds-text, #172B4D)"
+});
+const truncationStyles = css({
+  overflowX: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
 const getStyles = (css, {
@@ -127,8 +141,13 @@ backgroundColor,
         css: avatarItemStyles
-      }, jsx(Text, {
-        shouldTruncate: !isTruncationDisabled
+      }, getBooleanFF('platform.design-system-team.avatar-item-font-size_830x6') ? jsx(Fragment, null, jsx(Text, {
+        maxLines: isTruncationDisabled ? undefined : 1
       }, primaryText), jsx(Text, {
-        isSecondary: true,
-        shouldTruncate: !isTruncationDisabled
-      }, secondaryText)))
+        color: "color.text.subtlest",
+        maxLines: isTruncationDisabled ? undefined : 1,
+        size: "UNSAFE_small"
+      }, secondaryText)) : jsx(Fragment, null, jsx("span", {
+        css: [baseTextStyles, !isTruncationDisabled && truncationStyles]
+      }, primaryText), jsx("span", {
+        css: [baseTextStyles, secondaryTextOldStyles, !isTruncationDisabled && truncationStyles]
+      }, secondaryText))))
     };
@@ -135,0 +154,0 @@ return children ? children(props) : /*#__PURE__*/createElement(getCustomElement(isDisabled, href, onClick), props);

dist/esm/Avatar.js

@@ -20,3 +20,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.8.0";
+var packageVersion = "21.9.0";
 
@@ -23,0 +23,0 @@ // eslint-disable-next-line @repo/internal/react/consistent-types-definitions

dist/esm/AvatarItem.js

@@ -10,6 +10,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { ClassNames, css, jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { Text } from '@atlaskit/primitives';
 import { B200, B50, N30 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { BORDER_WIDTH } from './constants';
-import Text from './Text';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
@@ -23,2 +24,15 @@ var avatarItemStyles = css({
 });
+var secondaryTextOldStyles = css({
+  color: "var(--ds-text-subtlest, #626F86)",
+  fontSize: '0.85em'
+});
+var baseTextStyles = css({
+  display: 'block',
+  color: "var(--ds-text, #172B4D)"
+});
+var truncationStyles = css({
+  overflowX: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
 var getStyles = function getStyles(css, _ref) {
@@ -88,8 +102,13 @@ var backgroundColor = _ref.backgroundColor,
         css: avatarItemStyles
-      }, jsx(Text, {
-        shouldTruncate: !isTruncationDisabled
+      }, getBooleanFF('platform.design-system-team.avatar-item-font-size_830x6') ? jsx(Fragment, null, jsx(Text, {
+        maxLines: isTruncationDisabled ? undefined : 1
       }, primaryText), jsx(Text, {
-        isSecondary: true,
-        shouldTruncate: !isTruncationDisabled
-      }, secondaryText)))
+        color: "color.text.subtlest",
+        maxLines: isTruncationDisabled ? undefined : 1,
+        size: "UNSAFE_small"
+      }, secondaryText)) : jsx(Fragment, null, jsx("span", {
+        css: [baseTextStyles, !isTruncationDisabled && truncationStyles]
+      }, primaryText), jsx("span", {
+        css: [baseTextStyles, secondaryTextOldStyles, !isTruncationDisabled && truncationStyles]
+      }, secondaryText))))
     });
@@ -96,0 +115,0 @@ return children ? children(props) : /*#__PURE__*/createElement(getCustomElement(isDisabled, href, onClick), props);

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

 /** @jsx jsx */
-import { MouseEventHandler, ReactNode, Ref } from 'react';
-import { AvatarClickEventHandler } from './types';
+import { type MouseEventHandler, type ReactNode, type Ref } from 'react';
+import { type AvatarClickEventHandler } from './types';
 export interface CustomAvatarItemProps {
@@ -5,0 +5,0 @@ testId?: string;

dist/types/AvatarItem.d.ts

 /** @jsx jsx */
-import { MouseEventHandler, ReactNode, Ref } from 'react';
-import { AvatarClickEventHandler } from './types';
+import { type MouseEventHandler, type ReactNode, type Ref } from 'react';
+import { type AvatarClickEventHandler } from './types';
 export interface CustomAvatarItemProps {
@@ -5,0 +5,0 @@ testId?: string;

package.json

 {
   "name": "@atlaskit/avatar",
-  "version": "21.8.0",
+  "version": "21.9.0",
   "description": "An avatar is a visual representation of a user or entity.",
@@ -48,5 +48,7 @@ "publishConfig": {
     "@atlaskit/analytics-next": "^9.3.0",
-    "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.45.0",
+    "@atlaskit/icon": "^22.3.0",
+    "@atlaskit/platform-feature-flags": "^0.2.0",
+    "@atlaskit/primitives": "^6.1.0",
+    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/tokens": "^1.49.0",
     "@babel/runtime": "^7.0.0",
@@ -65,3 +67,4 @@ "@emotion/react": "^11.7.1",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tooltip": "^18.3.0",
+    "@atlaskit/textfield": "^6.3.0",
+    "@atlaskit/tooltip": "^18.4.0",
     "@atlaskit/visual-regression": "*",
@@ -105,3 +108,8 @@ "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
   "homepage": "https://atlassian.design/components/avatar/",
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
+  "platform-feature-flags": {
+    "platform.design-system-team.avatar-item-font-size_830x6": {
+      "type": "boolean"
+    }
+  }
 }

No alert changes

Worsened metrics

Total package byte prevSize

251388

Dependency count

11

increased by22.22%

Dev dependency count

17

increased by6.25%

Number of package files

106

decreased by-4.5%

Lines of code

4365

decreased by-1.49%

Dependency changes

• + Added@atlaskit/platform-feature-flags@^0.2.0

• + Added@atlaskit/primitives@^6.1.0

• + Added@atlaskit/app-provider@1.3.3(transitive)

• + Added@atlaskit/css@0.1.1(transitive)

• + Added@atlaskit/interaction-context@2.1.4(transitive)

• + Added@atlaskit/primitives@6.5.0(transitive)

• + Added@atlaskit/visually-hidden@1.4.0(transitive)

• + Added@compiled/react@0.17.2(transitive)

• + Addedtiny-invariant@1.3.3(transitive)

• Updated@atlaskit/icon@^22.3.0

• Updated@atlaskit/theme@^12.8.0

• Updated@atlaskit/tokens@^1.49.0