@@ -11,18 +11,18 @@ import Link from 'docs/src/modules/components/Link';
11
11
const components = [
12
12
{
13
13
name : 'Accordion' ,
14
- materialUI : '/material-ui/react-accordion' ,
14
+ materialUI : '/material-ui/react-accordion/ ' ,
15
15
materialDesign : 'https://m1.material.io/components/expansion-panels.html' ,
16
16
} ,
17
17
{ name : 'Alert' , materialUI : '/material-ui/react-alert' } ,
18
18
{
19
19
name : 'App Bar: top' ,
20
- materialUI : '/material-ui/react-app-bar' ,
20
+ materialUI : '/material-ui/react-app-bar/ ' ,
21
21
materialDesign : 'https://m2.material.io/components/app-bars-top' ,
22
22
} ,
23
23
{
24
24
name : 'App Bar: bottom' ,
25
- materialUI : '/material-ui/react-app-bar#bottom-app-bar' ,
25
+ materialUI : '/material-ui/react-app-bar#bottom-app-bar/ ' ,
26
26
materialDesign : 'https://m2.material.io/components/app-bars-bottom' ,
27
27
} ,
28
28
{ name : 'Autocomplete' , materialUI : '/material-ui/react-autocomplete' } ,
@@ -35,13 +35,13 @@ const components = [
35
35
{ name : 'Badge' , materialUI : '/material-ui/react-badge' } ,
36
36
{
37
37
name : 'Bottom Navigation' ,
38
- materialUI : '/material-ui/react-bottom-navigation' ,
38
+ materialUI : '/material-ui/react-bottom-navigation/ ' ,
39
39
materialDesign : 'https://m2.material.io/components/bottom-navigation' ,
40
40
} ,
41
41
{ name : 'Breadcrumbs' , materialUI : '/material-ui/react-breadcrumbs' } ,
42
42
{
43
43
name : 'Button' ,
44
- materialUI : '/material-ui/react-button' ,
44
+ materialUI : '/material-ui/react-button/ ' ,
45
45
materialDesign : 'https://m2.material.io/components/buttons' ,
46
46
} ,
47
47
{
@@ -53,147 +53,151 @@ const components = [
53
53
{ name : 'Button Group' , materialUI : '/material-ui/react-button-group' } ,
54
54
{
55
55
name : 'Card' ,
56
- materialUI : '/material-ui/react-card' ,
56
+ materialUI : '/material-ui/react-card/ ' ,
57
57
materialDesign : 'https://m2.material.io/components/cards' ,
58
58
} ,
59
59
{
60
60
name : 'Checkbox' ,
61
- materialUI : '/material-ui/react-checkbox' ,
61
+ materialUI : '/material-ui/react-checkbox/ ' ,
62
62
materialDesign : 'https://m2.material.io/components/checkboxes' ,
63
63
} ,
64
64
{
65
65
name : 'Chip' ,
66
- materialUI : '/material-ui/react-chip' ,
66
+ materialUI : '/material-ui/react-chip/ ' ,
67
67
materialDesign : 'https://m2.material.io/components/chips' ,
68
68
} ,
69
- { name : 'Data Grid' , materialUI : '/x/react-data-grid' } ,
69
+ {
70
+ name : 'Data Grid' ,
71
+ materialUI : '/x/react-data-grid/' ,
72
+ materialDesign : 'https://m2.material.io/components/data-tables' ,
73
+ } ,
70
74
{
71
75
name : 'Date Pickers' ,
72
- materialUI : '/x/react-date-pickers' ,
76
+ materialUI : '/x/react-date-pickers/getting-started/ ' ,
73
77
materialDesign : 'https://m2.material.io/components/date-pickers' ,
74
78
} ,
75
79
{
76
80
name : 'Dialog' ,
77
- materialUI : '/material-ui/react-dialog' ,
81
+ materialUI : '/material-ui/react-dialog/ ' ,
78
82
materialDesign : 'https://m2.material.io/components/dialogs' ,
79
83
} ,
80
84
{
81
85
name : 'Divider' ,
82
- materialUI : '/material-ui/react-divider' ,
86
+ materialUI : '/material-ui/react-divider/ ' ,
83
87
materialDesign : 'https://m2.material.io/components/dividers' ,
84
88
} ,
85
89
{
86
90
name : 'Drawer' ,
87
- materialUI : '/material-ui/react-drawer' ,
91
+ materialUI : '/material-ui/react-drawer/ ' ,
88
92
materialDesign : 'https://m2.material.io/components/navigation-drawer' ,
89
93
} ,
90
94
{
91
95
name : 'Icons' ,
92
- materialUI : '/material-ui/icons' ,
96
+ materialUI : '/material-ui/icons/ ' ,
93
97
materialDesign : 'https://m2.material.io/design/iconography/system-icons.html' ,
94
98
} ,
95
99
{
96
100
name : 'Image List' ,
97
- materialUI : '/material-ui/react-image-list' ,
101
+ materialUI : '/material-ui/react-image-list/ ' ,
98
102
materialDesign : 'https://m2.material.io/components/image-lists' ,
99
103
} ,
100
- { name : 'Link' , materialUI : '/material-ui/react-link' } ,
104
+ { name : 'Link' , materialUI : '/material-ui/react-link/ ' } ,
101
105
{
102
106
name : 'List' ,
103
- materialUI : '/material-ui/react-list' ,
107
+ materialUI : '/material-ui/react-list/ ' ,
104
108
materialDesign : 'https://m2.material.io/components/lists' ,
105
109
} ,
106
- { name : 'Masonry' , materialUI : '/material-ui/react-masonry' } ,
110
+ { name : 'Masonry' , materialUI : '/material-ui/react-masonry/ ' } ,
107
111
{
108
112
name : 'Material Icons' ,
109
- materialUI : '/material-ui/material-icons' ,
113
+ materialUI : '/material-ui/material-icons/ ' ,
110
114
materialDesign : 'https://fonts.google.com/icons' ,
111
115
} ,
112
116
{
113
117
name : 'Menu' ,
114
- materialUI : '/material-ui/react-menu' ,
118
+ materialUI : '/material-ui/react-menu/ ' ,
115
119
materialDesign : 'https://m2.material.io/components/menus' ,
116
120
} ,
117
121
{
118
122
name : 'Modal' ,
119
- materialUI : '/material-ui/react-modal' ,
123
+ materialUI : '/material-ui/react-modal/ ' ,
120
124
materialDesign : 'https://m2.material.io/components/dialogs' ,
121
125
} ,
122
126
{
123
127
name : 'Navigation Rail' ,
124
128
materialDesign : 'https://m2.material.io/components/navigation-rail' ,
125
129
} ,
126
- { name : 'Pagination' , materialUI : '/material-ui/react-pagination' } ,
130
+ { name : 'Pagination' , materialUI : '/material-ui/react-pagination/ ' } ,
127
131
{
128
132
name : 'Paper' ,
129
- materialUI : '/material-ui/react-paper' ,
133
+ materialUI : '/material-ui/react-paper/ ' ,
130
134
materialDesign : 'https://m2.material.io/design/environment/elevation.html' ,
131
135
} ,
132
136
{
133
137
name : 'Progress' ,
134
- materialUI : '/material-ui/react-progress' ,
138
+ materialUI : '/material-ui/react-progress/ ' ,
135
139
materialDesign : 'https://m2.material.io/components/progress-indicators' ,
136
140
} ,
137
141
{
138
142
name : 'Radio Group' ,
139
- materialUI : '/material-ui/react-radio-button' ,
143
+ materialUI : '/material-ui/react-radio-button/ ' ,
140
144
materialDesign : 'https://m2.material.io/components/radio-buttons' ,
141
145
} ,
142
- { name : 'Rating' , materialUI : '/material-ui/react-rating' } ,
146
+ { name : 'Rating' , materialUI : '/material-ui/react-rating/ ' } ,
143
147
{
144
148
name : 'Select' ,
145
- materialUI : '/material-ui/react-select' ,
149
+ materialUI : '/material-ui/react-select/ ' ,
146
150
materialDesign : 'https://m2.material.io/components/menus#exposed-dropdown-menu' ,
147
151
} ,
148
- { name : 'Skeleton' , materialUI : '/material-ui/react-skeleton' } ,
152
+ { name : 'Skeleton' , materialUI : '/material-ui/react-skeleton/ ' } ,
149
153
{
150
154
name : 'Slider' ,
151
- materialUI : '/material-ui/react-slider' ,
155
+ materialUI : '/material-ui/react-slider/ ' ,
152
156
materialDesign : 'https://m2.material.io/components/sliders' ,
153
157
} ,
154
158
{
155
159
name : 'Snackbar' ,
156
- materialUI : '/material-ui/react-snackbar' ,
160
+ materialUI : '/material-ui/react-snackbar/ ' ,
157
161
materialDesign : 'https://m2.material.io/components/snackbars' ,
158
162
} ,
159
163
{ name : 'Speed Dial' , materialUI : '/material-ui/react-speed-dial' } ,
160
164
{
161
165
name : 'Stepper' ,
162
- materialUI : '/material-ui/react-stepper' ,
166
+ materialUI : '/material-ui/react-stepper/ ' ,
163
167
materialDesign : 'https://m1.material.io/components/steppers.html' ,
164
168
} ,
165
169
{
166
170
name : 'Switch' ,
167
- materialUI : '/material-ui/react-switch' ,
171
+ materialUI : '/material-ui/react-switch/ ' ,
168
172
materialDesign : 'https://m2.material.io/components/switches' ,
169
173
} ,
170
174
{
171
175
name : 'Table' ,
172
- materialUI : '/material-ui/react-table' ,
176
+ materialUI : '/material-ui/react-table/ ' ,
173
177
materialDesign : 'https://m2.material.io/components/data-tables' ,
174
178
} ,
175
179
{
176
180
name : 'Tabs' ,
177
- materialUI : '/material-ui/react-tabs' ,
181
+ materialUI : '/material-ui/react-tabs/ ' ,
178
182
materialDesign : 'https://m2.material.io/components/tabs' ,
179
183
} ,
180
184
{
181
185
name : 'Text Field' ,
182
- materialUI : '/material-ui/react-text-field' ,
186
+ materialUI : '/material-ui/react-text-field/ ' ,
183
187
materialDesign : 'https://m2.material.io/components/text-fields' ,
184
188
} ,
185
- { name : 'Timeline' , materialUI : '/material-ui/react-timeline' } ,
186
- { name : 'Toggle Button' , materialUI : '/material-ui/react-toggle-button' } ,
189
+ { name : 'Timeline' , materialUI : '/material-ui/react-timeline/ ' } ,
190
+ { name : 'Toggle Button' , materialUI : '/material-ui/react-toggle-button/ ' } ,
187
191
{
188
192
name : 'Tooltip' ,
189
- materialUI : '/material-ui/react-tooltip' ,
193
+ materialUI : '/material-ui/react-tooltip/ ' ,
190
194
materialDesign : 'https://m2.material.io/components/tooltips' ,
191
195
} ,
192
- { name : 'Transfer List' , materialUI : '/material-ui/react-transfer-list' } ,
193
- { name : 'Tree View' , materialUI : '/material-ui/react-tree-view' } ,
196
+ { name : 'Transfer List' , materialUI : '/material-ui/react-transfer-list/ ' } ,
197
+ { name : 'Tree View' , materialUI : '/material-ui/react-tree-view/ ' } ,
194
198
{
195
199
name : 'Typography' ,
196
- materialUI : '/material-ui/react-typography' ,
200
+ materialUI : '/material-ui/react-typography/ ' ,
197
201
materialDesign : 'https://m2.material.io/design/typography/the-type-system.html' ,
198
202
} ,
199
203
] ;
@@ -217,50 +221,43 @@ export default function MaterialUIComponents() {
217
221
</ TableCell >
218
222
< TableCell >
219
223
{ component . materialDesign ? (
220
- < React . Fragment >
221
- < Link
222
- variant = "body2"
223
- data-no-markdown-link = "true"
224
- href = { component . materialDesign }
225
- >
226
- { component . materialDesign . substring ( 8 , 10 ) === 'm1'
227
- ? 'MD 1 (legacy)'
228
- : 'MD 2' }
229
- </ Link >
230
- </ React . Fragment >
224
+ < Link
225
+ variant = "body2"
226
+ data-no-markdown-link = "true"
227
+ href = { component . materialDesign }
228
+ >
229
+ { component . materialDesign . substring ( 8 , 10 ) === 'm1'
230
+ ? 'MD 1 (legacy)'
231
+ : 'MD 2' }
232
+ </ Link >
231
233
) : (
232
234
'No guidelines'
233
235
) }
234
236
</ TableCell >
235
237
< TableCell >
236
238
{ component . materialUI &&
237
239
component . materialUI . indexOf ( '/material-ui' ) === 0 ? (
238
- < React . Fragment >
239
- { '✅ ' }
240
- < Link
241
- variant = "body2"
242
- data-no-markdown-link = "true"
243
- href = { component . materialUI }
244
- >
245
- Native support
246
- </ Link >
247
- </ React . Fragment >
240
+ < Link
241
+ variant = "body2"
242
+ data-no-markdown-link = "true"
243
+ href = { component . materialUI }
244
+ >
245
+ Native support
246
+ </ Link >
248
247
) : null }
249
248
{ component . materialUI && component . materialUI . indexOf ( '/x' ) === 0 ? (
250
- < React . Fragment >
251
- < Link
252
- variant = "body2"
253
- data-no-markdown-link = "true"
254
- href = { component . materialUI }
255
- >
256
- Support in MUI X
257
- </ Link >
258
- </ React . Fragment >
249
+ < Link
250
+ variant = "body2"
251
+ data-no-markdown-link = "true"
252
+ href = { component . materialUI }
253
+ >
254
+ Support in MUI X
255
+ </ Link >
259
256
) : null }
260
257
{ component . materialUI === 'Composable' ? (
261
258
< React . Fragment > { 'Composable' } </ React . Fragment >
262
259
) : null }
263
- { component . materialUI == null ? 'No support' : null }
260
+ { component . materialUI == null ? '❌ No support' : null }
264
261
</ TableCell >
265
262
</ TableRow >
266
263
) ) }
0 commit comments