@atlaskit/editor-plugin-status 19.0.10 → 20.0.0

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.
Files changed (15) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/dist/cjs/ui/getSuggestedStatuses.js +6 -1
  3. package/dist/cjs/ui/quick-insert/StatusQuickInsertMenuItem.js +3 -1
  4. package/dist/cjs/ui/quick-insert/getStatusQuickInsertComponents.js +6 -1
  5. package/dist/cjs/ui/statusPicker.js +10 -8
  6. package/dist/es2019/ui/getSuggestedStatuses.js +6 -1
  7. package/dist/es2019/ui/quick-insert/StatusQuickInsertMenuItem.js +3 -1
  8. package/dist/es2019/ui/quick-insert/getStatusQuickInsertComponents.js +6 -1
  9. package/dist/es2019/ui/statusPicker.js +10 -7
  10. package/dist/esm/ui/getSuggestedStatuses.js +6 -1
  11. package/dist/esm/ui/quick-insert/StatusQuickInsertMenuItem.js +3 -1
  12. package/dist/esm/ui/quick-insert/getStatusQuickInsertComponents.js +6 -1
  13. package/dist/esm/ui/statusPicker.js +10 -8
  14. package/dist/types/ui/quick-insert/StatusQuickInsertMenuItem.d.ts +3 -1
  15. package/package.json +14 -11
package/CHANGELOG.md CHANGED
@@ -1,5 +1,41 @@
1
1
  # @atlaskit/editor-plugin-status
2
2
 
3
+ ## 20.0.0
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 19.0.12
10
+
11
+ ### Patch Changes
12
+
13
+ - [`01c0f8f495971`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/01c0f8f495971) -
14
+ Fix status suggestion popup showing duplicate entries when a legacy named color and its
15
+ equivalent-hue hex value (introduced by platform_editor_update_status_colors, e.g. green/#D3F1A7
16
+ or yellow/#FCE4A6) both appear in the document; suggestions now dedupe by resolved lozenge
17
+ appearance instead of the raw color attribute.
18
+ - Updated dependencies
19
+
20
+ ## 19.0.11
21
+
22
+ ### Patch Changes
23
+
24
+ - [`88fb7a8d4013a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/88fb7a8d4013a) -
25
+ [ux] Add optional light and dark preview URLs to slash-command menu items and pass theme-aware
26
+ previews to supported commands when the `platform_editor_slash_command` experiment is enabled.
27
+ - [`c91ed7eb6ae9f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c91ed7eb6ae9f) -
28
+ Pin the status picker colour palette above the scrolling suggestions. The native scrollbar can
29
+ then no longer narrow the swatch row and wrap it onto an extra row.
30
+
31
+ This sits behind `platform_editor_status_popup_suggestions_patch_2` for the six-colour palette.
32
+ The ten-colour palette takes it behind `platform_editor_update_status_colors`.
33
+
34
+ Adds a 4px row gap between the ten-colour palette's two swatch rows. Also stops a full-width
35
+ suggestion from extending past the last swatch.
36
+
37
+ - Updated dependencies
38
+
3
39
  ## 19.0.10
4
40
 
5
41
  ### Patch Changes
package/dist/cjs/ui/getSuggestedStatuses.js CHANGED
@@ -7,16 +7,21 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.getSuggestedStatuses = exports.MAX_SUGGESTED_STATUSES_OLD = exports.MAX_SUGGESTED_STATUSES = void 0;
8
8
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
9
9
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
+ var _statusColors = require("@atlaskit/status/status-colors");
10
11
  var _excluded = ["distance"];
11
12
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
12
13
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
13
14
  var MAX_SUGGESTED_STATUSES = exports.MAX_SUGGESTED_STATUSES = 20;
14
15
  // Remove when cleaning up `platform_editor_status_popup_suggestions_patch_1`.
15
16
  var MAX_SUGGESTED_STATUSES_OLD = exports.MAX_SUGGESTED_STATUSES_OLD = 7;
17
+
18
+ // `color` may be a legacy name or a hex value that render the same hue (e.g. `green` and
19
+ // `#D3F1A7` both resolve to `accent-lime`), so the key is built from the resolved appearance
20
+ // rather than the raw attribute value — otherwise both variants would surface as suggestions.
16
21
  var getStatusKey = function getStatusKey(_ref) {
17
22
  var color = _ref.color,
18
23
  text = _ref.text;
19
- return "".concat(color, ":").concat(text.trim().toLowerCase());
24
+ return "".concat((0, _statusColors.getLozengeAppearance)(color), ":").concat(text.trim().toLowerCase());
20
25
  };
21
26
  var getDisplayText = function getDisplayText(status, shouldUppercaseText) {
22
27
  return shouldUppercaseText && status.style !== 'mixedCase' ? status.text.toUpperCase() : status.text;
package/dist/cjs/ui/quick-insert/StatusQuickInsertMenuItem.js CHANGED
@@ -15,7 +15,8 @@ var _lozenge = _interopRequireDefault(require("@atlaskit/icon-lab/core/lozenge")
15
15
  var _actions = require("../../pm-plugins/actions");
16
16
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
17
17
  var StatusQuickInsertMenuItem = exports.StatusQuickInsertMenuItem = function StatusQuickInsertMenuItem(_ref) {
18
- var api = _ref.api;
18
+ var api = _ref.api,
19
+ previewImageUrls = _ref.previewImageUrls;
19
20
  var _useIntl = (0, _reactIntl.useIntl)(),
20
21
  formatMessage = _useIntl.formatMessage;
21
22
  var onSelect = (0, _react.useCallback)(function (_ref2) {
@@ -31,6 +32,7 @@ var StatusQuickInsertMenuItem = exports.StatusQuickInsertMenuItem = function Sta
31
32
  label: ""
32
33
  }),
33
34
  onSelect: onSelect,
35
+ previewImageUrls: previewImageUrls,
34
36
  title: formatMessage(_messages.toolbarInsertBlockMessages.status)
35
37
  });
36
38
  };
package/dist/cjs/ui/quick-insert/getStatusQuickInsertComponents.js CHANGED
@@ -11,6 +11,10 @@ var _createQuickInsertMatcher = require("@atlaskit/editor-common/quick-insert/cr
11
11
  var _keys = require("@atlaskit/editor-common/quick-insert/keys");
12
12
  var _rank = require("@atlaskit/editor-common/quick-insert/rank");
13
13
  var _StatusQuickInsertMenuItem = require("./StatusQuickInsertMenuItem");
14
+ var previewImageUrls = {
15
+ light: 'https://dam-cdn.atl.orangelogic.com/AssetLink/se7cdbko55l5f1b6o8wp26lr470420wy.png',
16
+ dark: 'https://dam-cdn.atl.orangelogic.com/AssetLink/7tnn52vck25nq56ornv4q55e065uhxyc.png'
17
+ };
14
18
  var getStatusQuickInsertComponents = exports.getStatusQuickInsertComponents = function getStatusQuickInsertComponents(_ref) {
15
19
  var api = _ref.api;
16
20
  return [{
@@ -31,7 +35,8 @@ var getStatusQuickInsertComponents = exports.getStatusQuickInsertComponents = fu
31
35
  }),
32
36
  component: function component() {
33
37
  return /*#__PURE__*/_react.default.createElement(_StatusQuickInsertMenuItem.StatusQuickInsertMenuItem, {
34
- api: api
38
+ api: api,
39
+ previewImageUrls: previewImageUrls
35
40
  });
36
41
  }
37
42
  }];
package/dist/cjs/ui/statusPicker.js CHANGED
@@ -79,8 +79,10 @@ var suggestedStatusesContainerStyles = (0, _react2.css)({
79
79
  padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-150, 12px)", " ", "var(--ds-space-050, 4px)")
80
80
  });
81
81
 
82
- // Fixed input plus capped scrolling color controls and suggestions.
82
+ // Fixed input plus capped scrolling color controls and suggestions. The ten-color picker is
83
+ // taller because it carries a second swatch row.
83
84
  var STATUS_PICKER_FIT_HEIGHT = 288;
85
+ var STATUS_PICKER_TEN_COLOR_FIT_HEIGHT = 292;
84
86
  // Seven suggestions fit below the color palette before the content starts scrolling.
85
87
  var MAX_SUGGESTIONS_WITHOUT_SCROLLBAR = 7;
86
88
  // ColorPalette: swatches per row * 32px slot + 16px inline margin.
@@ -97,9 +99,6 @@ var statusPickerWithScrollbarWidthStylesOld = (0, _react2.css)({
97
99
  // Reserve space for the native scrollbar without reducing the picker content width.
98
100
  width: "".concat(STATUS_PICKER_CONTENT_WIDTH + STATUS_PICKER_SCROLLBAR_WIDTH, "px")
99
101
  });
100
- var statusPickerWithScrollbarWidthStyles = (0, _react2.css)({
101
- width: "".concat(STATUS_PICKER_TEN_COLOR_CONTENT_WIDTH + STATUS_PICKER_SCROLLBAR_WIDTH, "px")
102
- });
103
102
 
104
103
  // When cleaning up `platform_editor_status_popup_suggestions_patch_1`, merge this into
105
104
  // `suggestedStatusesContainerStyles` and remove its conditional style array.
@@ -131,6 +130,9 @@ var suggestedStatusButtonWrapperStyles = (0, _react2.css)({
131
130
  borderStyle: 'solid',
132
131
  borderColor: 'transparent',
133
132
  borderRadius: "var(--ds-space-075, 6px)",
133
+ // Keeps the border and padding inside `maxWidth`, so a full-width suggestion ends level
134
+ // with the last swatch.
135
+ boxSizing: 'border-box',
134
136
  display: 'flex',
135
137
  marginLeft: "var(--ds-space-025, 2px)",
136
138
  maxWidth: '100%',
@@ -449,8 +451,7 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
449
451
  key: "renderWithSetOutsideClickTargetRef",
450
452
  value: function renderWithSetOutsideClickTargetRef(setOutsideClickTargetRef) {
451
453
  var _this3 = this,
452
- _suggestedStatuses$le,
453
- _suggestedStatuses$le2;
454
+ _suggestedStatuses$le;
454
455
  var _this$props = this.props,
455
456
  isNew = _this$props.isNew,
456
457
  focusStatusInput = _this$props.focusStatusInput,
@@ -498,7 +499,7 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
498
499
  api: api,
499
500
  userIntent: "statusPickerOpen"
500
501
  }, (0, _react2.jsx)("div", {
501
- css: [(0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? pickerContainerStylesTeam26 : pickerContainerStyles, suggestionsPatchEnabled && isUpdateStatusColorsEnabled ? statusPickerWidthStyles : undefined, suggestionsPatchEnabled && !isUpdateStatusColorsEnabled ? statusPickerWidthStylesOld : undefined, suggestionsPatchEnabled && isUpdateStatusColorsEnabled && ((_suggestedStatuses$le = suggestedStatuses === null || suggestedStatuses === void 0 ? void 0 : suggestedStatuses.length) !== null && _suggestedStatuses$le !== void 0 ? _suggestedStatuses$le : 0) > MAX_SUGGESTIONS_WITHOUT_SCROLLBAR ? statusPickerWithScrollbarWidthStyles : undefined, suggestionsPatchEnabled && !isUpdateStatusColorsEnabled && ((_suggestedStatuses$le2 = suggestedStatuses === null || suggestedStatuses === void 0 ? void 0 : suggestedStatuses.length) !== null && _suggestedStatuses$le2 !== void 0 ? _suggestedStatuses$le2 : 0) > MAX_SUGGESTIONS_WITHOUT_SCROLLBAR ? statusPickerWithScrollbarWidthStylesOld : undefined],
502
+ css: [(0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? pickerContainerStylesTeam26 : pickerContainerStyles, suggestionsPatchEnabled && isUpdateStatusColorsEnabled ? statusPickerWidthStyles : undefined, suggestionsPatchEnabled && !isUpdateStatusColorsEnabled ? statusPickerWidthStylesOld : undefined, suggestionsPatchEnabled && !(0, _fg.fg)('platform_editor_status_popup_suggestions_patch_2') && !isUpdateStatusColorsEnabled && ((_suggestedStatuses$le = suggestedStatuses === null || suggestedStatuses === void 0 ? void 0 : suggestedStatuses.length) !== null && _suggestedStatuses$le !== void 0 ? _suggestedStatuses$le : 0) > MAX_SUGGESTIONS_WITHOUT_SCROLLBAR ? statusPickerWithScrollbarWidthStylesOld : undefined],
502
503
  role: "none",
503
504
  ref: this.setRef(setOutsideClickTargetRef),
504
505
  onClick: this.handlePopupClick,
@@ -518,6 +519,7 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
518
519
  if (!(editorView !== null && editorView !== void 0 && editorView.editable)) {
519
520
  return null;
520
521
  }
522
+ var fitHeight = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_update_status_colors') ? STATUS_PICKER_TEN_COLOR_FIT_HEIGHT : STATUS_PICKER_FIT_HEIGHT;
521
523
  return target && (0, _react2.jsx)(PopupWithListeners, {
522
524
  ariaLabel: intl.formatMessage(_messages.statusMessages.statusEditorLabel),
523
525
  target: target
@@ -527,7 +529,7 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
527
529
  handleClickOutside: this.handleClickOutside,
528
530
  handleEscapeKeydown: this.handleEscapeKeydown,
529
531
  zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
530
- fitHeight: (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_status_popup_suggestions') && (0, _fg.fg)('platform_editor_status_popup_suggestions_patch_1') ? STATUS_PICKER_FIT_HEIGHT : 40,
532
+ fitHeight: (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_status_popup_suggestions') && (0, _fg.fg)('platform_editor_status_popup_suggestions_patch_1') ? fitHeight : 40,
531
533
  mountTo: mountTo,
532
534
  boundariesElement: boundariesElement,
533
535
  scrollableElement: scrollableElement,
package/dist/es2019/ui/getSuggestedStatuses.js CHANGED
@@ -1,10 +1,15 @@
1
+ import { getLozengeAppearance } from '@atlaskit/status/status-colors';
1
2
  export const MAX_SUGGESTED_STATUSES = 20;
2
3
  // Remove when cleaning up `platform_editor_status_popup_suggestions_patch_1`.
3
4
  export const MAX_SUGGESTED_STATUSES_OLD = 7;
5
+
6
+ // `color` may be a legacy name or a hex value that render the same hue (e.g. `green` and
7
+ // `#D3F1A7` both resolve to `accent-lime`), so the key is built from the resolved appearance
8
+ // rather than the raw attribute value — otherwise both variants would surface as suggestions.
4
9
  const getStatusKey = ({
5
10
  color,
6
11
  text
7
- }) => `${color}:${text.trim().toLowerCase()}`;
12
+ }) => `${getLozengeAppearance(color)}:${text.trim().toLowerCase()}`;
8
13
  const getDisplayText = (status, shouldUppercaseText) => shouldUppercaseText && status.style !== 'mixedCase' ? status.text.toUpperCase() : status.text;
9
14
  export const getSuggestedStatuses = ({
10
15
  currentPos,
package/dist/es2019/ui/quick-insert/StatusQuickInsertMenuItem.js CHANGED
@@ -6,7 +6,8 @@ import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-i
6
6
  import LozengeIcon from '@atlaskit/icon-lab/core/lozenge';
7
7
  import { insertStatus } from '../../pm-plugins/actions';
8
8
  export const StatusQuickInsertMenuItem = ({
9
- api
9
+ api,
10
+ previewImageUrls
10
11
  }) => {
11
12
  const {
12
13
  formatMessage
@@ -25,6 +26,7 @@ export const StatusQuickInsertMenuItem = ({
25
26
  label: ""
26
27
  }),
27
28
  onSelect: onSelect,
29
+ previewImageUrls: previewImageUrls,
28
30
  title: formatMessage(messages.status)
29
31
  });
30
32
  };
package/dist/es2019/ui/quick-insert/getStatusQuickInsertComponents.js CHANGED
@@ -4,6 +4,10 @@ import { createQuickInsertMatcher } from '@atlaskit/editor-common/quick-insert/c
4
4
  import { STATUS_MENU_ITEM, STRUCTURE_SECTION } from '@atlaskit/editor-common/quick-insert/keys';
5
5
  import { STRUCTURE_SECTION_RANK } from '@atlaskit/editor-common/quick-insert/rank';
6
6
  import { StatusQuickInsertMenuItem } from './StatusQuickInsertMenuItem';
7
+ const previewImageUrls = {
8
+ light: 'https://dam-cdn.atl.orangelogic.com/AssetLink/se7cdbko55l5f1b6o8wp26lr470420wy.png',
9
+ dark: 'https://dam-cdn.atl.orangelogic.com/AssetLink/7tnn52vck25nq56ornv4q55e065uhxyc.png'
10
+ };
7
11
  export const getStatusQuickInsertComponents = ({
8
12
  api
9
13
  }) => [{
@@ -22,6 +26,7 @@ export const getStatusQuickInsertComponents = ({
22
26
  title: formatMessage(messages.status)
23
27
  })),
24
28
  component: () => /*#__PURE__*/React.createElement(StatusQuickInsertMenuItem, {
25
- api: api
29
+ api: api,
30
+ previewImageUrls: previewImageUrls
26
31
  })
27
32
  }];
package/dist/es2019/ui/statusPicker.js CHANGED
@@ -69,8 +69,10 @@ const suggestedStatusesContainerStyles = css({
69
69
  padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-050, 4px)"}`
70
70
  });
71
71
 
72
- // Fixed input plus capped scrolling color controls and suggestions.
72
+ // Fixed input plus capped scrolling color controls and suggestions. The ten-color picker is
73
+ // taller because it carries a second swatch row.
73
74
  const STATUS_PICKER_FIT_HEIGHT = 288;
75
+ const STATUS_PICKER_TEN_COLOR_FIT_HEIGHT = 292;
74
76
  // Seven suggestions fit below the color palette before the content starts scrolling.
75
77
  const MAX_SUGGESTIONS_WITHOUT_SCROLLBAR = 7;
76
78
  // ColorPalette: swatches per row * 32px slot + 16px inline margin.
@@ -87,9 +89,6 @@ const statusPickerWithScrollbarWidthStylesOld = css({
87
89
  // Reserve space for the native scrollbar without reducing the picker content width.
88
90
  width: `${STATUS_PICKER_CONTENT_WIDTH + STATUS_PICKER_SCROLLBAR_WIDTH}px`
89
91
  });
90
- const statusPickerWithScrollbarWidthStyles = css({
91
- width: `${STATUS_PICKER_TEN_COLOR_CONTENT_WIDTH + STATUS_PICKER_SCROLLBAR_WIDTH}px`
92
- });
93
92
 
94
93
  // When cleaning up `platform_editor_status_popup_suggestions_patch_1`, merge this into
95
94
  // `suggestedStatusesContainerStyles` and remove its conditional style array.
@@ -121,6 +120,9 @@ const suggestedStatusButtonWrapperStyles = css({
121
120
  borderStyle: 'solid',
122
121
  borderColor: 'transparent',
123
122
  borderRadius: "var(--ds-space-075, 6px)",
123
+ // Keeps the border and padding inside `maxWidth`, so a full-width suggestion ends level
124
+ // with the last swatch.
125
+ boxSizing: 'border-box',
124
126
  display: 'flex',
125
127
  marginLeft: "var(--ds-space-025, 2px)",
126
128
  maxWidth: '100%',
@@ -421,7 +423,7 @@ class StatusPickerWithIntl extends React.Component {
421
423
  };
422
424
  }
423
425
  renderWithSetOutsideClickTargetRef(setOutsideClickTargetRef) {
424
- var _suggestedStatuses$le, _suggestedStatuses$le2;
426
+ var _suggestedStatuses$le;
425
427
  const {
426
428
  isNew,
427
429
  focusStatusInput,
@@ -467,7 +469,7 @@ class StatusPickerWithIntl extends React.Component {
467
469
  api: api,
468
470
  userIntent: "statusPickerOpen"
469
471
  }, jsx("div", {
470
- css: [fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? pickerContainerStylesTeam26 : pickerContainerStyles, suggestionsPatchEnabled && isUpdateStatusColorsEnabled ? statusPickerWidthStyles : undefined, suggestionsPatchEnabled && !isUpdateStatusColorsEnabled ? statusPickerWidthStylesOld : undefined, suggestionsPatchEnabled && isUpdateStatusColorsEnabled && ((_suggestedStatuses$le = suggestedStatuses === null || suggestedStatuses === void 0 ? void 0 : suggestedStatuses.length) !== null && _suggestedStatuses$le !== void 0 ? _suggestedStatuses$le : 0) > MAX_SUGGESTIONS_WITHOUT_SCROLLBAR ? statusPickerWithScrollbarWidthStyles : undefined, suggestionsPatchEnabled && !isUpdateStatusColorsEnabled && ((_suggestedStatuses$le2 = suggestedStatuses === null || suggestedStatuses === void 0 ? void 0 : suggestedStatuses.length) !== null && _suggestedStatuses$le2 !== void 0 ? _suggestedStatuses$le2 : 0) > MAX_SUGGESTIONS_WITHOUT_SCROLLBAR ? statusPickerWithScrollbarWidthStylesOld : undefined],
472
+ css: [fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? pickerContainerStylesTeam26 : pickerContainerStyles, suggestionsPatchEnabled && isUpdateStatusColorsEnabled ? statusPickerWidthStyles : undefined, suggestionsPatchEnabled && !isUpdateStatusColorsEnabled ? statusPickerWidthStylesOld : undefined, suggestionsPatchEnabled && !fg('platform_editor_status_popup_suggestions_patch_2') && !isUpdateStatusColorsEnabled && ((_suggestedStatuses$le = suggestedStatuses === null || suggestedStatuses === void 0 ? void 0 : suggestedStatuses.length) !== null && _suggestedStatuses$le !== void 0 ? _suggestedStatuses$le : 0) > MAX_SUGGESTIONS_WITHOUT_SCROLLBAR ? statusPickerWithScrollbarWidthStylesOld : undefined],
471
473
  role: "none",
472
474
  ref: this.setRef(setOutsideClickTargetRef),
473
475
  onClick: this.handlePopupClick,
@@ -486,6 +488,7 @@ class StatusPickerWithIntl extends React.Component {
486
488
  if (!(editorView !== null && editorView !== void 0 && editorView.editable)) {
487
489
  return null;
488
490
  }
491
+ const fitHeight = isExperimentEnabled('platform_editor_update_status_colors') ? STATUS_PICKER_TEN_COLOR_FIT_HEIGHT : STATUS_PICKER_FIT_HEIGHT;
489
492
  return target && jsx(PopupWithListeners, {
490
493
  ariaLabel: intl.formatMessage(messages.statusEditorLabel),
491
494
  target: target
@@ -495,7 +498,7 @@ class StatusPickerWithIntl extends React.Component {
495
498
  handleClickOutside: this.handleClickOutside,
496
499
  handleEscapeKeydown: this.handleEscapeKeydown,
497
500
  zIndex: akEditorFloatingDialogZIndex,
498
- fitHeight: isExperimentEnabled('platform_editor_status_popup_suggestions') && fg('platform_editor_status_popup_suggestions_patch_1') ? STATUS_PICKER_FIT_HEIGHT : 40,
501
+ fitHeight: isExperimentEnabled('platform_editor_status_popup_suggestions') && fg('platform_editor_status_popup_suggestions_patch_1') ? fitHeight : 40,
499
502
  mountTo: mountTo,
500
503
  boundariesElement: boundariesElement,
501
504
  scrollableElement: scrollableElement,
package/dist/esm/ui/getSuggestedStatuses.js CHANGED
@@ -3,13 +3,18 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  var _excluded = ["distance"];
4
4
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
5
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
6
+ import { getLozengeAppearance } from '@atlaskit/status/status-colors';
6
7
  export var MAX_SUGGESTED_STATUSES = 20;
7
8
  // Remove when cleaning up `platform_editor_status_popup_suggestions_patch_1`.
8
9
  export var MAX_SUGGESTED_STATUSES_OLD = 7;
10
+
11
+ // `color` may be a legacy name or a hex value that render the same hue (e.g. `green` and
12
+ // `#D3F1A7` both resolve to `accent-lime`), so the key is built from the resolved appearance
13
+ // rather than the raw attribute value — otherwise both variants would surface as suggestions.
9
14
  var getStatusKey = function getStatusKey(_ref) {
10
15
  var color = _ref.color,
11
16
  text = _ref.text;
12
- return "".concat(color, ":").concat(text.trim().toLowerCase());
17
+ return "".concat(getLozengeAppearance(color), ":").concat(text.trim().toLowerCase());
13
18
  };
14
19
  var getDisplayText = function getDisplayText(status, shouldUppercaseText) {
15
20
  return shouldUppercaseText && status.style !== 'mixedCase' ? status.text.toUpperCase() : status.text;
package/dist/esm/ui/quick-insert/StatusQuickInsertMenuItem.js CHANGED
@@ -6,7 +6,8 @@ import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-i
6
6
  import LozengeIcon from '@atlaskit/icon-lab/core/lozenge';
7
7
  import { insertStatus } from '../../pm-plugins/actions';
8
8
  export var StatusQuickInsertMenuItem = function StatusQuickInsertMenuItem(_ref) {
9
- var api = _ref.api;
9
+ var api = _ref.api,
10
+ previewImageUrls = _ref.previewImageUrls;
10
11
  var _useIntl = useIntl(),
11
12
  formatMessage = _useIntl.formatMessage;
12
13
  var onSelect = useCallback(function (_ref2) {
@@ -22,6 +23,7 @@ export var StatusQuickInsertMenuItem = function StatusQuickInsertMenuItem(_ref)
22
23
  label: ""
23
24
  }),
24
25
  onSelect: onSelect,
26
+ previewImageUrls: previewImageUrls,
25
27
  title: formatMessage(messages.status)
26
28
  });
27
29
  };
package/dist/esm/ui/quick-insert/getStatusQuickInsertComponents.js CHANGED
@@ -4,6 +4,10 @@ import { createQuickInsertMatcher } from '@atlaskit/editor-common/quick-insert/c
4
4
  import { STATUS_MENU_ITEM, STRUCTURE_SECTION } from '@atlaskit/editor-common/quick-insert/keys';
5
5
  import { STRUCTURE_SECTION_RANK } from '@atlaskit/editor-common/quick-insert/rank';
6
6
  import { StatusQuickInsertMenuItem } from './StatusQuickInsertMenuItem';
7
+ var previewImageUrls = {
8
+ light: 'https://dam-cdn.atl.orangelogic.com/AssetLink/se7cdbko55l5f1b6o8wp26lr470420wy.png',
9
+ dark: 'https://dam-cdn.atl.orangelogic.com/AssetLink/7tnn52vck25nq56ornv4q55e065uhxyc.png'
10
+ };
7
11
  export var getStatusQuickInsertComponents = function getStatusQuickInsertComponents(_ref) {
8
12
  var api = _ref.api;
9
13
  return [{
@@ -24,7 +28,8 @@ export var getStatusQuickInsertComponents = function getStatusQuickInsertCompone
24
28
  }),
25
29
  component: function component() {
26
30
  return /*#__PURE__*/React.createElement(StatusQuickInsertMenuItem, {
27
- api: api
31
+ api: api,
32
+ previewImageUrls: previewImageUrls
28
33
  });
29
34
  }
30
35
  }];
package/dist/esm/ui/statusPicker.js CHANGED
@@ -76,8 +76,10 @@ var suggestedStatusesContainerStyles = css({
76
76
  padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-150, 12px)", " ", "var(--ds-space-050, 4px)")
77
77
  });
78
78
 
79
- // Fixed input plus capped scrolling color controls and suggestions.
79
+ // Fixed input plus capped scrolling color controls and suggestions. The ten-color picker is
80
+ // taller because it carries a second swatch row.
80
81
  var STATUS_PICKER_FIT_HEIGHT = 288;
82
+ var STATUS_PICKER_TEN_COLOR_FIT_HEIGHT = 292;
81
83
  // Seven suggestions fit below the color palette before the content starts scrolling.
82
84
  var MAX_SUGGESTIONS_WITHOUT_SCROLLBAR = 7;
83
85
  // ColorPalette: swatches per row * 32px slot + 16px inline margin.
@@ -94,9 +96,6 @@ var statusPickerWithScrollbarWidthStylesOld = css({
94
96
  // Reserve space for the native scrollbar without reducing the picker content width.
95
97
  width: "".concat(STATUS_PICKER_CONTENT_WIDTH + STATUS_PICKER_SCROLLBAR_WIDTH, "px")
96
98
  });
97
- var statusPickerWithScrollbarWidthStyles = css({
98
- width: "".concat(STATUS_PICKER_TEN_COLOR_CONTENT_WIDTH + STATUS_PICKER_SCROLLBAR_WIDTH, "px")
99
- });
100
99
 
101
100
  // When cleaning up `platform_editor_status_popup_suggestions_patch_1`, merge this into
102
101
  // `suggestedStatusesContainerStyles` and remove its conditional style array.
@@ -128,6 +127,9 @@ var suggestedStatusButtonWrapperStyles = css({
128
127
  borderStyle: 'solid',
129
128
  borderColor: 'transparent',
130
129
  borderRadius: "var(--ds-space-075, 6px)",
130
+ // Keeps the border and padding inside `maxWidth`, so a full-width suggestion ends level
131
+ // with the last swatch.
132
+ boxSizing: 'border-box',
131
133
  display: 'flex',
132
134
  marginLeft: "var(--ds-space-025, 2px)",
133
135
  maxWidth: '100%',
@@ -446,8 +448,7 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
446
448
  key: "renderWithSetOutsideClickTargetRef",
447
449
  value: function renderWithSetOutsideClickTargetRef(setOutsideClickTargetRef) {
448
450
  var _this3 = this,
449
- _suggestedStatuses$le,
450
- _suggestedStatuses$le2;
451
+ _suggestedStatuses$le;
451
452
  var _this$props = this.props,
452
453
  isNew = _this$props.isNew,
453
454
  focusStatusInput = _this$props.focusStatusInput,
@@ -495,7 +496,7 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
495
496
  api: api,
496
497
  userIntent: "statusPickerOpen"
497
498
  }, jsx("div", {
498
- css: [fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? pickerContainerStylesTeam26 : pickerContainerStyles, suggestionsPatchEnabled && isUpdateStatusColorsEnabled ? statusPickerWidthStyles : undefined, suggestionsPatchEnabled && !isUpdateStatusColorsEnabled ? statusPickerWidthStylesOld : undefined, suggestionsPatchEnabled && isUpdateStatusColorsEnabled && ((_suggestedStatuses$le = suggestedStatuses === null || suggestedStatuses === void 0 ? void 0 : suggestedStatuses.length) !== null && _suggestedStatuses$le !== void 0 ? _suggestedStatuses$le : 0) > MAX_SUGGESTIONS_WITHOUT_SCROLLBAR ? statusPickerWithScrollbarWidthStyles : undefined, suggestionsPatchEnabled && !isUpdateStatusColorsEnabled && ((_suggestedStatuses$le2 = suggestedStatuses === null || suggestedStatuses === void 0 ? void 0 : suggestedStatuses.length) !== null && _suggestedStatuses$le2 !== void 0 ? _suggestedStatuses$le2 : 0) > MAX_SUGGESTIONS_WITHOUT_SCROLLBAR ? statusPickerWithScrollbarWidthStylesOld : undefined],
499
+ css: [fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? pickerContainerStylesTeam26 : pickerContainerStyles, suggestionsPatchEnabled && isUpdateStatusColorsEnabled ? statusPickerWidthStyles : undefined, suggestionsPatchEnabled && !isUpdateStatusColorsEnabled ? statusPickerWidthStylesOld : undefined, suggestionsPatchEnabled && !fg('platform_editor_status_popup_suggestions_patch_2') && !isUpdateStatusColorsEnabled && ((_suggestedStatuses$le = suggestedStatuses === null || suggestedStatuses === void 0 ? void 0 : suggestedStatuses.length) !== null && _suggestedStatuses$le !== void 0 ? _suggestedStatuses$le : 0) > MAX_SUGGESTIONS_WITHOUT_SCROLLBAR ? statusPickerWithScrollbarWidthStylesOld : undefined],
499
500
  role: "none",
500
501
  ref: this.setRef(setOutsideClickTargetRef),
501
502
  onClick: this.handlePopupClick,
@@ -515,6 +516,7 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
515
516
  if (!(editorView !== null && editorView !== void 0 && editorView.editable)) {
516
517
  return null;
517
518
  }
519
+ var fitHeight = isExperimentEnabled('platform_editor_update_status_colors') ? STATUS_PICKER_TEN_COLOR_FIT_HEIGHT : STATUS_PICKER_FIT_HEIGHT;
518
520
  return target && jsx(PopupWithListeners, {
519
521
  ariaLabel: intl.formatMessage(messages.statusEditorLabel),
520
522
  target: target
@@ -524,7 +526,7 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
524
526
  handleClickOutside: this.handleClickOutside,
525
527
  handleEscapeKeydown: this.handleEscapeKeydown,
526
528
  zIndex: akEditorFloatingDialogZIndex,
527
- fitHeight: isExperimentEnabled('platform_editor_status_popup_suggestions') && fg('platform_editor_status_popup_suggestions_patch_1') ? STATUS_PICKER_FIT_HEIGHT : 40,
529
+ fitHeight: isExperimentEnabled('platform_editor_status_popup_suggestions') && fg('platform_editor_status_popup_suggestions_patch_1') ? fitHeight : 40,
528
530
  mountTo: mountTo,
529
531
  boundariesElement: boundariesElement,
530
532
  scrollableElement: scrollableElement,
package/dist/types/ui/quick-insert/StatusQuickInsertMenuItem.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import React from 'react';
2
+ import { type QuickInsertMenuItemProps } from '@atlaskit/editor-common/quick-insert/menu-item';
2
3
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
4
  import type { StatusPlugin } from '../../statusPluginType';
4
- export declare const StatusQuickInsertMenuItem: ({ api, }: {
5
+ export declare const StatusQuickInsertMenuItem: ({ api, previewImageUrls, }: {
5
6
  api: ExtractInjectionAPI<StatusPlugin> | undefined;
7
+ previewImageUrls?: QuickInsertMenuItemProps['previewImageUrls'];
6
8
  }) => React.JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-status",
3
- "version": "19.0.10",
3
+ "version": "20.0.0",
4
4
  "description": "Status plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -24,12 +24,12 @@
24
24
  "@atlaskit/adf-schema": "^57.5.0",
25
25
  "@atlaskit/analytics-next": "^12.5.0",
26
26
  "@atlaskit/browser-apis": "^1.2.0",
27
- "@atlaskit/editor-plugin-analytics": "^18.0.0",
28
- "@atlaskit/editor-plugin-block-controls": "^19.0.0",
29
- "@atlaskit/editor-plugin-block-menu": "^17.0.0",
30
- "@atlaskit/editor-plugin-selection": "^18.0.0",
31
- "@atlaskit/editor-plugin-ui-control-registry": "^12.0.0",
32
- "@atlaskit/editor-prosemirror": "^8.0.0",
27
+ "@atlaskit/editor-plugin-analytics": "^19.0.0",
28
+ "@atlaskit/editor-plugin-block-controls": "^20.0.0",
29
+ "@atlaskit/editor-plugin-block-menu": "^18.0.0",
30
+ "@atlaskit/editor-plugin-selection": "^19.0.0",
31
+ "@atlaskit/editor-plugin-ui-control-registry": "^13.0.0",
32
+ "@atlaskit/editor-prosemirror": "^9.0.0",
33
33
  "@atlaskit/editor-shared-styles": "^4.3.0",
34
34
  "@atlaskit/editor-toolbar": "^2.6.0",
35
35
  "@atlaskit/editor-ui-control-model": "^2.9.0",
@@ -37,15 +37,15 @@
37
37
  "@atlaskit/icon-lab": "^7.9.0",
38
38
  "@atlaskit/platform-feature-experiments": "^0.3.0",
39
39
  "@atlaskit/platform-feature-flags": "^2.2.0",
40
- "@atlaskit/status": "^5.11.0",
41
- "@atlaskit/tmp-editor-statsig": "^198.0.0",
42
- "@atlaskit/tokens": "^17.0.0",
40
+ "@atlaskit/status": "^5.12.0",
41
+ "@atlaskit/tmp-editor-statsig": "^199.0.0",
42
+ "@atlaskit/tokens": "^18.2.0",
43
43
  "@atlaskit/visually-hidden": "^4.4.0",
44
44
  "@babel/runtime": "^7.0.0",
45
45
  "@emotion/react": "^11.7.1"
46
46
  },
47
47
  "peerDependencies": {
48
- "@atlaskit/editor-common": "^122.10.0",
48
+ "@atlaskit/editor-common": "^123.0.0",
49
49
  "react": "^18.2.0 || ^19.2.0",
50
50
  "react-dom": "^18.2.0 || ^19.2.0",
51
51
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -69,6 +69,9 @@
69
69
  },
70
70
  "platform_editor_status_popup_suggestions_patch_1": {
71
71
  "type": "boolean"
72
+ },
73
+ "platform_editor_status_popup_suggestions_patch_2": {
74
+ "type": "boolean"
72
75
  }
73
76
  }
74
77
  }