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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/plugin.js +7 -2
  3. package/dist/cjs/ui/ModalContent.js +15 -4
  4. package/dist/cjs/ui/ModalHeader.js +13 -2
  5. package/dist/cjs/ui/styles.js +17 -9
  6. package/dist/es2019/plugin.js +7 -2
  7. package/dist/es2019/ui/ModalContent.js +15 -4
  8. package/dist/es2019/ui/ModalHeader.js +13 -2
  9. package/dist/es2019/ui/styles.js +17 -9
  10. package/dist/esm/plugin.js +7 -2
  11. package/dist/esm/ui/ModalContent.js +15 -4
  12. package/dist/esm/ui/ModalHeader.js +13 -2
  13. package/dist/esm/ui/styles.js +17 -9
  14. package/package.json +8 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-help-dialog
2
2
 
3
+ ## 1.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#123266](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/123266)
8
+ [`821ca3d93201f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/821ca3d93201f) -
9
+ [ux] Migrate legacy icons and typography in Editor to new ADS icons and token under Feature Gate
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 1.3.1
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/plugin.js CHANGED
@@ -13,7 +13,9 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
13
13
  var _messages = require("@atlaskit/editor-common/messages");
14
14
  var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
15
15
  var _keymap = require("@atlaskit/editor-prosemirror/keymap");
16
- var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/question-circle"));
16
+ var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/question-circle"));
17
+ var _questionCircle2 = _interopRequireDefault(require("@atlaskit/icon/glyph/question-circle"));
18
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
17
19
  var _commands = require("./commands");
18
20
  var _pluginKey = require("./plugin-key");
19
21
  var _HelpDialogLoader = require("./ui/HelpDialogLoader");
@@ -76,7 +78,10 @@ var helpDialogPlugin = exports.helpDialogPlugin = function helpDialogPlugin(_ref
76
78
  priority: 4000,
77
79
  keyshortcut: (0, _keymaps.tooltip)(_keymaps.openHelp),
78
80
  icon: function icon() {
79
- return /*#__PURE__*/_react.default.createElement(_questionCircle.default, {
81
+ return (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? /*#__PURE__*/_react.default.createElement(_questionCircle.default, {
82
+ label: "",
83
+ color: "currentColor"
84
+ }) : /*#__PURE__*/_react.default.createElement(_questionCircle2.default, {
80
85
  label: ""
81
86
  });
82
87
  },
package/dist/cjs/ui/ModalContent.js CHANGED
@@ -10,6 +10,9 @@ var _react2 = require("@emotion/react");
10
10
  var _reactIntlNext = require("react-intl-next");
11
11
  var _messages = require("@atlaskit/editor-common/messages");
12
12
  var _utils = require("@atlaskit/editor-common/utils");
13
+ var _heading = _interopRequireDefault(require("@atlaskit/heading"));
14
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
15
+ var _primitives = require("@atlaskit/primitives");
13
16
  var _ModalFooter = _interopRequireDefault(require("./ModalFooter"));
14
17
  var _ModalHeader = _interopRequireDefault(require("./ModalHeader"));
15
18
  var _styles = require("./styles");
@@ -35,7 +38,11 @@ var ModalContent = exports.ModalContent = function ModalContent(_ref) {
35
38
  css: _styles.content
36
39
  }, (0, _react2.jsx)("div", {
37
40
  css: _styles.column
38
- }, (0, _react2.jsx)("h2", {
41
+ }, (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? (0, _react2.jsx)(_heading.default, {
42
+ size: "medium"
43
+ }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.helpDialogMessages.keyboardShortcuts)) :
44
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
45
+ (0, _react2.jsx)("h2", {
39
46
  css: _styles.title
40
47
  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.helpDialogMessages.keyboardShortcuts)), (0, _react2.jsx)("ul", null, formatting.filter(function (form) {
41
48
  var keymap = form.keymap && form.keymap();
@@ -46,7 +53,7 @@ var ModalContent = exports.ModalContent = function ModalContent(_ref) {
46
53
  (0, _react2.jsx)("li", {
47
54
  css: _styles.row,
48
55
  key: "textFormatting-".concat(form.name)
49
- }, (0, _react2.jsx)("span", null, form.name), (0, _utils2.getComponentFromKeymap)(form.keymap()))
56
+ }, (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()))
50
57
  );
51
58
  }), formatting.filter(function (form) {
52
59
  return _utils2.shortcutNamesWithoutKeymap.indexOf(form.type) !== -1;
@@ -58,13 +65,17 @@ var ModalContent = exports.ModalContent = function ModalContent(_ref) {
58
65
  (0, _react2.jsx)("li", {
59
66
  css: _styles.row,
60
67
  key: "autoFormatting-".concat(form.name)
61
- }, (0, _react2.jsx)("span", null, form.name), form.autoFormatting())
68
+ }, (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())
62
69
  );
63
70
  }))), (0, _react2.jsx)("div", {
64
71
  css: _styles.line
65
72
  }), (0, _react2.jsx)("div", {
66
73
  css: _styles.column
67
- }, (0, _react2.jsx)("h2", {
74
+ }, (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? (0, _react2.jsx)(_heading.default, {
75
+ size: "medium"
76
+ }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.helpDialogMessages.markdown)) :
77
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
78
+ (0, _react2.jsx)("h2", {
68
79
  css: _styles.title
69
80
  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.helpDialogMessages.markdown)), (0, _react2.jsx)("ul", null, formatting.filter(function (form) {
70
81
  return _utils2.shortcutNamesWithoutKeymap.indexOf(form.type) === -1;
package/dist/cjs/ui/ModalHeader.js CHANGED
@@ -9,7 +9,10 @@ var _react = require("@emotion/react");
9
9
  var _reactIntlNext = require("react-intl-next");
10
10
  var _messages = require("@atlaskit/editor-common/messages");
11
11
  var _uiMenu = require("@atlaskit/editor-common/ui-menu");
12
+ var _heading = _interopRequireDefault(require("@atlaskit/heading"));
13
+ var _closeCross = _interopRequireDefault(require("@atlaskit/icon/core/migration/close--cross"));
12
14
  var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
15
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
13
16
  var _styles = require("./styles");
14
17
  /**
15
18
  * @jsxRuntime classic
@@ -24,7 +27,11 @@ var ModalHeader = (0, _reactIntlNext.injectIntl)(function (_ref) {
24
27
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
25
28
  (0, _react.jsx)("div", {
26
29
  css: _styles.header
27
- }, (0, _react.jsx)("h1", {
30
+ }, (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? (0, _react.jsx)(_heading.default, {
31
+ size: "large"
32
+ }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.helpDialogMessages.editorHelp)) :
33
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
34
+ (0, _react.jsx)("h1", {
28
35
  css: _styles.dialogHeader
29
36
  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.helpDialogMessages.editorHelp)), (0, _react.jsx)("div", null, (0, _react.jsx)(_uiMenu.ToolbarButton
30
37
  // @ts-expect-error modal onClose handler requires second parameter of UIAnalyticsEvent, which we don't want to pass
@@ -32,7 +39,11 @@ var ModalHeader = (0, _reactIntlNext.injectIntl)(function (_ref) {
32
39
  onClick: onClose,
33
40
  title: formatMessage(_messages.helpDialogMessages.closeHelpDialog),
34
41
  spacing: "compact",
35
- iconBefore: (0, _react.jsx)(_cross.default, {
42
+ iconBefore: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? (0, _react.jsx)(_closeCross.default, {
43
+ label: formatMessage(_messages.helpDialogMessages.closeHelpDialog),
44
+ color: "currentColor",
45
+ spacing: "spacious"
46
+ }) : (0, _react.jsx)(_cross.default, {
36
47
  label: formatMessage(_messages.helpDialogMessages.closeHelpDialog),
37
48
  size: "medium"
38
49
  })
package/dist/cjs/ui/styles.js CHANGED
@@ -7,20 +7,25 @@ Object.defineProperty(exports, "__esModule", {
7
7
  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;
8
8
  var _react = require("@emotion/react");
9
9
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
10
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
10
11
  var _colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
11
12
  var colors = _colors;
12
13
  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); }
13
14
  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; }
14
15
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
15
16
 
16
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
17
- var header = exports.header = (0, _react.css)({
17
+ var headerFont = (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? {
18
+ 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)"
19
+ } : {
20
+ fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(24)
21
+ };
22
+
23
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
24
+ var header = exports.header = (0, _react.css)(headerFont, {
18
25
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
19
26
  zIndex: _editorSharedStyles.akEditorUnitZIndex,
20
27
  minHeight: "var(--ds-space-300, 24px)",
21
28
  padding: "var(--ds-space-250, 20px)".concat(" ", "var(--ds-space-500, 40px)"),
22
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
23
- fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(24),
24
29
  display: 'flex',
25
30
  justifyContent: 'space-between',
26
31
  alignItems: 'center',
@@ -31,14 +36,17 @@ var header = exports.header = (0, _react.css)({
31
36
  backgroundColor: "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"),
32
37
  borderRadius: "var(--ds-border-radius, 3px)"
33
38
  });
39
+ var footerFont = (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? {
40
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
41
+ } : {
42
+ fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(14),
43
+ lineHeight: "var(--ds-space-250, 20px)"
44
+ };
34
45
 
35
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
36
- var footer = exports.footer = (0, _react.css)({
46
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
47
+ var footer = exports.footer = (0, _react.css)(footerFont, {
37
48
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
38
49
  zIndex: _editorSharedStyles.akEditorUnitZIndex,
39
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
40
- fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(14),
41
- lineHeight: "var(--ds-space-250, 20px)",
42
50
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
43
51
  color: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
44
52
  padding: "var(--ds-space-300, 24px)",
package/dist/es2019/plugin.js CHANGED
@@ -4,7 +4,9 @@ import { bindKeymapWithCommand, openHelp, tooltip } from '@atlaskit/editor-commo
4
4
  import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
5
5
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
6
6
  import { keymap } from '@atlaskit/editor-prosemirror/keymap';
7
- import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
7
+ import QuestionCircleIcon from '@atlaskit/icon/core/migration/question-circle';
8
+ import { default as QuestionCircleIconLegacy } from '@atlaskit/icon/glyph/question-circle';
9
+ import { fg } from '@atlaskit/platform-feature-flags';
8
10
  import { openHelpCommand } from './commands';
9
11
  import { pluginKey } from './plugin-key';
10
12
  import { HelpDialogLoader } from './ui/HelpDialogLoader';
@@ -63,7 +65,10 @@ export const helpDialogPlugin = ({
63
65
  keywords: ['?'],
64
66
  priority: 4000,
65
67
  keyshortcut: tooltip(openHelp),
66
- icon: () => /*#__PURE__*/React.createElement(QuestionCircleIcon, {
68
+ icon: () => fg('platform_editor_migration_icon_and_typography') ? /*#__PURE__*/React.createElement(QuestionCircleIcon, {
69
+ label: "",
70
+ color: "currentColor"
71
+ }) : /*#__PURE__*/React.createElement(QuestionCircleIconLegacy, {
67
72
  label: ""
68
73
  }),
69
74
  action(insert) {
package/dist/es2019/ui/ModalContent.js CHANGED
@@ -10,6 +10,9 @@ import { jsx } from '@emotion/react';
10
10
  import { FormattedMessage } from 'react-intl-next';
11
11
  import { helpDialogMessages as messages } from '@atlaskit/editor-common/messages';
12
12
  import { browser } from '@atlaskit/editor-common/utils';
13
+ import Heading from '@atlaskit/heading';
14
+ import { fg } from '@atlaskit/platform-feature-flags';
15
+ import { Text } from '@atlaskit/primitives';
13
16
  import ModalFooter from './ModalFooter';
14
17
  import ModalHeader from './ModalHeader';
15
18
  import { column, content, contentWrapper, line, row, title } from './styles';
@@ -28,7 +31,11 @@ export const ModalContent = ({
28
31
  css: content
29
32
  }, jsx("div", {
30
33
  css: column
31
- }, jsx("h2", {
34
+ }, fg('platform_editor_migration_icon_and_typography') ? jsx(Heading, {
35
+ size: "medium"
36
+ }, jsx(FormattedMessage, messages.keyboardShortcuts)) :
37
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
38
+ jsx("h2", {
32
39
  css: title
33
40
  }, jsx(FormattedMessage, messages.keyboardShortcuts)), jsx("ul", null, formatting.filter(form => {
34
41
  const keymap = form.keymap && form.keymap();
@@ -38,16 +45,20 @@ export const ModalContent = ({
38
45
  jsx("li", {
39
46
  css: row,
40
47
  key: `textFormatting-${form.name}`
41
- }, jsx("span", null, form.name), getComponentFromKeymap(form.keymap()))), formatting.filter(form => shortcutNamesWithoutKeymap.indexOf(form.type) !== -1).filter(form => form.autoFormatting).map(form =>
48
+ }, 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 =>
42
49
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
43
50
  jsx("li", {
44
51
  css: row,
45
52
  key: `autoFormatting-${form.name}`
46
- }, jsx("span", null, form.name), form.autoFormatting())))), jsx("div", {
53
+ }, fg('platform_editor_migration_icon_and_typography') ? jsx(Text, null, form.name) : jsx("span", null, form.name), form.autoFormatting())))), jsx("div", {
47
54
  css: line
48
55
  }), jsx("div", {
49
56
  css: column
50
- }, jsx("h2", {
57
+ }, fg('platform_editor_migration_icon_and_typography') ? jsx(Heading, {
58
+ size: "medium"
59
+ }, jsx(FormattedMessage, messages.markdown)) :
60
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
61
+ jsx("h2", {
51
62
  css: title
52
63
  }, jsx(FormattedMessage, messages.markdown)), jsx("ul", null, formatting.filter(form => shortcutNamesWithoutKeymap.indexOf(form.type) === -1).map(form => form.autoFormatting &&
53
64
  // 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/ModalHeader.js CHANGED
@@ -7,7 +7,10 @@ import { jsx } from '@emotion/react';
7
7
  import { FormattedMessage, injectIntl } from 'react-intl-next';
8
8
  import { helpDialogMessages as messages } from '@atlaskit/editor-common/messages';
9
9
  import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
10
+ import Heading from '@atlaskit/heading';
11
+ import CloseIcon from '@atlaskit/icon/core/migration/close--cross';
10
12
  import CrossIcon from '@atlaskit/icon/glyph/cross';
13
+ import { fg } from '@atlaskit/platform-feature-flags';
11
14
  import { dialogHeader, header, toolbarButton } from './styles';
12
15
  const ModalHeader = injectIntl(({
13
16
  intl: {
@@ -19,7 +22,11 @@ const ModalHeader = injectIntl(({
19
22
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
20
23
  jsx("div", {
21
24
  css: header
22
- }, jsx("h1", {
25
+ }, fg('platform_editor_migration_icon_and_typography') ? jsx(Heading, {
26
+ size: "large"
27
+ }, jsx(FormattedMessage, messages.editorHelp)) :
28
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
29
+ jsx("h1", {
23
30
  css: dialogHeader
24
31
  }, jsx(FormattedMessage, messages.editorHelp)), jsx("div", null, jsx(ToolbarButton
25
32
  // @ts-expect-error modal onClose handler requires second parameter of UIAnalyticsEvent, which we don't want to pass
@@ -27,7 +34,11 @@ const ModalHeader = injectIntl(({
27
34
  onClick: onClose,
28
35
  title: formatMessage(messages.closeHelpDialog),
29
36
  spacing: "compact",
30
- iconBefore: jsx(CrossIcon, {
37
+ iconBefore: fg('platform_editor_migration_icon_and_typography') ? jsx(CloseIcon, {
38
+ label: formatMessage(messages.closeHelpDialog),
39
+ color: "currentColor",
40
+ spacing: "spacious"
41
+ }) : jsx(CrossIcon, {
31
42
  label: formatMessage(messages.closeHelpDialog),
32
43
  size: "medium"
33
44
  })
package/dist/es2019/ui/styles.js CHANGED
@@ -1,16 +1,21 @@
1
1
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
2
2
  import { css } from '@emotion/react';
3
3
  import { akEditorUnitZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
4
+ import { fg } from '@atlaskit/platform-feature-flags';
4
5
  import * as colors from '@atlaskit/theme/colors';
5
6
  import { B300, N400 } from '@atlaskit/theme/colors';
6
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
7
- export const header = css({
7
+ const headerFont = fg('platform_editor_migration_icon_and_typography') ? {
8
+ 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)"
9
+ } : {
10
+ fontSize: relativeFontSizeToBase16(24)
11
+ };
12
+
13
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
14
+ export const header = css(headerFont, {
8
15
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
9
16
  zIndex: akEditorUnitZIndex,
10
17
  minHeight: "var(--ds-space-300, 24px)",
11
18
  padding: `${"var(--ds-space-250, 20px)"} ${"var(--ds-space-500, 40px)"}`,
12
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
13
- fontSize: relativeFontSizeToBase16(24),
14
19
  display: 'flex',
15
20
  justifyContent: 'space-between',
16
21
  alignItems: 'center',
@@ -21,14 +26,17 @@ export const header = css({
21
26
  backgroundColor: `var(--ds-background-neutral-subtle, ${colors.N0})`,
22
27
  borderRadius: "var(--ds-border-radius, 3px)"
23
28
  });
29
+ const footerFont = fg('platform_editor_migration_icon_and_typography') ? {
30
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
31
+ } : {
32
+ fontSize: relativeFontSizeToBase16(14),
33
+ lineHeight: "var(--ds-space-250, 20px)"
34
+ };
24
35
 
25
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
26
- export const footer = css({
36
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
37
+ export const footer = css(footerFont, {
27
38
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
28
39
  zIndex: akEditorUnitZIndex,
29
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
30
- fontSize: relativeFontSizeToBase16(14),
31
- lineHeight: "var(--ds-space-250, 20px)",
32
40
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
33
41
  color: `var(--ds-text-subtlest, ${colors.N300})`,
34
42
  padding: "var(--ds-space-300, 24px)",
package/dist/esm/plugin.js CHANGED
@@ -7,7 +7,9 @@ import { bindKeymapWithCommand, openHelp, tooltip } from '@atlaskit/editor-commo
7
7
  import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
8
8
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
9
9
  import { keymap } from '@atlaskit/editor-prosemirror/keymap';
10
- import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
10
+ import QuestionCircleIcon from '@atlaskit/icon/core/migration/question-circle';
11
+ import { default as QuestionCircleIconLegacy } from '@atlaskit/icon/glyph/question-circle';
12
+ import { fg } from '@atlaskit/platform-feature-flags';
11
13
  import { openHelpCommand } from './commands';
12
14
  import { pluginKey } from './plugin-key';
13
15
  import { HelpDialogLoader } from './ui/HelpDialogLoader';
@@ -68,7 +70,10 @@ export var helpDialogPlugin = function helpDialogPlugin(_ref) {
68
70
  priority: 4000,
69
71
  keyshortcut: tooltip(openHelp),
70
72
  icon: function icon() {
71
- return /*#__PURE__*/React.createElement(QuestionCircleIcon, {
73
+ return fg('platform_editor_migration_icon_and_typography') ? /*#__PURE__*/React.createElement(QuestionCircleIcon, {
74
+ label: "",
75
+ color: "currentColor"
76
+ }) : /*#__PURE__*/React.createElement(QuestionCircleIconLegacy, {
72
77
  label: ""
73
78
  });
74
79
  },
package/dist/esm/ui/ModalContent.js CHANGED
@@ -10,6 +10,9 @@ import { jsx } from '@emotion/react';
10
10
  import { FormattedMessage } from 'react-intl-next';
11
11
  import { helpDialogMessages as messages } from '@atlaskit/editor-common/messages';
12
12
  import { browser } from '@atlaskit/editor-common/utils';
13
+ import Heading from '@atlaskit/heading';
14
+ import { fg } from '@atlaskit/platform-feature-flags';
15
+ import { Text } from '@atlaskit/primitives';
13
16
  import ModalFooter from './ModalFooter';
14
17
  import ModalHeader from './ModalHeader';
15
18
  import { column, content, contentWrapper, line, row, title } from './styles';
@@ -27,7 +30,11 @@ export var ModalContent = function ModalContent(_ref) {
27
30
  css: content
28
31
  }, jsx("div", {
29
32
  css: column
30
- }, jsx("h2", {
33
+ }, fg('platform_editor_migration_icon_and_typography') ? jsx(Heading, {
34
+ size: "medium"
35
+ }, jsx(FormattedMessage, messages.keyboardShortcuts)) :
36
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
37
+ jsx("h2", {
31
38
  css: title
32
39
  }, jsx(FormattedMessage, messages.keyboardShortcuts)), jsx("ul", null, formatting.filter(function (form) {
33
40
  var keymap = form.keymap && form.keymap();
@@ -38,7 +45,7 @@ export var ModalContent = function ModalContent(_ref) {
38
45
  jsx("li", {
39
46
  css: row,
40
47
  key: "textFormatting-".concat(form.name)
41
- }, jsx("span", null, form.name), getComponentFromKeymap(form.keymap()))
48
+ }, fg('platform_editor_migration_icon_and_typography') ? jsx(Text, null, form.name) : jsx("span", null, form.name), getComponentFromKeymap(form.keymap()))
42
49
  );
43
50
  }), formatting.filter(function (form) {
44
51
  return shortcutNamesWithoutKeymap.indexOf(form.type) !== -1;
@@ -50,13 +57,17 @@ export var ModalContent = function ModalContent(_ref) {
50
57
  jsx("li", {
51
58
  css: row,
52
59
  key: "autoFormatting-".concat(form.name)
53
- }, jsx("span", null, form.name), form.autoFormatting())
60
+ }, fg('platform_editor_migration_icon_and_typography') ? jsx(Text, null, form.name) : jsx("span", null, form.name), form.autoFormatting())
54
61
  );
55
62
  }))), jsx("div", {
56
63
  css: line
57
64
  }), jsx("div", {
58
65
  css: column
59
- }, jsx("h2", {
66
+ }, fg('platform_editor_migration_icon_and_typography') ? jsx(Heading, {
67
+ size: "medium"
68
+ }, jsx(FormattedMessage, messages.markdown)) :
69
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
70
+ jsx("h2", {
60
71
  css: title
61
72
  }, jsx(FormattedMessage, messages.markdown)), jsx("ul", null, formatting.filter(function (form) {
62
73
  return shortcutNamesWithoutKeymap.indexOf(form.type) === -1;
package/dist/esm/ui/ModalHeader.js CHANGED
@@ -7,7 +7,10 @@ import { jsx } from '@emotion/react';
7
7
  import { FormattedMessage, injectIntl } from 'react-intl-next';
8
8
  import { helpDialogMessages as messages } from '@atlaskit/editor-common/messages';
9
9
  import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
10
+ import Heading from '@atlaskit/heading';
11
+ import CloseIcon from '@atlaskit/icon/core/migration/close--cross';
10
12
  import CrossIcon from '@atlaskit/icon/glyph/cross';
13
+ import { fg } from '@atlaskit/platform-feature-flags';
11
14
  import { dialogHeader, header, toolbarButton } from './styles';
12
15
  var ModalHeader = injectIntl(function (_ref) {
13
16
  var formatMessage = _ref.intl.formatMessage,
@@ -16,7 +19,11 @@ var ModalHeader = injectIntl(function (_ref) {
16
19
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
17
20
  jsx("div", {
18
21
  css: header
19
- }, jsx("h1", {
22
+ }, fg('platform_editor_migration_icon_and_typography') ? jsx(Heading, {
23
+ size: "large"
24
+ }, jsx(FormattedMessage, messages.editorHelp)) :
25
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
26
+ jsx("h1", {
20
27
  css: dialogHeader
21
28
  }, jsx(FormattedMessage, messages.editorHelp)), jsx("div", null, jsx(ToolbarButton
22
29
  // @ts-expect-error modal onClose handler requires second parameter of UIAnalyticsEvent, which we don't want to pass
@@ -24,7 +31,11 @@ var ModalHeader = injectIntl(function (_ref) {
24
31
  onClick: onClose,
25
32
  title: formatMessage(messages.closeHelpDialog),
26
33
  spacing: "compact",
27
- iconBefore: jsx(CrossIcon, {
34
+ iconBefore: fg('platform_editor_migration_icon_and_typography') ? jsx(CloseIcon, {
35
+ label: formatMessage(messages.closeHelpDialog),
36
+ color: "currentColor",
37
+ spacing: "spacious"
38
+ }) : jsx(CrossIcon, {
28
39
  label: formatMessage(messages.closeHelpDialog),
29
40
  size: "medium"
30
41
  })
package/dist/esm/ui/styles.js CHANGED
@@ -1,16 +1,21 @@
1
1
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
2
2
  import { css } from '@emotion/react';
3
3
  import { akEditorUnitZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
4
+ import { fg } from '@atlaskit/platform-feature-flags';
4
5
  import * as colors from '@atlaskit/theme/colors';
5
6
  import { B300, N400 } from '@atlaskit/theme/colors';
6
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
7
- export var header = css({
7
+ var headerFont = fg('platform_editor_migration_icon_and_typography') ? {
8
+ 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)"
9
+ } : {
10
+ fontSize: relativeFontSizeToBase16(24)
11
+ };
12
+
13
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
14
+ export var header = css(headerFont, {
8
15
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
9
16
  zIndex: akEditorUnitZIndex,
10
17
  minHeight: "var(--ds-space-300, 24px)",
11
18
  padding: "var(--ds-space-250, 20px)".concat(" ", "var(--ds-space-500, 40px)"),
12
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
13
- fontSize: relativeFontSizeToBase16(24),
14
19
  display: 'flex',
15
20
  justifyContent: 'space-between',
16
21
  alignItems: 'center',
@@ -21,14 +26,17 @@ export var header = css({
21
26
  backgroundColor: "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"),
22
27
  borderRadius: "var(--ds-border-radius, 3px)"
23
28
  });
29
+ var footerFont = fg('platform_editor_migration_icon_and_typography') ? {
30
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
31
+ } : {
32
+ fontSize: relativeFontSizeToBase16(14),
33
+ lineHeight: "var(--ds-space-250, 20px)"
34
+ };
24
35
 
25
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
26
- export var footer = css({
36
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
37
+ export var footer = css(footerFont, {
27
38
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
28
39
  zIndex: akEditorUnitZIndex,
29
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
30
- fontSize: relativeFontSizeToBase16(14),
31
- lineHeight: "var(--ds-space-250, 20px)",
32
40
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
33
41
  color: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
34
42
  padding: "var(--ds-space-300, 24px)",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-help-dialog",
3
- "version": "1.3.1",
3
+ "version": "1.4.0",
4
4
  "description": "Help Dialog plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -32,14 +32,16 @@
32
32
  ".": "./src/index.ts"
33
33
  },
34
34
  "dependencies": {
35
- "@atlaskit/editor-common": "^86.5.0",
36
- "@atlaskit/editor-plugin-analytics": "^1.4.0",
35
+ "@atlaskit/editor-common": "^86.7.0",
36
+ "@atlaskit/editor-plugin-analytics": "^1.5.0",
37
37
  "@atlaskit/editor-plugin-quick-insert": "^1.1.0",
38
38
  "@atlaskit/editor-prosemirror": "4.0.1",
39
39
  "@atlaskit/editor-shared-styles": "^2.13.0",
40
+ "@atlaskit/heading": "^2.4.0",
40
41
  "@atlaskit/icon": "^22.7.0",
41
42
  "@atlaskit/modal-dialog": "^12.14.0",
42
43
  "@atlaskit/platform-feature-flags": "^0.3.0",
44
+ "@atlaskit/primitives": "^11.0.0",
43
45
  "@atlaskit/theme": "^12.11.0",
44
46
  "@atlaskit/tokens": "^1.56.0",
45
47
  "@babel/runtime": "^7.0.0",
@@ -86,6 +88,9 @@
86
88
  "platform-feature-flags": {
87
89
  "platform_editor_a11y_table_context_menu": {
88
90
  "type": "boolean"
91
+ },
92
+ "platform_editor_migration_icon_and_typography": {
93
+ "type": "boolean"
89
94
  }
90
95
  }
91
96
  }