PD-334: Update Code component with static window chrome

packages/Code/src/Code.spec.tsx → 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(<Code className={className}>{codeSnippet}</Code>);
 
+    const codeRoot = (containerRoot as HTMLElement).lastChild;
+
     if (!codeRoot || !typeIs.element(codeRoot)) {
       throw new Error('Multiline code element not found');
     }
@@ -29,18 +31,20 @@ describe('packages/Syntax', () => {
 
   describe('when multiline is false', () => {
     const {
-      container: { firstChild: codeRoot },
+      container: { firstChild: containerRoot },
     } = render(
       <Code className={className} multiline={false}>
         {codeSnippet}
       </Code>,
     );
 
+    const codeRoot = (containerRoot as HTMLElement).lastChild;
+
     if (!codeRoot || !typeIs.element(codeRoot)) {
       throw new Error('Single line code element not found');
     }
 
-    test('root element renders as a <div> tag', () => {
+    test('code wrapper element renders as a <div> tag', () => {
       expect(codeRoot.tagName).toBe('DIV');
     });
 

packages/Code/src/Code.tsx → 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 === ' ';
@@ -54,23 +54,20 @@ function useProcessedCodeSnippet(snippet: string): ProcessedCodeSnippet {
 
 const whiteSpace = 12;
 
-const wrapperStyle = css`
+const codeWrapperStyle = css`
   overflow-x: auto;
-  border: 1px solid;
-  border-left-width: 3px;
-  border-radius: 4px;
+  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`
-  padding-top: ${windowChromeHeight + whiteSpace}px;
-  border-left-width: 1px;
+const codeWrapperStyleWithWindowChrome = css`
+  border-left: 0;
 `;
 
 function getWrapperVariantStyle(variant: Variant): string {
@@ -143,62 +140,65 @@ 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,
   );
 
   const { content, lineCount } = useProcessedCodeSnippet(children);
 
-  const renderedCommonContent = (
-    <>
-      {showWindowChrome && (
-        <WindowChrome chromeTitle={chromeTitle} variant={variant} />
-      )}
+  const renderedWindowChrome = showWindowChrome && (
+    <WindowChrome chromeTitle={chromeTitle} variant={variant} />
+  );
 
-      <Syntax variant={variant} language={language}>
-        {content}
-      </Syntax>
-    </>
+  const renderedSyntaxComponent = (
+    <Syntax variant={variant} language={language}>
+      {content}
+    </Syntax>
   );
 
   if (!multiline) {
     return (
-      <div
-        {...(rest as DetailedElementProps<HTMLDivElement>)}
-        className={wrapperClassName}
-      >
-        {renderedCommonContent}
+      <div className={wrapperStyle}>
+        {renderedWindowChrome}
+
+        <div
+          {...(rest as DetailedElementProps<HTMLDivElement>)}
+          className={wrapperClassName}
+        >
+          {renderedSyntaxComponent}
+        </div>
       </div>
     );
   }
 
   return (
-    <pre
-      {...(rest as DetailedElementProps<HTMLPreElement>)}
-      className={wrapperClassName}
-    >
-      {showLineNumbers && (
-        <LineNumbers
-          variant={variant}
-          lineCount={lineCount}
-          className={
-            showWindowChrome
-              ? css`
-                  top: ${windowChromeHeight}px;
-                `
-              : ''
-          }
-        />
-      )}
-
-      {renderedCommonContent}
-    </pre>
+    <div className={wrapperStyle}>
+      {renderedWindowChrome}
+
+      <pre
+        {...(rest as DetailedElementProps<HTMLPreElement>)}
+        className={wrapperClassName}
+      >
+        {showLineNumbers && (
+          <LineNumbers variant={variant} lineCount={lineCount} />
+        )}
+
+        {renderedSyntaxComponent}
+      </pre>
+    </div>
   );
 }
 

packages/Code/src/WindowChrome.tsx → 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 (
     <div
       className={css`
-        height: 12px;
-        width: 12px;
+        height: ${controlSize}px;
+        width: ${controlSize}px;
         border-radius: 50px;
         margin-right: 8px;
         background-color: ${color};
@@ -69,7 +77,9 @@ function WindowChrome({
         ))}
       </div>
 
-      {chromeTitle}
+      <div className={textStyle}>{chromeTitle}</div>
+
+      <div className={fakeControlsStyle} />
     </div>
   );
 }