@atlaskit/jql-editor 4.7.4 → 4.8.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/jql-editor
 
+## 4.8.0
+
+### Minor Changes
+
+- [#142408](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/142408)
+  [`90a34a6487eb3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/90a34a6487eb3) -
+  Enable new icons behind a feature flag.
+
 ## 4.7.4
 
 ### Patch Changes

package/dist/cjs/analytics/util.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.useJqlEditorAnalytics = void 0;
 var _jqlEditorCommon = require("@atlaskit/jql-editor-common");
 var useJqlEditorAnalytics = exports.useJqlEditorAnalytics = function useJqlEditorAnalytics(analyticsSource) {
-  return (0, _jqlEditorCommon.useJqlPackageAnalytics)(analyticsSource, "@atlaskit/jql-editor", "4.7.4", _jqlEditorCommon.ANALYTICS_CHANNEL);
+  return (0, _jqlEditorCommon.useJqlPackageAnalytics)(analyticsSource, "@atlaskit/jql-editor", "4.8.0", _jqlEditorCommon.ANALYTICS_CHANNEL);
 };

package/dist/cjs/plugins/autocomplete/components/autocomplete-option/index.js

@@ -13,7 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _deburr = _interopRequireDefault(require("lodash/deburr"));
 var _noop = _interopRequireDefault(require("lodash/noop"));
 var _icon = _interopRequireDefault(require("@atlaskit/icon"));
-var _panel = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/panel"));
+var _informationEditorPanel = _interopRequireDefault(require("@atlaskit/icon/core/migration/information--editor-panel"));
 var _jqlAst = require("@atlaskit/jql-ast");
 var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -158,10 +158,11 @@ var AutocompleteOption = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
   }), isDeprecated ? /*#__PURE__*/_react.default.createElement(_styled.DeprecatedOptionContainer, null, optionName, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: deprecatedTooltipContent,
     position: 'right'
-  }, /*#__PURE__*/_react.default.createElement(_panel.default, {
+  }, /*#__PURE__*/_react.default.createElement(_informationEditorPanel.default, {
+    spacing: "spacious",
     testId: "jql-editor-deprecated-icon",
     label: "",
-    primaryColor: "var(--ds-icon, ".concat(_colors.N400, ")")
+    color: "var(--ds-icon, ".concat(_colors.N400, ")")
   }))) : optionName, fieldType && /*#__PURE__*/_react.default.createElement(_styled.FieldType, null, fieldTypeIcon && /*#__PURE__*/_react.default.createElement(_styled.FieldTypeIcon, null, fieldTypeIcon), fieldType));
   var tooltipContent = /*#__PURE__*/_react.default.createElement(_styled.TooltipContent, null, name);
   if (overflows) {

package/dist/cjs/ui/jql-editor-controls-content/base-expand-toggle/index.js

@@ -18,18 +18,20 @@ var _styled = require("./styled");
 // Atlaskit doesn't provide a circle variation of the expand/collapse icons so we have to implement our own
 var ExpandCircleIcon = function ExpandCircleIcon(_ref) {
   var isDisabled = _ref.isDisabled;
-  return /*#__PURE__*/_react.default.createElement(_actualSize.default, {
+  return /*#__PURE__*/_react.default.createElement(_growDiagonal.default, {
     label: '',
-    size: 'small',
-    primaryColor: isDisabled ? "var(--ds-icon-disabled, ".concat(_colors.N50, ")") : "var(--ds-icon, ".concat(_colors.N500, ")")
+    LEGACY_size: 'small',
+    color: isDisabled ? "var(--ds-icon-disabled, ".concat(_colors.N50, ")") : "var(--ds-icon, ".concat(_colors.N500, ")"),
+    LEGACY_fallbackIcon: _actualSize.default
   });
 };
 var CollapseCircleIcon = function CollapseCircleIcon(_ref2) {
   var isDisabled = _ref2.isDisabled;
-  return /*#__PURE__*/_react.default.createElement(_fitToPage.default, {
+  return /*#__PURE__*/_react.default.createElement(_shrinkDiagonal.default, {
     label: '',
-    size: 'small',
-    primaryColor: isDisabled ? "var(--ds-icon-disabled, ".concat(_colors.N50, ")") : "var(--ds-icon, ".concat(_colors.N500, ")")
+    LEGACY_size: 'small',
+    color: isDisabled ? "var(--ds-icon-disabled, ".concat(_colors.N50, ")") : "var(--ds-icon, ".concat(_colors.N500, ")"),
+    LEGACY_fallbackIcon: _fitToPage.default
   });
 };
 var BaseExpandToggle = exports.BaseExpandToggle = function BaseExpandToggle(_ref3) {

package/dist/cjs/ui/jql-editor-controls-content/base-search/index.js

@@ -9,15 +9,21 @@ exports.BaseSearch = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _button = require("@atlaskit/button");
 var _new = require("@atlaskit/button/new");
+var _searchEditorSearch = _interopRequireDefault(require("@atlaskit/icon/core/migration/search--editor-search"));
 var _search = _interopRequireDefault(require("@atlaskit/icon/core/search"));
-var _search2 = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 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; }
 var style = {
   // Fixes an issue where loading button makes the editor flicker with a scrollbar
   overflow: 'hidden'
 };
+// Fixes icon margin issus after new icon migration
+var iconStyle = (0, _primitives.xcss)({
+  margin: 'space.050',
+  display: 'flex'
+});
 var BaseSearch = exports.BaseSearch = function BaseSearch(_ref) {
   var isDisabled = _ref.isDisabled,
     isSearching = _ref.isSearching,
@@ -51,9 +57,13 @@ var BaseSearch = exports.BaseSearch = function BaseSearch(_ref) {
     onClick: onSearch,
     onKeyDown: preventRepeatClick,
     isLoading: isSearching,
-    iconBefore: /*#__PURE__*/_react.default.createElement(_search2.default, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+      xcss: iconStyle
+    }, /*#__PURE__*/_react.default.createElement(_searchEditorSearch.default, {
+      color: "currentColor",
       label: '',
-      size: 'medium'
-    })
+      LEGACY_size: 'medium',
+      LEGACY_margin: "-4px"
+    }))
   });
 };

package/dist/cjs/ui/jql-editor-controls-content/base-syntax-help/index.js

@@ -12,8 +12,14 @@ var _new = require("@atlaskit/button/new");
 var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/core/question-circle"));
 var _question = _interopRequireDefault(require("@atlaskit/icon/glyph/question"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _styled = require("./styled");
+// Fixes icon margin issus after new icon migration
+var iconStyle = (0, _primitives.xcss)({
+  margin: 'space.025',
+  display: 'inline-flex'
+});
 var BaseSyntaxHelp = exports.BaseSyntaxHelp = function BaseSyntaxHelp(_ref) {
   var describedby = _ref.describedby,
     isDisabled = _ref.isDisabled,
@@ -41,11 +47,15 @@ var BaseSyntaxHelp = exports.BaseSyntaxHelp = function BaseSyntaxHelp(_ref) {
     spacing: 'none',
     target: 'blank',
     href: "https://confluence.atlassian.com/display/SERVICEDESKCLOUD/Advanced+searching",
-    iconBefore: /*#__PURE__*/_react.default.createElement(_question.default, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+      xcss: iconStyle
+    }, /*#__PURE__*/_react.default.createElement(_questionCircle.default, {
       label: '',
-      primaryColor: isDisabled ? "var(--ds-icon-disabled, ".concat(_colors.N0, ")") : "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
-      size: 'small'
-    }),
+      color: isDisabled ? "var(--ds-icon-disabled, ".concat(_colors.N0, ")") : "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
+      LEGACY_size: 'small',
+      LEGACY_fallbackIcon: _question.default,
+      LEGACY_margin: "-2px"
+    })),
     onClick: onClick
   }));
 };

package/dist/cjs/ui/jql-editor-footer-content/jql-messages/infos/index.js

@@ -10,6 +10,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireDefault(require("react"));
 var _form = require("@atlaskit/form");
 var _info = _interopRequireDefault(require("@atlaskit/icon/glyph/info"));
+var _information = _interopRequireDefault(require("@atlaskit/icon/utility/information"));
+var _primitives = require("@atlaskit/primitives");
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _useEditorViewHasInfos = require("../../../../hooks/use-editor-view-has-infos");
 var _state = require("../../../../state");
@@ -32,9 +34,14 @@ var InfoMessages = exports.InfoMessages = function InfoMessages() {
   var infoMessage = useFormattedInfoMessage();
   return infoMessage != null ? /*#__PURE__*/_react.default.createElement(_format.MessageContainer, null, /*#__PURE__*/_react.default.createElement(_form.HelperMessage, {
     testId: "jql-editor-info-message"
-  }, /*#__PURE__*/_react.default.createElement(_info.default, {
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    as: "span",
+    paddingInlineEnd: "space.050"
+  }, /*#__PURE__*/_react.default.createElement(_information.default, {
     label: "",
-    primaryColor: "var(--ds-icon-information, ".concat(colors.B500, ")"),
-    size: "small"
-  }), infoMessage)) : null;
+    color: "var(--ds-icon-information, ".concat(colors.B500, ")"),
+    LEGACY_size: "small",
+    LEGACY_fallbackIcon: _info.default,
+    LEGACY_margin: "0 -4px 0 0"
+  })), infoMessage)) : null;
 };

package/dist/cjs/ui/jql-editor-footer-content/jql-messages/warnings/index.js

@@ -11,6 +11,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _form = require("@atlaskit/form");
 var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
+var _warning2 = _interopRequireDefault(require("@atlaskit/icon/utility/warning"));
+var _primitives = require("@atlaskit/primitives");
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _useEditorViewHasWarnings = require("../../../../hooks/use-editor-view-has-warnings");
 var _state = require("../../../../state");
@@ -101,9 +103,14 @@ var WarningMessages = exports.WarningMessages = function WarningMessages() {
   var warningMessage = useFormattedWarningMessage();
   return warningMessage != null ? /*#__PURE__*/_react.default.createElement(_format.MessageContainer, null, /*#__PURE__*/_react.default.createElement(_form.HelperMessage, {
     testId: "jql-editor-warning-message"
-  }, /*#__PURE__*/_react.default.createElement(_warning.default, {
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    as: "span",
+    paddingInlineEnd: "space.050"
+  }, /*#__PURE__*/_react.default.createElement(_warning2.default, {
     label: "",
-    primaryColor: "var(--ds-icon-warning, ".concat(colors.Y400, ")"),
-    size: "small"
-  }), warningMessage)) : null;
+    color: "var(--ds-icon-warning, ".concat(colors.Y400, ")"),
+    LEGACY_size: "small",
+    LEGACY_fallbackIcon: _warning.default,
+    LEGACY_margin: "0 -4px 0 0"
+  })), warningMessage)) : null;
 };

package/dist/es2019/analytics/util.js

@@ -1,4 +1,4 @@
 import { ANALYTICS_CHANNEL, useJqlPackageAnalytics } from '@atlaskit/jql-editor-common';
 export const useJqlEditorAnalytics = analyticsSource => {
-  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.7.4", ANALYTICS_CHANNEL);
+  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.8.0", ANALYTICS_CHANNEL);
 };

package/dist/es2019/plugins/autocomplete/components/autocomplete-option/index.js

@@ -3,7 +3,7 @@ import React, { forwardRef, useCallback, useMemo, useState } from 'react';
 import deburr from 'lodash/deburr';
 import noop from 'lodash/noop';
 import Icon from '@atlaskit/icon';
-import InfoIcon from '@atlaskit/icon/glyph/editor/panel';
+import InfoIcon from '@atlaskit/icon/core/migration/information--editor-panel';
 import { normaliseJqlString } from '@atlaskit/jql-ast';
 import { N400 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
@@ -143,9 +143,10 @@ const AutocompleteOption = /*#__PURE__*/forwardRef((props, ref) => {
     content: deprecatedTooltipContent,
     position: 'right'
   }, /*#__PURE__*/React.createElement(InfoIcon, {
+    spacing: "spacious",
     testId: "jql-editor-deprecated-icon",
     label: "",
-    primaryColor: `var(--ds-icon, ${N400})`
+    color: `var(--ds-icon, ${N400})`
   }))) : optionName, fieldType && /*#__PURE__*/React.createElement(FieldType, null, fieldTypeIcon && /*#__PURE__*/React.createElement(FieldTypeIcon, null, fieldTypeIcon), fieldType));
   const tooltipContent = /*#__PURE__*/React.createElement(TooltipContent, null, name);
   if (overflows) {

package/dist/es2019/ui/jql-editor-controls-content/base-expand-toggle/index.js

@@ -3,8 +3,8 @@ import Button from '@atlaskit/button';
 import { IconButton } from '@atlaskit/button/new';
 import GrowDiagonalIcon from '@atlaskit/icon/core/grow-diagonal';
 import ShrinkDiagonalIcon from '@atlaskit/icon/core/shrink-diagonal';
-import MediaServicesActualSizeIcon from '@atlaskit/icon/glyph/media-services/actual-size';
-import MediaServicesFitToPageIcon from '@atlaskit/icon/glyph/media-services/fit-to-page';
+import LegacyMediaServicesActualSizeIcon from '@atlaskit/icon/glyph/media-services/actual-size';
+import LegacyMediaServicesFitToPageIcon from '@atlaskit/icon/glyph/media-services/fit-to-page';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N50, N500 } from '@atlaskit/theme/colors';
 import { ExpandToggleContainer } from './styled';
@@ -12,17 +12,19 @@ import { ExpandToggleContainer } from './styled';
 // Atlaskit doesn't provide a circle variation of the expand/collapse icons so we have to implement our own
 const ExpandCircleIcon = ({
   isDisabled
-}) => /*#__PURE__*/React.createElement(MediaServicesActualSizeIcon, {
+}) => /*#__PURE__*/React.createElement(GrowDiagonalIcon, {
   label: '',
-  size: 'small',
-  primaryColor: isDisabled ? `var(--ds-icon-disabled, ${N50})` : `var(--ds-icon, ${N500})`
+  LEGACY_size: 'small',
+  color: isDisabled ? `var(--ds-icon-disabled, ${N50})` : `var(--ds-icon, ${N500})`,
+  LEGACY_fallbackIcon: LegacyMediaServicesActualSizeIcon
 });
 const CollapseCircleIcon = ({
   isDisabled
-}) => /*#__PURE__*/React.createElement(MediaServicesFitToPageIcon, {
+}) => /*#__PURE__*/React.createElement(ShrinkDiagonalIcon, {
   label: '',
-  size: 'small',
-  primaryColor: isDisabled ? `var(--ds-icon-disabled, ${N50})` : `var(--ds-icon, ${N500})`
+  LEGACY_size: 'small',
+  color: isDisabled ? `var(--ds-icon-disabled, ${N50})` : `var(--ds-icon, ${N500})`,
+  LEGACY_fallbackIcon: LegacyMediaServicesFitToPageIcon
 });
 export const BaseExpandToggle = ({
   expanded,

package/dist/es2019/ui/jql-editor-controls-content/base-search/index.js

@@ -1,13 +1,19 @@
 import React, { useCallback } from 'react';
 import { LoadingButton } from '@atlaskit/button';
 import { IconButton } from '@atlaskit/button/new';
+import SearchIconOld from '@atlaskit/icon/core/migration/search--editor-search';
 import SearchIcon from '@atlaskit/icon/core/search';
-import SearchIconOld from '@atlaskit/icon/glyph/editor/search';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
 const style = {
   // Fixes an issue where loading button makes the editor flicker with a scrollbar
   overflow: 'hidden'
 };
+// Fixes icon margin issus after new icon migration
+const iconStyle = xcss({
+  margin: 'space.050',
+  display: 'flex'
+});
 export const BaseSearch = ({
   isDisabled,
   isSearching,
@@ -42,9 +48,13 @@ export const BaseSearch = ({
     onClick: onSearch,
     onKeyDown: preventRepeatClick,
     isLoading: isSearching,
-    iconBefore: /*#__PURE__*/React.createElement(SearchIconOld, {
+    iconBefore: /*#__PURE__*/React.createElement(Box, {
+      xcss: iconStyle
+    }, /*#__PURE__*/React.createElement(SearchIconOld, {
+      color: "currentColor",
       label: '',
-      size: 'medium'
-    })
+      LEGACY_size: 'medium',
+      LEGACY_margin: "-4px"
+    }))
   });
 };

package/dist/es2019/ui/jql-editor-controls-content/base-syntax-help/index.js

@@ -3,10 +3,17 @@ import React from 'react';
 import Button from '@atlaskit/button';
 import { LinkIconButton } from '@atlaskit/button/new';
 import QuestionCircleIcon from '@atlaskit/icon/core/question-circle';
-import QuestionIcon from '@atlaskit/icon/glyph/question';
+import LegacyQuestionIcon from '@atlaskit/icon/glyph/question';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
 import { N0 } from '@atlaskit/theme/colors';
 import { SyntaxHelpContainer } from './styled';
+
+// Fixes icon margin issus after new icon migration
+const iconStyle = xcss({
+  margin: 'space.025',
+  display: 'inline-flex'
+});
 export const BaseSyntaxHelp = ({
   describedby,
   isDisabled,
@@ -33,11 +40,15 @@ export const BaseSyntaxHelp = ({
     spacing: 'none',
     target: 'blank',
     href: "https://confluence.atlassian.com/display/SERVICEDESKCLOUD/Advanced+searching",
-    iconBefore: /*#__PURE__*/React.createElement(QuestionIcon, {
+    iconBefore: /*#__PURE__*/React.createElement(Box, {
+      xcss: iconStyle
+    }, /*#__PURE__*/React.createElement(QuestionCircleIcon, {
       label: '',
-      primaryColor: isDisabled ? `var(--ds-icon-disabled, ${N0})` : `var(--ds-icon-inverse, ${N0})`,
-      size: 'small'
-    }),
+      color: isDisabled ? `var(--ds-icon-disabled, ${N0})` : `var(--ds-icon-inverse, ${N0})`,
+      LEGACY_size: 'small',
+      LEGACY_fallbackIcon: LegacyQuestionIcon,
+      LEGACY_margin: "-2px"
+    })),
     onClick: onClick
   }));
 };

package/dist/es2019/ui/jql-editor-footer-content/jql-messages/infos/index.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { HelperMessage } from '@atlaskit/form';
-import InfoIcon from '@atlaskit/icon/glyph/info';
+import LegacyInfoIcon from '@atlaskit/icon/glyph/info';
+import InfoIcon from '@atlaskit/icon/utility/information';
+import { Box } from '@atlaskit/primitives';
 import * as colors from '@atlaskit/theme/colors';
 import { useEditorViewHasInfos } from '../../../../hooks/use-editor-view-has-infos';
 import { useExternalMessages } from '../../../../state';
@@ -21,9 +23,14 @@ export const InfoMessages = () => {
   const infoMessage = useFormattedInfoMessage();
   return infoMessage != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(HelperMessage, {
     testId: "jql-editor-info-message"
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    paddingInlineEnd: "space.050"
   }, /*#__PURE__*/React.createElement(InfoIcon, {
     label: "",
-    primaryColor: `var(--ds-icon-information, ${colors.B500})`,
-    size: "small"
-  }), infoMessage)) : null;
+    color: `var(--ds-icon-information, ${colors.B500})`,
+    LEGACY_size: "small",
+    LEGACY_fallbackIcon: LegacyInfoIcon,
+    LEGACY_margin: "0 -4px 0 0"
+  })), infoMessage)) : null;
 };

package/dist/es2019/ui/jql-editor-footer-content/jql-messages/warnings/index.js

@@ -1,6 +1,8 @@
 import React, { useCallback } from 'react';
 import { HelperMessage } from '@atlaskit/form';
-import WarningIcon from '@atlaskit/icon/glyph/warning';
+import LegacyWarningIcon from '@atlaskit/icon/glyph/warning';
+import WarningIcon from '@atlaskit/icon/utility/warning';
+import { Box } from '@atlaskit/primitives';
 import * as colors from '@atlaskit/theme/colors';
 import { useEditorViewHasWarnings } from '../../../../hooks/use-editor-view-has-warnings';
 import { useExternalMessages, useHydratedDeprecations, useIntl } from '../../../../state';
@@ -75,9 +77,14 @@ export const WarningMessages = () => {
   const warningMessage = useFormattedWarningMessage();
   return warningMessage != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(HelperMessage, {
     testId: "jql-editor-warning-message"
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    paddingInlineEnd: "space.050"
   }, /*#__PURE__*/React.createElement(WarningIcon, {
     label: "",
-    primaryColor: `var(--ds-icon-warning, ${colors.Y400})`,
-    size: "small"
-  }), warningMessage)) : null;
+    color: `var(--ds-icon-warning, ${colors.Y400})`,
+    LEGACY_size: "small",
+    LEGACY_fallbackIcon: LegacyWarningIcon,
+    LEGACY_margin: "0 -4px 0 0"
+  })), warningMessage)) : null;
 };

package/dist/esm/analytics/util.js

@@ -1,4 +1,4 @@
 import { ANALYTICS_CHANNEL, useJqlPackageAnalytics } from '@atlaskit/jql-editor-common';
 export var useJqlEditorAnalytics = function useJqlEditorAnalytics(analyticsSource) {
-  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.7.4", ANALYTICS_CHANNEL);
+  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.8.0", ANALYTICS_CHANNEL);
 };

package/dist/esm/plugins/autocomplete/components/autocomplete-option/index.js

@@ -5,7 +5,7 @@ import React, { forwardRef, useCallback, useMemo, useState } from 'react';
 import deburr from 'lodash/deburr';
 import noop from 'lodash/noop';
 import Icon from '@atlaskit/icon';
-import InfoIcon from '@atlaskit/icon/glyph/editor/panel';
+import InfoIcon from '@atlaskit/icon/core/migration/information--editor-panel';
 import { normaliseJqlString } from '@atlaskit/jql-ast';
 import { N400 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
@@ -149,9 +149,10 @@ var AutocompleteOption = /*#__PURE__*/forwardRef(function (props, ref) {
     content: deprecatedTooltipContent,
     position: 'right'
   }, /*#__PURE__*/React.createElement(InfoIcon, {
+    spacing: "spacious",
     testId: "jql-editor-deprecated-icon",
     label: "",
-    primaryColor: "var(--ds-icon, ".concat(N400, ")")
+    color: "var(--ds-icon, ".concat(N400, ")")
   }))) : optionName, fieldType && /*#__PURE__*/React.createElement(FieldType, null, fieldTypeIcon && /*#__PURE__*/React.createElement(FieldTypeIcon, null, fieldTypeIcon), fieldType));
   var tooltipContent = /*#__PURE__*/React.createElement(TooltipContent, null, name);
   if (overflows) {

package/dist/esm/ui/jql-editor-controls-content/base-expand-toggle/index.js

@@ -3,8 +3,8 @@ import Button from '@atlaskit/button';
 import { IconButton } from '@atlaskit/button/new';
 import GrowDiagonalIcon from '@atlaskit/icon/core/grow-diagonal';
 import ShrinkDiagonalIcon from '@atlaskit/icon/core/shrink-diagonal';
-import MediaServicesActualSizeIcon from '@atlaskit/icon/glyph/media-services/actual-size';
-import MediaServicesFitToPageIcon from '@atlaskit/icon/glyph/media-services/fit-to-page';
+import LegacyMediaServicesActualSizeIcon from '@atlaskit/icon/glyph/media-services/actual-size';
+import LegacyMediaServicesFitToPageIcon from '@atlaskit/icon/glyph/media-services/fit-to-page';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N50, N500 } from '@atlaskit/theme/colors';
 import { ExpandToggleContainer } from './styled';
@@ -12,18 +12,20 @@ import { ExpandToggleContainer } from './styled';
 // Atlaskit doesn't provide a circle variation of the expand/collapse icons so we have to implement our own
 var ExpandCircleIcon = function ExpandCircleIcon(_ref) {
   var isDisabled = _ref.isDisabled;
-  return /*#__PURE__*/React.createElement(MediaServicesActualSizeIcon, {
+  return /*#__PURE__*/React.createElement(GrowDiagonalIcon, {
     label: '',
-    size: 'small',
-    primaryColor: isDisabled ? "var(--ds-icon-disabled, ".concat(N50, ")") : "var(--ds-icon, ".concat(N500, ")")
+    LEGACY_size: 'small',
+    color: isDisabled ? "var(--ds-icon-disabled, ".concat(N50, ")") : "var(--ds-icon, ".concat(N500, ")"),
+    LEGACY_fallbackIcon: LegacyMediaServicesActualSizeIcon
   });
 };
 var CollapseCircleIcon = function CollapseCircleIcon(_ref2) {
   var isDisabled = _ref2.isDisabled;
-  return /*#__PURE__*/React.createElement(MediaServicesFitToPageIcon, {
+  return /*#__PURE__*/React.createElement(ShrinkDiagonalIcon, {
     label: '',
-    size: 'small',
-    primaryColor: isDisabled ? "var(--ds-icon-disabled, ".concat(N50, ")") : "var(--ds-icon, ".concat(N500, ")")
+    LEGACY_size: 'small',
+    color: isDisabled ? "var(--ds-icon-disabled, ".concat(N50, ")") : "var(--ds-icon, ".concat(N500, ")"),
+    LEGACY_fallbackIcon: LegacyMediaServicesFitToPageIcon
   });
 };
 export var BaseExpandToggle = function BaseExpandToggle(_ref3) {

package/dist/esm/ui/jql-editor-controls-content/base-search/index.js

@@ -1,13 +1,19 @@
 import React, { useCallback } from 'react';
 import { LoadingButton } from '@atlaskit/button';
 import { IconButton } from '@atlaskit/button/new';
+import SearchIconOld from '@atlaskit/icon/core/migration/search--editor-search';
 import SearchIcon from '@atlaskit/icon/core/search';
-import SearchIconOld from '@atlaskit/icon/glyph/editor/search';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
 var style = {
   // Fixes an issue where loading button makes the editor flicker with a scrollbar
   overflow: 'hidden'
 };
+// Fixes icon margin issus after new icon migration
+var iconStyle = xcss({
+  margin: 'space.050',
+  display: 'flex'
+});
 export var BaseSearch = function BaseSearch(_ref) {
   var isDisabled = _ref.isDisabled,
     isSearching = _ref.isSearching,
@@ -41,9 +47,13 @@ export var BaseSearch = function BaseSearch(_ref) {
     onClick: onSearch,
     onKeyDown: preventRepeatClick,
     isLoading: isSearching,
-    iconBefore: /*#__PURE__*/React.createElement(SearchIconOld, {
+    iconBefore: /*#__PURE__*/React.createElement(Box, {
+      xcss: iconStyle
+    }, /*#__PURE__*/React.createElement(SearchIconOld, {
+      color: "currentColor",
       label: '',
-      size: 'medium'
-    })
+      LEGACY_size: 'medium',
+      LEGACY_margin: "-4px"
+    }))
   });
 };

package/dist/esm/ui/jql-editor-controls-content/base-syntax-help/index.js

@@ -3,10 +3,17 @@ import React from 'react';
 import Button from '@atlaskit/button';
 import { LinkIconButton } from '@atlaskit/button/new';
 import QuestionCircleIcon from '@atlaskit/icon/core/question-circle';
-import QuestionIcon from '@atlaskit/icon/glyph/question';
+import LegacyQuestionIcon from '@atlaskit/icon/glyph/question';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
 import { N0 } from '@atlaskit/theme/colors';
 import { SyntaxHelpContainer } from './styled';
+
+// Fixes icon margin issus after new icon migration
+var iconStyle = xcss({
+  margin: 'space.025',
+  display: 'inline-flex'
+});
 export var BaseSyntaxHelp = function BaseSyntaxHelp(_ref) {
   var describedby = _ref.describedby,
     isDisabled = _ref.isDisabled,
@@ -34,11 +41,15 @@ export var BaseSyntaxHelp = function BaseSyntaxHelp(_ref) {
     spacing: 'none',
     target: 'blank',
     href: "https://confluence.atlassian.com/display/SERVICEDESKCLOUD/Advanced+searching",
-    iconBefore: /*#__PURE__*/React.createElement(QuestionIcon, {
+    iconBefore: /*#__PURE__*/React.createElement(Box, {
+      xcss: iconStyle
+    }, /*#__PURE__*/React.createElement(QuestionCircleIcon, {
       label: '',
-      primaryColor: isDisabled ? "var(--ds-icon-disabled, ".concat(N0, ")") : "var(--ds-icon-inverse, ".concat(N0, ")"),
-      size: 'small'
-    }),
+      color: isDisabled ? "var(--ds-icon-disabled, ".concat(N0, ")") : "var(--ds-icon-inverse, ".concat(N0, ")"),
+      LEGACY_size: 'small',
+      LEGACY_fallbackIcon: LegacyQuestionIcon,
+      LEGACY_margin: "-2px"
+    })),
     onClick: onClick
   }));
 };

package/dist/esm/ui/jql-editor-footer-content/jql-messages/infos/index.js

@@ -1,7 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React from 'react';
 import { HelperMessage } from '@atlaskit/form';
-import InfoIcon from '@atlaskit/icon/glyph/info';
+import LegacyInfoIcon from '@atlaskit/icon/glyph/info';
+import InfoIcon from '@atlaskit/icon/utility/information';
+import { Box } from '@atlaskit/primitives';
 import * as colors from '@atlaskit/theme/colors';
 import { useEditorViewHasInfos } from '../../../../hooks/use-editor-view-has-infos';
 import { useExternalMessages } from '../../../../state';
@@ -22,9 +24,14 @@ export var InfoMessages = function InfoMessages() {
   var infoMessage = useFormattedInfoMessage();
   return infoMessage != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(HelperMessage, {
     testId: "jql-editor-info-message"
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    paddingInlineEnd: "space.050"
   }, /*#__PURE__*/React.createElement(InfoIcon, {
     label: "",
-    primaryColor: "var(--ds-icon-information, ".concat(colors.B500, ")"),
-    size: "small"
-  }), infoMessage)) : null;
+    color: "var(--ds-icon-information, ".concat(colors.B500, ")"),
+    LEGACY_size: "small",
+    LEGACY_fallbackIcon: LegacyInfoIcon,
+    LEGACY_margin: "0 -4px 0 0"
+  })), infoMessage)) : null;
 };

package/dist/esm/ui/jql-editor-footer-content/jql-messages/warnings/index.js

@@ -2,7 +2,9 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback } from 'react';
 import { HelperMessage } from '@atlaskit/form';
-import WarningIcon from '@atlaskit/icon/glyph/warning';
+import LegacyWarningIcon from '@atlaskit/icon/glyph/warning';
+import WarningIcon from '@atlaskit/icon/utility/warning';
+import { Box } from '@atlaskit/primitives';
 import * as colors from '@atlaskit/theme/colors';
 import { useEditorViewHasWarnings } from '../../../../hooks/use-editor-view-has-warnings';
 import { useExternalMessages, useHydratedDeprecations, useIntl } from '../../../../state';
@@ -91,9 +93,14 @@ export var WarningMessages = function WarningMessages() {
   var warningMessage = useFormattedWarningMessage();
   return warningMessage != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(HelperMessage, {
     testId: "jql-editor-warning-message"
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    paddingInlineEnd: "space.050"
   }, /*#__PURE__*/React.createElement(WarningIcon, {
     label: "",
-    primaryColor: "var(--ds-icon-warning, ".concat(colors.Y400, ")"),
-    size: "small"
-  }), warningMessage)) : null;
+    color: "var(--ds-icon-warning, ".concat(colors.Y400, ")"),
+    LEGACY_size: "small",
+    LEGACY_fallbackIcon: LegacyWarningIcon,
+    LEGACY_margin: "0 -4px 0 0"
+  })), warningMessage)) : null;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/jql-editor",
-	"version": "4.7.4",
+	"version": "4.8.0",
 	"description": "This package allows consumers to render an advanced JQL editor component to enable autocomplete-assisted authoring and validation of JQL queries.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",