@atlaskit/editor-plugin-card 5.0.2 → 5.0.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-card
 
+## 5.0.3
+
+### Patch Changes
+
+- [#118829](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/118829)
+  [`7c89303bd91d3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7c89303bd91d3) -
+  [ux] Migrate to new ADS icon
+- [#118799](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/118799)
+  [`11c8209cb910d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/11c8209cb910d) -
+  Fixes missing dependency declarations in package.json
+- Updated dependencies
+
 ## 5.0.2
 
 ### Patch Changes

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

@@ -8,6 +8,8 @@ exports.DatasourceIcon = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _icon = _interopRequireDefault(require("@atlaskit/icon"));
+var _smartLinkList = _interopRequireDefault(require("@atlaskit/icon/core/smart-link-list"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var IconDatasourceGlyph = function IconDatasourceGlyph(props) {
   return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
@@ -35,7 +37,10 @@ var wrapperStyles = (0, _primitives.xcss)({
 var DatasourceIcon = exports.DatasourceIcon = function DatasourceIcon(props) {
   return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
     xcss: wrapperStyles
-  }, /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({
+  }, (0, _platformFeatureFlags.fg)('platform-editor-plugin-card-icon-migration') ? /*#__PURE__*/_react.default.createElement(_smartLinkList.default, {
+    LEGACY_fallbackIcon: IconDatasourceGlyph,
+    label: props === null || props === void 0 ? void 0 : props.label
+  }) : /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({
     glyph: IconDatasourceGlyph
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading

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

@@ -13,7 +13,9 @@ 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/glyph/chevron-down"));
+var _chevronDown2 = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
 var _menu = require("@atlaskit/menu");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _utils = require("../../pm-plugins/utils");
 var _editDatasourceAction = require("../editDatasourceAction");
@@ -95,7 +97,9 @@ var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref)
           testId: "edit-dropdown-trigger",
           iconAfter: (0, _react2.jsx)("span", {
             css: dropdownExpandContainer
-          }, (0, _react2.jsx)(_chevronDown.default, {
+          }, (0, _platformFeatureFlags.fg)('platform-editor-plugin-card-icon-migration') ? (0, _react2.jsx)(_chevronDown2.default, {
+            label: intl.formatMessage(_messages.cardMessages.editDropdownTriggerTitle)
+          }) : (0, _react2.jsx)(_chevronDown.default, {
             label: intl.formatMessage(_messages.cardMessages.editDropdownTriggerTitle)
           })),
           onClick: toggleOpen,

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

@@ -14,8 +14,10 @@ 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/glyph/chevron-down"));
+var _chevronDown2 = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
 var _linkProvider = require("@atlaskit/link-provider");
 var _menu = require("@atlaskit/menu");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _utils = require("../../pm-plugins/utils");
 var _editDatasourceAction = require("../editDatasourceAction");
@@ -126,7 +128,9 @@ var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext
           testId: "edit-dropdown-trigger",
           iconAfter: (0, _react2.jsx)("span", {
             css: dropdownExpandContainer
-          }, (0, _react2.jsx)(_chevronDown.default, {
+          }, (0, _platformFeatureFlags.fg)('platform-editor-plugin-card-icon-migration') ? (0, _react2.jsx)(_chevronDown2.default, {
+            label: intl.formatMessage(_messages.cardMessages.editDropdownTriggerTitle)
+          }) : (0, _react2.jsx)(_chevronDown.default, {
             label: intl.formatMessage(_messages.cardMessages.editDropdownTriggerTitle)
           })),
           onClick: toggleOpen,

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

@@ -16,7 +16,9 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _whitespace = require("@atlaskit/editor-common/whitespace");
+var _customizePreferences = _interopRequireDefault(require("@atlaskit/icon/core/migration/customize--preferences"));
 var _preferences = _interopRequireDefault(require("@atlaskit/icon/glyph/preferences"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _utils = require("./utils");
 var _excluded = ["children", "isSelected", "isVisible", "testId", "url"];
@@ -258,7 +260,11 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
       className: ICON_AND_LABEL_CLASSNAME
     }, (0, _react2.jsx)("span", {
       css: iconStyles
-    }, (0, _react2.jsx)(_preferences.default, {
+    }, (0, _platformFeatureFlags.fg)('platform-editor-plugin-card-icon-migration') ? (0, _react2.jsx)(_customizePreferences.default, {
+      label: label,
+      LEGACY_size: iconSize.current,
+      testId: "".concat(testId, "-icon")
+    }) : (0, _react2.jsx)(_preferences.default, {
       label: label,
       size: iconSize.current,
       testId: "".concat(testId, "-icon")

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

@@ -13,9 +13,12 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _utils = require("@atlaskit/editor-common/utils");
+var _growHorizontalEditorExpand = _interopRequireDefault(require("@atlaskit/icon/core/migration/grow-horizontal--editor-expand"));
+var _shrinkHorizontalEditorCollapse = _interopRequireDefault(require("@atlaskit/icon/core/migration/shrink-horizontal--editor-collapse"));
 var _collapse = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/collapse"));
 var _expand = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/expand"));
 var _linkingCommon = require("@atlaskit/linking-common");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _actions = require("../../pm-plugins/actions");
 var _utils2 = require("../../pm-plugins/utils");
@@ -55,6 +58,16 @@ var LayoutButton = exports.LayoutButton = function LayoutButton(_ref) {
   if (!targetElement) {
     return null;
   }
+  var collapseIcon = (0, _platformFeatureFlags.fg)('platform-editor-plugin-card-icon-migration') ? (0, _react2.jsx)(_shrinkHorizontalEditorCollapse.default, {
+    label: title
+  }) : (0, _react2.jsx)(_collapse.default, {
+    label: title
+  });
+  var expandIcon = (0, _platformFeatureFlags.fg)('platform-editor-plugin-card-icon-migration') ? (0, _react2.jsx)(_growHorizontalEditorExpand.default, {
+    label: title
+  }) : (0, _react2.jsx)(_expand.default, {
+    label: title
+  });
   return (0, _react2.jsx)(_ui.Popup, {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
@@ -70,11 +83,7 @@ var LayoutButton = exports.LayoutButton = function LayoutButton(_ref) {
     css: toolbarButtonWrapperStyles,
     title: title,
     onClick: handleClick,
-    iconBefore: layout === 'full-width' ? (0, _react2.jsx)(_collapse.default, {
-      label: title
-    }) : (0, _react2.jsx)(_expand.default, {
-      label: title
-    })
+    iconBefore: layout === 'full-width' ? collapseIcon : expandIcon
   }));
 };
 var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {

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

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Icon from '@atlaskit/icon';
+import SmartLinkListIcon from '@atlaskit/icon/core/smart-link-list';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Flex, xcss } from '@atlaskit/primitives';
 const IconDatasourceGlyph = props => {
   return /*#__PURE__*/React.createElement("svg", _extends({
@@ -28,7 +30,10 @@ const wrapperStyles = xcss({
 export const DatasourceIcon = props => {
   return /*#__PURE__*/React.createElement(Flex, {
     xcss: wrapperStyles
-  }, /*#__PURE__*/React.createElement(Icon, _extends({
+  }, fg('platform-editor-plugin-card-icon-migration') ? /*#__PURE__*/React.createElement(SmartLinkListIcon, {
+    LEGACY_fallbackIcon: IconDatasourceGlyph,
+    label: props === null || props === void 0 ? void 0 : props.label
+  }) : /*#__PURE__*/React.createElement(Icon, _extends({
     glyph: IconDatasourceGlyph
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading

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

@@ -11,7 +11,9 @@ 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 ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
 import { ButtonItem } from '@atlaskit/menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives';
 import { focusEditorView } from '../../pm-plugins/utils';
 import { editDatasource } from '../editDatasourceAction';
@@ -78,7 +80,9 @@ const EditToolbarButtonPresentation = ({
           testId: "edit-dropdown-trigger",
           iconAfter: jsx("span", {
             css: dropdownExpandContainer
-          }, jsx(ExpandIcon, {
+          }, fg('platform-editor-plugin-card-icon-migration') ? jsx(ChevronDownIcon, {
+            label: intl.formatMessage(messages.editDropdownTriggerTitle)
+          }) : jsx(ExpandIcon, {
             label: intl.formatMessage(messages.editDropdownTriggerTitle)
           })),
           onClick: toggleOpen,

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

@@ -11,8 +11,10 @@ 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 ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { ButtonItem } from '@atlaskit/menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives';
 import { focusEditorView, isDatasourceConfigEditable } from '../../pm-plugins/utils';
 import { editDatasource } from '../editDatasourceAction';
@@ -111,7 +113,9 @@ const EditToolbarButtonWithCardContext = props => {
           testId: "edit-dropdown-trigger",
           iconAfter: jsx("span", {
             css: dropdownExpandContainer
-          }, jsx(ExpandIcon, {
+          }, fg('platform-editor-plugin-card-icon-migration') ? jsx(ChevronDownIcon, {
+            label: intl.formatMessage(messages.editDropdownTriggerTitle)
+          }) : jsx(ExpandIcon, {
             label: intl.formatMessage(messages.editDropdownTriggerTitle)
           })),
           onClick: toggleOpen,

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

@@ -13,7 +13,9 @@ import debounce from 'lodash/debounce';
 import { useIntl } from 'react-intl-next';
 import { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/whitespace';
+import CustomizeIcon from '@atlaskit/icon/core/migration/customize--preferences';
 import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B100, N0, N700 } from '@atlaskit/theme/colors';
 import { getChildElement, getIconSize, getInlineCardAvailableWidth, getOverlayWidths, isOneLine } from './utils';
 const DEBOUNCE_IN_MS = 5;
@@ -238,7 +240,11 @@ const InlineCardOverlay = ({
       className: ICON_AND_LABEL_CLASSNAME
     }, jsx("span", {
       css: iconStyles
-    }, jsx(PreferencesIcon, {
+    }, fg('platform-editor-plugin-card-icon-migration') ? jsx(CustomizeIcon, {
+      label: label,
+      LEGACY_size: iconSize.current,
+      testId: `${testId}-icon`
+    }) : jsx(PreferencesIcon, {
       label: label,
       size: iconSize.current,
       testId: `${testId}-icon`

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

@@ -11,9 +11,12 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
+import GrowHorizontalIcon from '@atlaskit/icon/core/migration/grow-horizontal--editor-expand';
+import ShrinkHorizontalIcon from '@atlaskit/icon/core/migration/shrink-horizontal--editor-collapse';
 import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
 import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
 import { DATASOURCE_DEFAULT_LAYOUT } from '@atlaskit/linking-common';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B300, N20A, N300 } from '@atlaskit/theme/colors';
 import { setCardLayout } from '../../pm-plugins/actions';
 import { isDatasourceNode } from '../../pm-plugins/utils';
@@ -49,6 +52,16 @@ export const LayoutButton = ({
   if (!targetElement) {
     return null;
   }
+  const collapseIcon = fg('platform-editor-plugin-card-icon-migration') ? jsx(ShrinkHorizontalIcon, {
+    label: title
+  }) : jsx(CollapseIcon, {
+    label: title
+  });
+  const expandIcon = fg('platform-editor-plugin-card-icon-migration') ? jsx(GrowHorizontalIcon, {
+    label: title
+  }) : jsx(ExpandIcon, {
+    label: title
+  });
   return jsx(Popup, {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
@@ -64,11 +77,7 @@ export const LayoutButton = ({
     css: toolbarButtonWrapperStyles,
     title: title,
     onClick: handleClick,
-    iconBefore: layout === 'full-width' ? jsx(CollapseIcon, {
-      label: title
-    }) : jsx(ExpandIcon, {
-      label: title
-    })
+    iconBefore: layout === 'full-width' ? collapseIcon : expandIcon
   }));
 };
 const LayoutButtonWrapper = ({

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

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Icon from '@atlaskit/icon';
+import SmartLinkListIcon from '@atlaskit/icon/core/smart-link-list';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Flex, xcss } from '@atlaskit/primitives';
 var IconDatasourceGlyph = function IconDatasourceGlyph(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
@@ -28,7 +30,10 @@ var wrapperStyles = xcss({
 export var DatasourceIcon = function DatasourceIcon(props) {
   return /*#__PURE__*/React.createElement(Flex, {
     xcss: wrapperStyles
-  }, /*#__PURE__*/React.createElement(Icon, _extends({
+  }, fg('platform-editor-plugin-card-icon-migration') ? /*#__PURE__*/React.createElement(SmartLinkListIcon, {
+    LEGACY_fallbackIcon: IconDatasourceGlyph,
+    label: props === null || props === void 0 ? void 0 : props.label
+  }) : /*#__PURE__*/React.createElement(Icon, _extends({
     glyph: IconDatasourceGlyph
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading

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

@@ -12,7 +12,9 @@ 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 ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
 import { ButtonItem } from '@atlaskit/menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives';
 import { focusEditorView } from '../../pm-plugins/utils';
 import { editDatasource } from '../editDatasourceAction';
@@ -87,7 +89,9 @@ var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref)
           testId: "edit-dropdown-trigger",
           iconAfter: jsx("span", {
             css: dropdownExpandContainer
-          }, jsx(ExpandIcon, {
+          }, fg('platform-editor-plugin-card-icon-migration') ? jsx(ChevronDownIcon, {
+            label: intl.formatMessage(messages.editDropdownTriggerTitle)
+          }) : jsx(ExpandIcon, {
             label: intl.formatMessage(messages.editDropdownTriggerTitle)
           })),
           onClick: toggleOpen,

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

@@ -14,8 +14,10 @@ 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 ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { ButtonItem } from '@atlaskit/menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives';
 import { focusEditorView, isDatasourceConfigEditable } from '../../pm-plugins/utils';
 import { editDatasource } from '../editDatasourceAction';
@@ -120,7 +122,9 @@ var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext
           testId: "edit-dropdown-trigger",
           iconAfter: jsx("span", {
             css: dropdownExpandContainer
-          }, jsx(ExpandIcon, {
+          }, fg('platform-editor-plugin-card-icon-migration') ? jsx(ChevronDownIcon, {
+            label: intl.formatMessage(messages.editDropdownTriggerTitle)
+          }) : jsx(ExpandIcon, {
             label: intl.formatMessage(messages.editDropdownTriggerTitle)
           })),
           onClick: toggleOpen,

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

@@ -17,7 +17,9 @@ import debounce from 'lodash/debounce';
 import { useIntl } from 'react-intl-next';
 import { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/whitespace';
+import CustomizeIcon from '@atlaskit/icon/core/migration/customize--preferences';
 import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B100, N0, N700 } from '@atlaskit/theme/colors';
 import { getChildElement, getIconSize, getInlineCardAvailableWidth, getOverlayWidths, isOneLine } from './utils';
 var DEBOUNCE_IN_MS = 5;
@@ -249,7 +251,11 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
       className: ICON_AND_LABEL_CLASSNAME
     }, jsx("span", {
       css: iconStyles
-    }, jsx(PreferencesIcon, {
+    }, fg('platform-editor-plugin-card-icon-migration') ? jsx(CustomizeIcon, {
+      label: label,
+      LEGACY_size: iconSize.current,
+      testId: "".concat(testId, "-icon")
+    }) : jsx(PreferencesIcon, {
       label: label,
       size: iconSize.current,
       testId: "".concat(testId, "-icon")

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

@@ -14,9 +14,12 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
+import GrowHorizontalIcon from '@atlaskit/icon/core/migration/grow-horizontal--editor-expand';
+import ShrinkHorizontalIcon from '@atlaskit/icon/core/migration/shrink-horizontal--editor-collapse';
 import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
 import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
 import { DATASOURCE_DEFAULT_LAYOUT } from '@atlaskit/linking-common';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B300, N20A, N300 } from '@atlaskit/theme/colors';
 import { setCardLayout } from '../../pm-plugins/actions';
 import { isDatasourceNode } from '../../pm-plugins/utils';
@@ -51,6 +54,16 @@ export var LayoutButton = function LayoutButton(_ref) {
   if (!targetElement) {
     return null;
   }
+  var collapseIcon = fg('platform-editor-plugin-card-icon-migration') ? jsx(ShrinkHorizontalIcon, {
+    label: title
+  }) : jsx(CollapseIcon, {
+    label: title
+  });
+  var expandIcon = fg('platform-editor-plugin-card-icon-migration') ? jsx(GrowHorizontalIcon, {
+    label: title
+  }) : jsx(ExpandIcon, {
+    label: title
+  });
   return jsx(Popup, {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
@@ -66,11 +79,7 @@ export var LayoutButton = function LayoutButton(_ref) {
     css: toolbarButtonWrapperStyles,
     title: title,
     onClick: handleClick,
-    iconBefore: layout === 'full-width' ? jsx(CollapseIcon, {
-      label: title
-    }) : jsx(ExpandIcon, {
-      label: title
-    })
+    iconBefore: layout === 'full-width' ? collapseIcon : expandIcon
   }));
 };
 var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "5.0.2",
+	"version": "5.0.3",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,8 +33,9 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.2.1",
 		"@atlaskit/analytics-next": "^11.0.0",
+		"@atlaskit/button": "^21.1.0",
 		"@atlaskit/custom-steps": "^0.10.0",
-		"@atlaskit/editor-common": "^100.1.0",
+		"@atlaskit/editor-common": "^100.2.0",
 		"@atlaskit/editor-plugin-analytics": "^2.0.0",
 		"@atlaskit/editor-plugin-base": "^2.2.0",
 		"@atlaskit/editor-plugin-connectivity": "^2.0.0",
@@ -57,7 +58,7 @@
 		"@atlaskit/menu": "3.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.1.0",
-		"@atlaskit/smart-card": "^35.0.0",
+		"@atlaskit/smart-card": "^35.1.0",
 		"@atlaskit/theme": "^17.0.0",
 		"@atlaskit/tmp-editor-statsig": "^3.2.0",
 		"@atlaskit/tokens": "^4.2.0",
@@ -136,6 +137,9 @@
 		},
 		"platform_fix_embedded_card_re-rendering": {
 			"type": "boolean"
+		},
+		"platform-editor-plugin-card-icon-migration": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {