@atlaskit/editor-plugin-status 19.0.2 → 19.0.4

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-status
 
+## 19.0.4
+
+### Patch Changes
+
+- [`30567ec57fc8c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/30567ec57fc8c) -
+  Opt the status picker into the ten-colour `palette` from `@atlaskit/status` behind
+  `platform_editor_update_status_colors`, uppercase the `data-color` attribute so the hex CSS
+  selectors match, and split the editor status styles so the pre-experiment semantic colour rules
+  can be deleted with the experiment. Hex colour rules are applied behind
+  `platform_editor_gracefully_render_status_color`.
+- Updated dependencies
+
+## 19.0.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 19.0.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/StatusNodeView.js

@@ -11,6 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _messages = require("@atlaskit/editor-common/messages");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _normalizeStatusColor = require("../utils/normalizeStatusColor");
 var _statusNodeSpec = require("./statusNodeSpec");
 /**
  *
@@ -72,9 +73,10 @@ var StatusNodeView = exports.StatusNodeView = /*#__PURE__*/function () {
       }
       if (node.attrs.color !== this.node.attrs.color) {
         var _this$box, _this$domElement2;
-        (_this$box = this.box) === null || _this$box === void 0 || _this$box.setAttribute('data-color', node.attrs.color);
+        var dataColor = (0, _normalizeStatusColor.normalizeStatusColorAttr)(node.attrs.color);
+        (_this$box = this.box) === null || _this$box === void 0 || _this$box.setAttribute('data-color', dataColor);
         // Also update data-color on outer wrapper for parseDOM extraction when copying
-        (_this$domElement2 = this.domElement) === null || _this$domElement2 === void 0 || _this$domElement2.setAttribute('data-color', node.attrs.color);
+        (_this$domElement2 = this.domElement) === null || _this$domElement2 === void 0 || _this$domElement2.setAttribute('data-color', dataColor);
       }
       if (!node.attrs.text) {
         this.setPlaceholder();

package/dist/cjs/nodeviews/statusNodeSpec.js

@@ -10,6 +10,7 @@ var _browser = require("@atlaskit/editor-common/browser");
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _whitespace = require("@atlaskit/editor-common/whitespace");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _normalizeStatusColor = require("../utils/normalizeStatusColor");
 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; }
 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; }
 // eg. Version/4.0 Chrome/95.0.4638.50
@@ -21,6 +22,7 @@ var statusToDOM = exports.statusToDOM = function statusToDOM(node) {
     color = _node$attrs.color,
     style = _node$attrs.style,
     localId = _node$attrs.localId;
+  var dataColor = (0, _normalizeStatusColor.normalizeStatusColorAttr)(color);
   var editorNodeWrapperAttrs = {
     class: 'statusView-content-wrap inlineNodeView',
     'data-testid': 'statusContainerView',
@@ -28,7 +30,7 @@ var statusToDOM = exports.statusToDOM = function statusToDOM(node) {
     localid: localId,
     // Required for parseDOM to correctly parse status when NodeView DOM is copied directly
     'data-node-type': 'status',
-    'data-color': color,
+    'data-color': dataColor,
     'data-text': text // Text stored as attribute for parseDOM extraction
   };
   var statusElementAttrs = {
@@ -39,7 +41,7 @@ var statusToDOM = exports.statusToDOM = function statusToDOM(node) {
     } : {}),
     class: 'status-lozenge-span',
     'data-node-type': 'status',
-    'data-color': color,
+    'data-color': dataColor,
     'data-style': style
   };
   var lozengeWrapperAttrs = {

package/dist/cjs/ui/statusPicker.js

@@ -83,15 +83,23 @@ var suggestedStatusesContainerStyles = (0, _react2.css)({
 var STATUS_PICKER_FIT_HEIGHT = 288;
 // Seven suggestions fit below the color palette before the content starts scrolling.
 var MAX_SUGGESTIONS_WITHOUT_SCROLLBAR = 7;
-var STATUS_PICKER_CONTENT_WIDTH = 208;
+// ColorPalette: swatches per row * 32px slot + 16px inline margin.
+var STATUS_PICKER_CONTENT_WIDTH = 208; // 6 * 32 + 16
+var STATUS_PICKER_TEN_COLOR_CONTENT_WIDTH = 176; // 5 * 32 + 16
 var STATUS_PICKER_SCROLLBAR_WIDTH = 16;
-var statusPickerWidthStyles = (0, _react2.css)({
+var statusPickerWidthStylesOld = (0, _react2.css)({
   width: "".concat(STATUS_PICKER_CONTENT_WIDTH, "px")
 });
-var statusPickerWithScrollbarWidthStyles = (0, _react2.css)({
+var statusPickerWidthStyles = (0, _react2.css)({
+  width: "".concat(STATUS_PICKER_TEN_COLOR_CONTENT_WIDTH, "px")
+});
+var statusPickerWithScrollbarWidthStylesOld = (0, _react2.css)({
   // Reserve space for the native scrollbar without reducing the picker content width.
   width: "".concat(STATUS_PICKER_CONTENT_WIDTH + STATUS_PICKER_SCROLLBAR_WIDTH, "px")
 });
+var statusPickerWithScrollbarWidthStyles = (0, _react2.css)({
+  width: "".concat(STATUS_PICKER_TEN_COLOR_CONTENT_WIDTH + STATUS_PICKER_SCROLLBAR_WIDTH, "px")
+});
 
 // When cleaning up `platform_editor_status_popup_suggestions_patch_1`, merge this into
 // `suggestedStatusesContainerStyles` and remove its conditional style array.
@@ -441,7 +449,8 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
     key: "renderWithSetOutsideClickTargetRef",
     value: function renderWithSetOutsideClickTargetRef(setOutsideClickTargetRef) {
       var _this3 = this,
-        _suggestedStatuses$le;
+        _suggestedStatuses$le,
+        _suggestedStatuses$le2;
       var _this$props = this.props,
         isNew = _this$props.isNew,
         focusStatusInput = _this$props.focusStatusInput,
@@ -451,6 +460,7 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
         color = _this$state3.color,
         text = _this$state3.text;
       var suggestionsPatchEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_status_popup_suggestions') && (0, _fg.fg)('platform_editor_status_popup_suggestions_patch_1');
+      var isUpdateStatusColorsEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_update_status_colors');
       var suggestedStatusList = suggestedStatuses !== null && suggestedStatuses !== void 0 && suggestedStatuses.length && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_status_popup_suggestions') ? (0, _react2.jsx)("div", {
         css: [suggestedStatusesContainerStyles, suggestionsPatchEnabled ? suggestedStatusesContainerPatchStyles : undefined],
         "data-suggested-status-list": true
@@ -481,13 +491,14 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
         onColorHover: this.onColorHover,
         onTextChanged: this.onTextChanged,
         onEnter: this.onEnter,
+        palette: isUpdateStatusColorsEnabled ? 'extended' : 'default',
         scrollableContent: suggestionsPatchEnabled ? suggestedStatusList : undefined
       }), suggestionsPatchEnabled ? null : suggestedStatusList);
       return (0, _react2.jsx)(_userIntent.UserIntentPopupWrapper, {
         api: api,
         userIntent: "statusPickerOpen"
       }, (0, _react2.jsx)("div", {
-        css: [(0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? pickerContainerStylesTeam26 : pickerContainerStyles, suggestionsPatchEnabled ? statusPickerWidthStyles : undefined, suggestionsPatchEnabled && ((_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],
+        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],
         role: "none",
         ref: this.setRef(setOutsideClickTargetRef),
         onClick: this.handlePopupClick,

package/dist/cjs/utils/normalizeStatusColor.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.normalizeStatusColorAttr = void 0;
+var normalizeStatusColorAttr = exports.normalizeStatusColorAttr = function normalizeStatusColorAttr(color) {
+  return color.startsWith('#') ? color.toUpperCase() : color;
+};

package/dist/es2019/nodeviews/StatusNodeView.js

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { statusMessages as messages } from '@atlaskit/editor-common/messages';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { normalizeStatusColorAttr } from '../utils/normalizeStatusColor';
 import { statusToDOM } from './statusNodeSpec';
 
 /**
@@ -60,9 +61,10 @@ export class StatusNodeView {
     }
     if (node.attrs.color !== this.node.attrs.color) {
       var _this$box, _this$domElement2;
-      (_this$box = this.box) === null || _this$box === void 0 ? void 0 : _this$box.setAttribute('data-color', node.attrs.color);
+      const dataColor = normalizeStatusColorAttr(node.attrs.color);
+      (_this$box = this.box) === null || _this$box === void 0 ? void 0 : _this$box.setAttribute('data-color', dataColor);
       // Also update data-color on outer wrapper for parseDOM extraction when copying
-      (_this$domElement2 = this.domElement) === null || _this$domElement2 === void 0 ? void 0 : _this$domElement2.setAttribute('data-color', node.attrs.color);
+      (_this$domElement2 = this.domElement) === null || _this$domElement2 === void 0 ? void 0 : _this$domElement2.setAttribute('data-color', dataColor);
     }
     if (!node.attrs.text) {
       this.setPlaceholder();

package/dist/es2019/nodeviews/statusNodeSpec.js

@@ -2,6 +2,7 @@ import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { normalizeStatusColorAttr } from '../utils/normalizeStatusColor';
 
 // eg. Version/4.0 Chrome/95.0.4638.50
 const isAndroidChromium = typeof window !== 'undefined' && /Version\/.* Chrome\/.*/u.test(window.navigator.userAgent);
@@ -13,6 +14,7 @@ export const statusToDOM = node => {
     style,
     localId
   } = node.attrs;
+  const dataColor = normalizeStatusColorAttr(color);
   const editorNodeWrapperAttrs = {
     class: 'statusView-content-wrap inlineNodeView',
     'data-testid': 'statusContainerView',
@@ -20,7 +22,7 @@ export const statusToDOM = node => {
     localid: localId,
     // Required for parseDOM to correctly parse status when NodeView DOM is copied directly
     'data-node-type': 'status',
-    'data-color': color,
+    'data-color': dataColor,
     'data-text': text // Text stored as attribute for parseDOM extraction
   };
   const statusElementAttrs = {
@@ -31,7 +33,7 @@ export const statusToDOM = node => {
     } : {}),
     class: 'status-lozenge-span',
     'data-node-type': 'status',
-    'data-color': color,
+    'data-color': dataColor,
     'data-style': style
   };
   const lozengeWrapperAttrs = {

package/dist/es2019/ui/statusPicker.js

@@ -73,15 +73,23 @@ const suggestedStatusesContainerStyles = css({
 const STATUS_PICKER_FIT_HEIGHT = 288;
 // Seven suggestions fit below the color palette before the content starts scrolling.
 const MAX_SUGGESTIONS_WITHOUT_SCROLLBAR = 7;
-const STATUS_PICKER_CONTENT_WIDTH = 208;
+// ColorPalette: swatches per row * 32px slot + 16px inline margin.
+const STATUS_PICKER_CONTENT_WIDTH = 208; // 6 * 32 + 16
+const STATUS_PICKER_TEN_COLOR_CONTENT_WIDTH = 176; // 5 * 32 + 16
 const STATUS_PICKER_SCROLLBAR_WIDTH = 16;
-const statusPickerWidthStyles = css({
+const statusPickerWidthStylesOld = css({
   width: `${STATUS_PICKER_CONTENT_WIDTH}px`
 });
-const statusPickerWithScrollbarWidthStyles = css({
+const statusPickerWidthStyles = css({
+  width: `${STATUS_PICKER_TEN_COLOR_CONTENT_WIDTH}px`
+});
+const statusPickerWithScrollbarWidthStylesOld = css({
   // Reserve space for the native scrollbar without reducing the picker content width.
   width: `${STATUS_PICKER_CONTENT_WIDTH + STATUS_PICKER_SCROLLBAR_WIDTH}px`
 });
+const statusPickerWithScrollbarWidthStyles = css({
+  width: `${STATUS_PICKER_TEN_COLOR_CONTENT_WIDTH + STATUS_PICKER_SCROLLBAR_WIDTH}px`
+});
 
 // When cleaning up `platform_editor_status_popup_suggestions_patch_1`, merge this into
 // `suggestedStatusesContainerStyles` and remove its conditional style array.
@@ -413,7 +421,7 @@ class StatusPickerWithIntl extends React.Component {
     };
   }
   renderWithSetOutsideClickTargetRef(setOutsideClickTargetRef) {
-    var _suggestedStatuses$le;
+    var _suggestedStatuses$le, _suggestedStatuses$le2;
     const {
       isNew,
       focusStatusInput,
@@ -425,6 +433,7 @@ class StatusPickerWithIntl extends React.Component {
       text
     } = this.state;
     const suggestionsPatchEnabled = isExperimentEnabled('platform_editor_status_popup_suggestions') && fg('platform_editor_status_popup_suggestions_patch_1');
+    const isUpdateStatusColorsEnabled = isExperimentEnabled('platform_editor_update_status_colors');
     const suggestedStatusList = suggestedStatuses !== null && suggestedStatuses !== void 0 && suggestedStatuses.length && isExperimentEnabled('platform_editor_status_popup_suggestions') ? jsx("div", {
       css: [suggestedStatusesContainerStyles, suggestionsPatchEnabled ? suggestedStatusesContainerPatchStyles : undefined],
       "data-suggested-status-list": true
@@ -451,13 +460,14 @@ class StatusPickerWithIntl extends React.Component {
       onColorHover: this.onColorHover,
       onTextChanged: this.onTextChanged,
       onEnter: this.onEnter,
+      palette: isUpdateStatusColorsEnabled ? 'extended' : 'default',
       scrollableContent: suggestionsPatchEnabled ? suggestedStatusList : undefined
     }), suggestionsPatchEnabled ? null : suggestedStatusList);
     return jsx(UserIntentPopupWrapper, {
       api: api,
       userIntent: "statusPickerOpen"
     }, jsx("div", {
-      css: [fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? pickerContainerStylesTeam26 : pickerContainerStyles, suggestionsPatchEnabled ? statusPickerWidthStyles : undefined, suggestionsPatchEnabled && ((_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],
+      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],
       role: "none",
       ref: this.setRef(setOutsideClickTargetRef),
       onClick: this.handlePopupClick,

package/dist/es2019/utils/normalizeStatusColor.js

@@ -0,0 +1 @@
+export const normalizeStatusColorAttr = color => color.startsWith('#') ? color.toUpperCase() : color;

package/dist/esm/nodeviews/StatusNodeView.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { statusMessages as messages } from '@atlaskit/editor-common/messages';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { normalizeStatusColorAttr } from '../utils/normalizeStatusColor';
 import { statusToDOM } from './statusNodeSpec';
 
 /**
@@ -66,9 +67,10 @@ export var StatusNodeView = /*#__PURE__*/function () {
       }
       if (node.attrs.color !== this.node.attrs.color) {
         var _this$box, _this$domElement2;
-        (_this$box = this.box) === null || _this$box === void 0 || _this$box.setAttribute('data-color', node.attrs.color);
+        var dataColor = normalizeStatusColorAttr(node.attrs.color);
+        (_this$box = this.box) === null || _this$box === void 0 || _this$box.setAttribute('data-color', dataColor);
         // Also update data-color on outer wrapper for parseDOM extraction when copying
-        (_this$domElement2 = this.domElement) === null || _this$domElement2 === void 0 || _this$domElement2.setAttribute('data-color', node.attrs.color);
+        (_this$domElement2 = this.domElement) === null || _this$domElement2 === void 0 || _this$domElement2.setAttribute('data-color', dataColor);
       }
       if (!node.attrs.text) {
         this.setPlaceholder();

package/dist/esm/nodeviews/statusNodeSpec.js

@@ -5,6 +5,7 @@ import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { normalizeStatusColorAttr } from '../utils/normalizeStatusColor';
 
 // eg. Version/4.0 Chrome/95.0.4638.50
 var isAndroidChromium = typeof window !== 'undefined' && /Version\/(?:[\0-\t\x0B\f\x0E-\u2027\u202A-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])* Chrome\/(?:[\0-\t\x0B\f\x0E-\u2027\u202A-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])*/.test(window.navigator.userAgent);
@@ -15,6 +16,7 @@ export var statusToDOM = function statusToDOM(node) {
     color = _node$attrs.color,
     style = _node$attrs.style,
     localId = _node$attrs.localId;
+  var dataColor = normalizeStatusColorAttr(color);
   var editorNodeWrapperAttrs = {
     class: 'statusView-content-wrap inlineNodeView',
     'data-testid': 'statusContainerView',
@@ -22,7 +24,7 @@ export var statusToDOM = function statusToDOM(node) {
     localid: localId,
     // Required for parseDOM to correctly parse status when NodeView DOM is copied directly
     'data-node-type': 'status',
-    'data-color': color,
+    'data-color': dataColor,
     'data-text': text // Text stored as attribute for parseDOM extraction
   };
   var statusElementAttrs = {
@@ -33,7 +35,7 @@ export var statusToDOM = function statusToDOM(node) {
     } : {}),
     class: 'status-lozenge-span',
     'data-node-type': 'status',
-    'data-color': color,
+    'data-color': dataColor,
     'data-style': style
   };
   var lozengeWrapperAttrs = {

package/dist/esm/ui/statusPicker.js

@@ -80,15 +80,23 @@ var suggestedStatusesContainerStyles = css({
 var STATUS_PICKER_FIT_HEIGHT = 288;
 // Seven suggestions fit below the color palette before the content starts scrolling.
 var MAX_SUGGESTIONS_WITHOUT_SCROLLBAR = 7;
-var STATUS_PICKER_CONTENT_WIDTH = 208;
+// ColorPalette: swatches per row * 32px slot + 16px inline margin.
+var STATUS_PICKER_CONTENT_WIDTH = 208; // 6 * 32 + 16
+var STATUS_PICKER_TEN_COLOR_CONTENT_WIDTH = 176; // 5 * 32 + 16
 var STATUS_PICKER_SCROLLBAR_WIDTH = 16;
-var statusPickerWidthStyles = css({
+var statusPickerWidthStylesOld = css({
   width: "".concat(STATUS_PICKER_CONTENT_WIDTH, "px")
 });
-var statusPickerWithScrollbarWidthStyles = css({
+var statusPickerWidthStyles = css({
+  width: "".concat(STATUS_PICKER_TEN_COLOR_CONTENT_WIDTH, "px")
+});
+var statusPickerWithScrollbarWidthStylesOld = css({
   // Reserve space for the native scrollbar without reducing the picker content width.
   width: "".concat(STATUS_PICKER_CONTENT_WIDTH + STATUS_PICKER_SCROLLBAR_WIDTH, "px")
 });
+var statusPickerWithScrollbarWidthStyles = css({
+  width: "".concat(STATUS_PICKER_TEN_COLOR_CONTENT_WIDTH + STATUS_PICKER_SCROLLBAR_WIDTH, "px")
+});
 
 // When cleaning up `platform_editor_status_popup_suggestions_patch_1`, merge this into
 // `suggestedStatusesContainerStyles` and remove its conditional style array.
@@ -438,7 +446,8 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
     key: "renderWithSetOutsideClickTargetRef",
     value: function renderWithSetOutsideClickTargetRef(setOutsideClickTargetRef) {
       var _this3 = this,
-        _suggestedStatuses$le;
+        _suggestedStatuses$le,
+        _suggestedStatuses$le2;
       var _this$props = this.props,
         isNew = _this$props.isNew,
         focusStatusInput = _this$props.focusStatusInput,
@@ -448,6 +457,7 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
         color = _this$state3.color,
         text = _this$state3.text;
       var suggestionsPatchEnabled = isExperimentEnabled('platform_editor_status_popup_suggestions') && fg('platform_editor_status_popup_suggestions_patch_1');
+      var isUpdateStatusColorsEnabled = isExperimentEnabled('platform_editor_update_status_colors');
       var suggestedStatusList = suggestedStatuses !== null && suggestedStatuses !== void 0 && suggestedStatuses.length && isExperimentEnabled('platform_editor_status_popup_suggestions') ? jsx("div", {
         css: [suggestedStatusesContainerStyles, suggestionsPatchEnabled ? suggestedStatusesContainerPatchStyles : undefined],
         "data-suggested-status-list": true
@@ -478,13 +488,14 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
         onColorHover: this.onColorHover,
         onTextChanged: this.onTextChanged,
         onEnter: this.onEnter,
+        palette: isUpdateStatusColorsEnabled ? 'extended' : 'default',
         scrollableContent: suggestionsPatchEnabled ? suggestedStatusList : undefined
       }), suggestionsPatchEnabled ? null : suggestedStatusList);
       return jsx(UserIntentPopupWrapper, {
         api: api,
         userIntent: "statusPickerOpen"
       }, jsx("div", {
-        css: [fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? pickerContainerStylesTeam26 : pickerContainerStyles, suggestionsPatchEnabled ? statusPickerWidthStyles : undefined, suggestionsPatchEnabled && ((_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],
+        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],
         role: "none",
         ref: this.setRef(setOutsideClickTargetRef),
         onClick: this.handlePopupClick,

package/dist/esm/utils/normalizeStatusColor.js

@@ -0,0 +1,3 @@
+export var normalizeStatusColorAttr = function normalizeStatusColorAttr(color) {
+  return color.startsWith('#') ? color.toUpperCase() : color;
+};

package/dist/types/utils/normalizeStatusColor.d.ts

@@ -0,0 +1 @@
+export declare const normalizeStatusColorAttr: (color: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-status",
-	"version": "19.0.2",
+	"version": "19.0.4",
 	"description": "Status plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -37,8 +37,8 @@
 		"@atlaskit/icon-lab": "^7.8.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
-		"@atlaskit/status": "^5.10.0",
-		"@atlaskit/tmp-editor-statsig": "^190.0.0",
+		"@atlaskit/status": "^5.11.0",
+		"@atlaskit/tmp-editor-statsig": "^192.0.0",
 		"@atlaskit/tokens": "^16.12.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
 		"@babel/runtime": "^7.0.0",