[Emotion] Convert EuiMarkdownEditor

src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap

@@ -191,17 +191,17 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
         style="max-height: 500px;"
       />
       <div
-        class="euiMarkdownEditorFooter"
+        class="euiMarkdownEditorFooter emotion-euiMarkdownEditorFooter"
       >
         <div
-          class="euiMarkdownEditorFooter__actions"
+          class="euiMarkdownEditorFooter__actions emotion-euiMarkdownEditorFooter__actions"
         />
         <div
           class="euiPopover emotion-euiPopover-inline-block"
         >
           <button
             aria-label="Show markdown help"
-            class="euiButtonIcon euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-s-empty-text"
+            class="euiButtonIcon euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-s-empty-text-euiMarkdownEditorFooter__helpButton"
             title="Syntax help"
             type="button"
           >
@@ -438,17 +438,17 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
         style="max-height: 500px;"
       />
       <div
-        class="euiMarkdownEditorFooter"
+        class="euiMarkdownEditorFooter emotion-euiMarkdownEditorFooter"
       >
         <div
-          class="euiMarkdownEditorFooter__actions"
+          class="euiMarkdownEditorFooter__actions emotion-euiMarkdownEditorFooter__actions"
         />
         <span
           class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
         >
           <button
             aria-label="Show markdown help"
-            class="euiButtonIcon euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-s-empty-text"
+            class="euiButtonIcon euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-s-empty-text-euiMarkdownEditorFooter__helpButton"
             type="button"
           >
             <span
@@ -683,17 +683,17 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
         style="max-height: 500px;"
       />
       <div
-        class="euiMarkdownEditorFooter"
+        class="euiMarkdownEditorFooter emotion-euiMarkdownEditorFooter"
       >
         <div
-          class="euiMarkdownEditorFooter__actions"
+          class="euiMarkdownEditorFooter__actions emotion-euiMarkdownEditorFooter__actions"
         />
         <span
           class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
         >
           <button
             aria-label="Show markdown help"
-            class="euiButtonIcon euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-s-empty-text"
+            class="euiButtonIcon euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-s-empty-text-euiMarkdownEditorFooter__helpButton"
             type="button"
           >
             <span
@@ -928,17 +928,17 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
         style="height: 100%;"
       />
       <div
-        class="euiMarkdownEditorFooter"
+        class="euiMarkdownEditorFooter emotion-euiMarkdownEditorFooter"
       >
         <div
-          class="euiMarkdownEditorFooter__actions"
+          class="euiMarkdownEditorFooter__actions emotion-euiMarkdownEditorFooter__actions"
         />
         <span
           class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
         >
           <button
             aria-label="Show markdown help"
-            class="euiButtonIcon euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-s-empty-text"
+            class="euiButtonIcon euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-s-empty-text-euiMarkdownEditorFooter__helpButton"
             type="button"
           >
             <span
@@ -1173,17 +1173,17 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
         style="max-height: 500px;"
       />
       <div
-        class="euiMarkdownEditorFooter"
+        class="euiMarkdownEditorFooter emotion-euiMarkdownEditorFooter"
       >
         <div
-          class="euiMarkdownEditorFooter__actions"
+          class="euiMarkdownEditorFooter__actions emotion-euiMarkdownEditorFooter__actions"
         />
         <span
           class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
         >
           <button
             aria-label="Show markdown help"
-            class="euiButtonIcon euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-s-empty-text"
+            class="euiButtonIcon euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-s-empty-text-euiMarkdownEditorFooter__helpButton"
             type="button"
           >
             <span
@@ -1418,17 +1418,17 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
         style="max-height: 600px;"
       />
       <div
-        class="euiMarkdownEditorFooter"
+        class="euiMarkdownEditorFooter emotion-euiMarkdownEditorFooter"
       >
         <div
-          class="euiMarkdownEditorFooter__actions"
+          class="euiMarkdownEditorFooter__actions emotion-euiMarkdownEditorFooter__actions"
         />
         <span
           class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
         >
           <button
             aria-label="Show markdown help"
-            class="euiButtonIcon euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-s-empty-text"
+            class="euiButtonIcon euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-s-empty-text-euiMarkdownEditorFooter__helpButton"
             type="button"
           >
             <span
@@ -1674,17 +1674,17 @@ exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
         style="max-height: 500px;"
       />
       <div
-        class="euiMarkdownEditorFooter"
+        class="euiMarkdownEditorFooter emotion-euiMarkdownEditorFooter"
       >
         <div
-          class="euiMarkdownEditorFooter__actions"
+          class="euiMarkdownEditorFooter__actions emotion-euiMarkdownEditorFooter__actions"
         />
         <span
           class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
         >
           <button
             aria-label="Show markdown help"
-            class="euiButtonIcon euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-s-empty-disabled-isDisabled"
+            class="euiButtonIcon euiMarkdownEditorFooter__helpButton emotion-euiButtonIcon-s-empty-disabled-isDisabled-euiMarkdownEditorFooter__helpButton"
             disabled=""
             type="button"
           >

src/components/markdown_editor/_index.scss

@@ -1,7 +1,6 @@
 @import 'variables';
 @import 'markdown_editor';
 @import 'markdown_editor_drop_zone';
-@import 'markdown_editor_footer';
 @import 'markdown_editor_preview';
 @import 'markdown_editor_text_area';
 @import 'markdown_editor_toolbar';

src/components/markdown_editor/markdown_editor_footer.styles.ts

@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../services';
+import { logicalCSS } from '../../global_styling';
+
+export const euiMarkdownEditorFooterStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    euiMarkdownEditorFooter: css`
+      display: inline-flex;
+      align-items: center;
+      padding: ${euiTheme.size.xs};
+      border: ${euiTheme.border.thin};
+      background-color: ${euiTheme.colors.lightShade};
+    `,
+    euiMarkdownEditorFooter__actions: css`
+      flex: 1;
+      display: inline-flex;
+      align-items: center;
+      gap: ${euiTheme.size.xs};
+    `,
+    // Override default button border radius to match the overall markdown editor
+    euiMarkdownEditorFooter__uploadError: css`
+      border-radius: ${borderRadius};
+    `,
+    // Override the default button icon width size
+    euiMarkdownEditorFooter__helpButton: css`
+      .euiIcon {
+        ${logicalCSS('width', '26px')}
+      }
+    `,
+    euiMarkdownEditorFooter__popover: css`
+      ${logicalCSS('width', '300px')}
+    `,
+  };
+};

src/components/markdown_editor/markdown_editor_footer.tsx

@@ -14,6 +14,8 @@ import React, {
   forwardRef,
   useContext,
 } from 'react';
+
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiLoadingSpinner } from '../loading';
 import { EuiButton, EuiButtonEmpty, EuiButtonIcon } from '../button';
 import { EuiTitle } from '../title';
@@ -24,22 +26,22 @@ import {
   EuiModalHeader,
 } from '../modal';
 import { EuiI18n, useEuiI18n } from '../i18n';
-import {
-  EuiMarkdownDropHandler,
-  EuiMarkdownEditorUiPlugin,
-  EuiMarkdownParseError,
-} from './markdown_types';
 import { EuiPopover, EuiPopoverTitle } from '../popover';
 import { EuiText } from '../text';
 import { EuiSpacer } from '../spacer';
 import { EuiToolTip } from '../tool_tip';
-// @ts-ignore a react svg
-import MarkdownLogo from './icons/markdown_logo';
 import { EuiHorizontalRule } from '../horizontal_rule';
-
 import { EuiLink } from '../link';
 
+import {
+  EuiMarkdownDropHandler,
+  EuiMarkdownEditorUiPlugin,
+  EuiMarkdownParseError,
+} from './markdown_types';
 import { EuiMarkdownContext } from './markdown_context';
+// @ts-ignore a react svg
+import MarkdownLogo from './icons/markdown_logo';
+import { euiMarkdownEditorFooterStyles } from './markdown_editor_footer.styles';
 
 interface EuiMarkdownEditorFooterProps {
   uiPlugins: EuiMarkdownEditorUiPlugin[];
@@ -62,6 +64,9 @@ export const EuiMarkdownEditorFooter = forwardRef<
     hasUnacceptedItems,
     dropHandlers,
   } = props;
+
+  const styles = useEuiMemoizedStyles(euiMarkdownEditorFooterStyles);
+
   const [isShowingHelpModal, setIsShowingHelpModal] = useState(false);
   const [isShowingHelpPopover, setIsShowingHelpPopover] = useState(false);
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@@ -128,6 +133,7 @@ export const EuiMarkdownEditorFooter = forwardRef<
     uploadButton = (
       <EuiToolTip content={ariaLabels.supportedFileTypes}>
         <EuiButtonEmpty
+          css={styles.euiMarkdownEditorFooter__uploadError}
           className="euiMarkdownEditorFooter__uploadError"
           autoFocus
           size="s"
@@ -175,7 +181,10 @@ export const EuiMarkdownEditorFooter = forwardRef<
         panelPaddingSize="s"
         anchorPosition="upCenter"
       >
-        <div className="euiMarkdownEditorFooter__popover">
+        <div
+          css={styles.euiMarkdownEditorFooter__popover}
+          className="euiMarkdownEditorFooter__popover"
+        >
           <EuiPopoverTitle>
             <EuiI18n
               token="euiMarkdownEditorFooter.errorsTitle"
@@ -215,6 +224,7 @@ export const EuiMarkdownEditorFooter = forwardRef<
         <EuiToolTip content={syntaxTitle}>
           <EuiButtonIcon
             size="s"
+            css={styles.euiMarkdownEditorFooter__helpButton}
             className="euiMarkdownEditorFooter__helpButton"
             iconType={MarkdownLogo}
             color="text"
@@ -288,6 +298,7 @@ export const EuiMarkdownEditorFooter = forwardRef<
           <EuiButtonIcon
             title={syntaxTitle}
             size="s"
+            css={styles.euiMarkdownEditorFooter__helpButton}
             className="euiMarkdownEditorFooter__helpButton"
             iconType={MarkdownLogo}
             color="text"
@@ -315,8 +326,15 @@ export const EuiMarkdownEditorFooter = forwardRef<
   }
 
   return (
-    <div ref={ref} className="euiMarkdownEditorFooter">
-      <div className="euiMarkdownEditorFooter__actions">
+    <div
+      ref={ref}
+      css={styles.euiMarkdownEditorFooter}
+      className="euiMarkdownEditorFooter"
+    >
+      <div
+        css={styles.euiMarkdownEditorFooter__actions}
+        className="euiMarkdownEditorFooter__actions"
+      >
         {uploadButton}
         {errorsButton}
       </div>