@atlaskit/editor-plugin-card 5.0.1 → 5.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @atlaskit/editor-plugin-card
2
2
 
3
+ ## 5.0.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#118829](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/118829)
8
+ [`7c89303bd91d3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7c89303bd91d3) -
9
+ [ux] Migrate to new ADS icon
10
+ - [#118799](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/118799)
11
+ [`11c8209cb910d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/11c8209cb910d) -
12
+ Fixes missing dependency declarations in package.json
13
+ - Updated dependencies
14
+
15
+ ## 5.0.2
16
+
17
+ ### Patch Changes
18
+
19
+ - [#117485](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/117485)
20
+ [`e9a8d9ba26963`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e9a8d9ba26963) -
21
+ Reorder icons, and remove some based on new editor controls. Changes under
22
+ `editor_plugin_controls` experiment.
23
+ - Updated dependencies
24
+
3
25
  ## 5.0.1
4
26
 
5
27
  ### Patch Changes
@@ -8,6 +8,8 @@ exports.DatasourceIcon = void 0;
8
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
9
  var _react = _interopRequireDefault(require("react"));
10
10
  var _icon = _interopRequireDefault(require("@atlaskit/icon"));
11
+ var _smartLinkList = _interopRequireDefault(require("@atlaskit/icon/core/smart-link-list"));
12
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
11
13
  var _primitives = require("@atlaskit/primitives");
12
14
  var IconDatasourceGlyph = function IconDatasourceGlyph(props) {
13
15
  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
@@ -35,7 +37,10 @@ var wrapperStyles = (0, _primitives.xcss)({
35
37
  var DatasourceIcon = exports.DatasourceIcon = function DatasourceIcon(props) {
36
38
  return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
37
39
  xcss: wrapperStyles
38
- }, /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({
40
+ }, (0, _platformFeatureFlags.fg)('platform-editor-plugin-card-icon-migration') ? /*#__PURE__*/_react.default.createElement(_smartLinkList.default, {
41
+ LEGACY_fallbackIcon: IconDatasourceGlyph,
42
+ label: props === null || props === void 0 ? void 0 : props.label
43
+ }) : /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({
39
44
  glyph: IconDatasourceGlyph
40
45
  // Ignored via go/ees005
41
46
  // eslint-disable-next-line react/jsx-props-no-spreading
@@ -13,7 +13,9 @@ var _messages = require("@atlaskit/editor-common/messages");
13
13
  var _ui = require("@atlaskit/editor-common/ui");
14
14
  var _uiMenu = require("@atlaskit/editor-common/ui-menu");
15
15
  var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
16
+ var _chevronDown2 = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
16
17
  var _menu = require("@atlaskit/menu");
18
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
17
19
  var _primitives = require("@atlaskit/primitives");
18
20
  var _utils = require("../../pm-plugins/utils");
19
21
  var _editDatasourceAction = require("../editDatasourceAction");
@@ -95,7 +97,9 @@ var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref)
95
97
  testId: "edit-dropdown-trigger",
96
98
  iconAfter: (0, _react2.jsx)("span", {
97
99
  css: dropdownExpandContainer
98
- }, (0, _react2.jsx)(_chevronDown.default, {
100
+ }, (0, _platformFeatureFlags.fg)('platform-editor-plugin-card-icon-migration') ? (0, _react2.jsx)(_chevronDown2.default, {
101
+ label: intl.formatMessage(_messages.cardMessages.editDropdownTriggerTitle)
102
+ }) : (0, _react2.jsx)(_chevronDown.default, {
99
103
  label: intl.formatMessage(_messages.cardMessages.editDropdownTriggerTitle)
100
104
  })),
101
105
  onClick: toggleOpen,
@@ -14,8 +14,10 @@ var _messages = require("@atlaskit/editor-common/messages");
14
14
  var _ui = require("@atlaskit/editor-common/ui");
15
15
  var _uiMenu = require("@atlaskit/editor-common/ui-menu");
16
16
  var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
17
+ var _chevronDown2 = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
17
18
  var _linkProvider = require("@atlaskit/link-provider");
18
19
  var _menu = require("@atlaskit/menu");
20
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
19
21
  var _primitives = require("@atlaskit/primitives");
20
22
  var _utils = require("../../pm-plugins/utils");
21
23
  var _editDatasourceAction = require("../editDatasourceAction");
@@ -126,7 +128,9 @@ var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext
126
128
  testId: "edit-dropdown-trigger",
127
129
  iconAfter: (0, _react2.jsx)("span", {
128
130
  css: dropdownExpandContainer
129
- }, (0, _react2.jsx)(_chevronDown.default, {
131
+ }, (0, _platformFeatureFlags.fg)('platform-editor-plugin-card-icon-migration') ? (0, _react2.jsx)(_chevronDown2.default, {
132
+ label: intl.formatMessage(_messages.cardMessages.editDropdownTriggerTitle)
133
+ }) : (0, _react2.jsx)(_chevronDown.default, {
130
134
  label: intl.formatMessage(_messages.cardMessages.editDropdownTriggerTitle)
131
135
  })),
132
136
  onClick: toggleOpen,
@@ -16,7 +16,9 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
16
16
  var _reactIntlNext = require("react-intl-next");
17
17
  var _messages = require("@atlaskit/editor-common/messages");
18
18
  var _whitespace = require("@atlaskit/editor-common/whitespace");
19
+ var _customizePreferences = _interopRequireDefault(require("@atlaskit/icon/core/migration/customize--preferences"));
19
20
  var _preferences = _interopRequireDefault(require("@atlaskit/icon/glyph/preferences"));
21
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
20
22
  var _colors = require("@atlaskit/theme/colors");
21
23
  var _utils = require("./utils");
22
24
  var _excluded = ["children", "isSelected", "isVisible", "testId", "url"];
@@ -258,7 +260,11 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
258
260
  className: ICON_AND_LABEL_CLASSNAME
259
261
  }, (0, _react2.jsx)("span", {
260
262
  css: iconStyles
261
- }, (0, _react2.jsx)(_preferences.default, {
263
+ }, (0, _platformFeatureFlags.fg)('platform-editor-plugin-card-icon-migration') ? (0, _react2.jsx)(_customizePreferences.default, {
264
+ label: label,
265
+ LEGACY_size: iconSize.current,
266
+ testId: "".concat(testId, "-icon")
267
+ }) : (0, _react2.jsx)(_preferences.default, {
262
268
  label: label,
263
269
  size: iconSize.current,
264
270
  testId: "".concat(testId, "-icon")
@@ -13,9 +13,12 @@ var _hooks = require("@atlaskit/editor-common/hooks");
13
13
  var _ui = require("@atlaskit/editor-common/ui");
14
14
  var _uiMenu = require("@atlaskit/editor-common/ui-menu");
15
15
  var _utils = require("@atlaskit/editor-common/utils");
16
+ var _growHorizontalEditorExpand = _interopRequireDefault(require("@atlaskit/icon/core/migration/grow-horizontal--editor-expand"));
17
+ var _shrinkHorizontalEditorCollapse = _interopRequireDefault(require("@atlaskit/icon/core/migration/shrink-horizontal--editor-collapse"));
16
18
  var _collapse = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/collapse"));
17
19
  var _expand = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/expand"));
18
20
  var _linkingCommon = require("@atlaskit/linking-common");
21
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
19
22
  var _colors = require("@atlaskit/theme/colors");
20
23
  var _actions = require("../../pm-plugins/actions");
21
24
  var _utils2 = require("../../pm-plugins/utils");
@@ -55,6 +58,16 @@ var LayoutButton = exports.LayoutButton = function LayoutButton(_ref) {
55
58
  if (!targetElement) {
56
59
  return null;
57
60
  }
61
+ var collapseIcon = (0, _platformFeatureFlags.fg)('platform-editor-plugin-card-icon-migration') ? (0, _react2.jsx)(_shrinkHorizontalEditorCollapse.default, {
62
+ label: title
63
+ }) : (0, _react2.jsx)(_collapse.default, {
64
+ label: title
65
+ });
66
+ var expandIcon = (0, _platformFeatureFlags.fg)('platform-editor-plugin-card-icon-migration') ? (0, _react2.jsx)(_growHorizontalEditorExpand.default, {
67
+ label: title
68
+ }) : (0, _react2.jsx)(_expand.default, {
69
+ label: title
70
+ });
58
71
  return (0, _react2.jsx)(_ui.Popup, {
59
72
  mountTo: mountPoint,
60
73
  boundariesElement: boundariesElement,
@@ -70,11 +83,7 @@ var LayoutButton = exports.LayoutButton = function LayoutButton(_ref) {
70
83
  css: toolbarButtonWrapperStyles,
71
84
  title: title,
72
85
  onClick: handleClick,
73
- iconBefore: layout === 'full-width' ? (0, _react2.jsx)(_collapse.default, {
74
- label: title
75
- }) : (0, _react2.jsx)(_expand.default, {
76
- label: title
77
- })
86
+ iconBefore: layout === 'full-width' ? collapseIcon : expandIcon
78
87
  }));
79
88
  };
80
89
  var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
@@ -29,6 +29,7 @@ var _settings2 = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/set
29
29
  var _unlink = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/unlink"));
30
30
  var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
31
31
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
32
+ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
32
33
  var _doc = require("../pm-plugins/doc");
33
34
  var _pluginKey = require("../pm-plugins/plugin-key");
34
35
  var _utils3 = require("../pm-plugins/utils");
@@ -288,12 +289,13 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
288
289
  testId: 'inline-card-toolbar-comment-button',
289
290
  iconFallback: _comment2.default,
290
291
  title: intl.formatMessage(_messages.annotationMessages.createComment),
292
+ showTitle: (0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? undefined : true,
291
293
  onClick: onCommentButtonClick,
292
294
  disabled: (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.connectivity) === null || _pluginInjectionApi$c === void 0 || (_pluginInjectionApi$c = _pluginInjectionApi$c.sharedState) === null || _pluginInjectionApi$c === void 0 || (_pluginInjectionApi$c = _pluginInjectionApi$c.currentState()) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.mode) === 'offline'
293
295
  }, {
294
296
  type: 'separator'
295
297
  }] : [];
296
- var toolbarItems = [].concat(editItems, commentItems, [{
298
+ var toolbarItems = (0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? [].concat(editItems, commentItems, [{
297
299
  id: 'editor.link.openLink',
298
300
  type: 'button',
299
301
  icon: _linkExternal.default,
@@ -328,7 +330,44 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
328
330
  onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
329
331
  title: intl.formatMessage(_messages.default.remove),
330
332
  onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
331
- }]);
333
+ }]) : [].concat(editItems, (0, _toConsumableArray2.default)(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink), {
334
+ type: 'separator'
335
+ }, {
336
+ id: 'editor.link.delete',
337
+ focusEditoronEnter: true,
338
+ type: 'button',
339
+ appearance: 'danger',
340
+ icon: _delete.default,
341
+ iconFallback: _remove.default,
342
+ onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
343
+ onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
344
+ onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
345
+ onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
346
+ title: intl.formatMessage(_messages.default.remove),
347
+ onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
348
+ }, {
349
+ type: 'separator'
350
+ }, {
351
+ id: 'editor.link.openLink',
352
+ type: 'button',
353
+ icon: _linkExternal.default,
354
+ iconFallback: _shortcut.default,
355
+ metadata: metadata,
356
+ className: 'hyperlink-open-link',
357
+ title: intl.formatMessage(_messages.linkMessages.openLink),
358
+ onClick: visitCardLink(editorAnalyticsApi)
359
+ }, {
360
+ type: 'separator'
361
+ }, {
362
+ type: 'copy-button',
363
+ items: [{
364
+ state: state,
365
+ formatMessage: intl.formatMessage,
366
+ nodeType: node.type
367
+ }]
368
+ }], (0, _toConsumableArray2.default)(commentItems.length > 1 ? [{
369
+ type: 'separator'
370
+ }, commentItems[0]] : commentItems));
332
371
  if (currentAppearance === 'embed') {
333
372
  var _pluginInjectionApi$a4;
334
373
  var alignmentOptions = buildAlignmentOptions(state, intl, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions, cardOptions);
@@ -509,7 +548,8 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
509
548
  focusEditoronEnter: true,
510
549
  type: 'button',
511
550
  appearance: 'danger',
512
- icon: _remove.default,
551
+ icon: _delete.default,
552
+ iconFallback: _remove.default,
513
553
  onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
514
554
  onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
515
555
  onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
@@ -1,6 +1,8 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import React from 'react';
3
3
  import Icon from '@atlaskit/icon';
4
+ import SmartLinkListIcon from '@atlaskit/icon/core/smart-link-list';
5
+ import { fg } from '@atlaskit/platform-feature-flags';
4
6
  import { Flex, xcss } from '@atlaskit/primitives';
5
7
  const IconDatasourceGlyph = props => {
6
8
  return /*#__PURE__*/React.createElement("svg", _extends({
@@ -28,7 +30,10 @@ const wrapperStyles = xcss({
28
30
  export const DatasourceIcon = props => {
29
31
  return /*#__PURE__*/React.createElement(Flex, {
30
32
  xcss: wrapperStyles
31
- }, /*#__PURE__*/React.createElement(Icon, _extends({
33
+ }, fg('platform-editor-plugin-card-icon-migration') ? /*#__PURE__*/React.createElement(SmartLinkListIcon, {
34
+ LEGACY_fallbackIcon: IconDatasourceGlyph,
35
+ label: props === null || props === void 0 ? void 0 : props.label
36
+ }) : /*#__PURE__*/React.createElement(Icon, _extends({
32
37
  glyph: IconDatasourceGlyph
33
38
  // Ignored via go/ees005
34
39
  // eslint-disable-next-line react/jsx-props-no-spreading
@@ -11,7 +11,9 @@ import { linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-
11
11
  import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
12
12
  import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
13
13
  import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
14
+ import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
14
15
  import { ButtonItem } from '@atlaskit/menu';
16
+ import { fg } from '@atlaskit/platform-feature-flags';
15
17
  import { Flex } from '@atlaskit/primitives';
16
18
  import { focusEditorView } from '../../pm-plugins/utils';
17
19
  import { editDatasource } from '../editDatasourceAction';
@@ -78,7 +80,9 @@ const EditToolbarButtonPresentation = ({
78
80
  testId: "edit-dropdown-trigger",
79
81
  iconAfter: jsx("span", {
80
82
  css: dropdownExpandContainer
81
- }, jsx(ExpandIcon, {
83
+ }, fg('platform-editor-plugin-card-icon-migration') ? jsx(ChevronDownIcon, {
84
+ label: intl.formatMessage(messages.editDropdownTriggerTitle)
85
+ }) : jsx(ExpandIcon, {
82
86
  label: intl.formatMessage(messages.editDropdownTriggerTitle)
83
87
  })),
84
88
  onClick: toggleOpen,
@@ -11,8 +11,10 @@ import { linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-
11
11
  import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
12
12
  import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
13
13
  import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
14
+ import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
14
15
  import { useSmartLinkContext } from '@atlaskit/link-provider';
15
16
  import { ButtonItem } from '@atlaskit/menu';
17
+ import { fg } from '@atlaskit/platform-feature-flags';
16
18
  import { Flex } from '@atlaskit/primitives';
17
19
  import { focusEditorView, isDatasourceConfigEditable } from '../../pm-plugins/utils';
18
20
  import { editDatasource } from '../editDatasourceAction';
@@ -111,7 +113,9 @@ const EditToolbarButtonWithCardContext = props => {
111
113
  testId: "edit-dropdown-trigger",
112
114
  iconAfter: jsx("span", {
113
115
  css: dropdownExpandContainer
114
- }, jsx(ExpandIcon, {
116
+ }, fg('platform-editor-plugin-card-icon-migration') ? jsx(ChevronDownIcon, {
117
+ label: intl.formatMessage(messages.editDropdownTriggerTitle)
118
+ }) : jsx(ExpandIcon, {
115
119
  label: intl.formatMessage(messages.editDropdownTriggerTitle)
116
120
  })),
117
121
  onClick: toggleOpen,
@@ -13,7 +13,9 @@ import debounce from 'lodash/debounce';
13
13
  import { useIntl } from 'react-intl-next';
14
14
  import { cardMessages as messages } from '@atlaskit/editor-common/messages';
15
15
  import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/whitespace';
16
+ import CustomizeIcon from '@atlaskit/icon/core/migration/customize--preferences';
16
17
  import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
18
+ import { fg } from '@atlaskit/platform-feature-flags';
17
19
  import { B100, N0, N700 } from '@atlaskit/theme/colors';
18
20
  import { getChildElement, getIconSize, getInlineCardAvailableWidth, getOverlayWidths, isOneLine } from './utils';
19
21
  const DEBOUNCE_IN_MS = 5;
@@ -238,7 +240,11 @@ const InlineCardOverlay = ({
238
240
  className: ICON_AND_LABEL_CLASSNAME
239
241
  }, jsx("span", {
240
242
  css: iconStyles
241
- }, jsx(PreferencesIcon, {
243
+ }, fg('platform-editor-plugin-card-icon-migration') ? jsx(CustomizeIcon, {
244
+ label: label,
245
+ LEGACY_size: iconSize.current,
246
+ testId: `${testId}-icon`
247
+ }) : jsx(PreferencesIcon, {
242
248
  label: label,
243
249
  size: iconSize.current,
244
250
  testId: `${testId}-icon`
@@ -11,9 +11,12 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
11
11
  import { Popup } from '@atlaskit/editor-common/ui';
12
12
  import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
13
13
  import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
14
+ import GrowHorizontalIcon from '@atlaskit/icon/core/migration/grow-horizontal--editor-expand';
15
+ import ShrinkHorizontalIcon from '@atlaskit/icon/core/migration/shrink-horizontal--editor-collapse';
14
16
  import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
15
17
  import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
16
18
  import { DATASOURCE_DEFAULT_LAYOUT } from '@atlaskit/linking-common';
19
+ import { fg } from '@atlaskit/platform-feature-flags';
17
20
  import { B300, N20A, N300 } from '@atlaskit/theme/colors';
18
21
  import { setCardLayout } from '../../pm-plugins/actions';
19
22
  import { isDatasourceNode } from '../../pm-plugins/utils';
@@ -49,6 +52,16 @@ export const LayoutButton = ({
49
52
  if (!targetElement) {
50
53
  return null;
51
54
  }
55
+ const collapseIcon = fg('platform-editor-plugin-card-icon-migration') ? jsx(ShrinkHorizontalIcon, {
56
+ label: title
57
+ }) : jsx(CollapseIcon, {
58
+ label: title
59
+ });
60
+ const expandIcon = fg('platform-editor-plugin-card-icon-migration') ? jsx(GrowHorizontalIcon, {
61
+ label: title
62
+ }) : jsx(ExpandIcon, {
63
+ label: title
64
+ });
52
65
  return jsx(Popup, {
53
66
  mountTo: mountPoint,
54
67
  boundariesElement: boundariesElement,
@@ -64,11 +77,7 @@ export const LayoutButton = ({
64
77
  css: toolbarButtonWrapperStyles,
65
78
  title: title,
66
79
  onClick: handleClick,
67
- iconBefore: layout === 'full-width' ? jsx(CollapseIcon, {
68
- label: title
69
- }) : jsx(ExpandIcon, {
70
- label: title
71
- })
80
+ iconBefore: layout === 'full-width' ? collapseIcon : expandIcon
72
81
  }));
73
82
  };
74
83
  const LayoutButtonWrapper = ({
@@ -19,6 +19,7 @@ import CogIcon from '@atlaskit/icon/glyph/editor/settings';
19
19
  import UnlinkIcon from '@atlaskit/icon/glyph/editor/unlink';
20
20
  import OpenIcon from '@atlaskit/icon/glyph/shortcut';
21
21
  import { fg } from '@atlaskit/platform-feature-flags';
22
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
22
23
  import { changeSelectedCardToText } from '../pm-plugins/doc';
23
24
  import { pluginKey } from '../pm-plugins/plugin-key';
24
25
  import { appearanceForNodeType, displayInfoForCard, findCardInfo, isDatasourceNode, titleUrlPairFromNode } from '../pm-plugins/utils';
@@ -280,12 +281,13 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
280
281
  testId: 'inline-card-toolbar-comment-button',
281
282
  iconFallback: LegacyCommentIcon,
282
283
  title: intl.formatMessage(annotationMessages.createComment),
284
+ showTitle: editorExperiment('platform_editor_controls', 'control') ? undefined : true,
283
285
  onClick: onCommentButtonClick,
284
286
  disabled: (pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.connectivity) === null || _pluginInjectionApi$c === void 0 ? void 0 : (_pluginInjectionApi$c2 = _pluginInjectionApi$c.sharedState) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : (_pluginInjectionApi$c3 = _pluginInjectionApi$c2.currentState()) === null || _pluginInjectionApi$c3 === void 0 ? void 0 : _pluginInjectionApi$c3.mode) === 'offline'
285
287
  }, {
286
288
  type: 'separator'
287
289
  }] : [];
288
- const toolbarItems = [...editItems, ...commentItems, {
290
+ const toolbarItems = editorExperiment('platform_editor_controls', 'control') ? [...editItems, ...commentItems, {
289
291
  id: 'editor.link.openLink',
290
292
  type: 'button',
291
293
  icon: LinkExternalIcon,
@@ -320,7 +322,44 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
320
322
  onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
321
323
  title: intl.formatMessage(commonMessages.remove),
322
324
  onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
323
- }];
325
+ }] : [...editItems, ...getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi), getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink), {
326
+ type: 'separator'
327
+ }, {
328
+ id: 'editor.link.delete',
329
+ focusEditoronEnter: true,
330
+ type: 'button',
331
+ appearance: 'danger',
332
+ icon: DeleteIcon,
333
+ iconFallback: RemoveIcon,
334
+ onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
335
+ onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
336
+ onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
337
+ onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
338
+ title: intl.formatMessage(commonMessages.remove),
339
+ onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
340
+ }, {
341
+ type: 'separator'
342
+ }, {
343
+ id: 'editor.link.openLink',
344
+ type: 'button',
345
+ icon: LinkExternalIcon,
346
+ iconFallback: OpenIcon,
347
+ metadata: metadata,
348
+ className: 'hyperlink-open-link',
349
+ title: intl.formatMessage(linkMessages.openLink),
350
+ onClick: visitCardLink(editorAnalyticsApi)
351
+ }, {
352
+ type: 'separator'
353
+ }, {
354
+ type: 'copy-button',
355
+ items: [{
356
+ state,
357
+ formatMessage: intl.formatMessage,
358
+ nodeType: node.type
359
+ }]
360
+ }, ...(commentItems.length > 1 ? [{
361
+ type: 'separator'
362
+ }, commentItems[0]] : commentItems)];
324
363
  if (currentAppearance === 'embed') {
325
364
  var _pluginInjectionApi$a5;
326
365
  const alignmentOptions = buildAlignmentOptions(state, intl, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions, cardOptions);
@@ -498,7 +537,8 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
498
537
  focusEditoronEnter: true,
499
538
  type: 'button',
500
539
  appearance: 'danger',
501
- icon: RemoveIcon,
540
+ icon: DeleteIcon,
541
+ iconFallback: RemoveIcon,
502
542
  onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
503
543
  onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
504
544
  onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
@@ -1,6 +1,8 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import React from 'react';
3
3
  import Icon from '@atlaskit/icon';
4
+ import SmartLinkListIcon from '@atlaskit/icon/core/smart-link-list';
5
+ import { fg } from '@atlaskit/platform-feature-flags';
4
6
  import { Flex, xcss } from '@atlaskit/primitives';
5
7
  var IconDatasourceGlyph = function IconDatasourceGlyph(props) {
6
8
  return /*#__PURE__*/React.createElement("svg", _extends({
@@ -28,7 +30,10 @@ var wrapperStyles = xcss({
28
30
  export var DatasourceIcon = function DatasourceIcon(props) {
29
31
  return /*#__PURE__*/React.createElement(Flex, {
30
32
  xcss: wrapperStyles
31
- }, /*#__PURE__*/React.createElement(Icon, _extends({
33
+ }, fg('platform-editor-plugin-card-icon-migration') ? /*#__PURE__*/React.createElement(SmartLinkListIcon, {
34
+ LEGACY_fallbackIcon: IconDatasourceGlyph,
35
+ label: props === null || props === void 0 ? void 0 : props.label
36
+ }) : /*#__PURE__*/React.createElement(Icon, _extends({
32
37
  glyph: IconDatasourceGlyph
33
38
  // Ignored via go/ees005
34
39
  // eslint-disable-next-line react/jsx-props-no-spreading
@@ -12,7 +12,9 @@ import { linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-
12
12
  import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
13
13
  import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
14
14
  import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
15
+ import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
15
16
  import { ButtonItem } from '@atlaskit/menu';
17
+ import { fg } from '@atlaskit/platform-feature-flags';
16
18
  import { Flex } from '@atlaskit/primitives';
17
19
  import { focusEditorView } from '../../pm-plugins/utils';
18
20
  import { editDatasource } from '../editDatasourceAction';
@@ -87,7 +89,9 @@ var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref)
87
89
  testId: "edit-dropdown-trigger",
88
90
  iconAfter: jsx("span", {
89
91
  css: dropdownExpandContainer
90
- }, jsx(ExpandIcon, {
92
+ }, fg('platform-editor-plugin-card-icon-migration') ? jsx(ChevronDownIcon, {
93
+ label: intl.formatMessage(messages.editDropdownTriggerTitle)
94
+ }) : jsx(ExpandIcon, {
91
95
  label: intl.formatMessage(messages.editDropdownTriggerTitle)
92
96
  })),
93
97
  onClick: toggleOpen,
@@ -14,8 +14,10 @@ import { linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-
14
14
  import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
15
15
  import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
16
16
  import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
17
+ import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
17
18
  import { useSmartLinkContext } from '@atlaskit/link-provider';
18
19
  import { ButtonItem } from '@atlaskit/menu';
20
+ import { fg } from '@atlaskit/platform-feature-flags';
19
21
  import { Flex } from '@atlaskit/primitives';
20
22
  import { focusEditorView, isDatasourceConfigEditable } from '../../pm-plugins/utils';
21
23
  import { editDatasource } from '../editDatasourceAction';
@@ -120,7 +122,9 @@ var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext
120
122
  testId: "edit-dropdown-trigger",
121
123
  iconAfter: jsx("span", {
122
124
  css: dropdownExpandContainer
123
- }, jsx(ExpandIcon, {
125
+ }, fg('platform-editor-plugin-card-icon-migration') ? jsx(ChevronDownIcon, {
126
+ label: intl.formatMessage(messages.editDropdownTriggerTitle)
127
+ }) : jsx(ExpandIcon, {
124
128
  label: intl.formatMessage(messages.editDropdownTriggerTitle)
125
129
  })),
126
130
  onClick: toggleOpen,
@@ -17,7 +17,9 @@ import debounce from 'lodash/debounce';
17
17
  import { useIntl } from 'react-intl-next';
18
18
  import { cardMessages as messages } from '@atlaskit/editor-common/messages';
19
19
  import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/whitespace';
20
+ import CustomizeIcon from '@atlaskit/icon/core/migration/customize--preferences';
20
21
  import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
22
+ import { fg } from '@atlaskit/platform-feature-flags';
21
23
  import { B100, N0, N700 } from '@atlaskit/theme/colors';
22
24
  import { getChildElement, getIconSize, getInlineCardAvailableWidth, getOverlayWidths, isOneLine } from './utils';
23
25
  var DEBOUNCE_IN_MS = 5;
@@ -249,7 +251,11 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
249
251
  className: ICON_AND_LABEL_CLASSNAME
250
252
  }, jsx("span", {
251
253
  css: iconStyles
252
- }, jsx(PreferencesIcon, {
254
+ }, fg('platform-editor-plugin-card-icon-migration') ? jsx(CustomizeIcon, {
255
+ label: label,
256
+ LEGACY_size: iconSize.current,
257
+ testId: "".concat(testId, "-icon")
258
+ }) : jsx(PreferencesIcon, {
253
259
  label: label,
254
260
  size: iconSize.current,
255
261
  testId: "".concat(testId, "-icon")
@@ -14,9 +14,12 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
14
14
  import { Popup } from '@atlaskit/editor-common/ui';
15
15
  import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
16
16
  import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
17
+ import GrowHorizontalIcon from '@atlaskit/icon/core/migration/grow-horizontal--editor-expand';
18
+ import ShrinkHorizontalIcon from '@atlaskit/icon/core/migration/shrink-horizontal--editor-collapse';
17
19
  import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
18
20
  import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
19
21
  import { DATASOURCE_DEFAULT_LAYOUT } from '@atlaskit/linking-common';
22
+ import { fg } from '@atlaskit/platform-feature-flags';
20
23
  import { B300, N20A, N300 } from '@atlaskit/theme/colors';
21
24
  import { setCardLayout } from '../../pm-plugins/actions';
22
25
  import { isDatasourceNode } from '../../pm-plugins/utils';
@@ -51,6 +54,16 @@ export var LayoutButton = function LayoutButton(_ref) {
51
54
  if (!targetElement) {
52
55
  return null;
53
56
  }
57
+ var collapseIcon = fg('platform-editor-plugin-card-icon-migration') ? jsx(ShrinkHorizontalIcon, {
58
+ label: title
59
+ }) : jsx(CollapseIcon, {
60
+ label: title
61
+ });
62
+ var expandIcon = fg('platform-editor-plugin-card-icon-migration') ? jsx(GrowHorizontalIcon, {
63
+ label: title
64
+ }) : jsx(ExpandIcon, {
65
+ label: title
66
+ });
54
67
  return jsx(Popup, {
55
68
  mountTo: mountPoint,
56
69
  boundariesElement: boundariesElement,
@@ -66,11 +79,7 @@ export var LayoutButton = function LayoutButton(_ref) {
66
79
  css: toolbarButtonWrapperStyles,
67
80
  title: title,
68
81
  onClick: handleClick,
69
- iconBefore: layout === 'full-width' ? jsx(CollapseIcon, {
70
- label: title
71
- }) : jsx(ExpandIcon, {
72
- label: title
73
- })
82
+ iconBefore: layout === 'full-width' ? collapseIcon : expandIcon
74
83
  }));
75
84
  };
76
85
  var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
@@ -23,6 +23,7 @@ import CogIcon from '@atlaskit/icon/glyph/editor/settings';
23
23
  import UnlinkIcon from '@atlaskit/icon/glyph/editor/unlink';
24
24
  import OpenIcon from '@atlaskit/icon/glyph/shortcut';
25
25
  import { fg } from '@atlaskit/platform-feature-flags';
26
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
26
27
  import { changeSelectedCardToText } from '../pm-plugins/doc';
27
28
  import { pluginKey } from '../pm-plugins/plugin-key';
28
29
  import { appearanceForNodeType, displayInfoForCard, findCardInfo, isDatasourceNode, titleUrlPairFromNode } from '../pm-plugins/utils';
@@ -278,12 +279,13 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
278
279
  testId: 'inline-card-toolbar-comment-button',
279
280
  iconFallback: LegacyCommentIcon,
280
281
  title: intl.formatMessage(annotationMessages.createComment),
282
+ showTitle: editorExperiment('platform_editor_controls', 'control') ? undefined : true,
281
283
  onClick: onCommentButtonClick,
282
284
  disabled: (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.connectivity) === null || _pluginInjectionApi$c === void 0 || (_pluginInjectionApi$c = _pluginInjectionApi$c.sharedState) === null || _pluginInjectionApi$c === void 0 || (_pluginInjectionApi$c = _pluginInjectionApi$c.currentState()) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.mode) === 'offline'
283
285
  }, {
284
286
  type: 'separator'
285
287
  }] : [];
286
- var toolbarItems = [].concat(editItems, commentItems, [{
288
+ var toolbarItems = editorExperiment('platform_editor_controls', 'control') ? [].concat(editItems, commentItems, [{
287
289
  id: 'editor.link.openLink',
288
290
  type: 'button',
289
291
  icon: LinkExternalIcon,
@@ -318,7 +320,44 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
318
320
  onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
319
321
  title: intl.formatMessage(commonMessages.remove),
320
322
  onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
321
- }]);
323
+ }]) : [].concat(editItems, _toConsumableArray(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink), {
324
+ type: 'separator'
325
+ }, {
326
+ id: 'editor.link.delete',
327
+ focusEditoronEnter: true,
328
+ type: 'button',
329
+ appearance: 'danger',
330
+ icon: DeleteIcon,
331
+ iconFallback: RemoveIcon,
332
+ onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
333
+ onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
334
+ onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
335
+ onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
336
+ title: intl.formatMessage(commonMessages.remove),
337
+ onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
338
+ }, {
339
+ type: 'separator'
340
+ }, {
341
+ id: 'editor.link.openLink',
342
+ type: 'button',
343
+ icon: LinkExternalIcon,
344
+ iconFallback: OpenIcon,
345
+ metadata: metadata,
346
+ className: 'hyperlink-open-link',
347
+ title: intl.formatMessage(linkMessages.openLink),
348
+ onClick: visitCardLink(editorAnalyticsApi)
349
+ }, {
350
+ type: 'separator'
351
+ }, {
352
+ type: 'copy-button',
353
+ items: [{
354
+ state: state,
355
+ formatMessage: intl.formatMessage,
356
+ nodeType: node.type
357
+ }]
358
+ }], _toConsumableArray(commentItems.length > 1 ? [{
359
+ type: 'separator'
360
+ }, commentItems[0]] : commentItems));
322
361
  if (currentAppearance === 'embed') {
323
362
  var _pluginInjectionApi$a4;
324
363
  var alignmentOptions = buildAlignmentOptions(state, intl, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions, cardOptions);
@@ -499,7 +538,8 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
499
538
  focusEditoronEnter: true,
500
539
  type: 'button',
501
540
  appearance: 'danger',
502
- icon: RemoveIcon,
541
+ icon: DeleteIcon,
542
+ iconFallback: RemoveIcon,
503
543
  onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
504
544
  onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
505
545
  onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-card",
3
- "version": "5.0.1",
3
+ "version": "5.0.3",
4
4
  "description": "Card plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -33,8 +33,9 @@
33
33
  "dependencies": {
34
34
  "@atlaskit/adf-schema": "^47.2.1",
35
35
  "@atlaskit/analytics-next": "^11.0.0",
36
+ "@atlaskit/button": "^21.1.0",
36
37
  "@atlaskit/custom-steps": "^0.10.0",
37
- "@atlaskit/editor-common": "^100.1.0",
38
+ "@atlaskit/editor-common": "^100.2.0",
38
39
  "@atlaskit/editor-plugin-analytics": "^2.0.0",
39
40
  "@atlaskit/editor-plugin-base": "^2.2.0",
40
41
  "@atlaskit/editor-plugin-connectivity": "^2.0.0",
@@ -48,19 +49,19 @@
48
49
  "@atlaskit/editor-prosemirror": "7.0.0",
49
50
  "@atlaskit/editor-shared-styles": "^3.3.0",
50
51
  "@atlaskit/frontend-utilities": "^3.0.0",
51
- "@atlaskit/icon": "^24.0.0",
52
+ "@atlaskit/icon": "^24.1.0",
52
53
  "@atlaskit/link-analytics": "^9.0.0",
53
54
  "@atlaskit/link-client-extension": "^4.0.0",
54
55
  "@atlaskit/link-datasource": "^3.21.0",
55
56
  "@atlaskit/linking-common": "^8.0.0",
56
57
  "@atlaskit/linking-types": "^9.6.0",
57
- "@atlaskit/menu": "3.0.0",
58
+ "@atlaskit/menu": "3.1.0",
58
59
  "@atlaskit/platform-feature-flags": "^1.1.0",
59
- "@atlaskit/primitives": "^14.0.0",
60
- "@atlaskit/smart-card": "^35.0.0",
60
+ "@atlaskit/primitives": "^14.1.0",
61
+ "@atlaskit/smart-card": "^35.1.0",
61
62
  "@atlaskit/theme": "^17.0.0",
62
- "@atlaskit/tmp-editor-statsig": "^3.1.0",
63
- "@atlaskit/tokens": "^4.1.0",
63
+ "@atlaskit/tmp-editor-statsig": "^3.2.0",
64
+ "@atlaskit/tokens": "^4.2.0",
64
65
  "@babel/runtime": "^7.0.0",
65
66
  "@emotion/react": "^11.7.1",
66
67
  "lodash": "^4.17.21",
@@ -136,6 +137,9 @@
136
137
  },
137
138
  "platform_fix_embedded_card_re-rendering": {
138
139
  "type": "boolean"
140
+ },
141
+ "platform-editor-plugin-card-icon-migration": {
142
+ "type": "boolean"
139
143
  }
140
144
  },
141
145
  "stricter": {