@atlaskit/editor-plugin-panel 4.2.5 → 4.2.6

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-panel
 
+## 4.2.6
+
+### Patch Changes
+
+- [#123966](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/123966)
+  [`980562a51a41f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/980562a51a41f) -
+  [ux] ED-26796 Change panel type buttons into dropdown
+- Updated dependencies
+
 ## 4.2.5
 
 ### Patch Changes

package/dist/cjs/ui/panelTypeDropdown.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.panelTypeDropdown = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _messages = require("@atlaskit/editor-common/messages");
+var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/cross-circle"));
+var _customize = _interopRequireDefault(require("@atlaskit/icon/core/customize"));
+var _discovery = _interopRequireDefault(require("@atlaskit/icon/core/discovery"));
+var _information = _interopRequireDefault(require("@atlaskit/icon/core/information"));
+var _success = _interopRequireDefault(require("@atlaskit/icon/core/success"));
+var _warning = _interopRequireDefault(require("@atlaskit/icon/core/warning"));
+var _actions = require("../editor-actions/actions");
+var panelTitleAndIcon = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _adfSchema.PanelType.INFO, {
+  title: _messages.panelMessages.info,
+  icon: (0, _information.default)({
+    label: 'info-icon',
+    color: "var(--ds-icon-information, #1D7AFC)"
+  })
+}), _adfSchema.PanelType.NOTE, {
+  title: _messages.panelMessages.note,
+  icon: (0, _discovery.default)({
+    label: 'note-icon',
+    color: "var(--ds-icon-discovery, #8270DB)"
+  })
+}), _adfSchema.PanelType.SUCCESS, {
+  title: _messages.panelMessages.success,
+  icon: (0, _success.default)({
+    label: 'success-icon',
+    color: "var(--ds-icon-success, #22A06B)"
+  })
+}), _adfSchema.PanelType.WARNING, {
+  title: _messages.panelMessages.warning,
+  icon: (0, _warning.default)({
+    label: 'warning-icon',
+    color: "var(--ds-icon-warning, #E56910)"
+  })
+}), _adfSchema.PanelType.ERROR, {
+  title: _messages.panelMessages.error,
+  icon: (0, _crossCircle.default)({
+    label: 'error-icon',
+    color: "var(--ds-icon-danger, #C9372C)"
+  })
+}), _adfSchema.PanelType.CUSTOM, {
+  title: _messages.panelMessages.custom,
+  icon: (0, _customize.default)({
+    label: 'custom-icon'
+  })
+});
+var panelTypeDropdown = exports.panelTypeDropdown = function panelTypeDropdown(_ref) {
+  var activePanelType = _ref.activePanelType,
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI,
+    formatMessage = _ref.formatMessage;
+  var dropdownOptions = [{
+    id: 'editor.panel.info',
+    icon: panelTitleAndIcon[_adfSchema.PanelType.INFO].icon,
+    onClick: (0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.INFO),
+    selected: activePanelType === _adfSchema.PanelType.INFO,
+    title: formatMessage(panelTitleAndIcon[_adfSchema.PanelType.INFO].title)
+  }, {
+    id: 'editor.panel.note',
+    icon: panelTitleAndIcon[_adfSchema.PanelType.NOTE].icon,
+    onClick: (0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.NOTE),
+    selected: activePanelType === _adfSchema.PanelType.NOTE,
+    title: formatMessage(panelTitleAndIcon[_adfSchema.PanelType.NOTE].title)
+  }, {
+    id: 'editor.panel.success',
+    icon: panelTitleAndIcon[_adfSchema.PanelType.SUCCESS].icon,
+    onClick: (0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.SUCCESS),
+    selected: activePanelType === _adfSchema.PanelType.SUCCESS,
+    title: formatMessage(panelTitleAndIcon[_adfSchema.PanelType.SUCCESS].title)
+  }, {
+    id: 'editor.panel.warning',
+    icon: panelTitleAndIcon[_adfSchema.PanelType.WARNING].icon,
+    onClick: (0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.WARNING),
+    selected: activePanelType === _adfSchema.PanelType.WARNING,
+    title: formatMessage(panelTitleAndIcon[_adfSchema.PanelType.WARNING].title)
+  }, {
+    id: 'editor.panel.error',
+    icon: panelTitleAndIcon[_adfSchema.PanelType.ERROR].icon,
+    onClick: (0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.ERROR),
+    selected: activePanelType === _adfSchema.PanelType.ERROR,
+    title: formatMessage(panelTitleAndIcon[_adfSchema.PanelType.ERROR].title)
+  }];
+  var selectedPanelType = activePanelType || _adfSchema.PanelType.INFO;
+  var selectedTitleAndIcon = panelTitleAndIcon[selectedPanelType];
+  return {
+    id: 'panel-type-dropdown',
+    testId: 'panel-type-dropdown-trigger',
+    type: 'dropdown',
+    options: dropdownOptions,
+    showSelected: true,
+    iconBefore: function iconBefore() {
+      return selectedTitleAndIcon.icon;
+    },
+    title: formatMessage(selectedTitleAndIcon.title)
+  };
+};

package/dist/cjs/ui/toolbar.js

@@ -33,6 +33,7 @@ var _warning2 = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/warn
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("../editor-actions/actions");
 var _utils2 = require("../pm-plugins/utils/utils");
+var _panelTypeDropdown = require("./panelTypeDropdown");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
@@ -58,7 +59,7 @@ var panelIconMap = exports.panelIconMap = (0, _defineProperty2.default)((0, _def
 });
 var getToolbarItems = exports.getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, hoverDecoration, editorAnalyticsAPI, activePanelType, activePanelColor, activePanelIcon, state, api) {
   // TODO: ED-14403 - investigate why these titles are not getting translated for the tooltips
-  var items = [{
+  var items = (0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? [{
     id: 'editor.panel.info',
     type: 'button',
     icon: _information.default,
@@ -103,6 +104,12 @@ var getToolbarItems = exports.getToolbarItems = function getToolbarItems(formatM
     selected: activePanelType === _adfSchema.PanelType.ERROR,
     title: formatMessage(_messages.panelMessages.error),
     tabIndex: null
+  }] : [(0, _panelTypeDropdown.panelTypeDropdown)({
+    activePanelType: activePanelType,
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    formatMessage: formatMessage
+  }), {
+    type: 'separator'
   }];
   if (isCustomPanelEnabled) {
     var changeColor = function changeColor(color) {

package/dist/es2019/ui/panelTypeDropdown.js

@@ -0,0 +1,100 @@
+import { PanelType } from '@atlaskit/adf-schema';
+import { panelMessages as messages } from '@atlaskit/editor-common/messages';
+import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
+import CustomizeIcon from '@atlaskit/icon/core/customize';
+import DiscoveryIcon from '@atlaskit/icon/core/discovery';
+import InformationIcon from '@atlaskit/icon/core/information';
+import SuccessIcon from '@atlaskit/icon/core/success';
+import WarningIcon from '@atlaskit/icon/core/warning';
+import { changePanelType } from '../editor-actions/actions';
+const panelTitleAndIcon = {
+  [PanelType.INFO]: {
+    title: messages.info,
+    icon: InformationIcon({
+      label: 'info-icon',
+      color: "var(--ds-icon-information, #1D7AFC)"
+    })
+  },
+  [PanelType.NOTE]: {
+    title: messages.note,
+    icon: DiscoveryIcon({
+      label: 'note-icon',
+      color: "var(--ds-icon-discovery, #8270DB)"
+    })
+  },
+  [PanelType.SUCCESS]: {
+    title: messages.success,
+    icon: SuccessIcon({
+      label: 'success-icon',
+      color: "var(--ds-icon-success, #22A06B)"
+    })
+  },
+  [PanelType.WARNING]: {
+    title: messages.warning,
+    icon: WarningIcon({
+      label: 'warning-icon',
+      color: "var(--ds-icon-warning, #E56910)"
+    })
+  },
+  [PanelType.ERROR]: {
+    title: messages.error,
+    icon: CrossCircleIcon({
+      label: 'error-icon',
+      color: "var(--ds-icon-danger, #C9372C)"
+    })
+  },
+  [PanelType.CUSTOM]: {
+    title: messages.custom,
+    icon: CustomizeIcon({
+      label: 'custom-icon'
+    })
+  }
+};
+export const panelTypeDropdown = ({
+  activePanelType,
+  editorAnalyticsAPI,
+  formatMessage
+}) => {
+  const dropdownOptions = [{
+    id: 'editor.panel.info',
+    icon: panelTitleAndIcon[PanelType.INFO].icon,
+    onClick: changePanelType(editorAnalyticsAPI)(PanelType.INFO),
+    selected: activePanelType === PanelType.INFO,
+    title: formatMessage(panelTitleAndIcon[PanelType.INFO].title)
+  }, {
+    id: 'editor.panel.note',
+    icon: panelTitleAndIcon[PanelType.NOTE].icon,
+    onClick: changePanelType(editorAnalyticsAPI)(PanelType.NOTE),
+    selected: activePanelType === PanelType.NOTE,
+    title: formatMessage(panelTitleAndIcon[PanelType.NOTE].title)
+  }, {
+    id: 'editor.panel.success',
+    icon: panelTitleAndIcon[PanelType.SUCCESS].icon,
+    onClick: changePanelType(editorAnalyticsAPI)(PanelType.SUCCESS),
+    selected: activePanelType === PanelType.SUCCESS,
+    title: formatMessage(panelTitleAndIcon[PanelType.SUCCESS].title)
+  }, {
+    id: 'editor.panel.warning',
+    icon: panelTitleAndIcon[PanelType.WARNING].icon,
+    onClick: changePanelType(editorAnalyticsAPI)(PanelType.WARNING),
+    selected: activePanelType === PanelType.WARNING,
+    title: formatMessage(panelTitleAndIcon[PanelType.WARNING].title)
+  }, {
+    id: 'editor.panel.error',
+    icon: panelTitleAndIcon[PanelType.ERROR].icon,
+    onClick: changePanelType(editorAnalyticsAPI)(PanelType.ERROR),
+    selected: activePanelType === PanelType.ERROR,
+    title: formatMessage(panelTitleAndIcon[PanelType.ERROR].title)
+  }];
+  const selectedPanelType = activePanelType || PanelType.INFO;
+  const selectedTitleAndIcon = panelTitleAndIcon[selectedPanelType];
+  return {
+    id: 'panel-type-dropdown',
+    testId: 'panel-type-dropdown-trigger',
+    type: 'dropdown',
+    options: dropdownOptions,
+    showSelected: true,
+    iconBefore: () => selectedTitleAndIcon.icon,
+    title: formatMessage(selectedTitleAndIcon.title)
+  };
+};

package/dist/es2019/ui/toolbar.js

@@ -24,6 +24,7 @@ import LegacyWarningIcon from '@atlaskit/icon/glyph/editor/warning';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { changePanelType, removePanel } from '../editor-actions/actions';
 import { findPanel } from '../pm-plugins/utils/utils';
+import { panelTypeDropdown } from './panelTypeDropdown';
 export const panelIconMap = {
   [PanelType.INFO]: {
     shortName: ':info:',
@@ -52,7 +53,7 @@ export const panelIconMap = {
 };
 export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, hoverDecoration, editorAnalyticsAPI, activePanelType, activePanelColor, activePanelIcon, state, api) => {
   // TODO: ED-14403 - investigate why these titles are not getting translated for the tooltips
-  const items = [{
+  const items = editorExperiment('platform_editor_controls', 'control') ? [{
     id: 'editor.panel.info',
     type: 'button',
     icon: InformationIcon,
@@ -97,6 +98,12 @@ export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabl
     selected: activePanelType === PanelType.ERROR,
     title: formatMessage(messages.error),
     tabIndex: null
+  }] : [panelTypeDropdown({
+    activePanelType,
+    editorAnalyticsAPI,
+    formatMessage
+  }), {
+    type: 'separator'
   }];
   if (isCustomPanelEnabled) {
     const changeColor = color => (state, dispatch) => {

package/dist/esm/ui/panelTypeDropdown.js

@@ -0,0 +1,95 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { PanelType } from '@atlaskit/adf-schema';
+import { panelMessages as messages } from '@atlaskit/editor-common/messages';
+import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
+import CustomizeIcon from '@atlaskit/icon/core/customize';
+import DiscoveryIcon from '@atlaskit/icon/core/discovery';
+import InformationIcon from '@atlaskit/icon/core/information';
+import SuccessIcon from '@atlaskit/icon/core/success';
+import WarningIcon from '@atlaskit/icon/core/warning';
+import { changePanelType } from '../editor-actions/actions';
+var panelTitleAndIcon = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, PanelType.INFO, {
+  title: messages.info,
+  icon: InformationIcon({
+    label: 'info-icon',
+    color: "var(--ds-icon-information, #1D7AFC)"
+  })
+}), PanelType.NOTE, {
+  title: messages.note,
+  icon: DiscoveryIcon({
+    label: 'note-icon',
+    color: "var(--ds-icon-discovery, #8270DB)"
+  })
+}), PanelType.SUCCESS, {
+  title: messages.success,
+  icon: SuccessIcon({
+    label: 'success-icon',
+    color: "var(--ds-icon-success, #22A06B)"
+  })
+}), PanelType.WARNING, {
+  title: messages.warning,
+  icon: WarningIcon({
+    label: 'warning-icon',
+    color: "var(--ds-icon-warning, #E56910)"
+  })
+}), PanelType.ERROR, {
+  title: messages.error,
+  icon: CrossCircleIcon({
+    label: 'error-icon',
+    color: "var(--ds-icon-danger, #C9372C)"
+  })
+}), PanelType.CUSTOM, {
+  title: messages.custom,
+  icon: CustomizeIcon({
+    label: 'custom-icon'
+  })
+});
+export var panelTypeDropdown = function panelTypeDropdown(_ref) {
+  var activePanelType = _ref.activePanelType,
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI,
+    formatMessage = _ref.formatMessage;
+  var dropdownOptions = [{
+    id: 'editor.panel.info',
+    icon: panelTitleAndIcon[PanelType.INFO].icon,
+    onClick: changePanelType(editorAnalyticsAPI)(PanelType.INFO),
+    selected: activePanelType === PanelType.INFO,
+    title: formatMessage(panelTitleAndIcon[PanelType.INFO].title)
+  }, {
+    id: 'editor.panel.note',
+    icon: panelTitleAndIcon[PanelType.NOTE].icon,
+    onClick: changePanelType(editorAnalyticsAPI)(PanelType.NOTE),
+    selected: activePanelType === PanelType.NOTE,
+    title: formatMessage(panelTitleAndIcon[PanelType.NOTE].title)
+  }, {
+    id: 'editor.panel.success',
+    icon: panelTitleAndIcon[PanelType.SUCCESS].icon,
+    onClick: changePanelType(editorAnalyticsAPI)(PanelType.SUCCESS),
+    selected: activePanelType === PanelType.SUCCESS,
+    title: formatMessage(panelTitleAndIcon[PanelType.SUCCESS].title)
+  }, {
+    id: 'editor.panel.warning',
+    icon: panelTitleAndIcon[PanelType.WARNING].icon,
+    onClick: changePanelType(editorAnalyticsAPI)(PanelType.WARNING),
+    selected: activePanelType === PanelType.WARNING,
+    title: formatMessage(panelTitleAndIcon[PanelType.WARNING].title)
+  }, {
+    id: 'editor.panel.error',
+    icon: panelTitleAndIcon[PanelType.ERROR].icon,
+    onClick: changePanelType(editorAnalyticsAPI)(PanelType.ERROR),
+    selected: activePanelType === PanelType.ERROR,
+    title: formatMessage(panelTitleAndIcon[PanelType.ERROR].title)
+  }];
+  var selectedPanelType = activePanelType || PanelType.INFO;
+  var selectedTitleAndIcon = panelTitleAndIcon[selectedPanelType];
+  return {
+    id: 'panel-type-dropdown',
+    testId: 'panel-type-dropdown-trigger',
+    type: 'dropdown',
+    options: dropdownOptions,
+    showSelected: true,
+    iconBefore: function iconBefore() {
+      return selectedTitleAndIcon.icon;
+    },
+    title: formatMessage(selectedTitleAndIcon.title)
+  };
+};

package/dist/esm/ui/toolbar.js

@@ -27,6 +27,7 @@ import LegacyWarningIcon from '@atlaskit/icon/glyph/editor/warning';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { changePanelType, removePanel } from '../editor-actions/actions';
 import { findPanel } from '../pm-plugins/utils/utils';
+import { panelTypeDropdown } from './panelTypeDropdown';
 export var panelIconMap = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, PanelType.INFO, {
   shortName: ':info:',
   id: 'atlassian-info'
@@ -48,7 +49,7 @@ export var panelIconMap = _defineProperty(_defineProperty(_defineProperty(_defin
 });
 export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, hoverDecoration, editorAnalyticsAPI, activePanelType, activePanelColor, activePanelIcon, state, api) {
   // TODO: ED-14403 - investigate why these titles are not getting translated for the tooltips
-  var items = [{
+  var items = editorExperiment('platform_editor_controls', 'control') ? [{
     id: 'editor.panel.info',
     type: 'button',
     icon: InformationIcon,
@@ -93,6 +94,12 @@ export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeTy
     selected: activePanelType === PanelType.ERROR,
     title: formatMessage(messages.error),
     tabIndex: null
+  }] : [panelTypeDropdown({
+    activePanelType: activePanelType,
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    formatMessage: formatMessage
+  }), {
+    type: 'separator'
   }];
   if (isCustomPanelEnabled) {
     var changeColor = function changeColor(color) {

package/dist/types/ui/panelTypeDropdown.d.ts

@@ -0,0 +1,10 @@
+import type { IntlShape } from 'react-intl-next';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { Command, FloatingToolbarDropdown } from '@atlaskit/editor-common/types';
+type Props = {
+    activePanelType?: string;
+    editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
+    formatMessage: IntlShape['formatMessage'];
+};
+export declare const panelTypeDropdown: ({ activePanelType, editorAnalyticsAPI, formatMessage, }: Props) => FloatingToolbarDropdown<Command>;
+export {};

package/dist/types-ts4.5/ui/panelTypeDropdown.d.ts

@@ -0,0 +1,10 @@
+import type { IntlShape } from 'react-intl-next';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { Command, FloatingToolbarDropdown } from '@atlaskit/editor-common/types';
+type Props = {
+    activePanelType?: string;
+    editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
+    formatMessage: IntlShape['formatMessage'];
+};
+export declare const panelTypeDropdown: ({ activePanelType, editorAnalyticsAPI, formatMessage, }: Props) => FloatingToolbarDropdown<Command>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-panel",
-	"version": "4.2.5",
+	"version": "4.2.6",
 	"description": "Panel plugin for @atlaskit/editor-core.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^102.1.0",
+		"@atlaskit/editor-common": "^102.2.0",
 		"@atlaskit/editor-palette": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.1.0",
 		"@atlaskit/editor-plugin-decorations": "^2.0.0",
@@ -44,6 +44,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tmp-editor-statsig": "^3.4.0",
+		"@atlaskit/tokens": "^4.3.0",
 		"@babel/runtime": "^7.0.0",
 		"uuid": "^3.1.0"
 	},