@atlaskit/editor-plugin-card 6.6.2 → 6.6.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-card
 
+## 6.6.4
+
+### Patch Changes
+
+- [#169870](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/169870)
+  [`07d290a3b8ee1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/07d290a3b8ee1) -
+  [ED-28198] Add tooltip for edit link toolbar icon button
+- Updated dependencies
+
+## 6.6.3
+
+### Patch Changes
+
+- [#166368](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/166368)
+  [`5f46eb74d8fa5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5f46eb74d8fa5) -
+  [ux] ED-27810: Added the link preference button when control is on
+
 ## 6.6.2
 
 ### Patch Changes

package/dist/cjs/ui/EditToolbarButton/EditToolbarButtonPresentation.js

@@ -13,11 +13,11 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _edit = _interopRequireDefault(require("@atlaskit/icon/core/edit"));
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down"));
 var _menu = require("@atlaskit/menu");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _utils = require("../../pm-plugins/utils");
 var _editDatasourceAction = require("../editDatasourceAction");
 /**
@@ -64,9 +64,11 @@ var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref)
       (0, _utils.focusEditorView)(editorView);
     }
   }, [currentAppearance, datasourceId, editorAnalyticsApi, editorView, extensionKey]);
-  var icon = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _react2.jsx)(_edit.default, {
+  var isControlsOn = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_controls', 'cohort', 'variant1');
+  var icon = isControlsOn ? (0, _react2.jsx)(_edit.default, {
     label: ""
   }) : undefined;
+  var tooltipContent = isControlsOn && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_13') ? intl.formatMessage(_messages.linkToolbarMessages.editLink) : undefined;
   switch (editVariant) {
     case 'edit-link':
       {
@@ -75,11 +77,12 @@ var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref)
         }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
           testId: "edit-link",
           onClick: onEditLink,
-          icon: icon
-        }, (0, _experiments.editorExperiment)('platform_editor_controls', 'control') && (0, _react2.jsx)(_reactIntlNext.FormattedMessage
+          icon: icon,
+          tooltipContent: tooltipContent
+        }, !isControlsOn && (0, _react2.jsx)(_reactIntlNext.FormattedMessage
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
-        , _messages.linkToolbarMessages.editLink)), (!(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') || !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6')) && (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
+        , _messages.linkToolbarMessages.editLink)), (!isControlsOn || !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6')) && (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
       }
     case 'edit-datasource':
       {
@@ -92,7 +95,7 @@ var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref)
         }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
-        , _messages.linkToolbarMessages.editDatasourceStandalone)), (!(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') || !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6')) && (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
+        , _messages.linkToolbarMessages.editDatasourceStandalone)), (!isControlsOn || !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6')) && (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
       }
     case 'edit-dropdown':
       {
@@ -103,7 +106,8 @@ var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref)
           iconAfter: (0, _react2.jsx)("span", {
             css: dropdownExpandContainer
           }, (0, _react2.jsx)(_chevronDown.default, {
-            label: intl.formatMessage(_messages.cardMessages.editDropdownTriggerTitle)
+            label: intl.formatMessage(_messages.cardMessages.editDropdownTriggerTitle),
+            size: "small"
           })),
           onClick: toggleOpen,
           selected: isOpen,
@@ -112,7 +116,7 @@ var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref)
         }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
-        , _messages.cardMessages.editDropdownTriggerTitle)), (!(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') || !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6')) && (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
+        , _messages.cardMessages.editDropdownTriggerTitle)), (!isControlsOn || !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6')) && (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
         return (0, _react2.jsx)(_compiled.Flex, {
           ref: containerRef
         }, (0, _react2.jsx)(_uiMenu.DropdownContainer, {

package/dist/cjs/ui/EditToolbarButton/index.js

@@ -13,7 +13,7 @@ var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down"));
 var _linkProvider = require("@atlaskit/link-provider");
 var _menu = require("@atlaskit/menu");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -129,7 +129,8 @@ var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext
           iconAfter: (0, _react2.jsx)("span", {
             css: dropdownExpandContainer
           }, (0, _react2.jsx)(_chevronDown.default, {
-            label: intl.formatMessage(_messages.cardMessages.editDropdownTriggerTitle)
+            label: intl.formatMessage(_messages.cardMessages.editDropdownTriggerTitle),
+            size: "small"
           })),
           onClick: toggleOpen,
           selected: isOpen,

package/dist/cjs/ui/HyperlinkToolbarAppearanceDropdown.js

@@ -13,7 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _card = require("@atlaskit/editor-common/card");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _LinkToolbarAppearanceDropdown = require("./LinkToolbarAppearanceDropdown");
@@ -176,7 +176,8 @@ var CustomHyperlinkDropdown = function CustomHyperlinkDropdown(props) {
     }),
     iconAfter: /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
       label: "",
-      spacing: "compact"
+      spacing: "compact",
+      size: "small"
     })
   }, title);
   return /*#__PURE__*/_react.default.createElement(_compiled.Flex, {

package/dist/cjs/ui/toolbar.js

@@ -674,10 +674,24 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
     // testId is required to show focus on trigger button on ESC key press
     // see hideOnEsc in platform/packages/editor/editor-plugin-floating-toolbar/src/ui/Dropdown.tsx
     var testId = (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_8') ? 'datasource-overflow-dropdown-trigger' : undefined;
-    toolbarItems.push({
-      type: 'separator',
-      fullHeight: true
-    });
+
+    // When canShowAppearanceSwitch is true, and platform_editor_controls is on, the link appearance dropdown shows, which includes a link preference button
+    // So only add the link appearance button when canShowAppearanceSwitch is false
+    if (!canShowAppearanceSwitch() && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_12')) {
+      var linkPreferenceButton = getSettingsButton(intl, editorAnalyticsApi, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.userPreferencesLink);
+      toolbarItems.push({
+        type: 'separator',
+        fullHeight: true
+      }, linkPreferenceButton, {
+        type: 'separator',
+        fullHeight: true
+      });
+    } else {
+      toolbarItems.push({
+        type: 'separator',
+        fullHeight: true
+      });
+    }
     var overflowMenuConfig = [{
       type: 'overflow-dropdown',
       testId: testId,

package/dist/es2019/ui/EditToolbarButton/EditToolbarButtonPresentation.js

@@ -11,11 +11,11 @@ import { linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
 import EditIcon from '@atlaskit/icon/core/edit';
-import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down';
 import { ButtonItem } from '@atlaskit/menu';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives/compiled';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { focusEditorView } from '../../pm-plugins/utils';
 import { editDatasource } from '../editDatasourceAction';
 const dropdownExpandContainer = css({
@@ -47,9 +47,11 @@ const EditToolbarButtonPresentation = ({
       focusEditorView(editorView);
     }
   }, [currentAppearance, datasourceId, editorAnalyticsApi, editorView, extensionKey]);
-  const icon = editorExperiment('platform_editor_controls', 'variant1') ? jsx(EditIcon, {
+  const isControlsOn = expValEqualsNoExposure('platform_editor_controls', 'cohort', 'variant1');
+  const icon = isControlsOn ? jsx(EditIcon, {
     label: ""
   }) : undefined;
+  const tooltipContent = isControlsOn && fg('platform_editor_controls_patch_13') ? intl.formatMessage(linkToolbarMessages.editLink) : undefined;
   switch (editVariant) {
     case 'edit-link':
       {
@@ -58,11 +60,12 @@ const EditToolbarButtonPresentation = ({
         }, jsx(Button, {
           testId: "edit-link",
           onClick: onEditLink,
-          icon: icon
-        }, editorExperiment('platform_editor_controls', 'control') && jsx(FormattedMessage
+          icon: icon,
+          tooltipContent: tooltipContent
+        }, !isControlsOn && jsx(FormattedMessage
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
-        , linkToolbarMessages.editLink)), (!editorExperiment('platform_editor_controls', 'variant1') || !fg('platform_editor_controls_patch_6')) && jsx(Separator, null));
+        , linkToolbarMessages.editLink)), (!isControlsOn || !fg('platform_editor_controls_patch_6')) && jsx(Separator, null));
       }
     case 'edit-datasource':
       {
@@ -75,7 +78,7 @@ const EditToolbarButtonPresentation = ({
         }, jsx(FormattedMessage
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
-        , linkToolbarMessages.editDatasourceStandalone)), (!editorExperiment('platform_editor_controls', 'variant1') || !fg('platform_editor_controls_patch_6')) && jsx(Separator, null));
+        , linkToolbarMessages.editDatasourceStandalone)), (!isControlsOn || !fg('platform_editor_controls_patch_6')) && jsx(Separator, null));
       }
     case 'edit-dropdown':
       {
@@ -86,7 +89,8 @@ const EditToolbarButtonPresentation = ({
           iconAfter: jsx("span", {
             css: dropdownExpandContainer
           }, jsx(ChevronDownIcon, {
-            label: intl.formatMessage(messages.editDropdownTriggerTitle)
+            label: intl.formatMessage(messages.editDropdownTriggerTitle),
+            size: "small"
           })),
           onClick: toggleOpen,
           selected: isOpen,
@@ -95,7 +99,7 @@ const EditToolbarButtonPresentation = ({
         }, jsx(FormattedMessage
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
-        , messages.editDropdownTriggerTitle)), (!editorExperiment('platform_editor_controls', 'variant1') || !fg('platform_editor_controls_patch_6')) && jsx(Separator, null));
+        , messages.editDropdownTriggerTitle)), (!isControlsOn || !fg('platform_editor_controls_patch_6')) && jsx(Separator, null));
         return jsx(Flex, {
           ref: containerRef
         }, jsx(UiDropdown, {

package/dist/es2019/ui/EditToolbarButton/index.js

@@ -10,7 +10,7 @@ import { FormattedMessage } from 'react-intl-next';
 import { linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
-import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { ButtonItem } from '@atlaskit/menu';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -114,7 +114,8 @@ const EditToolbarButtonWithCardContext = props => {
           iconAfter: jsx("span", {
             css: dropdownExpandContainer
           }, jsx(ChevronDownIcon, {
-            label: intl.formatMessage(messages.editDropdownTriggerTitle)
+            label: intl.formatMessage(messages.editDropdownTriggerTitle),
+            size: "small"
           })),
           onClick: toggleOpen,
           selected: isOpen,

package/dist/es2019/ui/HyperlinkToolbarAppearanceDropdown.js

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { appearancePropsMap } from '@atlaskit/editor-common/card';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
-import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives/compiled';
 import { LinkAppearanceMenu } from './LinkToolbarAppearanceDropdown';
@@ -91,7 +91,8 @@ const CustomHyperlinkDropdown = props => {
     }),
     iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
       label: "",
-      spacing: "compact"
+      spacing: "compact",
+      size: "small"
     })
   }, title);
   return /*#__PURE__*/React.createElement(Flex, {

package/dist/es2019/ui/toolbar.js

@@ -667,10 +667,24 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
     // testId is required to show focus on trigger button on ESC key press
     // see hideOnEsc in platform/packages/editor/editor-plugin-floating-toolbar/src/ui/Dropdown.tsx
     const testId = fg('platform_editor_controls_patch_8') ? 'datasource-overflow-dropdown-trigger' : undefined;
-    toolbarItems.push({
-      type: 'separator',
-      fullHeight: true
-    });
+
+    // When canShowAppearanceSwitch is true, and platform_editor_controls is on, the link appearance dropdown shows, which includes a link preference button
+    // So only add the link appearance button when canShowAppearanceSwitch is false
+    if (!canShowAppearanceSwitch() && fg('platform_editor_controls_patch_12')) {
+      const linkPreferenceButton = getSettingsButton(intl, editorAnalyticsApi, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.userPreferencesLink);
+      toolbarItems.push({
+        type: 'separator',
+        fullHeight: true
+      }, linkPreferenceButton, {
+        type: 'separator',
+        fullHeight: true
+      });
+    } else {
+      toolbarItems.push({
+        type: 'separator',
+        fullHeight: true
+      });
+    }
     const overflowMenuConfig = [{
       type: 'overflow-dropdown',
       testId,

package/dist/esm/ui/EditToolbarButton/EditToolbarButtonPresentation.js

@@ -12,11 +12,11 @@ import { linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
 import EditIcon from '@atlaskit/icon/core/edit';
-import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down';
 import { ButtonItem } from '@atlaskit/menu';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives/compiled';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { focusEditorView } from '../../pm-plugins/utils';
 import { editDatasource } from '../editDatasourceAction';
 var dropdownExpandContainer = css({
@@ -56,9 +56,11 @@ var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref)
       focusEditorView(editorView);
     }
   }, [currentAppearance, datasourceId, editorAnalyticsApi, editorView, extensionKey]);
-  var icon = editorExperiment('platform_editor_controls', 'variant1') ? jsx(EditIcon, {
+  var isControlsOn = expValEqualsNoExposure('platform_editor_controls', 'cohort', 'variant1');
+  var icon = isControlsOn ? jsx(EditIcon, {
     label: ""
   }) : undefined;
+  var tooltipContent = isControlsOn && fg('platform_editor_controls_patch_13') ? intl.formatMessage(linkToolbarMessages.editLink) : undefined;
   switch (editVariant) {
     case 'edit-link':
       {
@@ -67,11 +69,12 @@ var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref)
         }, jsx(Button, {
           testId: "edit-link",
           onClick: onEditLink,
-          icon: icon
-        }, editorExperiment('platform_editor_controls', 'control') && jsx(FormattedMessage
+          icon: icon,
+          tooltipContent: tooltipContent
+        }, !isControlsOn && jsx(FormattedMessage
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
-        , linkToolbarMessages.editLink)), (!editorExperiment('platform_editor_controls', 'variant1') || !fg('platform_editor_controls_patch_6')) && jsx(Separator, null));
+        , linkToolbarMessages.editLink)), (!isControlsOn || !fg('platform_editor_controls_patch_6')) && jsx(Separator, null));
       }
     case 'edit-datasource':
       {
@@ -84,7 +87,7 @@ var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref)
         }, jsx(FormattedMessage
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
-        , linkToolbarMessages.editDatasourceStandalone)), (!editorExperiment('platform_editor_controls', 'variant1') || !fg('platform_editor_controls_patch_6')) && jsx(Separator, null));
+        , linkToolbarMessages.editDatasourceStandalone)), (!isControlsOn || !fg('platform_editor_controls_patch_6')) && jsx(Separator, null));
       }
     case 'edit-dropdown':
       {
@@ -95,7 +98,8 @@ var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref)
           iconAfter: jsx("span", {
             css: dropdownExpandContainer
           }, jsx(ChevronDownIcon, {
-            label: intl.formatMessage(messages.editDropdownTriggerTitle)
+            label: intl.formatMessage(messages.editDropdownTriggerTitle),
+            size: "small"
           })),
           onClick: toggleOpen,
           selected: isOpen,
@@ -104,7 +108,7 @@ var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref)
         }, jsx(FormattedMessage
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
-        , messages.editDropdownTriggerTitle)), (!editorExperiment('platform_editor_controls', 'variant1') || !fg('platform_editor_controls_patch_6')) && jsx(Separator, null));
+        , messages.editDropdownTriggerTitle)), (!isControlsOn || !fg('platform_editor_controls_patch_6')) && jsx(Separator, null));
         return jsx(Flex, {
           ref: containerRef
         }, jsx(UiDropdown, {

package/dist/esm/ui/EditToolbarButton/index.js

@@ -13,7 +13,7 @@ import { FormattedMessage } from 'react-intl-next';
 import { linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
-import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { ButtonItem } from '@atlaskit/menu';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -123,7 +123,8 @@ var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext
           iconAfter: jsx("span", {
             css: dropdownExpandContainer
           }, jsx(ChevronDownIcon, {
-            label: intl.formatMessage(messages.editDropdownTriggerTitle)
+            label: intl.formatMessage(messages.editDropdownTriggerTitle),
+            size: "small"
           })),
           onClick: toggleOpen,
           selected: isOpen,

package/dist/esm/ui/HyperlinkToolbarAppearanceDropdown.js

@@ -5,7 +5,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { appearancePropsMap } from '@atlaskit/editor-common/card';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
-import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives/compiled';
 import { LinkAppearanceMenu } from './LinkToolbarAppearanceDropdown';
@@ -167,7 +167,8 @@ var CustomHyperlinkDropdown = function CustomHyperlinkDropdown(props) {
     }),
     iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
       label: "",
-      spacing: "compact"
+      spacing: "compact",
+      size: "small"
     })
   }, title);
   return /*#__PURE__*/React.createElement(Flex, {

package/dist/esm/ui/toolbar.js

@@ -665,10 +665,24 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
     // testId is required to show focus on trigger button on ESC key press
     // see hideOnEsc in platform/packages/editor/editor-plugin-floating-toolbar/src/ui/Dropdown.tsx
     var testId = fg('platform_editor_controls_patch_8') ? 'datasource-overflow-dropdown-trigger' : undefined;
-    toolbarItems.push({
-      type: 'separator',
-      fullHeight: true
-    });
+
+    // When canShowAppearanceSwitch is true, and platform_editor_controls is on, the link appearance dropdown shows, which includes a link preference button
+    // So only add the link appearance button when canShowAppearanceSwitch is false
+    if (!canShowAppearanceSwitch() && fg('platform_editor_controls_patch_12')) {
+      var linkPreferenceButton = getSettingsButton(intl, editorAnalyticsApi, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.userPreferencesLink);
+      toolbarItems.push({
+        type: 'separator',
+        fullHeight: true
+      }, linkPreferenceButton, {
+        type: 'separator',
+        fullHeight: true
+      });
+    } else {
+      toolbarItems.push({
+        type: 'separator',
+        fullHeight: true
+      });
+    }
     var overflowMenuConfig = [{
       type: 'overflow-dropdown',
       testId: testId,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "6.6.2",
+	"version": "6.6.4",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -61,9 +61,9 @@
 		"@atlaskit/menu": "^8.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.8.0",
-		"@atlaskit/smart-card": "^38.8.0",
+		"@atlaskit/smart-card": "^38.9.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^6.0.0",
+		"@atlaskit/tmp-editor-statsig": "^6.1.0",
 		"@atlaskit/tokens": "^5.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -141,6 +141,9 @@
 		"platform_editor_controls_patch_9": {
 			"type": "boolean"
 		},
+		"platform_editor_controls_patch_12": {
+			"type": "boolean"
+		},
 		"smart_link_editor_update_toolbar_open_link": {
 			"type": "boolean"
 		},
@@ -158,6 +161,9 @@
 		},
 		"platform_editor_cards_maxcallstackfix": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_patch_13": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {