@atlaskit/editor-plugin-status 22.0.0 → 22.0.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.
Files changed (5) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/cjs/ui/statusPicker.js +25 -5
  3. package/dist/es2019/ui/statusPicker.js +25 -5
  4. package/dist/esm/ui/statusPicker.js +25 -5
  5. package/package.json +6 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @atlaskit/editor-plugin-status
2
2
 
3
+ ## 22.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`e0164ac9572f8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e0164ac9572f8) -
8
+ Reduce the status picker's suggestion list height to show 5.5 suggestions above the fold before
9
+ scrolling, behind platform_editor_status_popup_suggestions_patch_3 for the six-color palette; the
10
+ ten-color palette is updated directly since its update_status experiment has not rolled out.
11
+ - Updated dependencies
12
+
3
13
  ## 22.0.0
4
14
 
5
15
  ### Patch Changes
package/dist/cjs/ui/statusPicker.js CHANGED
@@ -71,6 +71,24 @@ var pickerContainerStylesTeam26 = (0, _react2.css)({
71
71
  outline: 'none'
72
72
  }
73
73
  });
74
+
75
+ // Remove when cleaning up `platform_editor_status_popup_suggestions_patch_3`: merge
76
+ // `paddingBottom: 0` into `pickerContainerStyles`/`pickerContainerStylesTeam26`. The
77
+ // scrollable suggestions area already supplies its own trailing padding once actually
78
+ // scrolled to the end, so the outer wrapper's own bottom padding is only ever extra
79
+ // whitespace below the (fixed-height) scroll box, most visible right under the half-cut
80
+ // row when unscrolled.
81
+ var pickerContainerNoBottomPaddingStyles = (0, _react2.css)({
82
+ paddingBottom: 0
83
+ });
84
+
85
+ // Remove when cleaning up `platform_editor_status_popup_suggestions_patch_3`: merge into
86
+ // `suggestedStatusesContainerStyles`. Matches the list's own top padding (`space.100`) so the
87
+ // gap above the first suggestion and the gap below the last (once scrolled to the true end)
88
+ // are the same size.
89
+ var suggestedStatusesContainerAlignedBottomPaddingStyles = (0, _react2.css)({
90
+ paddingBottom: "var(--ds-space-100, 8px)"
91
+ });
74
92
  var suggestedStatusesContainerStyles = (0, _react2.css)({
75
93
  display: 'flex',
76
94
  flexDirection: 'column',
@@ -81,8 +99,10 @@ var suggestedStatusesContainerStyles = (0, _react2.css)({
81
99
 
82
100
  // Fixed input plus capped scrolling color controls and suggestions. The ten-color picker is
83
101
  // taller because it carries a second swatch row.
84
- var STATUS_PICKER_FIT_HEIGHT = 288;
85
- var STATUS_PICKER_TEN_COLOR_FIT_HEIGHT = 292;
102
+ var STATUS_PICKER_FIT_HEIGHT = 236;
103
+ // Remove when cleaning up `platform_editor_status_popup_suggestions_patch_3`.
104
+ var STATUS_PICKER_FIT_HEIGHT_OLD = 288;
105
+ var STATUS_PICKER_TEN_COLOR_FIT_HEIGHT = 268;
86
106
  // Seven suggestions fit below the color palette before the content starts scrolling.
87
107
  var MAX_SUGGESTIONS_WITHOUT_SCROLLBAR = 7;
88
108
  // ColorPalette: swatches per row * 32px slot + 16px inline margin.
@@ -463,7 +483,7 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
463
483
  var suggestionsPatchEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_status_popup_suggestions') && (0, _fg.fg)('platform_editor_status_popup_suggestions_patch_1');
464
484
  var isUpdateStatusColorsEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_update_status_colors');
465
485
  var suggestedStatusList = suggestedStatuses !== null && suggestedStatuses !== void 0 && suggestedStatuses.length && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_status_popup_suggestions') ? (0, _react2.jsx)("div", {
466
- css: [suggestedStatusesContainerStyles, suggestionsPatchEnabled ? suggestedStatusesContainerPatchStyles : undefined],
486
+ css: [suggestedStatusesContainerStyles, suggestionsPatchEnabled ? suggestedStatusesContainerPatchStyles : undefined, suggestionsPatchEnabled && (isUpdateStatusColorsEnabled || (0, _fg.fg)('platform_editor_status_popup_suggestions_patch_3')) ? suggestedStatusesContainerAlignedBottomPaddingStyles : undefined],
467
487
  "data-suggested-status-list": true
468
488
  }, suggestedStatuses.map(function (suggestedStatus, index) {
469
489
  return (0, _react2.jsx)("div", {
@@ -499,7 +519,7 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
499
519
  api: api,
500
520
  userIntent: "statusPickerOpen"
501
521
  }, (0, _react2.jsx)("div", {
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],
522
+ 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, suggestionsPatchEnabled && !!suggestedStatusList && (isUpdateStatusColorsEnabled || (0, _fg.fg)('platform_editor_status_popup_suggestions_patch_3')) ? pickerContainerNoBottomPaddingStyles : undefined],
503
523
  role: "none",
504
524
  ref: this.setRef(setOutsideClickTargetRef),
505
525
  onClick: this.handlePopupClick,
@@ -519,7 +539,7 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
519
539
  if (!(editorView !== null && editorView !== void 0 && editorView.editable)) {
520
540
  return null;
521
541
  }
522
- var fitHeight = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_update_status_colors') ? STATUS_PICKER_TEN_COLOR_FIT_HEIGHT : STATUS_PICKER_FIT_HEIGHT;
542
+ var fitHeight = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_update_status_colors') ? STATUS_PICKER_TEN_COLOR_FIT_HEIGHT : (0, _fg.fg)('platform_editor_status_popup_suggestions_patch_3') ? STATUS_PICKER_FIT_HEIGHT : STATUS_PICKER_FIT_HEIGHT_OLD;
523
543
  return target && (0, _react2.jsx)(PopupWithListeners, {
524
544
  ariaLabel: intl.formatMessage(_messages.statusMessages.statusEditorLabel),
525
545
  target: target
package/dist/es2019/ui/statusPicker.js CHANGED
@@ -61,6 +61,24 @@ const pickerContainerStylesTeam26 = css({
61
61
  outline: 'none'
62
62
  }
63
63
  });
64
+
65
+ // Remove when cleaning up `platform_editor_status_popup_suggestions_patch_3`: merge
66
+ // `paddingBottom: 0` into `pickerContainerStyles`/`pickerContainerStylesTeam26`. The
67
+ // scrollable suggestions area already supplies its own trailing padding once actually
68
+ // scrolled to the end, so the outer wrapper's own bottom padding is only ever extra
69
+ // whitespace below the (fixed-height) scroll box, most visible right under the half-cut
70
+ // row when unscrolled.
71
+ const pickerContainerNoBottomPaddingStyles = css({
72
+ paddingBottom: 0
73
+ });
74
+
75
+ // Remove when cleaning up `platform_editor_status_popup_suggestions_patch_3`: merge into
76
+ // `suggestedStatusesContainerStyles`. Matches the list's own top padding (`space.100`) so the
77
+ // gap above the first suggestion and the gap below the last (once scrolled to the true end)
78
+ // are the same size.
79
+ const suggestedStatusesContainerAlignedBottomPaddingStyles = css({
80
+ paddingBottom: "var(--ds-space-100, 8px)"
81
+ });
64
82
  const suggestedStatusesContainerStyles = css({
65
83
  display: 'flex',
66
84
  flexDirection: 'column',
@@ -71,8 +89,10 @@ const suggestedStatusesContainerStyles = css({
71
89
 
72
90
  // Fixed input plus capped scrolling color controls and suggestions. The ten-color picker is
73
91
  // taller because it carries a second swatch row.
74
- const STATUS_PICKER_FIT_HEIGHT = 288;
75
- const STATUS_PICKER_TEN_COLOR_FIT_HEIGHT = 292;
92
+ const STATUS_PICKER_FIT_HEIGHT = 236;
93
+ // Remove when cleaning up `platform_editor_status_popup_suggestions_patch_3`.
94
+ const STATUS_PICKER_FIT_HEIGHT_OLD = 288;
95
+ const STATUS_PICKER_TEN_COLOR_FIT_HEIGHT = 268;
76
96
  // Seven suggestions fit below the color palette before the content starts scrolling.
77
97
  const MAX_SUGGESTIONS_WITHOUT_SCROLLBAR = 7;
78
98
  // ColorPalette: swatches per row * 32px slot + 16px inline margin.
@@ -437,7 +457,7 @@ class StatusPickerWithIntl extends React.Component {
437
457
  const suggestionsPatchEnabled = isExperimentEnabled('platform_editor_status_popup_suggestions') && fg('platform_editor_status_popup_suggestions_patch_1');
438
458
  const isUpdateStatusColorsEnabled = isExperimentEnabled('platform_editor_update_status_colors');
439
459
  const suggestedStatusList = suggestedStatuses !== null && suggestedStatuses !== void 0 && suggestedStatuses.length && isExperimentEnabled('platform_editor_status_popup_suggestions') ? jsx("div", {
440
- css: [suggestedStatusesContainerStyles, suggestionsPatchEnabled ? suggestedStatusesContainerPatchStyles : undefined],
460
+ css: [suggestedStatusesContainerStyles, suggestionsPatchEnabled ? suggestedStatusesContainerPatchStyles : undefined, suggestionsPatchEnabled && (isUpdateStatusColorsEnabled || fg('platform_editor_status_popup_suggestions_patch_3')) ? suggestedStatusesContainerAlignedBottomPaddingStyles : undefined],
441
461
  "data-suggested-status-list": true
442
462
  }, suggestedStatuses.map((suggestedStatus, index) => jsx("div", {
443
463
  css: suggestionsPatchEnabled ? suggestedStatusButtonWrapperStyles : undefined,
@@ -469,7 +489,7 @@ class StatusPickerWithIntl extends React.Component {
469
489
  api: api,
470
490
  userIntent: "statusPickerOpen"
471
491
  }, jsx("div", {
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],
492
+ 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, suggestionsPatchEnabled && !!suggestedStatusList && (isUpdateStatusColorsEnabled || fg('platform_editor_status_popup_suggestions_patch_3')) ? pickerContainerNoBottomPaddingStyles : undefined],
473
493
  role: "none",
474
494
  ref: this.setRef(setOutsideClickTargetRef),
475
495
  onClick: this.handlePopupClick,
@@ -488,7 +508,7 @@ class StatusPickerWithIntl extends React.Component {
488
508
  if (!(editorView !== null && editorView !== void 0 && editorView.editable)) {
489
509
  return null;
490
510
  }
491
- const fitHeight = isExperimentEnabled('platform_editor_update_status_colors') ? STATUS_PICKER_TEN_COLOR_FIT_HEIGHT : STATUS_PICKER_FIT_HEIGHT;
511
+ const fitHeight = isExperimentEnabled('platform_editor_update_status_colors') ? STATUS_PICKER_TEN_COLOR_FIT_HEIGHT : fg('platform_editor_status_popup_suggestions_patch_3') ? STATUS_PICKER_FIT_HEIGHT : STATUS_PICKER_FIT_HEIGHT_OLD;
492
512
  return target && jsx(PopupWithListeners, {
493
513
  ariaLabel: intl.formatMessage(messages.statusEditorLabel),
494
514
  target: target
package/dist/esm/ui/statusPicker.js CHANGED
@@ -68,6 +68,24 @@ var pickerContainerStylesTeam26 = css({
68
68
  outline: 'none'
69
69
  }
70
70
  });
71
+
72
+ // Remove when cleaning up `platform_editor_status_popup_suggestions_patch_3`: merge
73
+ // `paddingBottom: 0` into `pickerContainerStyles`/`pickerContainerStylesTeam26`. The
74
+ // scrollable suggestions area already supplies its own trailing padding once actually
75
+ // scrolled to the end, so the outer wrapper's own bottom padding is only ever extra
76
+ // whitespace below the (fixed-height) scroll box, most visible right under the half-cut
77
+ // row when unscrolled.
78
+ var pickerContainerNoBottomPaddingStyles = css({
79
+ paddingBottom: 0
80
+ });
81
+
82
+ // Remove when cleaning up `platform_editor_status_popup_suggestions_patch_3`: merge into
83
+ // `suggestedStatusesContainerStyles`. Matches the list's own top padding (`space.100`) so the
84
+ // gap above the first suggestion and the gap below the last (once scrolled to the true end)
85
+ // are the same size.
86
+ var suggestedStatusesContainerAlignedBottomPaddingStyles = css({
87
+ paddingBottom: "var(--ds-space-100, 8px)"
88
+ });
71
89
  var suggestedStatusesContainerStyles = css({
72
90
  display: 'flex',
73
91
  flexDirection: 'column',
@@ -78,8 +96,10 @@ var suggestedStatusesContainerStyles = css({
78
96
 
79
97
  // Fixed input plus capped scrolling color controls and suggestions. The ten-color picker is
80
98
  // taller because it carries a second swatch row.
81
- var STATUS_PICKER_FIT_HEIGHT = 288;
82
- var STATUS_PICKER_TEN_COLOR_FIT_HEIGHT = 292;
99
+ var STATUS_PICKER_FIT_HEIGHT = 236;
100
+ // Remove when cleaning up `platform_editor_status_popup_suggestions_patch_3`.
101
+ var STATUS_PICKER_FIT_HEIGHT_OLD = 288;
102
+ var STATUS_PICKER_TEN_COLOR_FIT_HEIGHT = 268;
83
103
  // Seven suggestions fit below the color palette before the content starts scrolling.
84
104
  var MAX_SUGGESTIONS_WITHOUT_SCROLLBAR = 7;
85
105
  // ColorPalette: swatches per row * 32px slot + 16px inline margin.
@@ -460,7 +480,7 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
460
480
  var suggestionsPatchEnabled = isExperimentEnabled('platform_editor_status_popup_suggestions') && fg('platform_editor_status_popup_suggestions_patch_1');
461
481
  var isUpdateStatusColorsEnabled = isExperimentEnabled('platform_editor_update_status_colors');
462
482
  var suggestedStatusList = suggestedStatuses !== null && suggestedStatuses !== void 0 && suggestedStatuses.length && isExperimentEnabled('platform_editor_status_popup_suggestions') ? jsx("div", {
463
- css: [suggestedStatusesContainerStyles, suggestionsPatchEnabled ? suggestedStatusesContainerPatchStyles : undefined],
483
+ css: [suggestedStatusesContainerStyles, suggestionsPatchEnabled ? suggestedStatusesContainerPatchStyles : undefined, suggestionsPatchEnabled && (isUpdateStatusColorsEnabled || fg('platform_editor_status_popup_suggestions_patch_3')) ? suggestedStatusesContainerAlignedBottomPaddingStyles : undefined],
464
484
  "data-suggested-status-list": true
465
485
  }, suggestedStatuses.map(function (suggestedStatus, index) {
466
486
  return jsx("div", {
@@ -496,7 +516,7 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
496
516
  api: api,
497
517
  userIntent: "statusPickerOpen"
498
518
  }, jsx("div", {
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],
519
+ 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, suggestionsPatchEnabled && !!suggestedStatusList && (isUpdateStatusColorsEnabled || fg('platform_editor_status_popup_suggestions_patch_3')) ? pickerContainerNoBottomPaddingStyles : undefined],
500
520
  role: "none",
501
521
  ref: this.setRef(setOutsideClickTargetRef),
502
522
  onClick: this.handlePopupClick,
@@ -516,7 +536,7 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
516
536
  if (!(editorView !== null && editorView !== void 0 && editorView.editable)) {
517
537
  return null;
518
538
  }
519
- var fitHeight = isExperimentEnabled('platform_editor_update_status_colors') ? STATUS_PICKER_TEN_COLOR_FIT_HEIGHT : STATUS_PICKER_FIT_HEIGHT;
539
+ var fitHeight = isExperimentEnabled('platform_editor_update_status_colors') ? STATUS_PICKER_TEN_COLOR_FIT_HEIGHT : fg('platform_editor_status_popup_suggestions_patch_3') ? STATUS_PICKER_FIT_HEIGHT : STATUS_PICKER_FIT_HEIGHT_OLD;
520
540
  return target && jsx(PopupWithListeners, {
521
541
  ariaLabel: intl.formatMessage(messages.statusEditorLabel),
522
542
  target: target
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-status",
3
- "version": "22.0.0",
3
+ "version": "22.0.1",
4
4
  "description": "Status plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.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.12.0",
41
- "@atlaskit/tmp-editor-statsig": "^205.0.0",
41
+ "@atlaskit/tmp-editor-statsig": "^206.0.0",
42
42
  "@atlaskit/tokens": "^20.0.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": "^125.0.0",
48
+ "@atlaskit/editor-common": "^125.1.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"
@@ -72,6 +72,9 @@
72
72
  },
73
73
  "platform_editor_status_popup_suggestions_patch_2": {
74
74
  "type": "boolean"
75
+ },
76
+ "platform_editor_status_popup_suggestions_patch_3": {
77
+ "type": "boolean"
75
78
  }
76
79
  }
77
80
  }