@atlaskit/smart-card 34.6.5 → 34.6.6

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

@@ -2,21 +2,22 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import Button from '@atlaskit/button';
+import ButtonOld from '@atlaskit/button';
 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, xcss } from '@atlaskit/primitives';
+import { Box, Pressable, 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';
-import { IconAndTitleLayout } from '../IconAndTitleLayout';
-import { LozengeWrapper } from '../IconAndTitleLayout/styled';
-import { IconStyledButton } from '../styled';
+import { IconAndTitleLayout, LozengeWrapper as LozengeWrapperNew } from '../IconAndTitleLayout';
+import { LozengeWrapperOldVisualRefresh } from '../IconAndTitleLayout/styled';
+import { IconStyledButtonOldVisualRefresh } from '../styled';
 import { IconStyledButton as IconStyledButtonOld } from '../styled-emotion';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
 const iconWrapperStyles = xcss({
@@ -99,20 +100,30 @@ export class InlineCardForbiddenView extends React.Component {
       const {
         onAuthorise
       } = this.props;
-      const ActionButton = withFrameStyleControl(Button, this.frameRef);
+      const LozengeWrapper = fg('platform-linking-visual-refresh-v1') ? LozengeWrapperNew : LozengeWrapperOldVisualRefresh;
+      const Button = withFrameStyleControl(ButtonOld, this.frameRef);
       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')) {
-          return /*#__PURE__*/React.createElement(ActionButton, {
+          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,
-            component: IconStyledButton,
+            component: IconStyledButtonOldVisualRefresh,
             testId: "button-connect-other-account",
             role: "button",
             isDisabled: accessType === 'PENDING_REQUEST_EXISTS'
           }, this.renderForbiddenAccessMessage());
         } else {
-          return /*#__PURE__*/React.createElement(ActionButton, {
+          return /*#__PURE__*/React.createElement(Button, {
             spacing: "none",
             onClick: this.handleRetry,
             component: IconStyledButtonOld,
@@ -123,6 +134,15 @@ export class InlineCardForbiddenView 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, {
+            appearance: 'moved'
+          }, this.renderForbiddenAccessMessage())));
+        }
         return /*#__PURE__*/React.createElement(Button, {
           spacing: "none",
           onClick: this.handleRetry,
@@ -164,4 +184,8 @@ export class InlineCardForbiddenView extends React.Component {
     }
     return content;
   }
-}
+}
+const actionButtonLozengeStyle = xcss({
+  backgroundColor: 'color.background.neutral.subtle',
+  padding: 'space.0'
+});

package/dist/es2019/view/InlineCard/Frame/styled.compiled.css

@@ -1,9 +1,10 @@
-
+._11c81doa{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
 ._19ith6cr{border:1px solid var(--ds-border,#dfe1e6)}
 ._1yt4x7n9{padding:var(--ds-space-025,2px) 0}
 ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
 ._v56415x0{transition:all .1s ease-in-out}
-._1h6dmr28{border-color:var(--ds-border-accent-blue,#2684ff)}._12ji1r31{outline-color:currentColor}
+._1h6dmr28{border-color:var(--ds-border-accent-blue,#2684ff)}
+._12ji1r31{outline-color:currentColor}
 ._12y31o36{outline-width:medium}
 ._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
 ._16qscw00{box-shadow:0 0 0 2px var(--ds-border-selected,#4c9aff)}

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

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./styled.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B100, B200, B400, B50, N40 } from '@atlaskit/theme/colors';
 const lineHeight = 22;
 export const WrapperSpan = /*#__PURE__*/forwardRef(({
@@ -17,7 +18,7 @@ export const WrapperSpan = /*#__PURE__*/forwardRef(({
   return /*#__PURE__*/React.createElement("span", _extends({
     ref: ref
   }, props, {
-    className: ax(["_1yt4x7n9 _2rkoiti9 _v56415x0 _vwz4qslr _1e0c1nu9 _16d9qvcn _syaz1y58 _1rkwglyw _4cvxmr28", truncateInline && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _vwz4183y _1e0c1abx _1yyjkb7n _sudp1e54 _17bix7n9 _nr8z1o8l _102kqslr", withoutBackground ? "_19bvidpf _18u01i6y" : "_19ith6cr _bfhkhp5a _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _1nrm18uv _c2waglyw _1iohnqa1", isHovered && "_1h6dmr28", isHovered && !withoutBackground && "_4bfu18uv _1hmsglyw _ajmmnqa1", isSelected ? "_12ji1r31 _1qu2glyw _12y31o36 _80omtlke _16qscw00 _uiztglyw _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _bfw7h6cr _1nrm18uv _c2waglyw _1iohnqa1" : "_uizt1kdv"])
+    className: ax([fg('platform-linking-visual-refresh-v1') ? "_11c81doa _1yt4x7n9 _2rkoiti9 _v56415x0 _1e0c1nu9 _16d9qvcn _syaz1y58 _1rkwglyw _4cvxmr28" : "_1yt4x7n9 _2rkoiti9 _v56415x0 _vwz4qslr _1e0c1nu9 _16d9qvcn _syaz1y58 _1rkwglyw _4cvxmr28", truncateInline && fg('platform-linking-visual-refresh-v1') && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _1e0c1abx _1yyjkb7n _sudp1e54 _17bix7n9 _nr8z1o8l", truncateInline && !fg('platform-linking-visual-refresh-v1') && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _vwz4183y _1e0c1abx _1yyjkb7n _sudp1e54 _17bix7n9 _nr8z1o8l _102kqslr", withoutBackground ? "_19bvidpf _18u01i6y" : "_19ith6cr _bfhkhp5a _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _1nrm18uv _c2waglyw _1iohnqa1", isHovered && "_1h6dmr28", isHovered && !withoutBackground && "_4bfu18uv _1hmsglyw _ajmmnqa1", isSelected ? "_12ji1r31 _1qu2glyw _12y31o36 _80omtlke _16qscw00 _uiztglyw _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _bfw7h6cr _1nrm18uv _c2waglyw _1iohnqa1" : "_uizt1kdv"])
   }), props.children);
 });
 export const WrapperAnchor = /*#__PURE__*/forwardRef(({
@@ -33,10 +34,11 @@ export const WrapperAnchor = /*#__PURE__*/forwardRef(({
     href: href,
     ref: ref
   }, props, {
-    className: ax(["_1yt4x7n9 _2rkoiti9 _v56415x0 _vwz4qslr _1e0c1nu9 _16d9qvcn _syaz1y58 _1rkwglyw _4cvxmr28", truncateInline && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _vwz4183y _1e0c1abx _1yyjkb7n _sudp1e54 _17bix7n9 _nr8z1o8l _102kqslr", withoutBackground ? "_19bvidpf _18u01i6y" : "_19ith6cr _bfhkhp5a _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _1nrm18uv _c2waglyw _1iohnqa1", isHovered && "_1h6dmr28", isHovered && !withoutBackground && "_4bfu18uv _1hmsglyw _ajmmnqa1", isSelected ? "_12ji1r31 _1qu2glyw _12y31o36 _80omtlke _16qscw00 _uiztglyw _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _bfw7h6cr _1nrm18uv _c2waglyw _1iohnqa1" : "_uizt1kdv", isInteractive && "_nt751r31 _49pcglyw _1hvw1o36 _1372tlke _7ehicw00 _1j5pglyw _1di629zg"])
+    className: ax([fg('platform-linking-visual-refresh-v1') ? "_11c81doa _1yt4x7n9 _2rkoiti9 _v56415x0 _1e0c1nu9 _16d9qvcn _syaz1y58 _1rkwglyw _4cvxmr28" : "_1yt4x7n9 _2rkoiti9 _v56415x0 _vwz4qslr _1e0c1nu9 _16d9qvcn _syaz1y58 _1rkwglyw _4cvxmr28", truncateInline && fg('platform-linking-visual-refresh-v1') && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _1e0c1abx _1yyjkb7n _sudp1e54 _17bix7n9 _nr8z1o8l", truncateInline && !fg('platform-linking-visual-refresh-v1') && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _vwz4183y _1e0c1abx _1yyjkb7n _sudp1e54 _17bix7n9 _nr8z1o8l _102kqslr", withoutBackground ? "_19bvidpf _18u01i6y" : "_19ith6cr _bfhkhp5a _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _1nrm18uv _c2waglyw _1iohnqa1", isHovered && "_1h6dmr28", isHovered && !withoutBackground && "_4bfu18uv _1hmsglyw _ajmmnqa1", isSelected ? "_12ji1r31 _1qu2glyw _12y31o36 _80omtlke _16qscw00 _uiztglyw _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _bfw7h6cr _1nrm18uv _c2waglyw _1iohnqa1" : "_uizt1kdv", isInteractive && "_nt751r31 _49pcglyw _1hvw1o36 _1372tlke _7ehicw00 _1j5pglyw _1di629zg"])
   }), props.children);
 });
-const baseWrapperStyles = null;
+const baseWrapperStylesNew = null;
+const baseWrapperStylesOld = null;
 
 // if the parent instruct the wrapper to be interactive, and the wrapper is in focus, apply selectedStyles
 const interactiveStyles = null;
@@ -44,6 +46,7 @@ const hoveredStyles = null;
 const hoveredWithBackgroundStyles = null;
 const withoutBackgroundStyles = null;
 const withBackgroundStyles = null;
-const truncateStyles = null;
+const truncateStylesNew = null;
+const truncateStylesOld = null;
 const notSelectedStyle = null;
 const selectedStyles = null;

package/dist/es2019/view/InlineCard/IconAndTitleLayout/index.compiled.css

@@ -1,4 +1,5 @@
 ._18u01b66{margin-left:var(--ds-space-050,4px)}
+._1bsb1osq{width:100%}
 ._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}
 ._syaz1y58{color:var(--ds-link,#0052cc)}
 ._1bnxglyw:hover{text-decoration-line:none}

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

@@ -5,16 +5,18 @@ import "./index.compiled.css";
 import { forwardRef } from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { di } from 'react-magnetic-di';
 import ImageLoader from 'react-render-image';
 import LinkIcon from '@atlaskit/icon/core/migration/link';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
 import { B400, N200 } from '@atlaskit/theme/colors';
 import { Icon, Shimmer } from '../Icon';
 import { LinkAppearance as LinkAppearanceOld, NoLinkAppearance as NoLinkAppearanceOld } from '../styled-emotion';
-import { EmojiWrapper, IconEmptyWrapper, IconPositionWrapper, IconTitleWrapper, IconWrapper, TitleWrapper, TitleWrapperClassName } from './styled';
+import { EmojiWrapperOldVisualRefresh, IconEmptyWrapperOldVisualRefresh, IconPositionWrapperOldVisualRefresh, IconTitleWrapperOldVisualRefresh, IconWrapperOldVisualRefresh, TitleWrapperClassNameOldVisualRefresh, TitleWrapperOldVisualRefresh } from './styled';
 import { EmojiWrapper as EmojiWrapperOld, IconEmptyWrapper as IconEmptyWrapperOld, IconPositionWrapper as IconPositionWrapperOld, IconTitleWrapper as IconTitleWrapperOld, IconWrapper as IconWrapperOld, TitleWrapper as TitleWrapperOld } from './styled-emotion';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- Ignored via go/DSP-18766
-const NoLinkAppearance = forwardRef(({
+const NoLinkAppearanceOldVisualRefresh = forwardRef(({
   as: C = "span",
   style: __cmpls,
   ...__cmplp
@@ -28,7 +30,7 @@ const NoLinkAppearance = forwardRef(({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- Ignored via go/DSP-18766
 if (process.env.NODE_ENV !== 'production') {
-  NoLinkAppearance.displayName = 'NoLinkAppearance';
+  NoLinkAppearanceOldVisualRefresh.displayName = 'NoLinkAppearanceOldVisualRefresh';
 }
 const LinkAppearance = forwardRef(({
   as: C = "a",
@@ -77,12 +79,26 @@ export class IconAndTitleLayout extends React.Component {
       emoji
     } = this.props;
     if (emoji) {
-      return fg('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/React.createElement(EmojiWrapper, null, emoji) : /*#__PURE__*/React.createElement(EmojiWrapperOld, null, emoji);
+      if (fg('platform-linking-visual-refresh-v1')) {
+        return /*#__PURE__*/React.createElement(Box, {
+          as: "span",
+          xcss: iconWrapperStyle,
+          testId: "icon-position-emoji-wrapper"
+        }, emoji);
+      }
+      return fg('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/React.createElement(EmojiWrapperOldVisualRefresh, null, emoji) : /*#__PURE__*/React.createElement(EmojiWrapperOld, null, emoji);
     }
     if (!icon || typeof icon === 'string') {
       return null;
     }
-    return fg('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/React.createElement(IconWrapper, null, icon) : /*#__PURE__*/React.createElement(IconWrapperOld, null, icon);
+    if (fg('platform-linking-visual-refresh-v1')) {
+      return /*#__PURE__*/React.createElement(Box, {
+        as: "span",
+        xcss: iconWrapperStyle,
+        testId: "icon-atlaskit-icon-wrapper"
+      }, icon);
+    }
+    return fg('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/React.createElement(IconWrapperOldVisualRefresh, null, icon) : /*#__PURE__*/React.createElement(IconWrapperOld, null, icon);
   }
   renderImageIcon(errored, testId) {
     const {
@@ -91,6 +107,21 @@ export class IconAndTitleLayout extends React.Component {
     if (!url || typeof url !== 'string') {
       return null;
     }
+    if (fg('platform-linking-visual-refresh-v1')) {
+      return /*#__PURE__*/React.createElement(ImageLoader, {
+        src: url,
+        loaded: /*#__PURE__*/React.createElement("img", {
+          src: url,
+          "data-testid": `${testId}-image`,
+          alt: "",
+          className: ax(["_1bsb1osq"])
+        }),
+        errored: errored,
+        loading: /*#__PURE__*/React.createElement(Shimmer, {
+          testId: `${testId}-loading`
+        })
+      });
+    }
     return /*#__PURE__*/React.createElement(ImageLoader, {
       src: url,
       loaded: /*#__PURE__*/React.createElement(Icon
@@ -110,10 +141,18 @@ export class IconAndTitleLayout extends React.Component {
     const {
       defaultIcon
     } = this.props;
+    if (fg('platform-linking-visual-refresh-v1')) {
+      return defaultIcon || /*#__PURE__*/React.createElement(LinkIcon, {
+        label: "link",
+        LEGACY_size: "small",
+        testId: `${testId}-default`,
+        color: "currentColor"
+      });
+    }
     if (defaultIcon) {
-      return /*#__PURE__*/React.createElement(IconWrapper, null, defaultIcon);
+      return /*#__PURE__*/React.createElement(IconWrapperOldVisualRefresh, null, defaultIcon);
     }
-    return /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(LinkIcon, {
+    return /*#__PURE__*/React.createElement(IconWrapperOldVisualRefresh, null, /*#__PURE__*/React.createElement(LinkIcon, {
       label: "link",
       LEGACY_size: "small",
       testId: `${testId}-default`,
@@ -131,6 +170,13 @@ export class IconAndTitleLayout extends React.Component {
     }
     const placeholder = this.renderIconPlaceholder(testId);
     const image = this.renderImageIcon(placeholder, testId);
+    if (fg('platform-linking-visual-refresh-v1')) {
+      return /*#__PURE__*/React.createElement(Box, {
+        as: "span",
+        xcss: iconWrapperStyle,
+        testId: `${testId}-image-wrapper`
+      }, image || placeholder);
+    }
     return image || placeholder;
   }
   render() {
@@ -143,20 +189,32 @@ export class IconAndTitleLayout extends React.Component {
       rightSide,
       testId = 'inline-card-icon-and-title'
     } = this.props;
-    const titlePart = fg('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconPositionWrapper, {
+    const titlePart = fg('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/React.createElement(React.Fragment, null, fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: iconOuterWrapperStyle,
+      testId: "icon-position-wrapper"
+    }, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: iconEmptyStyle,
+      testId: "icon-empty-wrapper"
+    }), this.renderIcon(testId))) : /*#__PURE__*/React.createElement(IconPositionWrapperOldVisualRefresh, {
       "data-testid": "icon-position-wrapper"
-    }, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapper, {
+    }, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapperOldVisualRefresh, {
       "data-testid": "icon-empty-wrapper"
-    }), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapper
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    , {
+    }), this.renderIcon(testId))), fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Box, _extends({
+      as: "span",
       style: {
-        color: titleTextColor
+        color: this.props.titleTextColor
       }
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: TitleWrapperClassName
-    }, title)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconPositionWrapperOld, {
+    }, !fg('platform-linking-visual-refresh-v1') ? {
+      className: TitleWrapperClassNameOldVisualRefresh
+    } : {}), title) : /*#__PURE__*/React.createElement(TitleWrapperOldVisualRefresh, _extends({
+      style: {
+        color: this.props.titleTextColor
+      }
+    }, !fg('platform-linking-visual-refresh-v1') ? {
+      className: TitleWrapperClassNameOldVisualRefresh
+    } : {}), title)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconPositionWrapperOld, {
       "data-testid": "icon-position-wrapper"
     }, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapperOld, {
       "data-testid": "icon-empty-wrapper"
@@ -168,23 +226,31 @@ export class IconAndTitleLayout extends React.Component {
       }
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
-      className: TitleWrapperClassName
+      className: TitleWrapperClassNameOldVisualRefresh
     }, title));
     if (fg('bandicoots-compiled-migration-smartcard')) {
-      return (
-        /*#__PURE__*/
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        React.createElement(IconTitleWrapper, {
-          style: {
-            color: titleColor
-          },
-          "data-testid": testId
-        }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
-          href: link,
-          onClick: this.handleClick,
-          onKeyPress: this.handleKeyPress
-        }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(NoLinkAppearance, null, rightSide) : null)
-      );
+      return /*#__PURE__*/React.createElement(React.Fragment, null, fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(IconTitleWrapper, {
+        style: {
+          color: this.props.titleColor
+        },
+        testId: testId
+      }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
+        href: link,
+        onClick: this.handleClick,
+        onKeyPress: this.handleKeyPress
+      }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(Box, {
+        as: "span",
+        xcss: noLinkAppearanceStyle
+      }, rightSide) : null) : /*#__PURE__*/React.createElement(IconTitleWrapperOldVisualRefresh, {
+        style: {
+          color: this.props.titleColor
+        },
+        "data-testid": testId
+      }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
+        href: link,
+        onClick: this.handleClick,
+        onKeyPress: this.handleKeyPress
+      }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(NoLinkAppearanceOldVisualRefresh, null, rightSide) : null));
     } else {
       return (
         /*#__PURE__*/
@@ -205,4 +271,68 @@ export class IconAndTitleLayout extends React.Component {
 }
 _defineProperty(IconAndTitleLayout, "defaultProps", {
   rightSideSpacer: true
+});
+export const IconTitleWrapper = props => {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: "span",
+    xcss: iconTitleWrapperStyle
+  }, props));
+};
+export const LozengeWrapper = props => {
+  return /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: lozengeWrapperStyle
+  }, /*#__PURE__*/React.createElement(Box, _extends({
+    xcss: lozengeInternalWrapperStyle
+  }, props)));
+};
+const lozengeInternalWrapperStyle = xcss({
+  paddingBottom: 'space.025'
+});
+const lozengeWrapperStyle = xcss({
+  display: 'inline-block',
+  verticalAlign: 'bottom',
+  marginTop: 'space.0',
+  marginRight: 'space.050',
+  marginBottom: 'space.0',
+  marginLeft: 'space.025'
+});
+const horizontalPadding = 'space.050';
+const verticalPadding = 'space.025';
+const iconWidth = '16px';
+const iconEmptyStyle = xcss({
+  width: iconWidth,
+  display: 'inline-block',
+  opacity: 0
+});
+const iconOuterWrapperStyle = xcss({
+  marginRight: 'space.050',
+  display: 'inline-block',
+  position: 'relative'
+});
+const iconTitleWrapperStyle = xcss({
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-all',
+  boxDecorationBreak: 'clone',
+  paddingTop: verticalPadding,
+  paddingRight: horizontalPadding,
+  paddingBottom: verticalPadding,
+  paddingLeft: horizontalPadding
+});
+const iconWrapperStyle = xcss({
+  position: 'absolute',
+  display: 'inline-flex',
+  alignItems: 'center',
+  boxSizing: 'border-box',
+  top: 'space.0',
+  left: 'space.0',
+  bottom: 'space.0',
+  width: iconWidth,
+  userSelect: 'none'
+});
+const iconImageStyle = null;
+const noLinkAppearanceStyle = xcss({
+  color: 'color.text.subtlest',
+  font: 'font.body',
+  marginLeft: 'space.050'
 });

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

@@ -45,8 +45,9 @@ const IconOverrides = `
   }
 `;
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const IconWrapper = forwardRef(({
+export const IconWrapperOldVisualRefresh = forwardRef(({
   as: C = "span",
   style: __cmpls,
   ...__cmplp
@@ -59,11 +60,12 @@ export const IconWrapper = forwardRef(({
 });
 
 // Wraps all emoji in Inline Links similar to icon
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 if (process.env.NODE_ENV !== 'production') {
-  IconWrapper.displayName = 'IconWrapper';
+  IconWrapperOldVisualRefresh.displayName = 'IconWrapperOldVisualRefresh';
 }
-export const EmojiWrapper = forwardRef(({
+export const EmojiWrapperOldVisualRefresh = forwardRef(({
   as: C = "span",
   style: __cmpls,
   ...__cmplp
@@ -78,11 +80,12 @@ export const EmojiWrapper = forwardRef(({
 // The main 'wrapping' element, title of the content.
 // NB: `white-space` adds little whitespace before wrapping.
 // NB: `word-break` line breaks as soon as an overflow takes place.
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 if (process.env.NODE_ENV !== 'production') {
-  EmojiWrapper.displayName = 'EmojiWrapper';
+  EmojiWrapperOldVisualRefresh.displayName = 'EmojiWrapperOldVisualRefresh';
 }
-export const IconTitleWrapper = forwardRef(({
+export const IconTitleWrapperOldVisualRefresh = forwardRef(({
   as: C = "span",
   style: __cmpls,
   ...__cmplp
@@ -94,12 +97,12 @@ export const IconTitleWrapper = forwardRef(({
   }));
 });
 
-// TODO: Replace overrides with proper AtlasKit solution.
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 if (process.env.NODE_ENV !== 'production') {
-  IconTitleWrapper.displayName = 'IconTitleWrapper';
+  IconTitleWrapperOldVisualRefresh.displayName = 'IconTitleWrapperOldVisualRefresh';
 }
-export const LozengeWrapper = forwardRef(({
+export const LozengeWrapperOldVisualRefresh = forwardRef(({
   as: C = "span",
   style: __cmpls,
   ...__cmplp
@@ -113,7 +116,7 @@ export const LozengeWrapper = forwardRef(({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 if (process.env.NODE_ENV !== 'production') {
-  LozengeWrapper.displayName = 'LozengeWrapper';
+  LozengeWrapperOldVisualRefresh.displayName = 'LozengeWrapperOldVisualRefresh';
 }
 export const RightIconPositionWrapper = forwardRef(({
   as: C = "span",
@@ -130,11 +133,12 @@ export const RightIconPositionWrapper = forwardRef(({
 // The following components are used to absolutely position icons in the vertical center.
 // - IconPositionWrapper: the `relative` parent which has no height in itself.
 // - IconEmptyWrapper: the child which forces `IconPositionWrapper` to have a height.
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 if (process.env.NODE_ENV !== 'production') {
   RightIconPositionWrapper.displayName = 'RightIconPositionWrapper';
 }
-export const IconPositionWrapper = forwardRef(({
+export const IconPositionWrapperOldVisualRefresh = forwardRef(({
   as: C = "span",
   style: __cmpls,
   ...__cmplp
@@ -146,11 +150,12 @@ export const IconPositionWrapper = forwardRef(({
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 if (process.env.NODE_ENV !== 'production') {
-  IconPositionWrapper.displayName = 'IconPositionWrapper';
+  IconPositionWrapperOldVisualRefresh.displayName = 'IconPositionWrapperOldVisualRefresh';
 }
-export const IconEmptyWrapper = forwardRef(({
+export const IconEmptyWrapperOldVisualRefresh = forwardRef(({
   as: C = "span",
   style: __cmpls,
   ...__cmplp
@@ -163,14 +168,16 @@ export const IconEmptyWrapper = forwardRef(({
 });
 
 // With emotion it's not possible to use reference to `TitleWrapper` as part of a selector,
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // To achieve same result we use classname instead.
 if (process.env.NODE_ENV !== 'production') {
-  IconEmptyWrapper.displayName = 'IconEmptyWrapper';
+  IconEmptyWrapperOldVisualRefresh.displayName = 'IconEmptyWrapperOldVisualRefresh';
 }
-export const TitleWrapperClassName = 'smart-link-title-wrapper';
+export const TitleWrapperClassNameOldVisualRefresh = 'smart-link-title-wrapper';
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-empty-styled-expression -- Ignored via go/DSP-18766
-export const TitleWrapper = forwardRef(({
+export const TitleWrapperOldVisualRefresh = forwardRef(({
   as: C = "span",
   style: __cmpls,
   ...__cmplp
@@ -182,5 +189,5 @@ export const TitleWrapper = forwardRef(({
   }));
 });
 if (process.env.NODE_ENV !== 'production') {
-  TitleWrapper.displayName = 'TitleWrapper';
+  TitleWrapperOldVisualRefresh.displayName = 'TitleWrapperOldVisualRefresh';
 }

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import Lozenge from '@atlaskit/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { HoverCard } from '../../HoverCard';
 import { Frame } from '../Frame';
-import { IconAndTitleLayout } from '../IconAndTitleLayout';
-import { LozengeWrapper } from '../IconAndTitleLayout/styled';
+import { IconAndTitleLayout, LozengeWrapper as LozengeWrapperNew } from '../IconAndTitleLayout';
+import { LozengeWrapperOldVisualRefresh } from '../IconAndTitleLayout/styled';
 export class InlineCardResolvedView extends React.Component {
   renderLozenge() {
     const {
@@ -13,6 +14,7 @@ export class InlineCardResolvedView extends React.Component {
       return null;
     }
     const appearance = lozenge.appearance || 'default';
+    const LozengeWrapper = fg('platform-linking-visual-refresh-v1') ? LozengeWrapperNew : LozengeWrapperOldVisualRefresh;
     return /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
       testId: "inline-card-resolved-view-lozenge",
       appearance: appearance

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

@@ -2,10 +2,10 @@ import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Spinner from '@atlaskit/spinner';
 import { Frame } from '../Frame';
-import { IconAndTitleLayout } from '../IconAndTitleLayout';
-import { IconTitleWrapper, RightIconPositionWrapper } from '../IconAndTitleLayout/styled';
+import { IconAndTitleLayout, IconTitleWrapper } from '../IconAndTitleLayout';
+import { IconTitleWrapperOldVisualRefresh, RightIconPositionWrapper } from '../IconAndTitleLayout/styled';
 import { IconTitleWrapper as IconTitleWrapperOld, RightIconPositionWrapper as RightIconPositionWrapperOld } from '../IconAndTitleLayout/styled-emotion';
-import { SpinnerWrapper } from './styled';
+import { SpinnerWrapperOldVisualRefresh } from './styled';
 import { SpinnerWrapper as SpinnerWrapperOld } from './styled-emotion';
 export class InlineCardResolvingView extends React.Component {
   render() {
@@ -19,7 +19,8 @@ export class InlineCardResolvingView extends React.Component {
       resolvingPlaceholder,
       truncateInline
     } = this.props;
-    const SpinnerWrapperComponent = fg('bandicoots-compiled-migration-smartcard') ? SpinnerWrapper : SpinnerWrapperOld;
+    const SpinnerWrapperComponent = fg('bandicoots-compiled-migration-smartcard') ? SpinnerWrapperOldVisualRefresh : SpinnerWrapperOld;
+    const IconTitleWrapperFFed = fg('platform-linking-visual-refresh-v1') ? IconTitleWrapper : IconTitleWrapperOldVisualRefresh;
     if (inlinePreloaderStyle === 'on-right-without-skeleton') {
       if (fg('bandicoots-compiled-migration-smartcard')) {
         return /*#__PURE__*/React.createElement(Frame, {
@@ -28,11 +29,13 @@ export class InlineCardResolvingView extends React.Component {
           onClick: onClick,
           isSelected: isSelected,
           truncateInline: truncateInline
-        }, /*#__PURE__*/React.createElement(IconTitleWrapper, null, url, /*#__PURE__*/React.createElement(RightIconPositionWrapper, null, /*#__PURE__*/React.createElement(SpinnerWrapperComponent, {
+        }, /*#__PURE__*/React.createElement(IconTitleWrapperFFed, null, url, /*#__PURE__*/React.createElement(RightIconPositionWrapper, null, fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Spinner, {
+          size: 14
+        }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SpinnerWrapperComponent, {
           className: "inline-resolving-spinner"
         }, /*#__PURE__*/React.createElement(Spinner, {
           size: 14
-        })))));
+        }))))));
       } else {
         return /*#__PURE__*/React.createElement(Frame, {
           withoutBackground: true,
@@ -56,11 +59,13 @@ export class InlineCardResolvingView extends React.Component {
       }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
         title: resolvingPlaceholder !== null && resolvingPlaceholder !== void 0 ? resolvingPlaceholder : url,
         titleTextColor: titleTextColor
-      }, /*#__PURE__*/React.createElement(SpinnerWrapperComponent, {
+      }, fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Spinner, {
+        size: 14
+      }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SpinnerWrapperComponent, {
         className: "inline-resolving-spinner"
       }, /*#__PURE__*/React.createElement(Spinner, {
         size: 14
-      }))));
+      })))));
     }
   }
 }

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

@@ -4,11 +4,12 @@ import "./styled.compiled.css";
 import { forwardRef } from 'react';
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { IconTitleWrapper } from '../IconAndTitleLayout/styled';
+import { IconTitleWrapperOldVisualRefresh } from '../IconAndTitleLayout/styled';
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const SpinnerWrapper = forwardRef(({
-  as: C = IconTitleWrapper,
+export const SpinnerWrapperOldVisualRefresh = forwardRef(({
+  as: C = IconTitleWrapperOldVisualRefresh,
   style: __cmpls,
   ...__cmplp
 }, __cmplr) => {
@@ -19,5 +20,5 @@ export const SpinnerWrapper = forwardRef(({
   }));
 });
 if (process.env.NODE_ENV !== 'production') {
-  SpinnerWrapper.displayName = 'SpinnerWrapper';
+  SpinnerWrapperOldVisualRefresh.displayName = 'SpinnerWrapperOldVisualRefresh';
 }