@atlaskit/editor-plugin-status 9.0.15 → 9.1.1

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,22 @@
1
1
  # @atlaskit/editor-plugin-status
2
2
 
3
+ ## 9.1.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 9.1.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [`d9e33431d0d37`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d9e33431d0d37) -
14
+ [ux] EDITOR-5603 update editor status with team 26 lozenge styles
15
+
16
+ ### Patch Changes
17
+
18
+ - Updated dependencies
19
+
3
20
  ## 9.0.15
4
21
 
5
22
  ### Patch Changes
@@ -10,6 +10,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
10
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
11
  var _messages = require("@atlaskit/editor-common/messages");
12
12
  var _model = require("@atlaskit/editor-prosemirror/model");
13
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
13
14
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
14
15
  var _statusNodeSpec = require("./statusNodeSpec");
15
16
  /**
@@ -69,6 +70,9 @@ var StatusNodeView = exports.StatusNodeView = /*#__PURE__*/function () {
69
70
  (_this$domElement = this.domElement) === null || _this$domElement === void 0 || _this$domElement.setAttribute('data-text', node.attrs.text);
70
71
  }
71
72
  }
73
+ if (this.textContainer && node.attrs.style !== this.node.attrs.style && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts')) {
74
+ this.textContainer.style.textTransform = node.attrs.style !== 'mixedCase' ? 'uppercase' : '';
75
+ }
72
76
  if (node.attrs.color !== this.node.attrs.color) {
73
77
  var _this$box;
74
78
  (_this$box = this.box) === null || _this$box === void 0 || _this$box.setAttribute('data-color', node.attrs.color);
@@ -50,9 +50,12 @@ var statusToDOM = exports.statusToDOM = function statusToDOM(node) {
50
50
  };
51
51
  var lozengeTextAttrs = {
52
52
  class: 'lozenge-text',
53
- style: (0, _lazyNodeView.convertToInlineCss)(_objectSpread({}, (0, _platformFeatureFlags.fg)('platform-lozenge-custom-letterspacing') ? {
53
+ style: (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({}, (0, _platformFeatureFlags.fg)('platform-lozenge-custom-letterspacing') ? {
54
54
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
55
55
  letterSpacing: '0.165px'
56
+ } : {}), style !== 'mixedCase' && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? {
57
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
58
+ textTransform: 'uppercase'
56
59
  } : {}))
57
60
  };
58
61
  return ['span', editorNodeWrapperAttrs, ['span', {
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.verifyAndInsertStatus = exports.updateStatusWithAnalytics = exports.updateStatus = exports.setStatusPickerAt = exports.setFocusOnStatusInput = exports.removeStatus = exports.insertStatus = exports.createStatus = exports.commitStatusPicker = exports.DEFAULT_STATUS = void 0;
7
+ exports.verifyAndInsertStatus = exports.updateStatusWithAnalytics = exports.updateStatus = exports.setStatusPickerAt = exports.setFocusOnStatusInput = exports.removeStatus = exports.insertStatus = exports.createStatus = exports.commitStatusPicker = exports.DEFAULT_STATUS_NEW = exports.DEFAULT_STATUS = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _adfSchema = require("@atlaskit/adf-schema");
10
10
  var _analytics = require("@atlaskit/editor-common/analytics");
@@ -13,6 +13,7 @@ var _utils = require("@atlaskit/editor-common/utils");
13
13
  var _model = require("@atlaskit/editor-prosemirror/model");
14
14
  var _state = require("@atlaskit/editor-prosemirror/state");
15
15
  var _utils2 = require("@atlaskit/editor-prosemirror/utils");
16
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
16
17
  var _pluginKey = require("./plugin-key");
17
18
  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; }
18
19
  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; }
@@ -20,6 +21,11 @@ var DEFAULT_STATUS = exports.DEFAULT_STATUS = {
20
21
  text: '',
21
22
  color: 'neutral'
22
23
  };
24
+ var DEFAULT_STATUS_NEW = exports.DEFAULT_STATUS_NEW = {
25
+ text: '',
26
+ color: 'neutral',
27
+ style: 'mixedCase'
28
+ };
23
29
  var verifyAndInsertStatus = exports.verifyAndInsertStatus = function verifyAndInsertStatus(statusNode, tr, annotationMarks) {
24
30
  var fragment = _model.Fragment.fromArray([statusNode, tr.doc.type.schema.text(' ', annotationMarks)]);
25
31
  var insertable = (0, _utils2.canInsert)(tr.selection.$from, fragment);
@@ -36,7 +42,7 @@ var verifyAndInsertStatus = exports.verifyAndInsertStatus = function verifyAndIn
36
42
  };
37
43
  var createStatus = exports.createStatus = function createStatus(tr) {
38
44
  var annotationMarksForPos = (0, _utils.getAnnotationMarksForPos)(tr.selection.$head);
39
- var statusNode = tr.doc.type.schema.nodes.status.createChecked(_objectSpread(_objectSpread({}, DEFAULT_STATUS), {}, {
45
+ var statusNode = tr.doc.type.schema.nodes.status.createChecked(_objectSpread(_objectSpread({}, (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? DEFAULT_STATUS_NEW : DEFAULT_STATUS), {}, {
40
46
  localId: _adfSchema.uuid.generate()
41
47
  }), null, annotationMarksForPos);
42
48
  return verifyAndInsertStatus(statusNode, tr, annotationMarksForPos);
@@ -67,7 +73,7 @@ var updateStatus = exports.updateStatus = function updateStatus(status) {
67
73
  text: status.text.trim(),
68
74
  localId: status.localId || _adfSchema.uuid.generate()
69
75
  }) : status;
70
- var statusProps = _objectSpread(_objectSpread({}, DEFAULT_STATUS), selectedStatus);
76
+ var statusProps = _objectSpread(_objectSpread({}, (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? DEFAULT_STATUS_NEW : DEFAULT_STATUS), selectedStatus);
71
77
  var tr = state.tr;
72
78
  var _ref2 = _pluginKey.pluginKey.getState(state) || {},
73
79
  showStatusPickerAt = _ref2.showStatusPickerAt;
@@ -9,6 +9,7 @@ exports.ContentComponent = ContentComponent;
9
9
  var _react = _interopRequireWildcard(require("react"));
10
10
  var _hooks = require("@atlaskit/editor-common/hooks");
11
11
  var _utils = require("@atlaskit/editor-prosemirror/utils");
12
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
13
  var _actions = require("../pm-plugins/actions");
13
14
  var _statusPicker = _interopRequireDefault(require("./statusPicker"));
14
15
  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); }
@@ -54,12 +55,14 @@ function ContentComponent(_ref) {
54
55
  var _statusNode$attrs = statusNode.attrs,
55
56
  text = _statusNode$attrs.text,
56
57
  color = _statusNode$attrs.color,
57
- localId = _statusNode$attrs.localId;
58
+ localId = _statusNode$attrs.localId,
59
+ style = _statusNode$attrs.style;
60
+ var displayText = style !== 'mixedCase' && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? text.toUpperCase() : text;
58
61
  return /*#__PURE__*/_react.default.createElement(_statusPicker.default, {
59
62
  isNew: statusState === null || statusState === void 0 ? void 0 : statusState.isNew,
60
63
  focusStatusInput: statusState === null || statusState === void 0 ? void 0 : statusState.focusStatusInput,
61
64
  target: target,
62
- defaultText: text,
65
+ defaultText: displayText,
63
66
  defaultColor: color,
64
67
  defaultLocalId: localId,
65
68
  mountTo: popupsMountPoint,
@@ -59,6 +59,16 @@ var pickerContainerStyles = (0, _react2.css)({
59
59
  textTransform: 'uppercase'
60
60
  }
61
61
  });
62
+ var pickerContainerStylesTeam26 = (0, _react2.css)({
63
+ background: "var(--ds-surface-overlay, #FFFFFF)",
64
+ padding: "var(--ds-space-100, 8px)".concat(" 0"),
65
+ borderRadius: "var(--ds-radius-small, 3px)",
66
+ boxShadow: "var(--ds-shadow-overlay, 0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25))",
67
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
68
+ ':focus': {
69
+ outline: 'none'
70
+ }
71
+ });
62
72
 
63
73
  // eslint-disable-next-line @repo/internal/react/no-class-components
64
74
  var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
@@ -304,7 +314,7 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
304
314
  api: api,
305
315
  userIntent: "statusPickerOpen"
306
316
  }, (0, _react2.jsx)("div", {
307
- css: pickerContainerStyles,
317
+ css: (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? pickerContainerStylesTeam26 : pickerContainerStyles,
308
318
  role: "none",
309
319
  ref: this.setRef(setOutsideClickTargetRef),
310
320
  onClick: this.handlePopupClick,
@@ -1,6 +1,7 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import { statusMessages as messages } from '@atlaskit/editor-common/messages';
3
3
  import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
4
+ import { fg } from '@atlaskit/platform-feature-flags';
4
5
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
5
6
  import { statusToDOM } from './statusNodeSpec';
6
7
 
@@ -57,6 +58,9 @@ export class StatusNodeView {
57
58
  (_this$domElement = this.domElement) === null || _this$domElement === void 0 ? void 0 : _this$domElement.setAttribute('data-text', node.attrs.text);
58
59
  }
59
60
  }
61
+ if (this.textContainer && node.attrs.style !== this.node.attrs.style && fg('platform-dst-lozenge-tag-badge-visual-uplifts')) {
62
+ this.textContainer.style.textTransform = node.attrs.style !== 'mixedCase' ? 'uppercase' : '';
63
+ }
60
64
  if (node.attrs.color !== this.node.attrs.color) {
61
65
  var _this$box;
62
66
  (_this$box = this.box) === null || _this$box === void 0 ? void 0 : _this$box.setAttribute('data-color', node.attrs.color);
@@ -48,6 +48,10 @@ export const statusToDOM = node => {
48
48
  ...(fg('platform-lozenge-custom-letterspacing') ? {
49
49
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
50
50
  letterSpacing: '0.165px'
51
+ } : {}),
52
+ ...(style !== 'mixedCase' && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? {
53
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
54
+ textTransform: 'uppercase'
51
55
  } : {})
52
56
  })
53
57
  };
@@ -5,11 +5,17 @@ import { getAnnotationMarksForPos } from '@atlaskit/editor-common/utils';
5
5
  import { Fragment } from '@atlaskit/editor-prosemirror/model';
6
6
  import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
7
7
  import { canInsert } from '@atlaskit/editor-prosemirror/utils';
8
+ import { fg } from '@atlaskit/platform-feature-flags';
8
9
  import { pluginKey } from './plugin-key';
9
10
  export const DEFAULT_STATUS = {
10
11
  text: '',
11
12
  color: 'neutral'
12
13
  };
14
+ export const DEFAULT_STATUS_NEW = {
15
+ text: '',
16
+ color: 'neutral',
17
+ style: 'mixedCase'
18
+ };
13
19
  export const verifyAndInsertStatus = (statusNode, tr, annotationMarks) => {
14
20
  const fragment = Fragment.fromArray([statusNode, tr.doc.type.schema.text(' ', annotationMarks)]);
15
21
  const insertable = canInsert(tr.selection.$from, fragment);
@@ -27,7 +33,7 @@ export const verifyAndInsertStatus = (statusNode, tr, annotationMarks) => {
27
33
  export const createStatus = tr => {
28
34
  const annotationMarksForPos = getAnnotationMarksForPos(tr.selection.$head);
29
35
  const statusNode = tr.doc.type.schema.nodes.status.createChecked({
30
- ...DEFAULT_STATUS,
36
+ ...(fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? DEFAULT_STATUS_NEW : DEFAULT_STATUS),
31
37
  localId: uuid.generate()
32
38
  }, null, annotationMarksForPos);
33
39
  return verifyAndInsertStatus(statusNode, tr, annotationMarksForPos);
@@ -56,7 +62,7 @@ export const updateStatus = status => (state, dispatch) => {
56
62
  localId: status.localId || uuid.generate()
57
63
  }) : status;
58
64
  const statusProps = {
59
- ...DEFAULT_STATUS,
65
+ ...(fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? DEFAULT_STATUS_NEW : DEFAULT_STATUS),
60
66
  ...selectedStatus
61
67
  };
62
68
  let tr = state.tr;
@@ -1,6 +1,7 @@
1
1
  import React, { useCallback, useMemo } from 'react';
2
2
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
3
3
  import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
4
+ import { fg } from '@atlaskit/platform-feature-flags';
4
5
  import { commitStatusPicker, updateStatus } from '../pm-plugins/actions';
5
6
  import StatusPicker from './statusPicker';
6
7
  export function ContentComponent({
@@ -43,13 +44,15 @@ export function ContentComponent({
43
44
  const {
44
45
  text,
45
46
  color,
46
- localId
47
+ localId,
48
+ style
47
49
  } = statusNode.attrs;
50
+ const displayText = style !== 'mixedCase' && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? text.toUpperCase() : text;
48
51
  return /*#__PURE__*/React.createElement(StatusPicker, {
49
52
  isNew: statusState === null || statusState === void 0 ? void 0 : statusState.isNew,
50
53
  focusStatusInput: statusState === null || statusState === void 0 ? void 0 : statusState.focusStatusInput,
51
54
  target: target,
52
- defaultText: text,
55
+ defaultText: displayText,
53
56
  defaultColor: color,
54
57
  defaultLocalId: localId,
55
58
  mountTo: popupsMountPoint,
@@ -49,6 +49,16 @@ const pickerContainerStyles = css({
49
49
  textTransform: 'uppercase'
50
50
  }
51
51
  });
52
+ const pickerContainerStylesTeam26 = css({
53
+ background: "var(--ds-surface-overlay, #FFFFFF)",
54
+ padding: `${"var(--ds-space-100, 8px)"} 0`,
55
+ borderRadius: "var(--ds-radius-small, 3px)",
56
+ boxShadow: "var(--ds-shadow-overlay, 0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25))",
57
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
58
+ ':focus': {
59
+ outline: 'none'
60
+ }
61
+ });
52
62
 
53
63
  // eslint-disable-next-line @repo/internal/react/no-class-components
54
64
  class StatusPickerWithIntl extends React.Component {
@@ -279,7 +289,7 @@ class StatusPickerWithIntl extends React.Component {
279
289
  api: api,
280
290
  userIntent: "statusPickerOpen"
281
291
  }, jsx("div", {
282
- css: pickerContainerStyles,
292
+ css: fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? pickerContainerStylesTeam26 : pickerContainerStyles,
283
293
  role: "none",
284
294
  ref: this.setRef(setOutsideClickTargetRef),
285
295
  onClick: this.handlePopupClick,
@@ -3,6 +3,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
3
3
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
4
  import { statusMessages as messages } from '@atlaskit/editor-common/messages';
5
5
  import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
6
+ import { fg } from '@atlaskit/platform-feature-flags';
6
7
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
7
8
  import { statusToDOM } from './statusNodeSpec';
8
9
 
@@ -63,6 +64,9 @@ export var StatusNodeView = /*#__PURE__*/function () {
63
64
  (_this$domElement = this.domElement) === null || _this$domElement === void 0 || _this$domElement.setAttribute('data-text', node.attrs.text);
64
65
  }
65
66
  }
67
+ if (this.textContainer && node.attrs.style !== this.node.attrs.style && fg('platform-dst-lozenge-tag-badge-visual-uplifts')) {
68
+ this.textContainer.style.textTransform = node.attrs.style !== 'mixedCase' ? 'uppercase' : '';
69
+ }
66
70
  if (node.attrs.color !== this.node.attrs.color) {
67
71
  var _this$box;
68
72
  (_this$box = this.box) === null || _this$box === void 0 || _this$box.setAttribute('data-color', node.attrs.color);
@@ -44,9 +44,12 @@ export var statusToDOM = function statusToDOM(node) {
44
44
  };
45
45
  var lozengeTextAttrs = {
46
46
  class: 'lozenge-text',
47
- style: convertToInlineCss(_objectSpread({}, fg('platform-lozenge-custom-letterspacing') ? {
47
+ style: convertToInlineCss(_objectSpread(_objectSpread({}, fg('platform-lozenge-custom-letterspacing') ? {
48
48
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
49
49
  letterSpacing: '0.165px'
50
+ } : {}), style !== 'mixedCase' && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? {
51
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
52
+ textTransform: 'uppercase'
50
53
  } : {}))
51
54
  };
52
55
  return ['span', editorNodeWrapperAttrs, ['span', {
@@ -8,11 +8,17 @@ import { getAnnotationMarksForPos } from '@atlaskit/editor-common/utils';
8
8
  import { Fragment } from '@atlaskit/editor-prosemirror/model';
9
9
  import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
10
10
  import { canInsert } from '@atlaskit/editor-prosemirror/utils';
11
+ import { fg } from '@atlaskit/platform-feature-flags';
11
12
  import { pluginKey } from './plugin-key';
12
13
  export var DEFAULT_STATUS = {
13
14
  text: '',
14
15
  color: 'neutral'
15
16
  };
17
+ export var DEFAULT_STATUS_NEW = {
18
+ text: '',
19
+ color: 'neutral',
20
+ style: 'mixedCase'
21
+ };
16
22
  export var verifyAndInsertStatus = function verifyAndInsertStatus(statusNode, tr, annotationMarks) {
17
23
  var fragment = Fragment.fromArray([statusNode, tr.doc.type.schema.text(' ', annotationMarks)]);
18
24
  var insertable = canInsert(tr.selection.$from, fragment);
@@ -29,7 +35,7 @@ export var verifyAndInsertStatus = function verifyAndInsertStatus(statusNode, tr
29
35
  };
30
36
  export var createStatus = function createStatus(tr) {
31
37
  var annotationMarksForPos = getAnnotationMarksForPos(tr.selection.$head);
32
- var statusNode = tr.doc.type.schema.nodes.status.createChecked(_objectSpread(_objectSpread({}, DEFAULT_STATUS), {}, {
38
+ var statusNode = tr.doc.type.schema.nodes.status.createChecked(_objectSpread(_objectSpread({}, fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? DEFAULT_STATUS_NEW : DEFAULT_STATUS), {}, {
33
39
  localId: uuid.generate()
34
40
  }), null, annotationMarksForPos);
35
41
  return verifyAndInsertStatus(statusNode, tr, annotationMarksForPos);
@@ -60,7 +66,7 @@ export var updateStatus = function updateStatus(status) {
60
66
  text: status.text.trim(),
61
67
  localId: status.localId || uuid.generate()
62
68
  }) : status;
63
- var statusProps = _objectSpread(_objectSpread({}, DEFAULT_STATUS), selectedStatus);
69
+ var statusProps = _objectSpread(_objectSpread({}, fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? DEFAULT_STATUS_NEW : DEFAULT_STATUS), selectedStatus);
64
70
  var tr = state.tr;
65
71
  var _ref2 = pluginKey.getState(state) || {},
66
72
  showStatusPickerAt = _ref2.showStatusPickerAt;
@@ -1,6 +1,7 @@
1
1
  import React, { useCallback, useMemo } from 'react';
2
2
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
3
3
  import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
4
+ import { fg } from '@atlaskit/platform-feature-flags';
4
5
  import { commitStatusPicker, updateStatus } from '../pm-plugins/actions';
5
6
  import StatusPicker from './statusPicker';
6
7
  export function ContentComponent(_ref) {
@@ -45,12 +46,14 @@ export function ContentComponent(_ref) {
45
46
  var _statusNode$attrs = statusNode.attrs,
46
47
  text = _statusNode$attrs.text,
47
48
  color = _statusNode$attrs.color,
48
- localId = _statusNode$attrs.localId;
49
+ localId = _statusNode$attrs.localId,
50
+ style = _statusNode$attrs.style;
51
+ var displayText = style !== 'mixedCase' && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? text.toUpperCase() : text;
49
52
  return /*#__PURE__*/React.createElement(StatusPicker, {
50
53
  isNew: statusState === null || statusState === void 0 ? void 0 : statusState.isNew,
51
54
  focusStatusInput: statusState === null || statusState === void 0 ? void 0 : statusState.focusStatusInput,
52
55
  target: target,
53
- defaultText: text,
56
+ defaultText: displayText,
54
57
  defaultColor: color,
55
58
  defaultLocalId: localId,
56
59
  mountTo: popupsMountPoint,
@@ -56,6 +56,16 @@ var pickerContainerStyles = css({
56
56
  textTransform: 'uppercase'
57
57
  }
58
58
  });
59
+ var pickerContainerStylesTeam26 = css({
60
+ background: "var(--ds-surface-overlay, #FFFFFF)",
61
+ padding: "var(--ds-space-100, 8px)".concat(" 0"),
62
+ borderRadius: "var(--ds-radius-small, 3px)",
63
+ boxShadow: "var(--ds-shadow-overlay, 0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25))",
64
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
65
+ ':focus': {
66
+ outline: 'none'
67
+ }
68
+ });
59
69
 
60
70
  // eslint-disable-next-line @repo/internal/react/no-class-components
61
71
  var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
@@ -301,7 +311,7 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
301
311
  api: api,
302
312
  userIntent: "statusPickerOpen"
303
313
  }, jsx("div", {
304
- css: pickerContainerStyles,
314
+ css: fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? pickerContainerStylesTeam26 : pickerContainerStyles,
305
315
  role: "none",
306
316
  ref: this.setRef(setOutsideClickTargetRef),
307
317
  onClick: this.handlePopupClick,
@@ -7,6 +7,7 @@ import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/stat
7
7
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
8
8
  import type { ClosingPayload, StatusType } from '../types';
9
9
  export declare const DEFAULT_STATUS: StatusType;
10
+ export declare const DEFAULT_STATUS_NEW: StatusType;
10
11
  export declare const verifyAndInsertStatus: (statusNode: Node, tr: Transaction, annotationMarks?: Mark[] | undefined) => Transaction;
11
12
  export declare const createStatus: (tr: Transaction) => Transaction;
12
13
  export declare const insertStatus: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (inputMethod?: INPUT_METHOD.INSERT_MENU | INPUT_METHOD.QUICK_INSERT | INPUT_METHOD.TOOLBAR) => EditorCommand;
@@ -3,6 +3,7 @@ import type { closingMethods } from '../ui/statusPicker';
3
3
  export type StatusType = {
4
4
  color: ColorType;
5
5
  localId?: string;
6
+ style?: string;
6
7
  text: string;
7
8
  };
8
9
  export type StatusState = {
@@ -7,6 +7,7 @@ import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/stat
7
7
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
8
8
  import type { ClosingPayload, StatusType } from '../types';
9
9
  export declare const DEFAULT_STATUS: StatusType;
10
+ export declare const DEFAULT_STATUS_NEW: StatusType;
10
11
  export declare const verifyAndInsertStatus: (statusNode: Node, tr: Transaction, annotationMarks?: Mark[] | undefined) => Transaction;
11
12
  export declare const createStatus: (tr: Transaction) => Transaction;
12
13
  export declare const insertStatus: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (inputMethod?: INPUT_METHOD.INSERT_MENU | INPUT_METHOD.QUICK_INSERT | INPUT_METHOD.TOOLBAR) => EditorCommand;
@@ -3,6 +3,7 @@ import type { closingMethods } from '../ui/statusPicker';
3
3
  export type StatusType = {
4
4
  color: ColorType;
5
5
  localId?: string;
6
+ style?: string;
6
7
  text: string;
7
8
  };
8
9
  export type StatusState = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-status",
3
- "version": "9.0.15",
3
+ "version": "9.1.1",
4
4
  "description": "Status plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -37,15 +37,15 @@
37
37
  "@atlaskit/editor-shared-styles": "^3.10.0",
38
38
  "@atlaskit/icon": "^33.1.0",
39
39
  "@atlaskit/platform-feature-flags": "^1.1.0",
40
- "@atlaskit/status": "^3.1.0",
41
- "@atlaskit/tmp-editor-statsig": "^48.0.0",
42
- "@atlaskit/tokens": "^11.3.0",
40
+ "@atlaskit/status": "^3.2.0",
41
+ "@atlaskit/tmp-editor-statsig": "^49.0.0",
42
+ "@atlaskit/tokens": "^11.4.0",
43
43
  "@atlaskit/visually-hidden": "^3.0.0",
44
44
  "@babel/runtime": "^7.0.0",
45
45
  "@emotion/react": "^11.7.1"
46
46
  },
47
47
  "peerDependencies": {
48
- "@atlaskit/editor-common": "^112.11.0",
48
+ "@atlaskit/editor-common": "^112.13.0",
49
49
  "react": "^18.2.0",
50
50
  "react-dom": "^18.2.0",
51
51
  "react-intl-next": "npm:react-intl@^5.18.1"
@@ -99,6 +99,9 @@
99
99
  },
100
100
  "platform-lozenge-custom-letterspacing": {
101
101
  "type": "boolean"
102
+ },
103
+ "platform-dst-lozenge-tag-badge-visual-uplifts": {
104
+ "type": "boolean"
102
105
  }
103
106
  }
104
107
  }