more iteration

Author: jfuchs

docs/content/Link.mdx

@@ -31,6 +31,5 @@ In special cases where you'd like a `<button>` styled like a `Link`, use `<Link
   />
   <PropsTable.Row name="underline" type="boolean" defaultValue="false" description="Adds underline to the Link" />
   <PropsTable.Row name="hoverColor" type="string" description="Color used when hovering over link" />
-  <PropsTable.AsRow defaultValue='"a"' />
-  <PropsTable.SxRow />
+  <PropsTable.CommonPropRows elementType="a" isPolymorphic />
 </PropsTable>

docs/content/TextInput.mdx

@@ -58,4 +58,8 @@ Native `<input>` attributes are forwarded to the underlying React `input` compon
     description="An Octicon react component. To be used inside of input. Positioned on the left edge."
   />
   <PropsTable.SxRow />
+  <PropsTable.RefRow
+    elementType="input"
+    description="A ref to the input element rendered by this component. Note: this is not the outermost element rendered by TextInput. There is also a divElement wrapper for which a ref is not accepted."
+  />
 </PropsTable>

docs/src/props-table.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import {Box, Link, Label} from '@primer/components'
 import Table from '@primer/gatsby-theme-doctocat/src/components/table'
+import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'
+import {element} from 'prop-types'
 
 function PropsTable({children}) {
   return (
@@ -29,7 +31,7 @@ function PropsTable({children}) {
 function Row({name, type, defaultValue, description, required}) {
   return (
     <tr>
-      <Box as="td" fontFamily="mono" fontSize={1} fontWeight="bold" sx={{whiteSpace: 'nowrap'}}>
+      <Box as="td" fontFamily="mono" fontSize={1} sx={{whiteSpace: 'nowrap'}} verticalAlign="top">
         {typeof name === 'function' ? name() : name}
         {required ? (
           <>
@@ -38,24 +40,86 @@ function Row({name, type, defaultValue, description, required}) {
           </>
         ) : null}
       </Box>
-      <Box as="td" fontFamily="mono" fontSize={1}>
+      <Box as="td" fontFamily="mono" fontSize={1} verticalAlign="top">
         {typeof type === 'function' ? type() : type}
       </Box>
-      <Box as="td" fontFamily="mono" fontSize={1}>
+      <Box as="td" fontFamily="mono" fontSize={1} verticalAlign="top">
         {typeof defaultValue === 'function' ? defaultValue() : defaultValue}
       </Box>
-      <td>{typeof description === 'function' ? description() : description}</td>
+      <Box as="td" verticalAlign="top">
+        {typeof description === 'function' ? description() : description}
+      </Box>
+    </tr>
+  )
+}
+
+function CommonPropRows({elementType, isPolymorphic}) {
+  return (
+    <>
+      <SxRow />
+      {isPolymorphic && <AsRow defaultElementType={elementType} />}
+      <RefRow elementType={elementType} isPolymorphic={isPolymorphic} />
+      <DOMPropsRow elementName={elementType} isPolymorphic={isPolymorphic} />
+    </>
+  )
+}
+
+function DOMPropsRow({elementName, isPolymorphic}) {
+  return (
+    <tr>
+      <Box as="td" colSpan={3}>
+        <i>
+          (various DOM props. See{' '}
+          <Link href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L2023">
+            the React HTML attribute types
+          </Link>
+          )
+        </i>
+      </Box>
+      <td>
+        This component will also accept all the props of its underlying element (<InlineCode>{elementName}</InlineCode>)
+        {isPolymorphic && (
+          <>
+            Or, if an <InlineCode>as</InlineCode> prop is passed, the properties of that element are passed through.
+          </>
+        )}
+        .
+      </td>
     </tr>
   )
 }
 
-function AsRow({defaultValue}) {
+function AsRow({defaultElementType}) {
   return (
     <Row
       name="as"
-      defaultValue={defaultValue}
-      type="ReactElement"
-      description="The underlying element to render — either a DOM element or a React component."
+      defaultValue={`"${defaultElementType}"`}
+      type={() => (
+        <Link href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L73">
+          React.ElementType
+        </Link>
+      )}
+      description="The underlying element to render — either a DOM element name or a React component."
+    />
+  )
+}
+
+function RefRow({elementType, isPolymorphic}) {
+  return (
+    <Row
+      name="ref"
+      type={() => <>{'React.RefObject<HTMLElement>'}</>}
+      description={() => (
+        <>
+          A ref to the element rendered by this component.
+          {isPolymorphic && (
+            <>
+              Because this component is isPolymorphic, the type will vary based on the value of the{' '}
+              <InlineCode>as</InlineCode> prop.
+            </>
+          )}
+        </>
+      )}
     />
   )
 }
@@ -64,7 +128,6 @@ function SxRow() {
   return (
     <Row
       name="sx"
-      defaultValue="{}"
       type={() => (
         <Link href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/styled-system__css/index.d.ts#L407">
           SystemStyleObject
@@ -79,6 +142,6 @@ function SxRow() {
   )
 }
 
-Object.assign(PropsTable, {Row, AsRow, SxRow})
+Object.assign(PropsTable, {Row, CommonPropRows, AsRow, RefRow, DOMPropsRow, SxRow})
 
 export {PropsTable}