Add "passthrough" note back to docs props table

primer · Dec 20, 2024 · bbcfc17 · bbcfc17
1 parent 8913a83
commit bbcfc17
Showing 1 changed file with 33 additions and 3 deletions.
diff --git a/src/layouts/react-component-layout.tsx b/src/layouts/react-component-layout.tsx
@@ -57,6 +57,10 @@ export const query = graphql`
         required
         deprecated
       }
+      passthrough {
+        element
+        url
+      }
       subcomponents {
         name
         props {
@@ -67,6 +71,10 @@ export const query = graphql`
           required
           deprecated
         }
+        passthrough {
+          element
+          url
+        }
       }
     }
 
@@ -77,7 +85,7 @@ export const query = graphql`
 `
 
 export default function ReactComponentLayout({data}) {
-  const {name, status, a11yReviewed, importPath, props: componentProps, subcomponents, stories} = data.reactComponent
+  const {name, status, a11yReviewed, importPath, passthrough, props: componentProps, subcomponents, stories} = data.reactComponent
   // This is a temporary and very hacky fix to make sure TooltipV2 has the correct component name in the import path.
   // We will remove this once https://github.com/primer/react/pull/4483 is merged and release.
   let componentName = name
@@ -252,11 +260,11 @@ export default function ReactComponentLayout({data}) {
 
             <H2>Props</H2>
             <H3>{name}</H3>
-            <ReactPropsTable props={componentProps} />
+            <ReactPropsTable passthrough={passthrough} props={componentProps} />
             {subcomponents?.map(subcomponent => (
               <>
                 <H3>{subcomponent.name}</H3>
-                <ReactPropsTable props={subcomponent.props} />
+                <ReactPropsTable passthrough={subcomponent.passthrough} props={subcomponent.props} />
               </>
             ))}
           </Box>
@@ -276,6 +284,7 @@ function sentenceCase(str: string) {
 // TODO: Make table responsive
 function ReactPropsTable({
   props,
+  passthrough,
 }: {
   props: Array<{
     name: string
@@ -285,13 +294,19 @@ function ReactPropsTable({
     deprecated: boolean
     description: string
   }>
+  passthrough: {
+    url: string
+    element: string
+  }
 }) {
   if (props.length === 0) {
     return (
       <Box sx={{padding: 3, bg: 'canvas.inset', textAlign: 'center', color: 'fg.muted', borderRadius: 2}}>No props</Box>
     )
   }
 
+  const isPolymorphic = props.find(({name}) => name === 'as');
+
   return (
     <Box sx={{overflow: 'auto'}}>
       <Table>
@@ -340,6 +355,21 @@ function ReactPropsTable({
               </td>
             </tr>
           ))}
+          {passthrough && (
+            <tr>
+              <Box as="td" colSpan={3} fontSize={1} verticalAlign="top">
+                Additional props are passed to the <InlineCode>&lt;{passthrough?.element}&gt;</InlineCode> element. See{' '}
+                the <Link href={passthrough.url}>docs for {passthrough?.element}</Link> for a list of props/attributes accepted by the <InlineCode>&lt;{passthrough.element}&gt;</InlineCode>{' '}
+                element.
+                {isPolymorphic && (
+                  <>
+                    {' '}
+                    If an <InlineCode>as</InlineCode> prop is specified, the accepted props will change accordingly.
+                  </>
+                )}
+              </Box>
+            </tr>
+          )}
         </tbody>
       </Table>
     </Box>