@atlaskit/editor-plugin-help-dialog 1.8.11 → 1.8.13

package/dist/es2019/ui/styles.js

@@ -90,42 +90,6 @@ export const dialogHeader = {
   }
 };
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- 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)",
-  display: 'inline-block',
-  height: "var(--ds-space-300, 24px)",
-  lineHeight: '24px',
-  textAlign: 'center'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- 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',
-  height: "var(--ds-space-300, 24px)",
-  lineHeight: '24px',
-  width: '50px',
-  textAlign: 'center'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- 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',
-  height: "var(--ds-space-300, 24px)",
-  lineHeight: "var(--ds-space-300, 24px)",
-  padding: `0 ${"var(--ds-space-150, 12px)"}`,
-  textAlign: 'center'
-});
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const shortcutsArray = css({
   display: 'flex',

package/dist/es2019/ui/utils.js

@@ -5,7 +5,35 @@
 // 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/browser';
-import { codeLg, codeMd, codeSm, componentFromKeymapWrapperStyles } from './styles';
+import { Box, xcss } from '@atlaskit/primitives';
+import { componentFromKeymapWrapperStyles } from './styles';
+const codeLg = xcss({
+  borderRadius: 'border.radius',
+  display: 'inline-block',
+  height: "var(--ds-space-300, 24px)",
+  lineHeight: "var(--ds-space-300, 24px)",
+  textAlign: 'center',
+  paddingInline: 'space.150',
+  backgroundColor: 'color.background.neutral'
+});
+const codeMd = xcss({
+  backgroundColor: 'color.background.neutral',
+  borderRadius: 'border.radius',
+  display: 'inline-block',
+  height: "var(--ds-space-300, 24px)",
+  lineHeight: "var(--ds-space-300, 24px)",
+  width: '50px',
+  textAlign: 'center'
+});
+const codeSm = xcss({
+  backgroundColor: 'color.background.neutral',
+  borderRadius: 'border.radius',
+  width: "var(--ds-space-300, 24px)",
+  display: 'inline-block',
+  height: "var(--ds-space-300, 24px)",
+  lineHeight: "var(--ds-space-300, 24px)",
+  textAlign: 'center'
+});
 const getKeyParts = keymap => {
   let shortcut = keymap[browser.mac ? 'mac' : 'windows'];
   if (browser.mac) {
@@ -22,47 +50,47 @@ export const getComponentFromKeymap = keymap => {
       css: componentFromKeymapWrapperStyles
     }, keyParts.map((part, index) => {
       if (part === '+') {
-        return jsx("span", {
+        return jsx(Box, {
+          as: "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")
-        );
+        return jsx(Box, {
+          as: "span",
+          xcss: 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,
+          jsx(Box, {
+            as: "span",
+            xcss: 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,
+          jsx(Box, {
+            as: "span",
+            xcss: 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 jsx(Box, {
+          as: "span",
+          "data-editor-help-dialog-enter-keymap": "true",
+          xcss: 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,
+        jsx(Box, {
+          as: "span",
+          xcss: codeSm,
           key: `${keyParts}-${index}`
         }, part.toUpperCase())
       );