Yoga Website: Tweak Playground visuals for embedding (#1608)

Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1608

Fixes up layout when embedded into document, and removes the copy button taking more horizontal real estate than it is worth, when we want to show a horizontal playground at 75% width.

Before:

{F1467611957}

{F1467613069}

{F1467613795}

After:

{F1467611817}

{F1467612896}

{F1467613557}

Reviewed By: javache

Differential Revision: D54787261

fbshipit-source-id: 2177d896baf81971d1b979c060eecf51535de4c5

website-next/src/components/EditorToolbar.tsx

@@ -11,7 +11,6 @@ import {useCallback, useEffect, useRef, useState} from 'react';
 import clsx from 'clsx';
 import lzString from 'lz-string';
 
-import CopyIcon from '../../static/img/copy.svg';
 import LinkIcon from '../../static/img/link.svg';
 import SuccessIcon from '@theme/Icon/Success';
 
@@ -28,10 +27,6 @@ export default function EditorToolbar({
   className,
   style,
 }: Props): JSX.Element {
-  const handleCopy = useCallback(() => {
-    navigator.clipboard.writeText(code);
-  }, [code]);
-
   const handleShare = useCallback(() => {
     navigator.clipboard.writeText(
       window.location.origin +
@@ -41,7 +36,6 @@ export default function EditorToolbar({
 
   return (
     <div className={clsx(styles.toolbar, className)} style={style}>
-      <ToolbarButton Icon={CopyIcon} label="Copy" onClick={handleCopy} />
       <ToolbarButton Icon={LinkIcon} label="Share" onClick={handleShare} />
     </div>
   );

website-next/src/components/Playground.module.css

@@ -7,7 +7,6 @@
 
 html[data-theme='light'] {
   --yg-color-preview-background: var(--ifm-color-primary-lighter);
-  --yg-color-playground-background: var(--ifm-color-gray-200);
   --yg-color-editor-border: var(--ifm-color-gray-400);
   --yg-color-editor-fallback-bg: rgb(246, 248, 250);
   --yg-color-editor-fallback-text: rgb(0, 0, 159);
@@ -15,19 +14,14 @@ html[data-theme='light'] {
 
 html[data-theme='dark'] {
   --yg-color-preview-background: var(--ifm-color-primary-dark);
-  --yg-color-playground-background: var(--ifm-color-background);
   --yg-color-editor-border: var(--ifm-color-gray-800);
   --yg-color-editor-fallback-bg: rgb(40, 44, 52);
   --yg-color-editor-fallback-text: rgb(209, 154, 102);
 }
 
 .wrapper {
-  display: flex;
+  min-width: 600px;
-  justify-content: center;
-  min-width: 900px;
-  width: 100%;
   padding-block: 16px;
-  background-color: var(--yg-color-playground-background);
 }
 
 .playgroundRow {
@@ -59,12 +53,13 @@ html[data-theme='dark'] {
   font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
     var(--ifm-font-family-monospace) !important;
   direction: ltr;
-  height: calc(var(--yg-playground-height, 400px) - 32px);
+  height: calc(var(--yg-playground-height) - 32px);
 }
 
 .playgroundEditor :global(.prism-code) {
   box-shadow: var(--ifm-global-shadow-lw);
-  min-height: 100%;
+  height: calc(var(--yg-playground-height) - 32px);
+  min-height: 300px;
   border-radius: 0;
   padding: var(--ifm-pre-padding) !important;
 }
@@ -77,13 +72,14 @@ html[data-theme='dark'] {
 .previewColumn {
   display: flex;
   flex: 5;
-  height: calc(var(--yg-playground-height, 400px) - 32px);
+  height: calc(var(--yg-playground-height) - 32px);
+  min-height: 300px;
   align-items: center;
   justify-content: center;
   background-color: var(--yg-color-preview-background);
   overflow: hidden;
   border-radius: var(--ifm-pre-border-radius);
-  align-self: flex-start;
+  align-self: stretch;
   box-shadow: var(--ifm-global-shadow-lw);
 }
 
@@ -112,12 +108,12 @@ html[data-theme='dark'] {
   }
 
   .playgroundEditor :global(.prism-code) {
+    height: unset;
     min-height: 10em;
   }
 
   .playgroundRow {
     flex-direction: column;
-    padding-inline: 5px;
   }
 
   .editorColumn {

website-next/src/components/Playground.tsx

@@ -85,7 +85,7 @@ export default function Playground({code, height, autoFocus}: Props) {
       theme={prismTheme}
       scope={{Node: LiveNode, Layout: RootLiveNode}}>
       <div className={styles.wrapper} style={heightStyle}>
-        <div className={clsx(styles.playgroundRow, 'container')}>
+        <div className={clsx(styles.playgroundRow)}>
           <div className={clsx(styles.editorColumn, 'playground-editor')}>
             <div className={styles.editorScroll} ref={editorScrollRef}>
               <EditorToolbar

website-next/src/pages/index.tsx

@@ -68,7 +68,7 @@ const playgroundCode = `
 
 function PlaygroundSection() {
   return (
-    <main className={styles.playgroundSection}>
+    <main className={clsx('container', styles.playgroundSection)}>
       <Playground height="600px" code={playgroundCode} autoFocus={true} />
     </main>
   );

website-next/src/pages/playground.tsx

@@ -11,6 +11,7 @@ import lzString from 'lz-string';
 
 import Playground from '../components/Playground';
 
+import clsx from 'clsx';
 import styles from './playground.module.css';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 
@@ -27,7 +28,7 @@ export default function PlaygroundPage(): JSX.Element {
 
   return (
     // @ts-ignore missing prop for `wrapperClassName`
-    <Layout wrapperClassName={styles.bg} title="Playground">
+    <Layout wrapperClassName={clsx('container', styles.bg)} title="Playground">
       <Playground
         height="max(80vh, 600px)"
         code={code}

website-next/static/img/copy.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-copy" viewBox="-4 -4 24 24">
-  <path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"/>
-</svg>