@atlaskit/avatar 21.7.0 → 21.9.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/avatar
 
+## 21.9.0
+
+### Minor Changes
+
+-   [#96699](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/96699)
+    [`65f87a3ac916`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/65f87a3ac916) -
+    [ux] Increase font size of secondary text from computed 11.9px to 12px.
+
+## 21.8.0
+
+### Minor Changes
+
+-   [#98168](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98168)
+    [`bc3ef8133b6c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bc3ef8133b6c) -
+    Add support for React 18.
+
 ## 21.7.0
 
 ### Minor Changes

package/dist/cjs/Avatar.js

@@ -24,7 +24,7 @@ var _templateObject;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.7.0";
+var packageVersion = "21.9.0";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 

package/dist/cjs/AvatarItem.js

@@ -9,10 +9,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("react");
 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");
 var _templateObject;
 /** @jsx jsx */
@@ -26,6 +27,19 @@ var avatarItemStyles = (0, _react2.css)({
   lineHeight: '1.4',
   paddingInlineStart: "var(--ds-space-100, 8px)"
 });
+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) {
   var backgroundColor = _ref.backgroundColor,
     isInteractive = _ref.isInteractive,
@@ -90,12 +104,17 @@ var AvatarItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     }), {}, {
       children: (0, _react2.jsx)(_react.Fragment, null, avatar, (0, _react2.jsx)("div", {
         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))))
     });
     return children ? children(props) : /*#__PURE__*/(0, _react.createElement)((0, _utilities.getCustomElement)(isDisabled, href, onClick), props);
   });

package/dist/es2019/Avatar.js

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

package/dist/es2019/AvatarItem.js

@@ -2,10 +2,11 @@
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import { createElement, forwardRef, Fragment } from 'react';
 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';
 const avatarItemStyles = css({
   minWidth: 0,
@@ -14,6 +15,19 @@ const avatarItemStyles = css({
   lineHeight: '1.4',
   paddingInlineStart: "var(--ds-space-100, 8px)"
 });
+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, {
   backgroundColor,
   isInteractive,
@@ -122,12 +136,17 @@ const AvatarItem = /*#__PURE__*/forwardRef(({
       }),
       children: jsx(Fragment, null, avatar, jsx("div", {
         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))))
     };
     return children ? children(props) : /*#__PURE__*/createElement(getCustomElement(isDisabled, href, onClick), props);
   });

package/dist/esm/Avatar.js

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

package/dist/esm/AvatarItem.js

@@ -7,10 +7,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import { createElement, forwardRef, Fragment } from 'react';
 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';
 var avatarItemStyles = css({
   minWidth: 0,
@@ -19,6 +20,19 @@ var avatarItemStyles = css({
   lineHeight: '1.4',
   paddingInlineStart: "var(--ds-space-100, 8px)"
 });
+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) {
   var backgroundColor = _ref.backgroundColor,
     isInteractive = _ref.isInteractive,
@@ -83,12 +97,17 @@ var AvatarItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     }), {}, {
       children: jsx(Fragment, null, avatar, jsx("div", {
         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))))
     });
     return children ? children(props) : /*#__PURE__*/createElement(getCustomElement(isDisabled, href, onClick), props);
   });

package/dist/types/AvatarItem.d.ts

@@ -1,6 +1,6 @@
 /** @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 {
     testId?: string;
     onClick?: MouseEventHandler;

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

@@ -1,6 +1,6 @@
 /** @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 {
     testId?: string;
     onClick?: MouseEventHandler;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/avatar",
-  "version": "21.7.0",
+  "version": "21.9.0",
   "description": "An avatar is a visual representation of a user or entity.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,8 @@
     "website": {
       "name": "Avatar",
       "category": "Components"
-    }
+    },
+    "runReact18": true
   },
   "af:exports": {
     "./AvatarItem": "./src/entry-points/avatar-item.ts",
@@ -44,23 +45,26 @@
   },
   "dependencies": {
     "@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",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0",
     "react-uid": "^2.2.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0 || ~18.2.0"
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tooltip": "^18.3.0",
+    "@atlaskit/textfield": "^6.3.0",
+    "@atlaskit/tooltip": "^18.4.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/styled": "^11.0.0",
@@ -99,5 +103,10 @@
     }
   },
   "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"
+    }
+  }
 }

package/dist/cjs/Text.js

@@ -1,40 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
-/** @jsx jsx */
-// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
-
-var baseStyles = (0, _react.css)({
-  display: 'block',
-  margin: "var(--ds-space-0, 0px)",
-  color: "var(--ds-text, ".concat(_colors.N900, ")")
-});
-var truncateStyles = (0, _react.css)({
-  overflowX: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
-var secondaryStyles = (0, _react.css)({
-  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
-  fontSize: '0.85em'
-});
-
-/**
- * __Text__
- *
- * Text is used internally only.
- */
-var Text = function Text(_ref) {
-  var isSecondary = _ref.isSecondary,
-    children = _ref.children,
-    shouldTruncate = _ref.shouldTruncate;
-  return (0, _react.jsx)("span", {
-    css: [baseStyles, isSecondary && secondaryStyles, shouldTruncate && truncateStyles]
-  }, children);
-};
-var _default = exports.default = Text;

package/dist/es2019/Text.js

@@ -1,33 +0,0 @@
-/** @jsx jsx */
-// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
-
-import { css, jsx } from '@emotion/react';
-import { N200, N900 } from '@atlaskit/theme/colors';
-const baseStyles = css({
-  display: 'block',
-  margin: "var(--ds-space-0, 0px)",
-  color: `var(--ds-text, ${N900})`
-});
-const truncateStyles = css({
-  overflowX: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
-const secondaryStyles = css({
-  color: `var(--ds-text-subtlest, ${N200})`,
-  fontSize: '0.85em'
-});
-
-/**
- * __Text__
- *
- * Text is used internally only.
- */
-const Text = ({
-  isSecondary,
-  children,
-  shouldTruncate
-}) => jsx("span", {
-  css: [baseStyles, isSecondary && secondaryStyles, shouldTruncate && truncateStyles]
-}, children);
-export default Text;

package/dist/esm/Text.js

@@ -1,34 +0,0 @@
-/** @jsx jsx */
-// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
-
-import { css, jsx } from '@emotion/react';
-import { N200, N900 } from '@atlaskit/theme/colors';
-var baseStyles = css({
-  display: 'block',
-  margin: "var(--ds-space-0, 0px)",
-  color: "var(--ds-text, ".concat(N900, ")")
-});
-var truncateStyles = css({
-  overflowX: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
-var secondaryStyles = css({
-  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
-  fontSize: '0.85em'
-});
-
-/**
- * __Text__
- *
- * Text is used internally only.
- */
-var Text = function Text(_ref) {
-  var isSecondary = _ref.isSecondary,
-    children = _ref.children,
-    shouldTruncate = _ref.shouldTruncate;
-  return jsx("span", {
-    css: [baseStyles, isSecondary && secondaryStyles, shouldTruncate && truncateStyles]
-  }, children);
-};
-export default Text;

package/dist/types/Text.d.ts

@@ -1,13 +0,0 @@
-/** @jsx jsx */
-import { FC, ReactNode } from 'react';
-/**
- * __Text__
- *
- * Text is used internally only.
- */
-declare const Text: FC<{
-    isSecondary?: boolean;
-    children: ReactNode;
-    shouldTruncate: boolean;
-}>;
-export default Text;

package/dist/types-ts4.5/Text.d.ts

@@ -1,13 +0,0 @@
-/** @jsx jsx */
-import { FC, ReactNode } from 'react';
-/**
- * __Text__
- *
- * Text is used internally only.
- */
-declare const Text: FC<{
-    isSecondary?: boolean;
-    children: ReactNode;
-    shouldTruncate: boolean;
-}>;
-export default Text;