[EuiMarkdownEditor] Improve markdown editor font (#3525)

* Improving font family and text area font styles * Text color and text babckground * Adding eui font family * euiFormControlText * Small fix * Refactoring some styles * Removing unecessary padding
elastic · May 29, 2020 · 512914f · 512914f
1 parent 75441e0
commit 512914f
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 27 deletions.
diff --git a/src/components/markdown_editor/_index.scss b/src/components/markdown_editor/_index.scss
@@ -1,5 +1,6 @@
 @import 'markdown_editor';
 @import 'markdown_editor_drop_zone';
 @import 'markdown_format';
+@import 'markdown_editor_preview';
 @import 'markdown_editor_text_area';
 @import 'markdown_editor_toolbar';
diff --git a/src/components/markdown_editor/_markdown_editor.scss b/src/components/markdown_editor/_markdown_editor.scss
@@ -2,21 +2,4 @@
   &:focus-within {
     @include euiSlightShadowHover;
   }
-
-  .euiMarkdownEditor__textArea,
-  .euiMarkdownEditor__previewContainer {
-    padding: $euiSizeM;
-  }
-}
-
-.euiMarkdownEditor__previewContainer {
-  @include euiScrollBar;
-  background: $euiColorEmptyShade;
-  height: 150px;
-  overflow-y: auto;
-  border: $euiBorderThin;
-}
-
-.euiMarkdownEditor__textArea {
-  background: $euiColorEmptyShade;
-}
+}
diff --git a/src/components/markdown_editor/_markdown_editor_preview.scss b/src/components/markdown_editor/_markdown_editor_preview.scss
@@ -0,0 +1,7 @@
+.euiMarkdownEditor__preview {
+  @include euiScrollBar;
+  height: 150px;
+  overflow-y: auto;
+  border: $euiBorderThin;
+  padding: $euiSizeM;
+}
diff --git a/src/components/markdown_editor/_markdown_editor_text_area.scss b/src/components/markdown_editor/_markdown_editor_text_area.scss
@@ -1,13 +1,15 @@
 .euiMarkdownEditor__textArea {
   @include euiFormControlText;
-  font-family: $euiCodeFontFamily;
   width: 100%;
   height: 100%;
   min-height: 150px;
+  padding: $euiSizeM;
   background-color: $euiFormBackgroundColor;
   border: $euiBorderThin;
   border-bottom: 1px dashed $euiColorLightShade;
   border-color: $euiColorLightShade;
+  // Overrides the euiFormControlText line-height that is very small
+  line-height: $euiLineHeight;
   resize: vertical;
 
   &:focus {

diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss
@@ -18,9 +18,8 @@ $euiDefaultFontSize: 14px;
 }
 
 .euiMarkdownFormat {
-  // sass-lint:disable-block indentation
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
-    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  @include euiFont;
+  @include euiText;
 
   // Font size variables
   $euiMarkdownFontSizeS: canvasToEm(12px);
@@ -46,10 +45,6 @@ $euiDefaultFontSize: 14px;
   $euiMarkdownAlphaLightShadeReversed: rgba($euiColorEmptyShade, .15);
   $euiMarkdownAlphaDarkShadeReversed: rgba($euiColorEmptyShade, .65);
 
-  &--reversed {
-    color: $euiColorLightestShade;
-  }
-
   > *:first-child {
     // sass-lint:disable-block no-important
     margin-top: 0 !important;

diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
@@ -217,7 +217,7 @@ export const EuiMarkdownEditor: FunctionComponent<EuiMarkdownEditorProps> = ({
 
         {isPreviewing ? (
           <div
-            className="euiMarkdownEditor__previewContainer"
+            className="euiMarkdownEditor__preview"
             style={{ height: `${height}px` }}>
             <EuiMarkdownFormat processor={processor}>{value}</EuiMarkdownFormat>
           </div>