Skip to content

Commit 852f5e1

Browse files
colebemisjfuchs
colebemis
and
jfuchs
authored
Update component docs (Link, TextInput, ActionList2) (#1695)
* Update props table * Put props table subcomponents in global scope * Update TextInput docs * Update Link docs * Update ActionList2 docs * Update link docs * Update text input docs * Update actionlist docs * Apply suggestions from code review Co-authored-by: Jonathan Fuchs <[email protected]> Co-authored-by: Jonathan Fuchs <[email protected]>
1 parent 8851ac0 commit 852f5e1

File tree

5 files changed

+335
-125
lines changed

5 files changed

+335
-125
lines changed

‎docs/content/Link.mdx‎

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
title: Link
33
status: Alpha
4+
source: https://github.com/primer/react/blob/main/src/Link.tsx
45
---
56

6-
import {PropsTable} from '../src/props-table'
77
import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'
88
import {Link} from '@primer/components'
99

@@ -13,18 +13,18 @@ In special cases where you'd like a `<button>` styled like a `Link`, use `<Link
1313

1414
**Important:** When using the `as` prop, be sure to always render an accessible element type, like `a`, `button`, `input`, or `summary`.
1515

16-
## Default example
16+
## Examples
1717

1818
```jsx live
19-
<Link sx={{mb: 1}} href="https://github.com">
20-
Link
21-
</Link>
19+
<Link href="https://github.com">Link</Link>
2220
```
2321

24-
## Component props
22+
## Props
23+
24+
### Link
2525

2626
<PropsTable>
27-
<PropsTable.Row
27+
<PropsTableRow
2828
name="href"
2929
type="string"
3030
description={
@@ -35,20 +35,41 @@ In special cases where you'd like a `<button>` styled like a `Link`, use `<Link
3535
</>
3636
}
3737
/>
38-
<PropsTable.Row
38+
<PropsTableRow
3939
name="muted"
4040
type="boolean"
4141
defaultValue="false"
4242
description="Uses a less prominent shade for Link color, and the default link shade on hover"
4343
/>
44-
<PropsTable.Row name="underline" type="boolean" defaultValue="false" description="Adds underline to the Link" />
45-
<PropsTable.Row name="hoverColor" type="string" description="Color used when hovering over link" />
46-
<PropsTable.BasePropRows
44+
<PropsTableRow name="underline" type="boolean" defaultValue="false" description="Adds underline to the Link" />
45+
<PropsTableRow name="hoverColor" type="string" description="Color used when hovering over link" />
46+
<PropsTableBasePropRows
4747
elementType="a"
48-
refType="React.RefObject<HTMLAnchorElement>"
48+
refType="HTMLAnchorElement"
4949
passthroughPropsLink={
5050
<Link href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes">MDN</Link>
5151
}
5252
isPolymorphic
5353
/>
5454
</PropsTable>
55+
56+
## Status
57+
58+
<ComponentChecklist
59+
items={{
60+
propsDocumented: true,
61+
noUnnecessaryDeps: true,
62+
adaptsToThemes: true,
63+
adaptsToScreenSizes: true,
64+
fullTestCoverage: false,
65+
usedInProduction: true,
66+
usageExamplesDocumented: false,
67+
hasStorybookStories: false,
68+
designReviewed: false,
69+
a11yReviewed: false,
70+
stableApi: false,
71+
addressedApiFeedback: false,
72+
hasDesignGuidelines: false,
73+
hasFigmaComponent: false
74+
}}
75+
/>

‎docs/content/TextInput.mdx‎

Lines changed: 74 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
title: TextInput
33
status: Alpha
4+
source: https://github.com/primer/react/blob/main/src/TextInput.tsx
45
---
56

67
import {PropsTable} from '../src/props-table'
@@ -10,7 +11,7 @@ TextInput is a form component to add default styling to the native text input.
1011

1112
**Note:** Don't forget to set `aria-label` to make the TextInput accessible to screen reader users.
1213

13-
## Default example
14+
## Examples
1415

1516
```jsx live
1617
<>
@@ -29,38 +30,69 @@ TextInput is a form component to add default styling to the native text input.
2930
</>
3031
```
3132

32-
## Component props
33+
## Props
3334

34-
Native `<input>` attributes are forwarded to the underlying React `input` component and are not listed below.
35+
### TextInput
3536

3637
<PropsTable>
37-
<PropsTable.Row name="aria-label" required type="string" description="Allows input to be accessible." />
38-
<PropsTable.Row name="block" type="boolean" description="Adds `display: block` to element" />
39-
<PropsTable.Row name="contrast" type="boolean" description="Changes background color to a higher contrast color" />
38+
<PropsTable.Row name="aria-label" type="string" description="Allows input to be accessible." />
39+
<PropsTable.Row
40+
name="block"
41+
type="boolean"
42+
defaultValue="false"
43+
description={
44+
<>
45+
Adds <InlineCode>display: block</InlineCode> to element
46+
</>
47+
}
48+
/>
49+
<PropsTable.Row
50+
name="contrast"
51+
type="boolean"
52+
defaultValue="false"
53+
description="Changes background color to a higher contrast color"
54+
/>
4055
<PropsTable.Row
4156
name="variant"
42-
type="string"
43-
description="Can be either `small` or `large`. Creates a smaller or larger input than the default."
57+
type="'small' | 'large'"
58+
description="Creates a smaller or larger input than the default."
59+
/>
60+
<PropsTable.Row
61+
name="width"
62+
type={
63+
<>
64+
string | number | <Link href="https://styled-system.com/guides/array-props">Array&lt;string | number&gt;</Link>
65+
</>
66+
}
67+
description="Set the width of the input"
68+
/>
69+
<PropsTable.Row
70+
name="maxWidth"
71+
type={
72+
<>
73+
string | number | <Link href="https://styled-system.com/guides/array-props">Array&lt;string | number&gt;</Link>
74+
</>
75+
}
76+
description="Set the maximum width of the input"
77+
/>
78+
<PropsTable.Row
79+
name="minWidth"
80+
type={
81+
<>
82+
string | number | <Link href="https://styled-system.com/guides/array-props">Array&lt;string | number&gt;</Link>
83+
</>
84+
}
85+
description="Set the minimum width of the input"
4486
/>
45-
<PropsTable.Row name="width" type="string | number" description="Set the width of the input" />
46-
<PropsTable.Row name="maxWidth" description="Set the maximum width of the input">
47-
<PropsTable.Row.Type>
48-
string | number | <Link href="https://styled-system.com/guides/array-props">Array</Link>
49-
</PropsTable.Row.Type>
50-
</PropsTable.Row>
51-
<PropsTable.Row name="minWidth" description="Set the minimum width of the input">
52-
<PropsTable.Row.Type>
53-
string | number | <Link href="https://styled-system.com/guides/array-props">Array</Link>
54-
</PropsTable.Row.Type>
55-
</PropsTable.Row>
5687
<PropsTable.Row
5788
name="icon"
58-
type="ReactNode"
59-
description="An Octicon react component. To be used inside of input. Positioned on the left edge."
89+
type="React.ComponentType"
90+
description="An Octicon React component. To be used inside of input. Positioned on the left edge."
6091
/>
6192
<PropsTable.SxRow />
6293
<PropsTable.RefRow
6394
elementType="input"
95+
refType="HTMLInputElement"
6496
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 div wrapper for which a ref is not accepted."
6597
/>
6698
<PropsTable.PassthroughPropsRow
@@ -70,3 +102,24 @@ Native `<input>` attributes are forwarded to the underlying React `input` compon
70102
}
71103
/>
72104
</PropsTable>
105+
106+
## Status
107+
108+
<ComponentChecklist
109+
items={{
110+
propsDocumented: true,
111+
noUnnecessaryDeps: true,
112+
adaptsToThemes: true,
113+
adaptsToScreenSizes: true,
114+
fullTestCoverage: false,
115+
usedInProduction: true,
116+
usageExamplesDocumented: false,
117+
hasStorybookStories: false,
118+
designReviewed: false,
119+
a11yReviewed: false,
120+
stableApi: false,
121+
addressedApiFeedback: false,
122+
hasDesignGuidelines: false,
123+
hasFigmaComponent: false
124+
}}
125+
/>

0 commit comments

Comments
 (0)