fix(markdowneditor): fix variant clash with codeeditor

openpatch · Mar 3, 2021 · 54e0314 · 54e0314
1 parent 2af5d45
commit 54e0314
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 17 deletions.
diff --git a/src/MarkdownEditor.stories.tsx b/src/MarkdownEditor.stories.tsx
@@ -1,6 +1,7 @@
 import { Story, Meta } from "@storybook/react/types-6-0";
 import { useState } from "react";
 
+import { AutoGrid } from "./AutoGrid";
 import { MarkdownEditor, MarkdownEditorProps } from "./MarkdownEditor";
 
 export default {
@@ -41,3 +42,11 @@ def test():
   pass
 \`\`\``,
 };
+
+export const MultipleEditorsWithDifferentHeights = () => (
+  <AutoGrid gap="standard">
+    <MarkdownEditor variant="outlined" height="100px" />
+    <MarkdownEditor variant="outlined" height="500px" />
+    <MarkdownEditor variant="outlined" height="auto" />
+  </AutoGrid>
+);
diff --git a/src/MarkdownEditor.tsx b/src/MarkdownEditor.tsx
@@ -24,7 +24,7 @@ export const MarkdownEditor = ({
   value = "",
   onChange = () => {},
   onBlur = () => {},
-  height = "400px",
+  height = "auto",
   locale = defaultLocale,
   ...props
 }: MarkdownEditorProps) => {
@@ -37,16 +37,7 @@ export const MarkdownEditor = ({
   }
 
   return (
-    <Box
-      position="relative"
-      css={(theme) => css`
-        border-radius: ${theme.radii.small};
-        padding: ${theme.space.xsmall} ${theme.space.xxsmall};
-        border-color: ${theme.colors.neutral["100"]};
-        border-style: solid;
-        border-width: ${theme.borderWidths.standard};
-      `}
-    >
+    <Box position="relative">
       <ButtonSecondary
         tone="accent"
         onClick={() => setIsPreview((p) => !p)}
@@ -80,7 +71,7 @@ export const MarkdownEditor = ({
             font-size: 90%;
           }
           .cm-strong {
-            font-size: 140%;
+            font-size: 100%;
           }
         `}
       />

diff --git a/src/__snapshots__/MarkdownEditor.test.tsx.snap b/src/__snapshots__/MarkdownEditor.test.tsx.snap
@@ -7,11 +7,6 @@ exports[`should match snapshot 1`] = `
   -webkit-transition: all 0.2s ease;
   transition: all 0.2s ease;
   position: relative;
-  border-radius: 4px;
-  padding: 8px 4px;
-  border-color: #E4E7EB;
-  border-style: solid;
-  border-width: 1px;
 }
 
 .emotion-3 {
@@ -150,6 +145,11 @@ exports[`should match snapshot 1`] = `
   transition: all 0.2s ease;
 }
 
+.emotion-7 .CodeMirror {
+  height: auto;
+  min-height: 60px;
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"