@atlaskit/smart-card 27.0.0 → 27.2.0

package/dist/es2019/view/RelatedLinksModal/components/related-links-list/index.js

@@ -0,0 +1,33 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { Box, Stack, xcss } from '@atlaskit/primitives';
+import RelatedLinkItem from '../related-link-item';
+import { messages } from '../../../../messages';
+const RelatedLinksList = ({
+  urls,
+  title,
+  testId
+}) => {
+  return jsx(Stack, {
+    testId: testId
+  }, jsx(Box, {
+    paddingBlockStart: "space.050",
+    xcss: xcss({
+      font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+      textTransform: 'uppercase'
+    })
+  }, jsx(FormattedMessage, title)), urls.length > 0 && jsx(Box, null, urls.map((url, idx) => jsx(Stack, {
+    key: `${idx}-${url}`
+  }, jsx(RelatedLinkItem, {
+    url: url,
+    testId: `${testId}-item-${idx}`
+  })))), urls.length === 0 && jsx(Box, {
+    paddingBlock: "space.100",
+    xcss: xcss({
+      font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+    })
+  }, jsx(FormattedMessage, messages.related_links_not_found)));
+};
+export default RelatedLinksList;

package/dist/es2019/view/RelatedLinksModal/views/resolved/index.js

@@ -0,0 +1,23 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
+import { messages } from '../../../../messages';
+import RelatedLinksList from '../../components/related-links-list';
+import { Stack } from '@atlaskit/primitives';
+const RelatedLinksResolvedView = ({
+  incomingLinks = [],
+  outgoingLinks = []
+}) => {
+  return jsx(Stack, {
+    space: "space.150"
+  }, jsx(RelatedLinksList, {
+    urls: incomingLinks,
+    title: messages.related_links_found_in,
+    testId: "incoming-related-links-list"
+  }), jsx(RelatedLinksList, {
+    urls: outgoingLinks,
+    title: messages.related_links_includes_links_to,
+    testId: "outgoing-related-links-list"
+  }));
+};
+export default RelatedLinksResolvedView;

package/dist/es2019/view/common/Byline.js

@@ -29,6 +29,8 @@ export const Byline = ({
     // due to HTML its unwrapping behaviour on paste.
     MozUserSelect: 'none'
   }),
-  "data-testid": testId,
+  "data-testid": testId
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  ,
   className: className
 }, text || children);

package/dist/es2019/view/common/Icon.js

@@ -55,7 +55,9 @@ export const Icon = ({
   });
   return jsx("span", {
     css: getSpanStyles(isFlexibleUi),
-    "data-testid": testId,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: blockCardIconImageClassName
   }, icon || image || placeholder);
 };

package/dist/es2019/view/common/MetadataList.js

@@ -18,7 +18,9 @@ export const MetadataList = ({
         marginRight: '0px'
       }
     },
-    "data-testid": testId,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: metadataListClassName
   }, items.map(item => jsx(Metadata, _extends({
     key: item.text

package/dist/esm/extractors/flexible/extract-state.js

@@ -2,7 +2,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { extractLozenge } from '../common/lozenge';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getExtensionKey } from '../../state/helpers';
 import extractServerAction from './extract-server-action';
 import { extractLink } from '@atlaskit/link-extractors';
@@ -58,7 +57,7 @@ var extractState = function extractState(response, actionOptions, id) {
   if (!lozenge) {
     return;
   }
-  if (!canShowAction(CardAction.ChangeStatusAction, actionOptions) || getBooleanFF('platform.linking-platform.smart-card.disable-jira-status-action')) {
+  if (!canShowAction(CardAction.ChangeStatusAction, actionOptions)) {
     return lozenge;
   }
   var action = extractAction(response, id);

package/dist/esm/messages.js

@@ -700,8 +700,8 @@ export var messages = defineMessages({
     defaultMessage: 'An error occurred',
     description: 'A generic error message to the user'
   },
-  related_links_modal_title_nonfinal: {
-    id: 'fabric.linking.related_links_modal_title.nonfinal',
+  related_links_modal_title: {
+    id: 'fabric.linking.related_links_modal_title',
     defaultMessage: 'Recent Links',
     description: 'Shown as the title for the related links modal'
   },
@@ -709,5 +709,20 @@ export var messages = defineMessages({
     id: 'fabric.linking.related_links_view_related_urls.nonfinal',
     defaultMessage: 'View recent links...',
     description: 'Action to view related links to the given resource'
+  },
+  related_links_found_in: {
+    id: 'fabric.linking.related_links_found_in',
+    defaultMessage: 'Found In',
+    description: 'Informs the user of the resources are found in the given url'
+  },
+  related_links_not_found: {
+    id: 'fabric.linking.related_links_not_found',
+    defaultMessage: 'We didn\'t find any links to show here.',
+    description: 'Informs the user that there are no related resources for the given url'
+  },
+  related_links_includes_links_to: {
+    id: 'fabric.linking.related_links_includes_links_to',
+    defaultMessage: 'Includes Links To',
+    description: 'Informs the user of the resources the url links to'
   }
 });

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

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

package/dist/esm/view/BlockCard/components/ActionIcon.js

@@ -21,20 +21,28 @@ export var ActionIcon = function ActionIcon(_ref) {
     case 'loading':
       return null;
     case 'success':
-      return /*#__PURE__*/React.createElement("div", {
-        "data-testid": "check-icon",
-        style: spinnerStyles
-      }, /*#__PURE__*/React.createElement(CheckIcon, {
-        size: "small",
-        label: "check"
-      }));
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        React.createElement("div", {
+          "data-testid": "check-icon",
+          style: spinnerStyles
+        }, /*#__PURE__*/React.createElement(CheckIcon, {
+          size: "small",
+          label: "check"
+        }))
+      );
     case 'failure':
-      return /*#__PURE__*/React.createElement("div", {
-        "data-testid": "cross-icon",
-        style: spinnerStyles
-      }, /*#__PURE__*/React.createElement(CrossIcon, {
-        size: "small",
-        label: "check"
-      }));
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        React.createElement("div", {
+          "data-testid": "cross-icon",
+          style: spinnerStyles
+        }, /*#__PURE__*/React.createElement(CrossIcon, {
+          size: "small",
+          label: "check"
+        }))
+      );
   }
 };

package/dist/esm/view/BlockCard/components/Content.js

@@ -21,7 +21,9 @@ export var Content = function Content(_ref) {
       justifyContent: isCompact ? 'unset' : ['unset', 'space-between'],
       flexGrow: 1
     }),
-    "data-trello-do-not-use-override": "block-card-content",
+    "data-trello-do-not-use-override": "block-card-content"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: blockCardContentClassName
   }, children);
 };

package/dist/esm/view/BlockCard/components/ContentFooter.js

@@ -15,7 +15,9 @@ export var ContentFooter = function ContentFooter(_ref) {
       alignItems: ['unset', 'center'],
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginTop: [gs(1), gs(1.5)]
-    }),
+    })
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: contentFooterClassName
   }, children);
 };

package/dist/esm/view/BlockCard/components/ContentHeader.js

@@ -25,7 +25,9 @@ export var ContentHeader = function ContentHeader(_ref) {
       // due to HTML its unwrapping behaviour on paste.
       MozUserSelect: 'none'
     },
-    "data-trello-do-not-use-override": "block-card-content-header",
+    "data-trello-do-not-use-override": "block-card-content-header"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: blockCardContentHeaderClassName
   }, children);
 };

package/dist/esm/view/BlockCard/components/Frame.js

@@ -41,7 +41,9 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
       overflow: 'hidden',
       boxShadow: "var(--ds-shadow-raised, ".concat("0 1px 1px ".concat(N50A, ", 0 0 1px 1px ").concat(N40A), ")")
     })),
-    "data-testid": testId,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     "data-trello-do-not-use-override": testId
   }, children);
@@ -68,7 +70,9 @@ export var CompactFrame = function CompactFrame(_ref2) {
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       padding: ["0px ".concat(gs(1)), '0']
     })),
-    "data-testid": testId,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className
   }, children);
 };

package/dist/esm/view/BlockCard/components/Link.js

@@ -7,7 +7,9 @@ export var Link = function Link(_ref) {
     testId = _ref$testId === void 0 ? 'block-card' : _ref$testId,
     className = _ref.className;
   return jsx("span", {
-    "data-testid": "".concat(testId, "-link"),
+    "data-testid": "".concat(testId, "-link")
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     css: {
       color: "var(--ds-link, ".concat(B400, ")"),

package/dist/esm/view/BlockCard/components/Name.js

@@ -34,7 +34,9 @@ export var Name = function Name(_ref) {
       maxHeight: gs(6)
     },
     "data-testid": testId,
-    "data-trello-do-not-use-override": "block-card-content-header-name",
+    "data-trello-do-not-use-override": "block-card-content-header-name"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: blockCardContentHeaderNameClassName
   }, name);
 };

package/dist/esm/view/BlockCard/components/Provider.js

@@ -8,6 +8,7 @@ export var Provider = function Provider(_ref) {
   var iconToRender = icon || null;
   if (typeof icon === 'string') {
     iconToRender = jsx("img", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: "smart-link-icon",
       css: {
         height: gs(1.5),

package/dist/esm/view/BlockCard/views/ErroredView.js

@@ -46,7 +46,9 @@ export var ErroredView = function ErroredView(_ref) {
   }, [onRetry]);
   return jsx(Frame, {
     isSelected: isSelected,
-    testId: testId,
+    testId: testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: blockCardErroredViewClassName,
     isFluidHeight: true,
     inheritDimensions: inheritDimensions

package/dist/esm/view/BlockCard/views/ForbiddenView.js

@@ -61,7 +61,9 @@ export var ForbiddenView = function ForbiddenView(_ref) {
   var items = action !== undefined && !(buttonDisabled !== null && buttonDisabled !== void 0 ? buttonDisabled : false) ? [].concat(_toConsumableArray(actions), [action]) : actions;
   return jsx(Frame, {
     isSelected: isSelected,
-    testId: testId,
+    testId: testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: blockCardForbiddenViewClassName,
     isFluidHeight: true
   }, jsx(Content, {
@@ -71,7 +73,9 @@ export var ForbiddenView = function ForbiddenView(_ref) {
     link: link
   }, jsx(Link, {
     url: link,
-    testId: testId,
+    testId: testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: blockCardForbiddenViewLinkClassName
   })), jsx(Byline, null, jsx(UnresolvedText, {
     icon: jsx(LockIcon, {

package/dist/esm/view/BlockCard/views/NotFoundView.js

@@ -43,7 +43,9 @@ export var NotFoundView = function NotFoundView(_ref) {
   };
   return jsx(Frame, {
     isSelected: isSelected,
-    testId: testId,
+    testId: testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: blockCardNotFoundViewClassName,
     isFluidHeight: true
   }, jsx(Content, {

package/dist/esm/view/BlockCard/views/ResolvedView.js

@@ -75,7 +75,9 @@ export var ResolvedView = function ResolvedView(_ref) {
     items: details
   }) : undefined;
   var resolvedByline = jsx(Byline, {
-    testId: testId ? "".concat(testId, "-by") : undefined,
+    testId: testId ? "".concat(testId, "-by") : undefined
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: blockCardResolvedViewByClassName
   }, byline);
   var handleClick = function handleClick(event) {
@@ -84,7 +86,9 @@ export var ResolvedView = function ResolvedView(_ref) {
   var hasActions = actions.length > 0;
   return jsx(Frame, {
     isSelected: isSelected,
-    testId: testId,
+    testId: testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: blockCardResolvedViewClassName
   }, jsx(Content, null, jsx("div", null, jsx("div", {
     css: styles

package/dist/esm/view/BlockCard/views/ResolvingView.js

@@ -24,7 +24,9 @@ export var ResolvingView = function ResolvingView(_ref) {
     inheritDimensions: inheritDimensions,
     compact: true,
     isSelected: isSelected,
-    testId: testId,
+    testId: testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: blockCardResolvingViewClassName
   }, jsx(DocumentFilledIcon, {
     size: "small",

package/dist/esm/view/CardWithUrl/component-lazy/LazyIntersectionObserverCard.js

@@ -49,6 +49,8 @@ export function LazyIntersectionObserverCard(props) {
   var content = isIntersecting ? /*#__PURE__*/React.createElement(CardWithUrlContent, props) : /*#__PURE__*/React.createElement(ComponentObserver, {
     ref: ref
   }, /*#__PURE__*/React.createElement(LoadingCardLink, props));
+
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   return /*#__PURE__*/React.createElement(Component, {
     className: "loader-wrapper"
   }, content);

package/dist/esm/view/CardWithUrl/component-lazy/LazyLazilyRenderCard.js

@@ -14,7 +14,9 @@ export function LazyLazilyRenderCard(props) {
   });
   return /*#__PURE__*/React.createElement(LazilyRender, {
     offset: offset,
-    component: appearance === 'inline' ? 'span' : 'div',
+    component: appearance === 'inline' ? 'span' : 'div'
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: "loader-wrapper",
     placeholder: /*#__PURE__*/React.createElement(LoadingCardLink, props),
     scrollContainer: container,

package/dist/esm/view/CardWithUrl/component-lazy/LoadingCardLink.js

@@ -10,7 +10,9 @@ export var LoadingCardLink = function LoadingCardLink(_ref) {
     testId: 'lazy-render-placeholder',
     "data-trello-do-not-use-override": "lazy-render-placeholder-trello",
     isSelected: isSelected,
-    link: url,
+    link: url
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: loadingPlaceholderClassName,
     placeholder: placeholder
   });

package/dist/esm/view/EmbedCard/components/ExpandedFrame.js

@@ -31,35 +31,43 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
   var handleMouseDown = useMouseDownEvent();
   var isFixEmbedCardBlurEnabled = getBooleanFF('platform.linking-platform.smart-card.fix-embed-card-blurring') ? true : false;
   var renderHeaderOld = function renderHeaderOld() {
-    return /*#__PURE__*/React.createElement(Header, {
-      className: "embed-header",
-      frameStyle: frameStyle
-    }, /*#__PURE__*/React.createElement(IconWrapper, {
-      isPlaceholder: isPlaceholder
-    }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(TextWrapper, {
-      isPlaceholder: isPlaceholder
-    }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
-      href: href,
-      onClick: handleClick,
-      onMouseDown: handleMouseDown
-    }, text)));
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      React.createElement(Header, {
+        className: "embed-header",
+        frameStyle: frameStyle
+      }, /*#__PURE__*/React.createElement(IconWrapper, {
+        isPlaceholder: isPlaceholder
+      }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(TextWrapper, {
+        isPlaceholder: isPlaceholder
+      }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
+        href: href,
+        onClick: handleClick,
+        onMouseDown: handleMouseDown
+      }, text)))
+    );
   };
   var renderHeader = function renderHeader() {
-    return /*#__PURE__*/React.createElement(Header, {
-      className: "embed-header",
-      frameStyle: frameStyle
-    }, /*#__PURE__*/React.createElement(IconWrapper, {
-      isPlaceholder: isPlaceholder
-    }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(TooltipWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
-      content: text,
-      hideTooltipOnMouseDown: true
-    }, /*#__PURE__*/React.createElement(TextWrapper, {
-      isPlaceholder: isPlaceholder
-    }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
-      href: href,
-      onClick: handleClick,
-      onMouseDown: handleMouseDown
-    }, text)))));
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      React.createElement(Header, {
+        className: "embed-header",
+        frameStyle: frameStyle
+      }, /*#__PURE__*/React.createElement(IconWrapper, {
+        isPlaceholder: isPlaceholder
+      }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(TooltipWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+        content: text,
+        hideTooltipOnMouseDown: true
+      }, /*#__PURE__*/React.createElement(TextWrapper, {
+        isPlaceholder: isPlaceholder
+      }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
+        href: href,
+        onClick: handleClick,
+        onMouseDown: handleMouseDown
+      }, text)))))
+    );
   };
   var renderContent = function renderContent() {
     return /*#__PURE__*/React.createElement(Content, {
@@ -71,7 +79,9 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
     }, children);
   };
   if (!isPlaceholder && href) {
-    return /*#__PURE__*/React.createElement(LinkWrapper, {
+    return /*#__PURE__*/React.createElement(LinkWrapper
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
       className: className,
       isInteractive: isInteractive(),
       isSelected: isSelected,
@@ -86,7 +96,9 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
       inheritDimensions: inheritDimensions
     }, getBooleanFF('platform.linking-platform.smart-card.enable-embed-card-header-tooltip_g9saw') ? renderHeader() : renderHeaderOld(), renderContent());
   } else {
-    return /*#__PURE__*/React.createElement(Wrapper, {
+    return /*#__PURE__*/React.createElement(Wrapper
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
       className: className,
       isInteractive: isInteractive(),
       isSelected: isSelected,

package/dist/esm/view/EmbedCard/components/ImageIcon.js

@@ -16,7 +16,9 @@ export var ImageIcon = function ImageIcon(_ref) {
   return /*#__PURE__*/React.createElement(ImageLoader, {
     src: src,
     loading: defaultIcon,
-    loaded: /*#__PURE__*/React.createElement(Image, {
+    loaded: /*#__PURE__*/React.createElement(Image
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
       className: "smart-link-icon",
       src: src,
       alt: alt,

package/dist/esm/view/EmbedModal/components/link-info/index.js

@@ -57,14 +57,17 @@ var LinkInfo = function LinkInfo(_ref) {
     }) : jsx(VidFullScreenOnIcon, {
       label: message.defaultMessage
     });
-    return jsx("span", {
-      className: "smart-link-resize-button"
-    }, jsx(LinkInfoButton, {
-      content: jsx(FormattedMessage, message),
-      icon: icon,
-      onClick: onResizeButtonClick,
-      testId: "".concat(testId, "-resize")
-    }));
+    return (
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      jsx("span", {
+        className: "smart-link-resize-button"
+      }, jsx(LinkInfoButton, {
+        content: jsx(FormattedMessage, message),
+        icon: icon,
+        onClick: onResizeButtonClick,
+        testId: "".concat(testId, "-resize")
+      }))
+    );
   }, [onResizeButtonClick, size, testId]);
   return jsx("div", {
     css: containerStyles