@atlaskit/editor-plugin-status 26.0.2 → 27.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.
- package/CHANGELOG.md +14 -0
- package/dist/cjs/ui/ContentComponent.js +0 -1
- package/dist/cjs/ui/getSuggestedStatuses.js +1 -3
- package/dist/cjs/ui/statusPicker.js +15 -32
- package/dist/es2019/ui/ContentComponent.js +1 -2
- package/dist/es2019/ui/getSuggestedStatuses.js +0 -2
- package/dist/es2019/ui/statusPicker.js +15 -32
- package/dist/esm/ui/ContentComponent.js +1 -2
- package/dist/esm/ui/getSuggestedStatuses.js +0 -2
- package/dist/esm/ui/statusPicker.js +15 -32
- package/dist/types/ui/getSuggestedStatuses.d.ts +0 -1
- package/package.json +9 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-status
|
|
2
2
|
|
|
3
|
+
## 27.0.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`9b9cc5f762d4a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9b9cc5f762d4a) -
|
|
8
|
+
Clean up feature gate `platform_editor_status_popup_suggestions_patch_1`
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 26.0.3
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 26.0.2
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -95,7 +95,6 @@ function ContentComponent(_ref) {
|
|
|
95
95
|
text: text
|
|
96
96
|
},
|
|
97
97
|
doc: editorView.state.doc,
|
|
98
|
-
limit: (0, _fg.fg)('platform_editor_status_popup_suggestions_patch_1') ? _getSuggestedStatuses.MAX_SUGGESTED_STATUSES : _getSuggestedStatuses.MAX_SUGGESTED_STATUSES_OLD,
|
|
99
98
|
shouldUppercaseText: (0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts')
|
|
100
99
|
});
|
|
101
100
|
}, [showStatusPickerAt, editorView.state.doc]);
|
|
@@ -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.getSuggestedStatuses = exports.
|
|
7
|
+
exports.getSuggestedStatuses = 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
10
|
var _statusColors = require("@atlaskit/status/status-colors");
|
|
@@ -12,8 +12,6 @@ var _excluded = ["distance"];
|
|
|
12
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; }
|
|
13
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; }
|
|
14
14
|
var MAX_SUGGESTED_STATUSES = exports.MAX_SUGGESTED_STATUSES = 20;
|
|
15
|
-
// Remove when cleaning up `platform_editor_status_popup_suggestions_patch_1`.
|
|
16
|
-
var MAX_SUGGESTED_STATUSES_OLD = exports.MAX_SUGGESTED_STATUSES_OLD = 7;
|
|
17
15
|
|
|
18
16
|
// `color` may be a legacy name or a hex value that render the same hue (e.g. `green` and
|
|
19
17
|
// `#D3F1A7` both resolve to `accent-lime`), so the key is built from the resolved appearance
|
|
@@ -92,9 +92,10 @@ var suggestedStatusesContainerAlignedBottomPaddingStyles = (0, _react2.css)({
|
|
|
92
92
|
var suggestedStatusesContainerStyles = (0, _react2.css)({
|
|
93
93
|
display: 'flex',
|
|
94
94
|
flexDirection: 'column',
|
|
95
|
-
gap: "var(--ds-space-
|
|
95
|
+
gap: "var(--ds-space-050, 4px)",
|
|
96
96
|
margin: 0,
|
|
97
|
-
padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-150, 12px)", " ", "var(--ds-space-050, 4px)")
|
|
97
|
+
padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-150, 12px)", " ", "var(--ds-space-050, 4px)"),
|
|
98
|
+
paddingLeft: "var(--ds-space-100, 8px)"
|
|
98
99
|
});
|
|
99
100
|
|
|
100
101
|
// Fixed input plus capped scrolling color controls and suggestions. The ten-color picker is
|
|
@@ -113,31 +114,20 @@ var statusPickerWidthStylesOld = (0, _react2.css)({
|
|
|
113
114
|
var statusPickerWidthStyles = (0, _react2.css)({
|
|
114
115
|
width: "".concat(STATUS_PICKER_TEN_COLOR_CONTENT_WIDTH, "px")
|
|
115
116
|
});
|
|
116
|
-
|
|
117
|
-
// When cleaning up `platform_editor_status_popup_suggestions_patch_1`, merge this into
|
|
118
|
-
// `suggestedStatusesContainerStyles` and remove its conditional style array.
|
|
119
|
-
var suggestedStatusesContainerPatchStyles = (0, _react2.css)({
|
|
120
|
-
gap: "var(--ds-space-050, 4px)",
|
|
121
|
-
paddingLeft: "var(--ds-space-100, 8px)"
|
|
122
|
-
});
|
|
123
117
|
var suggestedStatusButtonStyles = (0, _react2.css)({
|
|
124
118
|
background: 'transparent',
|
|
125
119
|
border: 0,
|
|
126
120
|
borderRadius: "var(--ds-radius-small, 3px)",
|
|
127
121
|
cursor: 'pointer',
|
|
128
122
|
justifyContent: 'flex-start',
|
|
123
|
+
// Allow this flex item to shrink so long statuses can truncate.
|
|
124
|
+
minWidth: 0,
|
|
129
125
|
padding: 0,
|
|
130
126
|
'&:focus-visible': {
|
|
131
127
|
outline: "2px solid ".concat("var(--ds-border-focused, #0C66E4)"),
|
|
132
128
|
outlineOffset: "var(--ds-space-025, 2px)"
|
|
133
129
|
}
|
|
134
130
|
});
|
|
135
|
-
|
|
136
|
-
// Remove when cleaning up `platform_editor_status_popup_suggestions_patch_1`.
|
|
137
|
-
var suggestedStatusButtonOldStyles = (0, _react2.css)({
|
|
138
|
-
display: 'flex',
|
|
139
|
-
width: '100%'
|
|
140
|
-
});
|
|
141
131
|
var suggestedStatusButtonWrapperStyles = (0, _react2.css)({
|
|
142
132
|
alignSelf: 'flex-start',
|
|
143
133
|
borderWidth: "var(--ds-border-width, 1px)",
|
|
@@ -157,13 +147,6 @@ var suggestedStatusButtonWrapperStyles = (0, _react2.css)({
|
|
|
157
147
|
}
|
|
158
148
|
});
|
|
159
149
|
|
|
160
|
-
// When cleaning up `platform_editor_status_popup_suggestions_patch_1`, merge this into
|
|
161
|
-
// `suggestedStatusButtonStyles` and remove its conditional style array.
|
|
162
|
-
var suggestedStatusButtonPatchStyles = (0, _react2.css)({
|
|
163
|
-
// Allow this flex item to shrink so long statuses can truncate.
|
|
164
|
-
minWidth: 0
|
|
165
|
-
});
|
|
166
|
-
|
|
167
150
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
168
151
|
var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
|
|
169
152
|
function StatusPickerWithIntl(props) {
|
|
@@ -473,18 +456,18 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
|
|
|
473
456
|
var _this$state3 = this.state,
|
|
474
457
|
color = _this$state3.color,
|
|
475
458
|
text = _this$state3.text;
|
|
476
|
-
var
|
|
459
|
+
var isSuggestionsEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_status_popup_suggestions');
|
|
477
460
|
var isUpdateStatusColorsEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_update_status_colors') || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_update_status_colors_jira');
|
|
478
|
-
var suggestedStatusList = suggestedStatuses !== null && suggestedStatuses !== void 0 && suggestedStatuses.length &&
|
|
479
|
-
css: [suggestedStatusesContainerStyles,
|
|
461
|
+
var suggestedStatusList = suggestedStatuses !== null && suggestedStatuses !== void 0 && suggestedStatuses.length && isSuggestionsEnabled ? (0, _react2.jsx)("div", {
|
|
462
|
+
css: [suggestedStatusesContainerStyles, isUpdateStatusColorsEnabled || (0, _fg.fg)('platform_editor_status_popup_suggestions_patch_3') ? suggestedStatusesContainerAlignedBottomPaddingStyles : undefined],
|
|
480
463
|
"data-suggested-status-list": true
|
|
481
464
|
}, suggestedStatuses.map(function (suggestedStatus, index) {
|
|
482
465
|
return (0, _react2.jsx)("div", {
|
|
483
|
-
css:
|
|
466
|
+
css: suggestedStatusButtonWrapperStyles,
|
|
484
467
|
key: "".concat(suggestedStatus.color, ":").concat(suggestedStatus.text)
|
|
485
468
|
}, (0, _react2.jsx)("button", {
|
|
486
469
|
type: "button",
|
|
487
|
-
css:
|
|
470
|
+
css: suggestedStatusButtonStyles,
|
|
488
471
|
onClick: function onClick() {
|
|
489
472
|
return _this3.onSuggestedStatusClick(suggestedStatus, index + 1);
|
|
490
473
|
},
|
|
@@ -497,7 +480,7 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
|
|
|
497
480
|
text: suggestedStatus.displayText
|
|
498
481
|
})));
|
|
499
482
|
})) : null;
|
|
500
|
-
var pickerContent = (0, _react2.jsx)(
|
|
483
|
+
var pickerContent = (0, _react2.jsx)(_picker.StatusPicker, {
|
|
501
484
|
autoFocus: isNew || focusStatusInput,
|
|
502
485
|
selectedColor: color,
|
|
503
486
|
text: text,
|
|
@@ -506,13 +489,13 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
|
|
|
506
489
|
onTextChanged: this.onTextChanged,
|
|
507
490
|
onEnter: this.onEnter,
|
|
508
491
|
palette: isUpdateStatusColorsEnabled ? 'extended' : 'default',
|
|
509
|
-
scrollableContent:
|
|
510
|
-
})
|
|
492
|
+
scrollableContent: suggestedStatusList
|
|
493
|
+
});
|
|
511
494
|
return (0, _react2.jsx)(_userIntent.UserIntentPopupWrapper, {
|
|
512
495
|
api: api,
|
|
513
496
|
userIntent: "statusPickerOpen"
|
|
514
497
|
}, (0, _react2.jsx)("div", {
|
|
515
|
-
css: [(0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? pickerContainerStylesTeam26 : pickerContainerStyles,
|
|
498
|
+
css: [(0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? pickerContainerStylesTeam26 : pickerContainerStyles, isSuggestionsEnabled && isUpdateStatusColorsEnabled ? statusPickerWidthStyles : undefined, isSuggestionsEnabled && !isUpdateStatusColorsEnabled ? statusPickerWidthStylesOld : undefined, isSuggestionsEnabled && !!suggestedStatusList && (isUpdateStatusColorsEnabled || (0, _fg.fg)('platform_editor_status_popup_suggestions_patch_3')) ? pickerContainerNoBottomPaddingStyles : undefined],
|
|
516
499
|
role: "none",
|
|
517
500
|
ref: this.setRef(setOutsideClickTargetRef),
|
|
518
501
|
onClick: this.handlePopupClick,
|
|
@@ -542,7 +525,7 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
|
|
|
542
525
|
handleClickOutside: this.handleClickOutside,
|
|
543
526
|
handleEscapeKeydown: this.handleEscapeKeydown,
|
|
544
527
|
zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
|
|
545
|
-
fitHeight: (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_status_popup_suggestions')
|
|
528
|
+
fitHeight: (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_status_popup_suggestions') ? fitHeight : 40,
|
|
546
529
|
mountTo: mountTo,
|
|
547
530
|
boundariesElement: boundariesElement,
|
|
548
531
|
scrollableElement: scrollableElement,
|
|
@@ -4,7 +4,7 @@ import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
|
|
|
4
4
|
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
5
5
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
6
6
|
import { commitStatusPicker, updateStatus } from '../pm-plugins/actions';
|
|
7
|
-
import { getSuggestedStatuses
|
|
7
|
+
import { getSuggestedStatuses } from './getSuggestedStatuses';
|
|
8
8
|
import StatusPicker from './statusPicker';
|
|
9
9
|
/** Renders the status picker popup for the currently selected status node. */
|
|
10
10
|
export function ContentComponent({
|
|
@@ -83,7 +83,6 @@ export function ContentComponent({
|
|
|
83
83
|
text
|
|
84
84
|
},
|
|
85
85
|
doc: editorView.state.doc,
|
|
86
|
-
limit: fg('platform_editor_status_popup_suggestions_patch_1') ? MAX_SUGGESTED_STATUSES : MAX_SUGGESTED_STATUSES_OLD,
|
|
87
86
|
shouldUppercaseText: fg('platform-dst-lozenge-tag-badge-visual-uplifts')
|
|
88
87
|
});
|
|
89
88
|
}, [showStatusPickerAt, editorView.state.doc]);
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import { getLozengeAppearance } from '@atlaskit/status/status-colors';
|
|
2
2
|
export const MAX_SUGGESTED_STATUSES = 20;
|
|
3
|
-
// Remove when cleaning up `platform_editor_status_popup_suggestions_patch_1`.
|
|
4
|
-
export const MAX_SUGGESTED_STATUSES_OLD = 7;
|
|
5
3
|
|
|
6
4
|
// `color` may be a legacy name or a hex value that render the same hue (e.g. `green` and
|
|
7
5
|
// `#D3F1A7` both resolve to `accent-lime`), so the key is built from the resolved appearance
|
|
@@ -82,9 +82,10 @@ const suggestedStatusesContainerAlignedBottomPaddingStyles = css({
|
|
|
82
82
|
const suggestedStatusesContainerStyles = css({
|
|
83
83
|
display: 'flex',
|
|
84
84
|
flexDirection: 'column',
|
|
85
|
-
gap: "var(--ds-space-
|
|
85
|
+
gap: "var(--ds-space-050, 4px)",
|
|
86
86
|
margin: 0,
|
|
87
|
-
padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-050, 4px)"}
|
|
87
|
+
padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-050, 4px)"}`,
|
|
88
|
+
paddingLeft: "var(--ds-space-100, 8px)"
|
|
88
89
|
});
|
|
89
90
|
|
|
90
91
|
// Fixed input plus capped scrolling color controls and suggestions. The ten-color picker is
|
|
@@ -103,31 +104,20 @@ const statusPickerWidthStylesOld = css({
|
|
|
103
104
|
const statusPickerWidthStyles = css({
|
|
104
105
|
width: `${STATUS_PICKER_TEN_COLOR_CONTENT_WIDTH}px`
|
|
105
106
|
});
|
|
106
|
-
|
|
107
|
-
// When cleaning up `platform_editor_status_popup_suggestions_patch_1`, merge this into
|
|
108
|
-
// `suggestedStatusesContainerStyles` and remove its conditional style array.
|
|
109
|
-
const suggestedStatusesContainerPatchStyles = css({
|
|
110
|
-
gap: "var(--ds-space-050, 4px)",
|
|
111
|
-
paddingLeft: "var(--ds-space-100, 8px)"
|
|
112
|
-
});
|
|
113
107
|
const suggestedStatusButtonStyles = css({
|
|
114
108
|
background: 'transparent',
|
|
115
109
|
border: 0,
|
|
116
110
|
borderRadius: "var(--ds-radius-small, 3px)",
|
|
117
111
|
cursor: 'pointer',
|
|
118
112
|
justifyContent: 'flex-start',
|
|
113
|
+
// Allow this flex item to shrink so long statuses can truncate.
|
|
114
|
+
minWidth: 0,
|
|
119
115
|
padding: 0,
|
|
120
116
|
'&:focus-visible': {
|
|
121
117
|
outline: `2px solid ${"var(--ds-border-focused, #0C66E4)"}`,
|
|
122
118
|
outlineOffset: "var(--ds-space-025, 2px)"
|
|
123
119
|
}
|
|
124
120
|
});
|
|
125
|
-
|
|
126
|
-
// Remove when cleaning up `platform_editor_status_popup_suggestions_patch_1`.
|
|
127
|
-
const suggestedStatusButtonOldStyles = css({
|
|
128
|
-
display: 'flex',
|
|
129
|
-
width: '100%'
|
|
130
|
-
});
|
|
131
121
|
const suggestedStatusButtonWrapperStyles = css({
|
|
132
122
|
alignSelf: 'flex-start',
|
|
133
123
|
borderWidth: "var(--ds-border-width, 1px)",
|
|
@@ -147,13 +137,6 @@ const suggestedStatusButtonWrapperStyles = css({
|
|
|
147
137
|
}
|
|
148
138
|
});
|
|
149
139
|
|
|
150
|
-
// When cleaning up `platform_editor_status_popup_suggestions_patch_1`, merge this into
|
|
151
|
-
// `suggestedStatusButtonStyles` and remove its conditional style array.
|
|
152
|
-
const suggestedStatusButtonPatchStyles = css({
|
|
153
|
-
// Allow this flex item to shrink so long statuses can truncate.
|
|
154
|
-
minWidth: 0
|
|
155
|
-
});
|
|
156
|
-
|
|
157
140
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
158
141
|
class StatusPickerWithIntl extends React.Component {
|
|
159
142
|
constructor(props) {
|
|
@@ -447,17 +430,17 @@ class StatusPickerWithIntl extends React.Component {
|
|
|
447
430
|
color,
|
|
448
431
|
text
|
|
449
432
|
} = this.state;
|
|
450
|
-
const
|
|
433
|
+
const isSuggestionsEnabled = isExperimentEnabled('platform_editor_status_popup_suggestions');
|
|
451
434
|
const isUpdateStatusColorsEnabled = isExperimentEnabled('platform_editor_update_status_colors') || isExperimentEnabled('platform_editor_update_status_colors_jira');
|
|
452
|
-
const suggestedStatusList = suggestedStatuses !== null && suggestedStatuses !== void 0 && suggestedStatuses.length &&
|
|
453
|
-
css: [suggestedStatusesContainerStyles,
|
|
435
|
+
const suggestedStatusList = suggestedStatuses !== null && suggestedStatuses !== void 0 && suggestedStatuses.length && isSuggestionsEnabled ? jsx("div", {
|
|
436
|
+
css: [suggestedStatusesContainerStyles, isUpdateStatusColorsEnabled || fg('platform_editor_status_popup_suggestions_patch_3') ? suggestedStatusesContainerAlignedBottomPaddingStyles : undefined],
|
|
454
437
|
"data-suggested-status-list": true
|
|
455
438
|
}, suggestedStatuses.map((suggestedStatus, index) => jsx("div", {
|
|
456
|
-
css:
|
|
439
|
+
css: suggestedStatusButtonWrapperStyles,
|
|
457
440
|
key: `${suggestedStatus.color}:${suggestedStatus.text}`
|
|
458
441
|
}, jsx("button", {
|
|
459
442
|
type: "button",
|
|
460
|
-
css:
|
|
443
|
+
css: suggestedStatusButtonStyles,
|
|
461
444
|
onClick: () => this.onSuggestedStatusClick(suggestedStatus, index + 1),
|
|
462
445
|
onKeyDown: this.handleSuggestedStatusKeyDown,
|
|
463
446
|
"aria-label": suggestedStatus.displayText,
|
|
@@ -467,7 +450,7 @@ class StatusPickerWithIntl extends React.Component {
|
|
|
467
450
|
isConstrainedToParent: true,
|
|
468
451
|
text: suggestedStatus.displayText
|
|
469
452
|
}))))) : null;
|
|
470
|
-
const pickerContent = jsx(
|
|
453
|
+
const pickerContent = jsx(AkStatusPicker, {
|
|
471
454
|
autoFocus: isNew || focusStatusInput,
|
|
472
455
|
selectedColor: color,
|
|
473
456
|
text: text,
|
|
@@ -476,13 +459,13 @@ class StatusPickerWithIntl extends React.Component {
|
|
|
476
459
|
onTextChanged: this.onTextChanged,
|
|
477
460
|
onEnter: this.onEnter,
|
|
478
461
|
palette: isUpdateStatusColorsEnabled ? 'extended' : 'default',
|
|
479
|
-
scrollableContent:
|
|
480
|
-
})
|
|
462
|
+
scrollableContent: suggestedStatusList
|
|
463
|
+
});
|
|
481
464
|
return jsx(UserIntentPopupWrapper, {
|
|
482
465
|
api: api,
|
|
483
466
|
userIntent: "statusPickerOpen"
|
|
484
467
|
}, jsx("div", {
|
|
485
|
-
css: [fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? pickerContainerStylesTeam26 : pickerContainerStyles,
|
|
468
|
+
css: [fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? pickerContainerStylesTeam26 : pickerContainerStyles, isSuggestionsEnabled && isUpdateStatusColorsEnabled ? statusPickerWidthStyles : undefined, isSuggestionsEnabled && !isUpdateStatusColorsEnabled ? statusPickerWidthStylesOld : undefined, isSuggestionsEnabled && !!suggestedStatusList && (isUpdateStatusColorsEnabled || fg('platform_editor_status_popup_suggestions_patch_3')) ? pickerContainerNoBottomPaddingStyles : undefined],
|
|
486
469
|
role: "none",
|
|
487
470
|
ref: this.setRef(setOutsideClickTargetRef),
|
|
488
471
|
onClick: this.handlePopupClick,
|
|
@@ -511,7 +494,7 @@ class StatusPickerWithIntl extends React.Component {
|
|
|
511
494
|
handleClickOutside: this.handleClickOutside,
|
|
512
495
|
handleEscapeKeydown: this.handleEscapeKeydown,
|
|
513
496
|
zIndex: akEditorFloatingDialogZIndex,
|
|
514
|
-
fitHeight: isExperimentEnabled('platform_editor_status_popup_suggestions')
|
|
497
|
+
fitHeight: isExperimentEnabled('platform_editor_status_popup_suggestions') ? fitHeight : 40,
|
|
515
498
|
mountTo: mountTo,
|
|
516
499
|
boundariesElement: boundariesElement,
|
|
517
500
|
scrollableElement: scrollableElement,
|
|
@@ -7,7 +7,7 @@ import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
|
|
|
7
7
|
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
8
8
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
9
9
|
import { commitStatusPicker, updateStatus } from '../pm-plugins/actions';
|
|
10
|
-
import { getSuggestedStatuses
|
|
10
|
+
import { getSuggestedStatuses } from './getSuggestedStatuses';
|
|
11
11
|
import StatusPicker from './statusPicker';
|
|
12
12
|
/** Renders the status picker popup for the currently selected status node. */
|
|
13
13
|
export function ContentComponent(_ref) {
|
|
@@ -86,7 +86,6 @@ export function ContentComponent(_ref) {
|
|
|
86
86
|
text: text
|
|
87
87
|
},
|
|
88
88
|
doc: editorView.state.doc,
|
|
89
|
-
limit: fg('platform_editor_status_popup_suggestions_patch_1') ? MAX_SUGGESTED_STATUSES : MAX_SUGGESTED_STATUSES_OLD,
|
|
90
89
|
shouldUppercaseText: fg('platform-dst-lozenge-tag-badge-visual-uplifts')
|
|
91
90
|
});
|
|
92
91
|
}, [showStatusPickerAt, editorView.state.doc]);
|
|
@@ -5,8 +5,6 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
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
6
|
import { getLozengeAppearance } from '@atlaskit/status/status-colors';
|
|
7
7
|
export var MAX_SUGGESTED_STATUSES = 20;
|
|
8
|
-
// Remove when cleaning up `platform_editor_status_popup_suggestions_patch_1`.
|
|
9
|
-
export var MAX_SUGGESTED_STATUSES_OLD = 7;
|
|
10
8
|
|
|
11
9
|
// `color` may be a legacy name or a hex value that render the same hue (e.g. `green` and
|
|
12
10
|
// `#D3F1A7` both resolve to `accent-lime`), so the key is built from the resolved appearance
|
|
@@ -89,9 +89,10 @@ var suggestedStatusesContainerAlignedBottomPaddingStyles = css({
|
|
|
89
89
|
var suggestedStatusesContainerStyles = css({
|
|
90
90
|
display: 'flex',
|
|
91
91
|
flexDirection: 'column',
|
|
92
|
-
gap: "var(--ds-space-
|
|
92
|
+
gap: "var(--ds-space-050, 4px)",
|
|
93
93
|
margin: 0,
|
|
94
|
-
padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-150, 12px)", " ", "var(--ds-space-050, 4px)")
|
|
94
|
+
padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-150, 12px)", " ", "var(--ds-space-050, 4px)"),
|
|
95
|
+
paddingLeft: "var(--ds-space-100, 8px)"
|
|
95
96
|
});
|
|
96
97
|
|
|
97
98
|
// Fixed input plus capped scrolling color controls and suggestions. The ten-color picker is
|
|
@@ -110,31 +111,20 @@ var statusPickerWidthStylesOld = css({
|
|
|
110
111
|
var statusPickerWidthStyles = css({
|
|
111
112
|
width: "".concat(STATUS_PICKER_TEN_COLOR_CONTENT_WIDTH, "px")
|
|
112
113
|
});
|
|
113
|
-
|
|
114
|
-
// When cleaning up `platform_editor_status_popup_suggestions_patch_1`, merge this into
|
|
115
|
-
// `suggestedStatusesContainerStyles` and remove its conditional style array.
|
|
116
|
-
var suggestedStatusesContainerPatchStyles = css({
|
|
117
|
-
gap: "var(--ds-space-050, 4px)",
|
|
118
|
-
paddingLeft: "var(--ds-space-100, 8px)"
|
|
119
|
-
});
|
|
120
114
|
var suggestedStatusButtonStyles = css({
|
|
121
115
|
background: 'transparent',
|
|
122
116
|
border: 0,
|
|
123
117
|
borderRadius: "var(--ds-radius-small, 3px)",
|
|
124
118
|
cursor: 'pointer',
|
|
125
119
|
justifyContent: 'flex-start',
|
|
120
|
+
// Allow this flex item to shrink so long statuses can truncate.
|
|
121
|
+
minWidth: 0,
|
|
126
122
|
padding: 0,
|
|
127
123
|
'&:focus-visible': {
|
|
128
124
|
outline: "2px solid ".concat("var(--ds-border-focused, #0C66E4)"),
|
|
129
125
|
outlineOffset: "var(--ds-space-025, 2px)"
|
|
130
126
|
}
|
|
131
127
|
});
|
|
132
|
-
|
|
133
|
-
// Remove when cleaning up `platform_editor_status_popup_suggestions_patch_1`.
|
|
134
|
-
var suggestedStatusButtonOldStyles = css({
|
|
135
|
-
display: 'flex',
|
|
136
|
-
width: '100%'
|
|
137
|
-
});
|
|
138
128
|
var suggestedStatusButtonWrapperStyles = css({
|
|
139
129
|
alignSelf: 'flex-start',
|
|
140
130
|
borderWidth: "var(--ds-border-width, 1px)",
|
|
@@ -154,13 +144,6 @@ var suggestedStatusButtonWrapperStyles = css({
|
|
|
154
144
|
}
|
|
155
145
|
});
|
|
156
146
|
|
|
157
|
-
// When cleaning up `platform_editor_status_popup_suggestions_patch_1`, merge this into
|
|
158
|
-
// `suggestedStatusButtonStyles` and remove its conditional style array.
|
|
159
|
-
var suggestedStatusButtonPatchStyles = css({
|
|
160
|
-
// Allow this flex item to shrink so long statuses can truncate.
|
|
161
|
-
minWidth: 0
|
|
162
|
-
});
|
|
163
|
-
|
|
164
147
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
165
148
|
var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
|
|
166
149
|
function StatusPickerWithIntl(props) {
|
|
@@ -470,18 +453,18 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
|
|
|
470
453
|
var _this$state3 = this.state,
|
|
471
454
|
color = _this$state3.color,
|
|
472
455
|
text = _this$state3.text;
|
|
473
|
-
var
|
|
456
|
+
var isSuggestionsEnabled = isExperimentEnabled('platform_editor_status_popup_suggestions');
|
|
474
457
|
var isUpdateStatusColorsEnabled = isExperimentEnabled('platform_editor_update_status_colors') || isExperimentEnabled('platform_editor_update_status_colors_jira');
|
|
475
|
-
var suggestedStatusList = suggestedStatuses !== null && suggestedStatuses !== void 0 && suggestedStatuses.length &&
|
|
476
|
-
css: [suggestedStatusesContainerStyles,
|
|
458
|
+
var suggestedStatusList = suggestedStatuses !== null && suggestedStatuses !== void 0 && suggestedStatuses.length && isSuggestionsEnabled ? jsx("div", {
|
|
459
|
+
css: [suggestedStatusesContainerStyles, isUpdateStatusColorsEnabled || fg('platform_editor_status_popup_suggestions_patch_3') ? suggestedStatusesContainerAlignedBottomPaddingStyles : undefined],
|
|
477
460
|
"data-suggested-status-list": true
|
|
478
461
|
}, suggestedStatuses.map(function (suggestedStatus, index) {
|
|
479
462
|
return jsx("div", {
|
|
480
|
-
css:
|
|
463
|
+
css: suggestedStatusButtonWrapperStyles,
|
|
481
464
|
key: "".concat(suggestedStatus.color, ":").concat(suggestedStatus.text)
|
|
482
465
|
}, jsx("button", {
|
|
483
466
|
type: "button",
|
|
484
|
-
css:
|
|
467
|
+
css: suggestedStatusButtonStyles,
|
|
485
468
|
onClick: function onClick() {
|
|
486
469
|
return _this3.onSuggestedStatusClick(suggestedStatus, index + 1);
|
|
487
470
|
},
|
|
@@ -494,7 +477,7 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
|
|
|
494
477
|
text: suggestedStatus.displayText
|
|
495
478
|
})));
|
|
496
479
|
})) : null;
|
|
497
|
-
var pickerContent = jsx(
|
|
480
|
+
var pickerContent = jsx(AkStatusPicker, {
|
|
498
481
|
autoFocus: isNew || focusStatusInput,
|
|
499
482
|
selectedColor: color,
|
|
500
483
|
text: text,
|
|
@@ -503,13 +486,13 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
|
|
|
503
486
|
onTextChanged: this.onTextChanged,
|
|
504
487
|
onEnter: this.onEnter,
|
|
505
488
|
palette: isUpdateStatusColorsEnabled ? 'extended' : 'default',
|
|
506
|
-
scrollableContent:
|
|
507
|
-
})
|
|
489
|
+
scrollableContent: suggestedStatusList
|
|
490
|
+
});
|
|
508
491
|
return jsx(UserIntentPopupWrapper, {
|
|
509
492
|
api: api,
|
|
510
493
|
userIntent: "statusPickerOpen"
|
|
511
494
|
}, jsx("div", {
|
|
512
|
-
css: [fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? pickerContainerStylesTeam26 : pickerContainerStyles,
|
|
495
|
+
css: [fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? pickerContainerStylesTeam26 : pickerContainerStyles, isSuggestionsEnabled && isUpdateStatusColorsEnabled ? statusPickerWidthStyles : undefined, isSuggestionsEnabled && !isUpdateStatusColorsEnabled ? statusPickerWidthStylesOld : undefined, isSuggestionsEnabled && !!suggestedStatusList && (isUpdateStatusColorsEnabled || fg('platform_editor_status_popup_suggestions_patch_3')) ? pickerContainerNoBottomPaddingStyles : undefined],
|
|
513
496
|
role: "none",
|
|
514
497
|
ref: this.setRef(setOutsideClickTargetRef),
|
|
515
498
|
onClick: this.handlePopupClick,
|
|
@@ -539,7 +522,7 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
|
|
|
539
522
|
handleClickOutside: this.handleClickOutside,
|
|
540
523
|
handleEscapeKeydown: this.handleEscapeKeydown,
|
|
541
524
|
zIndex: akEditorFloatingDialogZIndex,
|
|
542
|
-
fitHeight: isExperimentEnabled('platform_editor_status_popup_suggestions')
|
|
525
|
+
fitHeight: isExperimentEnabled('platform_editor_status_popup_suggestions') ? fitHeight : 40,
|
|
543
526
|
mountTo: mountTo,
|
|
544
527
|
boundariesElement: boundariesElement,
|
|
545
528
|
scrollableElement: scrollableElement,
|
|
@@ -11,6 +11,5 @@ type GetSuggestedStatusesArgs = {
|
|
|
11
11
|
shouldUppercaseText?: boolean;
|
|
12
12
|
};
|
|
13
13
|
export declare const MAX_SUGGESTED_STATUSES = 20;
|
|
14
|
-
export declare const MAX_SUGGESTED_STATUSES_OLD = 7;
|
|
15
14
|
export declare const getSuggestedStatuses: ({ currentPos, currentStatus, doc, limit, shouldUppercaseText, }: GetSuggestedStatusesArgs) => SuggestedStatus[];
|
|
16
15
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-status",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "27.0.0",
|
|
4
4
|
"description": "Status plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -24,11 +24,11 @@
|
|
|
24
24
|
"@atlaskit/adf-schema": "^57.7.0",
|
|
25
25
|
"@atlaskit/analytics-next": "^12.6.0",
|
|
26
26
|
"@atlaskit/browser-apis": "^1.2.0",
|
|
27
|
-
"@atlaskit/editor-plugin-analytics": "^
|
|
28
|
-
"@atlaskit/editor-plugin-block-controls": "^
|
|
29
|
-
"@atlaskit/editor-plugin-block-menu": "^
|
|
30
|
-
"@atlaskit/editor-plugin-selection": "^
|
|
31
|
-
"@atlaskit/editor-plugin-ui-control-registry": "^
|
|
27
|
+
"@atlaskit/editor-plugin-analytics": "^26.0.0",
|
|
28
|
+
"@atlaskit/editor-plugin-block-controls": "^27.0.0",
|
|
29
|
+
"@atlaskit/editor-plugin-block-menu": "^25.0.0",
|
|
30
|
+
"@atlaskit/editor-plugin-selection": "^26.0.0",
|
|
31
|
+
"@atlaskit/editor-plugin-ui-control-registry": "^20.0.0",
|
|
32
32
|
"@atlaskit/editor-prosemirror": "^9.0.0",
|
|
33
33
|
"@atlaskit/editor-shared-styles": "^4.3.0",
|
|
34
34
|
"@atlaskit/editor-toolbar": "^2.8.0",
|
|
@@ -38,14 +38,14 @@
|
|
|
38
38
|
"@atlaskit/platform-feature-experiments": "^0.3.0",
|
|
39
39
|
"@atlaskit/platform-feature-flags": "^2.2.0",
|
|
40
40
|
"@atlaskit/status": "^5.13.0",
|
|
41
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
42
|
-
"@atlaskit/tokens": "^20.
|
|
41
|
+
"@atlaskit/tmp-editor-statsig": "^227.0.0",
|
|
42
|
+
"@atlaskit/tokens": "^20.4.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": "^
|
|
48
|
+
"@atlaskit/editor-common": "^130.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"
|
|
@@ -64,9 +64,6 @@
|
|
|
64
64
|
"platform-dst-lozenge-tag-badge-visual-uplifts": {
|
|
65
65
|
"type": "boolean"
|
|
66
66
|
},
|
|
67
|
-
"platform_editor_status_popup_suggestions_patch_1": {
|
|
68
|
-
"type": "boolean"
|
|
69
|
-
},
|
|
70
67
|
"platform_editor_status_popup_suggestions_patch_3": {
|
|
71
68
|
"type": "boolean"
|
|
72
69
|
}
|