diff --git a/src/layouts/react-component-layout.tsx b/src/layouts/react-component-layout.tsx index 26d35363f..b7dced909 100644 --- 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}) {

Props

{name}

- + {subcomponents?.map(subcomponent => ( <>

{subcomponent.name}

- + ))} @@ -276,6 +284,7 @@ function sentenceCase(str: string) { // TODO: Make table responsive function ReactPropsTable({ props, + passthrough, }: { props: Array<{ name: string @@ -285,6 +294,10 @@ function ReactPropsTable({ deprecated: boolean description: string }> + passthrough: { + url: string + element: string + } }) { if (props.length === 0) { return ( @@ -292,6 +305,8 @@ function ReactPropsTable({ ) } + const isPolymorphic = props.find(({name}) => name === 'as'); + return ( @@ -340,6 +355,21 @@ function ReactPropsTable({ ))} + {passthrough && ( + + + Additional props are passed to the <{passthrough?.element}> element. See{' '} + the docs for {passthrough?.element} for a list of props/attributes accepted by the <{passthrough.element}>{' '} + element. + {isPolymorphic && ( + <> + {' '} + If an as prop is specified, the accepted props will change accordingly. + + )} + + + )}