@atlaskit/jql-editor 4.7.3 → 4.8.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @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
+
+- [#141027](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/141027)
+  [`54b27406e5181`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/54b27406e5181) -
+  [ux] Update icons and buttons on jql
+- Updated dependencies
+
 ## 4.7.3
 
 ### 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.3", _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

@@ -7,25 +7,31 @@ Object.defineProperty(exports, "__esModule", {
 exports.BaseExpandToggle = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _new = require("@atlaskit/button/new");
+var _growDiagonal = _interopRequireDefault(require("@atlaskit/icon/core/grow-diagonal"));
+var _shrinkDiagonal = _interopRequireDefault(require("@atlaskit/icon/core/shrink-diagonal"));
 var _actualSize = _interopRequireDefault(require("@atlaskit/icon/glyph/media-services/actual-size"));
 var _fitToPage = _interopRequireDefault(require("@atlaskit/icon/glyph/media-services/fit-to-page"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 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) {
@@ -40,7 +46,16 @@ var BaseExpandToggle = exports.BaseExpandToggle = function BaseExpandToggle(_ref
   } else {
     Icon = ExpandCircleIcon;
   }
-  return /*#__PURE__*/_react.default.createElement(_styled.ExpandToggleContainer, null, /*#__PURE__*/_react.default.createElement(_button.default, {
+  return (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+    appearance: 'subtle',
+    spacing: "compact",
+    "aria-expanded": expanded,
+    "aria-controls": editorId,
+    label: label,
+    isDisabled: isDisabled,
+    onClick: onClick,
+    icon: expanded ? _shrinkDiagonal.default : _growDiagonal.default
+  }) : /*#__PURE__*/_react.default.createElement(_styled.ExpandToggleContainer, null, /*#__PURE__*/_react.default.createElement(_button.default, {
     appearance: 'subtle',
     "aria-expanded": expanded,
     "aria-controls": editorId,

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

@@ -8,13 +8,22 @@ Object.defineProperty(exports, "__esModule", {
 exports.BaseSearch = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _button = require("@atlaskit/button");
-var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
+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 _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,
@@ -26,7 +35,17 @@ var BaseSearch = exports.BaseSearch = function BaseSearch(_ref) {
       e.preventDefault();
     }
   }, []);
-  return /*#__PURE__*/_react.default.createElement(_button.LoadingButton, {
+  return (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+    label: label,
+    isDisabled: isDisabled,
+    testId: "jql-editor-search",
+    appearance: 'primary',
+    spacing: "compact",
+    onClick: onSearch,
+    onKeyDown: preventRepeatClick,
+    isLoading: isSearching,
+    icon: _search.default
+  }) : /*#__PURE__*/_react.default.createElement(_button.LoadingButton, {
     "aria-label": label,
     isDisabled: isDisabled,
     testId: "jql-editor-search"
@@ -38,9 +57,13 @@ var BaseSearch = exports.BaseSearch = function BaseSearch(_ref) {
     onClick: onSearch,
     onKeyDown: preventRepeatClick,
     isLoading: isSearching,
-    iconBefore: /*#__PURE__*/_react.default.createElement(_search.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

@@ -5,17 +5,41 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BaseSyntaxHelp = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _button = _interopRequireDefault(require("@atlaskit/button"));
+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,
     label = _ref.label,
     onClick = _ref.onClick;
-  return /*#__PURE__*/_react.default.createElement(_styled.SyntaxHelpContainer, null, /*#__PURE__*/_react.default.createElement(_button.default, {
+  return (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? /*#__PURE__*/_react.default.createElement(_new.LinkIconButton, {
+    "aria-describedby": describedby,
+    label: label,
+    isDisabled: isDisabled,
+    appearance: "subtle",
+    spacing: "compact",
+    onClick: onClick,
+    target: "blank",
+    href: "https://confluence.atlassian.com/display/SERVICEDESKCLOUD/Advanced+searching",
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/_react.default.createElement(_questionCircle.default, (0, _extends2.default)({}, iconProps, {
+        color: "var(--ds-icon-subtle, #626F86)"
+      }));
+    }
+  }) : /*#__PURE__*/_react.default.createElement(_styled.SyntaxHelpContainer, null, /*#__PURE__*/_react.default.createElement(_button.default, {
     "aria-describedby": describedby,
     "aria-label": label,
     isDisabled: isDisabled,
@@ -23,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/cjs/ui/jql-editor-layout/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.JQLEditorReadOnly = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _useEditorTheme = require("../../hooks/use-editor-theme");
 var _splitTextByNewLine = require("../../utils/split-text-by-new-line");
@@ -53,7 +54,8 @@ var JQLEditorLayout = function JQLEditorLayout(props) {
     onTransitionEnd: onEditorViewTransitionEnd
   }), /*#__PURE__*/_react.default.createElement(_styled.EditorControls, {
     isSearch: isSearch,
-    isCompact: isCompact
+    isCompact: isCompact,
+    isVisualRefresh: (0, _platformFeatureFlags.fg)('platform-component-visual-refresh')
   }, EditorControlsContent)), /*#__PURE__*/_react.default.createElement(_styled.EditorFooter, null, EditorFooterContent));
 };
 /**

package/dist/cjs/ui/jql-editor-layout/styled.js

@@ -152,6 +152,8 @@ var EditorControls = exports.EditorControls = _styled.default.div(function (prop
     position: 'sticky',
     top: 0,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: "".concat(rowHeight + 2 * getEditorInputVerticalPadding(props.isCompact), "px")
+    height: "".concat(rowHeight + 2 * getEditorInputVerticalPadding(props.isCompact), "px"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    gap: props.isVisualRefresh ? "var(--ds-space-025, 2px)" : 'unset'
   };
 });

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.3", 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

@@ -1,24 +1,30 @@
 import React from 'react';
 import Button from '@atlaskit/button';
-import MediaServicesActualSizeIcon from '@atlaskit/icon/glyph/media-services/actual-size';
-import MediaServicesFitToPageIcon from '@atlaskit/icon/glyph/media-services/fit-to-page';
+import { IconButton } from '@atlaskit/button/new';
+import GrowDiagonalIcon from '@atlaskit/icon/core/grow-diagonal';
+import ShrinkDiagonalIcon from '@atlaskit/icon/core/shrink-diagonal';
+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';
 
 // 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,
@@ -33,7 +39,16 @@ export const BaseExpandToggle = ({
   } else {
     Icon = ExpandCircleIcon;
   }
-  return /*#__PURE__*/React.createElement(ExpandToggleContainer, null, /*#__PURE__*/React.createElement(Button, {
+  return fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(IconButton, {
+    appearance: 'subtle',
+    spacing: "compact",
+    "aria-expanded": expanded,
+    "aria-controls": editorId,
+    label: label,
+    isDisabled: isDisabled,
+    onClick: onClick,
+    icon: expanded ? ShrinkDiagonalIcon : GrowDiagonalIcon
+  }) : /*#__PURE__*/React.createElement(ExpandToggleContainer, null, /*#__PURE__*/React.createElement(Button, {
     appearance: 'subtle',
     "aria-expanded": expanded,
     "aria-controls": editorId,

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

@@ -1,10 +1,19 @@
 import React, { useCallback } from 'react';
 import { LoadingButton } from '@atlaskit/button';
-import SearchIcon from '@atlaskit/icon/glyph/editor/search';
+import { IconButton } from '@atlaskit/button/new';
+import SearchIconOld from '@atlaskit/icon/core/migration/search--editor-search';
+import SearchIcon from '@atlaskit/icon/core/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,
@@ -17,7 +26,17 @@ export const BaseSearch = ({
       e.preventDefault();
     }
   }, []);
-  return /*#__PURE__*/React.createElement(LoadingButton, {
+  return fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(IconButton, {
+    label: label,
+    isDisabled: isDisabled,
+    testId: "jql-editor-search",
+    appearance: 'primary',
+    spacing: "compact",
+    onClick: onSearch,
+    onKeyDown: preventRepeatClick,
+    isLoading: isSearching,
+    icon: SearchIcon
+  }) : /*#__PURE__*/React.createElement(LoadingButton, {
     "aria-label": label,
     isDisabled: isDisabled,
     testId: "jql-editor-search"
@@ -29,9 +48,13 @@ export const BaseSearch = ({
     onClick: onSearch,
     onKeyDown: preventRepeatClick,
     isLoading: isSearching,
-    iconBefore: /*#__PURE__*/React.createElement(SearchIcon, {
+    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

@@ -1,15 +1,38 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Button from '@atlaskit/button';
-import QuestionIcon from '@atlaskit/icon/glyph/question';
+import { LinkIconButton } from '@atlaskit/button/new';
+import QuestionCircleIcon from '@atlaskit/icon/core/question-circle';
+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,
   label,
   onClick
 }) => {
-  return /*#__PURE__*/React.createElement(SyntaxHelpContainer, null, /*#__PURE__*/React.createElement(Button, {
+  return fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(LinkIconButton, {
+    "aria-describedby": describedby,
+    label: label,
+    isDisabled: isDisabled,
+    appearance: "subtle",
+    spacing: "compact",
+    onClick: onClick,
+    target: "blank",
+    href: "https://confluence.atlassian.com/display/SERVICEDESKCLOUD/Advanced+searching",
+    icon: iconProps => /*#__PURE__*/React.createElement(QuestionCircleIcon, _extends({}, iconProps, {
+      color: "var(--ds-icon-subtle, #626F86)"
+    }))
+  }) : /*#__PURE__*/React.createElement(SyntaxHelpContainer, null, /*#__PURE__*/React.createElement(Button, {
     "aria-describedby": describedby,
     "aria-label": label,
     isDisabled: isDisabled,
@@ -17,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/es2019/ui/jql-editor-layout/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives';
 import { EditorThemeContext, useEditorTheme, useEditorThemeContext } from '../../hooks/use-editor-theme';
 import { splitTextByNewLine } from '../../utils/split-text-by-new-line';
@@ -48,7 +49,8 @@ const JQLEditorLayout = props => {
     onTransitionEnd: onEditorViewTransitionEnd
   }), /*#__PURE__*/React.createElement(EditorControls, {
     isSearch: isSearch,
-    isCompact: isCompact
+    isCompact: isCompact,
+    isVisualRefresh: fg('platform-component-visual-refresh')
   }, EditorControlsContent)), /*#__PURE__*/React.createElement(EditorFooter, null, EditorFooterContent));
 };
 /**

package/dist/es2019/ui/jql-editor-layout/styled.js

@@ -250,5 +250,7 @@ export const EditorControls = styled.div(props => ({
   position: 'sticky',
   top: 0,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  height: `${rowHeight + 2 * getEditorInputVerticalPadding(props.isCompact)}px`
+  height: `${rowHeight + 2 * getEditorInputVerticalPadding(props.isCompact)}px`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  gap: props.isVisualRefresh ? "var(--ds-space-025, 2px)" : 'unset'
 }));

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.3", 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

@@ -1,25 +1,31 @@
 import React from 'react';
 import Button from '@atlaskit/button';
-import MediaServicesActualSizeIcon from '@atlaskit/icon/glyph/media-services/actual-size';
-import MediaServicesFitToPageIcon from '@atlaskit/icon/glyph/media-services/fit-to-page';
+import { IconButton } from '@atlaskit/button/new';
+import GrowDiagonalIcon from '@atlaskit/icon/core/grow-diagonal';
+import ShrinkDiagonalIcon from '@atlaskit/icon/core/shrink-diagonal';
+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';
 
 // 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) {
@@ -34,7 +40,16 @@ export var BaseExpandToggle = function BaseExpandToggle(_ref3) {
   } else {
     Icon = ExpandCircleIcon;
   }
-  return /*#__PURE__*/React.createElement(ExpandToggleContainer, null, /*#__PURE__*/React.createElement(Button, {
+  return fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(IconButton, {
+    appearance: 'subtle',
+    spacing: "compact",
+    "aria-expanded": expanded,
+    "aria-controls": editorId,
+    label: label,
+    isDisabled: isDisabled,
+    onClick: onClick,
+    icon: expanded ? ShrinkDiagonalIcon : GrowDiagonalIcon
+  }) : /*#__PURE__*/React.createElement(ExpandToggleContainer, null, /*#__PURE__*/React.createElement(Button, {
     appearance: 'subtle',
     "aria-expanded": expanded,
     "aria-controls": editorId,

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

@@ -1,10 +1,19 @@
 import React, { useCallback } from 'react';
 import { LoadingButton } from '@atlaskit/button';
-import SearchIcon from '@atlaskit/icon/glyph/editor/search';
+import { IconButton } from '@atlaskit/button/new';
+import SearchIconOld from '@atlaskit/icon/core/migration/search--editor-search';
+import SearchIcon from '@atlaskit/icon/core/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,
@@ -16,7 +25,17 @@ export var BaseSearch = function BaseSearch(_ref) {
       e.preventDefault();
     }
   }, []);
-  return /*#__PURE__*/React.createElement(LoadingButton, {
+  return fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(IconButton, {
+    label: label,
+    isDisabled: isDisabled,
+    testId: "jql-editor-search",
+    appearance: 'primary',
+    spacing: "compact",
+    onClick: onSearch,
+    onKeyDown: preventRepeatClick,
+    isLoading: isSearching,
+    icon: SearchIcon
+  }) : /*#__PURE__*/React.createElement(LoadingButton, {
     "aria-label": label,
     isDisabled: isDisabled,
     testId: "jql-editor-search"
@@ -28,9 +47,13 @@ export var BaseSearch = function BaseSearch(_ref) {
     onClick: onSearch,
     onKeyDown: preventRepeatClick,
     isLoading: isSearching,
-    iconBefore: /*#__PURE__*/React.createElement(SearchIcon, {
+    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

@@ -1,14 +1,39 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Button from '@atlaskit/button';
-import QuestionIcon from '@atlaskit/icon/glyph/question';
+import { LinkIconButton } from '@atlaskit/button/new';
+import QuestionCircleIcon from '@atlaskit/icon/core/question-circle';
+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,
     label = _ref.label,
     onClick = _ref.onClick;
-  return /*#__PURE__*/React.createElement(SyntaxHelpContainer, null, /*#__PURE__*/React.createElement(Button, {
+  return fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(LinkIconButton, {
+    "aria-describedby": describedby,
+    label: label,
+    isDisabled: isDisabled,
+    appearance: "subtle",
+    spacing: "compact",
+    onClick: onClick,
+    target: "blank",
+    href: "https://confluence.atlassian.com/display/SERVICEDESKCLOUD/Advanced+searching",
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/React.createElement(QuestionCircleIcon, _extends({}, iconProps, {
+        color: "var(--ds-icon-subtle, #626F86)"
+      }));
+    }
+  }) : /*#__PURE__*/React.createElement(SyntaxHelpContainer, null, /*#__PURE__*/React.createElement(Button, {
     "aria-describedby": describedby,
     "aria-label": label,
     isDisabled: isDisabled,
@@ -16,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/dist/esm/ui/jql-editor-layout/index.js

@@ -1,6 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["isSearch", "isCompact"];
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives';
 import { EditorThemeContext, useEditorTheme, useEditorThemeContext } from '../../hooks/use-editor-theme';
 import { splitTextByNewLine } from '../../utils/split-text-by-new-line';
@@ -47,7 +48,8 @@ var JQLEditorLayout = function JQLEditorLayout(props) {
     onTransitionEnd: onEditorViewTransitionEnd
   }), /*#__PURE__*/React.createElement(EditorControls, {
     isSearch: isSearch,
-    isCompact: isCompact
+    isCompact: isCompact,
+    isVisualRefresh: fg('platform-component-visual-refresh')
   }, EditorControlsContent)), /*#__PURE__*/React.createElement(EditorFooter, null, EditorFooterContent));
 };
 /**

package/dist/esm/ui/jql-editor-layout/styled.js

@@ -148,6 +148,8 @@ export var EditorControls = styled.div(function (props) {
     position: 'sticky',
     top: 0,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: "".concat(rowHeight + 2 * getEditorInputVerticalPadding(props.isCompact), "px")
+    height: "".concat(rowHeight + 2 * getEditorInputVerticalPadding(props.isCompact), "px"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    gap: props.isVisualRefresh ? "var(--ds-space-025, 2px)" : 'unset'
   };
 });

package/dist/types/ui/jql-editor-layout/styled.d.ts

@@ -60,5 +60,6 @@ export declare const EditorControls: import("@emotion/styled").StyledComponent<{
 } & {
     isSearch: boolean;
     isCompact: boolean;
+    isVisualRefresh?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/dist/types-ts4.5/ui/jql-editor-layout/styled.d.ts

@@ -60,5 +60,6 @@ export declare const EditorControls: import("@emotion/styled").StyledComponent<{
 } & {
     isSearch: boolean;
     isCompact: boolean;
+    isVisualRefresh?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/jql-editor",
-	"version": "4.7.3",
+	"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",
@@ -46,10 +46,11 @@
 		"@atlaskit/jql-autocomplete": "^2.0.0",
 		"@atlaskit/jql-editor-common": "^2.1.0",
 		"@atlaskit/jql-parser": "^2.0.0",
+		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^12.1.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tokens": "^1.59.0",
+		"@atlaskit/tokens": "^1.60.0",
 		"@atlaskit/tooltip": "^18.7.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -121,5 +122,10 @@
 				"util"
 			]
 		}
+	},
+	"platform-feature-flags": {
+		"platform-component-visual-refresh": {
+			"type": "boolean"
+		}
 	}
 }