@atlaskit/editor-plugin-help-dialog 1.2.4 → 1.2.6

package/dist/es2019/ui/formatting.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
-import { addInlineComment, addLink, alignCenter, alignLeft, alignRight, clearFormatting, decreaseMediaSize, focusTableResizer, increaseMediaSize, insertRule, navToEditorToolbar, navToFloatingToolbar, pastePlainText, redo, setNormalText, toggleBlockQuote, toggleBold, toggleBulletList, toggleCode, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleItalic, toggleOrderedList, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleTaskItemCheckbox, toggleUnderline, undo } from '@atlaskit/editor-common/keymaps';
+import { addInlineComment, addLink, alignCenter, alignLeft, alignRight, clearFormatting, decreaseMediaSize, focusTableResizer, increaseMediaSize, insertRule, navToEditorToolbar, navToFloatingToolbar, pastePlainText, redo, setNormalText, toggleBlockQuote, toggleBold, toggleBulletList, toggleCode, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleHighlightPalette, toggleItalic, toggleOrderedList, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleTaskItemCheckbox, toggleUnderline, undo } from '@atlaskit/editor-common/keymaps';
 import { alignmentMessages, annotationMessages, blockTypeMessages, listMessages, helpDialogMessages as messages, toolbarInsertBlockMessages, toolbarMessages, undoRedoMessages } from '@atlaskit/editor-common/messages';
 import { browser } from '@atlaskit/editor-common/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -234,7 +234,9 @@ const otherFormatting = ({
 }, {
   name: formatMessage(messages.selectTableRow),
   type: 'table',
-  autoFormatting: () => jsx("span", {
+  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: browser.mac ? codeSm : codeMd
@@ -256,7 +258,9 @@ const otherFormatting = ({
 }, {
   name: formatMessage(messages.selectTableColumn),
   type: 'table',
-  autoFormatting: () => jsx("span", {
+  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: browser.mac ? codeSm : codeMd
@@ -275,36 +279,92 @@ const otherFormatting = ({
   }, "Shift"), ' + ', jsx("span", {
     css: codeSm
   }, "\u2193")))
-}, ...(getBooleanFF('platform.editor.a11y-column-resizing_emcvz') ? [{
-  name: formatMessage(messages.selectColumnResize),
+}, ...(getBooleanFF('platform.editor.a11y-help-dialog-shortcut-keys-position_aghfg') ? [{
+  name: formatMessage(messages.InsertTableColumn),
   type: 'table',
-  autoFormatting: () => jsx("span", {
+  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: browser.mac ? codeSm : codeMd
   }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
     css: codeMd
   }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
+    css: codeSm
+  }, "=")), jsx("span", null, jsx("span", {
+    css: browser.mac ? codeSm : codeMd
+  }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
     css: codeMd
-  }, "Shift"), ' + ', jsx("span", {
+  }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
     css: codeSm
-  }, "C")))
+  }, "-")))
 }, {
-  name: formatMessage(messages.increaseColumnSize),
+  name: formatMessage(messages.InsertTableRow),
   type: 'table',
-  autoFormatting: () => jsx("span", {
+  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: browser.mac ? codeSm : codeMd
   }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
     css: codeMd
   }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
+    css: codeSm
+  }, "]")), jsx("span", null, jsx("span", {
+    css: browser.mac ? codeSm : codeMd
+  }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
     css: codeMd
+  }, 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.decreaseColumnSize),
+  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")))
+}]), ...(getBooleanFF('platform.editor.a11y-column-resizing_emcvz') ? [{
+  name: formatMessage(messages.selectColumnResize),
   type: 'table',
-  autoFormatting: () => jsx("span", {
+  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: browser.mac ? codeSm : codeMd
@@ -312,8 +372,14 @@ const otherFormatting = ({
     css: codeMd
   }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
     css: codeMd
-  }, "]")))
-}] : [])];
+  }, "Shift"), ' + ', jsx("span", {
+    css: codeSm
+  }, "C")))
+}] : []), {
+  name: formatMessage(messages.highlightColor),
+  type: 'highlight',
+  keymap: () => toggleHighlightPalette
+}];
 const resizeInformationFormatting = ({
   formatMessage
 }) => [{
@@ -351,5 +417,5 @@ const quickInsertAutoFormat = ({
 const isAnyA11yResizeFeatureFlagEnabled = getBooleanFF('platform.editor.a11y-media-resizing_b5v0o') || getBooleanFF('platform.editor.a11y-table-resizing_uapcv');
 export const getSupportedFormatting = (schema, intl, imageEnabled, quickInsertEnabled) => {
   const supportedBySchema = formatting(intl).filter(format => schema.nodes[format.type] || schema.marks[format.type]);
-  return [...navigationKeymaps(intl), ...supportedBySchema, ...(imageEnabled ? [imageAutoFormat] : []), ...(quickInsertEnabled ? [quickInsertAutoFormat(intl)] : []), ...otherFormatting(intl), ...(isAnyA11yResizeFeatureFlagEnabled ? resizeInformationFormatting(intl) : []), ...(getBooleanFF('platform.editor.a11y-table-resizing_uapcv') ? focusTableResizeHandleFormatting(intl) : [])];
+  return [...navigationKeymaps(intl), ...otherFormatting(intl), ...supportedBySchema, ...(imageEnabled ? [imageAutoFormat] : []), ...(quickInsertEnabled ? [quickInsertAutoFormat(intl)] : []), ...(getBooleanFF('platform.editor.a11y-table-resizing_uapcv') ? focusTableResizeHandleFormatting(intl) : []), ...(isAnyA11yResizeFeatureFlagEnabled ? resizeInformationFormatting(intl) : [])];
 };

package/dist/es2019/ui/styles.js

@@ -1,37 +1,53 @@
 import { css } from '@emotion/react';
 import { akEditorUnitZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import * as colors from '@atlaskit/theme/colors';
-import { N400 } from '@atlaskit/theme/colors';
+import { B300, N400 } from '@atlaskit/theme/colors';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const header = css({
+  // 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',
   boxShadow: "'none'",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: `var(--ds-text, ${colors.N400})`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   backgroundColor: `var(--ds-background-neutral-subtle, ${colors.N0})`,
   borderRadius: "var(--ds-border-radius, 3px)"
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const footer = css({
+  // 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)",
   textAlign: 'right',
   boxShadow: "'none'"
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const contentWrapper = css({
   padding: `${"var(--ds-space-250, 20px)"} ${"var(--ds-space-500, 40px)"}`,
   borderBottomRightRadius: "var(--ds-border-radius, 3px)",
   overflow: 'auto',
   position: 'relative',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: `var(--ds-text-subtle, ${colors.N400})`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   backgroundColor: `var(--ds-background-neutral-subtle, ${colors.N0})`
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const line = css({
   background: "var(--ds-background-neutral-subtle, #fff)",
   content: "''",
@@ -44,6 +60,8 @@ export const line = css({
   width: '100%',
   minWidth: '604px'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const content = css({
   minWidth: '524px',
   width: '100%',
@@ -57,6 +75,8 @@ export const column = {
     padding: 0
   }
 };
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const row = css({
   margin: `${"var(--ds-space-250, 20px)"} 0`,
   display: 'flex',
@@ -80,7 +100,10 @@ export const title = {
     lineHeight: 1.42857142857143
   }
 };
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const codeSm = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   backgroundColor: `var(--ds-background-neutral, ${colors.N20})`,
   borderRadius: "var(--ds-border-radius, 3px)",
   width: "var(--ds-space-300, 24px)",
@@ -89,7 +112,10 @@ export const codeSm = css({
   lineHeight: '24px',
   textAlign: 'center'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const codeMd = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   backgroundColor: `var(--ds-background-neutral, ${colors.N20})`,
   borderRadius: "var(--ds-border-radius, 3px)",
   display: 'inline-block',
@@ -98,7 +124,10 @@ export const codeMd = css({
   width: '50px',
   textAlign: 'center'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const codeLg = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   backgroundColor: `var(--ds-background-neutral, ${colors.N20})`,
   borderRadius: "var(--ds-border-radius, 3px)",
   display: 'inline-block',
@@ -107,12 +136,24 @@ export const codeLg = css({
   padding: `0 ${"var(--ds-space-150, 12px)"}`,
   textAlign: 'center'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const shortcutsArray = css({
   display: 'flex',
   flexDirection: 'column',
   flexShrink: 0,
   gap: "var(--ds-space-150, 12px)"
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const componentFromKeymapWrapperStyles = css({
   flexShrink: 0
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+export const toolbarButton = css({
+  '&:focus': {
+    outline: `2px solid ${`var(--ds-border-focused, ${B300})`}`,
+    outlineOffset: "var(--ds-space-025, 2px)"
+  }
 });

package/dist/es2019/ui/utils.js

@@ -9,40 +9,59 @@ const getKeyParts = keymap => {
   }
   return shortcut.replace(/\-(?=.)/g, ' + ').split(' ');
 };
-export const shortcutNamesWithoutKeymap = ['emoji', 'mention', 'quickInsert'];
+export const shortcutNamesWithoutKeymap = ['table', 'emoji', 'mention', 'quickInsert'];
 export const getComponentFromKeymap = keymap => {
   const keyParts = getKeyParts(keymap);
-  return jsx("span", {
-    css: componentFromKeymapWrapperStyles
-  }, keyParts.map((part, index) => {
-    if (part === '+') {
-      return jsx("span", {
-        key: `${keyParts}-${index}`
-      }, ' + ');
-    } else if (part === 'Cmd') {
-      return jsx("span", {
-        css: codeSm,
-        key: `${keyParts}-${index}`
-      }, "\u2318");
-    } else if (['ctrl', 'alt', 'opt', 'shift'].indexOf(part.toLowerCase()) >= 0) {
-      return jsx("span", {
-        css: codeMd,
-        key: `${keyParts}-${index}`
-      }, part);
-    } else if (['f9', 'f10'].indexOf(part.toLowerCase()) >= 0) {
-      return jsx("span", {
-        css: codeLg,
-        key: `${keyParts}-${index}`
-      }, part);
-    } else if (part.toLowerCase() === 'enter') {
-      return jsx("span", {
-        css: codeSm,
-        key: `${keyParts}-${index}`
-      }, '⏎');
-    }
-    return jsx("span", {
-      css: codeSm,
-      key: `${keyParts}-${index}`
-    }, part.toUpperCase());
-  }));
+  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: componentFromKeymapWrapperStyles
+    }, keyParts.map((part, index) => {
+      if (part === '+') {
+        return jsx("span", {
+          key: `${keyParts}-${index}`
+        }, ' + ');
+      } else if (part === 'Cmd') {
+        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: codeSm,
+            key: `${keyParts}-${index}`
+          }, "\u2318")
+        );
+      } else if (['ctrl', 'alt', 'opt', 'shift'].indexOf(part.toLowerCase()) >= 0) {
+        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: codeMd,
+            key: `${keyParts}-${index}`
+          }, part)
+        );
+      } else if (['f9', 'f10'].indexOf(part.toLowerCase()) >= 0) {
+        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: codeLg,
+            key: `${keyParts}-${index}`
+          }, part)
+        );
+      } else if (part.toLowerCase() === 'enter') {
+        return (
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+          jsx("span", {
+            className: "enter-keymap",
+            css: codeSm,
+            key: `${keyParts}-${index}`
+          }, '⏎')
+        );
+      }
+      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: codeSm,
+          key: `${keyParts}-${index}`
+        }, part.toUpperCase())
+      );
+    }))
+  );
 };

package/dist/esm/ui/ModalContent.js

@@ -28,19 +28,25 @@ export var ModalContent = function ModalContent(_ref) {
     var keymap = form.keymap && form.keymap();
     return keymap && keymap[browser.mac ? 'mac' : 'windows'];
   }).map(function (form) {
-    return jsx("li", {
-      css: row,
-      key: "textFormatting-".concat(form.name)
-    }, jsx("span", null, form.name), getComponentFromKeymap(form.keymap()));
+    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("li", {
+        css: row,
+        key: "textFormatting-".concat(form.name)
+      }, jsx("span", null, form.name), getComponentFromKeymap(form.keymap()))
+    );
   }), formatting.filter(function (form) {
     return shortcutNamesWithoutKeymap.indexOf(form.type) !== -1;
   }).filter(function (form) {
     return form.autoFormatting;
   }).map(function (form) {
-    return jsx("li", {
-      css: row,
-      key: "autoFormatting-".concat(form.name)
-    }, jsx("span", null, form.name), form.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("li", {
+        css: row,
+        key: "autoFormatting-".concat(form.name)
+      }, jsx("span", null, form.name), form.autoFormatting())
+    );
   }))), jsx("div", {
     css: line
   }), jsx("div", {
@@ -50,7 +56,9 @@ export var ModalContent = function ModalContent(_ref) {
   }, jsx(FormattedMessage, messages.markdown)), jsx("ul", null, formatting.filter(function (form) {
     return shortcutNamesWithoutKeymap.indexOf(form.type) === -1;
   }).map(function (form) {
-    return form.autoFormatting && jsx("li", {
+    return 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
+    jsx("li", {
       key: "autoFormatting-".concat(form.name),
       css: row
     }, jsx("span", null, form.name), form.autoFormatting());

package/dist/esm/ui/ModalFooter.js

@@ -7,12 +7,15 @@ import { helpDialogMessages as messages } from '@atlaskit/editor-common/messages
 import { footer } from './styles';
 import { getComponentFromKeymap } from './utils';
 var ModalFooter = function ModalFooter() {
-  return jsx("div", {
-    css: footer
-  }, jsx(FormattedMessage, _extends({}, messages.helpDialogTips, {
-    values: {
-      keyMap: getComponentFromKeymap(openHelp)
-    }
-  })));
+  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("div", {
+      css: footer
+    }, jsx(FormattedMessage, _extends({}, messages.helpDialogTips, {
+      values: {
+        keyMap: getComponentFromKeymap(openHelp)
+      }
+    })))
+  );
 };
 export default ModalFooter;

package/dist/esm/ui/ModalHeader.js

@@ -4,24 +4,30 @@ 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 CrossIcon from '@atlaskit/icon/glyph/cross';
-import { dialogHeader, header } from './styles';
+import { dialogHeader, header, toolbarButton } from './styles';
 var ModalHeader = injectIntl(function (_ref) {
   var formatMessage = _ref.intl.formatMessage,
     onClose = _ref.onClose;
-  return jsx("div", {
-    css: header
-  }, 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
-  , {
-    onClick: onClose,
-    title: formatMessage(messages.closeHelpDialog),
-    spacing: "compact",
-    iconBefore: jsx(CrossIcon, {
-      label: formatMessage(messages.closeHelpDialog),
-      size: "medium"
-    })
-  })));
+  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("div", {
+      css: header
+    }, 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
+    , {
+      onClick: onClose,
+      title: formatMessage(messages.closeHelpDialog),
+      spacing: "compact",
+      iconBefore: jsx(CrossIcon, {
+        label: formatMessage(messages.closeHelpDialog),
+        size: "medium"
+      })
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      ,
+      css: toolbarButton
+    })))
+  );
 });
 export default ModalHeader;