Improve style prop display

Summary:
- Display the description when it exists
- Display the platform

<img width="667" alt="screen shot 2016-01-24 at 1 37 45 pm" src="https://cloud.githubusercontent.com/assets/197597/12539106/fb226d08-c29f-11e5-83ad-f85bb42ed693.png">
Closes https://github.com/facebook/react-native/pull/5520

Reviewed By: svcscm

Differential Revision: D2859743

Pulled By: vjeux

fb-gh-sync-id: 0ccfeca7bbdfa837501378c0bf701d589fea48d8

website/layout/AutodocsLayout.js

@@ -65,6 +65,35 @@ function renderType(type) {
   return type.name;
 }
 
+function sortByPlatform(props, nameA, nameB) {
+  var a = props[nameA];
+  var b = props[nameB];
+
+  if (a.platforms && !b.platforms) {
+    return 1;
+  }
+  if (b.platforms && !a.platforms) {
+    return -1;
+  }
+
+  // Cheap hack: use < on arrays of strings to compare the two platforms
+  if (a.platforms < b.platforms) {
+    return -1;
+  }
+  if (a.platforms > b.platforms) {
+    return 1;
+  }
+
+  if (nameA < nameB) {
+    return -1;
+  }
+  if (nameA > nameB) {
+    return 1;
+  }
+
+  return 0;
+}
+
 var ComponentDoc = React.createClass({
   renderProp: function(name, prop) {
     return (
@@ -96,8 +125,28 @@ var ComponentDoc = React.createClass({
     );
   },
 
+  renderStylesheetProp: function(name, prop) {
+    return (
+      <div className="prop" key={name}>
+        <h6 className="propTitle">
+          {prop.platforms && prop.platforms.map(platform =>
+            <span className="platform">{platform}</span>
+          )}
+          {name}
+          {' '}
+          {prop.type && <span className="propType">
+            {renderType(prop.type)}
+          </span>}
+          {' '}
+          {prop.description && <Marked>{prop.description}</Marked>}
+        </h6>
+      </div>
+    );
+  },
+
   renderStylesheetProps: function(stylesheetName) {
     var style = this.props.content.styles[stylesheetName];
+    this.extractPlatformFromProps(style.props);
     return (
       <div className="compactProps">
         {(style.composes || []).map((name) => {
@@ -121,17 +170,10 @@ var ComponentDoc = React.createClass({
             </div>
           );
         })}
-        {Object.keys(style.props).map((name) =>
+        {Object.keys(style.props)
-          <div className="prop" key={name}>
+          .sort(sortByPlatform.bind(null, style.props))
-            <h6 className="propTitle">
+          .map((name) => this.renderStylesheetProp(name, style.props[name]))
-              {name}
+        }
-              {' '}
-              {style.props[name].type && <span className="propType">
-                {renderType(style.props[name].type)}
-              </span>}
-            </h6>
-          </div>
-        )}
       </div>
     );
   },
@@ -143,27 +185,9 @@ var ComponentDoc = React.createClass({
           this.renderCompose(name)
         )}
         {Object.keys(props)
-          .sort((nameA, nameB) => {
+          .sort(sortByPlatform.bind(null, props))
-            var a = props[nameA];
+          .map((name) => this.renderProp(name, props[name]))
-            var b = props[nameB];
+        }
-
-            if (a.platforms && !b.platforms) {
-              return 1;
-            }
-            if (b.platforms && !a.platforms) {
-              return -1;
-            }
-            if (nameA < nameB) {
-              return -1;
-            }
-            if (nameA > nameB) {
-              return 1;
-            }
-            return 0;
-          })
-          .map((name) =>
-          this.renderProp(name, props[name])
-        )}
       </div>
     );
   },

website/server/extractDocs.js

@@ -267,7 +267,11 @@ var styleDocs = styles.slice(2).reduce(function(docs, filepath) {
     docgen.parse(
       fs.readFileSync(filepath),
       docgenHelpers.findExportedObject,
-      [docgen.handlers.propTypeHandler, docgen.handlers.propTypeCompositionHandler]
+      [
+        docgen.handlers.propTypeHandler,
+        docgen.handlers.propTypeCompositionHandler,
+        docgen.handlers.propDocBlockHandler,
+      ]
     );
 
   return docs;

website/src/react-native/css/react-native.css

@@ -1041,6 +1041,11 @@ div[data-twttr-id] iframe {
   margin-top: 0;
 }
 
+.compactProps .propTitle div {
+  font-weight: normal;
+  margin-left: 20px;
+}
+
 .prop {
   padding: 5px 10px;
 }