Merge pull request #651 from primer/doc-fixes

Some documentation fixes
primer · Jan 18, 2019 · aeca890 · aeca890
2 parents d51305c + 946e3ad
commit aeca890
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 24 deletions.
diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -54,6 +54,7 @@
     "prop-types": "^15.6.2",
     "react": "16.6.1",
     "react-dom": "16.6.1",
+    "react-measure": "^2.2.2",
     "refractor": "^2.6.2",
     "remark-emoji": "^2.0.2",
     "remark-images": "^0.16.1",

diff --git a/docs/src/CodeExample.js b/docs/src/CodeExample.js
@@ -48,7 +48,7 @@ export default function CodeExample(props) {
             <Text
               as={LiveError}
               fontFamily="mono"
-              css={{
+              style={{
                 overflow: 'auto',
                 whiteSpace: 'pre'
               }}

diff --git a/docs/src/Frame.js b/docs/src/Frame.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import Measure from 'react-measure'
 import {BorderBox} from '@primer/components'
 import {assetPrefix} from './utils'
 
@@ -19,14 +20,16 @@ export default class Frame extends React.Component {
   }
 
   componentDidMount() {
-    this.doc = this.node.contentDocument
+    this.doc = this.iframe.contentDocument
     const files = JSON.parse(document.body.dataset.files || '[]')
     // eslint-disable-next-line react/no-did-mount-set-state
-    this.setState({files})
-    this.node.addEventListener('load', () => this.setState({loaded: true}))
+    this.setState({loaded: false, files})
+    this.iframe.addEventListener('load', () => {
+      this.setState({loaded: true})
+    })
   }
 
-  getCssLinks() {
+  getHead() {
     const {files} = this.state
     return files
       ? files
@@ -35,21 +38,26 @@ export default class Frame extends React.Component {
       : null
   }
 
-  getHeight() {
-    if (!this.node) return null
-    this.node.style.height = 'max-content'
-    const {body} = this.node.contentDocument
-    return body.offsetHeight > DEFAULT_IFRAME_HEIGHT ? body.offsetHeight : body.scrollHeight
+  getBody(children) {
+    return (
+      <Measure bounds onResize={rect => this.setHeight(rect.bounds.height)}>
+        {({measureRef}) => <div ref={measureRef}>{children}</div>}
+      </Measure>
+    )
+  }
+
+  setHeight(height) {
+    // console.warn('height:', height)
+    this.setState({height})
   }
 
   render() {
     const {children, ...rest} = this.props
-    const height = this.getHeight()
-    const style = height ? {height} : null
+    const {height = 'auto'} = this.state
     return (
-      <BorderBox as="iframe" style={style} {...rest} ref={node => (this.node = node)}>
+      <BorderBox as="iframe" style={{height}} {...rest} ref={node => (this.iframe = node)}>
         {this.doc
-          ? [ReactDOM.createPortal(this.getCssLinks(), this.doc.head), ReactDOM.createPortal(children, this.doc.body)]
+          ? [ReactDOM.createPortal(this.getHead(), this.doc.head), ReactDOM.createPortal(this.getBody(children), this.doc.body)]
           : null}
       </BorderBox>
     )

diff --git a/docs/src/color-system.js b/docs/src/color-system.js
@@ -140,15 +140,13 @@ FadeVariables.propTypes = {
 function Swatch(props) {
   const {name, value, textColor = overlayColor(value), ...rest} = props
   return (
-    <Box bg={value} {...rest}>
+    <Box bg={value} color={textColor} {...rest}>
       <Text as={Flex} fontSize={1} justifyContent="space-between">
         <Box p={3}>
-          <Var color={textColor}>${name}</Var>
+          <Var>${name}</Var>
         </Box>
         <Box p={3}>
-          <Text color={textColor} fontFamily="mono">
-            {value}
-          </Text>
+          <Text fontFamily="mono">{value}</Text>
         </Box>
       </Text>
     </Box>
@@ -163,7 +161,7 @@ Swatch.propTypes = {
 
 function Var(props) {
   // FIXME: fontStyle should be a prop, right?
-  return <Text as="var" fontWeight="bold" fontFamily="mono" css={{fontStyle: 'normal'}} {...props} />
+  return <Text as="var" fontWeight="bold" fontFamily="mono" style={{fontStyle: 'normal'}} {...props} />
 }
 
 function overlayColor(bg) {