@atlaskit/profilecard 20.8.2 → 20.8.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/profilecard
 
+## 20.8.3
+
+### Patch Changes
+
+- [#159176](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/159176)
+  [`b8e7f2a47aae5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b8e7f2a47aae5) -
+  A11Y-7954 Fix expandable button reading order
+
 ## 20.8.2
 
 ### Patch Changes

package/dist/cjs/client/getOrgIdForCloudIdFromAGG.js

@@ -11,7 +11,7 @@ var _graphqlUtils = require("./graphqlUtils");
 var ORG_ID_FROM_CLOUD_ID_QUERY = "query OrgIdFromCloudId($cloudId: ID!) {\n\ttenantContexts(cloudIds: [$cloudId]) {\n\t\torgId\n\t}\n}";
 var addHeaders = function addHeaders(headers) {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "20.8.2");
+  headers.append('atl-client-version', "20.8.3");
   return headers;
 };
 function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/cjs/client/getTeamFromAGG.js

@@ -57,7 +57,7 @@ var addHeaders = exports.addHeaders = function addHeaders(headers) {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "20.8.2");
+  headers.append('atl-client-version', "20.8.3");
   return headers;
 };
 function getTeamFromAGG(_x, _x2, _x3) {

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

@@ -10,6 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _relativeDate = _interopRequireDefault(require("../../internal/relative-date"));
 var _messages = _interopRequireDefault(require("../../messages"));
@@ -21,6 +22,33 @@ var detailedListWrapperStyles = (0, _primitives.xcss)({
   margin: 'space.0',
   padding: 'space.0'
 });
+var fullNameLabelStyles = (0, _primitives.xcss)({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  fontSize: '18px',
+  fontWeight: '400',
+  letterSpacing: 'normal',
+  lineHeight: "".concat(24 / 18, "em")
+});
+var noMetaLabelStyles = (0, _primitives.xcss)({
+  marginTop: 'space.400',
+  marginRight: '0',
+  marginBottom: 'space.150',
+  marginLeft: '0'
+});
+var metaLabelStyles = (0, _primitives.xcss)({
+  marginTop: 'space.150',
+  marginRight: '0',
+  marginBottom: '0',
+  marginLeft: '0'
+});
+var disabledAccountStyles = (0, _primitives.xcss)({
+  color: 'color.text'
+});
+var activeAccountStyles = (0, _primitives.xcss)({
+  color: 'color.text.inverse'
+});
 var renderName = function renderName(nickname, fullName, meta) {
   if (!fullName && !nickname) {
     return null;
@@ -28,6 +56,13 @@ var renderName = function renderName(nickname, fullName, meta) {
   var isNicknameRedundant = !nickname || nickname === fullName;
   var shownNickname = " (".concat(nickname, ") ");
   var displayName = isNicknameRedundant ? fullName : "".concat(fullName).concat(shownNickname);
+  if ((0, _platformFeatureFlags.fg)('platform_profile_card_css_refactor')) {
+    return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+      xcss: [fullNameLabelStyles, activeAccountStyles, meta ? metaLabelStyles : noMetaLabelStyles],
+      testId: "profilecard-name",
+      id: "profilecard-name-label"
+    }, displayName);
+  }
   return /*#__PURE__*/_react.default.createElement(_Card.FullNameLabel, {
     noMeta: !meta,
     "data-testid": "profilecard-name",
@@ -78,7 +113,11 @@ var DisabledProfileCardDetails = function DisabledProfileCardDetails(props) {
     status = props.status,
     statusModifiedDate = props.statusModifiedDate;
   var name = status === 'inactive' ? fullName || nickname : nickname || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.disabledAccountDefaultName);
-  return /*#__PURE__*/_react.default.createElement(_Card.DetailsGroup, null, /*#__PURE__*/_react.default.createElement(_Card.FullNameLabel, {
+  return /*#__PURE__*/_react.default.createElement(_Card.DetailsGroup, null, (0, _platformFeatureFlags.fg)('platform_profile_card_css_refactor') ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: [fullNameLabelStyles, noMetaLabelStyles, disabledAccountStyles],
+    testId: "profilecard-name",
+    id: "profilecard-name-label"
+  }, name) : /*#__PURE__*/_react.default.createElement(_Card.FullNameLabel, {
     noMeta: true,
     isDisabledAccount: true,
     "data-testid": "profilecard-name",

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

@@ -385,6 +385,9 @@ function ProfilecardTriggerNext(_ref2) {
     // eslint-disable-next-line jsx-a11y/no-autofocus
     ,
     autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : trigger === 'click'
+    // This feature gate is currently enabled only for Jira_Web to avoid UI issues in Confluence_Web.
+    ,
+    shouldRenderToParent: (0, _platformFeatureFlags.fg)('enable_appropriate_reading_order_in_profile_card')
   }), shouldShowGiveKudos && teamCentralBaseUrl && /*#__PURE__*/_react.default.createElement(_react.Suspense, {
     fallback: null
   }, /*#__PURE__*/_react.default.createElement(_giveKudos.GiveKudosLauncherLazy, {

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

@@ -10,12 +10,23 @@ var _reactIntlNext = require("react-intl-next");
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
 var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _messages = _interopRequireDefault(require("../../messages"));
 var _ReportingLines = require("../../styled/ReportingLines");
 var _analytics = require("../../util/analytics");
 function getProfileHref(userId, profileUrl) {
   return profileUrl ? profileUrl + userId : undefined;
 }
+var reportingLinesHeadingDefaultStyles = (0, _primitives.xcss)({
+  color: 'color.text',
+  font: 'font.heading.xxsmall',
+  fontWeight: 600,
+  marginBottom: 'space.100'
+});
+var reportingLinesHeadingStyles = (0, _primitives.xcss)({
+  marginBottom: '0'
+});
 var ReportingLinesDetails = function ReportingLinesDetails(props) {
   var _manager$pii, _manager$pii2;
   var fireAnalyticsWithDuration = props.fireAnalyticsWithDuration,
@@ -40,7 +51,12 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
       onReportingLinesClick(user);
     } : undefined;
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, manager && /*#__PURE__*/_react.default.createElement(_ReportingLines.ReportingLinesSection, null, /*#__PURE__*/_react.default.createElement(_ReportingLines.ReportingLinesHeading, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, manager && /*#__PURE__*/_react.default.createElement(_ReportingLines.ReportingLinesSection, null, (0, _platformFeatureFlags.fg)('platform_profile_card_css_refactor') ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: [reportingLinesHeadingDefaultStyles, reportingLinesHeadingStyles]
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.managerSectionHeading)) :
+  /*#__PURE__*/
+  /* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */
+  _react.default.createElement(_ReportingLines.ReportingLinesHeading, {
     style: {
       marginBottom: 0
     }
@@ -53,7 +69,9 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
   }, /*#__PURE__*/_react.default.createElement(_ReportingLines.ManagerSection, null, /*#__PURE__*/_react.default.createElement(_avatar.default, {
     size: "xsmall",
     src: (_manager$pii = manager.pii) === null || _manager$pii === void 0 ? void 0 : _manager$pii.picture
-  }), /*#__PURE__*/_react.default.createElement(_ReportingLines.ManagerName, null, (_manager$pii2 = manager.pii) === null || _manager$pii2 === void 0 ? void 0 : _manager$pii2.name))))), hasReports && /*#__PURE__*/_react.default.createElement(_ReportingLines.ReportingLinesSection, null, /*#__PURE__*/_react.default.createElement(_ReportingLines.ReportingLinesHeading, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.directReportsSectionHeading)), /*#__PURE__*/_react.default.createElement(_avatarGroup.default, {
+  }), /*#__PURE__*/_react.default.createElement(_ReportingLines.ManagerName, null, (_manager$pii2 = manager.pii) === null || _manager$pii2 === void 0 ? void 0 : _manager$pii2.name))))), hasReports && /*#__PURE__*/_react.default.createElement(_ReportingLines.ReportingLinesSection, null, (0, _platformFeatureFlags.fg)('platform_profile_card_css_refactor') ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: reportingLinesHeadingDefaultStyles
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.directReportsSectionHeading)) : /*#__PURE__*/_react.default.createElement(_ReportingLines.ReportingLinesHeading, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.directReportsSectionHeading)), /*#__PURE__*/_react.default.createElement(_avatarGroup.default, {
     appearance: "stack",
     size: "small",
     data: reports.map(function (member) {

package/dist/cjs/util/analytics.js

@@ -45,7 +45,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "20.8.2"
+      packageVersion: "20.8.3"
     }, attributes), {}, {
       firedAt: Math.round((0, _performance.getPageTime)())
     })

package/dist/es2019/client/getOrgIdForCloudIdFromAGG.js

@@ -6,7 +6,7 @@ const ORG_ID_FROM_CLOUD_ID_QUERY = `query OrgIdFromCloudId($cloudId: ID!) {
 }`;
 const addHeaders = headers => {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "20.8.2");
+  headers.append('atl-client-version', "20.8.3");
   return headers;
 };
 export async function getOrgIdForCloudIdFromAGG(url, cloudId) {

package/dist/es2019/client/getTeamFromAGG.js

@@ -67,7 +67,7 @@ export const addHeaders = headers => {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "20.8.2");
+  headers.append('atl-client-version', "20.8.3");
   return headers;
 };
 export async function getTeamFromAGG(url, teamId, siteId) {

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

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import Lozenge from '@atlaskit/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Text, xcss } from '@atlaskit/primitives';
 import relativeDate from '../../internal/relative-date';
 import messages from '../../messages';
@@ -12,6 +13,33 @@ const detailedListWrapperStyles = xcss({
   margin: 'space.0',
   padding: 'space.0'
 });
+const fullNameLabelStyles = xcss({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  fontSize: '18px',
+  fontWeight: '400',
+  letterSpacing: 'normal',
+  lineHeight: `${24 / 18}em`
+});
+const noMetaLabelStyles = xcss({
+  marginTop: 'space.400',
+  marginRight: '0',
+  marginBottom: 'space.150',
+  marginLeft: '0'
+});
+const metaLabelStyles = xcss({
+  marginTop: 'space.150',
+  marginRight: '0',
+  marginBottom: '0',
+  marginLeft: '0'
+});
+const disabledAccountStyles = xcss({
+  color: 'color.text'
+});
+const activeAccountStyles = xcss({
+  color: 'color.text.inverse'
+});
 const renderName = (nickname, fullName, meta) => {
   if (!fullName && !nickname) {
     return null;
@@ -19,6 +47,13 @@ const renderName = (nickname, fullName, meta) => {
   const isNicknameRedundant = !nickname || nickname === fullName;
   const shownNickname = ` (${nickname}) `;
   const displayName = isNicknameRedundant ? fullName : `${fullName}${shownNickname}`;
+  if (fg('platform_profile_card_css_refactor')) {
+    return /*#__PURE__*/React.createElement(Box, {
+      xcss: [fullNameLabelStyles, activeAccountStyles, meta ? metaLabelStyles : noMetaLabelStyles],
+      testId: "profilecard-name",
+      id: "profilecard-name-label"
+    }, displayName);
+  }
   return /*#__PURE__*/React.createElement(FullNameLabel, {
     noMeta: !meta,
     "data-testid": "profilecard-name",
@@ -70,7 +105,11 @@ const DisabledProfileCardDetails = props => {
     statusModifiedDate
   } = props;
   const name = status === 'inactive' ? fullName || nickname : nickname || /*#__PURE__*/React.createElement(FormattedMessage, messages.disabledAccountDefaultName);
-  return /*#__PURE__*/React.createElement(DetailsGroup, null, /*#__PURE__*/React.createElement(FullNameLabel, {
+  return /*#__PURE__*/React.createElement(DetailsGroup, null, fg('platform_profile_card_css_refactor') ? /*#__PURE__*/React.createElement(Box, {
+    xcss: [fullNameLabelStyles, noMetaLabelStyles, disabledAccountStyles],
+    testId: "profilecard-name",
+    id: "profilecard-name-label"
+  }, name) : /*#__PURE__*/React.createElement(FullNameLabel, {
     noMeta: true,
     isDisabledAccount: true,
     "data-testid": "profilecard-name",

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

@@ -317,6 +317,9 @@ export default function ProfilecardTriggerNext({
     // eslint-disable-next-line jsx-a11y/no-autofocus
     ,
     autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : trigger === 'click'
+    // This feature gate is currently enabled only for Jira_Web to avoid UI issues in Confluence_Web.
+    ,
+    shouldRenderToParent: fg('enable_appropriate_reading_order_in_profile_card')
   }), shouldShowGiveKudos && teamCentralBaseUrl && /*#__PURE__*/React.createElement(Suspense, {
     fallback: null
   }, /*#__PURE__*/React.createElement(GiveKudosLauncherLazy, {

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

@@ -3,12 +3,23 @@ import { FormattedMessage } from 'react-intl-next';
 import Avatar from '@atlaskit/avatar';
 import AvatarGroup from '@atlaskit/avatar-group';
 import Button from '@atlaskit/button';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
 import messages from '../../messages';
 import { ManagerName, ManagerSection, OffsetWrapper, ReportingLinesHeading, ReportingLinesSection } from '../../styled/ReportingLines';
 import { reportingLinesClicked } from '../../util/analytics';
 function getProfileHref(userId, profileUrl) {
   return profileUrl ? profileUrl + userId : undefined;
 }
+const reportingLinesHeadingDefaultStyles = xcss({
+  color: 'color.text',
+  font: 'font.heading.xxsmall',
+  fontWeight: 600,
+  marginBottom: 'space.100'
+});
+const reportingLinesHeadingStyles = xcss({
+  marginBottom: '0'
+});
 const ReportingLinesDetails = props => {
   var _manager$pii, _manager$pii2;
   const {
@@ -30,7 +41,12 @@ const ReportingLinesDetails = props => {
     }));
     onReportingLinesClick(user);
   } : undefined;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, manager && /*#__PURE__*/React.createElement(ReportingLinesSection, null, /*#__PURE__*/React.createElement(ReportingLinesHeading, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, manager && /*#__PURE__*/React.createElement(ReportingLinesSection, null, fg('platform_profile_card_css_refactor') ? /*#__PURE__*/React.createElement(Box, {
+    xcss: [reportingLinesHeadingDefaultStyles, reportingLinesHeadingStyles]
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.managerSectionHeading)) :
+  /*#__PURE__*/
+  /* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */
+  React.createElement(ReportingLinesHeading, {
     style: {
       marginBottom: 0
     }
@@ -43,7 +59,9 @@ const ReportingLinesDetails = props => {
   }, /*#__PURE__*/React.createElement(ManagerSection, null, /*#__PURE__*/React.createElement(Avatar, {
     size: "xsmall",
     src: (_manager$pii = manager.pii) === null || _manager$pii === void 0 ? void 0 : _manager$pii.picture
-  }), /*#__PURE__*/React.createElement(ManagerName, null, (_manager$pii2 = manager.pii) === null || _manager$pii2 === void 0 ? void 0 : _manager$pii2.name))))), hasReports && /*#__PURE__*/React.createElement(ReportingLinesSection, null, /*#__PURE__*/React.createElement(ReportingLinesHeading, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.directReportsSectionHeading)), /*#__PURE__*/React.createElement(AvatarGroup, {
+  }), /*#__PURE__*/React.createElement(ManagerName, null, (_manager$pii2 = manager.pii) === null || _manager$pii2 === void 0 ? void 0 : _manager$pii2.name))))), hasReports && /*#__PURE__*/React.createElement(ReportingLinesSection, null, fg('platform_profile_card_css_refactor') ? /*#__PURE__*/React.createElement(Box, {
+    xcss: reportingLinesHeadingDefaultStyles
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.directReportsSectionHeading)) : /*#__PURE__*/React.createElement(ReportingLinesHeading, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.directReportsSectionHeading)), /*#__PURE__*/React.createElement(AvatarGroup, {
     appearance: "stack",
     size: "small",
     data: reports.map(member => {

package/dist/es2019/util/analytics.js

@@ -32,7 +32,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/profilecard",
-    packageVersion: "20.8.2",
+    packageVersion: "20.8.3",
     ...attributes,
     firedAt: Math.round(getPageTime())
   }

package/dist/esm/client/getOrgIdForCloudIdFromAGG.js

@@ -4,7 +4,7 @@ import { AGGQuery } from './graphqlUtils';
 var ORG_ID_FROM_CLOUD_ID_QUERY = "query OrgIdFromCloudId($cloudId: ID!) {\n\ttenantContexts(cloudIds: [$cloudId]) {\n\t\torgId\n\t}\n}";
 var addHeaders = function addHeaders(headers) {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "20.8.2");
+  headers.append('atl-client-version', "20.8.3");
   return headers;
 };
 export function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/esm/client/getTeamFromAGG.js

@@ -48,7 +48,7 @@ export var addHeaders = function addHeaders(headers) {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "20.8.2");
+  headers.append('atl-client-version', "20.8.3");
   return headers;
 };
 export function getTeamFromAGG(_x, _x2, _x3) {

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

@@ -4,6 +4,7 @@ var _excluded = ["text"];
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import Lozenge from '@atlaskit/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Text, xcss } from '@atlaskit/primitives';
 import relativeDate from '../../internal/relative-date';
 import messages from '../../messages';
@@ -14,6 +15,33 @@ var detailedListWrapperStyles = xcss({
   margin: 'space.0',
   padding: 'space.0'
 });
+var fullNameLabelStyles = xcss({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  fontSize: '18px',
+  fontWeight: '400',
+  letterSpacing: 'normal',
+  lineHeight: "".concat(24 / 18, "em")
+});
+var noMetaLabelStyles = xcss({
+  marginTop: 'space.400',
+  marginRight: '0',
+  marginBottom: 'space.150',
+  marginLeft: '0'
+});
+var metaLabelStyles = xcss({
+  marginTop: 'space.150',
+  marginRight: '0',
+  marginBottom: '0',
+  marginLeft: '0'
+});
+var disabledAccountStyles = xcss({
+  color: 'color.text'
+});
+var activeAccountStyles = xcss({
+  color: 'color.text.inverse'
+});
 var renderName = function renderName(nickname, fullName, meta) {
   if (!fullName && !nickname) {
     return null;
@@ -21,6 +49,13 @@ var renderName = function renderName(nickname, fullName, meta) {
   var isNicknameRedundant = !nickname || nickname === fullName;
   var shownNickname = " (".concat(nickname, ") ");
   var displayName = isNicknameRedundant ? fullName : "".concat(fullName).concat(shownNickname);
+  if (fg('platform_profile_card_css_refactor')) {
+    return /*#__PURE__*/React.createElement(Box, {
+      xcss: [fullNameLabelStyles, activeAccountStyles, meta ? metaLabelStyles : noMetaLabelStyles],
+      testId: "profilecard-name",
+      id: "profilecard-name-label"
+    }, displayName);
+  }
   return /*#__PURE__*/React.createElement(FullNameLabel, {
     noMeta: !meta,
     "data-testid": "profilecard-name",
@@ -71,7 +106,11 @@ var DisabledProfileCardDetails = function DisabledProfileCardDetails(props) {
     status = props.status,
     statusModifiedDate = props.statusModifiedDate;
   var name = status === 'inactive' ? fullName || nickname : nickname || /*#__PURE__*/React.createElement(FormattedMessage, messages.disabledAccountDefaultName);
-  return /*#__PURE__*/React.createElement(DetailsGroup, null, /*#__PURE__*/React.createElement(FullNameLabel, {
+  return /*#__PURE__*/React.createElement(DetailsGroup, null, fg('platform_profile_card_css_refactor') ? /*#__PURE__*/React.createElement(Box, {
+    xcss: [fullNameLabelStyles, noMetaLabelStyles, disabledAccountStyles],
+    testId: "profilecard-name",
+    id: "profilecard-name-label"
+  }, name) : /*#__PURE__*/React.createElement(FullNameLabel, {
     noMeta: true,
     isDisabledAccount: true,
     "data-testid": "profilecard-name",

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

@@ -375,6 +375,9 @@ export default function ProfilecardTriggerNext(_ref2) {
     // eslint-disable-next-line jsx-a11y/no-autofocus
     ,
     autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : trigger === 'click'
+    // This feature gate is currently enabled only for Jira_Web to avoid UI issues in Confluence_Web.
+    ,
+    shouldRenderToParent: fg('enable_appropriate_reading_order_in_profile_card')
   }), shouldShowGiveKudos && teamCentralBaseUrl && /*#__PURE__*/React.createElement(Suspense, {
     fallback: null
   }, /*#__PURE__*/React.createElement(GiveKudosLauncherLazy, {

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

@@ -3,12 +3,23 @@ import { FormattedMessage } from 'react-intl-next';
 import Avatar from '@atlaskit/avatar';
 import AvatarGroup from '@atlaskit/avatar-group';
 import Button from '@atlaskit/button';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
 import messages from '../../messages';
 import { ManagerName, ManagerSection, OffsetWrapper, ReportingLinesHeading, ReportingLinesSection } from '../../styled/ReportingLines';
 import { reportingLinesClicked } from '../../util/analytics';
 function getProfileHref(userId, profileUrl) {
   return profileUrl ? profileUrl + userId : undefined;
 }
+var reportingLinesHeadingDefaultStyles = xcss({
+  color: 'color.text',
+  font: 'font.heading.xxsmall',
+  fontWeight: 600,
+  marginBottom: 'space.100'
+});
+var reportingLinesHeadingStyles = xcss({
+  marginBottom: '0'
+});
 var ReportingLinesDetails = function ReportingLinesDetails(props) {
   var _manager$pii, _manager$pii2;
   var fireAnalyticsWithDuration = props.fireAnalyticsWithDuration,
@@ -33,7 +44,12 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
       onReportingLinesClick(user);
     } : undefined;
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, manager && /*#__PURE__*/React.createElement(ReportingLinesSection, null, /*#__PURE__*/React.createElement(ReportingLinesHeading, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, manager && /*#__PURE__*/React.createElement(ReportingLinesSection, null, fg('platform_profile_card_css_refactor') ? /*#__PURE__*/React.createElement(Box, {
+    xcss: [reportingLinesHeadingDefaultStyles, reportingLinesHeadingStyles]
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.managerSectionHeading)) :
+  /*#__PURE__*/
+  /* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */
+  React.createElement(ReportingLinesHeading, {
     style: {
       marginBottom: 0
     }
@@ -46,7 +62,9 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
   }, /*#__PURE__*/React.createElement(ManagerSection, null, /*#__PURE__*/React.createElement(Avatar, {
     size: "xsmall",
     src: (_manager$pii = manager.pii) === null || _manager$pii === void 0 ? void 0 : _manager$pii.picture
-  }), /*#__PURE__*/React.createElement(ManagerName, null, (_manager$pii2 = manager.pii) === null || _manager$pii2 === void 0 ? void 0 : _manager$pii2.name))))), hasReports && /*#__PURE__*/React.createElement(ReportingLinesSection, null, /*#__PURE__*/React.createElement(ReportingLinesHeading, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.directReportsSectionHeading)), /*#__PURE__*/React.createElement(AvatarGroup, {
+  }), /*#__PURE__*/React.createElement(ManagerName, null, (_manager$pii2 = manager.pii) === null || _manager$pii2 === void 0 ? void 0 : _manager$pii2.name))))), hasReports && /*#__PURE__*/React.createElement(ReportingLinesSection, null, fg('platform_profile_card_css_refactor') ? /*#__PURE__*/React.createElement(Box, {
+    xcss: reportingLinesHeadingDefaultStyles
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.directReportsSectionHeading)) : /*#__PURE__*/React.createElement(ReportingLinesHeading, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.directReportsSectionHeading)), /*#__PURE__*/React.createElement(AvatarGroup, {
     appearance: "stack",
     size: "small",
     data: reports.map(function (member) {

package/dist/esm/util/analytics.js

@@ -39,7 +39,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "20.8.2"
+      packageVersion: "20.8.3"
     }, attributes), {}, {
       firedAt: Math.round(getPageTime())
     })

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "20.8.2",
+	"version": "20.8.3",
 	"description": "A React component to display a card with user information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -52,7 +52,7 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/atlassian-context": "^0.0.2",
-		"@atlaskit/avatar": "^21.16.0",
+		"@atlaskit/avatar": "^21.17.0",
 		"@atlaskit/avatar-group": "^10.0.0",
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/dropdown-menu": "^12.22.0",
@@ -127,6 +127,9 @@
 		},
 		"enable_agent_profile_card": {
 			"type": "boolean"
+		},
+		"platform_profile_card_css_refactor": {
+			"type": "boolean"
 		}
 	}
 }