@atlaskit/editor-plugin-help-dialog 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-help-dialog
 
+## 1.4.0
+
+### Minor Changes
+
+- [#123266](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/123266)
+  [`821ca3d93201f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/821ca3d93201f) -
+  [ux] Migrate legacy icons and typography in Editor to new ADS icons and token under Feature Gate
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.3.1
+
+### Patch Changes
+
+- [#122514](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/122514)
+  [`91276c81ef8a8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/91276c81ef8a8) -
+  [ED-24019] This change is cleaning up the feature flag
+  'platform.editor.a11y-help-dialog-shortcut-keys-position_aghfg' which was introduced for new
+  keyboard shortcuts for inserting columns and rows to a table.
+- Updated dependencies
+
 ## 1.3.0
 
 ### Minor Changes

package/dist/cjs/plugin.js

@@ -13,7 +13,9 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _keymap = require("@atlaskit/editor-prosemirror/keymap");
-var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/question-circle"));
+var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/question-circle"));
+var _questionCircle2 = _interopRequireDefault(require("@atlaskit/icon/glyph/question-circle"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("./commands");
 var _pluginKey = require("./plugin-key");
 var _HelpDialogLoader = require("./ui/HelpDialogLoader");
@@ -76,7 +78,10 @@ var helpDialogPlugin = exports.helpDialogPlugin = function helpDialogPlugin(_ref
           priority: 4000,
           keyshortcut: (0, _keymaps.tooltip)(_keymaps.openHelp),
           icon: function icon() {
-            return /*#__PURE__*/_react.default.createElement(_questionCircle.default, {
+            return (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? /*#__PURE__*/_react.default.createElement(_questionCircle.default, {
+              label: "",
+              color: "currentColor"
+            }) : /*#__PURE__*/_react.default.createElement(_questionCircle2.default, {
               label: ""
             });
           },

package/dist/cjs/ui/Modal.js

@@ -7,7 +7,10 @@ exports.default = void 0;
 var _react = require("@emotion/react");
 var _modalDialog = require("@atlaskit/modal-dialog");
 var _ModalContent = require("./ModalContent");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var Modal = function Modal(_ref) {

package/dist/cjs/ui/ModalContent.js

@@ -10,11 +10,17 @@ var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-common/utils");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _ModalFooter = _interopRequireDefault(require("./ModalFooter"));
 var _ModalHeader = _interopRequireDefault(require("./ModalHeader"));
 var _styles = require("./styles");
 var _utils2 = require("./utils");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 /** @jsxFrag */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -32,7 +38,11 @@ var ModalContent = exports.ModalContent = function ModalContent(_ref) {
     css: _styles.content
   }, (0, _react2.jsx)("div", {
     css: _styles.column
-  }, (0, _react2.jsx)("h2", {
+  }, (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? (0, _react2.jsx)(_heading.default, {
+    size: "medium"
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.helpDialogMessages.keyboardShortcuts)) :
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+  (0, _react2.jsx)("h2", {
     css: _styles.title
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.helpDialogMessages.keyboardShortcuts)), (0, _react2.jsx)("ul", null, formatting.filter(function (form) {
     var keymap = form.keymap && form.keymap();
@@ -43,7 +53,7 @@ var ModalContent = exports.ModalContent = function ModalContent(_ref) {
       (0, _react2.jsx)("li", {
         css: _styles.row,
         key: "textFormatting-".concat(form.name)
-      }, (0, _react2.jsx)("span", null, form.name), (0, _utils2.getComponentFromKeymap)(form.keymap()))
+      }, (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? (0, _react2.jsx)(_primitives.Text, null, form.name) : (0, _react2.jsx)("span", null, form.name), (0, _utils2.getComponentFromKeymap)(form.keymap()))
     );
   }), formatting.filter(function (form) {
     return _utils2.shortcutNamesWithoutKeymap.indexOf(form.type) !== -1;
@@ -55,13 +65,17 @@ var ModalContent = exports.ModalContent = function ModalContent(_ref) {
       (0, _react2.jsx)("li", {
         css: _styles.row,
         key: "autoFormatting-".concat(form.name)
-      }, (0, _react2.jsx)("span", null, form.name), form.autoFormatting())
+      }, (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? (0, _react2.jsx)(_primitives.Text, null, form.name) : (0, _react2.jsx)("span", null, form.name), form.autoFormatting())
     );
   }))), (0, _react2.jsx)("div", {
     css: _styles.line
   }), (0, _react2.jsx)("div", {
     css: _styles.column
-  }, (0, _react2.jsx)("h2", {
+  }, (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? (0, _react2.jsx)(_heading.default, {
+    size: "medium"
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.helpDialogMessages.markdown)) :
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+  (0, _react2.jsx)("h2", {
     css: _styles.title
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.helpDialogMessages.markdown)), (0, _react2.jsx)("ul", null, formatting.filter(function (form) {
     return _utils2.shortcutNamesWithoutKeymap.indexOf(form.type) === -1;

package/dist/cjs/ui/ModalFooter.js

@@ -12,7 +12,10 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _styles = require("./styles");
 var _utils = require("./utils");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var ModalFooter = function ModalFooter() {

package/dist/cjs/ui/ModalHeader.js

@@ -9,9 +9,15 @@ var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _closeCross = _interopRequireDefault(require("@atlaskit/icon/core/migration/close--cross"));
 var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _styles = require("./styles");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var ModalHeader = (0, _reactIntlNext.injectIntl)(function (_ref) {
@@ -21,7 +27,11 @@ var ModalHeader = (0, _reactIntlNext.injectIntl)(function (_ref) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     (0, _react.jsx)("div", {
       css: _styles.header
-    }, (0, _react.jsx)("h1", {
+    }, (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? (0, _react.jsx)(_heading.default, {
+      size: "large"
+    }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.helpDialogMessages.editorHelp)) :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    (0, _react.jsx)("h1", {
       css: _styles.dialogHeader
     }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.helpDialogMessages.editorHelp)), (0, _react.jsx)("div", null, (0, _react.jsx)(_uiMenu.ToolbarButton
     // @ts-expect-error modal onClose handler requires second parameter of UIAnalyticsEvent, which we don't want to pass
@@ -29,7 +39,11 @@ var ModalHeader = (0, _reactIntlNext.injectIntl)(function (_ref) {
       onClick: onClose,
       title: formatMessage(_messages.helpDialogMessages.closeHelpDialog),
       spacing: "compact",
-      iconBefore: (0, _react.jsx)(_cross.default, {
+      iconBefore: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? (0, _react.jsx)(_closeCross.default, {
+        label: formatMessage(_messages.helpDialogMessages.closeHelpDialog),
+        color: "currentColor",
+        spacing: "spacious"
+      }) : (0, _react.jsx)(_cross.default, {
         label: formatMessage(_messages.helpDialogMessages.closeHelpDialog),
         size: "medium"
       })

package/dist/cjs/ui/formatting.js

@@ -13,7 +13,10 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-common/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _styles = require("./styles");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var navigationKeymaps = function navigationKeymaps(_ref) {
@@ -397,7 +400,7 @@ var otherFormatting = function otherFormatting(_ref3) {
         }, "\u2193")))
       );
     }
-  }].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform.editor.a11y-help-dialog-shortcut-keys-position_aghfg') ? [{
+  }].concat([{
     name: formatMessage(_messages.helpDialogMessages.InsertTableColumn),
     type: 'table',
     autoFormatting: function autoFormatting() {
@@ -443,53 +446,7 @@ var otherFormatting = function otherFormatting(_ref3) {
         }, "[")))
       );
     }
-  }] : [{
-    name: formatMessage(_messages.helpDialogMessages.InsertTableColumn),
-    type: 'table',
-    autoFormatting: function autoFormatting() {
-      return (
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-        (0, _react.jsx)("span", {
-          css: _styles.shortcutsArray
-        }, (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
-          css: _styles.codeSm
-        }, _utils.browser.mac ? '⌃' : 'Ctrl'), ' + ', (0, _react.jsx)("span", {
-          css: _styles.codeMd
-        }, _utils.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)("span", {
-          css: _styles.codeSm
-        }, "\u2192")), (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
-          css: _styles.codeSm
-        }, _utils.browser.mac ? '⌃' : 'Ctrl'), ' + ', (0, _react.jsx)("span", {
-          css: _styles.codeMd
-        }, _utils.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)("span", {
-          css: _styles.codeSm
-        }, "\u2190")))
-      );
-    }
-  }, {
-    name: formatMessage(_messages.helpDialogMessages.InsertTableRow),
-    type: 'table',
-    autoFormatting: function autoFormatting() {
-      return (
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-        (0, _react.jsx)("span", {
-          css: _styles.shortcutsArray
-        }, (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
-          css: _styles.codeSm
-        }, _utils.browser.mac ? '⌃' : 'Ctrl'), ' + ', (0, _react.jsx)("span", {
-          css: _styles.codeMd
-        }, _utils.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)("span", {
-          css: _styles.codeSm
-        }, "\u2193")), (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
-          css: _styles.codeSm
-        }, _utils.browser.mac ? '⌃' : 'Ctrl'), ' + ', (0, _react.jsx)("span", {
-          css: _styles.codeMd
-        }, _utils.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)("span", {
-          css: _styles.codeSm
-        }, "\u2191")))
-      );
-    }
-  }]), [{
+  }], [{
     name: formatMessage(_messages.helpDialogMessages.selectColumnResize),
     type: 'table',
     autoFormatting: function autoFormatting() {

package/dist/cjs/ui/index.js

@@ -16,7 +16,10 @@ var _formatting = require("./formatting");
 var _Modal = _interopRequireDefault(require("./Modal"));
 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 && Object.prototype.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; }
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/ui/styles.js

@@ -7,20 +7,25 @@ Object.defineProperty(exports, "__esModule", {
 exports.toolbarButton = exports.title = exports.shortcutsArray = exports.row = exports.line = exports.header = exports.footer = exports.dialogHeader = exports.contentWrapper = exports.content = exports.componentFromKeymapWrapperStyles = exports.column = exports.codeSm = exports.codeMd = exports.codeLg = void 0;
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var colors = _colors;
 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 && Object.prototype.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; }
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var header = exports.header = (0, _react.css)({
+var headerFont = (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? {
+  font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+} : {
+  fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(24)
+};
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+var header = exports.header = (0, _react.css)(headerFont, {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   zIndex: _editorSharedStyles.akEditorUnitZIndex,
   minHeight: "var(--ds-space-300, 24px)",
   padding: "var(--ds-space-250, 20px)".concat(" ", "var(--ds-space-500, 40px)"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(24),
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
@@ -31,14 +36,17 @@ var header = exports.header = (0, _react.css)({
   backgroundColor: "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"),
   borderRadius: "var(--ds-border-radius, 3px)"
 });
+var footerFont = (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? {
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+} : {
+  fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(14),
+  lineHeight: "var(--ds-space-250, 20px)"
+};
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var footer = exports.footer = (0, _react.css)({
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+var footer = exports.footer = (0, _react.css)(footerFont, {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   zIndex: _editorSharedStyles.akEditorUnitZIndex,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(14),
-  lineHeight: "var(--ds-space-250, 20px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
   padding: "var(--ds-space-300, 24px)",

package/dist/cjs/ui/utils.js

@@ -7,7 +7,10 @@ exports.shortcutNamesWithoutKeymap = exports.getComponentFromKeymap = void 0;
 var _react = require("@emotion/react");
 var _utils = require("@atlaskit/editor-common/utils");
 var _styles = require("./styles");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var getKeyParts = function getKeyParts(keymap) {

package/dist/es2019/plugin.js

@@ -4,7 +4,9 @@ import { bindKeymapWithCommand, openHelp, tooltip } from '@atlaskit/editor-commo
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
-import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
+import QuestionCircleIcon from '@atlaskit/icon/core/migration/question-circle';
+import { default as QuestionCircleIconLegacy } from '@atlaskit/icon/glyph/question-circle';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { openHelpCommand } from './commands';
 import { pluginKey } from './plugin-key';
 import { HelpDialogLoader } from './ui/HelpDialogLoader';
@@ -63,7 +65,10 @@ export const helpDialogPlugin = ({
       keywords: ['?'],
       priority: 4000,
       keyshortcut: tooltip(openHelp),
-      icon: () => /*#__PURE__*/React.createElement(QuestionCircleIcon, {
+      icon: () => fg('platform_editor_migration_icon_and_typography') ? /*#__PURE__*/React.createElement(QuestionCircleIcon, {
+        label: "",
+        color: "currentColor"
+      }) : /*#__PURE__*/React.createElement(QuestionCircleIconLegacy, {
         label: ""
       }),
       action(insert) {

package/dist/es2019/ui/Modal.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useModal } from '@atlaskit/modal-dialog';

package/dist/es2019/ui/ModalContent.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 /** @jsxFrag */
 import React from 'react';
 
@@ -7,6 +10,9 @@ import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { helpDialogMessages as messages } from '@atlaskit/editor-common/messages';
 import { browser } from '@atlaskit/editor-common/utils';
+import Heading from '@atlaskit/heading';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Text } from '@atlaskit/primitives';
 import ModalFooter from './ModalFooter';
 import ModalHeader from './ModalHeader';
 import { column, content, contentWrapper, line, row, title } from './styles';
@@ -25,7 +31,11 @@ export const ModalContent = ({
     css: content
   }, jsx("div", {
     css: column
-  }, jsx("h2", {
+  }, fg('platform_editor_migration_icon_and_typography') ? jsx(Heading, {
+    size: "medium"
+  }, jsx(FormattedMessage, messages.keyboardShortcuts)) :
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+  jsx("h2", {
     css: title
   }, jsx(FormattedMessage, messages.keyboardShortcuts)), jsx("ul", null, formatting.filter(form => {
     const keymap = form.keymap && form.keymap();
@@ -35,16 +45,20 @@ export const ModalContent = ({
   jsx("li", {
     css: row,
     key: `textFormatting-${form.name}`
-  }, jsx("span", null, form.name), getComponentFromKeymap(form.keymap()))), formatting.filter(form => shortcutNamesWithoutKeymap.indexOf(form.type) !== -1).filter(form => form.autoFormatting).map(form =>
+  }, fg('platform_editor_migration_icon_and_typography') ? jsx(Text, null, form.name) : jsx("span", null, form.name), getComponentFromKeymap(form.keymap()))), formatting.filter(form => shortcutNamesWithoutKeymap.indexOf(form.type) !== -1).filter(form => form.autoFormatting).map(form =>
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
   jsx("li", {
     css: row,
     key: `autoFormatting-${form.name}`
-  }, jsx("span", null, form.name), form.autoFormatting())))), jsx("div", {
+  }, fg('platform_editor_migration_icon_and_typography') ? jsx(Text, null, form.name) : jsx("span", null, form.name), form.autoFormatting())))), jsx("div", {
     css: line
   }), jsx("div", {
     css: column
-  }, jsx("h2", {
+  }, fg('platform_editor_migration_icon_and_typography') ? jsx(Heading, {
+    size: "medium"
+  }, jsx(FormattedMessage, messages.markdown)) :
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+  jsx("h2", {
     css: title
   }, jsx(FormattedMessage, messages.markdown)), jsx("ul", null, formatting.filter(form => shortcutNamesWithoutKeymap.indexOf(form.type) === -1).map(form => form.autoFormatting &&
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766

package/dist/es2019/ui/ModalFooter.js

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';

package/dist/es2019/ui/ModalHeader.js

@@ -1,10 +1,16 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { helpDialogMessages as messages } from '@atlaskit/editor-common/messages';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import Heading from '@atlaskit/heading';
+import CloseIcon from '@atlaskit/icon/core/migration/close--cross';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { dialogHeader, header, toolbarButton } from './styles';
 const ModalHeader = injectIntl(({
   intl: {
@@ -16,7 +22,11 @@ const ModalHeader = injectIntl(({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     jsx("div", {
       css: header
-    }, jsx("h1", {
+    }, fg('platform_editor_migration_icon_and_typography') ? jsx(Heading, {
+      size: "large"
+    }, jsx(FormattedMessage, messages.editorHelp)) :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    jsx("h1", {
       css: dialogHeader
     }, jsx(FormattedMessage, messages.editorHelp)), jsx("div", null, jsx(ToolbarButton
     // @ts-expect-error modal onClose handler requires second parameter of UIAnalyticsEvent, which we don't want to pass
@@ -24,7 +34,11 @@ const ModalHeader = injectIntl(({
       onClick: onClose,
       title: formatMessage(messages.closeHelpDialog),
       spacing: "compact",
-      iconBefore: jsx(CrossIcon, {
+      iconBefore: fg('platform_editor_migration_icon_and_typography') ? jsx(CloseIcon, {
+        label: formatMessage(messages.closeHelpDialog),
+        color: "currentColor",
+        spacing: "spacious"
+      }) : jsx(CrossIcon, {
         label: formatMessage(messages.closeHelpDialog),
         size: "medium"
       })

package/dist/es2019/ui/formatting.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
@@ -280,7 +283,7 @@ const otherFormatting = ({
   }, "Shift"), ' + ', jsx("span", {
     css: codeSm
   }, "\u2193")))
-}, ...(fg('platform.editor.a11y-help-dialog-shortcut-keys-position_aghfg') ? [{
+}, ...[{
   name: formatMessage(messages.InsertTableColumn),
   type: 'table',
   autoFormatting: () =>
@@ -320,47 +323,7 @@ const otherFormatting = ({
   }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
     css: codeSm
   }, "[")))
-}] : [{
-  name: formatMessage(messages.InsertTableColumn),
-  type: 'table',
-  autoFormatting: () =>
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-  jsx("span", {
-    css: shortcutsArray
-  }, jsx("span", null, jsx("span", {
-    css: codeSm
-  }, browser.mac ? '⌃' : 'Ctrl'), ' + ', jsx("span", {
-    css: codeMd
-  }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
-    css: codeSm
-  }, "\u2192")), jsx("span", null, jsx("span", {
-    css: codeSm
-  }, browser.mac ? '⌃' : 'Ctrl'), ' + ', jsx("span", {
-    css: codeMd
-  }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
-    css: codeSm
-  }, "\u2190")))
-}, {
-  name: formatMessage(messages.InsertTableRow),
-  type: 'table',
-  autoFormatting: () =>
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-  jsx("span", {
-    css: shortcutsArray
-  }, jsx("span", null, jsx("span", {
-    css: codeSm
-  }, browser.mac ? '⌃' : 'Ctrl'), ' + ', jsx("span", {
-    css: codeMd
-  }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
-    css: codeSm
-  }, "\u2193")), jsx("span", null, jsx("span", {
-    css: codeSm
-  }, browser.mac ? '⌃' : 'Ctrl'), ' + ', jsx("span", {
-    css: codeMd
-  }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
-    css: codeSm
-  }, "\u2191")))
-}]), ...[{
+}], ...[{
   name: formatMessage(messages.selectColumnResize),
   type: 'table',
   autoFormatting: () =>

package/dist/es2019/ui/index.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { useCallback, useEffect } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/es2019/ui/styles.js

@@ -1,16 +1,21 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { akEditorUnitZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import * as colors from '@atlaskit/theme/colors';
 import { B300, N400 } from '@atlaskit/theme/colors';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const header = css({
+const headerFont = fg('platform_editor_migration_icon_and_typography') ? {
+  font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+} : {
+  fontSize: relativeFontSizeToBase16(24)
+};
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+export const header = css(headerFont, {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   zIndex: akEditorUnitZIndex,
   minHeight: "var(--ds-space-300, 24px)",
   padding: `${"var(--ds-space-250, 20px)"} ${"var(--ds-space-500, 40px)"}`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  fontSize: relativeFontSizeToBase16(24),
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
@@ -21,14 +26,17 @@ export const header = css({
   backgroundColor: `var(--ds-background-neutral-subtle, ${colors.N0})`,
   borderRadius: "var(--ds-border-radius, 3px)"
 });
+const footerFont = fg('platform_editor_migration_icon_and_typography') ? {
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+} : {
+  fontSize: relativeFontSizeToBase16(14),
+  lineHeight: "var(--ds-space-250, 20px)"
+};
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const footer = css({
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+export const footer = css(footerFont, {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   zIndex: akEditorUnitZIndex,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  fontSize: relativeFontSizeToBase16(14),
-  lineHeight: "var(--ds-space-250, 20px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: `var(--ds-text-subtlest, ${colors.N300})`,
   padding: "var(--ds-space-300, 24px)",

package/dist/es2019/ui/utils.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { browser } from '@atlaskit/editor-common/utils';

package/dist/esm/plugin.js

@@ -7,7 +7,9 @@ import { bindKeymapWithCommand, openHelp, tooltip } from '@atlaskit/editor-commo
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
-import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
+import QuestionCircleIcon from '@atlaskit/icon/core/migration/question-circle';
+import { default as QuestionCircleIconLegacy } from '@atlaskit/icon/glyph/question-circle';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { openHelpCommand } from './commands';
 import { pluginKey } from './plugin-key';
 import { HelpDialogLoader } from './ui/HelpDialogLoader';
@@ -68,7 +70,10 @@ export var helpDialogPlugin = function helpDialogPlugin(_ref) {
           priority: 4000,
           keyshortcut: tooltip(openHelp),
           icon: function icon() {
-            return /*#__PURE__*/React.createElement(QuestionCircleIcon, {
+            return fg('platform_editor_migration_icon_and_typography') ? /*#__PURE__*/React.createElement(QuestionCircleIcon, {
+              label: "",
+              color: "currentColor"
+            }) : /*#__PURE__*/React.createElement(QuestionCircleIconLegacy, {
               label: ""
             });
           },

package/dist/esm/ui/Modal.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useModal } from '@atlaskit/modal-dialog';

package/dist/esm/ui/ModalContent.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 /** @jsxFrag */
 import React from 'react';
 
@@ -7,6 +10,9 @@ import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { helpDialogMessages as messages } from '@atlaskit/editor-common/messages';
 import { browser } from '@atlaskit/editor-common/utils';
+import Heading from '@atlaskit/heading';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Text } from '@atlaskit/primitives';
 import ModalFooter from './ModalFooter';
 import ModalHeader from './ModalHeader';
 import { column, content, contentWrapper, line, row, title } from './styles';
@@ -24,7 +30,11 @@ export var ModalContent = function ModalContent(_ref) {
     css: content
   }, jsx("div", {
     css: column
-  }, jsx("h2", {
+  }, fg('platform_editor_migration_icon_and_typography') ? jsx(Heading, {
+    size: "medium"
+  }, jsx(FormattedMessage, messages.keyboardShortcuts)) :
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+  jsx("h2", {
     css: title
   }, jsx(FormattedMessage, messages.keyboardShortcuts)), jsx("ul", null, formatting.filter(function (form) {
     var keymap = form.keymap && form.keymap();
@@ -35,7 +45,7 @@ export var ModalContent = function ModalContent(_ref) {
       jsx("li", {
         css: row,
         key: "textFormatting-".concat(form.name)
-      }, jsx("span", null, form.name), getComponentFromKeymap(form.keymap()))
+      }, fg('platform_editor_migration_icon_and_typography') ? jsx(Text, null, form.name) : jsx("span", null, form.name), getComponentFromKeymap(form.keymap()))
     );
   }), formatting.filter(function (form) {
     return shortcutNamesWithoutKeymap.indexOf(form.type) !== -1;
@@ -47,13 +57,17 @@ export var ModalContent = function ModalContent(_ref) {
       jsx("li", {
         css: row,
         key: "autoFormatting-".concat(form.name)
-      }, jsx("span", null, form.name), form.autoFormatting())
+      }, fg('platform_editor_migration_icon_and_typography') ? jsx(Text, null, form.name) : jsx("span", null, form.name), form.autoFormatting())
     );
   }))), jsx("div", {
     css: line
   }), jsx("div", {
     css: column
-  }, jsx("h2", {
+  }, fg('platform_editor_migration_icon_and_typography') ? jsx(Heading, {
+    size: "medium"
+  }, jsx(FormattedMessage, messages.markdown)) :
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+  jsx("h2", {
     css: title
   }, jsx(FormattedMessage, messages.markdown)), jsx("ul", null, formatting.filter(function (form) {
     return shortcutNamesWithoutKeymap.indexOf(form.type) === -1;

package/dist/esm/ui/ModalFooter.js

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';

package/dist/esm/ui/ModalHeader.js

@@ -1,10 +1,16 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { helpDialogMessages as messages } from '@atlaskit/editor-common/messages';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import Heading from '@atlaskit/heading';
+import CloseIcon from '@atlaskit/icon/core/migration/close--cross';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { dialogHeader, header, toolbarButton } from './styles';
 var ModalHeader = injectIntl(function (_ref) {
   var formatMessage = _ref.intl.formatMessage,
@@ -13,7 +19,11 @@ var ModalHeader = injectIntl(function (_ref) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     jsx("div", {
       css: header
-    }, jsx("h1", {
+    }, fg('platform_editor_migration_icon_and_typography') ? jsx(Heading, {
+      size: "large"
+    }, jsx(FormattedMessage, messages.editorHelp)) :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    jsx("h1", {
       css: dialogHeader
     }, jsx(FormattedMessage, messages.editorHelp)), jsx("div", null, jsx(ToolbarButton
     // @ts-expect-error modal onClose handler requires second parameter of UIAnalyticsEvent, which we don't want to pass
@@ -21,7 +31,11 @@ var ModalHeader = injectIntl(function (_ref) {
       onClick: onClose,
       title: formatMessage(messages.closeHelpDialog),
       spacing: "compact",
-      iconBefore: jsx(CrossIcon, {
+      iconBefore: fg('platform_editor_migration_icon_and_typography') ? jsx(CloseIcon, {
+        label: formatMessage(messages.closeHelpDialog),
+        color: "currentColor",
+        spacing: "spacious"
+      }) : jsx(CrossIcon, {
         label: formatMessage(messages.closeHelpDialog),
         size: "medium"
       })

package/dist/esm/ui/formatting.js

@@ -1,5 +1,8 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
@@ -389,7 +392,7 @@ var otherFormatting = function otherFormatting(_ref3) {
         }, "\u2193")))
       );
     }
-  }].concat(_toConsumableArray(fg('platform.editor.a11y-help-dialog-shortcut-keys-position_aghfg') ? [{
+  }].concat([{
     name: formatMessage(messages.InsertTableColumn),
     type: 'table',
     autoFormatting: function autoFormatting() {
@@ -435,53 +438,7 @@ var otherFormatting = function otherFormatting(_ref3) {
         }, "[")))
       );
     }
-  }] : [{
-    name: formatMessage(messages.InsertTableColumn),
-    type: 'table',
-    autoFormatting: function autoFormatting() {
-      return (
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-        jsx("span", {
-          css: shortcutsArray
-        }, jsx("span", null, jsx("span", {
-          css: codeSm
-        }, browser.mac ? '⌃' : 'Ctrl'), ' + ', jsx("span", {
-          css: codeMd
-        }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
-          css: codeSm
-        }, "\u2192")), jsx("span", null, jsx("span", {
-          css: codeSm
-        }, browser.mac ? '⌃' : 'Ctrl'), ' + ', jsx("span", {
-          css: codeMd
-        }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
-          css: codeSm
-        }, "\u2190")))
-      );
-    }
-  }, {
-    name: formatMessage(messages.InsertTableRow),
-    type: 'table',
-    autoFormatting: function autoFormatting() {
-      return (
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-        jsx("span", {
-          css: shortcutsArray
-        }, jsx("span", null, jsx("span", {
-          css: codeSm
-        }, browser.mac ? '⌃' : 'Ctrl'), ' + ', jsx("span", {
-          css: codeMd
-        }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
-          css: codeSm
-        }, "\u2193")), jsx("span", null, jsx("span", {
-          css: codeSm
-        }, browser.mac ? '⌃' : 'Ctrl'), ' + ', jsx("span", {
-          css: codeMd
-        }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
-          css: codeSm
-        }, "\u2191")))
-      );
-    }
-  }]), [{
+  }], [{
     name: formatMessage(messages.selectColumnResize),
     type: 'table',
     autoFormatting: function autoFormatting() {

package/dist/esm/ui/index.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { useCallback, useEffect } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/esm/ui/styles.js

@@ -1,16 +1,21 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { akEditorUnitZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import * as colors from '@atlaskit/theme/colors';
 import { B300, N400 } from '@atlaskit/theme/colors';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var header = css({
+var headerFont = fg('platform_editor_migration_icon_and_typography') ? {
+  font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+} : {
+  fontSize: relativeFontSizeToBase16(24)
+};
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+export var header = css(headerFont, {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   zIndex: akEditorUnitZIndex,
   minHeight: "var(--ds-space-300, 24px)",
   padding: "var(--ds-space-250, 20px)".concat(" ", "var(--ds-space-500, 40px)"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  fontSize: relativeFontSizeToBase16(24),
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
@@ -21,14 +26,17 @@ export var header = css({
   backgroundColor: "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"),
   borderRadius: "var(--ds-border-radius, 3px)"
 });
+var footerFont = fg('platform_editor_migration_icon_and_typography') ? {
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+} : {
+  fontSize: relativeFontSizeToBase16(14),
+  lineHeight: "var(--ds-space-250, 20px)"
+};
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var footer = css({
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+export var footer = css(footerFont, {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   zIndex: akEditorUnitZIndex,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  fontSize: relativeFontSizeToBase16(14),
-  lineHeight: "var(--ds-space-250, 20px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
   padding: "var(--ds-space-300, 24px)",

package/dist/esm/ui/utils.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { browser } from '@atlaskit/editor-common/utils';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 import type { Format } from './Format';
 interface ModalProps {

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 declare const ModalFooter: () => jsx.JSX.Element;
 export default ModalFooter;

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 import type { Keymap } from '@atlaskit/editor-common/keymaps';
 export declare const shortcutNamesWithoutKeymap: string[];

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 import type { Format } from './Format';
 interface ModalProps {

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 declare const ModalFooter: () => jsx.JSX.Element;
 export default ModalFooter;

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 import type { Keymap } from '@atlaskit/editor-common/keymaps';
 export declare const shortcutNamesWithoutKeymap: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-help-dialog",
-	"version": "1.3.0",
+	"version": "1.4.0",
 	"description": "Help Dialog plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,16 +32,18 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/editor-common": "^86.1.0",
-		"@atlaskit/editor-plugin-analytics": "^1.4.0",
+		"@atlaskit/editor-common": "^86.7.0",
+		"@atlaskit/editor-plugin-analytics": "^1.5.0",
 		"@atlaskit/editor-plugin-quick-insert": "^1.1.0",
 		"@atlaskit/editor-prosemirror": "4.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
-		"@atlaskit/icon": "^22.6.0",
+		"@atlaskit/heading": "^2.4.0",
+		"@atlaskit/icon": "^22.7.0",
 		"@atlaskit/modal-dialog": "^12.14.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
+		"@atlaskit/primitives": "^11.0.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.55.0",
+		"@atlaskit/tokens": "^1.56.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"react-intl-next": "npm:react-intl@^5.18.1",
@@ -84,10 +86,10 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform.editor.a11y-help-dialog-shortcut-keys-position_aghfg": {
+		"platform_editor_a11y_table_context_menu": {
 			"type": "boolean"
 		},
-		"platform_editor_a11y_table_context_menu": {
+		"platform_editor_migration_icon_and_typography": {
 			"type": "boolean"
 		}
 	}