Skip to content

Commit 346b01f

Browse files
authored
[docs] Generate template entries about documented generics (mui#46540)
1 parent bdbea3c commit 346b01f

File tree

54 files changed

+550
-181
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+550
-181
lines changed

docs/src/modules/components/ApiPage/definitions/properties.ts

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,12 @@ export interface PropertyDefinition {
2121
requiresRef?: boolean;
2222
seeMoreDescription?: string;
2323
signature?: string;
24-
signatureArgs?: { argName: string; argDescription?: string }[];
24+
signatureArgs?: {
25+
argName: string;
26+
argDescription?: string;
27+
argType?: string;
28+
argTypeDescription?: string;
29+
}[];
2530
signatureReturnDescription?: string;
2631
typeName: string;
2732
/**
@@ -116,11 +121,15 @@ export function getPropsApiDefinitions(params: GetPropsApiDefinitionsParams): Pr
116121
const signature = propData.signature?.type;
117122
const signatureArgs = propData.signature?.describedArgs?.map((argName) => ({
118123
argName,
119-
argDescription: propertiesDescriptions[propName].typeDescriptions?.[argName],
124+
argDescription: propertiesDescriptions[propName].typeDescriptions?.[argName].description,
125+
argType: propertiesDescriptions[propName].typeDescriptions?.[argName]?.argType,
126+
argTypeDescription:
127+
propertiesDescriptions[propName].typeDescriptions?.[argName]?.argTypeDescription,
120128
}));
121129
const signatureReturnDescription =
122130
propData.signature?.returned &&
123-
propertiesDescriptions[propName].typeDescriptions?.[propData.signature.returned];
131+
propertiesDescriptions[propName].typeDescriptions?.[propData.signature.returned]
132+
.argTypeDescription;
124133

125134
return {
126135
hash: `${kebabCase(componentName)}-prop-${propName}`,

docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,17 @@ const Root = styled('div')<{ ownerState: { type?: DescriptionType } }>(
108108
borderColor: alpha(darkTheme.palette.primary[100], 0.8),
109109
backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`,
110110
},
111+
'& .signature-type': {
112+
textDecoration: 'underline',
113+
textDecorationStyle: 'dotted',
114+
textDecorationColor: alpha(lightTheme.palette.primary.main, 0.4),
115+
fontWeight: theme.typography.fontWeightMedium,
116+
color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`,
117+
'&:hover': {
118+
textDecorationColor: 'inherit',
119+
},
120+
cursor: 'help',
121+
},
111122
}),
112123
({ theme }) => ({
113124
[`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
@@ -146,6 +157,10 @@ const Root = styled('div')<{ ownerState: { type?: DescriptionType } }>(
146157
borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
147158
backgroundColor: alpha(darkTheme.palette.primary[900], 0.3),
148159
},
160+
'& .signature-type': {
161+
color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`,
162+
textDecorationColor: alpha(darkTheme.palette.primary.main, 0.6),
163+
},
149164
},
150165
}),
151166
);

docs/src/modules/components/ApiPage/list/PropertiesList.tsx

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* eslint-disable react/no-danger */
22
import * as React from 'react';
33
import { styled } from '@mui/material/styles';
4+
import Tooltip from '@mui/material/Tooltip';
45
import { useTranslate } from '@mui/docs/i18n';
56
import {
67
brandingDarkTheme as darkTheme,
@@ -223,14 +224,32 @@ export default function PropertiesList(props: PropertiesListProps) {
223224
{signatureArgs && (
224225
<div>
225226
<ul>
226-
{signatureArgs.map(({ argName, argDescription }) => (
227-
<li
228-
key={argName}
229-
dangerouslySetInnerHTML={{
230-
__html: `<code>${argName}</code> ${argDescription}`,
231-
}}
232-
/>
233-
))}
227+
{signatureArgs.map(
228+
({ argName, argDescription, argType, argTypeDescription }) => (
229+
<li key={argName}>
230+
<code>
231+
{argName}
232+
{argType && argTypeDescription && (
233+
<span>
234+
:{' '}
235+
<Tooltip
236+
title={
237+
<span
238+
dangerouslySetInnerHTML={{ __html: argTypeDescription }}
239+
/>
240+
}
241+
>
242+
<span className="signature-type">{argType}</span>
243+
</Tooltip>
244+
</span>
245+
)}
246+
</code>{' '}
247+
{argDescription && (
248+
<span dangerouslySetInnerHTML={{ __html: argDescription }} />
249+
)}
250+
</li>
251+
),
252+
)}
234253
</ul>
235254
</div>
236255
)}

docs/src/modules/components/ApiPage/table/PropertiesTable.tsx

Lines changed: 44 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* eslint-disable react/no-danger */
22
import * as React from 'react';
33
import { styled, alpha } from '@mui/material/styles';
4+
import Tooltip from '@mui/material/Tooltip';
45
import { useTranslate } from '@mui/docs/i18n';
56
import {
67
brandingDarkTheme as darkTheme,
@@ -41,6 +42,17 @@ const StyledTable = styled('table')(
4142
borderColor: alpha(darkTheme.palette.primary[100], 0.8),
4243
backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`,
4344
},
45+
'& .MuiApi-table-item-signature-type': {
46+
textDecoration: 'underline',
47+
textDecorationStyle: 'dotted',
48+
textDecorationColor: alpha(lightTheme.palette.primary.main, 0.4),
49+
fontWeight: theme.typography.fontWeightMedium,
50+
color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`,
51+
'&:hover': {
52+
textDecorationColor: 'inherit',
53+
},
54+
cursor: 'help',
55+
},
4456
'& .MuiApi-table-item-default': {
4557
...theme.typography.caption,
4658
fontFamily: theme.typography.fontFamilyCode,
@@ -89,6 +101,10 @@ const StyledTable = styled('table')(
89101
borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
90102
backgroundColor: alpha(darkTheme.palette.primary[900], 0.3),
91103
},
104+
'& .MuiApi-table-item-signature-type': {
105+
color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`,
106+
textDecorationColor: alpha(darkTheme.palette.primary.main, 0.6),
107+
},
92108
'& .MuiApi-table-item-default': {
93109
color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
94110
backgroundColor: `var(--muidocs-palette-grey-900, ${darkTheme.palette.grey[900]})`,
@@ -249,15 +265,34 @@ export default function PropertiesTable(props: PropertiesTableProps) {
249265
{signatureArgs && (
250266
<div>
251267
<ul>
252-
{signatureArgs.map(({ argName, argDescription }) => (
253-
<li
254-
className="prop-signature-list"
255-
key={argName}
256-
dangerouslySetInnerHTML={{
257-
__html: `<code>${argName}</code> ${argDescription}`,
258-
}}
259-
/>
260-
))}
268+
{signatureArgs.map(
269+
({ argName, argDescription, argType, argTypeDescription }) => (
270+
<li className="prop-signature-list" key={argName}>
271+
<code>
272+
{argName}
273+
{argType && argTypeDescription && (
274+
<Tooltip
275+
title={
276+
<span
277+
dangerouslySetInnerHTML={{ __html: argTypeDescription }}
278+
/>
279+
}
280+
>
281+
<span>
282+
:{' '}
283+
<span className="MuiApi-table-item-signature-type">
284+
{argType}
285+
</span>
286+
</span>
287+
</Tooltip>
288+
)}
289+
</code>{' '}
290+
{argDescription && (
291+
<span dangerouslySetInnerHTML={{ __html: argDescription }} />
292+
)}
293+
</li>
294+
),
295+
)}
261296
</ul>
262297
</div>
263298
)}

docs/translations/api-docs-joy/accordion/accordion.json

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,14 @@
2121
"onChange": {
2222
"description": "Callback fired when the expand/collapse state is changed.",
2323
"typeDescriptions": {
24-
"event": "The event source of the callback. <strong>Warning</strong>: This is a generic event not a change event.",
25-
"expanded": "The <code>expanded</code> state of the accordion."
24+
"event": {
25+
"name": "event",
26+
"description": "The event source of the callback. <strong>Warning</strong>: This is a generic event not a change event."
27+
},
28+
"expanded": {
29+
"name": "expanded",
30+
"description": "The <code>expanded</code> state of the accordion."
31+
}
2632
}
2733
},
2834
"slotProps": { "description": "The props used for each slot inside." },

docs/translations/api-docs-joy/autocomplete/autocomplete.json

Lines changed: 55 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,8 @@
6060
"filterOptions": {
6161
"description": "A function that determines the filtered options to be rendered on search.",
6262
"typeDescriptions": {
63-
"options": "The options to render.",
64-
"state": "The state of the component."
63+
"options": { "name": "options", "description": "The options to render." },
64+
"state": { "name": "state", "description": "The state of the component." }
6565
}
6666
},
6767
"filterSelectedOptions": {
@@ -73,22 +73,28 @@
7373
},
7474
"getLimitTagsText": {
7575
"description": "The label to display when the tags are truncated (<code>limitTags</code>).",
76-
"typeDescriptions": { "more": "The number of truncated tags." }
76+
"typeDescriptions": {
77+
"more": { "name": "more", "description": "The number of truncated tags." }
78+
}
7779
},
7880
"getOptionDisabled": {
7981
"description": "Used to determine the disabled state for a given option.",
80-
"typeDescriptions": { "option": "The option to test." }
82+
"typeDescriptions": { "option": { "name": "option", "description": "The option to test." } }
8183
},
8284
"getOptionKey": {
8385
"description": "Used to determine the key for a given option. This can be useful when the labels of options are not unique (since labels are used as keys by default).",
84-
"typeDescriptions": { "option": "The option to get the key for." }
86+
"typeDescriptions": {
87+
"option": { "name": "option", "description": "The option to get the key for." }
88+
}
8589
},
8690
"getOptionLabel": {
8791
"description": "Used to determine the string value for a given option. It&#39;s used to fill the input (and the list box options if <code>renderOption</code> is not provided).<br>If used in free solo mode, it must accept both the type of the options and a string."
8892
},
8993
"groupBy": {
9094
"description": "If provided, the options will be grouped under the returned string. The groupBy value is also used as the text for group headings when <code>renderGroup</code> is not provided.",
91-
"typeDescriptions": { "options": "The options to group." }
95+
"typeDescriptions": {
96+
"options": { "name": "options", "description": "The options to group." }
97+
}
9298
},
9399
"handleHomeEndKeys": {
94100
"description": "If <code>true</code>, the component handles the &quot;Home&quot; and &quot;End&quot; keys when the popup is open. It should move focus to the first option and last option, respectively."
@@ -102,7 +108,10 @@
102108
"inputValue": { "description": "The input value." },
103109
"isOptionEqualToValue": {
104110
"description": "Used to determine if the option represents the given value. Uses strict equality by default. ⚠️ Both arguments need to be handled, an option can only match with one value.",
105-
"typeDescriptions": { "option": "The option to test.", "value": "The value to test against." }
111+
"typeDescriptions": {
112+
"option": { "name": "option", "description": "The option to test." },
113+
"value": { "name": "value", "description": "The value to test against." }
114+
}
106115
},
107116
"limitTags": {
108117
"description": "The maximum number of tags that will be visible when not focused. Set <code>-1</code> to disable the limit."
@@ -123,37 +132,51 @@
123132
"onChange": {
124133
"description": "Callback fired when the value changes.",
125134
"typeDescriptions": {
126-
"event": "The event source of the callback.",
127-
"value": "The new value of the component.",
128-
"reason": "One of &quot;createOption&quot;, &quot;selectOption&quot;, &quot;removeOption&quot;, &quot;blur&quot; or &quot;clear&quot;."
135+
"event": { "name": "event", "description": "The event source of the callback." },
136+
"value": { "name": "value", "description": "The new value of the component." },
137+
"reason": {
138+
"name": "reason",
139+
"description": "One of &quot;createOption&quot;, &quot;selectOption&quot;, &quot;removeOption&quot;, &quot;blur&quot; or &quot;clear&quot;."
140+
}
129141
}
130142
},
131143
"onClose": {
132144
"description": "Callback fired when the popup requests to be closed. Use in controlled mode (see open).",
133145
"typeDescriptions": {
134-
"event": "The event source of the callback.",
135-
"reason": "Can be: <code>&quot;toggleInput&quot;</code>, <code>&quot;escape&quot;</code>, <code>&quot;selectOption&quot;</code>, <code>&quot;removeOption&quot;</code>, <code>&quot;blur&quot;</code>."
146+
"event": { "name": "event", "description": "The event source of the callback." },
147+
"reason": {
148+
"name": "reason",
149+
"description": "Can be: <code>&quot;toggleInput&quot;</code>, <code>&quot;escape&quot;</code>, <code>&quot;selectOption&quot;</code>, <code>&quot;removeOption&quot;</code>, <code>&quot;blur&quot;</code>."
150+
}
136151
}
137152
},
138153
"onHighlightChange": {
139154
"description": "Callback fired when the highlight option changes.",
140155
"typeDescriptions": {
141-
"event": "The event source of the callback.",
142-
"option": "The highlighted option.",
143-
"reason": "Can be: <code>&quot;keyboard&quot;</code>, <code>&quot;auto&quot;</code>, <code>&quot;mouse&quot;</code>, <code>&quot;touch&quot;</code>."
156+
"event": { "name": "event", "description": "The event source of the callback." },
157+
"option": { "name": "option", "description": "The highlighted option." },
158+
"reason": {
159+
"name": "reason",
160+
"description": "Can be: <code>&quot;keyboard&quot;</code>, <code>&quot;auto&quot;</code>, <code>&quot;mouse&quot;</code>, <code>&quot;touch&quot;</code>."
161+
}
144162
}
145163
},
146164
"onInputChange": {
147165
"description": "Callback fired when the input value changes.",
148166
"typeDescriptions": {
149-
"event": "The event source of the callback.",
150-
"value": "The new value of the text input.",
151-
"reason": "Can be: <code>&quot;input&quot;</code> (user input), <code>&quot;reset&quot;</code> (programmatic change), <code>&quot;clear&quot;</code>, <code>&quot;blur&quot;</code>, <code>&quot;selectOption&quot;</code>, <code>&quot;removeOption&quot;</code>"
167+
"event": { "name": "event", "description": "The event source of the callback." },
168+
"value": { "name": "value", "description": "The new value of the text input." },
169+
"reason": {
170+
"name": "reason",
171+
"description": "Can be: <code>&quot;input&quot;</code> (user input), <code>&quot;reset&quot;</code> (programmatic change), <code>&quot;clear&quot;</code>, <code>&quot;blur&quot;</code>, <code>&quot;selectOption&quot;</code>, <code>&quot;removeOption&quot;</code>"
172+
}
152173
}
153174
},
154175
"onOpen": {
155176
"description": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).",
156-
"typeDescriptions": { "event": "The event source of the callback." }
177+
"typeDescriptions": {
178+
"event": { "name": "event", "description": "The event source of the callback." }
179+
}
157180
},
158181
"open": { "description": "If <code>true</code>, the component is shown." },
159182
"openOnFocus": { "description": "If <code>true</code>, the popup will open on input focus." },
@@ -168,22 +191,28 @@
168191
},
169192
"renderGroup": {
170193
"description": "Render the group.",
171-
"typeDescriptions": { "params": "The group to render." }
194+
"typeDescriptions": { "params": { "name": "params", "description": "The group to render." } }
172195
},
173196
"renderOption": {
174197
"description": "Render the option, use <code>getOptionLabel</code> by default.",
175198
"typeDescriptions": {
176-
"props": "The props to apply on the li element.",
177-
"option": "The option to render.",
178-
"state": "The state of the component."
199+
"props": { "name": "props", "description": "The props to apply on the li element." },
200+
"option": { "name": "option", "description": "The option to render." },
201+
"state": { "name": "state", "description": "The state of the component." }
179202
}
180203
},
181204
"renderTags": {
182205
"description": "Render the selected value.",
183206
"typeDescriptions": {
184-
"value": "The <code>value</code> provided to the component.",
185-
"getTagProps": "A tag props getter.",
186-
"ownerState": "The state of the Autocomplete component."
207+
"value": {
208+
"name": "value",
209+
"description": "The <code>value</code> provided to the component."
210+
},
211+
"getTagProps": { "name": "getTagProps", "description": "A tag props getter." },
212+
"ownerState": {
213+
"name": "ownerState",
214+
"description": "The state of the Autocomplete component."
215+
}
187216
}
188217
},
189218
"required": {

docs/translations/api-docs-joy/checkbox/checkbox.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,10 @@
2828
"onChange": {
2929
"description": "Callback fired when the state is changed.",
3030
"typeDescriptions": {
31-
"event": "The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (string). You can pull out the new checked state by accessing <code>event.target.checked</code> (boolean)."
31+
"event": {
32+
"name": "event",
33+
"description": "The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (string). You can pull out the new checked state by accessing <code>event.target.checked</code> (boolean)."
34+
}
3235
}
3336
},
3437
"overlay": {

docs/translations/api-docs-joy/drawer/drawer.json

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,11 @@
3434
"onClose": {
3535
"description": "Callback fired when the component requests to be closed. The <code>reason</code> parameter can optionally be used to control the response to <code>onClose</code>.",
3636
"typeDescriptions": {
37-
"event": "The event source of the callback.",
38-
"reason": "Can be: <code>&quot;escapeKeyDown&quot;</code>, <code>&quot;backdropClick&quot;</code>, <code>&quot;closeClick&quot;</code>."
37+
"event": { "name": "event", "description": "The event source of the callback." },
38+
"reason": {
39+
"name": "reason",
40+
"description": "Can be: <code>&quot;escapeKeyDown&quot;</code>, <code>&quot;backdropClick&quot;</code>, <code>&quot;closeClick&quot;</code>."
41+
}
3942
}
4043
},
4144
"open": { "description": "If <code>true</code>, the component is shown." },

0 commit comments

Comments
 (0)