@atlaskit/smart-card 28.2.1 → 28.3.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/smart-card
 
+## 28.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 28.3.0
+
+### Minor Changes
+
+- [#129695](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/129695)
+  [`0b33b1a47217a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0b33b1a47217a) -
+  [ux] Added truncateInline prop to allow for limiting inline cards to one line with truncation.
+
 ## 28.2.1
 
 ### Patch Changes

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

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

package/dist/cjs/view/CardWithUrl/component.js

@@ -51,7 +51,8 @@ function Component(_ref) {
     analyticsEvents = _ref.analyticsEvents,
     useLegacyBlockCard = _ref.useLegacyBlockCard,
     removeTextHighlightingFromTitle = _ref.removeTextHighlightingFromTitle,
-    resolvingPlaceholder = _ref.resolvingPlaceholder;
+    resolvingPlaceholder = _ref.resolvingPlaceholder,
+    truncateInline = _ref.truncateInline;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
 
@@ -236,7 +237,8 @@ function Component(_ref) {
         showAuthTooltip: showAuthTooltip,
         actionOptions: actionOptions,
         removeTextHighlightingFromTitle: removeTextHighlightingFromTitle,
-        resolvingPlaceholder: resolvingPlaceholder
+        resolvingPlaceholder: resolvingPlaceholder,
+        truncateInline: truncateInline
       });
     case 'block':
       return /*#__PURE__*/_react.default.createElement(_BlockCard.BlockCard, {

package/dist/cjs/view/CardWithUrl/loader.js

@@ -66,7 +66,8 @@ function CardWithURLRenderer(props) {
     fallbackComponent = props.fallbackComponent,
     useLegacyBlockCard = props.useLegacyBlockCard,
     removeTextHighlightingFromTitle = props.removeTextHighlightingFromTitle,
-    resolvingPlaceholder = props.resolvingPlaceholder;
+    resolvingPlaceholder = props.resolvingPlaceholder,
+    truncateInline = props.truncateInline;
   var analytics = (0, _analytics.useSmartLinkAnalytics)(url !== null && url !== void 0 ? url : '', undefined, id);
   var isFlexibleUi = (0, _flexible.isFlexibleUiCard)(children);
   var errorHandler = (0, _react.useCallback)(function (error, info) {
@@ -136,7 +137,8 @@ function CardWithURLRenderer(props) {
     placeholder: placeholder,
     useLegacyBlockCard: useLegacyBlockCard,
     removeTextHighlightingFromTitle: removeTextHighlightingFromTitle,
-    resolvingPlaceholder: resolvingPlaceholder
+    resolvingPlaceholder: resolvingPlaceholder,
+    truncateInline: truncateInline
   };
   return /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
     FallbackComponent: ErrorFallback,

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

@@ -67,11 +67,13 @@ var InlineCardErroredView = exports.InlineCardErroredView = /*#__PURE__*/functio
         _this$props$testId = _this$props.testId,
         testId = _this$props$testId === void 0 ? 'inline-card-errored-view' : _this$props$testId,
         icon = _this$props.icon,
-        message = _this$props.message;
+        message = _this$props.message,
+        truncateInline = _this$props.truncateInline;
       var content = /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
         testId: testId,
         isSelected: isSelected,
-        ref: this.frameRef
+        ref: this.frameRef,
+        truncateInline: truncateInline
       }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
         icon: icon || /*#__PURE__*/_react.default.createElement(_Icon.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_error.default, {
           label: "error",

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

@@ -114,11 +114,13 @@ var InlineCardForbiddenView = exports.InlineCardForbiddenView = /*#__PURE__*/fun
         onClick = _this$props4.onClick,
         isSelected = _this$props4.isSelected,
         _this$props4$testId = _this$props4.testId,
-        testId = _this$props4$testId === void 0 ? 'inline-card-forbidden-view' : _this$props4$testId;
+        testId = _this$props4$testId === void 0 ? 'inline-card-forbidden-view' : _this$props4$testId,
+        truncateInline = _this$props4.truncateInline;
       var content = /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
         testId: testId,
         isSelected: isSelected,
-        ref: this.frameRef
+        ref: this.frameRef,
+        truncateInline: truncateInline
       }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
         icon: icon ? icon : FallbackForbiddenIcon,
         link: url,

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

@@ -18,7 +18,8 @@ var Frame = exports.Frame = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     withoutBackground = props.withoutBackground,
     testId = props.testId,
     className = props.className,
-    isHovered = props.isHovered;
+    isHovered = props.isHovered,
+    truncateInline = props.truncateInline;
   var handleClick = (0, _react.useCallback)(function (event) {
     if (onClick) {
       event.preventDefault();
@@ -56,6 +57,7 @@ var Frame = exports.Frame = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     ,
     className: className,
     ref: ref,
-    isHovered: isHovered
+    isHovered: isHovered,
+    truncateInline: truncateInline
   }, children);
 });

package/dist/cjs/view/InlineCard/Frame/styled.js

@@ -10,6 +10,7 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
 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) { (0, _defineProperty2.default)(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; } // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var lineHeight = 22;
 var selectedStyles = {
   cursor: 'pointer',
   boxShadow: "0 0 0 2px ".concat("var(--ds-border-selected, ".concat(_colors.B100, ")")),
@@ -73,7 +74,7 @@ var hoveredWihBorderStyles = function hoveredWihBorderStyles(props) {
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
 var baseWrapperStyles = function baseWrapperStyles(props) {
   return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
-    lineHeight: '22px',
+    lineHeight: "".concat(lineHeight, "px"),
     padding: "var(--ds-space-025, 2px)".concat(" 0px")
   }, props.withoutBackground ? {
     paddingLeft: 0,
@@ -94,15 +95,41 @@ var baseWrapperStyles = function baseWrapperStyles(props) {
     MozUserSelect: 'none'
   }, props.isHovered ? hoveredWihBorderStyles(props) : undefined);
 };
+var truncateStyles = {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  wordBreak: 'break-all',
+  // The height of a truncated card is 1px higher than that of a non-truncated card, so we subtract 1px from the line height.
+  lineHeight: "".concat(lineHeight - 1, "px"),
+  display: '-webkit-inline-box',
+  WebkitLineClamp: 1,
+  WebkitBoxOrient: 'vertical',
+  // We need to remove the padding because display: -webkit-inline-box will cause any padding to be
+  // added to the total height, causing truncated cards to have greater height than non-truncated cards which use display: inline.
+  padding: 0,
+  '@supports not (-webkit-line-clamp: 1)': {
+    display: 'inline-block',
+    maxHeight: "".concat(lineHeight, "px"),
+    // If the browser does not support webkit, we don't need to remove the padding
+    padding: "var(--ds-space-025, 2px)".concat(" 0px")
+  }
+};
+var isTruncated = function isTruncated(_ref3) {
+  var truncateInline = _ref3.truncateInline;
+  if (truncateInline) {
+    return truncateStyles;
+  }
+  return undefined;
+};
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
 var WrapperAnchor = exports.WrapperAnchor = _styled.default.a(function (props) {
-  return _objectSpread(_objectSpread({}, baseWrapperStyles(props)), isInteractive(props));
+  return _objectSpread(_objectSpread(_objectSpread({}, baseWrapperStyles(props)), isInteractive(props)), isTruncated(props));
 });
 WrapperAnchor.displayName = 'WrapperAnchor';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
 var WrapperSpan = exports.WrapperSpan = _styled.default.span(function (props) {
-  return _objectSpread({}, baseWrapperStyles(props));
+  return _objectSpread(_objectSpread({}, baseWrapperStyles(props)), isTruncated(props));
 });
 WrapperSpan.displayName = 'WrapperSpan';

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

@@ -61,13 +61,15 @@ var InlineCardResolvedView = exports.InlineCardResolvedView = /*#__PURE__*/funct
         _this$props$showHover = _this$props.showHoverPreview,
         showHoverPreview = _this$props$showHover === void 0 ? false : _this$props$showHover,
         hoverPreviewOptions = _this$props.hoverPreviewOptions,
-        actionOptions = _this$props.actionOptions;
+        actionOptions = _this$props.actionOptions,
+        truncateInline = _this$props.truncateInline;
       var inlineCardResolvedView = /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
         testId: testId,
         link: link,
         isSelected: isSelected,
         isHovered: isHovered,
-        onClick: onClick
+        onClick: onClick,
+        truncateInline: truncateInline
       }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
         emoji: titlePrefix,
         icon: icon,

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

@@ -36,13 +36,15 @@ var InlineCardResolvingView = exports.InlineCardResolvingView = /*#__PURE__*/fun
         _this$props$testId = _this$props.testId,
         testId = _this$props$testId === void 0 ? 'inline-card-resolving-view' : _this$props$testId,
         titleTextColor = _this$props.titleTextColor,
-        resolvingPlaceholder = _this$props.resolvingPlaceholder;
+        resolvingPlaceholder = _this$props.resolvingPlaceholder,
+        truncateInline = _this$props.truncateInline;
       if (inlinePreloaderStyle === 'on-right-without-skeleton') {
         return /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
           withoutBackground: true,
           testId: testId,
           onClick: onClick,
-          isSelected: isSelected
+          isSelected: isSelected,
+          truncateInline: truncateInline
         }, /*#__PURE__*/_react.default.createElement(_styled2.IconTitleWrapper, null, url, /*#__PURE__*/_react.default.createElement(_styled2.RightIconPositionWrapper, null, /*#__PURE__*/_react.default.createElement(_styled.SpinnerWrapper, {
           className: "inline-resolving-spinner"
         }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
@@ -53,7 +55,8 @@ var InlineCardResolvingView = exports.InlineCardResolvingView = /*#__PURE__*/fun
           testId: testId,
           onClick: onClick,
           isSelected: isSelected,
-          link: url
+          link: url,
+          truncateInline: truncateInline
         }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
           title: resolvingPlaceholder !== null && resolvingPlaceholder !== void 0 ? resolvingPlaceholder : url,
           titleTextColor: titleTextColor

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

@@ -87,11 +87,13 @@ var InlineCardUnauthorizedView = exports.InlineCardUnauthorizedView = /*#__PURE_
         _this$props3$testId = _this$props3.testId,
         testId = _this$props3$testId === void 0 ? 'inline-card-unauthorized-view' : _this$props3$testId,
         _this$props3$showAuth = _this$props3.showAuthTooltip,
-        showAuthTooltip = _this$props3$showAuth === void 0 ? false : _this$props3$showAuth;
+        showAuthTooltip = _this$props3$showAuth === void 0 ? false : _this$props3$showAuth,
+        truncateInline = _this$props3.truncateInline;
       var inlineCardUnauthenticatedView = /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
         testId: testId,
         isSelected: isSelected,
-        ref: this.frameRef
+        ref: this.frameRef,
+        truncateInline: truncateInline
       }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
         icon: icon ? icon : FallbackUnauthorizedIcon,
         title: url,

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

@@ -74,7 +74,8 @@ var InlineCard = exports.InlineCard = function InlineCard(_ref) {
     showAuthTooltip = _ref.showAuthTooltip,
     actionOptions = _ref.actionOptions,
     removeTextHighlightingFromTitle = _ref.removeTextHighlightingFromTitle,
-    resolvingPlaceholder = _ref.resolvingPlaceholder;
+    resolvingPlaceholder = _ref.resolvingPlaceholder,
+    truncateInline = _ref.truncateInline;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var status = cardState.status,
@@ -118,7 +119,8 @@ var InlineCard = exports.InlineCard = function InlineCard(_ref) {
         onClick: handleFrameClick,
         testId: testIdWithStatus,
         inlinePreloaderStyle: inlinePreloaderStyle,
-        resolvingPlaceholder: resolvingPlaceholder
+        resolvingPlaceholder: resolvingPlaceholder,
+        truncateInline: truncateInline
       });
     case 'resolved':
       return /*#__PURE__*/_react.default.createElement(_ResolvedView.InlineCardResolvedView, (0, _extends2.default)({}, resolvedProps, {
@@ -130,7 +132,8 @@ var InlineCard = exports.InlineCard = function InlineCard(_ref) {
         isSelected: isSelected,
         isHovered: isHovered,
         onClick: handleFrameClick,
-        testId: testIdWithStatus
+        testId: testIdWithStatus,
+        truncateInline: truncateInline
       }));
     case 'unauthorized':
       var provider = (0, _linkExtractors.extractProvider)(cardDetails);
@@ -145,7 +148,8 @@ var InlineCard = exports.InlineCard = function InlineCard(_ref) {
         showAuthTooltip: showAuthTooltip,
         id: id,
         analytics: analytics,
-        extensionKey: extensionKey
+        extensionKey: extensionKey,
+        truncateInline: truncateInline
       });
     case 'forbidden':
       var providerForbidden = (0, _linkExtractors.extractProvider)(cardDetails);
@@ -165,7 +169,8 @@ var InlineCard = exports.InlineCard = function InlineCard(_ref) {
         onAuthorise: handleAuthorize,
         testId: testIdWithStatus,
         requestAccessContext: requestAccessContext,
-        showHoverPreview: showHoverPreview
+        showHoverPreview: showHoverPreview,
+        truncateInline: truncateInline
       });
     case 'not_found':
       var providerNotFound = (0, _linkExtractors.extractProvider)(cardDetails);
@@ -176,7 +181,8 @@ var InlineCard = exports.InlineCard = function InlineCard(_ref) {
         message: "Can't find link",
         onClick: handleFrameClick,
         testId: testIdWithStatus || 'inline-card-not-found-view',
-        showHoverPreview: showHoverPreview
+        showHoverPreview: showHoverPreview,
+        truncateInline: truncateInline
       });
     case 'fallback':
     case 'errored':
@@ -185,7 +191,8 @@ var InlineCard = exports.InlineCard = function InlineCard(_ref) {
         link: url,
         isSelected: isSelected,
         onClick: handleFrameClick,
-        testId: testIdWithStatus || 'inline-card-errored-view'
+        testId: testIdWithStatus || 'inline-card-errored-view',
+        truncateInline: truncateInline
       });
   }
 };

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

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

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

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

package/dist/es2019/view/CardWithUrl/component.js

@@ -41,7 +41,8 @@ function Component({
   analyticsEvents,
   useLegacyBlockCard,
   removeTextHighlightingFromTitle,
-  resolvingPlaceholder
+  resolvingPlaceholder,
+  truncateInline
 }) {
   const {
     createAnalyticsEvent
@@ -223,7 +224,8 @@ function Component({
         showAuthTooltip: showAuthTooltip,
         actionOptions: actionOptions,
         removeTextHighlightingFromTitle: removeTextHighlightingFromTitle,
-        resolvingPlaceholder: resolvingPlaceholder
+        resolvingPlaceholder: resolvingPlaceholder,
+        truncateInline: truncateInline
       });
     case 'block':
       return /*#__PURE__*/React.createElement(BlockCard, {

package/dist/es2019/view/CardWithUrl/loader.js

@@ -45,7 +45,8 @@ export function CardWithURLRenderer(props) {
     fallbackComponent,
     useLegacyBlockCard,
     removeTextHighlightingFromTitle,
-    resolvingPlaceholder
+    resolvingPlaceholder,
+    truncateInline
   } = props;
   const analytics = useSmartLinkAnalytics(url !== null && url !== void 0 ? url : '', undefined, id);
   const isFlexibleUi = isFlexibleUiCard(children);
@@ -114,7 +115,8 @@ export function CardWithURLRenderer(props) {
     placeholder,
     useLegacyBlockCard,
     removeTextHighlightingFromTitle,
-    resolvingPlaceholder
+    resolvingPlaceholder,
+    truncateInline
   };
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
     FallbackComponent: ErrorFallback,

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

@@ -45,12 +45,14 @@ export class InlineCardErroredView extends React.Component {
       isSelected,
       testId = 'inline-card-errored-view',
       icon,
-      message
+      message,
+      truncateInline
     } = this.props;
     const content = /*#__PURE__*/React.createElement(Frame, {
       testId: testId,
       isSelected: isSelected,
-      ref: this.frameRef
+      ref: this.frameRef,
+      truncateInline: truncateInline
     }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
       icon: icon || /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
         label: "error",

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

@@ -94,12 +94,14 @@ export class InlineCardForbiddenView extends React.Component {
       icon,
       onClick,
       isSelected,
-      testId = 'inline-card-forbidden-view'
+      testId = 'inline-card-forbidden-view',
+      truncateInline
     } = this.props;
     const content = /*#__PURE__*/React.createElement(Frame, {
       testId: testId,
       isSelected: isSelected,
-      ref: this.frameRef
+      ref: this.frameRef,
+      truncateInline: truncateInline
     }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
       icon: icon ? icon : FallbackForbiddenIcon,
       link: url,

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

@@ -10,7 +10,8 @@ export const Frame = /*#__PURE__*/forwardRef((props, ref) => {
     withoutBackground,
     testId,
     className,
-    isHovered
+    isHovered,
+    truncateInline
   } = props;
   const handleClick = useCallback(event => {
     if (onClick) {
@@ -49,6 +50,7 @@ export const Frame = /*#__PURE__*/forwardRef((props, ref) => {
     ,
     className: className,
     ref: ref,
-    isHovered: isHovered
+    isHovered: isHovered,
+    truncateInline: truncateInline
   }, children);
 });

package/dist/es2019/view/InlineCard/Frame/styled.js

@@ -1,6 +1,7 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
 import { B50, B100, B200, B400, N40 } from '@atlaskit/theme/colors';
+const lineHeight = 22;
 const selectedStyles = {
   cursor: 'pointer',
   boxShadow: `0 0 0 2px ${`var(--ds-border-selected, ${B100})`}`,
@@ -66,7 +67,7 @@ const hoveredWihBorderStyles = props => ({
 // NB: `display: inline` required for `box-decoration-break` to work.
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
 const baseWrapperStyles = props => ({
-  lineHeight: '22px',
+  lineHeight: `${lineHeight}px`,
   padding: `${"var(--ds-space-025, 2px)"} 0px`,
   ...(props.withoutBackground ? {
     paddingLeft: 0,
@@ -91,19 +92,50 @@ const baseWrapperStyles = props => ({
 
   ...(props.isHovered ? hoveredWihBorderStyles(props) : undefined)
 });
+const truncateStyles = {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  wordBreak: 'break-all',
+  // The height of a truncated card is 1px higher than that of a non-truncated card, so we subtract 1px from the line height.
+  lineHeight: `${lineHeight - 1}px`,
+  display: '-webkit-inline-box',
+  WebkitLineClamp: 1,
+  WebkitBoxOrient: 'vertical',
+  // We need to remove the padding because display: -webkit-inline-box will cause any padding to be
+  // added to the total height, causing truncated cards to have greater height than non-truncated cards which use display: inline.
+  padding: 0,
+  '@supports not (-webkit-line-clamp: 1)': {
+    display: 'inline-block',
+    maxHeight: `${lineHeight}px`,
+    // If the browser does not support webkit, we don't need to remove the padding
+    padding: `${"var(--ds-space-025, 2px)"} 0px`
+  }
+};
+const isTruncated = ({
+  truncateInline
+}) => {
+  if (truncateInline) {
+    return truncateStyles;
+  }
+  return undefined;
+};
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
 export const WrapperAnchor = styled.a(props => ({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   ...baseWrapperStyles(props),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  ...isInteractive(props)
+  ...isInteractive(props),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  ...isTruncated(props)
 }));
 WrapperAnchor.displayName = 'WrapperAnchor';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
 export const WrapperSpan = styled.span(props => ({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  ...baseWrapperStyles(props)
+  ...baseWrapperStyles(props),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  ...isTruncated(props)
 }));
 WrapperSpan.displayName = 'WrapperSpan';

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

@@ -36,14 +36,16 @@ export class InlineCardResolvedView extends React.Component {
       titlePrefix,
       showHoverPreview = false,
       hoverPreviewOptions,
-      actionOptions
+      actionOptions,
+      truncateInline
     } = this.props;
     const inlineCardResolvedView = /*#__PURE__*/React.createElement(Frame, {
       testId: testId,
       link: link,
       isSelected: isSelected,
       isHovered: isHovered,
-      onClick: onClick
+      onClick: onClick,
+      truncateInline: truncateInline
     }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
       emoji: titlePrefix,
       icon: icon,

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

@@ -13,14 +13,16 @@ export class InlineCardResolvingView extends React.Component {
       inlinePreloaderStyle,
       testId = 'inline-card-resolving-view',
       titleTextColor,
-      resolvingPlaceholder
+      resolvingPlaceholder,
+      truncateInline
     } = this.props;
     if (inlinePreloaderStyle === 'on-right-without-skeleton') {
       return /*#__PURE__*/React.createElement(Frame, {
         withoutBackground: true,
         testId: testId,
         onClick: onClick,
-        isSelected: isSelected
+        isSelected: isSelected,
+        truncateInline: truncateInline
       }, /*#__PURE__*/React.createElement(IconTitleWrapper, null, url, /*#__PURE__*/React.createElement(RightIconPositionWrapper, null, /*#__PURE__*/React.createElement(SpinnerWrapper, {
         className: "inline-resolving-spinner"
       }, /*#__PURE__*/React.createElement(Spinner, {
@@ -31,7 +33,8 @@ export class InlineCardResolvingView extends React.Component {
         testId: testId,
         onClick: onClick,
         isSelected: isSelected,
-        link: url
+        link: url,
+        truncateInline: truncateInline
       }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
         title: resolvingPlaceholder !== null && resolvingPlaceholder !== void 0 ? resolvingPlaceholder : url,
         titleTextColor: titleTextColor

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

@@ -62,12 +62,14 @@ export class InlineCardUnauthorizedView extends React.Component {
       onClick,
       isSelected,
       testId = 'inline-card-unauthorized-view',
-      showAuthTooltip = false
+      showAuthTooltip = false,
+      truncateInline
     } = this.props;
     const inlineCardUnauthenticatedView = /*#__PURE__*/React.createElement(Frame, {
       testId: testId,
       isSelected: isSelected,
-      ref: this.frameRef
+      ref: this.frameRef,
+      truncateInline: truncateInline
     }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
       icon: icon ? icon : FallbackUnauthorizedIcon,
       title: url,

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

@@ -34,7 +34,8 @@ export const InlineCard = ({
   showAuthTooltip,
   actionOptions,
   removeTextHighlightingFromTitle,
-  resolvingPlaceholder
+  resolvingPlaceholder,
+  truncateInline
 }) => {
   var _details$meta, _providerForbidden$te;
   const {
@@ -83,7 +84,8 @@ export const InlineCard = ({
         onClick: handleFrameClick,
         testId: testIdWithStatus,
         inlinePreloaderStyle: inlinePreloaderStyle,
-        resolvingPlaceholder: resolvingPlaceholder
+        resolvingPlaceholder: resolvingPlaceholder,
+        truncateInline: truncateInline
       });
     case 'resolved':
       return /*#__PURE__*/React.createElement(InlineCardResolvedView, _extends({}, resolvedProps, {
@@ -95,7 +97,8 @@ export const InlineCard = ({
         isSelected: isSelected,
         isHovered: isHovered,
         onClick: handleFrameClick,
-        testId: testIdWithStatus
+        testId: testIdWithStatus,
+        truncateInline: truncateInline
       }));
     case 'unauthorized':
       const provider = extractProvider(cardDetails);
@@ -110,7 +113,8 @@ export const InlineCard = ({
         showAuthTooltip: showAuthTooltip,
         id: id,
         analytics: analytics,
-        extensionKey: extensionKey
+        extensionKey: extensionKey,
+        truncateInline: truncateInline
       });
     case 'forbidden':
       const providerForbidden = extractProvider(cardDetails);
@@ -130,7 +134,8 @@ export const InlineCard = ({
         onAuthorise: handleAuthorize,
         testId: testIdWithStatus,
         requestAccessContext: requestAccessContext,
-        showHoverPreview: showHoverPreview
+        showHoverPreview: showHoverPreview,
+        truncateInline: truncateInline
       });
     case 'not_found':
       const providerNotFound = extractProvider(cardDetails);
@@ -141,7 +146,8 @@ export const InlineCard = ({
         message: "Can't find link",
         onClick: handleFrameClick,
         testId: testIdWithStatus || 'inline-card-not-found-view',
-        showHoverPreview: showHoverPreview
+        showHoverPreview: showHoverPreview,
+        truncateInline: truncateInline
       });
     case 'fallback':
     case 'errored':
@@ -150,7 +156,8 @@ export const InlineCard = ({
         link: url,
         isSelected: isSelected,
         onClick: handleFrameClick,
-        testId: testIdWithStatus || 'inline-card-errored-view'
+        testId: testIdWithStatus || 'inline-card-errored-view',
+        truncateInline: truncateInline
       });
   }
 };

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

@@ -7,7 +7,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "28.2.1",
+  packageVersion: "28.3.1",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');