flexWrap, alignContent, initialPlayground

Summary: Adds `initialPlayground` to the markdown header. Adds contents fro alignContent and flexWrap.

Reviewed By: emilsjolander

Differential Revision: D6987513

fbshipit-source-id: 41de309d427a9f42e09477170fb8512ce1e7a816

website/contents/properties/align-content.md

@@ -2,8 +2,12 @@
 path: "docs/align-content"
 title: "Align Content"
 hasPlayground: true
+initialPlayground: eyJ3aWR0aCI6NTAwLCJoZWlnaHQiOjUwMCwiZmxleFdyYXAiOjEsImNoaWxkcmVuIjpbe30se30se30se30se30se30se30se30se30se30se30se31dfQ==
 ---
 
 ## Align Content
 
+The property defines the distribution of lines along the cross-axis. This only
+has effect when items are wrapped to multiple lines (see [flexWrap](flex-wrap)).
+
 <controls prop="alignContent"></controls>

website/contents/properties/flex-wrap.md

@@ -2,8 +2,20 @@
 path: "docs/flex-wrap"
 title: "Flex Wrap"
 hasPlayground: true
+initialPlayground: eyJ3aWR0aCI6NTAwLCJoZWlnaHQiOjUwMCwiY2hpbGRyZW4iOlt7fSx7fSx7fSx7fSx7fSx7fSx7fSx7fV19
 ---
 
 ## Flex Wrap
 
+The `flexWrap` property is set on containers and controls what happens when
+children overflow the size of the container along the main axis. By default
+children are forced into a single line (which can shrink elements).
+
+If wrapping is allowed items are wrapped into multiple lines along the main
+axis if needed. `WRAP_REVERSE` behaves the same, but the order of the lines is
+reversed.
+
 <controls prop="flexWrap"></controls>
+
+When wrapping lines [alignContent](align-content) can be used to specify how the
+lines are placed in the container.

website/gatsby-node.js

@@ -25,6 +25,7 @@ exports.createPages = ({boundActionCreators, graphql}) => {
             frontmatter {
               path
               hasPlayground
+              initialPlayground
             }
             html
           }

website/src/components/Playground/YogaNode.js

@@ -110,6 +110,7 @@ export default class YogaNode extends Component<Props, State> {
     root.setJustifyContent(layoutDefinition.justifyContent);
     root.setAlignItems(layoutDefinition.alignItems);
     root.setAlignSelf(layoutDefinition.alignSelf);
+    root.setAlignContent(layoutDefinition.alignContent);
     root.setFlexGrow(layoutDefinition.flexGrow);
     root.setFlexShrink(layoutDefinition.flexShrink);
 

website/src/components/Playground/index.js

@@ -25,7 +25,7 @@ import type {Yoga$Direction} from 'yoga-layout';
 import './index.css';
 
 type Props = {
-  layoutDefinition: LayoutRecordT,
+  layoutDefinition: Object,
   direction: Yoga$Direction,
   maxDepth: number,
   maxChildren?: number,
@@ -53,11 +53,11 @@ export default class Playground extends Component<Props, State> {
   _containerRef: ?HTMLElement;
 
   static defaultProps = {
-    layoutDefinition: LayoutRecord({
+    layoutDefinition: {
       width: 500,
       height: 500,
-      children: List([LayoutRecord(), LayoutRecord(), LayoutRecord()]),
+      children: [{}, {}, []],
-    }),
+    },
     direction: yoga.DIRECTION_LTR,
     maxDepth: 3,
     showCode: false,
@@ -65,9 +65,19 @@ export default class Playground extends Component<Props, State> {
     persist: false,
   };
 
+  rehydrate = (node: Object): LayoutRecord => {
+    let record = LayoutRecord(node);
+    record = record.set('padding', PositionRecord(record.padding));
+    record = record.set('border', PositionRecord(record.border));
+    record = record.set('margin', PositionRecord(record.margin));
+    record = record.set('position', PositionRecord(record.position));
+    record = record.set('children', List(record.children.map(this.rehydrate)));
+    return record;
+  };
+
   state = {
     selectedNodePath: this.props.selectedNodePath,
-    layoutDefinition: this.props.layoutDefinition,
+    layoutDefinition: this.rehydrate(this.props.layoutDefinition),
     direction: this.props.direction,
     showCode: false,
   };
@@ -90,16 +100,6 @@ export default class Playground extends Component<Props, State> {
     document.removeEventListener('keydown', this.onKeyDown);
   }
 
-  rehydrate = (node: Object): LayoutRecord => {
-    let record = LayoutRecord(node);
-    record = record.set('padding', PositionRecord(record.padding));
-    record = record.set('border', PositionRecord(record.border));
-    record = record.set('margin', PositionRecord(record.margin));
-    record = record.set('position', PositionRecord(record.position));
-    record = record.set('children', List(record.children.map(this.rehydrate)));
-    return record;
-  };
-
   onKeyDown = (e: KeyboardEvent) => {
     if (e.key === 'Escape') {
       this.hideSidePanes();
@@ -276,8 +276,8 @@ export default class Playground extends Component<Props, State> {
         <Sidebar
           width={500}
           visible={this.state.showCode}
-          onClose={() => this.setState({showCode: false})}>
+          onClose={() => this.setState({showCode: false})}
-        </Sidebar>
+        />
         {this.props.persist && <URLShortener />}
       </div>
     );

website/src/templates/withPlayground.js

@@ -22,16 +22,25 @@ import './index.css';
 type Props = {
   pathContext: {
     html: string,
-    frontmatter: {},
+    frontmatter: {
+      initialPlayground?: string,
+    },
   },
 };
 const REGEX = /<controls prop="([A-Za-z]+)"\s?\/>/gi;
 
 export default class withPlayground extends Component<Props> {
   render() {
+    let layoutDefinition;
+    if (this.props.pathContext.frontmatter.initialPlayground) {
+      layoutDefinition = JSON.parse(
+        atob(this.props.pathContext.frontmatter.initialPlayground),
+      );
+    }
     return (
       <Page className="doc-block playground">
         <Playground
+          layoutDefinition={layoutDefinition}
           selectedNodePath={[]}
           showGuides={false}
           renderSidebar={(layout, onChange) => (