Skip to content

Commit 629d004

Browse files
camertroncamertron
committed
Fix dialog props
1 parent 56fd2be commit 629d004

File tree

3 files changed

+82
-76
lines changed

3 files changed

+82
-76
lines changed

‎content/components/dialog/react/draft.mdx

+3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ reactStatus: draft
88
---
99

1010
import ReactComponentPage from '~/src/components/react-component-page'
11+
import ReactPropsTable from '~/src/components/react-props-table'
1112
import { graphql } from "gatsby"
1213

1314
export const query = graphql`
@@ -99,6 +100,8 @@ By default, the Dialog component implements the design and interactions defined
99100

100101
## Props
101102

103+
<ReactPropsTable props={props.data.reactComponent.props} />
104+
102105
### DialogHeaderProps
103106

104107
The `DialogHeaderProps` interface extends `DialogProps` and adds these additional properties:

‎src/components/react-component-page.tsx

+1-76
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,15 @@ import {AccessibilityLabel, Note, StatusLabel} from '@primer/gatsby-theme-doctoc
22
import Code from '@primer/gatsby-theme-doctocat/src/components/code'
33
import {HEADER_HEIGHT} from '@primer/gatsby-theme-doctocat/src/components/header'
44
import {H2, H3} from '@primer/gatsby-theme-doctocat/src/components/heading'
5-
import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'
6-
import Table from '@primer/gatsby-theme-doctocat/src/components/table'
75
import TableOfContents from '@primer/gatsby-theme-doctocat/src/components/table-of-contents'
86
import {LinkExternalIcon} from '@primer/octicons-react'
97
import {Box, Heading, Label, Link, Text} from '@primer/react'
108
import React, { PropsWithChildren } from 'react'
11-
import ReactMarkdown from 'react-markdown'
129
import {StorybookEmbed} from '../components/storybook-embed'
1310
import {BaseLayout} from '../components/base-layout'
1411
import {ComponentPageNav} from '../components/component-page-nav'
1512
import StatusMenu from '../components/status-menu'
13+
import ReactPropsTable from './react-props-table'
1614

1715
type ReactComponentPageProps = {
1816
// Data is the result of the ReactComponentInfo graphql fragment in react-component-layout.tsx
@@ -240,76 +238,3 @@ function sentenceCase(str: string) {
240238
return str.toUpperCase()
241239
})
242240
}
243-
244-
// TODO: Make table responsive
245-
function ReactPropsTable({
246-
props,
247-
}: {
248-
props: Array<{
249-
name: string
250-
type: string
251-
defaultValue: string
252-
required: boolean
253-
deprecated: boolean
254-
description: string
255-
}>
256-
}) {
257-
if (props.length === 0) {
258-
return (
259-
<Box sx={{padding: 3, bg: 'canvas.inset', textAlign: 'center', color: 'fg.muted', borderRadius: 2}}>No props</Box>
260-
)
261-
}
262-
263-
return (
264-
<Box sx={{overflow: 'auto'}}>
265-
<Table>
266-
<colgroup>
267-
<col style={{width: '25%'}} />
268-
<col style={{width: '15%'}} />
269-
<col style={{width: '60%'}} />
270-
</colgroup>
271-
<thead>
272-
<tr>
273-
<th align="left">Name</th>
274-
<th align="left">Default</th>
275-
<th align="left">Description</th>
276-
</tr>
277-
</thead>
278-
<tbody>
279-
{props.map(prop => (
280-
<tr key={prop.name}>
281-
<td valign="top">
282-
<Box sx={{display: 'flex', gap: 2, alignItems: 'center'}}>
283-
<Text sx={{fontFamily: 'mono', fontSize: 1, whiteSpace: 'nowrap'}}>{prop.name}</Text>
284-
{prop.required ? <Label>Required</Label> : null}
285-
{prop.deprecated ? <Label variant="danger">Deprecated</Label> : null}
286-
</Box>
287-
</td>
288-
<td valign="top">{prop.defaultValue ? <InlineCode>{prop.defaultValue}</InlineCode> : null}</td>
289-
<td>
290-
<InlineCode>{prop.type}</InlineCode>
291-
<Box
292-
sx={{
293-
'&:not(:empty)': {
294-
mt: 2,
295-
},
296-
color: 'fg.muted',
297-
'& > :first-child': {
298-
mt: 0,
299-
},
300-
'& > :last-child': {
301-
mb: 0,
302-
},
303-
}}
304-
>
305-
{/* @ts-ignore */}
306-
<ReactMarkdown components={{a: Link, code: InlineCode}}>{prop.description}</ReactMarkdown>
307-
</Box>
308-
</td>
309-
</tr>
310-
))}
311-
</tbody>
312-
</Table>
313-
</Box>
314-
)
315-
}

‎src/components/react-props-table.tsx

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import React from 'react'
2+
import ReactMarkdown from 'react-markdown'
3+
import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'
4+
import Table from '@primer/gatsby-theme-doctocat/src/components/table'
5+
import { Box, Text, Label, Link } from '@primer/react'
6+
7+
// TODO: Make table responsive
8+
export default function ReactPropsTable({
9+
props,
10+
}: {
11+
props: Array<{
12+
name: string
13+
type: string
14+
defaultValue: string
15+
required: boolean
16+
deprecated: boolean
17+
description: string
18+
}>
19+
}) {
20+
if (props.length === 0) {
21+
return (
22+
<Box sx={{padding: 3, bg: 'canvas.inset', textAlign: 'center', color: 'fg.muted', borderRadius: 2}}>No props</Box>
23+
)
24+
}
25+
26+
return (
27+
<Box sx={{overflow: 'auto'}}>
28+
<Table>
29+
<colgroup>
30+
<col style={{width: '25%'}} />
31+
<col style={{width: '15%'}} />
32+
<col style={{width: '60%'}} />
33+
</colgroup>
34+
<thead>
35+
<tr>
36+
<th align="left">Name</th>
37+
<th align="left">Default</th>
38+
<th align="left">Description</th>
39+
</tr>
40+
</thead>
41+
<tbody>
42+
{props.map(prop => (
43+
<tr key={prop.name}>
44+
<td valign="top">
45+
<Box sx={{display: 'flex', gap: 2, alignItems: 'center'}}>
46+
<Text sx={{fontFamily: 'mono', fontSize: 1, whiteSpace: 'nowrap'}}>{prop.name}</Text>
47+
{prop.required ? <Label>Required</Label> : null}
48+
{prop.deprecated ? <Label variant="danger">Deprecated</Label> : null}
49+
</Box>
50+
</td>
51+
<td valign="top">{prop.defaultValue ? <InlineCode>{prop.defaultValue}</InlineCode> : null}</td>
52+
<td>
53+
<InlineCode>{prop.type}</InlineCode>
54+
<Box
55+
sx={{
56+
'&:not(:empty)': {
57+
mt: 2,
58+
},
59+
color: 'fg.muted',
60+
'& > :first-child': {
61+
mt: 0,
62+
},
63+
'& > :last-child': {
64+
mb: 0,
65+
},
66+
}}
67+
>
68+
{/* @ts-ignore */}
69+
<ReactMarkdown components={{a: Link, code: InlineCode}}>{prop.description}</ReactMarkdown>
70+
</Box>
71+
</td>
72+
</tr>
73+
))}
74+
</tbody>
75+
</Table>
76+
</Box>
77+
)
78+
}

0 commit comments

Comments
 (0)