@atlaskit/smart-card 35.2.5 → 35.2.6

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/smart-card
 
+## 35.2.6
+
+### Patch Changes
+
+- [#124939](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/124939)
+  [`43119bff17a5e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/43119bff17a5e) -
+  [ux] Fix inline card design refresh unresolved view action word wrap
+
 ## 35.2.5
 
 ### Patch Changes

package/dist/cjs/utils/analytics/analytics.js

@@ -11,7 +11,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "35.2.5"
+  packageVersion: "35.2.6"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/InlineCard/ErroredView/InlineCardErroredViewOld.js

@@ -20,7 +20,6 @@ var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _messages = require("../../../messages");
 var _HoverCard = require("../../HoverCard");
-var _actionButton = require("../common/action-button");
 var _Frame = require("../Frame");
 var _Icon = require("../Icon");
 var _IconEmotion = require("../Icon-emotion");
@@ -53,12 +52,6 @@ var InlineCardErroredViewOld = exports.InlineCardErroredViewOld = /*#__PURE__*/f
     (0, _defineProperty2.default)(_this, "renderActionButton", function () {
       var onRetry = _this.props.onRetry;
       var Button = (0, _withFrameStyleControl.default)(_button.default, _this.frameRef);
-      if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
-        return onRetry && /*#__PURE__*/_react.default.createElement(Button, {
-          component: _actionButton.ActionButton,
-          onClick: _this.handleRetry
-        }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.try_again));
-      }
       return onRetry && /*#__PURE__*/_react.default.createElement(Button, {
         spacing: "none",
         component: (0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard') ? _styled.IconStyledButtonOldVisualRefresh : _styledEmotion.IconStyledButton,

package/dist/cjs/view/InlineCard/ErroredView/index.js

@@ -48,8 +48,7 @@ var InlineCardErroredViewNew = function InlineCardErroredViewNew(_ref) {
   }, [onRetry]);
   var renderActionButton = _react.default.useCallback(function () {
     var Button = (0, _withFrameStyleControl.default)(_button.default, frameRef);
-    return onRetry && ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? /*#__PURE__*/_react.default.createElement(Button, {
-      component: _actionButton.ActionButton,
+    return onRetry && ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? /*#__PURE__*/_react.default.createElement(_actionButton.ActionButton, {
       onClick: handleRetry
     }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.try_again)) : /*#__PURE__*/_react.default.createElement(Button, {
       spacing: "none",

package/dist/cjs/view/InlineCard/ForbiddenView/InlineCardForbiddenViewOld.js

@@ -23,7 +23,6 @@ var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _messages = require("../../../messages");
 var _HoverCard = require("../../HoverCard");
-var _actionButton = require("../common/action-button");
 var _Frame = require("../Frame");
 var _Icon = require("../Icon");
 var _IconEmotion = require("../Icon-emotion");
@@ -116,15 +115,6 @@ var InlineCardForbiddenViewOld = exports.InlineCardForbiddenViewOld = /*#__PURE_
       var accessType = (_this$props$requestAc = _this.props.requestAccessContext) === null || _this$props$requestAc === void 0 ? void 0 : _this$props$requestAc.accessType;
       if (_this.state.hasRequestAccessContextMessage) {
         if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
-          if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
-            var isDisabled = accessType === 'PENDING_REQUEST_EXISTS';
-            return /*#__PURE__*/_react.default.createElement(Button, {
-              onClick: _this.handleRetry,
-              component: _actionButton.ActionButton,
-              testId: "button-connect-other-account",
-              isDisabled: isDisabled
-            }, _this.renderForbiddenAccessMessage());
-          }
           return /*#__PURE__*/_react.default.createElement(Button, {
             spacing: "none",
             onClick: _this.handleRetry,
@@ -145,17 +135,6 @@ var InlineCardForbiddenViewOld = exports.InlineCardForbiddenViewOld = /*#__PURE_
         }
       }
       if (onAuthorise) {
-        if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
-          return /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
-            xcss: actionButtonLozengeStyle,
-            onClick: _this.handleRetry,
-            testId: "button-connect-other-account"
-          }, /*#__PURE__*/_react.default.createElement(_lozenge.default, (0, _extends2.default)({
-            appearance: 'moved'
-          }, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? {
-            isBold: true
-          } : undefined), _this.renderForbiddenAccessMessage())));
-        }
         return /*#__PURE__*/_react.default.createElement(Button, {
           spacing: "none",
           onClick: _this.handleRetry,
@@ -204,8 +183,4 @@ var InlineCardForbiddenViewOld = exports.InlineCardForbiddenViewOld = /*#__PURE_
       return content;
     }
   }]);
-}(_react.default.Component);
-var actionButtonLozengeStyle = (0, _primitives.xcss)({
-  backgroundColor: 'color.background.neutral.subtle',
-  padding: 'space.0'
-});
+}(_react.default.Component);

package/dist/cjs/view/InlineCard/ForbiddenView/index.js

@@ -94,11 +94,10 @@ var InlineCardForbiddenViewNew = function InlineCardForbiddenViewNew(_ref) {
     if (hasRequestAccessContextMessage) {
       if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
         var isDisabled = accessType === 'PENDING_REQUEST_EXISTS';
-        return /*#__PURE__*/_react.default.createElement(Button, {
+        return /*#__PURE__*/_react.default.createElement(_actionButton.ActionButton, {
+          isDisabled: isDisabled,
           onClick: handleRetry,
-          component: _actionButton.ActionButton,
-          testId: "button-connect-other-account",
-          isDisabled: isDisabled
+          testId: "button-connect-other-account"
         }, renderForbiddenAccessMessage());
       }
       return /*#__PURE__*/_react.default.createElement(Button, {

package/dist/cjs/view/InlineCard/UnauthorisedView/InlineCardUnauthorizedViewOld.js

@@ -17,7 +17,6 @@ var _colors = require("@atlaskit/theme/colors");
 var _useAnalyticsEvents2 = require("../../../common/analytics/generated/use-analytics-events");
 var _messages = require("../../../messages");
 var _HoverCard = require("../../HoverCard");
-var _actionButton = require("../common/action-button");
 var _Frame = require("../Frame");
 var _Icon = require("../Icon");
 var _IconEmotion = require("../Icon-emotion");
@@ -86,17 +85,6 @@ var InlineCardUnauthorizedViewOld = exports.InlineCardUnauthorizedViewOld = func
   var renderActionButton = _react.default.useCallback(function () {
     var Button = (0, _withFrameStyleControl.default)(_button.default, frameRef);
     if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
-      if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
-        return /*#__PURE__*/_react.default.createElement(Button, {
-          component: _actionButton.ActionButton,
-          onClick: handleConnectAccount,
-          testId: "button-connect-account"
-        }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_link_account_card_name, {
-          values: {
-            context: context
-          }
-        })));
-      }
       return onAuthorise ? /*#__PURE__*/_react.default.createElement(Button, {
         spacing: "none",
         component: _styled.IconStyledButtonOldVisualRefresh,

package/dist/cjs/view/InlineCard/UnauthorisedView/index.js

@@ -72,8 +72,7 @@ var InlineCardUnauthorizedViewNew = function InlineCardUnauthorizedViewNew(_ref)
   var renderActionButton = _react.default.useCallback(function () {
     var Button = (0, _withFrameStyleControl.default)(_button.default, frameRef);
     if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
-      return /*#__PURE__*/_react.default.createElement(Button, {
-        component: _actionButton.ActionButton,
+      return /*#__PURE__*/_react.default.createElement(_actionButton.ActionButton, {
         onClick: handleConnectAccount,
         testId: "button-connect-account"
       }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_link_account_card_name, {

package/dist/cjs/view/InlineCard/common/action-button/index.compiled.css

@@ -0,0 +1,20 @@
+._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
+._19bv12x7{padding-left:var(--ds-space-075,6px)}
+._1e0c1bgi{display:contents}
+._1e0c1nu9{display:inline}
+._1nmz1hna{word-break:break-word}
+._1y1m1u8q{background-clip:padding-box}
+._80om13gf{cursor:not-allowed}
+._80omtlke{cursor:pointer}
+._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
+._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
+._ca0qv77o{padding-top:var(--ds-space-025,2px)}
+._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
+._o5721btx{white-space:break-spaces}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
+._u5f312x7{padding-right:var(--ds-space-075,6px)}
+._y3gn18uv{text-align:initial}
+._irr315ej:hover{background-color:var(--ds-background-neutral-hovered,#091e4224)}
+._1di6ip91:active{background-color:var(--ds-background-neutral-pressed,#091e424f)}

package/dist/cjs/view/InlineCard/common/action-button/index.js

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,58 +7,40 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ActionButton = void 0;
+require("./index.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _primitives = require("@atlaskit/primitives");
-var _excluded = ["children"];
+var _compiled = require("@atlaskit/primitives/compiled");
+var _excluded = ["children", "isDisabled"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var styles = {
+  button: "_1e0c1bgi",
+  innerContainer: "_1e0c1nu9 _1y1m1u8q _16d9qvcn _k48p1wq8 _19bv12x7 _ca0qv77o _n3tdv77o _u5f312x7 _y3gn18uv _o5721btx _1nmz1hna",
+  enabled: "_syaz1fxt _80omtlke _bfhkm7j4 _irr315ej _1di6ip91",
+  disabled: "_syaz1lh4 _80om13gf _bfhksyzs"
+};
 /**
  * Action button has to be a span for the overflow to work correctly
  */
 var ActionButton = exports.ActionButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
+    isDisabled = _ref.isDisabled,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  // `Button transforms `testId` into `data-testid`. We need to transform it back to `testId`
-  var testId = props["data-testid"];
-  return /*#__PURE__*/_react.default.createElement(_primitives.Box, (0, _extends2.default)({
-    as: "span",
-    ref: ref,
-    xcss: [actionButtonStyle, !props.disabled && actionButtonNotDisabledStyle]
-  }, props, {
-    "aria-disabled": props.disabled,
-    role: "button",
-    testId: testId
-  }), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    as: "span",
-    xcss: internalButtonStyle
+  return /*#__PURE__*/React.createElement(_compiled.Pressable, (0, _extends2.default)({}, props, {
+    isDisabled: isDisabled,
+    ref: ref
+    // We need to reset Pressable fixed font size to allow inline card to inherit the font size
+    // from parent component such as paragraph and heading
+    ,
+    style: {
+      font: "inherit"
+    },
+    xcss: styles.button
+  }), /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)([styles.innerContainer, isDisabled ? styles.disabled : styles.enabled])
   }, children));
-});
-var actionButtonStyle = (0, _primitives.xcss)({
-  textAlign: 'initial',
-  display: 'inline',
-  borderRadius: 'border.radius.100',
-  borderTopLeftRadius: '0px',
-  borderBottomLeftRadius: '0px',
-  backgroundClip: 'padding-box',
-  boxDecorationBreak: 'clone',
-  paddingLeft: 'space.075',
-  paddingTop: 'space.025',
-  paddingBottom: 'space.025',
-  paddingRight: 'space.075',
-  whiteSpace: 'nowrap',
-  backgroundColor: 'color.background.neutral',
-  cursor: 'not-allowed',
-  color: 'color.text.disabled'
-});
-var internalButtonStyle = (0, _primitives.xcss)({
-  fontWeight: 'font.weight.medium'
-});
-var actionButtonNotDisabledStyle = (0, _primitives.xcss)({
-  color: 'color.text',
-  cursor: 'pointer',
-  ':hover': {
-    backgroundColor: 'color.background.neutral.hovered'
-  }
 });

package/dist/cjs/view/LinkUrl/index.js

@@ -20,7 +20,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "35.2.5",
+  packageVersion: "35.2.6",
   componentName: 'linkUrl'
 };
 var Anchor = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/utils/analytics/analytics.js

@@ -2,7 +2,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "35.2.5"
+  packageVersion: "35.2.6"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/InlineCard/ErroredView/InlineCardErroredViewOld.js

@@ -8,7 +8,6 @@ import { Box, xcss } from '@atlaskit/primitives';
 import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import { HoverCard } from '../../HoverCard';
-import { ActionButton } from '../common/action-button';
 import { Frame } from '../Frame';
 import { AKIconWrapper } from '../Icon';
 import { AKIconWrapper as AKIconWrapperOld } from '../Icon-emotion';
@@ -38,12 +37,6 @@ export class InlineCardErroredViewOld extends React.Component {
         onRetry
       } = this.props;
       const Button = withFrameStyleControl(ButtonOld, this.frameRef);
-      if (fg('platform-linking-visual-refresh-v1')) {
-        return onRetry && /*#__PURE__*/React.createElement(Button, {
-          component: ActionButton,
-          onClick: this.handleRetry
-        }, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again));
-      }
       return onRetry && /*#__PURE__*/React.createElement(Button, {
         spacing: "none",
         component: fg('bandicoots-compiled-migration-smartcard') ? IconStyledButtonOldVisualRefresh : IconStyledButtonOld,

package/dist/es2019/view/InlineCard/ErroredView/index.js

@@ -41,8 +41,7 @@ const InlineCardErroredViewNew = ({
   }, [onRetry]);
   const renderActionButton = React.useCallback(() => {
     const Button = withFrameStyleControl(ButtonOld, frameRef);
-    return onRetry && (fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Button, {
-      component: ActionButton,
+    return onRetry && (fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(ActionButton, {
       onClick: handleRetry
     }, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again)) : /*#__PURE__*/React.createElement(Button, {
       spacing: "none",

package/dist/es2019/view/InlineCard/ForbiddenView/InlineCardForbiddenViewOld.js

@@ -7,11 +7,10 @@ import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
 import LegacyLockIcon from '@atlaskit/icon/glyph/lock-filled';
 import Lozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, Pressable, xcss } from '@atlaskit/primitives';
+import { Box, xcss } from '@atlaskit/primitives';
 import { N500, R400 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import { HoverCard } from '../../HoverCard';
-import { ActionButton } from '../common/action-button';
 import { Frame } from '../Frame';
 import { AKIconWrapper } from '../Icon';
 import { AKIconWrapper as AKIconWrapperOld } from '../Icon-emotion';
@@ -103,15 +102,6 @@ export class InlineCardForbiddenViewOld extends React.Component {
       const accessType = (_this$props$requestAc2 = this.props.requestAccessContext) === null || _this$props$requestAc2 === void 0 ? void 0 : _this$props$requestAc2.accessType;
       if (this.state.hasRequestAccessContextMessage) {
         if (fg('bandicoots-compiled-migration-smartcard')) {
-          if (fg('platform-linking-visual-refresh-v1')) {
-            const isDisabled = accessType === 'PENDING_REQUEST_EXISTS';
-            return /*#__PURE__*/React.createElement(Button, {
-              onClick: this.handleRetry,
-              component: ActionButton,
-              testId: "button-connect-other-account",
-              isDisabled: isDisabled
-            }, this.renderForbiddenAccessMessage());
-          }
           return /*#__PURE__*/React.createElement(Button, {
             spacing: "none",
             onClick: this.handleRetry,
@@ -132,17 +122,6 @@ export class InlineCardForbiddenViewOld extends React.Component {
         }
       }
       if (onAuthorise) {
-        if (fg('platform-linking-visual-refresh-v1')) {
-          return /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Pressable, {
-            xcss: actionButtonLozengeStyle,
-            onClick: this.handleRetry,
-            testId: "button-connect-other-account"
-          }, /*#__PURE__*/React.createElement(Lozenge, _extends({
-            appearance: 'moved'
-          }, fg('platform-component-visual-refresh') ? {
-            isBold: true
-          } : undefined), this.renderForbiddenAccessMessage())));
-        }
         return /*#__PURE__*/React.createElement(Button, {
           spacing: "none",
           onClick: this.handleRetry,
@@ -186,8 +165,4 @@ export class InlineCardForbiddenViewOld extends React.Component {
     }
     return content;
   }
-}
-const actionButtonLozengeStyle = xcss({
-  backgroundColor: 'color.background.neutral.subtle',
-  padding: 'space.0'
-});
+}

package/dist/es2019/view/InlineCard/ForbiddenView/index.js

@@ -84,11 +84,10 @@ const InlineCardForbiddenViewNew = ({
     if (hasRequestAccessContextMessage) {
       if (fg('platform-linking-visual-refresh-v1')) {
         const isDisabled = accessType === 'PENDING_REQUEST_EXISTS';
-        return /*#__PURE__*/React.createElement(Button, {
+        return /*#__PURE__*/React.createElement(ActionButton, {
+          isDisabled: isDisabled,
           onClick: handleRetry,
-          component: ActionButton,
-          testId: "button-connect-other-account",
-          isDisabled: isDisabled
+          testId: "button-connect-other-account"
         }, renderForbiddenAccessMessage());
       }
       return /*#__PURE__*/React.createElement(Button, {

package/dist/es2019/view/InlineCard/UnauthorisedView/InlineCardUnauthorizedViewOld.js

@@ -10,7 +10,6 @@ import { N500, R400 } from '@atlaskit/theme/colors';
 import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
 import { messages } from '../../../messages';
 import { HoverCard } from '../../HoverCard';
-import { ActionButton } from '../common/action-button';
 import { Frame } from '../Frame';
 import { AKIconWrapper } from '../Icon';
 import { AKIconWrapper as AKIconWrapperOld } from '../Icon-emotion';
@@ -79,17 +78,6 @@ export const InlineCardUnauthorizedViewOld = ({
   const renderActionButton = React.useCallback(() => {
     const Button = withFrameStyleControl(ButtonOld, frameRef);
     if (fg('bandicoots-compiled-migration-smartcard')) {
-      if (fg('platform-linking-visual-refresh-v1')) {
-        return /*#__PURE__*/React.createElement(Button, {
-          component: ActionButton,
-          onClick: handleConnectAccount,
-          testId: "button-connect-account"
-        }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
-          values: {
-            context
-          }
-        })));
-      }
       return onAuthorise ? /*#__PURE__*/React.createElement(Button, {
         spacing: "none",
         component: IconStyledButtonOldVisualRefresh,

package/dist/es2019/view/InlineCard/UnauthorisedView/index.js

@@ -65,8 +65,7 @@ const InlineCardUnauthorizedViewNew = ({
   const renderActionButton = React.useCallback(() => {
     const Button = withFrameStyleControl(ButtonOld, frameRef);
     if (fg('platform-linking-visual-refresh-v1')) {
-      return /*#__PURE__*/React.createElement(Button, {
-        component: ActionButton,
+      return /*#__PURE__*/React.createElement(ActionButton, {
         onClick: handleConnectAccount,
         testId: "button-connect-account"
       }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {

package/dist/es2019/view/InlineCard/common/action-button/index.compiled.css

@@ -0,0 +1,20 @@
+._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
+._19bv12x7{padding-left:var(--ds-space-075,6px)}
+._1e0c1bgi{display:contents}
+._1e0c1nu9{display:inline}
+._1nmz1hna{word-break:break-word}
+._1y1m1u8q{background-clip:padding-box}
+._80om13gf{cursor:not-allowed}
+._80omtlke{cursor:pointer}
+._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
+._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
+._ca0qv77o{padding-top:var(--ds-space-025,2px)}
+._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
+._o5721btx{white-space:break-spaces}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
+._u5f312x7{padding-right:var(--ds-space-075,6px)}
+._y3gn18uv{text-align:initial}
+._irr315ej:hover{background-color:var(--ds-background-neutral-hovered,#091e4224)}
+._1di6ip91:active{background-color:var(--ds-background-neutral-pressed,#091e424f)}

package/dist/es2019/view/InlineCard/common/action-button/index.js

@@ -1,54 +1,35 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-import React, { forwardRef } from 'react';
-import { Box, xcss } from '@atlaskit/primitives';
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
+import { Pressable } from "@atlaskit/primitives/compiled";
+const styles = {
+  button: "_1e0c1bgi",
+  innerContainer: "_1e0c1nu9 _1y1m1u8q _16d9qvcn _k48p1wq8 _19bv12x7 _ca0qv77o _n3tdv77o _u5f312x7 _y3gn18uv _o5721btx _1nmz1hna",
+  enabled: "_syaz1fxt _80omtlke _bfhkm7j4 _irr315ej _1di6ip91",
+  disabled: "_syaz1lh4 _80om13gf _bfhksyzs"
+};
 /**
  * Action button has to be a span for the overflow to work correctly
  */
 export const ActionButton = /*#__PURE__*/forwardRef(({
   children,
+  isDisabled,
   ...props
 }, ref) => {
-  // `Button transforms `testId` into `data-testid`. We need to transform it back to `testId`
-  const {
-    [`data-testid`]: testId
-  } = props;
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    as: "span",
-    ref: ref,
-    xcss: [actionButtonStyle, !props.disabled && actionButtonNotDisabledStyle]
-  }, props, {
-    "aria-disabled": props.disabled,
-    role: "button",
-    testId: testId
-  }), /*#__PURE__*/React.createElement(Box, {
-    as: "span",
-    xcss: internalButtonStyle
+  return /*#__PURE__*/React.createElement(Pressable, _extends({}, props, {
+    isDisabled: isDisabled,
+    ref: ref
+    // We need to reset Pressable fixed font size to allow inline card to inherit the font size
+    // from parent component such as paragraph and heading
+    ,
+    style: {
+      font: `inherit`
+    },
+    xcss: styles.button
+  }), /*#__PURE__*/React.createElement("span", {
+    className: ax([styles.innerContainer, isDisabled ? styles.disabled : styles.enabled])
   }, children));
-});
-const actionButtonStyle = xcss({
-  textAlign: 'initial',
-  display: 'inline',
-  borderRadius: 'border.radius.100',
-  borderTopLeftRadius: '0px',
-  borderBottomLeftRadius: '0px',
-  backgroundClip: 'padding-box',
-  boxDecorationBreak: 'clone',
-  paddingLeft: 'space.075',
-  paddingTop: 'space.025',
-  paddingBottom: 'space.025',
-  paddingRight: 'space.075',
-  whiteSpace: 'nowrap',
-  backgroundColor: 'color.background.neutral',
-  cursor: 'not-allowed',
-  color: 'color.text.disabled'
-});
-const internalButtonStyle = xcss({
-  fontWeight: 'font.weight.medium'
-});
-const actionButtonNotDisabledStyle = xcss({
-  color: 'color.text',
-  cursor: 'pointer',
-  ':hover': {
-    backgroundColor: 'color.background.neutral.hovered'
-  }
 });

package/dist/es2019/view/LinkUrl/index.js

@@ -10,7 +10,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "35.2.5",
+  packageVersion: "35.2.6",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

package/dist/esm/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "35.2.5"
+  packageVersion: "35.2.6"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/InlineCard/ErroredView/InlineCardErroredViewOld.js

@@ -15,7 +15,6 @@ import { Box, xcss } from '@atlaskit/primitives';
 import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import { HoverCard } from '../../HoverCard';
-import { ActionButton } from '../common/action-button';
 import { Frame } from '../Frame';
 import { AKIconWrapper } from '../Icon';
 import { AKIconWrapper as AKIconWrapperOld } from '../Icon-emotion';
@@ -46,12 +45,6 @@ export var InlineCardErroredViewOld = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "renderActionButton", function () {
       var onRetry = _this.props.onRetry;
       var Button = withFrameStyleControl(ButtonOld, _this.frameRef);
-      if (fg('platform-linking-visual-refresh-v1')) {
-        return onRetry && /*#__PURE__*/React.createElement(Button, {
-          component: ActionButton,
-          onClick: _this.handleRetry
-        }, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again));
-      }
       return onRetry && /*#__PURE__*/React.createElement(Button, {
         spacing: "none",
         component: fg('bandicoots-compiled-migration-smartcard') ? IconStyledButtonOldVisualRefresh : IconStyledButtonOld,

package/dist/esm/view/InlineCard/ErroredView/index.js

@@ -41,8 +41,7 @@ var InlineCardErroredViewNew = function InlineCardErroredViewNew(_ref) {
   }, [onRetry]);
   var renderActionButton = React.useCallback(function () {
     var Button = withFrameStyleControl(ButtonOld, frameRef);
-    return onRetry && (fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Button, {
-      component: ActionButton,
+    return onRetry && (fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(ActionButton, {
       onClick: handleRetry
     }, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again)) : /*#__PURE__*/React.createElement(Button, {
       spacing: "none",

package/dist/esm/view/InlineCard/ForbiddenView/InlineCardForbiddenViewOld.js

@@ -14,11 +14,10 @@ import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
 import LegacyLockIcon from '@atlaskit/icon/glyph/lock-filled';
 import Lozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, Pressable, xcss } from '@atlaskit/primitives';
+import { Box, xcss } from '@atlaskit/primitives';
 import { N500, R400 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import { HoverCard } from '../../HoverCard';
-import { ActionButton } from '../common/action-button';
 import { Frame } from '../Frame';
 import { AKIconWrapper } from '../Icon';
 import { AKIconWrapper as AKIconWrapperOld } from '../Icon-emotion';
@@ -109,15 +108,6 @@ export var InlineCardForbiddenViewOld = /*#__PURE__*/function (_React$Component)
       var accessType = (_this$props$requestAc = _this.props.requestAccessContext) === null || _this$props$requestAc === void 0 ? void 0 : _this$props$requestAc.accessType;
       if (_this.state.hasRequestAccessContextMessage) {
         if (fg('bandicoots-compiled-migration-smartcard')) {
-          if (fg('platform-linking-visual-refresh-v1')) {
-            var isDisabled = accessType === 'PENDING_REQUEST_EXISTS';
-            return /*#__PURE__*/React.createElement(Button, {
-              onClick: _this.handleRetry,
-              component: ActionButton,
-              testId: "button-connect-other-account",
-              isDisabled: isDisabled
-            }, _this.renderForbiddenAccessMessage());
-          }
           return /*#__PURE__*/React.createElement(Button, {
             spacing: "none",
             onClick: _this.handleRetry,
@@ -138,17 +128,6 @@ export var InlineCardForbiddenViewOld = /*#__PURE__*/function (_React$Component)
         }
       }
       if (onAuthorise) {
-        if (fg('platform-linking-visual-refresh-v1')) {
-          return /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Pressable, {
-            xcss: actionButtonLozengeStyle,
-            onClick: _this.handleRetry,
-            testId: "button-connect-other-account"
-          }, /*#__PURE__*/React.createElement(Lozenge, _extends({
-            appearance: 'moved'
-          }, fg('platform-component-visual-refresh') ? {
-            isBold: true
-          } : undefined), _this.renderForbiddenAccessMessage())));
-        }
         return /*#__PURE__*/React.createElement(Button, {
           spacing: "none",
           onClick: _this.handleRetry,
@@ -197,8 +176,4 @@ export var InlineCardForbiddenViewOld = /*#__PURE__*/function (_React$Component)
       return content;
     }
   }]);
-}(React.Component);
-var actionButtonLozengeStyle = xcss({
-  backgroundColor: 'color.background.neutral.subtle',
-  padding: 'space.0'
-});
+}(React.Component);

package/dist/esm/view/InlineCard/ForbiddenView/index.js

@@ -87,11 +87,10 @@ var InlineCardForbiddenViewNew = function InlineCardForbiddenViewNew(_ref) {
     if (hasRequestAccessContextMessage) {
       if (fg('platform-linking-visual-refresh-v1')) {
         var isDisabled = accessType === 'PENDING_REQUEST_EXISTS';
-        return /*#__PURE__*/React.createElement(Button, {
+        return /*#__PURE__*/React.createElement(ActionButton, {
+          isDisabled: isDisabled,
           onClick: handleRetry,
-          component: ActionButton,
-          testId: "button-connect-other-account",
-          isDisabled: isDisabled
+          testId: "button-connect-other-account"
         }, renderForbiddenAccessMessage());
       }
       return /*#__PURE__*/React.createElement(Button, {

package/dist/esm/view/InlineCard/UnauthorisedView/InlineCardUnauthorizedViewOld.js

@@ -10,7 +10,6 @@ import { N500, R400 } from '@atlaskit/theme/colors';
 import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
 import { messages } from '../../../messages';
 import { HoverCard } from '../../HoverCard';
-import { ActionButton } from '../common/action-button';
 import { Frame } from '../Frame';
 import { AKIconWrapper } from '../Icon';
 import { AKIconWrapper as AKIconWrapperOld } from '../Icon-emotion';
@@ -79,17 +78,6 @@ export var InlineCardUnauthorizedViewOld = function InlineCardUnauthorizedViewOl
   var renderActionButton = React.useCallback(function () {
     var Button = withFrameStyleControl(ButtonOld, frameRef);
     if (fg('bandicoots-compiled-migration-smartcard')) {
-      if (fg('platform-linking-visual-refresh-v1')) {
-        return /*#__PURE__*/React.createElement(Button, {
-          component: ActionButton,
-          onClick: handleConnectAccount,
-          testId: "button-connect-account"
-        }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
-          values: {
-            context: context
-          }
-        })));
-      }
       return onAuthorise ? /*#__PURE__*/React.createElement(Button, {
         spacing: "none",
         component: IconStyledButtonOldVisualRefresh,

package/dist/esm/view/InlineCard/UnauthorisedView/index.js

@@ -65,8 +65,7 @@ var InlineCardUnauthorizedViewNew = function InlineCardUnauthorizedViewNew(_ref)
   var renderActionButton = React.useCallback(function () {
     var Button = withFrameStyleControl(ButtonOld, frameRef);
     if (fg('platform-linking-visual-refresh-v1')) {
-      return /*#__PURE__*/React.createElement(Button, {
-        component: ActionButton,
+      return /*#__PURE__*/React.createElement(ActionButton, {
         onClick: handleConnectAccount,
         testId: "button-connect-account"
       }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {

package/dist/esm/view/InlineCard/common/action-button/index.compiled.css

@@ -0,0 +1,20 @@
+._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
+._19bv12x7{padding-left:var(--ds-space-075,6px)}
+._1e0c1bgi{display:contents}
+._1e0c1nu9{display:inline}
+._1nmz1hna{word-break:break-word}
+._1y1m1u8q{background-clip:padding-box}
+._80om13gf{cursor:not-allowed}
+._80omtlke{cursor:pointer}
+._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
+._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
+._ca0qv77o{padding-top:var(--ds-space-025,2px)}
+._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
+._o5721btx{white-space:break-spaces}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
+._u5f312x7{padding-right:var(--ds-space-075,6px)}
+._y3gn18uv{text-align:initial}
+._irr315ej:hover{background-color:var(--ds-background-neutral-hovered,#091e4224)}
+._1di6ip91:active{background-color:var(--ds-background-neutral-pressed,#091e424f)}

package/dist/esm/view/InlineCard/common/action-button/index.js

@@ -1,53 +1,36 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children"];
-import React, { forwardRef } from 'react';
-import { Box, xcss } from '@atlaskit/primitives';
+var _excluded = ["children", "isDisabled"];
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
+import { Pressable } from "@atlaskit/primitives/compiled";
+var styles = {
+  button: "_1e0c1bgi",
+  innerContainer: "_1e0c1nu9 _1y1m1u8q _16d9qvcn _k48p1wq8 _19bv12x7 _ca0qv77o _n3tdv77o _u5f312x7 _y3gn18uv _o5721btx _1nmz1hna",
+  enabled: "_syaz1fxt _80omtlke _bfhkm7j4 _irr315ej _1di6ip91",
+  disabled: "_syaz1lh4 _80om13gf _bfhksyzs"
+};
 /**
  * Action button has to be a span for the overflow to work correctly
  */
 export var ActionButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
+    isDisabled = _ref.isDisabled,
     props = _objectWithoutProperties(_ref, _excluded);
-  // `Button transforms `testId` into `data-testid`. We need to transform it back to `testId`
-  var testId = props["data-testid"];
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    as: "span",
-    ref: ref,
-    xcss: [actionButtonStyle, !props.disabled && actionButtonNotDisabledStyle]
-  }, props, {
-    "aria-disabled": props.disabled,
-    role: "button",
-    testId: testId
-  }), /*#__PURE__*/React.createElement(Box, {
-    as: "span",
-    xcss: internalButtonStyle
+  return /*#__PURE__*/React.createElement(Pressable, _extends({}, props, {
+    isDisabled: isDisabled,
+    ref: ref
+    // We need to reset Pressable fixed font size to allow inline card to inherit the font size
+    // from parent component such as paragraph and heading
+    ,
+    style: {
+      font: "inherit"
+    },
+    xcss: styles.button
+  }), /*#__PURE__*/React.createElement("span", {
+    className: ax([styles.innerContainer, isDisabled ? styles.disabled : styles.enabled])
   }, children));
-});
-var actionButtonStyle = xcss({
-  textAlign: 'initial',
-  display: 'inline',
-  borderRadius: 'border.radius.100',
-  borderTopLeftRadius: '0px',
-  borderBottomLeftRadius: '0px',
-  backgroundClip: 'padding-box',
-  boxDecorationBreak: 'clone',
-  paddingLeft: 'space.075',
-  paddingTop: 'space.025',
-  paddingBottom: 'space.025',
-  paddingRight: 'space.075',
-  whiteSpace: 'nowrap',
-  backgroundColor: 'color.background.neutral',
-  cursor: 'not-allowed',
-  color: 'color.text.disabled'
-});
-var internalButtonStyle = xcss({
-  fontWeight: 'font.weight.medium'
-});
-var actionButtonNotDisabledStyle = xcss({
-  color: 'color.text',
-  cursor: 'pointer',
-  ':hover': {
-    backgroundColor: 'color.background.neutral.hovered'
-  }
 });

package/dist/esm/view/LinkUrl/index.js

@@ -13,7 +13,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "35.2.5",
+  packageVersion: "35.2.6",
   componentName: 'linkUrl'
 };
 var Anchor = withLinkClickedEvent('a');

package/dist/types/view/InlineCard/common/action-button/index.d.ts

@@ -1,11 +1,5 @@
-import React, { type ComponentPropsWithRef } from 'react';
-import { Box } from '@atlaskit/primitives';
-type ActionButtonProps = ComponentPropsWithRef<typeof Box> & {
-    disabled?: boolean;
-    [`data-testid`]?: string;
-};
+/// <reference types="react" />
 /**
  * Action button has to be a span for the overflow to work correctly
  */
-export declare const ActionButton: React.ForwardRefExoticComponent<Omit<ActionButtonProps, "ref"> & React.RefAttributes<HTMLWebViewElement>>;
-export {};
+export declare const ActionButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@atlaskit/primitives/compiled").PressableProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types-ts4.5/view/InlineCard/common/action-button/index.d.ts

@@ -1,11 +1,5 @@
-import React, { type ComponentPropsWithRef } from 'react';
-import { Box } from '@atlaskit/primitives';
-type ActionButtonProps = ComponentPropsWithRef<typeof Box> & {
-    disabled?: boolean;
-    [`data-testid`]?: string;
-};
+/// <reference types="react" />
 /**
  * Action button has to be a span for the overflow to work correctly
  */
-export declare const ActionButton: React.ForwardRefExoticComponent<Omit<ActionButtonProps, "ref"> & React.RefAttributes<HTMLWebViewElement>>;
-export {};
+export declare const ActionButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@atlaskit/primitives/compiled").PressableProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "35.2.5",
+	"version": "35.2.6",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"