@atlaskit/profilecard 24.22.1 → 24.23.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/profilecard
 
+## 24.23.0
+
+### Minor Changes
+
+- [`829b6192f8717`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/829b6192f8717) -
+  [ux] In profile card, add tooltip for truncated text
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 24.22.1
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -59,12 +59,6 @@
 		{
 			"path": "../../../design-system/icon/afm-cc/tsconfig.json"
 		},
-		{
-			"path": "../../../design-system/link/afm-cc/tsconfig.json"
-		},
-		{
-			"path": "../../../design-system/logo/afm-cc/tsconfig.json"
-		},
 		{
 			"path": "../../../design-system/lozenge/afm-cc/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -59,12 +59,6 @@
 		{
 			"path": "../../../design-system/icon/afm-jira/tsconfig.json"
 		},
-		{
-			"path": "../../../design-system/link/afm-jira/tsconfig.json"
-		},
-		{
-			"path": "../../../design-system/logo/afm-jira/tsconfig.json"
-		},
 		{
 			"path": "../../../design-system/lozenge/afm-jira/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -59,12 +59,6 @@
 		{
 			"path": "../../../design-system/icon/afm-products/tsconfig.json"
 		},
-		{
-			"path": "../../../design-system/link/afm-products/tsconfig.json"
-		},
-		{
-			"path": "../../../design-system/logo/afm-products/tsconfig.json"
-		},
 		{
 			"path": "../../../design-system/lozenge/afm-products/tsconfig.json"
 		},

package/dist/cjs/components/User/ProfileCardDetails.js

@@ -2,6 +2,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -10,18 +11,20 @@ require("./ProfileCardDetails.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@compiled/react");
 var _reactIntlNext = require("react-intl-next");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _relativeDate = _interopRequireDefault(require("../../internal/relative-date"));
 var _messages = _interopRequireDefault(require("../../messages"));
 var _Card = require("../../styled/Card");
 var _Icon = require("../Icon");
 var _ReportingLinesDetails = _interopRequireDefault(require("./ReportingLinesDetails"));
 var _excluded = ["text"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   detailedListWrapperNext: "_19pkxy5q _2hwxze3t _otyrze3t _18u0ze3t _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t",
   fullNameLabel: "_1reo15vq _18m915vq _11c81ixg _1bto1l2s _o5721q9c",
@@ -32,14 +35,31 @@ var styles = {
   disabledAccount: "_syazi7uo",
   activeAccount: "_syaz15cr"
 };
-var renderName = function renderName(nickname, fullName, meta) {
+var renderName = function renderName(nickname, fullName, meta, nameRef) {
   if (!fullName && !nickname) {
     return null;
   }
   var isNicknameRedundant = !nickname || nickname === fullName;
   var shownNickname = " (".concat(nickname, ") ");
   var displayName = isNicknameRedundant ? fullName : "".concat(fullName).concat(shownNickname);
-  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+  return (0, _platformFeatureFlags.fg)('enable_profilecard_text_truncation_tooltip') ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    content: displayName,
+    position: "top",
+    isScreenReaderAnnouncementDisabled: true,
+    canAppear: function canAppear() {
+      if (!(nameRef !== null && nameRef !== void 0 && nameRef.current)) {
+        return false;
+      }
+      // Only showing the tooltip when the element has been truncated (ellipsis)
+      return nameRef.current.scrollWidth > nameRef.current.clientWidth;
+    }
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    ref: nameRef,
+    as: "h2",
+    xcss: (0, _react2.cx)(styles.fullNameLabel, styles.activeAccount, meta ? (0, _platformFeatureFlags.fg)('enable_absolute_positioning_profile_card') ? styles.metaLabelWithHighSpecificity : styles.metaLabel : (0, _platformFeatureFlags.fg)('enable_absolute_positioning_profile_card') ? styles.noMetaLabelWithHighSpecificity : styles.noMetaLabel),
+    testId: "profilecard-name",
+    id: "profilecard-name-label"
+  }, displayName)) : /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     as: "h2",
     xcss: (0, _react2.cx)(styles.fullNameLabel, styles.activeAccount, meta ? (0, _platformFeatureFlags.fg)('enable_absolute_positioning_profile_card') ? styles.metaLabelWithHighSpecificity : styles.metaLabel : (0, _platformFeatureFlags.fg)('enable_absolute_positioning_profile_card') ? styles.noMetaLabelWithHighSpecificity : styles.noMetaLabel),
     testId: "profilecard-name",
@@ -110,6 +130,7 @@ var DisabledProfileCardDetails = function DisabledProfileCardDetails(props) {
 var ProfileCardDetails = exports.ProfileCardDetails = function ProfileCardDetails(props) {
   var meta = props.meta,
     status = props.status;
+  var nameRef = (0, _react.useRef)(null);
   if (props.isServiceAccount) {
     return /*#__PURE__*/_react.default.createElement(ServiceAccountProfileCardDetails, props);
   }
@@ -121,7 +142,7 @@ var ProfileCardDetails = exports.ProfileCardDetails = function ProfileCardDetail
       status: status
     }));
   }
-  return /*#__PURE__*/_react.default.createElement(_Card.DetailsGroup, null, renderName(props.nickname, props.fullName, meta), meta && /*#__PURE__*/_react.default.createElement(_Card.JobTitleLabel, null, meta), /*#__PURE__*/_react.default.createElement(CustomLozenges, {
+  return /*#__PURE__*/_react.default.createElement(_Card.DetailsGroup, null, renderName(props.nickname, props.fullName, meta, nameRef), meta && /*#__PURE__*/_react.default.createElement(_Card.JobTitleLabel, null, meta), /*#__PURE__*/_react.default.createElement(CustomLozenges, {
     lozenges: props.customLozenges
   }), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: styles.detailedListWrapperNext

package/dist/cjs/styled/Card.compiled.css

@@ -4,7 +4,7 @@
 ._zulp12x7{gap:var(--ds-space-075,6px)}
 ._zulpu2gc{gap:var(--ds-space-100,8px)}
 ._12vemgnk{background-repeat:no-repeat}
-._154i1ejb{top:var(--ds-space-300,24px)}
+._154i1jfw{top:var(--ds-space-500,40px)}
 ._154ixy5q{top:var(--ds-space-400,2pc)}
 ._154ize3t{top:var(--ds-space-0,0)}
 ._16jlkb7n{flex-grow:1}

package/dist/cjs/styled/Card.js

@@ -3,19 +3,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ProfileImage = exports.OverflowActionButtonsWrapper = exports.LozengeWrapper = exports.KudosBlobAnimationStyle = exports.KudosBlobAnimation = exports.JobTitleLabel = exports.DisabledInfo = exports.DetailsLabelText = exports.DetailsLabelIcon = exports.DetailsLabel = exports.DetailsGroup = exports.CustomLozengeContainer = exports.CardContent = exports.CardContainer = exports.AppTitleLabel = exports.AnimationWrapper = exports.AnimatedKudosButton = exports.ActionsFlexSpacer = exports.ActionButtonGroup = void 0;
 require("./Card.compiled.css");
 var _runtime = require("@compiled/react/runtime");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _css = require("@atlaskit/css");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var kudosButtonAnimationTransformationCompiled = null;
 var styles = {
-  profileImage: "_kqswstnw _154i1ejb _1ltv1ejb",
+  profileImage: "_kqswstnw _154i1jfw _1ltv1ejb",
   actionsFlexSpacer: "_16jlkb7n _1o9zidpf _i0dl1wug",
   kudosBlobAnimationStyle: "_1e0cglyw _4t3i1w81 _1bsb1w81 _1pby1mrw _kqswstnw _154ixy5q",
   animationWrapper: "_mkrz1rip _kqswstnw _154ize3t _1ltvze3t _94n5ze3t _1xi2ze3t",
@@ -37,11 +40,11 @@ var styles = {
   detailsLabelIcon: "_1e0c1txw _1o9zidpf _syaz1rpy _1bsb7vkz _4t3i7vkz _s7n4jp4b _19pkze3t",
   detailsLabelText: "_1reo15vq _18m915vq _11c8dcr7 _1bto1l2s _syazi7uo _19pkze3t _18u0ze3t",
   kudosBlobAnimation: "_1e0cglyw _4t3i1w81 _1bsb1w81 _1pby1mrw _kqswstnw _j7hq1q51 _tip8kb7n _5sagi11n _1itkdsyg",
-  jobTitleLabel: "_19pkze3t _otyrze3t _18u0utpp _2hwxze3t",
+  jobTitleLabel: "_19pkze3t _otyrze3t _18u0ze3t _2hwxze3t",
   appTitleLabel: "_2rko12b0 _syazi7uo _u5f312x7 _19bv12x7 _1bsb1ns9 _19pk1b66 _otyrze3t _18u0utpp _2hwxze3t"
 };
 var stylesCompiled = {
-  jobTitleLabel: "_19pkze3t _otyrze3t _18u0utpp _2hwxze3t _1br315cr",
+  jobTitleLabel: "_19pkze3t _otyrze3t _18u0ze3t _2hwxze3t _1br315cr",
   actionButtonGroup: "_zulp12x7 _uiztglyw _19pkpxbi _2hwxze3t _18u0ze3t _otyrze3t _y3gnusic _1bahesu3 _1e0c1txw _1oqbazsu"
 };
 var ProfileImage = exports.ProfileImage = function ProfileImage(_ref) {
@@ -126,9 +129,26 @@ var CustomLozengeContainer = exports.CustomLozengeContainer = function CustomLoz
 };
 var JobTitleLabel = exports.JobTitleLabel = function JobTitleLabel(_ref1) {
   var children = _ref1.children;
+  var textRef = (0, _react.useRef)(null);
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: (0, _css.cx)((0, _platformFeatureFlags.fg)('enable_absolute_positioning_profile_card') ? stylesCompiled.jobTitleLabel : styles.jobTitleLabel)
+  }, (0, _platformFeatureFlags.fg)('enable_profilecard_text_truncation_tooltip') ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    content: children,
+    position: "bottom",
+    isScreenReaderAnnouncementDisabled: true,
+    canAppear: function canAppear() {
+      if (!textRef.current) {
+        return false;
+      }
+      // Only showing the tooltip when the element has been truncated (ellipsis)
+      return textRef.current.scrollHeight > textRef.current.clientHeight;
+    }
   }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    ref: textRef,
+    maxLines: 1,
+    color: "color.text.inverse",
+    id: "profile-card-job-title-label-text"
+  }, children)) : /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     maxLines: 1,
     color: "color.text.inverse",
     id: "profile-card-job-title-label-text"

package/dist/es2019/components/User/ProfileCardDetails.js

@@ -2,12 +2,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import "./ProfileCardDetails.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import React, { useRef } from 'react';
 import { cx } from '@compiled/react';
 import { FormattedMessage } from 'react-intl-next';
 import Lozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Text } from '@atlaskit/primitives/compiled';
+import Tooltip from '@atlaskit/tooltip';
 import relativeDate from '../../internal/relative-date';
 import messages from '../../messages';
 import { AppTitleLabel, CustomLozengeContainer, DetailsGroup, DisabledInfo, JobTitleLabel, LozengeWrapper } from '../../styled/Card';
@@ -23,14 +24,31 @@ const styles = {
   disabledAccount: "_syazi7uo",
   activeAccount: "_syaz15cr"
 };
-const renderName = (nickname, fullName, meta) => {
+const renderName = (nickname, fullName, meta, nameRef) => {
   if (!fullName && !nickname) {
     return null;
   }
   const isNicknameRedundant = !nickname || nickname === fullName;
   const shownNickname = ` (${nickname}) `;
   const displayName = isNicknameRedundant ? fullName : `${fullName}${shownNickname}`;
-  return /*#__PURE__*/React.createElement(Box, {
+  return fg('enable_profilecard_text_truncation_tooltip') ? /*#__PURE__*/React.createElement(Tooltip, {
+    content: displayName,
+    position: "top",
+    isScreenReaderAnnouncementDisabled: true,
+    canAppear: () => {
+      if (!(nameRef !== null && nameRef !== void 0 && nameRef.current)) {
+        return false;
+      }
+      // Only showing the tooltip when the element has been truncated (ellipsis)
+      return nameRef.current.scrollWidth > nameRef.current.clientWidth;
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    ref: nameRef,
+    as: "h2",
+    xcss: cx(styles.fullNameLabel, styles.activeAccount, meta ? fg('enable_absolute_positioning_profile_card') ? styles.metaLabelWithHighSpecificity : styles.metaLabel : fg('enable_absolute_positioning_profile_card') ? styles.noMetaLabelWithHighSpecificity : styles.noMetaLabel),
+    testId: "profilecard-name",
+    id: "profilecard-name-label"
+  }, displayName)) : /*#__PURE__*/React.createElement(Box, {
     as: "h2",
     xcss: cx(styles.fullNameLabel, styles.activeAccount, meta ? fg('enable_absolute_positioning_profile_card') ? styles.metaLabelWithHighSpecificity : styles.metaLabel : fg('enable_absolute_positioning_profile_card') ? styles.noMetaLabelWithHighSpecificity : styles.noMetaLabel),
     testId: "profilecard-name",
@@ -106,6 +124,7 @@ export const ProfileCardDetails = props => {
     meta,
     status
   } = props;
+  const nameRef = useRef(null);
   if (props.isServiceAccount) {
     return /*#__PURE__*/React.createElement(ServiceAccountProfileCardDetails, props);
   }
@@ -117,7 +136,7 @@ export const ProfileCardDetails = props => {
       status: status
     }));
   }
-  return /*#__PURE__*/React.createElement(DetailsGroup, null, renderName(props.nickname, props.fullName, meta), meta && /*#__PURE__*/React.createElement(JobTitleLabel, null, meta), /*#__PURE__*/React.createElement(CustomLozenges, {
+  return /*#__PURE__*/React.createElement(DetailsGroup, null, renderName(props.nickname, props.fullName, meta, nameRef), meta && /*#__PURE__*/React.createElement(JobTitleLabel, null, meta), /*#__PURE__*/React.createElement(CustomLozenges, {
     lozenges: props.customLozenges
   }), /*#__PURE__*/React.createElement(Box, {
     xcss: styles.detailedListWrapperNext

package/dist/es2019/styled/Card.compiled.css

@@ -4,7 +4,7 @@
 ._zulp12x7{gap:var(--ds-space-075,6px)}
 ._zulpu2gc{gap:var(--ds-space-100,8px)}
 ._12vemgnk{background-repeat:no-repeat}
-._154i1ejb{top:var(--ds-space-300,24px)}
+._154i1jfw{top:var(--ds-space-500,40px)}
 ._154ixy5q{top:var(--ds-space-400,2pc)}
 ._154ize3t{top:var(--ds-space-0,0)}
 ._16jlkb7n{flex-grow:1}

package/dist/es2019/styled/Card.js

@@ -2,13 +2,14 @@
 /* eslint-disable @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation */
 import "./Card.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import React, { useRef } from 'react';
 import { cx } from '@atlaskit/css';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Text } from '@atlaskit/primitives/compiled';
+import Tooltip from '@atlaskit/tooltip';
 const kudosButtonAnimationTransformationCompiled = null;
 const styles = {
-  profileImage: "_kqswstnw _154i1ejb _1ltv1ejb",
+  profileImage: "_kqswstnw _154i1jfw _1ltv1ejb",
   actionsFlexSpacer: "_16jlkb7n _1o9zidpf _i0dl1wug",
   kudosBlobAnimationStyle: "_1e0cglyw _4t3i1w81 _1bsb1w81 _1pby1mrw _kqswstnw _154ixy5q",
   animationWrapper: "_mkrz1rip _kqswstnw _154ize3t _1ltvze3t _94n5ze3t _1xi2ze3t",
@@ -30,11 +31,11 @@ const styles = {
   detailsLabelIcon: "_1e0c1txw _1o9zidpf _syaz1rpy _1bsb7vkz _4t3i7vkz _s7n4jp4b _19pkze3t",
   detailsLabelText: "_1reo15vq _18m915vq _11c8dcr7 _1bto1l2s _syazi7uo _19pkze3t _18u0ze3t",
   kudosBlobAnimation: "_1e0cglyw _4t3i1w81 _1bsb1w81 _1pby1mrw _kqswstnw _j7hq1q51 _tip8kb7n _5sagi11n _1itkdsyg",
-  jobTitleLabel: "_19pkze3t _otyrze3t _18u0utpp _2hwxze3t",
+  jobTitleLabel: "_19pkze3t _otyrze3t _18u0ze3t _2hwxze3t",
   appTitleLabel: "_2rko12b0 _syazi7uo _u5f312x7 _19bv12x7 _1bsb1ns9 _19pk1b66 _otyrze3t _18u0utpp _2hwxze3t"
 };
 const stylesCompiled = {
-  jobTitleLabel: "_19pkze3t _otyrze3t _18u0utpp _2hwxze3t _1br315cr",
+  jobTitleLabel: "_19pkze3t _otyrze3t _18u0ze3t _2hwxze3t _1br315cr",
   actionButtonGroup: "_zulp12x7 _uiztglyw _19pkpxbi _2hwxze3t _18u0ze3t _otyrze3t _y3gnusic _1bahesu3 _1e0c1txw _1oqbazsu"
 };
 export const ProfileImage = ({
@@ -103,13 +104,32 @@ export const CustomLozengeContainer = ({
 }, children);
 export const JobTitleLabel = ({
   children
-}) => /*#__PURE__*/React.createElement(Box, {
-  xcss: cx(fg('enable_absolute_positioning_profile_card') ? stylesCompiled.jobTitleLabel : styles.jobTitleLabel)
-}, /*#__PURE__*/React.createElement(Text, {
-  maxLines: 1,
-  color: "color.text.inverse",
-  id: "profile-card-job-title-label-text"
-}, children));
+}) => {
+  const textRef = useRef(null);
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(fg('enable_absolute_positioning_profile_card') ? stylesCompiled.jobTitleLabel : styles.jobTitleLabel)
+  }, fg('enable_profilecard_text_truncation_tooltip') ? /*#__PURE__*/React.createElement(Tooltip, {
+    content: children,
+    position: "bottom",
+    isScreenReaderAnnouncementDisabled: true,
+    canAppear: () => {
+      if (!textRef.current) {
+        return false;
+      }
+      // Only showing the tooltip when the element has been truncated (ellipsis)
+      return textRef.current.scrollHeight > textRef.current.clientHeight;
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    ref: textRef,
+    maxLines: 1,
+    color: "color.text.inverse",
+    id: "profile-card-job-title-label-text"
+  }, children)) : /*#__PURE__*/React.createElement(Text, {
+    maxLines: 1,
+    color: "color.text.inverse",
+    id: "profile-card-job-title-label-text"
+  }, children));
+};
 export const AppTitleLabel = ({
   children
 }) => /*#__PURE__*/React.createElement(Box, {

package/dist/esm/components/User/ProfileCardDetails.js

@@ -4,12 +4,13 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["text"];
 import "./ProfileCardDetails.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import React, { useRef } from 'react';
 import { cx } from '@compiled/react';
 import { FormattedMessage } from 'react-intl-next';
 import Lozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Text } from '@atlaskit/primitives/compiled';
+import Tooltip from '@atlaskit/tooltip';
 import relativeDate from '../../internal/relative-date';
 import messages from '../../messages';
 import { AppTitleLabel, CustomLozengeContainer, DetailsGroup, DisabledInfo, JobTitleLabel, LozengeWrapper } from '../../styled/Card';
@@ -25,14 +26,31 @@ var styles = {
   disabledAccount: "_syazi7uo",
   activeAccount: "_syaz15cr"
 };
-var renderName = function renderName(nickname, fullName, meta) {
+var renderName = function renderName(nickname, fullName, meta, nameRef) {
   if (!fullName && !nickname) {
     return null;
   }
   var isNicknameRedundant = !nickname || nickname === fullName;
   var shownNickname = " (".concat(nickname, ") ");
   var displayName = isNicknameRedundant ? fullName : "".concat(fullName).concat(shownNickname);
-  return /*#__PURE__*/React.createElement(Box, {
+  return fg('enable_profilecard_text_truncation_tooltip') ? /*#__PURE__*/React.createElement(Tooltip, {
+    content: displayName,
+    position: "top",
+    isScreenReaderAnnouncementDisabled: true,
+    canAppear: function canAppear() {
+      if (!(nameRef !== null && nameRef !== void 0 && nameRef.current)) {
+        return false;
+      }
+      // Only showing the tooltip when the element has been truncated (ellipsis)
+      return nameRef.current.scrollWidth > nameRef.current.clientWidth;
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    ref: nameRef,
+    as: "h2",
+    xcss: cx(styles.fullNameLabel, styles.activeAccount, meta ? fg('enable_absolute_positioning_profile_card') ? styles.metaLabelWithHighSpecificity : styles.metaLabel : fg('enable_absolute_positioning_profile_card') ? styles.noMetaLabelWithHighSpecificity : styles.noMetaLabel),
+    testId: "profilecard-name",
+    id: "profilecard-name-label"
+  }, displayName)) : /*#__PURE__*/React.createElement(Box, {
     as: "h2",
     xcss: cx(styles.fullNameLabel, styles.activeAccount, meta ? fg('enable_absolute_positioning_profile_card') ? styles.metaLabelWithHighSpecificity : styles.metaLabel : fg('enable_absolute_positioning_profile_card') ? styles.noMetaLabelWithHighSpecificity : styles.noMetaLabel),
     testId: "profilecard-name",
@@ -103,6 +121,7 @@ var DisabledProfileCardDetails = function DisabledProfileCardDetails(props) {
 export var ProfileCardDetails = function ProfileCardDetails(props) {
   var meta = props.meta,
     status = props.status;
+  var nameRef = useRef(null);
   if (props.isServiceAccount) {
     return /*#__PURE__*/React.createElement(ServiceAccountProfileCardDetails, props);
   }
@@ -114,7 +133,7 @@ export var ProfileCardDetails = function ProfileCardDetails(props) {
       status: status
     }));
   }
-  return /*#__PURE__*/React.createElement(DetailsGroup, null, renderName(props.nickname, props.fullName, meta), meta && /*#__PURE__*/React.createElement(JobTitleLabel, null, meta), /*#__PURE__*/React.createElement(CustomLozenges, {
+  return /*#__PURE__*/React.createElement(DetailsGroup, null, renderName(props.nickname, props.fullName, meta, nameRef), meta && /*#__PURE__*/React.createElement(JobTitleLabel, null, meta), /*#__PURE__*/React.createElement(CustomLozenges, {
     lozenges: props.customLozenges
   }), /*#__PURE__*/React.createElement(Box, {
     xcss: styles.detailedListWrapperNext

package/dist/esm/styled/Card.compiled.css

@@ -4,7 +4,7 @@
 ._zulp12x7{gap:var(--ds-space-075,6px)}
 ._zulpu2gc{gap:var(--ds-space-100,8px)}
 ._12vemgnk{background-repeat:no-repeat}
-._154i1ejb{top:var(--ds-space-300,24px)}
+._154i1jfw{top:var(--ds-space-500,40px)}
 ._154ixy5q{top:var(--ds-space-400,2pc)}
 ._154ize3t{top:var(--ds-space-0,0)}
 ._16jlkb7n{flex-grow:1}

package/dist/esm/styled/Card.js

@@ -2,13 +2,14 @@
 /* eslint-disable @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation */
 import "./Card.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import React, { useRef } from 'react';
 import { cx } from '@atlaskit/css';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Text } from '@atlaskit/primitives/compiled';
+import Tooltip from '@atlaskit/tooltip';
 var kudosButtonAnimationTransformationCompiled = null;
 var styles = {
-  profileImage: "_kqswstnw _154i1ejb _1ltv1ejb",
+  profileImage: "_kqswstnw _154i1jfw _1ltv1ejb",
   actionsFlexSpacer: "_16jlkb7n _1o9zidpf _i0dl1wug",
   kudosBlobAnimationStyle: "_1e0cglyw _4t3i1w81 _1bsb1w81 _1pby1mrw _kqswstnw _154ixy5q",
   animationWrapper: "_mkrz1rip _kqswstnw _154ize3t _1ltvze3t _94n5ze3t _1xi2ze3t",
@@ -30,11 +31,11 @@ var styles = {
   detailsLabelIcon: "_1e0c1txw _1o9zidpf _syaz1rpy _1bsb7vkz _4t3i7vkz _s7n4jp4b _19pkze3t",
   detailsLabelText: "_1reo15vq _18m915vq _11c8dcr7 _1bto1l2s _syazi7uo _19pkze3t _18u0ze3t",
   kudosBlobAnimation: "_1e0cglyw _4t3i1w81 _1bsb1w81 _1pby1mrw _kqswstnw _j7hq1q51 _tip8kb7n _5sagi11n _1itkdsyg",
-  jobTitleLabel: "_19pkze3t _otyrze3t _18u0utpp _2hwxze3t",
+  jobTitleLabel: "_19pkze3t _otyrze3t _18u0ze3t _2hwxze3t",
   appTitleLabel: "_2rko12b0 _syazi7uo _u5f312x7 _19bv12x7 _1bsb1ns9 _19pk1b66 _otyrze3t _18u0utpp _2hwxze3t"
 };
 var stylesCompiled = {
-  jobTitleLabel: "_19pkze3t _otyrze3t _18u0utpp _2hwxze3t _1br315cr",
+  jobTitleLabel: "_19pkze3t _otyrze3t _18u0ze3t _2hwxze3t _1br315cr",
   actionButtonGroup: "_zulp12x7 _uiztglyw _19pkpxbi _2hwxze3t _18u0ze3t _otyrze3t _y3gnusic _1bahesu3 _1e0c1txw _1oqbazsu"
 };
 export var ProfileImage = function ProfileImage(_ref) {
@@ -119,9 +120,26 @@ export var CustomLozengeContainer = function CustomLozengeContainer(_ref0) {
 };
 export var JobTitleLabel = function JobTitleLabel(_ref1) {
   var children = _ref1.children;
+  var textRef = useRef(null);
   return /*#__PURE__*/React.createElement(Box, {
     xcss: cx(fg('enable_absolute_positioning_profile_card') ? stylesCompiled.jobTitleLabel : styles.jobTitleLabel)
+  }, fg('enable_profilecard_text_truncation_tooltip') ? /*#__PURE__*/React.createElement(Tooltip, {
+    content: children,
+    position: "bottom",
+    isScreenReaderAnnouncementDisabled: true,
+    canAppear: function canAppear() {
+      if (!textRef.current) {
+        return false;
+      }
+      // Only showing the tooltip when the element has been truncated (ellipsis)
+      return textRef.current.scrollHeight > textRef.current.clientHeight;
+    }
   }, /*#__PURE__*/React.createElement(Text, {
+    ref: textRef,
+    maxLines: 1,
+    color: "color.text.inverse",
+    id: "profile-card-job-title-label-text"
+  }, children)) : /*#__PURE__*/React.createElement(Text, {
     maxLines: 1,
     color: "color.text.inverse",
     id: "profile-card-job-title-label-text"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "24.22.1",
+	"version": "24.23.0",
 	"description": "A React component to display a card with user information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -52,8 +52,6 @@
 		"@atlaskit/give-kudos": "^4.4.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^29.0.0",
-		"@atlaskit/link": "^3.2.0",
-		"@atlaskit/logo": "^19.9.0",
 		"@atlaskit/lozenge": "^13.1.0",
 		"@atlaskit/menu": "^8.4.0",
 		"@atlaskit/modal-dialog": "^14.7.0",
@@ -62,8 +60,8 @@
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/popup": "^4.6.0",
 		"@atlaskit/primitives": "^16.4.0",
-		"@atlaskit/rovo-agent-components": "^3.14.0",
-		"@atlaskit/rovo-triggers": "^4.6.0",
+		"@atlaskit/rovo-agent-components": "^3.15.0",
+		"@atlaskit/rovo-triggers": "^4.8.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/teams-app-config": "^1.12.0",
 		"@atlaskit/teams-app-internal-analytics": "^1.20.0",
@@ -168,6 +166,9 @@
 		},
 		"rovo_agent_empty_state_refresh": {
 			"type": "boolean"
+		},
+		"enable_profilecard_text_truncation_tooltip": {
+			"type": "boolean"
 		}
 	},
 	"sideEffects": [