From 261d6564dca273c88909aa482db71b44d134df27 Mon Sep 17 00:00:00 2001 From: Dave McCarthy Date: Mon, 8 Jul 2019 16:14:22 -0400 Subject: [PATCH 1/7] chore: rename code / syntax components before changing casing --- packages/{Code => code1}/README.md | 0 packages/{Code => code1}/package.json | 0 packages/{Code => code1}/src/Code.spec.tsx | 0 packages/{Code => code1}/src/Code.story.tsx | 0 packages/{Code => code1}/src/Code.tsx | 0 packages/{Code => code1}/src/LineNumbers.spec.tsx | 0 packages/{Code => code1}/src/LineNumbers.tsx | 0 packages/{Code => code1}/src/WindowChrome.spec.tsx | 0 packages/{Code => code1}/src/WindowChrome.tsx | 0 packages/{Code => code1}/src/index.ts | 0 packages/{Code => code1}/tsconfig.json | 0 packages/{Syntax => syntax1}/README.md | 0 packages/{Syntax => syntax1}/package.json | 0 packages/{Syntax => syntax1}/src/Syntax.spec.tsx | 0 packages/{Syntax => syntax1}/src/Syntax.story.tsx | 0 packages/{Syntax => syntax1}/src/Syntax.tsx | 0 packages/{Syntax => syntax1}/src/globalStyles.tsx | 0 packages/{Syntax => syntax1}/src/index.ts | 0 packages/{Syntax => syntax1}/src/types.ts | 0 packages/{Syntax => syntax1}/tsconfig.json | 0 20 files changed, 0 insertions(+), 0 deletions(-) rename packages/{Code => code1}/README.md (100%) rename packages/{Code => code1}/package.json (100%) rename packages/{Code => code1}/src/Code.spec.tsx (100%) rename packages/{Code => code1}/src/Code.story.tsx (100%) rename packages/{Code => code1}/src/Code.tsx (100%) rename packages/{Code => code1}/src/LineNumbers.spec.tsx (100%) rename packages/{Code => code1}/src/LineNumbers.tsx (100%) rename packages/{Code => code1}/src/WindowChrome.spec.tsx (100%) rename packages/{Code => code1}/src/WindowChrome.tsx (100%) rename packages/{Code => code1}/src/index.ts (100%) rename packages/{Code => code1}/tsconfig.json (100%) rename packages/{Syntax => syntax1}/README.md (100%) rename packages/{Syntax => syntax1}/package.json (100%) rename packages/{Syntax => syntax1}/src/Syntax.spec.tsx (100%) rename packages/{Syntax => syntax1}/src/Syntax.story.tsx (100%) rename packages/{Syntax => syntax1}/src/Syntax.tsx (100%) rename packages/{Syntax => syntax1}/src/globalStyles.tsx (100%) rename packages/{Syntax => syntax1}/src/index.ts (100%) rename packages/{Syntax => syntax1}/src/types.ts (100%) rename packages/{Syntax => syntax1}/tsconfig.json (100%) diff --git a/packages/Code/README.md b/packages/code1/README.md similarity index 100% rename from packages/Code/README.md rename to packages/code1/README.md diff --git a/packages/Code/package.json b/packages/code1/package.json similarity index 100% rename from packages/Code/package.json rename to packages/code1/package.json diff --git a/packages/Code/src/Code.spec.tsx b/packages/code1/src/Code.spec.tsx similarity index 100% rename from packages/Code/src/Code.spec.tsx rename to packages/code1/src/Code.spec.tsx diff --git a/packages/Code/src/Code.story.tsx b/packages/code1/src/Code.story.tsx similarity index 100% rename from packages/Code/src/Code.story.tsx rename to packages/code1/src/Code.story.tsx diff --git a/packages/Code/src/Code.tsx b/packages/code1/src/Code.tsx similarity index 100% rename from packages/Code/src/Code.tsx rename to packages/code1/src/Code.tsx diff --git a/packages/Code/src/LineNumbers.spec.tsx b/packages/code1/src/LineNumbers.spec.tsx similarity index 100% rename from packages/Code/src/LineNumbers.spec.tsx rename to packages/code1/src/LineNumbers.spec.tsx diff --git a/packages/Code/src/LineNumbers.tsx b/packages/code1/src/LineNumbers.tsx similarity index 100% rename from packages/Code/src/LineNumbers.tsx rename to packages/code1/src/LineNumbers.tsx diff --git a/packages/Code/src/WindowChrome.spec.tsx b/packages/code1/src/WindowChrome.spec.tsx similarity index 100% rename from packages/Code/src/WindowChrome.spec.tsx rename to packages/code1/src/WindowChrome.spec.tsx diff --git a/packages/Code/src/WindowChrome.tsx b/packages/code1/src/WindowChrome.tsx similarity index 100% rename from packages/Code/src/WindowChrome.tsx rename to packages/code1/src/WindowChrome.tsx diff --git a/packages/Code/src/index.ts b/packages/code1/src/index.ts similarity index 100% rename from packages/Code/src/index.ts rename to packages/code1/src/index.ts diff --git a/packages/Code/tsconfig.json b/packages/code1/tsconfig.json similarity index 100% rename from packages/Code/tsconfig.json rename to packages/code1/tsconfig.json diff --git a/packages/Syntax/README.md b/packages/syntax1/README.md similarity index 100% rename from packages/Syntax/README.md rename to packages/syntax1/README.md diff --git a/packages/Syntax/package.json b/packages/syntax1/package.json similarity index 100% rename from packages/Syntax/package.json rename to packages/syntax1/package.json diff --git a/packages/Syntax/src/Syntax.spec.tsx b/packages/syntax1/src/Syntax.spec.tsx similarity index 100% rename from packages/Syntax/src/Syntax.spec.tsx rename to packages/syntax1/src/Syntax.spec.tsx diff --git a/packages/Syntax/src/Syntax.story.tsx b/packages/syntax1/src/Syntax.story.tsx similarity index 100% rename from packages/Syntax/src/Syntax.story.tsx rename to packages/syntax1/src/Syntax.story.tsx diff --git a/packages/Syntax/src/Syntax.tsx b/packages/syntax1/src/Syntax.tsx similarity index 100% rename from packages/Syntax/src/Syntax.tsx rename to packages/syntax1/src/Syntax.tsx diff --git a/packages/Syntax/src/globalStyles.tsx b/packages/syntax1/src/globalStyles.tsx similarity index 100% rename from packages/Syntax/src/globalStyles.tsx rename to packages/syntax1/src/globalStyles.tsx diff --git a/packages/Syntax/src/index.ts b/packages/syntax1/src/index.ts similarity index 100% rename from packages/Syntax/src/index.ts rename to packages/syntax1/src/index.ts diff --git a/packages/Syntax/src/types.ts b/packages/syntax1/src/types.ts similarity index 100% rename from packages/Syntax/src/types.ts rename to packages/syntax1/src/types.ts diff --git a/packages/Syntax/tsconfig.json b/packages/syntax1/tsconfig.json similarity index 100% rename from packages/Syntax/tsconfig.json rename to packages/syntax1/tsconfig.json From 07d8a435c7d6703c2e0e78f4250552a383b15f95 Mon Sep 17 00:00:00 2001 From: Dave McCarthy Date: Mon, 8 Jul 2019 16:15:09 -0400 Subject: [PATCH 2/7] chore: rename code / syntax directories with updated casing --- packages/{code1 => code}/README.md | 0 packages/{code1 => code}/package.json | 0 packages/{code1 => code}/src/Code.spec.tsx | 0 packages/{code1 => code}/src/Code.story.tsx | 0 packages/{code1 => code}/src/Code.tsx | 0 packages/{code1 => code}/src/LineNumbers.spec.tsx | 0 packages/{code1 => code}/src/LineNumbers.tsx | 0 packages/{code1 => code}/src/WindowChrome.spec.tsx | 0 packages/{code1 => code}/src/WindowChrome.tsx | 0 packages/{code1 => code}/src/index.ts | 0 packages/{code1 => code}/tsconfig.json | 0 packages/{syntax1 => syntax}/README.md | 0 packages/{syntax1 => syntax}/package.json | 0 packages/{syntax1 => syntax}/src/Syntax.spec.tsx | 0 packages/{syntax1 => syntax}/src/Syntax.story.tsx | 0 packages/{syntax1 => syntax}/src/Syntax.tsx | 0 packages/{syntax1 => syntax}/src/globalStyles.tsx | 0 packages/{syntax1 => syntax}/src/index.ts | 0 packages/{syntax1 => syntax}/src/types.ts | 0 packages/{syntax1 => syntax}/tsconfig.json | 0 20 files changed, 0 insertions(+), 0 deletions(-) rename packages/{code1 => code}/README.md (100%) rename packages/{code1 => code}/package.json (100%) rename packages/{code1 => code}/src/Code.spec.tsx (100%) rename packages/{code1 => code}/src/Code.story.tsx (100%) rename packages/{code1 => code}/src/Code.tsx (100%) rename packages/{code1 => code}/src/LineNumbers.spec.tsx (100%) rename packages/{code1 => code}/src/LineNumbers.tsx (100%) rename packages/{code1 => code}/src/WindowChrome.spec.tsx (100%) rename packages/{code1 => code}/src/WindowChrome.tsx (100%) rename packages/{code1 => code}/src/index.ts (100%) rename packages/{code1 => code}/tsconfig.json (100%) rename packages/{syntax1 => syntax}/README.md (100%) rename packages/{syntax1 => syntax}/package.json (100%) rename packages/{syntax1 => syntax}/src/Syntax.spec.tsx (100%) rename packages/{syntax1 => syntax}/src/Syntax.story.tsx (100%) rename packages/{syntax1 => syntax}/src/Syntax.tsx (100%) rename packages/{syntax1 => syntax}/src/globalStyles.tsx (100%) rename packages/{syntax1 => syntax}/src/index.ts (100%) rename packages/{syntax1 => syntax}/src/types.ts (100%) rename packages/{syntax1 => syntax}/tsconfig.json (100%) diff --git a/packages/code1/README.md b/packages/code/README.md similarity index 100% rename from packages/code1/README.md rename to packages/code/README.md diff --git a/packages/code1/package.json b/packages/code/package.json similarity index 100% rename from packages/code1/package.json rename to packages/code/package.json diff --git a/packages/code1/src/Code.spec.tsx b/packages/code/src/Code.spec.tsx similarity index 100% rename from packages/code1/src/Code.spec.tsx rename to packages/code/src/Code.spec.tsx diff --git a/packages/code1/src/Code.story.tsx b/packages/code/src/Code.story.tsx similarity index 100% rename from packages/code1/src/Code.story.tsx rename to packages/code/src/Code.story.tsx diff --git a/packages/code1/src/Code.tsx b/packages/code/src/Code.tsx similarity index 100% rename from packages/code1/src/Code.tsx rename to packages/code/src/Code.tsx diff --git a/packages/code1/src/LineNumbers.spec.tsx b/packages/code/src/LineNumbers.spec.tsx similarity index 100% rename from packages/code1/src/LineNumbers.spec.tsx rename to packages/code/src/LineNumbers.spec.tsx diff --git a/packages/code1/src/LineNumbers.tsx b/packages/code/src/LineNumbers.tsx similarity index 100% rename from packages/code1/src/LineNumbers.tsx rename to packages/code/src/LineNumbers.tsx diff --git a/packages/code1/src/WindowChrome.spec.tsx b/packages/code/src/WindowChrome.spec.tsx similarity index 100% rename from packages/code1/src/WindowChrome.spec.tsx rename to packages/code/src/WindowChrome.spec.tsx diff --git a/packages/code1/src/WindowChrome.tsx b/packages/code/src/WindowChrome.tsx similarity index 100% rename from packages/code1/src/WindowChrome.tsx rename to packages/code/src/WindowChrome.tsx diff --git a/packages/code1/src/index.ts b/packages/code/src/index.ts similarity index 100% rename from packages/code1/src/index.ts rename to packages/code/src/index.ts diff --git a/packages/code1/tsconfig.json b/packages/code/tsconfig.json similarity index 100% rename from packages/code1/tsconfig.json rename to packages/code/tsconfig.json diff --git a/packages/syntax1/README.md b/packages/syntax/README.md similarity index 100% rename from packages/syntax1/README.md rename to packages/syntax/README.md diff --git a/packages/syntax1/package.json b/packages/syntax/package.json similarity index 100% rename from packages/syntax1/package.json rename to packages/syntax/package.json diff --git a/packages/syntax1/src/Syntax.spec.tsx b/packages/syntax/src/Syntax.spec.tsx similarity index 100% rename from packages/syntax1/src/Syntax.spec.tsx rename to packages/syntax/src/Syntax.spec.tsx diff --git a/packages/syntax1/src/Syntax.story.tsx b/packages/syntax/src/Syntax.story.tsx similarity index 100% rename from packages/syntax1/src/Syntax.story.tsx rename to packages/syntax/src/Syntax.story.tsx diff --git a/packages/syntax1/src/Syntax.tsx b/packages/syntax/src/Syntax.tsx similarity index 100% rename from packages/syntax1/src/Syntax.tsx rename to packages/syntax/src/Syntax.tsx diff --git a/packages/syntax1/src/globalStyles.tsx b/packages/syntax/src/globalStyles.tsx similarity index 100% rename from packages/syntax1/src/globalStyles.tsx rename to packages/syntax/src/globalStyles.tsx diff --git a/packages/syntax1/src/index.ts b/packages/syntax/src/index.ts similarity index 100% rename from packages/syntax1/src/index.ts rename to packages/syntax/src/index.ts diff --git a/packages/syntax1/src/types.ts b/packages/syntax/src/types.ts similarity index 100% rename from packages/syntax1/src/types.ts rename to packages/syntax/src/types.ts diff --git a/packages/syntax1/tsconfig.json b/packages/syntax/tsconfig.json similarity index 100% rename from packages/syntax1/tsconfig.json rename to packages/syntax/tsconfig.json From 51203141ca0744a2672a96b309cd5328cc16ae58 Mon Sep 17 00:00:00 2001 From: Dave McCarthy Date: Wed, 10 Jul 2019 12:14:52 -0700 Subject: [PATCH 3/7] fix(code): render chrome as flex container without absolute positioning --- packages/code/src/Code.tsx | 81 ++++++++++++++++-------------- packages/code/src/WindowChrome.tsx | 40 +++++++++------ 2 files changed, 67 insertions(+), 54 deletions(-) diff --git a/packages/code/src/Code.tsx b/packages/code/src/Code.tsx index 65ab10c97d..1710276809 100644 --- a/packages/code/src/Code.tsx +++ b/packages/code/src/Code.tsx @@ -8,7 +8,7 @@ import Syntax, { variantColors, } from '@leafygreen-ui/syntax'; import LineNumbers from './LineNumbers'; -import WindowChrome, { windowChromeHeight } from './WindowChrome'; +import WindowChrome from './WindowChrome'; function stringFragmentIsBlank(str: string): str is '' | ' ' { return str === '' || str === ' '; @@ -53,12 +53,13 @@ function useProcessedCodeSnippet(snippet: string): ProcessedCodeSnippet { } const whiteSpace = 12; +const borderRadius = 4; const wrapperStyle = css` overflow-x: auto; border: 1px solid; border-left-width: 3px; - border-radius: 4px; + border-radius: ${borderRadius}px; padding: ${whiteSpace}px; margin: 0; position: relative; @@ -69,8 +70,8 @@ const wrapperStyleWithLineNumbers = css` `; const wrapperStyleWithWindowChrome = css` - padding-top: ${windowChromeHeight + whiteSpace}px; border-left-width: 1px; + border-radius: 0 0 ${borderRadius}px ${borderRadius}px; `; function getWrapperVariantStyle(variant: Variant): string { @@ -155,50 +156,52 @@ function Code({ const { content, lineCount } = useProcessedCodeSnippet(children); - const renderedCommonContent = ( - <> - {showWindowChrome && ( - - )} - - - {content} - - + const renderedWindowChrome = showWindowChrome && ( + + ) + + const renderedSyntaxComponent = ( + + {content} + ); if (!multiline) { return ( -
)} - className={wrapperClassName} - > - {renderedCommonContent} -
+ <> + {renderedWindowChrome} + +
)} + className={wrapperClassName} + > + {renderedSyntaxComponent} +
+ ); } return ( - 
)}
-      className={wrapperClassName}
-    >
-      {showLineNumbers && (
-        
-      )}
-
-      {renderedCommonContent}
-
+
+ {renderedWindowChrome} + + 
)}
+        className={wrapperClassName}
+      >
+        {showLineNumbers && (
+          
+        )}
+
+        {renderedSyntaxComponent}
+
+
); } diff --git a/packages/code/src/WindowChrome.tsx b/packages/code/src/WindowChrome.tsx index 1193fa02aa..2370f2634b 100644 --- a/packages/code/src/WindowChrome.tsx +++ b/packages/code/src/WindowChrome.tsx @@ -5,34 +5,42 @@ import { Variant, variantColors } from '@leafygreen-ui/syntax'; import { darken } from 'polished'; export const windowChromeHeight = 28; +const controlSize = 12; +const controlSpacing = 8; +const borderRadius = 4; const windowChromeStyle = css` - height: ${windowChromeHeight}px; - position: absolute; - top: 0; - left: 0; - right: 0; display: flex; align-items: center; - justify-content: center; + justify-content: space-between; + height: ${windowChromeHeight}px; + padding-left: ${controlSize}px; + padding-right: ${controlSize}px; + border-radius: ${borderRadius}px ${borderRadius}px 0 0; `; const windowControlsStyle = css` - position: absolute; - left: 12px; - top: 0; - bottom: 0; - height: 12px; - margin: auto; display: flex; + height: ${controlSize}px; +`; + +const fakeControlsStyle = css` + height: ${controlSize}px; + width: ${controlSpacing * 3 + controlSize * 3}px; +`; + +const textStyle = css` + padding-left: ${controlSpacing}px; + padding-right: ${controlSpacing}px; + font-size: 14px; `; function WindowControl({ color }: { color: string }) { return (
- {chromeTitle} +
{chromeTitle}
+ +
); } From ae4f8fc4847c097f2ca2990d0dc1d93f8c8152a7 Mon Sep 17 00:00:00 2001 From: Dave McCarthy Date: Wed, 10 Jul 2019 13:39:39 -0700 Subject: [PATCH 4/7] chore(code): prettier --- packages/code/src/Code.tsx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/code/src/Code.tsx b/packages/code/src/Code.tsx index 1710276809..8e0fc2e307 100644 --- a/packages/code/src/Code.tsx +++ b/packages/code/src/Code.tsx @@ -157,11 +157,8 @@ function Code({ const { content, lineCount } = useProcessedCodeSnippet(children); const renderedWindowChrome = showWindowChrome && ( - - ) + + ); const renderedSyntaxComponent = ( @@ -185,7 +182,11 @@ function Code({ } return ( -
+
{renderedWindowChrome} 
         {showLineNumbers && (
-          
+          
         )}
 
         {renderedSyntaxComponent}

From 9a4971d68bdc6d190f15ff8907c75863bbc1c46c Mon Sep 17 00:00:00 2001
From: Dave McCarthy 
Date: Wed, 10 Jul 2019 13:51:14 -0700
Subject: [PATCH 5/7] test(code): fix broken test

---
 packages/code/src/Code.spec.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/code/src/Code.spec.tsx b/packages/code/src/Code.spec.tsx
index 205807d3ba..c42fd78591 100644
--- a/packages/code/src/Code.spec.tsx
+++ b/packages/code/src/Code.spec.tsx
@@ -11,9 +11,11 @@ const className = 'test-class';
 describe('packages/Syntax', () => {
   describe('when multiline is true', () => {
     const {
-      container: { firstChild: codeRoot },
+      container: { firstChild: containerRoot },
     } = render({codeSnippet});
 
+    const codeRoot = (containerRoot as HTMLElement).firstChild;
+
     if (!codeRoot || !typeIs.element(codeRoot)) {
       throw new Error('Multiline code element not found');
     }
@@ -40,7 +42,7 @@ describe('packages/Syntax', () => {
       throw new Error('Single line code element not found');
     }
 
-    test('root element renders as a 
 tag', () => {
+    test('code wrapper element renders as a 
 tag', () => {
       expect(codeRoot.tagName).toBe('DIV');
     });
 

From d62d78cb4cebe0398a3b7838f3d61e0c83d74a4f Mon Sep 17 00:00:00 2001
From: Dave McCarthy 
Date: Wed, 10 Jul 2019 14:14:48 -0700
Subject: [PATCH 6/7] fix(code): remove additional border being applied

---
 packages/code/src/Code.tsx | 37 ++++++++++++++++++-------------------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/packages/code/src/Code.tsx b/packages/code/src/Code.tsx
index 8e0fc2e307..6378300236 100644
--- a/packages/code/src/Code.tsx
+++ b/packages/code/src/Code.tsx
@@ -53,25 +53,21 @@ function useProcessedCodeSnippet(snippet: string): ProcessedCodeSnippet {
 }
 
 const whiteSpace = 12;
-const borderRadius = 4;
 
-const wrapperStyle = css`
+const codeWrapperStyle = css`
   overflow-x: auto;
-  border: 1px solid;
-  border-left-width: 3px;
-  border-radius: ${borderRadius}px;
+  border-left: 2px solid;
   padding: ${whiteSpace}px;
   margin: 0;
   position: relative;
 `;
 
-const wrapperStyleWithLineNumbers = css`
+const codeWrapperStyleWithLineNumbers = css`
   padding-left: ${whiteSpace * 3.5}px;
 `;
 
-const wrapperStyleWithWindowChrome = css`
-  border-left-width: 1px;
-  border-radius: 0 0 ${borderRadius}px ${borderRadius}px;
+const codeWrapperStyleWithWindowChrome = css`
+  border-left: 0;
 `;
 
 function getWrapperVariantStyle(variant: Variant): string {
@@ -144,12 +140,19 @@ function Code({
   chromeTitle = '',
   ...rest
 }: CodeProps) {
+  const wrapperStyle = css`
+    display: inline-block;
+    border: 1px solid ${variantColors[variant][1]};
+    border-radius: 4px;
+    overflow: hidden;
+  `;
+
   const wrapperClassName = cx(
-    wrapperStyle,
+    codeWrapperStyle,
     getWrapperVariantStyle(variant),
     {
-      [wrapperStyleWithLineNumbers]: multiline && showLineNumbers,
-      [wrapperStyleWithWindowChrome]: showWindowChrome,
+      [codeWrapperStyleWithLineNumbers]: multiline && showLineNumbers,
+      [codeWrapperStyleWithWindowChrome]: showWindowChrome,
     },
     className,
   );
@@ -168,7 +171,7 @@ function Code({
 
   if (!multiline) {
     return (
-      <>
+      

         {renderedWindowChrome}
 
         

           {renderedSyntaxComponent}
         

-      
+      

     );
   }
 
   return (
-    

+    

       {renderedWindowChrome}
 
       
Date: Wed, 10 Jul 2019 16:52:34 -0700
Subject: [PATCH 7/7] test(code): fix failing tests

---
 packages/code/src/Code.spec.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/code/src/Code.spec.tsx b/packages/code/src/Code.spec.tsx
index c42fd78591..4ed0d2d2ee 100644
--- a/packages/code/src/Code.spec.tsx
+++ b/packages/code/src/Code.spec.tsx
@@ -14,7 +14,7 @@ describe('packages/Syntax', () => {
       container: { firstChild: containerRoot },
     } = render({codeSnippet});
 
-    const codeRoot = (containerRoot as HTMLElement).firstChild;
+    const codeRoot = (containerRoot as HTMLElement).lastChild;
 
     if (!codeRoot || !typeIs.element(codeRoot)) {
       throw new Error('Multiline code element not found');
@@ -31,13 +31,15 @@ describe('packages/Syntax', () => {
 
   describe('when multiline is false', () => {
     const {
-      container: { firstChild: codeRoot },
+      container: { firstChild: containerRoot },
     } = render(
       
         {codeSnippet}
       ,
     );
 
+    const codeRoot = (containerRoot as HTMLElement).lastChild;
+
     if (!codeRoot || !typeIs.element(codeRoot)) {
       throw new Error('Single line code element not found');
     }