Fix doc styles

docs/storybook/1-components/Text/TextScreen.js

@@ -37,7 +37,12 @@ const TextScreen = () => (
       <DocItem
         name="accessibilityLabel"
         typeInfo="?string"
-        description="Overrides the text that is read by a screen reader when the user interacts with the element. (This is implemented using 'aria-label'.)"
+        description={
+          <AppText>
+            Overrides the text that is read by a screen reader when the user interacts with the
+            element. (This is implemented using <Code>aria-label</Code>.)
+          </AppText>
+        }
       />
 
       <DocItem
@@ -49,7 +54,7 @@ const TextScreen = () => (
             The values of this attribute are expressed in degrees of importance. When regions are
             specified as <Code>polite</Code> (recommended), updates take low priority. When regions
             are specified as <Code>assertive</Code>, assistive technologies will interrupt and
-            immediately notify the user. (This is implemented using 'aria-live'.)
+            immediately notify the user. (This is implemented using <Code>aria-live</Code>.)
           </AppText>
         }
       />
@@ -78,7 +83,7 @@ const TextScreen = () => (
             When <Code>true</Code>, indicates that the view is an accessibility element (i.e.,
             focusable) and groups its child content. By default, all the touchable elements and
             elements with <Code>accessibilityRole</Code> of <Code>button</Code> and{' '}
-            <Code>link</Code> are accessible. (This is implemented using 'tabindex'.)
+            <Code>link</Code> are accessible. (This is implemented using <Code>tabindex</Code>.)
           </AppText>
         }
       />
@@ -86,9 +91,12 @@ const TextScreen = () => (
       <DocItem
         name="children"
         typeInfo="?any"
-        description={`Child content. Nested text components will inherit the styles of their parents
-(only backgroundColor is inherited from non-Text parents). <Text>
-only supports other <Text> and raw text (strings) as children.`}
+        description={
+          <AppText>
+            Child content. Nested text components will inherit the styles of their parents (only
+            backgroundColor is inherited from non-<Code>Text</Code> parents).
+          </AppText>
+        }
         example={{
           render: () => <PropChildren />
         }}
@@ -103,7 +111,7 @@ only supports other <Text> and raw text (strings) as children.`}
           </AppText>,
           <AppText>
             A value of <Code>no-hide-descendants</Code> will hide the element and its children from
-            assistive technologies. (This is implemented using 'aria-hidden'.)
+            assistive technologies. (This is implemented using <Code>aria-hidden</Code>.)
           </AppText>
         ]}
       />

docs/storybook/1-components/Text/examples/PropChildren.js

@@ -38,6 +38,7 @@ const TextChildrenExample = () => (
         <Text>
           (is inherited
           <Text style={{ opacity: 0.7 }}>
+            {'\n'}
             (and accumulated
             <Text style={{ backgroundColor: '#ffaaaa' }}>(and also applies to the background)</Text>
             )

docs/storybook/ui-explorer/AppText.js

@@ -19,9 +19,7 @@ export default AppText;
 
 const styles = StyleSheet.create({
   baseText: {
-    fontFamily:
-      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif, ' +
-      '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', // emoji fonts
+    fontSize: '1rem',
     lineHeight: '1.3125em'
   },
   link: {

docs/storybook/ui-explorer/Code.js

@@ -11,6 +11,7 @@ export default Code;
 const styles = StyleSheet.create({
   code: {
     fontFamily: 'monospace, monospace',
+    fontSize: '1rem',
     lineHeight: '1.3125em',
     whiteSpace: 'pre'
   }

docs/storybook/ui-explorer/DocItem.js

@@ -13,11 +13,13 @@ const Divider = () => <View style={styles.verticalDivider} />;
 
 const createDescription = description => {
   const nodeList = React.Children.toArray(description);
+  let content;
   if (nodeList.length === 1) {
-    return <Text>{nodeList}</Text>;
+    content = <Text>{nodeList}</Text>;
   } else {
-    return insertBetween(() => <Divider key={Math.random()} />, nodeList);
+    content = insertBetween(() => <Divider key={Math.random()} />, nodeList);
   }
+  return <Text style={styles.text}>{content}</Text>;
 };
 
 const DocItem = ({ description, example = {}, name, typeInfo, label }) => (
@@ -55,6 +57,7 @@ const PropText = ({ label, name, typeInfo }) => (
 const styles = StyleSheet.create({
   code: {
     fontFamily: 'monospace, monospace',
+    fontSize: '1rem',
     lineHeight: '1.3125em'
   },
   example: {
@@ -63,13 +66,20 @@ const styles = StyleSheet.create({
   title: {
     fontSize: '1rem'
   },
+  text: {
+    alignItems: 'stretch',
+    display: 'flex',
+    flexDirection: 'column',
+    fontSize: '1rem',
+    lineHeight: '1.3125em'
+  },
   label: {
     backgroundColor: '#ddd',
-    color: '#555',
     borderRadius: '1rem',
+    color: '#555',
+    marginRight: '0.5rem',
     paddingVertical: '0.125rem',
-    paddingHorizontal: '0.5rem',
-    marginRight: '0.5rem'
+    paddingHorizontal: '0.5rem'
   },
   propName: {
     fontWeight: 'bold'

docs/storybook/ui-explorer/UIExplorer.js

@@ -59,6 +59,7 @@ const styles = StyleSheet.create({
   },
   link: {
     color: '#1B95E0',
+    fontSize: '1rem',
     marginTop: 'calc(0.5 * 1.3125rem)',
     textDecorationLine: 'underline'
   }