Merge branch 'master' into mp/feat/add-badge-to-input-on-blur

d2iq · Nov 27, 2019 · 96995be · 96995be
2 parents c6504ea + c86d77c
commit 96995be
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 1 deletion.
diff --git a/packages/codesnippet/components/CodeSnippet.tsx b/packages/codesnippet/components/CodeSnippet.tsx
@@ -7,6 +7,7 @@ import {
   themeTextColorPrimaryInverted
 } from "../../design-tokens/build/js/designTokens";
 import { ClickToCopyButton } from "../../clicktocopybutton";
+import { codeSnippet } from "../style";
 
 export interface CodeSnippetProps {
   children?: string;
@@ -24,7 +25,7 @@ export interface CodeSnippetProps {
 
 const CodeSnippet = ({ children, textToCopy, onCopy }: CodeSnippetProps) => {
   return (
-    <SpacingBox bgColor={greyDark}>
+    <SpacingBox bgColor={greyDark} className={codeSnippet}>
       <Flex>
         <FlexItem>
           <MonospaceText color={themeTextColorPrimaryInverted}>

diff --git a/packages/codesnippet/style.ts b/packages/codesnippet/style.ts
@@ -0,0 +1,6 @@
+import { css } from "emotion";
+
+export const codeSnippet = css`
+  overflow: auto;
+  white-space: pre;
+`;
diff --git a/packages/codesnippet/tests/__snapshots__/CodeSnippet.test.tsx.snap b/packages/codesnippet/tests/__snapshots__/CodeSnippet.test.tsx.snap
@@ -1,13 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CodeSnippet renders default 1`] = `
+.emotion-6 {
+  overflow: auto;
+  white-space: pre;
+}
+
 .emotion-5 {
+  overflow: auto;
+  white-space: pre;
   padding: 16px;
 }
 
 .emotion-4 {
   background-color: #1B2029;
   background-repeat: no-repeat;
+  overflow: auto;
+  white-space: pre;
   padding: 16px;
 }
 
@@ -75,6 +84,7 @@ exports[`CodeSnippet renders default 1`] = `
 <CodeSnippet>
   <SpacingBox
     bgColor="#1B2029"
+    className="emotion-6"
     side="all"
     spacingSize="m"
     tag="div"
@@ -155,13 +165,22 @@ exports[`CodeSnippet renders with copy button 1`] = `
   cursor: pointer;
 }
 
+.emotion-10 {
+  overflow: auto;
+  white-space: pre;
+}
+
 .emotion-9 {
+  overflow: auto;
+  white-space: pre;
   padding: 16px;
 }
 
 .emotion-8 {
   background-color: #1B2029;
   background-repeat: no-repeat;
+  overflow: auto;
+  white-space: pre;
   padding: 16px;
 }
 
@@ -261,6 +280,7 @@ exports[`CodeSnippet renders with copy button 1`] = `
 >
   <SpacingBox
     bgColor="#1B2029"
+    className="emotion-10"
     side="all"
     spacingSize="m"
     tag="div"