@atlaskit/profilecard 23.3.0 → 23.4.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/profilecard
 
+## 23.4.0
+
+### Minor Changes
+
+- [#123622](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/123622)
+  [`8cb3a7a1f96a9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8cb3a7a1f96a9) -
+  [ux] Migrated old buttons to use @atlaskit/button/new; Migrated some icons
+
+### Patch Changes
+
+- Updated dependencies
+
+## 23.3.1
+
+### Patch Changes
+
+- [#126851](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/126851)
+  [`328cc06900138`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/328cc06900138) -
+  Correct import VerifiedTeamIcon for team-profile-card which causes error on editor example
+
 ## 23.3.0
 
 ### Minor 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', "23.3.0");
+  headers.append('atl-client-version', "23.4.0");
   return headers;
 };
 function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/cjs/client/getTeamFromAGG.js

@@ -66,7 +66,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', "23.3.0");
+  headers.append('atl-client-version', "23.4.0");
   return headers;
 };
 function getTeamFromAGG(_x, _x2, _x3) {

package/dist/cjs/components/Error/ErrorMessage.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-var _icon = require("@atlaskit/icon");
-var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross-circle"));
+var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/cross-circle"));
 var _crossCircle2 = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
@@ -41,20 +41,15 @@ var ErrorMessage = function ErrorMessage(props) {
   };
   return /*#__PURE__*/_react.default.createElement(_Error.ErrorWrapper, {
     testId: "profilecard-error"
-  }, (0, _platformFeatureFlags.fg)('ptc-migrate-legacy-icons-profilecard') ? /*#__PURE__*/_react.default.createElement(_icon.IconTile, {
-    icon: _crossCircle.default,
+  }, /*#__PURE__*/_react.default.createElement(_crossCircle.default, {
     label: "icon error",
-    size: "48",
-    appearance: 'gray'
-  }) :
-  /*#__PURE__*/
-  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
-  _react.default.createElement(_crossCircle2.default, {
-    label: "icon error",
-    size: "xlarge"
-  }), errorContent(), reload && /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+    LEGACY_fallbackIcon: _crossCircle2.default,
+    LEGACY_size: "xlarge"
+  }), errorContent(), reload && ((0, _platformFeatureFlags.fg)('ptc_migrate_buttons') ? /*#__PURE__*/_react.default.createElement(_new.default, {
+    onClick: reload
+  }, "Try again") : /*#__PURE__*/_react.default.createElement(_button.default, {
     appearance: "link",
     onClick: reload
-  }, "Try again"));
+  }, "Try again")));
 };
 var _default = exports.default = ErrorMessage;

package/dist/cjs/components/Team/TeamProfileCard.js

@@ -14,6 +14,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
 var _loadingButton = _interopRequireDefault(require("@atlaskit/button/loading-button"));
+var _new = _interopRequireWildcard(require("@atlaskit/button/new"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 var _showMoreHorizontalMore = _interopRequireDefault(require("@atlaskit/icon/core/migration/show-more-horizontal--more"));
@@ -137,7 +138,12 @@ var ActionButton = function ActionButton(_ref2) {
   var isGiveKudosActionButton = action.id === GIVE_KUDOS_ACTION_ID;
   var actionButton = /*#__PURE__*/_react.default.createElement(_focusRing.default, {
     isInset: true
-  }, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+  }, (0, _platformFeatureFlags.fg)('ptc_migrate_buttons') ? /*#__PURE__*/_react.default.createElement(_new.LinkButton, {
+    key: action.id || index,
+    onClick: onActionClick(action, analytics, index),
+    href: action.link || '',
+    shouldFitContainer: true
+  }, action.label, isGiveKudosActionButton && /*#__PURE__*/_react.default.createElement(_Card.AnimationWrapper, null, /*#__PURE__*/_react.default.createElement(_Card.KudosBlobAnimation, null))) : /*#__PURE__*/_react.default.createElement(_standardButton.default, {
     key: action.id || index,
     onClick: onActionClick(action, analytics, index),
     href: action.link,
@@ -187,7 +193,16 @@ var ExtraActions = function ExtraActions(_ref3) {
       }));
     },
     trigger: function trigger(triggerProps) {
-      return /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({
+      return (0, _platformFeatureFlags.fg)('ptc_migrate_buttons') ? /*#__PURE__*/_react.default.createElement(_new.IconButton, (0, _extends2.default)({
+        testId: "more-actions-button"
+      }, triggerProps, {
+        isSelected: isOpen,
+        onClick: function onClick() {
+          return onMoreClick(!isOpen);
+        },
+        icon: _showMoreHorizontalMore.default,
+        label: "actions"
+      })) : /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({
         testId: "more-actions-button"
       }, triggerProps, {
         isSelected: isOpen,
@@ -303,7 +318,12 @@ var ErrorMessage = function ErrorMessage(_ref6) {
   }, /*#__PURE__*/_react.default.createElement(_Error2.ErrorIllustration, null), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     as: "p",
     weight: "semibold"
-  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.teamErrorTitle)), /*#__PURE__*/_react.default.createElement(_Error.TeamErrorText, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.teamErrorText)), clientFetchProfile && /*#__PURE__*/_react.default.createElement(_TeamCard.ActionButtons, null, /*#__PURE__*/_react.default.createElement(_TeamCard.WrappedButton, null, /*#__PURE__*/_react.default.createElement(_loadingButton.default, {
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.teamErrorTitle)), /*#__PURE__*/_react.default.createElement(_Error.TeamErrorText, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.teamErrorText)), clientFetchProfile && /*#__PURE__*/_react.default.createElement(_TeamCard.ActionButtons, null, /*#__PURE__*/_react.default.createElement(_TeamCard.WrappedButton, null, (0, _platformFeatureFlags.fg)('ptc_migrate_buttons') ? /*#__PURE__*/_react.default.createElement(_new.default, {
+    testId: "client-fetch-profile-button",
+    shouldFitContainer: true,
+    onClick: retry,
+    isLoading: isLoading
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.teamErrorButton)) : /*#__PURE__*/_react.default.createElement(_loadingButton.default, {
     testId: "client-fetch-profile-button",
     shouldFitContainer: true,
     onClick: retry,

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

@@ -12,8 +12,10 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _new = require("@atlaskit/button/new");
 var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
 var _showMoreHorizontalMore = _interopRequireDefault(require("@atlaskit/icon/core/migration/show-more-horizontal--more"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _messages = _interopRequireDefault(require("../../messages"));
 var _Card = require("../../styled/Card");
 var _analytics = require("../../util/analytics");
@@ -54,7 +56,13 @@ var OverflowProfileCardButtons = exports.OverflowProfileCardButtons = function O
         isSelected = _ref2.isSelected,
         testId = _ref2.testId,
         providedProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-      return /*#__PURE__*/_react.default.createElement(_customThemeButton.default, (0, _extends2.default)({
+      return (0, _platformFeatureFlags.fg)('ptc_migrate_buttons') ? /*#__PURE__*/_react.default.createElement(_new.IconButton, (0, _extends2.default)({
+        type: "button"
+      }, providedProps, {
+        ref: triggerRef,
+        label: intl.formatMessage(_messages.default.profileCardMoreIconLabel),
+        icon: _showMoreHorizontalMore.default
+      })) : /*#__PURE__*/_react.default.createElement(_customThemeButton.default, (0, _extends2.default)({
         type: "button"
       }, providedProps, {
         ref: triggerRef,

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

@@ -14,7 +14,9 @@ var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _new = require("@atlaskit/button/new");
 var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _colors = require("@atlaskit/theme/colors");
 var _messages = _interopRequireDefault(require("../../messages"));
@@ -168,7 +170,7 @@ var Actions = function Actions(_ref) {
     var button = /*#__PURE__*/_react.default.createElement(_focusRing.default, {
       isInset: true,
       key: "profile-card-action-focus-ring_".concat(action.id || index)
-    }, /*#__PURE__*/_react.default.createElement(_button.default, {
+    }, (0, _platformFeatureFlags.fg)('ptc_migrate_buttons') ? /*#__PURE__*/_react.default.createElement(_new.LinkButton, {
       appearance: "default",
       key: action.id || index,
       onClick: function onClick(event) {
@@ -177,6 +179,17 @@ var Actions = function Actions(_ref) {
         }
         return onActionClick(action, args, event, index);
       },
+      href: action.link || '',
+      autoFocus: index === 0 && isTriggeredUsingKeyboard
+    }, action.label, isKudos && /*#__PURE__*/_react.default.createElement(_Card.AnimationWrapper, null, /*#__PURE__*/_react.default.createElement(_Card.KudosBlobAnimation, null))) : /*#__PURE__*/_react.default.createElement(_button.default, {
+      appearance: "default",
+      key: action.id || index,
+      onClick: function onClick(event) {
+        for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+          args[_key2 - 1] = arguments[_key2];
+        }
+        return onActionClick(action, args, event, index);
+      },
       href: action.link,
       autoFocus: index === 0 && isTriggeredUsingKeyboard
     }, action.label, isKudos && /*#__PURE__*/_react.default.createElement(_Card.AnimationWrapper, null, /*#__PURE__*/_react.default.createElement(_Card.KudosBlobAnimation, null))));

package/dist/cjs/components/User/ReportingLinesDetails.compiled.css

@@ -0,0 +1,6 @@
+._19bvze3t{padding-left:var(--ds-space-0,0)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}

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

@@ -1,3 +1,4 @@
+/* ReportingLinesDetails.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./ReportingLinesDetails.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
@@ -12,6 +15,7 @@ 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 _compiled = require("@atlaskit/primitives/compiled");
 var _messages = _interopRequireDefault(require("../../messages"));
 var _ReportingLines = require("../../styled/ReportingLines");
 var _analytics = require("../../util/analytics");
@@ -27,9 +31,12 @@ var reportingLinesHeadingDefaultStyles = (0, _primitives.xcss)({
 var reportingLinesHeadingStyles = (0, _primitives.xcss)({
   marginBottom: '0'
 });
+var styles = {
+  reportingLinesButton: "_ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _bfhksm61 _irr3166n"
+};
 var avatarGroupMaxCount = 5;
 var ReportingLinesDetails = function ReportingLinesDetails(props) {
-  var _manager$pii, _manager$pii2;
+  var _manager$pii, _manager$pii2, _manager$pii3, _manager$pii4;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var fireAnalyticsWithDuration = props.fireAnalyticsWithDuration,
@@ -54,6 +61,20 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
       onReportingLinesClick(user);
     } : undefined;
   };
+  var onReportingLinksClick = function onReportingLinksClick(user, userType, href) {
+    if (href) {
+      window.location.href = href;
+    }
+    if (onReportingLinesClick) {
+      onReportingLinesClick(user);
+    }
+    fireAnalyticsWithDuration(function (duration) {
+      return (0, _analytics.reportingLinesClicked)({
+        duration: duration,
+        userType: userType
+      });
+    });
+  };
   var showMoreButtonProps = (0, _platformFeatureFlags.fg)('platform_profilecard-enable_reporting_lines_label') ? {
     'aria-label': formatMessage(_messages.default.profileCardMoreReportingLinesLabel, {
       count: reports.length - avatarGroupMaxCount + 1
@@ -61,7 +82,16 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
   } : undefined;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, manager && /*#__PURE__*/_react.default.createElement(_ReportingLines.ReportingLinesSection, null, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     xcss: [reportingLinesHeadingDefaultStyles, reportingLinesHeadingStyles]
-  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.managerSectionHeading)), /*#__PURE__*/_react.default.createElement(_ReportingLines.OffsetWrapper, null, /*#__PURE__*/_react.default.createElement(_button.default, {
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.managerSectionHeading)), /*#__PURE__*/_react.default.createElement(_ReportingLines.OffsetWrapper, null, (0, _platformFeatureFlags.fg)('ptc_migrate_buttons') ? /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
+    onClick: function onClick() {
+      return onReportingLinksClick(manager, 'manager', getProfileHref(manager.accountIdentifier, reportingLinesProfileUrl));
+    },
+    isDisabled: !onReportingLinesClick,
+    xcss: styles.reportingLinesButton
+  }, /*#__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))) : /*#__PURE__*/_react.default.createElement(_button.default, {
     appearance: "subtle",
     spacing: "none",
     href: getProfileHref(manager.accountIdentifier, reportingLinesProfileUrl),
@@ -69,8 +99,8 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
     isDisabled: !onReportingLinesClick
   }, /*#__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(_primitives.Box, {
+    src: (_manager$pii3 = manager.pii) === null || _manager$pii3 === void 0 ? void 0 : _manager$pii3.picture
+  }), /*#__PURE__*/_react.default.createElement(_ReportingLines.ManagerName, null, (_manager$pii4 = manager.pii) === null || _manager$pii4 === void 0 ? void 0 : _manager$pii4.name))))), hasReports && /*#__PURE__*/_react.default.createElement(_ReportingLines.ReportingLinesSection, null, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     xcss: reportingLinesHeadingDefaultStyles
   }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.directReportsSectionHeading)), /*#__PURE__*/_react.default.createElement(_avatarGroup.default, {
     appearance: "stack",

package/dist/cjs/components/team-profile-card/main.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
-var _peopleTeamsUiPublic = require("@atlaskit/people-teams-ui-public");
+var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
 var _compiled = require("@atlaskit/primitives/compiled");
 var styles = {
   wrapperStyles: "_2rkopd34 _v564nm7n _1reo15vq _18m915vq _189ee4h9 _1dqonqa1 _1h6dmuej _1e0c1txw _2lx21bp4 _1bsb5x59 _1ul95x59 _4t3i1wug",
@@ -82,7 +82,7 @@ var TeamProfileCard = exports.TeamProfileCard = function TeamProfileCard(_ref4)
     alignBlock: "center"
   }, /*#__PURE__*/_react.default.createElement(_heading.default, {
     size: "small"
-  }, displayName), isVerified && /*#__PURE__*/_react.default.createElement(_peopleTeamsUiPublic.VerifiedTeamIcon, {
+  }, displayName), isVerified && /*#__PURE__*/_react.default.createElement(_verifiedTeamIcon.VerifiedTeamIcon, {
     showTooltip: true
   })), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     color: "color.text.subtle"

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: "23.3.0"
+      packageVersion: "23.4.0"
     }, 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', "23.3.0");
+  headers.append('atl-client-version', "23.4.0");
   return headers;
 };
 export async function getOrgIdForCloudIdFromAGG(url, cloudId) {

package/dist/es2019/client/getTeamFromAGG.js

@@ -75,7 +75,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', "23.3.0");
+  headers.append('atl-client-version', "23.4.0");
   return headers;
 };
 export async function getTeamFromAGG(url, teamId, siteId) {

package/dist/es2019/components/Error/ErrorMessage.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
-import Button from '@atlaskit/button/standard-button';
-import { IconTile } from '@atlaskit/icon';
-import CrossCircleIcon from '@atlaskit/icon/core/migration/cross-circle';
+import ButtonLegacy from '@atlaskit/button';
+import Button from '@atlaskit/button/new';
+import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
 import IconError from '@atlaskit/icon/glyph/cross-circle';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives';
@@ -33,20 +33,15 @@ const ErrorMessage = props => {
   };
   return /*#__PURE__*/React.createElement(ErrorWrapper, {
     testId: "profilecard-error"
-  }, fg('ptc-migrate-legacy-icons-profilecard') ? /*#__PURE__*/React.createElement(IconTile, {
-    icon: CrossCircleIcon,
+  }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
     label: "icon error",
-    size: "48",
-    appearance: 'gray'
-  }) :
-  /*#__PURE__*/
-  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
-  React.createElement(IconError, {
-    label: "icon error",
-    size: "xlarge"
-  }), errorContent(), reload && /*#__PURE__*/React.createElement(Button, {
+    LEGACY_fallbackIcon: IconError,
+    LEGACY_size: "xlarge"
+  }), errorContent(), reload && (fg('ptc_migrate_buttons') ? /*#__PURE__*/React.createElement(Button, {
+    onClick: reload
+  }, "Try again") : /*#__PURE__*/React.createElement(ButtonLegacy, {
     appearance: "link",
     onClick: reload
-  }, "Try again"));
+  }, "Try again")));
 };
 export default ErrorMessage;

package/dist/es2019/components/Team/TeamProfileCard.js

@@ -3,7 +3,8 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import AvatarGroup from '@atlaskit/avatar-group';
 import LoadingButton from '@atlaskit/button/loading-button';
-import Button from '@atlaskit/button/standard-button';
+import Button, { IconButton, LinkButton } from '@atlaskit/button/new';
+import ButtonLegacy from '@atlaskit/button/standard-button';
 import FocusRing from '@atlaskit/focus-ring';
 import MoreIcon from '@atlaskit/icon/core/migration/show-more-horizontal--more';
 import { LinkItem, MenuGroup } from '@atlaskit/menu';
@@ -119,7 +120,12 @@ const ActionButton = ({
   const isGiveKudosActionButton = action.id === GIVE_KUDOS_ACTION_ID;
   const actionButton = /*#__PURE__*/React.createElement(FocusRing, {
     isInset: true
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, fg('ptc_migrate_buttons') ? /*#__PURE__*/React.createElement(LinkButton, {
+    key: action.id || index,
+    onClick: onActionClick(action, analytics, index),
+    href: action.link || '',
+    shouldFitContainer: true
+  }, action.label, isGiveKudosActionButton && /*#__PURE__*/React.createElement(AnimationWrapper, null, /*#__PURE__*/React.createElement(KudosBlobAnimation, null))) : /*#__PURE__*/React.createElement(ButtonLegacy, {
     key: action.id || index,
     onClick: onActionClick(action, analytics, index),
     href: action.link,
@@ -158,17 +164,26 @@ const ExtraActions = ({
       key: action.id || index,
       href: action.link
     }, action.label))),
-    trigger: triggerProps => /*#__PURE__*/React.createElement(Button, _extends({
-      testId: "more-actions-button"
-    }, triggerProps, {
-      isSelected: isOpen,
-      onClick: () => onMoreClick(!isOpen),
-      iconAfter: /*#__PURE__*/React.createElement(MoreIcon, {
-        spacing: "spacious",
-        label: "actions",
-        color: "currentColor"
-      })
-    })),
+    trigger: triggerProps => {
+      return fg('ptc_migrate_buttons') ? /*#__PURE__*/React.createElement(IconButton, _extends({
+        testId: "more-actions-button"
+      }, triggerProps, {
+        isSelected: isOpen,
+        onClick: () => onMoreClick(!isOpen),
+        icon: MoreIcon,
+        label: "actions"
+      })) : /*#__PURE__*/React.createElement(ButtonLegacy, _extends({
+        testId: "more-actions-button"
+      }, triggerProps, {
+        isSelected: isOpen,
+        onClick: () => onMoreClick(!isOpen),
+        iconAfter: /*#__PURE__*/React.createElement(MoreIcon, {
+          spacing: "spacious",
+          label: "actions",
+          color: "currentColor"
+        })
+      }));
+    },
     zIndex: layers.modal(),
     shouldRenderToParent: fg('enable_appropriate_reading_order_in_profile_card')
   }));
@@ -266,7 +281,12 @@ const ErrorMessage = ({
   }, /*#__PURE__*/React.createElement(ErrorIllustration, null), /*#__PURE__*/React.createElement(Text, {
     as: "p",
     weight: "semibold"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.teamErrorTitle)), /*#__PURE__*/React.createElement(TeamErrorText, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.teamErrorText)), clientFetchProfile && /*#__PURE__*/React.createElement(ActionButtons, null, /*#__PURE__*/React.createElement(WrappedButton, null, /*#__PURE__*/React.createElement(LoadingButton, {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.teamErrorTitle)), /*#__PURE__*/React.createElement(TeamErrorText, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.teamErrorText)), clientFetchProfile && /*#__PURE__*/React.createElement(ActionButtons, null, /*#__PURE__*/React.createElement(WrappedButton, null, fg('ptc_migrate_buttons') ? /*#__PURE__*/React.createElement(Button, {
+    testId: "client-fetch-profile-button",
+    shouldFitContainer: true,
+    onClick: retry,
+    isLoading: isLoading
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.teamErrorButton)) : /*#__PURE__*/React.createElement(LoadingButton, {
     testId: "client-fetch-profile-button",
     shouldFitContainer: true,
     onClick: retry,

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

@@ -2,8 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/custom-theme-button';
+import { IconButton } from '@atlaskit/button/new';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import MoreIcon from '@atlaskit/icon/core/migration/show-more-horizontal--more';
+import { fg } from '@atlaskit/platform-feature-flags';
 import messages from '../../messages';
 import { OverflowActionButtonsWrapper } from '../../styled/Card';
 import { moreActionsClicked } from '../../util/analytics';
@@ -40,16 +42,24 @@ export const OverflowProfileCardButtons = props => {
       isSelected,
       testId,
       ...providedProps
-    }) => /*#__PURE__*/React.createElement(Button, _extends({
-      type: "button"
-    }, providedProps, {
-      ref: triggerRef,
-      iconBefore: /*#__PURE__*/React.createElement(MoreIcon, {
-        color: "currentColor",
-        spacing: "spacious",
-        label: intl.formatMessage(messages.profileCardMoreIconLabel)
-      })
-    }))
+    }) => {
+      return fg('ptc_migrate_buttons') ? /*#__PURE__*/React.createElement(IconButton, _extends({
+        type: "button"
+      }, providedProps, {
+        ref: triggerRef,
+        label: intl.formatMessage(messages.profileCardMoreIconLabel),
+        icon: MoreIcon
+      })) : /*#__PURE__*/React.createElement(Button, _extends({
+        type: "button"
+      }, providedProps, {
+        ref: triggerRef,
+        iconBefore: /*#__PURE__*/React.createElement(MoreIcon, {
+          color: "currentColor",
+          spacing: "spacious",
+          label: intl.formatMessage(messages.profileCardMoreIconLabel)
+        })
+      }));
+    }
   }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, actions.map((action, index) => /*#__PURE__*/React.createElement(DropdownItem, {
     key: action.id,
     onClick: (event, ...args) => {

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

@@ -3,8 +3,10 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Avatar from '@atlaskit/avatar';
-import Button from '@atlaskit/button';
+import ButtonLegacy from '@atlaskit/button';
+import { LinkButton } from '@atlaskit/button/new';
 import FocusRing from '@atlaskit/focus-ring';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Spinner from '@atlaskit/spinner';
 import { N0 } from '@atlaskit/theme/colors';
 import messages from '../../messages';
@@ -154,7 +156,13 @@ const Actions = ({
     const button = /*#__PURE__*/React.createElement(FocusRing, {
       isInset: true,
       key: `profile-card-action-focus-ring_${action.id || index}`
-    }, /*#__PURE__*/React.createElement(Button, {
+    }, fg('ptc_migrate_buttons') ? /*#__PURE__*/React.createElement(LinkButton, {
+      appearance: "default",
+      key: action.id || index,
+      onClick: (event, ...args) => onActionClick(action, args, event, index),
+      href: action.link || '',
+      autoFocus: index === 0 && isTriggeredUsingKeyboard
+    }, action.label, isKudos && /*#__PURE__*/React.createElement(AnimationWrapper, null, /*#__PURE__*/React.createElement(KudosBlobAnimation, null))) : /*#__PURE__*/React.createElement(ButtonLegacy, {
       appearance: "default",
       key: action.id || index,
       onClick: (event, ...args) => onActionClick(action, args, event, index),

package/dist/es2019/components/User/ReportingLinesDetails.compiled.css

@@ -0,0 +1,6 @@
+._19bvze3t{padding-left:var(--ds-space-0,0)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}

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

@@ -1,10 +1,14 @@
+/* ReportingLinesDetails.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./ReportingLinesDetails.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import Avatar from '@atlaskit/avatar';
 import AvatarGroup from '@atlaskit/avatar-group';
-import Button from '@atlaskit/button';
+import ButtonLegacy from '@atlaskit/button';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
+import { Pressable } from '@atlaskit/primitives/compiled';
 import messages from '../../messages';
 import { ManagerName, ManagerSection, OffsetWrapper, ReportingLinesSection } from '../../styled/ReportingLines';
 import { reportingLinesClicked } from '../../util/analytics';
@@ -20,9 +24,12 @@ const reportingLinesHeadingDefaultStyles = xcss({
 const reportingLinesHeadingStyles = xcss({
   marginBottom: '0'
 });
+const styles = {
+  reportingLinesButton: "_ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _bfhksm61 _irr3166n"
+};
 const avatarGroupMaxCount = 5;
 const ReportingLinesDetails = props => {
-  var _manager$pii, _manager$pii2;
+  var _manager$pii, _manager$pii2, _manager$pii3, _manager$pii4;
   const {
     formatMessage
   } = useIntl();
@@ -45,6 +52,18 @@ const ReportingLinesDetails = props => {
     }));
     onReportingLinesClick(user);
   } : undefined;
+  const onReportingLinksClick = (user, userType, href) => {
+    if (href) {
+      window.location.href = href;
+    }
+    if (onReportingLinesClick) {
+      onReportingLinesClick(user);
+    }
+    fireAnalyticsWithDuration(duration => reportingLinesClicked({
+      duration,
+      userType
+    }));
+  };
   const showMoreButtonProps = fg('platform_profilecard-enable_reporting_lines_label') ? {
     'aria-label': formatMessage(messages.profileCardMoreReportingLinesLabel, {
       count: reports.length - avatarGroupMaxCount + 1
@@ -52,7 +71,14 @@ const ReportingLinesDetails = props => {
   } : undefined;
   return /*#__PURE__*/React.createElement(React.Fragment, null, manager && /*#__PURE__*/React.createElement(ReportingLinesSection, null, /*#__PURE__*/React.createElement(Box, {
     xcss: [reportingLinesHeadingDefaultStyles, reportingLinesHeadingStyles]
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.managerSectionHeading)), /*#__PURE__*/React.createElement(OffsetWrapper, null, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.managerSectionHeading)), /*#__PURE__*/React.createElement(OffsetWrapper, null, fg('ptc_migrate_buttons') ? /*#__PURE__*/React.createElement(Pressable, {
+    onClick: () => onReportingLinksClick(manager, 'manager', getProfileHref(manager.accountIdentifier, reportingLinesProfileUrl)),
+    isDisabled: !onReportingLinesClick,
+    xcss: styles.reportingLinesButton
+  }, /*#__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))) : /*#__PURE__*/React.createElement(ButtonLegacy, {
     appearance: "subtle",
     spacing: "none",
     href: getProfileHref(manager.accountIdentifier, reportingLinesProfileUrl),
@@ -60,8 +86,8 @@ const ReportingLinesDetails = props => {
     isDisabled: !onReportingLinesClick
   }, /*#__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(Box, {
+    src: (_manager$pii3 = manager.pii) === null || _manager$pii3 === void 0 ? void 0 : _manager$pii3.picture
+  }), /*#__PURE__*/React.createElement(ManagerName, null, (_manager$pii4 = manager.pii) === null || _manager$pii4 === void 0 ? void 0 : _manager$pii4.name))))), hasReports && /*#__PURE__*/React.createElement(ReportingLinesSection, null, /*#__PURE__*/React.createElement(Box, {
     xcss: reportingLinesHeadingDefaultStyles
   }, /*#__PURE__*/React.createElement(FormattedMessage, messages.directReportsSectionHeading)), /*#__PURE__*/React.createElement(AvatarGroup, {
     appearance: "stack",

package/dist/es2019/components/team-profile-card/main.js

@@ -5,7 +5,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import AvatarGroup from '@atlaskit/avatar-group';
 import Heading from '@atlaskit/heading';
-import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public';
+import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
 import { Box, Inline, Pressable, Stack, Text } from '@atlaskit/primitives/compiled';
 const styles = {
   wrapperStyles: "_2rkopd34 _v564nm7n _1reo15vq _18m915vq _189ee4h9 _1dqonqa1 _1h6dmuej _1e0c1txw _2lx21bp4 _1bsb5x59 _1ul95x59 _4t3i1wug",

package/dist/es2019/util/analytics.js

@@ -32,7 +32,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/profilecard",
-    packageVersion: "23.3.0",
+    packageVersion: "23.4.0",
     ...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', "23.3.0");
+  headers.append('atl-client-version', "23.4.0");
   return headers;
 };
 export function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/esm/client/getTeamFromAGG.js

@@ -57,7 +57,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', "23.3.0");
+  headers.append('atl-client-version', "23.4.0");
   return headers;
 };
 export function getTeamFromAGG(_x, _x2, _x3) {

package/dist/esm/components/Error/ErrorMessage.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
-import Button from '@atlaskit/button/standard-button';
-import { IconTile } from '@atlaskit/icon';
-import CrossCircleIcon from '@atlaskit/icon/core/migration/cross-circle';
+import ButtonLegacy from '@atlaskit/button';
+import Button from '@atlaskit/button/new';
+import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
 import IconError from '@atlaskit/icon/glyph/cross-circle';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives';
@@ -31,20 +31,15 @@ var ErrorMessage = function ErrorMessage(props) {
   };
   return /*#__PURE__*/React.createElement(ErrorWrapper, {
     testId: "profilecard-error"
-  }, fg('ptc-migrate-legacy-icons-profilecard') ? /*#__PURE__*/React.createElement(IconTile, {
-    icon: CrossCircleIcon,
+  }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
     label: "icon error",
-    size: "48",
-    appearance: 'gray'
-  }) :
-  /*#__PURE__*/
-  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
-  React.createElement(IconError, {
-    label: "icon error",
-    size: "xlarge"
-  }), errorContent(), reload && /*#__PURE__*/React.createElement(Button, {
+    LEGACY_fallbackIcon: IconError,
+    LEGACY_size: "xlarge"
+  }), errorContent(), reload && (fg('ptc_migrate_buttons') ? /*#__PURE__*/React.createElement(Button, {
+    onClick: reload
+  }, "Try again") : /*#__PURE__*/React.createElement(ButtonLegacy, {
     appearance: "link",
     onClick: reload
-  }, "Try again"));
+  }, "Try again")));
 };
 export default ErrorMessage;

package/dist/esm/components/Team/TeamProfileCard.js

@@ -8,7 +8,8 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import AvatarGroup from '@atlaskit/avatar-group';
 import LoadingButton from '@atlaskit/button/loading-button';
-import Button from '@atlaskit/button/standard-button';
+import Button, { IconButton, LinkButton } from '@atlaskit/button/new';
+import ButtonLegacy from '@atlaskit/button/standard-button';
 import FocusRing from '@atlaskit/focus-ring';
 import MoreIcon from '@atlaskit/icon/core/migration/show-more-horizontal--more';
 import { LinkItem, MenuGroup } from '@atlaskit/menu';
@@ -127,7 +128,12 @@ var ActionButton = function ActionButton(_ref2) {
   var isGiveKudosActionButton = action.id === GIVE_KUDOS_ACTION_ID;
   var actionButton = /*#__PURE__*/React.createElement(FocusRing, {
     isInset: true
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, fg('ptc_migrate_buttons') ? /*#__PURE__*/React.createElement(LinkButton, {
+    key: action.id || index,
+    onClick: onActionClick(action, analytics, index),
+    href: action.link || '',
+    shouldFitContainer: true
+  }, action.label, isGiveKudosActionButton && /*#__PURE__*/React.createElement(AnimationWrapper, null, /*#__PURE__*/React.createElement(KudosBlobAnimation, null))) : /*#__PURE__*/React.createElement(ButtonLegacy, {
     key: action.id || index,
     onClick: onActionClick(action, analytics, index),
     href: action.link,
@@ -177,7 +183,16 @@ var ExtraActions = function ExtraActions(_ref3) {
       }));
     },
     trigger: function trigger(triggerProps) {
-      return /*#__PURE__*/React.createElement(Button, _extends({
+      return fg('ptc_migrate_buttons') ? /*#__PURE__*/React.createElement(IconButton, _extends({
+        testId: "more-actions-button"
+      }, triggerProps, {
+        isSelected: isOpen,
+        onClick: function onClick() {
+          return onMoreClick(!isOpen);
+        },
+        icon: MoreIcon,
+        label: "actions"
+      })) : /*#__PURE__*/React.createElement(ButtonLegacy, _extends({
         testId: "more-actions-button"
       }, triggerProps, {
         isSelected: isOpen,
@@ -293,7 +308,12 @@ var ErrorMessage = function ErrorMessage(_ref6) {
   }, /*#__PURE__*/React.createElement(ErrorIllustration, null), /*#__PURE__*/React.createElement(Text, {
     as: "p",
     weight: "semibold"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.teamErrorTitle)), /*#__PURE__*/React.createElement(TeamErrorText, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.teamErrorText)), clientFetchProfile && /*#__PURE__*/React.createElement(ActionButtons, null, /*#__PURE__*/React.createElement(WrappedButton, null, /*#__PURE__*/React.createElement(LoadingButton, {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.teamErrorTitle)), /*#__PURE__*/React.createElement(TeamErrorText, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.teamErrorText)), clientFetchProfile && /*#__PURE__*/React.createElement(ActionButtons, null, /*#__PURE__*/React.createElement(WrappedButton, null, fg('ptc_migrate_buttons') ? /*#__PURE__*/React.createElement(Button, {
+    testId: "client-fetch-profile-button",
+    shouldFitContainer: true,
+    onClick: retry,
+    isLoading: isLoading
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.teamErrorButton)) : /*#__PURE__*/React.createElement(LoadingButton, {
     testId: "client-fetch-profile-button",
     shouldFitContainer: true,
     onClick: retry,

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

@@ -5,8 +5,10 @@ var _excluded = ["triggerRef", "isSelected", "testId"];
 import React, { useCallback, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/custom-theme-button';
+import { IconButton } from '@atlaskit/button/new';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import MoreIcon from '@atlaskit/icon/core/migration/show-more-horizontal--more';
+import { fg } from '@atlaskit/platform-feature-flags';
 import messages from '../../messages';
 import { OverflowActionButtonsWrapper } from '../../styled/Card';
 import { moreActionsClicked } from '../../util/analytics';
@@ -44,7 +46,13 @@ export var OverflowProfileCardButtons = function OverflowProfileCardButtons(prop
         isSelected = _ref2.isSelected,
         testId = _ref2.testId,
         providedProps = _objectWithoutProperties(_ref2, _excluded);
-      return /*#__PURE__*/React.createElement(Button, _extends({
+      return fg('ptc_migrate_buttons') ? /*#__PURE__*/React.createElement(IconButton, _extends({
+        type: "button"
+      }, providedProps, {
+        ref: triggerRef,
+        label: intl.formatMessage(messages.profileCardMoreIconLabel),
+        icon: MoreIcon
+      })) : /*#__PURE__*/React.createElement(Button, _extends({
         type: "button"
       }, providedProps, {
         ref: triggerRef,

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

@@ -5,8 +5,10 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Avatar from '@atlaskit/avatar';
-import Button from '@atlaskit/button';
+import ButtonLegacy from '@atlaskit/button';
+import { LinkButton } from '@atlaskit/button/new';
 import FocusRing from '@atlaskit/focus-ring';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Spinner from '@atlaskit/spinner';
 import { N0 } from '@atlaskit/theme/colors';
 import messages from '../../messages';
@@ -158,7 +160,7 @@ var Actions = function Actions(_ref) {
     var button = /*#__PURE__*/React.createElement(FocusRing, {
       isInset: true,
       key: "profile-card-action-focus-ring_".concat(action.id || index)
-    }, /*#__PURE__*/React.createElement(Button, {
+    }, fg('ptc_migrate_buttons') ? /*#__PURE__*/React.createElement(LinkButton, {
       appearance: "default",
       key: action.id || index,
       onClick: function onClick(event) {
@@ -167,6 +169,17 @@ var Actions = function Actions(_ref) {
         }
         return onActionClick(action, args, event, index);
       },
+      href: action.link || '',
+      autoFocus: index === 0 && isTriggeredUsingKeyboard
+    }, action.label, isKudos && /*#__PURE__*/React.createElement(AnimationWrapper, null, /*#__PURE__*/React.createElement(KudosBlobAnimation, null))) : /*#__PURE__*/React.createElement(ButtonLegacy, {
+      appearance: "default",
+      key: action.id || index,
+      onClick: function onClick(event) {
+        for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+          args[_key2 - 1] = arguments[_key2];
+        }
+        return onActionClick(action, args, event, index);
+      },
       href: action.link,
       autoFocus: index === 0 && isTriggeredUsingKeyboard
     }, action.label, isKudos && /*#__PURE__*/React.createElement(AnimationWrapper, null, /*#__PURE__*/React.createElement(KudosBlobAnimation, null))));

package/dist/esm/components/User/ReportingLinesDetails.compiled.css

@@ -0,0 +1,6 @@
+._19bvze3t{padding-left:var(--ds-space-0,0)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}

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

@@ -1,10 +1,14 @@
+/* ReportingLinesDetails.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./ReportingLinesDetails.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import Avatar from '@atlaskit/avatar';
 import AvatarGroup from '@atlaskit/avatar-group';
-import Button from '@atlaskit/button';
+import ButtonLegacy from '@atlaskit/button';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
+import { Pressable } from '@atlaskit/primitives/compiled';
 import messages from '../../messages';
 import { ManagerName, ManagerSection, OffsetWrapper, ReportingLinesSection } from '../../styled/ReportingLines';
 import { reportingLinesClicked } from '../../util/analytics';
@@ -20,9 +24,12 @@ var reportingLinesHeadingDefaultStyles = xcss({
 var reportingLinesHeadingStyles = xcss({
   marginBottom: '0'
 });
+var styles = {
+  reportingLinesButton: "_ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _bfhksm61 _irr3166n"
+};
 var avatarGroupMaxCount = 5;
 var ReportingLinesDetails = function ReportingLinesDetails(props) {
-  var _manager$pii, _manager$pii2;
+  var _manager$pii, _manager$pii2, _manager$pii3, _manager$pii4;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var fireAnalyticsWithDuration = props.fireAnalyticsWithDuration,
@@ -47,6 +54,20 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
       onReportingLinesClick(user);
     } : undefined;
   };
+  var onReportingLinksClick = function onReportingLinksClick(user, userType, href) {
+    if (href) {
+      window.location.href = href;
+    }
+    if (onReportingLinesClick) {
+      onReportingLinesClick(user);
+    }
+    fireAnalyticsWithDuration(function (duration) {
+      return reportingLinesClicked({
+        duration: duration,
+        userType: userType
+      });
+    });
+  };
   var showMoreButtonProps = fg('platform_profilecard-enable_reporting_lines_label') ? {
     'aria-label': formatMessage(messages.profileCardMoreReportingLinesLabel, {
       count: reports.length - avatarGroupMaxCount + 1
@@ -54,7 +75,16 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
   } : undefined;
   return /*#__PURE__*/React.createElement(React.Fragment, null, manager && /*#__PURE__*/React.createElement(ReportingLinesSection, null, /*#__PURE__*/React.createElement(Box, {
     xcss: [reportingLinesHeadingDefaultStyles, reportingLinesHeadingStyles]
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.managerSectionHeading)), /*#__PURE__*/React.createElement(OffsetWrapper, null, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.managerSectionHeading)), /*#__PURE__*/React.createElement(OffsetWrapper, null, fg('ptc_migrate_buttons') ? /*#__PURE__*/React.createElement(Pressable, {
+    onClick: function onClick() {
+      return onReportingLinksClick(manager, 'manager', getProfileHref(manager.accountIdentifier, reportingLinesProfileUrl));
+    },
+    isDisabled: !onReportingLinesClick,
+    xcss: styles.reportingLinesButton
+  }, /*#__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))) : /*#__PURE__*/React.createElement(ButtonLegacy, {
     appearance: "subtle",
     spacing: "none",
     href: getProfileHref(manager.accountIdentifier, reportingLinesProfileUrl),
@@ -62,8 +92,8 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
     isDisabled: !onReportingLinesClick
   }, /*#__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(Box, {
+    src: (_manager$pii3 = manager.pii) === null || _manager$pii3 === void 0 ? void 0 : _manager$pii3.picture
+  }), /*#__PURE__*/React.createElement(ManagerName, null, (_manager$pii4 = manager.pii) === null || _manager$pii4 === void 0 ? void 0 : _manager$pii4.name))))), hasReports && /*#__PURE__*/React.createElement(ReportingLinesSection, null, /*#__PURE__*/React.createElement(Box, {
     xcss: reportingLinesHeadingDefaultStyles
   }, /*#__PURE__*/React.createElement(FormattedMessage, messages.directReportsSectionHeading)), /*#__PURE__*/React.createElement(AvatarGroup, {
     appearance: "stack",

package/dist/esm/components/team-profile-card/main.js

@@ -5,7 +5,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import AvatarGroup from '@atlaskit/avatar-group';
 import Heading from '@atlaskit/heading';
-import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public';
+import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
 import { Box, Inline, Pressable, Stack, Text } from '@atlaskit/primitives/compiled';
 var styles = {
   wrapperStyles: "_2rkopd34 _v564nm7n _1reo15vq _18m915vq _189ee4h9 _1dqonqa1 _1h6dmuej _1e0c1txw _2lx21bp4 _1bsb5x59 _1ul95x59 _4t3i1wug",

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: "23.3.0"
+      packageVersion: "23.4.0"
     }, attributes), {}, {
       firedAt: Math.round(getPageTime())
     })

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "23.3.0",
+	"version": "23.4.0",
 	"description": "A React component to display a card with user information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -64,7 +64,7 @@
 		"@atlaskit/icon": "^25.0.0",
 		"@atlaskit/lozenge": "^12.2.0",
 		"@atlaskit/menu": "^3.1.0",
-		"@atlaskit/modal-dialog": "^13.0.0",
+		"@atlaskit/modal-dialog": "^13.1.0",
 		"@atlaskit/people-teams-ui-public": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popup": "^2.0.0",
@@ -73,7 +73,7 @@
 		"@atlaskit/rovo-triggers": "^2.3.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.4.0",
+		"@atlaskit/tokens": "^4.5.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.2",
@@ -151,7 +151,7 @@
 		"platform_profilecard-enable_reporting_lines_label": {
 			"type": "boolean"
 		},
-		"ptc-migrate-legacy-icons-profilecard": {
+		"ptc_migrate_buttons": {
 			"type": "boolean"
 		}
 	},