From 4e94d521890cc847c8c7d8024fedb8c6f2fdacb8 Mon Sep 17 00:00:00 2001 From: Matt Date: Mon, 12 Oct 2020 15:06:49 +0100 Subject: [PATCH] [docs] API pages I18n --- docs/pages/api-docs/accordion-actions.js | 28 +- docs/pages/api-docs/accordion-actions.json | 29 + docs/pages/api-docs/accordion-actions.md | 57 - docs/pages/api-docs/accordion-details.js | 28 +- docs/pages/api-docs/accordion-details.json | 20 + docs/pages/api-docs/accordion-details.md | 55 - docs/pages/api-docs/accordion-summary.js | 28 +- docs/pages/api-docs/accordion-summary.json | 30 + docs/pages/api-docs/accordion-summary.md | 67 - docs/pages/api-docs/accordion.js | 28 +- docs/pages/api-docs/accordion.json | 59 + docs/pages/api-docs/accordion.md | 71 - docs/pages/api-docs/alert-title.js | 28 +- docs/pages/api-docs/alert-title.json | 20 + docs/pages/api-docs/alert-title.md | 55 - docs/pages/api-docs/alert.js | 28 +- docs/pages/api-docs/alert.json | 136 ++ docs/pages/api-docs/alert.md | 87 - docs/pages/api-docs/app-bar.js | 28 +- docs/pages/api-docs/app-bar.json | 74 + docs/pages/api-docs/app-bar.md | 72 - docs/pages/api-docs/autocomplete.js | 15 - docs/pages/api-docs/autocomplete.md | 135 -- docs/pages/api-docs/avatar-group.js | 28 +- docs/pages/api-docs/avatar-group.json | 66 + docs/pages/api-docs/avatar-group.md | 59 - docs/pages/api-docs/avatar.js | 28 +- docs/pages/api-docs/avatar.json | 57 + docs/pages/api-docs/avatar.md | 68 - docs/pages/api-docs/backdrop.js | 28 +- docs/pages/api-docs/backdrop.json | 44 + docs/pages/api-docs/backdrop.md | 64 - docs/pages/api-docs/badge.js | 28 +- docs/pages/api-docs/badge.json | 146 ++ docs/pages/api-docs/badge.md | 80 - .../api-docs/bottom-navigation-action.js | 28 +- .../api-docs/bottom-navigation-action.json | 34 + .../api-docs/bottom-navigation-action.md | 68 - docs/pages/api-docs/bottom-navigation.js | 28 +- docs/pages/api-docs/bottom-navigation.json | 33 + docs/pages/api-docs/bottom-navigation.md | 59 - docs/pages/api-docs/breadcrumbs.js | 28 +- docs/pages/api-docs/breadcrumbs.json | 60 + docs/pages/api-docs/breadcrumbs.md | 64 - docs/pages/api-docs/button-base.js | 28 +- docs/pages/api-docs/button-base.json | 101 ++ docs/pages/api-docs/button-base.md | 69 - docs/pages/api-docs/button-group.js | 28 +- docs/pages/api-docs/button-group.json | 166 ++ docs/pages/api-docs/button-group.md | 90 - docs/pages/api-docs/button.js | 28 +- docs/pages/api-docs/button.json | 181 ++ docs/pages/api-docs/button.md | 101 -- docs/pages/api-docs/card-action-area.js | 28 +- docs/pages/api-docs/card-action-area.json | 29 + docs/pages/api-docs/card-action-area.md | 62 - docs/pages/api-docs/card-actions.js | 28 +- docs/pages/api-docs/card-actions.json | 26 + docs/pages/api-docs/card-actions.md | 57 - docs/pages/api-docs/card-content.js | 28 +- docs/pages/api-docs/card-content.json | 25 + docs/pages/api-docs/card-content.md | 56 - docs/pages/api-docs/card-header.js | 28 +- docs/pages/api-docs/card-header.json | 44 + docs/pages/api-docs/card-header.md | 67 - docs/pages/api-docs/card-media.js | 28 +- docs/pages/api-docs/card-media.json | 38 + docs/pages/api-docs/card-media.md | 60 - docs/pages/api-docs/card.js | 28 +- docs/pages/api-docs/card.json | 26 + docs/pages/api-docs/card.md | 61 - docs/pages/api-docs/checkbox.js | 28 +- docs/pages/api-docs/checkbox.json | 83 + docs/pages/api-docs/checkbox.md | 80 - docs/pages/api-docs/chip.js | 28 +- docs/pages/api-docs/chip.json | 145 ++ docs/pages/api-docs/chip.md | 97 -- docs/pages/api-docs/circular-progress.js | 28 +- docs/pages/api-docs/circular-progress.json | 94 + docs/pages/api-docs/circular-progress.md | 73 - docs/pages/api-docs/click-away-listener.js | 28 +- docs/pages/api-docs/click-away-listener.json | 49 + docs/pages/api-docs/click-away-listener.md | 43 - docs/pages/api-docs/collapse.js | 28 +- docs/pages/api-docs/collapse.json | 81 + docs/pages/api-docs/collapse.md | 74 - docs/pages/api-docs/container.js | 28 +- docs/pages/api-docs/container.json | 71 + docs/pages/api-docs/container.md | 65 - docs/pages/api-docs/css-baseline.js | 28 +- docs/pages/api-docs/css-baseline.json | 17 + docs/pages/api-docs/css-baseline.md | 39 - docs/pages/api-docs/dialog-actions.js | 28 +- docs/pages/api-docs/dialog-actions.json | 26 + docs/pages/api-docs/dialog-actions.md | 57 - docs/pages/api-docs/dialog-content-text.js | 28 +- docs/pages/api-docs/dialog-content-text.json | 19 + docs/pages/api-docs/dialog-content-text.md | 60 - docs/pages/api-docs/dialog-content.js | 28 +- docs/pages/api-docs/dialog-content.json | 26 + docs/pages/api-docs/dialog-content.md | 57 - docs/pages/api-docs/dialog-title.js | 28 +- docs/pages/api-docs/dialog-title.json | 26 + docs/pages/api-docs/dialog-title.md | 56 - docs/pages/api-docs/dialog.js | 28 +- docs/pages/api-docs/dialog.json | 154 ++ docs/pages/api-docs/dialog.md | 91 - docs/pages/api-docs/divider.js | 28 +- docs/pages/api-docs/divider.json | 123 ++ docs/pages/api-docs/divider.md | 76 - docs/pages/api-docs/drawer.js | 28 +- docs/pages/api-docs/drawer.json | 124 ++ docs/pages/api-docs/drawer.md | 76 - docs/pages/api-docs/fab.js | 28 +- docs/pages/api-docs/fab.json | 113 ++ docs/pages/api-docs/fab.md | 78 - docs/pages/api-docs/fade.js | 28 +- docs/pages/api-docs/fade.json | 48 + docs/pages/api-docs/fade.md | 46 - docs/pages/api-docs/filled-input.js | 28 +- docs/pages/api-docs/filled-input.json | 127 ++ docs/pages/api-docs/filled-input.md | 101 -- docs/pages/api-docs/form-control-label.js | 28 +- docs/pages/api-docs/form-control-label.json | 55 + docs/pages/api-docs/form-control-label.md | 70 - docs/pages/api-docs/form-control.js | 28 +- docs/pages/api-docs/form-control.json | 109 ++ docs/pages/api-docs/form-control.md | 93 - docs/pages/api-docs/form-group.js | 28 +- docs/pages/api-docs/form-group.json | 26 + docs/pages/api-docs/form-group.md | 60 - docs/pages/api-docs/form-helper-text.js | 28 +- docs/pages/api-docs/form-helper-text.json | 63 + docs/pages/api-docs/form-helper-text.md | 70 - docs/pages/api-docs/form-label.js | 28 +- docs/pages/api-docs/form-label.json | 58 + docs/pages/api-docs/form-label.md | 71 - docs/pages/api-docs/grid.js | 28 +- docs/pages/api-docs/grid.json | 379 ++++ docs/pages/api-docs/grid.md | 116 -- docs/pages/api-docs/grow.js | 28 +- docs/pages/api-docs/grow.json | 44 + docs/pages/api-docs/grow.md | 48 - docs/pages/api-docs/hidden.js | 28 +- docs/pages/api-docs/hidden.json | 128 ++ docs/pages/api-docs/hidden.md | 51 - docs/pages/api-docs/icon-button.js | 28 +- docs/pages/api-docs/icon-button.json | 98 ++ docs/pages/api-docs/icon-button.md | 75 - docs/pages/api-docs/icon.js | 28 +- docs/pages/api-docs/icon.json | 75 + docs/pages/api-docs/icon.md | 67 - docs/pages/api-docs/image-list-item-bar.js | 28 +- docs/pages/api-docs/image-list-item-bar.json | 74 + docs/pages/api-docs/image-list-item-bar.md | 70 - docs/pages/api-docs/image-list-item.js | 28 +- docs/pages/api-docs/image-list-item.json | 43 + docs/pages/api-docs/image-list-item.md | 61 - docs/pages/api-docs/image-list.js | 28 +- docs/pages/api-docs/image-list.json | 76 + docs/pages/api-docs/image-list.md | 64 - docs/pages/api-docs/input-adornment.js | 28 +- docs/pages/api-docs/input-adornment.json | 74 + docs/pages/api-docs/input-adornment.md | 66 - docs/pages/api-docs/input-base.js | 28 +- docs/pages/api-docs/input-base.json | 147 ++ docs/pages/api-docs/input-base.md | 100 -- docs/pages/api-docs/input-label.js | 28 +- docs/pages/api-docs/input-label.json | 82 + docs/pages/api-docs/input-label.md | 80 - docs/pages/api-docs/input.js | 28 +- docs/pages/api-docs/input.json | 121 ++ docs/pages/api-docs/input.md | 98 -- docs/pages/api-docs/linear-progress.js | 28 +- docs/pages/api-docs/linear-progress.json | 85 + docs/pages/api-docs/linear-progress.md | 79 - docs/pages/api-docs/link.js | 28 +- docs/pages/api-docs/link.json | 102 ++ docs/pages/api-docs/link.md | 71 - docs/pages/api-docs/list-item-avatar.js | 28 +- docs/pages/api-docs/list-item-avatar.json | 23 + docs/pages/api-docs/list-item-avatar.md | 56 - docs/pages/api-docs/list-item-icon.js | 28 +- docs/pages/api-docs/list-item-icon.json | 23 + docs/pages/api-docs/list-item-icon.md | 56 - .../api-docs/list-item-secondary-action.js | 28 +- .../api-docs/list-item-secondary-action.json | 23 + .../api-docs/list-item-secondary-action.md | 56 - docs/pages/api-docs/list-item-text.js | 28 +- docs/pages/api-docs/list-item-text.json | 43 + docs/pages/api-docs/list-item-text.md | 66 - docs/pages/api-docs/list-item.js | 28 +- docs/pages/api-docs/list-item.json | 122 ++ docs/pages/api-docs/list-item.md | 77 - docs/pages/api-docs/list-subheader.js | 28 +- docs/pages/api-docs/list-subheader.json | 63 + docs/pages/api-docs/list-subheader.md | 65 - docs/pages/api-docs/list.js | 28 +- docs/pages/api-docs/list.json | 43 + docs/pages/api-docs/list.md | 63 - docs/pages/api-docs/loading-button.js | 28 +- docs/pages/api-docs/loading-button.json | 70 + docs/pages/api-docs/loading-button.md | 72 - docs/pages/api-docs/menu-item.js | 28 +- docs/pages/api-docs/menu-item.json | 52 + docs/pages/api-docs/menu-item.md | 67 - docs/pages/api-docs/menu-list.js | 28 +- docs/pages/api-docs/menu-list.json | 51 + docs/pages/api-docs/menu-list.md | 51 - docs/pages/api-docs/menu.js | 28 +- docs/pages/api-docs/menu.json | 91 + docs/pages/api-docs/menu.md | 72 - docs/pages/api-docs/mobile-stepper.js | 28 +- docs/pages/api-docs/mobile-stepper.json | 73 + docs/pages/api-docs/mobile-stepper.md | 73 - docs/pages/api-docs/modal.js | 28 +- docs/pages/api-docs/modal.json | 94 + docs/pages/api-docs/modal.md | 65 - docs/pages/api-docs/native-select.js | 28 +- docs/pages/api-docs/native-select.json | 69 + docs/pages/api-docs/native-select.md | 76 - docs/pages/api-docs/no-ssr.js | 28 +- docs/pages/api-docs/no-ssr.json | 24 + docs/pages/api-docs/no-ssr.md | 45 - docs/pages/api-docs/outlined-input.js | 28 +- docs/pages/api-docs/outlined-input.json | 130 ++ docs/pages/api-docs/outlined-input.md | 101 -- docs/pages/api-docs/pagination-item.js | 28 +- docs/pages/api-docs/pagination-item.json | 141 ++ docs/pages/api-docs/pagination-item.md | 78 - docs/pages/api-docs/pagination.js | 28 +- docs/pages/api-docs/pagination.json | 150 ++ docs/pages/api-docs/pagination.md | 74 - docs/pages/api-docs/paper.js | 28 +- docs/pages/api-docs/paper.json | 115 ++ docs/pages/api-docs/paper.md | 88 - docs/pages/api-docs/popover.js | 28 +- docs/pages/api-docs/popover.json | 202 +++ docs/pages/api-docs/popover.md | 78 - docs/pages/api-docs/popper.js | 15 - docs/pages/api-docs/popper.md | 50 - docs/pages/api-docs/portal.js | 28 +- docs/pages/api-docs/portal.json | 25 + docs/pages/api-docs/portal.md | 40 - docs/pages/api-docs/radio-group.js | 28 +- docs/pages/api-docs/radio-group.json | 27 + docs/pages/api-docs/radio-group.md | 47 - docs/pages/api-docs/radio.js | 28 +- docs/pages/api-docs/radio.json | 61 + docs/pages/api-docs/radio.md | 77 - docs/pages/api-docs/rating.js | 28 +- docs/pages/api-docs/rating.json | 145 ++ docs/pages/api-docs/rating.md | 84 - docs/pages/api-docs/scoped-css-baseline.js | 28 +- docs/pages/api-docs/scoped-css-baseline.json | 20 + docs/pages/api-docs/scoped-css-baseline.md | 55 - docs/pages/api-docs/select.js | 28 +- docs/pages/api-docs/select.json | 106 ++ docs/pages/api-docs/select.md | 91 - docs/pages/api-docs/skeleton.js | 28 +- docs/pages/api-docs/skeleton.json | 86 + docs/pages/api-docs/skeleton.md | 68 - docs/pages/api-docs/slide.js | 28 +- docs/pages/api-docs/slide.json | 62 + docs/pages/api-docs/slide.md | 48 - docs/pages/api-docs/slider-styled.js | 28 +- docs/pages/api-docs/slider-styled.json | 124 ++ docs/pages/api-docs/slider-styled.md | 61 - docs/pages/api-docs/slider-unstyled.js | 28 +- docs/pages/api-docs/slider-unstyled.json | 190 ++ docs/pages/api-docs/slider-unstyled.md | 62 - docs/pages/api-docs/slider.js | 28 +- docs/pages/api-docs/slider.json | 221 +++ docs/pages/api-docs/slider.md | 97 -- docs/pages/api-docs/snackbar-content.js | 28 +- docs/pages/api-docs/snackbar-content.json | 31 + docs/pages/api-docs/snackbar-content.md | 64 - docs/pages/api-docs/snackbar.js | 28 +- docs/pages/api-docs/snackbar.json | 121 ++ docs/pages/api-docs/snackbar.md | 75 - docs/pages/api-docs/speed-dial-action.js | 15 - docs/pages/api-docs/speed-dial-action.md | 74 - docs/pages/api-docs/speed-dial-icon.js | 28 +- docs/pages/api-docs/speed-dial-icon.json | 29 + docs/pages/api-docs/speed-dial-icon.md | 61 - docs/pages/api-docs/speed-dial.js | 28 +- docs/pages/api-docs/speed-dial.json | 106 ++ docs/pages/api-docs/speed-dial.md | 74 - docs/pages/api-docs/step-button.js | 28 +- docs/pages/api-docs/step-button.json | 27 + docs/pages/api-docs/step-button.md | 65 - docs/pages/api-docs/step-connector.js | 28 +- docs/pages/api-docs/step-connector.json | 41 + docs/pages/api-docs/step-connector.md | 63 - docs/pages/api-docs/step-content.js | 28 +- docs/pages/api-docs/step-content.json | 51 + docs/pages/api-docs/step-content.md | 60 - docs/pages/api-docs/step-icon.js | 28 +- docs/pages/api-docs/step-icon.json | 44 + docs/pages/api-docs/step-icon.md | 62 - docs/pages/api-docs/step-label.js | 28 +- docs/pages/api-docs/step-label.json | 54 + docs/pages/api-docs/step-label.md | 70 - docs/pages/api-docs/step.js | 28 +- docs/pages/api-docs/step.json | 37 + docs/pages/api-docs/step.md | 65 - docs/pages/api-docs/stepper.js | 28 +- docs/pages/api-docs/stepper.json | 61 + docs/pages/api-docs/stepper.md | 63 - docs/pages/api-docs/svg-icon.js | 28 +- docs/pages/api-docs/svg-icon.json | 84 + docs/pages/api-docs/svg-icon.md | 71 - docs/pages/api-docs/swipeable-drawer.js | 28 +- docs/pages/api-docs/swipeable-drawer.json | 139 ++ docs/pages/api-docs/swipeable-drawer.md | 54 - docs/pages/api-docs/switch.js | 28 +- docs/pages/api-docs/switch.json | 95 + docs/pages/api-docs/switch.md | 85 - docs/pages/api-docs/tab-context.js | 28 +- docs/pages/api-docs/tab-context.json | 13 + docs/pages/api-docs/tab-context.md | 39 - docs/pages/api-docs/tab-list.js | 28 +- docs/pages/api-docs/tab-list.json | 13 + docs/pages/api-docs/tab-list.md | 43 - docs/pages/api-docs/tab-panel.js | 28 +- docs/pages/api-docs/tab-panel.json | 21 + docs/pages/api-docs/tab-panel.md | 56 - docs/pages/api-docs/tab-scroll-button.js | 28 +- docs/pages/api-docs/tab-scroll-button.json | 45 + docs/pages/api-docs/tab-scroll-button.md | 60 - docs/pages/api-docs/tab.js | 28 +- docs/pages/api-docs/tab.json | 70 + docs/pages/api-docs/tab.md | 76 - docs/pages/api-docs/table-body.js | 28 +- docs/pages/api-docs/table-body.json | 25 + docs/pages/api-docs/table-body.md | 56 - docs/pages/api-docs/table-cell.js | 28 +- docs/pages/api-docs/table-cell.json | 106 ++ docs/pages/api-docs/table-cell.md | 74 - docs/pages/api-docs/table-container.js | 28 +- docs/pages/api-docs/table-container.json | 25 + docs/pages/api-docs/table-container.md | 56 - docs/pages/api-docs/table-footer.js | 28 +- docs/pages/api-docs/table-footer.json | 25 + docs/pages/api-docs/table-footer.md | 56 - docs/pages/api-docs/table-head.js | 28 +- docs/pages/api-docs/table-head.json | 25 + docs/pages/api-docs/table-head.md | 56 - docs/pages/api-docs/table-pagination.js | 28 +- docs/pages/api-docs/table-pagination.json | 133 ++ docs/pages/api-docs/table-pagination.md | 84 - docs/pages/api-docs/table-row.js | 28 +- docs/pages/api-docs/table-row.json | 43 + docs/pages/api-docs/table-row.md | 63 - docs/pages/api-docs/table-sort-label.js | 28 +- docs/pages/api-docs/table-sort-label.json | 56 + docs/pages/api-docs/table-sort-label.md | 68 - docs/pages/api-docs/table.js | 28 +- docs/pages/api-docs/table.json | 56 + docs/pages/api-docs/table.md | 60 - docs/pages/api-docs/tabs.js | 28 +- docs/pages/api-docs/tabs.json | 153 ++ docs/pages/api-docs/tabs.md | 85 - docs/pages/api-docs/text-field.js | 28 +- docs/pages/api-docs/text-field.json | 138 ++ docs/pages/api-docs/text-field.md | 120 -- docs/pages/api-docs/textarea-autosize.js | 28 +- docs/pages/api-docs/textarea-autosize.json | 38 + docs/pages/api-docs/textarea-autosize.md | 39 - docs/pages/api-docs/theme-provider.js | 28 +- docs/pages/api-docs/theme-provider.json | 10 + docs/pages/api-docs/theme-provider.md | 33 - docs/pages/api-docs/timeline-connector.js | 28 +- docs/pages/api-docs/timeline-connector.json | 20 + docs/pages/api-docs/timeline-connector.md | 55 - docs/pages/api-docs/timeline-content.js | 28 +- docs/pages/api-docs/timeline-content.json | 23 + docs/pages/api-docs/timeline-content.md | 61 - docs/pages/api-docs/timeline-dot.js | 28 +- docs/pages/api-docs/timeline-dot.json | 72 + docs/pages/api-docs/timeline-dot.md | 65 - docs/pages/api-docs/timeline-item.js | 28 +- docs/pages/api-docs/timeline-item.json | 36 + docs/pages/api-docs/timeline-item.md | 61 - .../api-docs/timeline-opposite-content.js | 28 +- .../api-docs/timeline-opposite-content.json | 23 + .../api-docs/timeline-opposite-content.md | 61 - docs/pages/api-docs/timeline-separator.js | 28 +- docs/pages/api-docs/timeline-separator.json | 20 + docs/pages/api-docs/timeline-separator.md | 55 - docs/pages/api-docs/timeline.js | 28 +- docs/pages/api-docs/timeline.json | 38 + docs/pages/api-docs/timeline.md | 59 - docs/pages/api-docs/toggle-button-group.js | 28 +- docs/pages/api-docs/toggle-button-group.json | 59 + docs/pages/api-docs/toggle-button-group.md | 64 - docs/pages/api-docs/toggle-button.js | 28 +- docs/pages/api-docs/toggle-button.json | 57 + docs/pages/api-docs/toggle-button.md | 71 - docs/pages/api-docs/toolbar.js | 28 +- docs/pages/api-docs/toolbar.json | 54 + docs/pages/api-docs/toolbar.md | 61 - docs/pages/api-docs/tooltip.js | 15 - docs/pages/api-docs/tooltip.md | 87 - docs/pages/api-docs/tree-item.js | 28 +- docs/pages/api-docs/tree-item.json | 65 + docs/pages/api-docs/tree-item.md | 75 - docs/pages/api-docs/tree-view.js | 28 +- docs/pages/api-docs/tree-view.json | 72 + docs/pages/api-docs/tree-view.md | 70 - docs/pages/api-docs/typography.js | 28 +- docs/pages/api-docs/typography.json | 187 ++ docs/pages/api-docs/typography.md | 94 - docs/pages/api-docs/unstable-trap-focus.js | 28 +- docs/pages/api-docs/unstable-trap-focus.json | 33 + docs/pages/api-docs/unstable-trap-focus.md | 43 - docs/pages/api-docs/zoom.js | 28 +- docs/pages/api-docs/zoom.json | 48 + docs/pages/api-docs/zoom.md | 47 - docs/pages/components/box.js | 9 +- docs/scripts/buildApi.ts | 244 ++- docs/src/modules/components/ApiDocs.js | 316 ++++ docs/src/modules/components/MarkdownDocs.js | 75 +- .../modules/components/MarkdownDocsBody.js | 90 + docs/src/modules/redux/optionsReducer.js | 2 +- docs/src/modules/utils/generateMarkdown.ts | 480 +----- docs/src/modules/utils/mapApiTranslations.js | 13 + docs/src/modules/utils/mapTranslations.js | 4 +- docs/src/modules/utils/parseMarkdown.js | 11 +- docs/translations/class-conditions-zh.json | 734 ++++++++ docs/translations/class-conditions.json | 711 ++++++++ docs/translations/class-descriptions-zh.json | 1119 ++++++++++++ docs/translations/class-descriptions.json | 1068 ++++++++++++ docs/translations/prop-descriptions-zh.json | 1532 +++++++++++++++++ docs/translations/prop-descriptions.json | 1422 +++++++++++++++ docs/translations/translations-zh.json | 12 + docs/translations/translations.json | 21 + .../src/LoadingButton/LoadingButton.d.ts | 9 - .../src/TabPanel/TabPanel.d.ts | 1 - .../src/Timeline/Timeline.d.ts | 4 - .../TimelineConnector/TimelineConnector.d.ts | 1 - .../src/TimelineContent/TimelineContent.d.ts | 2 - .../src/TimelineDot/TimelineDot.d.ts | 9 - .../src/TimelineItem/TimelineItem.d.ts | 7 - .../src/TimelineItem/TimelineItem.js | 2 +- .../TimelineOppositeContent.d.ts | 2 - .../TimelineSeparator/TimelineSeparator.d.ts | 1 - .../src/TreeItem/TreeItem.d.ts | 9 - .../src/TreeView/TreeView.d.ts | 1 - .../material-ui/src/Accordion/Accordion.d.ts | 5 - .../AccordionActions/AccordionActions.d.ts | 2 - .../AccordionDetails/AccordionDetails.d.ts | 1 - .../AccordionSummary/AccordionSummary.d.ts | 6 - packages/material-ui/src/Alert/Alert.d.ts | 19 - .../src/AlertTitle/AlertTitle.d.ts | 1 - packages/material-ui/src/AppBar/AppBar.d.ts | 11 - .../src/Autocomplete/Autocomplete.d.ts | 24 - packages/material-ui/src/Avatar/Avatar.d.ts | 7 - .../src/AvatarGroup/AvatarGroup.d.ts | 2 - .../material-ui/src/Backdrop/Backdrop.d.ts | 2 - packages/material-ui/src/Badge/Badge.d.ts | 16 - .../BottomNavigation/BottomNavigation.d.ts | 1 - .../BottomNavigationAction.d.ts | 5 - .../src/Breadcrumbs/Breadcrumbs.d.ts | 4 - packages/material-ui/src/Button/Button.d.ts | 29 - .../src/ButtonBase/ButtonBase.d.ts | 3 - .../src/ButtonGroup/ButtonGroup.d.ts | 26 - packages/material-ui/src/Card/Card.d.ts | 1 - .../src/CardActionArea/CardActionArea.d.ts | 3 - .../src/CardActions/CardActions.d.ts | 2 - .../src/CardContent/CardContent.d.ts | 1 - .../src/CardHeader/CardHeader.d.ts | 6 - .../material-ui/src/CardMedia/CardMedia.d.ts | 3 - .../material-ui/src/Checkbox/Checkbox.d.ts | 6 - packages/material-ui/src/Chip/Chip.d.ts | 32 - .../CircularProgress/CircularProgress.d.ts | 10 - .../material-ui/src/Collapse/Collapse.d.ts | 6 - .../material-ui/src/Container/Container.d.ts | 8 - packages/material-ui/src/Dialog/Dialog.d.ts | 15 - .../src/DialogActions/DialogActions.d.ts | 2 - .../src/DialogContent/DialogContent.d.ts | 2 - .../DialogContentText/DialogContentText.d.ts | 1 - .../src/DialogTitle/DialogTitle.d.ts | 1 - packages/material-ui/src/Divider/Divider.d.ts | 14 - packages/material-ui/src/Drawer/Drawer.d.ts | 12 - packages/material-ui/src/Fab/Fab.d.ts | 11 - .../src/FilledInput/FilledInput.d.ts | 17 - .../src/FormControl/FormControl.d.ts | 12 +- .../FormControlLabel/FormControlLabel.d.ts | 6 - .../material-ui/src/FormGroup/FormGroup.d.ts | 2 - .../src/FormHelperText/FormHelperText.d.ts | 8 - .../material-ui/src/FormLabel/FormLabel.d.ts | 8 - packages/material-ui/src/Grid/Grid.d.ts | 4 - packages/material-ui/src/Icon/Icon.d.ts | 9 - .../src/IconButton/IconButton.d.ts | 9 - .../material-ui/src/ImageList/ImageList.d.ts | 5 - .../ImageListItemBar/ImageListItemBar.d.ts | 12 - packages/material-ui/src/Input/Input.d.ts | 14 - .../src/InputAdornment/InputAdornment.d.ts | 7 - .../material-ui/src/InputBase/InputBase.d.ts | 19 - .../src/InputLabel/InputLabel.d.ts | 12 - .../src/LinearProgress/LinearProgress.d.ts | 18 - packages/material-ui/src/Link/Link.d.ts | 6 - packages/material-ui/src/List/List.d.ts | 4 - .../material-ui/src/ListItem/ListItem.d.ts | 11 - .../src/ListItemAvatar/ListItemAvatar.d.ts | 2 - .../src/ListItemIcon/ListItemIcon.d.ts | 2 - .../ListItemSecondaryAction.d.ts | 2 - .../src/ListItemText/ListItemText.d.ts | 6 - .../src/ListSubheader/ListSubheader.d.ts | 6 - packages/material-ui/src/Menu/Menu.d.ts | 2 - .../material-ui/src/MenuItem/MenuItem.d.ts | 4 - .../material-ui/src/MenuList/MenuList.d.ts | 2 +- .../src/MobileStepper/MobileStepper.d.ts | 8 - packages/material-ui/src/Modal/Modal.d.ts | 8 +- .../src/NativeSelect/NativeSelect.d.ts | 11 - packages/material-ui/src/NoSsr/NoSsr.d.ts | 8 +- .../src/OutlinedInput/OutlinedInput.d.ts | 15 - .../src/Pagination/Pagination.d.ts | 4 - .../src/PaginationItem/PaginationItem.d.ts | 16 - packages/material-ui/src/Paper/Paper.d.ts | 4 - packages/material-ui/src/Popover/Popover.d.ts | 2 - packages/material-ui/src/Radio/Radio.d.ts | 5 - packages/material-ui/src/Rating/Rating.d.ts | 16 - .../ScopedCssBaseline/ScopedCssBaseline.d.ts | 1 - packages/material-ui/src/Select/Select.d.ts | 11 - .../material-ui/src/Skeleton/Skeleton.d.ts | 9 - packages/material-ui/src/Slider/Slider.d.ts | 20 - .../material-ui/src/Snackbar/Snackbar.d.ts | 7 - .../src/SnackbarContent/SnackbarContent.d.ts | 3 - .../material-ui/src/SpeedDial/SpeedDial.d.ts | 8 - .../src/SpeedDialAction/SpeedDialAction.d.ts | 7 - .../src/SpeedDialIcon/SpeedDialIcon.d.ts | 6 - packages/material-ui/src/Step/Step.d.ts | 5 - .../src/StepButton/StepButton.d.ts | 4 - .../src/StepConnector/StepConnector.d.ts | 10 - .../src/StepContent/StepContent.d.ts | 3 - .../material-ui/src/StepIcon/StepIcon.d.ts | 5 - .../material-ui/src/StepLabel/StepLabel.d.ts | 11 - packages/material-ui/src/Stepper/Stepper.d.ts | 4 - packages/material-ui/src/SvgIcon/SvgIcon.d.ts | 9 - packages/material-ui/src/Switch/Switch.d.ts | 12 - packages/material-ui/src/Tab/Tab.d.ts | 10 - .../src/TabScrollButton/TabScrollButton.d.ts | 3 - packages/material-ui/src/Table/Table.d.ts | 2 - .../material-ui/src/TableBody/TableBody.d.ts | 1 - .../material-ui/src/TableCell/TableCell.d.ts | 12 - .../src/TableContainer/TableContainer.d.ts | 1 - .../src/TableFooter/TableFooter.d.ts | 1 - .../material-ui/src/TableHead/TableHead.d.ts | 1 - .../src/TablePagination/TablePagination.d.ts | 10 - .../material-ui/src/TableRow/TableRow.d.ts | 5 - .../src/TableSortLabel/TableSortLabel.d.ts | 5 - packages/material-ui/src/Tabs/Tabs.d.ts | 13 - .../material-ui/src/TextField/TextField.d.ts | 17 +- .../src/ToggleButton/ToggleButton.d.ts | 6 - .../ToggleButtonGroup/ToggleButtonGroup.d.ts | 5 - packages/material-ui/src/Toolbar/Toolbar.d.ts | 4 - packages/material-ui/src/Tooltip/Tooltip.d.ts | 11 - .../src/Typography/Typography.d.ts | 30 - 560 files changed, 19761 insertions(+), 12505 deletions(-) create mode 100644 docs/pages/api-docs/accordion-actions.json delete mode 100644 docs/pages/api-docs/accordion-actions.md create mode 100644 docs/pages/api-docs/accordion-details.json delete mode 100644 docs/pages/api-docs/accordion-details.md create mode 100644 docs/pages/api-docs/accordion-summary.json delete mode 100644 docs/pages/api-docs/accordion-summary.md create mode 100644 docs/pages/api-docs/accordion.json delete mode 100644 docs/pages/api-docs/accordion.md create mode 100644 docs/pages/api-docs/alert-title.json delete mode 100644 docs/pages/api-docs/alert-title.md create mode 100644 docs/pages/api-docs/alert.json delete mode 100644 docs/pages/api-docs/alert.md create mode 100644 docs/pages/api-docs/app-bar.json delete mode 100644 docs/pages/api-docs/app-bar.md delete mode 100644 docs/pages/api-docs/autocomplete.js delete mode 100644 docs/pages/api-docs/autocomplete.md create mode 100644 docs/pages/api-docs/avatar-group.json delete mode 100644 docs/pages/api-docs/avatar-group.md create mode 100644 docs/pages/api-docs/avatar.json delete mode 100644 docs/pages/api-docs/avatar.md create mode 100644 docs/pages/api-docs/backdrop.json delete mode 100644 docs/pages/api-docs/backdrop.md create mode 100644 docs/pages/api-docs/badge.json delete mode 100644 docs/pages/api-docs/badge.md create mode 100644 docs/pages/api-docs/bottom-navigation-action.json delete mode 100644 docs/pages/api-docs/bottom-navigation-action.md create mode 100644 docs/pages/api-docs/bottom-navigation.json delete mode 100644 docs/pages/api-docs/bottom-navigation.md create mode 100644 docs/pages/api-docs/breadcrumbs.json delete mode 100644 docs/pages/api-docs/breadcrumbs.md create mode 100644 docs/pages/api-docs/button-base.json delete mode 100644 docs/pages/api-docs/button-base.md create mode 100644 docs/pages/api-docs/button-group.json delete mode 100644 docs/pages/api-docs/button-group.md create mode 100644 docs/pages/api-docs/button.json delete mode 100644 docs/pages/api-docs/button.md create mode 100644 docs/pages/api-docs/card-action-area.json delete mode 100644 docs/pages/api-docs/card-action-area.md create mode 100644 docs/pages/api-docs/card-actions.json delete mode 100644 docs/pages/api-docs/card-actions.md create mode 100644 docs/pages/api-docs/card-content.json delete mode 100644 docs/pages/api-docs/card-content.md create mode 100644 docs/pages/api-docs/card-header.json delete mode 100644 docs/pages/api-docs/card-header.md create mode 100644 docs/pages/api-docs/card-media.json delete mode 100644 docs/pages/api-docs/card-media.md create mode 100644 docs/pages/api-docs/card.json delete mode 100644 docs/pages/api-docs/card.md create mode 100644 docs/pages/api-docs/checkbox.json delete mode 100644 docs/pages/api-docs/checkbox.md create mode 100644 docs/pages/api-docs/chip.json delete mode 100644 docs/pages/api-docs/chip.md create mode 100644 docs/pages/api-docs/circular-progress.json delete mode 100644 docs/pages/api-docs/circular-progress.md create mode 100644 docs/pages/api-docs/click-away-listener.json delete mode 100644 docs/pages/api-docs/click-away-listener.md create mode 100644 docs/pages/api-docs/collapse.json delete mode 100644 docs/pages/api-docs/collapse.md create mode 100644 docs/pages/api-docs/container.json delete mode 100644 docs/pages/api-docs/container.md create mode 100644 docs/pages/api-docs/css-baseline.json delete mode 100644 docs/pages/api-docs/css-baseline.md create mode 100644 docs/pages/api-docs/dialog-actions.json delete mode 100644 docs/pages/api-docs/dialog-actions.md create mode 100644 docs/pages/api-docs/dialog-content-text.json delete mode 100644 docs/pages/api-docs/dialog-content-text.md create mode 100644 docs/pages/api-docs/dialog-content.json delete mode 100644 docs/pages/api-docs/dialog-content.md create mode 100644 docs/pages/api-docs/dialog-title.json delete mode 100644 docs/pages/api-docs/dialog-title.md create mode 100644 docs/pages/api-docs/dialog.json delete mode 100644 docs/pages/api-docs/dialog.md create mode 100644 docs/pages/api-docs/divider.json delete mode 100644 docs/pages/api-docs/divider.md create mode 100644 docs/pages/api-docs/drawer.json delete mode 100644 docs/pages/api-docs/drawer.md create mode 100644 docs/pages/api-docs/fab.json delete mode 100644 docs/pages/api-docs/fab.md create mode 100644 docs/pages/api-docs/fade.json delete mode 100644 docs/pages/api-docs/fade.md create mode 100644 docs/pages/api-docs/filled-input.json delete mode 100644 docs/pages/api-docs/filled-input.md create mode 100644 docs/pages/api-docs/form-control-label.json delete mode 100644 docs/pages/api-docs/form-control-label.md create mode 100644 docs/pages/api-docs/form-control.json delete mode 100644 docs/pages/api-docs/form-control.md create mode 100644 docs/pages/api-docs/form-group.json delete mode 100644 docs/pages/api-docs/form-group.md create mode 100644 docs/pages/api-docs/form-helper-text.json delete mode 100644 docs/pages/api-docs/form-helper-text.md create mode 100644 docs/pages/api-docs/form-label.json delete mode 100644 docs/pages/api-docs/form-label.md create mode 100644 docs/pages/api-docs/grid.json delete mode 100644 docs/pages/api-docs/grid.md create mode 100644 docs/pages/api-docs/grow.json delete mode 100644 docs/pages/api-docs/grow.md create mode 100644 docs/pages/api-docs/hidden.json delete mode 100644 docs/pages/api-docs/hidden.md create mode 100644 docs/pages/api-docs/icon-button.json delete mode 100644 docs/pages/api-docs/icon-button.md create mode 100644 docs/pages/api-docs/icon.json delete mode 100644 docs/pages/api-docs/icon.md create mode 100644 docs/pages/api-docs/image-list-item-bar.json delete mode 100644 docs/pages/api-docs/image-list-item-bar.md create mode 100644 docs/pages/api-docs/image-list-item.json delete mode 100644 docs/pages/api-docs/image-list-item.md create mode 100644 docs/pages/api-docs/image-list.json delete mode 100644 docs/pages/api-docs/image-list.md create mode 100644 docs/pages/api-docs/input-adornment.json delete mode 100644 docs/pages/api-docs/input-adornment.md create mode 100644 docs/pages/api-docs/input-base.json delete mode 100644 docs/pages/api-docs/input-base.md create mode 100644 docs/pages/api-docs/input-label.json delete mode 100644 docs/pages/api-docs/input-label.md create mode 100644 docs/pages/api-docs/input.json delete mode 100644 docs/pages/api-docs/input.md create mode 100644 docs/pages/api-docs/linear-progress.json delete mode 100644 docs/pages/api-docs/linear-progress.md create mode 100644 docs/pages/api-docs/link.json delete mode 100644 docs/pages/api-docs/link.md create mode 100644 docs/pages/api-docs/list-item-avatar.json delete mode 100644 docs/pages/api-docs/list-item-avatar.md create mode 100644 docs/pages/api-docs/list-item-icon.json delete mode 100644 docs/pages/api-docs/list-item-icon.md create mode 100644 docs/pages/api-docs/list-item-secondary-action.json delete mode 100644 docs/pages/api-docs/list-item-secondary-action.md create mode 100644 docs/pages/api-docs/list-item-text.json delete mode 100644 docs/pages/api-docs/list-item-text.md create mode 100644 docs/pages/api-docs/list-item.json delete mode 100644 docs/pages/api-docs/list-item.md create mode 100644 docs/pages/api-docs/list-subheader.json delete mode 100644 docs/pages/api-docs/list-subheader.md create mode 100644 docs/pages/api-docs/list.json delete mode 100644 docs/pages/api-docs/list.md create mode 100644 docs/pages/api-docs/loading-button.json delete mode 100644 docs/pages/api-docs/loading-button.md create mode 100644 docs/pages/api-docs/menu-item.json delete mode 100644 docs/pages/api-docs/menu-item.md create mode 100644 docs/pages/api-docs/menu-list.json delete mode 100644 docs/pages/api-docs/menu-list.md create mode 100644 docs/pages/api-docs/menu.json delete mode 100644 docs/pages/api-docs/menu.md create mode 100644 docs/pages/api-docs/mobile-stepper.json delete mode 100644 docs/pages/api-docs/mobile-stepper.md create mode 100644 docs/pages/api-docs/modal.json delete mode 100644 docs/pages/api-docs/modal.md create mode 100644 docs/pages/api-docs/native-select.json delete mode 100644 docs/pages/api-docs/native-select.md create mode 100644 docs/pages/api-docs/no-ssr.json delete mode 100644 docs/pages/api-docs/no-ssr.md create mode 100644 docs/pages/api-docs/outlined-input.json delete mode 100644 docs/pages/api-docs/outlined-input.md create mode 100644 docs/pages/api-docs/pagination-item.json delete mode 100644 docs/pages/api-docs/pagination-item.md create mode 100644 docs/pages/api-docs/pagination.json delete mode 100644 docs/pages/api-docs/pagination.md create mode 100644 docs/pages/api-docs/paper.json delete mode 100644 docs/pages/api-docs/paper.md create mode 100644 docs/pages/api-docs/popover.json delete mode 100644 docs/pages/api-docs/popover.md delete mode 100644 docs/pages/api-docs/popper.js delete mode 100644 docs/pages/api-docs/popper.md create mode 100644 docs/pages/api-docs/portal.json delete mode 100644 docs/pages/api-docs/portal.md create mode 100644 docs/pages/api-docs/radio-group.json delete mode 100644 docs/pages/api-docs/radio-group.md create mode 100644 docs/pages/api-docs/radio.json delete mode 100644 docs/pages/api-docs/radio.md create mode 100644 docs/pages/api-docs/rating.json delete mode 100644 docs/pages/api-docs/rating.md create mode 100644 docs/pages/api-docs/scoped-css-baseline.json delete mode 100644 docs/pages/api-docs/scoped-css-baseline.md create mode 100644 docs/pages/api-docs/select.json delete mode 100644 docs/pages/api-docs/select.md create mode 100644 docs/pages/api-docs/skeleton.json delete mode 100644 docs/pages/api-docs/skeleton.md create mode 100644 docs/pages/api-docs/slide.json delete mode 100644 docs/pages/api-docs/slide.md create mode 100644 docs/pages/api-docs/slider-styled.json delete mode 100644 docs/pages/api-docs/slider-styled.md create mode 100644 docs/pages/api-docs/slider-unstyled.json delete mode 100644 docs/pages/api-docs/slider-unstyled.md create mode 100644 docs/pages/api-docs/slider.json delete mode 100644 docs/pages/api-docs/slider.md create mode 100644 docs/pages/api-docs/snackbar-content.json delete mode 100644 docs/pages/api-docs/snackbar-content.md create mode 100644 docs/pages/api-docs/snackbar.json delete mode 100644 docs/pages/api-docs/snackbar.md delete mode 100644 docs/pages/api-docs/speed-dial-action.js delete mode 100644 docs/pages/api-docs/speed-dial-action.md create mode 100644 docs/pages/api-docs/speed-dial-icon.json delete mode 100644 docs/pages/api-docs/speed-dial-icon.md create mode 100644 docs/pages/api-docs/speed-dial.json delete mode 100644 docs/pages/api-docs/speed-dial.md create mode 100644 docs/pages/api-docs/step-button.json delete mode 100644 docs/pages/api-docs/step-button.md create mode 100644 docs/pages/api-docs/step-connector.json delete mode 100644 docs/pages/api-docs/step-connector.md create mode 100644 docs/pages/api-docs/step-content.json delete mode 100644 docs/pages/api-docs/step-content.md create mode 100644 docs/pages/api-docs/step-icon.json delete mode 100644 docs/pages/api-docs/step-icon.md create mode 100644 docs/pages/api-docs/step-label.json delete mode 100644 docs/pages/api-docs/step-label.md create mode 100644 docs/pages/api-docs/step.json delete mode 100644 docs/pages/api-docs/step.md create mode 100644 docs/pages/api-docs/stepper.json delete mode 100644 docs/pages/api-docs/stepper.md create mode 100644 docs/pages/api-docs/svg-icon.json delete mode 100644 docs/pages/api-docs/svg-icon.md create mode 100644 docs/pages/api-docs/swipeable-drawer.json delete mode 100644 docs/pages/api-docs/swipeable-drawer.md create mode 100644 docs/pages/api-docs/switch.json delete mode 100644 docs/pages/api-docs/switch.md create mode 100644 docs/pages/api-docs/tab-context.json delete mode 100644 docs/pages/api-docs/tab-context.md create mode 100644 docs/pages/api-docs/tab-list.json delete mode 100644 docs/pages/api-docs/tab-list.md create mode 100644 docs/pages/api-docs/tab-panel.json delete mode 100644 docs/pages/api-docs/tab-panel.md create mode 100644 docs/pages/api-docs/tab-scroll-button.json delete mode 100644 docs/pages/api-docs/tab-scroll-button.md create mode 100644 docs/pages/api-docs/tab.json delete mode 100644 docs/pages/api-docs/tab.md create mode 100644 docs/pages/api-docs/table-body.json delete mode 100644 docs/pages/api-docs/table-body.md create mode 100644 docs/pages/api-docs/table-cell.json delete mode 100644 docs/pages/api-docs/table-cell.md create mode 100644 docs/pages/api-docs/table-container.json delete mode 100644 docs/pages/api-docs/table-container.md create mode 100644 docs/pages/api-docs/table-footer.json delete mode 100644 docs/pages/api-docs/table-footer.md create mode 100644 docs/pages/api-docs/table-head.json delete mode 100644 docs/pages/api-docs/table-head.md create mode 100644 docs/pages/api-docs/table-pagination.json delete mode 100644 docs/pages/api-docs/table-pagination.md create mode 100644 docs/pages/api-docs/table-row.json delete mode 100644 docs/pages/api-docs/table-row.md create mode 100644 docs/pages/api-docs/table-sort-label.json delete mode 100644 docs/pages/api-docs/table-sort-label.md create mode 100644 docs/pages/api-docs/table.json delete mode 100644 docs/pages/api-docs/table.md create mode 100644 docs/pages/api-docs/tabs.json delete mode 100644 docs/pages/api-docs/tabs.md create mode 100644 docs/pages/api-docs/text-field.json delete mode 100644 docs/pages/api-docs/text-field.md create mode 100644 docs/pages/api-docs/textarea-autosize.json delete mode 100644 docs/pages/api-docs/textarea-autosize.md create mode 100644 docs/pages/api-docs/theme-provider.json delete mode 100644 docs/pages/api-docs/theme-provider.md create mode 100644 docs/pages/api-docs/timeline-connector.json delete mode 100644 docs/pages/api-docs/timeline-connector.md create mode 100644 docs/pages/api-docs/timeline-content.json delete mode 100644 docs/pages/api-docs/timeline-content.md create mode 100644 docs/pages/api-docs/timeline-dot.json delete mode 100644 docs/pages/api-docs/timeline-dot.md create mode 100644 docs/pages/api-docs/timeline-item.json delete mode 100644 docs/pages/api-docs/timeline-item.md create mode 100644 docs/pages/api-docs/timeline-opposite-content.json delete mode 100644 docs/pages/api-docs/timeline-opposite-content.md create mode 100644 docs/pages/api-docs/timeline-separator.json delete mode 100644 docs/pages/api-docs/timeline-separator.md create mode 100644 docs/pages/api-docs/timeline.json delete mode 100644 docs/pages/api-docs/timeline.md create mode 100644 docs/pages/api-docs/toggle-button-group.json delete mode 100644 docs/pages/api-docs/toggle-button-group.md create mode 100644 docs/pages/api-docs/toggle-button.json delete mode 100644 docs/pages/api-docs/toggle-button.md create mode 100644 docs/pages/api-docs/toolbar.json delete mode 100644 docs/pages/api-docs/toolbar.md delete mode 100644 docs/pages/api-docs/tooltip.js delete mode 100644 docs/pages/api-docs/tooltip.md create mode 100644 docs/pages/api-docs/tree-item.json delete mode 100644 docs/pages/api-docs/tree-item.md create mode 100644 docs/pages/api-docs/tree-view.json delete mode 100644 docs/pages/api-docs/tree-view.md create mode 100644 docs/pages/api-docs/typography.json delete mode 100644 docs/pages/api-docs/typography.md create mode 100644 docs/pages/api-docs/unstable-trap-focus.json delete mode 100644 docs/pages/api-docs/unstable-trap-focus.md create mode 100644 docs/pages/api-docs/zoom.json delete mode 100644 docs/pages/api-docs/zoom.md create mode 100644 docs/src/modules/components/ApiDocs.js create mode 100644 docs/src/modules/components/MarkdownDocsBody.js create mode 100644 docs/src/modules/utils/mapApiTranslations.js create mode 100644 docs/translations/class-conditions-zh.json create mode 100644 docs/translations/class-conditions.json create mode 100644 docs/translations/class-descriptions-zh.json create mode 100644 docs/translations/class-descriptions.json create mode 100644 docs/translations/prop-descriptions-zh.json create mode 100644 docs/translations/prop-descriptions.json diff --git a/docs/pages/api-docs/accordion-actions.js b/docs/pages/api-docs/accordion-actions.js index 90c17442a2c2ae..69875598ebf529 100644 --- a/docs/pages/api-docs/accordion-actions.js +++ b/docs/pages/api-docs/accordion-actions.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './accordion-actions.json'; -const pageFilename = 'api/accordion-actions'; -const requireRaw = require.context('!raw-loader!./', false, /\/accordion-actions\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'AccordionActions'); + const classDescriptions = mapApiTranslations(req2, 'AccordionActions'); + const classConditions = mapApiTranslations(req3, 'AccordionActions'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/accordion-actions.json b/docs/pages/api-docs/accordion-actions.json new file mode 100644 index 00000000000000..23859841b341c8 --- /dev/null +++ b/docs/pages/api-docs/accordion-actions.json @@ -0,0 +1,29 @@ +{ + "name": "AccordionActions", + "filename": "/packages/material-ui/src/AccordionActions/AccordionActions.js", + "description": "", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "disableSpacing": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + } + }, + "spread": true, + "styles": { + "classes": ["root", "spacing"], + "name": "MuiAccordionActions", + "descriptions": {}, + "globalClasses": { + "root": "MuiAccordionActions-root", + "spacing": "MuiAccordionActions-spacing" + } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": null, + "demos": "- [Accordion](/components/accordion/)" +} diff --git a/docs/pages/api-docs/accordion-actions.md b/docs/pages/api-docs/accordion-actions.md deleted file mode 100644 index 67da434ce883f2..00000000000000 --- a/docs/pages/api-docs/accordion-actions.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -filename: /packages/material-ui/src/AccordionActions/AccordionActions.js ---- - - - -# AccordionActions API - -

The API documentation of the AccordionActions React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import AccordionActions from '@material-ui/core/AccordionActions'; -// or -import { AccordionActions } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiAccordionActions` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| disableSpacing | bool | false | If `true`, the actions do not have additional margin. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiAccordionActions-root | Styles applied to the root element. -| spacing | .MuiAccordionActions-spacing | Styles applied to the root element unless `disableSpacing={true}`. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/AccordionActions/AccordionActions.js) for more detail. - -## Demos - -- [Accordion](/components/accordion/) - diff --git a/docs/pages/api-docs/accordion-details.js b/docs/pages/api-docs/accordion-details.js index 8677fef6f37f02..f4a0321024a747 100644 --- a/docs/pages/api-docs/accordion-details.js +++ b/docs/pages/api-docs/accordion-details.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './accordion-details.json'; -const pageFilename = 'api/accordion-details'; -const requireRaw = require.context('!raw-loader!./', false, /\/accordion-details\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'AccordionDetails'); + const classDescriptions = mapApiTranslations(req2, 'AccordionDetails'); + const classConditions = mapApiTranslations(req3, 'AccordionDetails'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/accordion-details.json b/docs/pages/api-docs/accordion-details.json new file mode 100644 index 00000000000000..5ad4e35e27c241 --- /dev/null +++ b/docs/pages/api-docs/accordion-details.json @@ -0,0 +1,20 @@ +{ + "name": "AccordionDetails", + "filename": "/packages/material-ui/src/AccordionDetails/AccordionDetails.js", + "description": "", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" } + }, + "spread": true, + "styles": { + "classes": ["root"], + "name": "MuiAccordionDetails", + "descriptions": {}, + "globalClasses": { "root": "MuiAccordionDetails-root" } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": null, + "demos": "- [Accordion](/components/accordion/)" +} diff --git a/docs/pages/api-docs/accordion-details.md b/docs/pages/api-docs/accordion-details.md deleted file mode 100644 index 861c63aca6ea40..00000000000000 --- a/docs/pages/api-docs/accordion-details.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -filename: /packages/material-ui/src/AccordionDetails/AccordionDetails.js ---- - - - -# AccordionDetails API - -

The API documentation of the AccordionDetails React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import AccordionDetails from '@material-ui/core/AccordionDetails'; -// or -import { AccordionDetails } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiAccordionDetails` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The content of the accordion details. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiAccordionDetails-root | Styles applied to the root element. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/AccordionDetails/AccordionDetails.js) for more detail. - -## Demos - -- [Accordion](/components/accordion/) - diff --git a/docs/pages/api-docs/accordion-summary.js b/docs/pages/api-docs/accordion-summary.js index ab14333f59327e..70e2c4441f6ceb 100644 --- a/docs/pages/api-docs/accordion-summary.js +++ b/docs/pages/api-docs/accordion-summary.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './accordion-summary.json'; -const pageFilename = 'api/accordion-summary'; -const requireRaw = require.context('!raw-loader!./', false, /\/accordion-summary\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'AccordionSummary'); + const classDescriptions = mapApiTranslations(req2, 'AccordionSummary'); + const classConditions = mapApiTranslations(req3, 'AccordionSummary'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/accordion-summary.json b/docs/pages/api-docs/accordion-summary.json new file mode 100644 index 00000000000000..16f5fd78114738 --- /dev/null +++ b/docs/pages/api-docs/accordion-summary.json @@ -0,0 +1,30 @@ +{ + "name": "AccordionSummary", + "filename": "/packages/material-ui/src/AccordionSummary/AccordionSummary.js", + "description": "", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "expandIcon": { "type": { "name": "node" }, "required": false }, + "focusVisibleClassName": { "type": { "name": "string" }, "required": false }, + "onClick": { "type": { "name": "func" }, "required": false, "description": "@ignore" } + }, + "spread": true, + "styles": { + "classes": ["root", "expanded", "focusVisible", "disabled", "content", "expandIconWrapper"], + "name": "MuiAccordionSummary", + "descriptions": {}, + "globalClasses": { + "root": "MuiAccordionSummary-root", + "expanded": "Mui-expanded", + "focusVisible": "Mui-focusVisible", + "disabled": "Mui-disabled", + "content": "MuiAccordionSummary-content", + "expandIconWrapper": "MuiAccordionSummary-expandIconWrapper" + } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" }, + "demos": "- [Accordion](/components/accordion/)" +} diff --git a/docs/pages/api-docs/accordion-summary.md b/docs/pages/api-docs/accordion-summary.md deleted file mode 100644 index e4e11fac21b30f..00000000000000 --- a/docs/pages/api-docs/accordion-summary.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -filename: /packages/material-ui/src/AccordionSummary/AccordionSummary.js ---- - - - -# AccordionSummary API - -

The API documentation of the AccordionSummary React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import AccordionSummary from '@material-ui/core/AccordionSummary'; -// or -import { AccordionSummary } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiAccordionSummary` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The content of the accordion summary. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| expandIcon | node | | The icon to display as the expand indicator. | -| focusVisibleClassName | string | | This prop can help a person know which element has the keyboard focus. The class name will be applied when the element gain the focus through a keyboard interaction. It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo). The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/master/explainer.md). A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components if needed. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element ([ButtonBase](/api/button-base/)). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiAccordionSummary-root | Styles applied to the root element. -| expanded | .Mui-expanded | Pseudo-class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`. -| focusVisible | .Mui-focusVisible | Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. -| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. -| content | .MuiAccordionSummary-content | Styles applied to the children wrapper element. -| expandIconWrapper | .MuiAccordionSummary-expandIconWrapper | Styles applied to the `expandIcon`'s wrapper element. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/AccordionSummary/AccordionSummary.js) for more detail. - -## Inheritance - -The props of the [ButtonBase](/api/button-base/) component are also available. -You can take advantage of this behavior to [target nested components](/guides/api/#spread). - -## Demos - -- [Accordion](/components/accordion/) - diff --git a/docs/pages/api-docs/accordion.js b/docs/pages/api-docs/accordion.js index 90ecdc5be3ab1e..98c88b16b1824c 100644 --- a/docs/pages/api-docs/accordion.js +++ b/docs/pages/api-docs/accordion.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './accordion.json'; -const pageFilename = 'api/accordion'; -const requireRaw = require.context('!raw-loader!./', false, /\/accordion\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'Accordion'); + const classDescriptions = mapApiTranslations(req2, 'Accordion'); + const classConditions = mapApiTranslations(req3, 'Accordion'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/accordion.json b/docs/pages/api-docs/accordion.json new file mode 100644 index 00000000000000..b76d43696ecad2 --- /dev/null +++ b/docs/pages/api-docs/accordion.json @@ -0,0 +1,59 @@ +{ + "name": "Accordion", + "filename": "/packages/material-ui/src/Accordion/Accordion.js", + "description": "", + "props": { + "children": { + "type": { + "name": "custom", + "raw": "chainPropTypes(PropTypes.node.isRequired, (props) => {\n const summary = React.Children.toArray(props.children)[0];\n if (isFragment(summary)) {\n return new Error(\n \"Material-UI: The Accordion doesn't accept a Fragment as a child. \" +\n 'Consider providing an array instead.',\n );\n }\n\n if (!React.isValidElement(summary)) {\n return new Error('Material-UI: Expected the first child of Accordion to be a valid element.');\n }\n\n return null;\n})" + }, + "required": false + }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "defaultExpanded": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "disabled": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "expanded": { "type": { "name": "bool" }, "required": false }, + "onChange": { "type": { "name": "func" }, "required": false }, + "square": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "TransitionComponent": { + "type": { "name": "elementType" }, + "required": false, + "jsdocDefaultValue": { "value": "Collapse" }, + "defaultValue": { "value": "Collapse", "computed": true } + }, + "TransitionProps": { "type": { "name": "object" }, "required": false } + }, + "spread": true, + "styles": { + "classes": ["root", "rounded", "expanded", "disabled", "region"], + "name": "MuiAccordion", + "descriptions": {}, + "globalClasses": { + "root": "MuiAccordion-root", + "rounded": "MuiAccordion-rounded", + "expanded": "Mui-expanded", + "disabled": "Mui-disabled", + "region": "MuiAccordion-region" + } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": { "component": "Paper", "pathname": "/api/paper/" }, + "demos": "- [Accordion](/components/accordion/)" +} diff --git a/docs/pages/api-docs/accordion.md b/docs/pages/api-docs/accordion.md deleted file mode 100644 index 325889d244dc1d..00000000000000 --- a/docs/pages/api-docs/accordion.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -filename: /packages/material-ui/src/Accordion/Accordion.js ---- - - - -# Accordion API - -

The API documentation of the Accordion React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import Accordion from '@material-ui/core/Accordion'; -// or -import { Accordion } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiAccordion` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children* | node | | The content of the accordion. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| defaultExpanded | bool | false | If `true`, expands the accordion by default. | -| disabled | bool | false | If `true`, the accordion will be displayed in a disabled state. | -| expanded | bool | | If `true`, expands the accordion, otherwise collapse it. Setting this prop enables control over the accordion. | -| onChange | func | | Callback fired when the expand/collapse state is changed.

**Signature:**
`function(event: object, expanded: boolean) => void`
*event:* The event source of the callback. **Warning**: This is a generic event not a change event.
*expanded:* The `expanded` state of the accordion. | -| square | bool | false | If `true`, rounded corners are disabled. | -| TransitionComponent | elementType | Collapse | The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. | -| TransitionProps | object | | Props applied to the transition element. By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition) component. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element ([Paper](/api/paper/)). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiAccordion-root | Styles applied to the root element. -| rounded | .MuiAccordion-rounded | Styles applied to the root element unless `square={true}`. -| expanded | .Mui-expanded | Pseudo-class applied to the root element if `expanded={true}`. -| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. -| region | .MuiAccordion-region | Styles applied to the region element, the container of the children. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Accordion/Accordion.js) for more detail. - -## Inheritance - -The props of the [Paper](/api/paper/) component are also available. -You can take advantage of this behavior to [target nested components](/guides/api/#spread). - -## Demos - -- [Accordion](/components/accordion/) - diff --git a/docs/pages/api-docs/alert-title.js b/docs/pages/api-docs/alert-title.js index 725678e7b7112a..12141886c3f24d 100644 --- a/docs/pages/api-docs/alert-title.js +++ b/docs/pages/api-docs/alert-title.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './alert-title.json'; -const pageFilename = 'api/alert-title'; -const requireRaw = require.context('!raw-loader!./', false, /\/alert-title\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'AlertTitle'); + const classDescriptions = mapApiTranslations(req2, 'AlertTitle'); + const classConditions = mapApiTranslations(req3, 'AlertTitle'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/alert-title.json b/docs/pages/api-docs/alert-title.json new file mode 100644 index 00000000000000..39d53cfce3678f --- /dev/null +++ b/docs/pages/api-docs/alert-title.json @@ -0,0 +1,20 @@ +{ + "name": "AlertTitle", + "filename": "/packages/material-ui/src/AlertTitle/AlertTitle.js", + "description": "", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" } + }, + "spread": true, + "styles": { + "classes": ["root"], + "name": "MuiAlertTitle", + "descriptions": {}, + "globalClasses": { "root": "MuiAlertTitle-root" } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": null, + "demos": "- [Alert](/components/alert/)" +} diff --git a/docs/pages/api-docs/alert-title.md b/docs/pages/api-docs/alert-title.md deleted file mode 100644 index a6ae550cdab655..00000000000000 --- a/docs/pages/api-docs/alert-title.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -filename: /packages/material-ui/src/AlertTitle/AlertTitle.js ---- - - - -# AlertTitle API - -

The API documentation of the AlertTitle React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import AlertTitle from '@material-ui/core/AlertTitle'; -// or -import { AlertTitle } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiAlertTitle` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiAlertTitle-root | Styles applied to the root element. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/AlertTitle/AlertTitle.js) for more detail. - -## Demos - -- [Alert](/components/alert/) - diff --git a/docs/pages/api-docs/alert.js b/docs/pages/api-docs/alert.js index d6b70720d6e3e4..8c4f2bc1e506d0 100644 --- a/docs/pages/api-docs/alert.js +++ b/docs/pages/api-docs/alert.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './alert.json'; -const pageFilename = 'api/alert'; -const requireRaw = require.context('!raw-loader!./', false, /\/alert\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'Alert'); + const classDescriptions = mapApiTranslations(req2, 'Alert'); + const classConditions = mapApiTranslations(req3, 'Alert'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/alert.json b/docs/pages/api-docs/alert.json new file mode 100644 index 00000000000000..b017b466e7839d --- /dev/null +++ b/docs/pages/api-docs/alert.json @@ -0,0 +1,136 @@ +{ + "name": "Alert", + "filename": "/packages/material-ui/src/Alert/Alert.js", + "description": "", + "props": { + "action": { "type": { "name": "node" }, "required": false }, + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "closeText": { + "type": { "name": "string" }, + "required": false, + "jsdocDefaultValue": { "value": "'Close'" }, + "defaultValue": { "value": "'Close'", "computed": false } + }, + "color": { + "type": { + "name": "enum", + "value": [ + { "value": "'error'", "computed": false }, + { "value": "'info'", "computed": false }, + { "value": "'success'", "computed": false }, + { "value": "'warning'", "computed": false } + ] + }, + "required": false + }, + "icon": { "type": { "name": "node" }, "required": false }, + "iconMapping": { + "type": { + "name": "shape", + "value": { + "error": { "name": "node", "required": false }, + "info": { "name": "node", "required": false }, + "success": { "name": "node", "required": false }, + "warning": { "name": "node", "required": false } + } + }, + "required": false, + "defaultValue": { + "value": "{\n success: ,\n warning: ,\n error: ,\n info: ,\n}", + "computed": false + } + }, + "onClose": { "type": { "name": "func" }, "required": false }, + "role": { + "type": { "name": "string" }, + "required": false, + "jsdocDefaultValue": { "value": "'alert'" }, + "defaultValue": { "value": "'alert'", "computed": false } + }, + "severity": { + "type": { + "name": "enum", + "value": [ + { "value": "'error'", "computed": false }, + { "value": "'info'", "computed": false }, + { "value": "'success'", "computed": false }, + { "value": "'warning'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'success'" }, + "defaultValue": { "value": "'success'", "computed": false } + }, + "variant": { + "type": { + "name": "union", + "value": [ + { + "name": "enum", + "value": [ + { "value": "'filled'", "computed": false }, + { "value": "'outlined'", "computed": false }, + { "value": "'standard'", "computed": false } + ] + }, + { "name": "string" } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'standard'" }, + "defaultValue": { "value": "'standard'", "computed": false } + } + }, + "spread": true, + "styles": { + "classes": [ + "root", + "filled", + "outlined", + "standard", + "standardSuccess", + "standardInfo", + "standardWarning", + "standardError", + "outlinedSuccess", + "outlinedInfo", + "outlinedWarning", + "outlinedError", + "filledSuccess", + "filledInfo", + "filledWarning", + "filledError", + "icon", + "message", + "action" + ], + "name": "MuiAlert", + "descriptions": {}, + "globalClasses": { + "root": "MuiAlert-root", + "filled": "MuiAlert-filled", + "outlined": "MuiAlert-outlined", + "standard": "MuiAlert-standard", + "standardSuccess": "MuiAlert-standardSuccess", + "standardInfo": "MuiAlert-standardInfo", + "standardWarning": "MuiAlert-standardWarning", + "standardError": "MuiAlert-standardError", + "outlinedSuccess": "MuiAlert-outlinedSuccess", + "outlinedInfo": "MuiAlert-outlinedInfo", + "outlinedWarning": "MuiAlert-outlinedWarning", + "outlinedError": "MuiAlert-outlinedError", + "filledSuccess": "MuiAlert-filledSuccess", + "filledInfo": "MuiAlert-filledInfo", + "filledWarning": "MuiAlert-filledWarning", + "filledError": "MuiAlert-filledError", + "icon": "MuiAlert-icon", + "message": "MuiAlert-message", + "action": "MuiAlert-action" + } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": { "component": "Paper", "pathname": "/api/paper/" }, + "demos": "- [Alert](/components/alert/)" +} diff --git a/docs/pages/api-docs/alert.md b/docs/pages/api-docs/alert.md deleted file mode 100644 index 72000a25bf4295..00000000000000 --- a/docs/pages/api-docs/alert.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -filename: /packages/material-ui/src/Alert/Alert.js ---- - - - -# Alert API - -

The API documentation of the Alert React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import Alert from '@material-ui/core/Alert'; -// or -import { Alert } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiAlert` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| action | node | | The action to display. It renders after the message, at the end of the alert. | -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| closeText | string | 'Close' | Override the default label for the *close popup* icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). | -| color | 'error'
| 'info'
| 'success'
| 'warning' | | The main color for the alert. Unless provided, the value is taken from the `severity` prop. | -| icon | node | | Override the icon displayed before the children. Unless provided, the icon is mapped to the value of the `severity` prop. | -| iconMapping | { error?: node, info?: node, success?: node, warning?: node } | | The component maps the `severity` prop to a range of different icons, for instance success to ``. If you wish to change this mapping, you can provide your own. Alternatively, you can use the `icon` prop to override the icon displayed. | -| onClose | func | | Callback fired when the component requests to be closed. When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | -| role | string | 'alert' | The ARIA role attribute of the element. | -| severity | 'error'
| 'info'
| 'success'
| 'warning' | 'success' | The severity of the alert. This defines the color and icon used. | -| variant | 'filled'
| 'outlined'
| 'standard'
| string | 'standard' | The variant to use. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element ([Paper](/api/paper/)). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiAlert-root | Styles applied to the root element. -| filled | .MuiAlert-filled | Styles applied to the root element if `variant="filled"`. -| outlined | .MuiAlert-outlined | Styles applied to the root element if `variant="outlined"`. -| standard | .MuiAlert-standard | Styles applied to the root element if `variant="standard"`. -| standardSuccess | .MuiAlert-standardSuccess | Styles applied to the root element if `variant="standard"` and `color="success"`. -| standardInfo | .MuiAlert-standardInfo | Styles applied to the root element if `variant="standard"` and `color="info"`. -| standardWarning | .MuiAlert-standardWarning | Styles applied to the root element if `variant="standard"` and `color="warning"`. -| standardError | .MuiAlert-standardError | Styles applied to the root element if `variant="standard"` and `color="error"`. -| outlinedSuccess | .MuiAlert-outlinedSuccess | Styles applied to the root element if `variant="outlined"` and `color="success"`. -| outlinedInfo | .MuiAlert-outlinedInfo | Styles applied to the root element if `variant="outlined"` and `color="info"`. -| outlinedWarning | .MuiAlert-outlinedWarning | Styles applied to the root element if `variant="outlined"` and `color="warning"`. -| outlinedError | .MuiAlert-outlinedError | Styles applied to the root element if `variant="outlined"` and `color="error"`. -| filledSuccess | .MuiAlert-filledSuccess | Styles applied to the root element if `variant="filled"` and `color="success"`. -| filledInfo | .MuiAlert-filledInfo | Styles applied to the root element if `variant="filled"` and `color="info"`. -| filledWarning | .MuiAlert-filledWarning | Styles applied to the root element if `variant="filled"` and `color="warning"`. -| filledError | .MuiAlert-filledError | Styles applied to the root element if `variant="filled"` and `color="error"`. -| icon | .MuiAlert-icon | Styles applied to the icon wrapper element. -| message | .MuiAlert-message | Styles applied to the message wrapper element. -| action | .MuiAlert-action | Styles applied to the action wrapper element if `action` is provided. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Alert/Alert.js) for more detail. - -## Inheritance - -The props of the [Paper](/api/paper/) component are also available. -You can take advantage of this behavior to [target nested components](/guides/api/#spread). - -## Demos - -- [Alert](/components/alert/) - diff --git a/docs/pages/api-docs/app-bar.js b/docs/pages/api-docs/app-bar.js index c14477d7e57f5e..cd6ce53a797728 100644 --- a/docs/pages/api-docs/app-bar.js +++ b/docs/pages/api-docs/app-bar.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './app-bar.json'; -const pageFilename = 'api/app-bar'; -const requireRaw = require.context('!raw-loader!./', false, /\/app-bar\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'AppBar'); + const classDescriptions = mapApiTranslations(req2, 'AppBar'); + const classConditions = mapApiTranslations(req3, 'AppBar'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/app-bar.json b/docs/pages/api-docs/app-bar.json new file mode 100644 index 00000000000000..8f68e9a47f02cb --- /dev/null +++ b/docs/pages/api-docs/app-bar.json @@ -0,0 +1,74 @@ +{ + "name": "AppBar", + "filename": "/packages/material-ui/src/AppBar/AppBar.js", + "description": "", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "color": { + "type": { + "name": "enum", + "value": [ + { "value": "'default'", "computed": false }, + { "value": "'inherit'", "computed": false }, + { "value": "'primary'", "computed": false }, + { "value": "'secondary'", "computed": false }, + { "value": "'transparent'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'primary'" }, + "defaultValue": { "value": "'primary'", "computed": false } + }, + "position": { + "type": { + "name": "enum", + "value": [ + { "value": "'absolute'", "computed": false }, + { "value": "'fixed'", "computed": false }, + { "value": "'relative'", "computed": false }, + { "value": "'static'", "computed": false }, + { "value": "'sticky'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'fixed'" }, + "defaultValue": { "value": "'fixed'", "computed": false } + } + }, + "spread": true, + "styles": { + "classes": [ + "root", + "positionFixed", + "positionAbsolute", + "positionSticky", + "positionStatic", + "positionRelative", + "colorDefault", + "colorPrimary", + "colorSecondary", + "colorInherit", + "colorTransparent" + ], + "name": "MuiAppBar", + "descriptions": {}, + "globalClasses": { + "root": "MuiAppBar-root", + "positionFixed": "MuiAppBar-positionFixed", + "positionAbsolute": "MuiAppBar-positionAbsolute", + "positionSticky": "MuiAppBar-positionSticky", + "positionStatic": "MuiAppBar-positionStatic", + "positionRelative": "MuiAppBar-positionRelative", + "colorDefault": "MuiAppBar-colorDefault", + "colorPrimary": "MuiAppBar-colorPrimary", + "colorSecondary": "MuiAppBar-colorSecondary", + "colorInherit": "MuiAppBar-colorInherit", + "colorTransparent": "MuiAppBar-colorTransparent" + } + }, + "forwardsRefTo": "HTMLElement", + "inheritance": { "component": "Paper", "pathname": "/api/paper/" }, + "demos": "- [App Bar](/components/app-bar/)" +} diff --git a/docs/pages/api-docs/app-bar.md b/docs/pages/api-docs/app-bar.md deleted file mode 100644 index 6c332f11318428..00000000000000 --- a/docs/pages/api-docs/app-bar.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -filename: /packages/material-ui/src/AppBar/AppBar.js ---- - - - -# AppBar API - -

The API documentation of the AppBar React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import AppBar from '@material-ui/core/AppBar'; -// or -import { AppBar } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiAppBar` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'default'
| 'inherit'
| 'primary'
| 'secondary'
| 'transparent' | 'primary' | The color of the component. It supports those theme colors that make sense for this component. | -| position | 'absolute'
| 'fixed'
| 'relative'
| 'static'
| 'sticky' | 'fixed' | The positioning type. The behavior of the different options is described [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning). Note: `sticky` is not universally supported and will fall back to `static` when unavailable. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element ([Paper](/api/paper/)). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiAppBar-root | Styles applied to the root element. -| positionFixed | .MuiAppBar-positionFixed | Styles applied to the root element if `position="fixed"`. -| positionAbsolute | .MuiAppBar-positionAbsolute | Styles applied to the root element if `position="absolute"`. -| positionSticky | .MuiAppBar-positionSticky | Styles applied to the root element if `position="sticky"`. -| positionStatic | .MuiAppBar-positionStatic | Styles applied to the root element if `position="static"`. -| positionRelative | .MuiAppBar-positionRelative | Styles applied to the root element if `position="relative"`. -| colorDefault | .MuiAppBar-colorDefault | Styles applied to the root element if `color="default"`. -| colorPrimary | .MuiAppBar-colorPrimary | Styles applied to the root element if `color="primary"`. -| colorSecondary | .MuiAppBar-colorSecondary | Styles applied to the root element if `color="secondary"`. -| colorInherit | .MuiAppBar-colorInherit | Styles applied to the root element if `color="inherit"`. -| colorTransparent | .MuiAppBar-colorTransparent | Styles applied to the root element if `color="transparent"`. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/AppBar/AppBar.js) for more detail. - -## Inheritance - -The props of the [Paper](/api/paper/) component are also available. -You can take advantage of this behavior to [target nested components](/guides/api/#spread). - -## Demos - -- [App Bar](/components/app-bar/) - diff --git a/docs/pages/api-docs/autocomplete.js b/docs/pages/api-docs/autocomplete.js deleted file mode 100644 index dbcfb7d2ca3621..00000000000000 --- a/docs/pages/api-docs/autocomplete.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; - -const pageFilename = 'api/autocomplete'; -const requireRaw = require.context('!raw-loader!./', false, /\/autocomplete\.md$/); - -export default function Page({ docs }) { - return ; -} - -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; diff --git a/docs/pages/api-docs/autocomplete.md b/docs/pages/api-docs/autocomplete.md deleted file mode 100644 index 20ee121743e3a7..00000000000000 --- a/docs/pages/api-docs/autocomplete.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -filename: /packages/material-ui/src/Autocomplete/Autocomplete.js ---- - - - -# Autocomplete API - -

The API documentation of the Autocomplete React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import Autocomplete from '@material-ui/core/Autocomplete'; -// or -import { Autocomplete } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiAutocomplete` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| autoComplete | bool | false | If `true`, the portion of the selected suggestion that has not been typed by the user, known as the completion string, appears inline after the input cursor in the textbox. The inline completion string is visually highlighted and has a selected state. | -| autoHighlight | bool | false | If `true`, the first option is automatically highlighted. | -| autoSelect | bool | false | If `true`, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different option or changes the character string in the input. | -| blurOnSelect | 'mouse'
| 'touch'
| bool | false | Control if the input should be blurred when an option is selected:
- `false` the input is not blurred. - `true` the input is always blurred. - `touch` the input is blurred after a touch event. - `mouse` the input is blurred after a mouse event. | -| ChipProps | object | | Props applied to the [`Chip`](/api/chip/) element. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| clearOnBlur | bool | !props.freeSolo | If `true`, the input's text will be cleared on blur if no value is selected.
Set to `true` if you want to help the user enter a new value. Set to `false` if you want to help the user resume his search. | -| clearOnEscape | bool | false | If `true`, clear all values when the user presses escape and the popup is closed. | -| clearText | string | 'Clear' | Override the default text for the *clear* icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). | -| closeIcon | node | <CloseIcon fontSize="small" /> | The icon to display in place of the default close icon. | -| closeText | string | 'Close' | Override the default text for the *close popup* icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). | -| debug | bool | false | If `true`, the popup will ignore the blur event if the input is filled. You can inspect the popup markup with your browser tools. Consider this option when you need to customize the component. | -| defaultValue | any | props.multiple ? [] : null | The default input value. Use when the component is not controlled. | -| disableClearable | bool | false | If `true`, the input can't be cleared. | -| disableCloseOnSelect | bool | false | If `true`, the popup won't close when a value is selected. | -| disabled | bool | false | If `true`, the input will be disabled. | -| disabledItemsFocusable | bool | false | If `true`, will allow focus on disabled items. | -| disableListWrap | bool | false | If `true`, the list box in the popup will not wrap focus. | -| disablePortal | bool | false | The `Popper` content will be inside the DOM hierarchy of the parent component. | -| filterOptions | func | | A filter function that determines the options that are eligible.

**Signature:**
`function(options: T[], state: object) => T[]`
*options:* The options to render.
*state:* The state of the component. | -| filterSelectedOptions | bool | false | If `true`, hide the selected options from the list box. | -| forcePopupIcon | 'auto'
| bool | 'auto' | Force the visibility display of the popup icon. | -| freeSolo | bool | false | If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options. | -| fullWidth | bool | false | If `true`, the input will take up the full width of its container. | -| getLimitTagsText | func | (more) => `+${more}` | The label to display when the tags are truncated (`limitTags`).

**Signature:**
`function(more: number) => ReactNode`
*more:* The number of truncated tags. | -| getOptionDisabled | func | | Used to determine the disabled state for a given option.

**Signature:**
`function(option: T) => boolean`
*option:* The option to test. | -| getOptionLabel | func | (option) => option.label ?? option | Used to determine the string value for a given option. It's used to fill the input (and the list box options if `renderOption` is not provided).

**Signature:**
`function(option: T) => string`
| -| getOptionSelected | func | | Used to determine if an option is selected, considering the current value. Uses strict equality by default.

**Signature:**
`function(option: T, value: T) => boolean`
*option:* The option to test.
*value:* The value to test against. | -| groupBy | func | | If provided, the options will be grouped under the returned string. The groupBy value is also used as the text for group headings when `renderGroup` is not provided.

**Signature:**
`function(options: T) => string`
*options:* The options to group. | -| handleHomeEndKeys | bool | !props.freeSolo | If `true`, the component handles the "Home" and "End" keys when the popup is open. It should move focus to the first option and last option, respectively. | -| id | string | | This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id. | -| includeInputInList | bool | false | If `true`, the highlight can move to the input. | -| inputValue | string | | The input value. | -| limitTags | number | -1 | The maximum number of tags that will be visible when not focused. Set `-1` to disable the limit. | -| ListboxComponent | elementType | 'ul' | The component used to render the listbox. | -| ListboxProps | object | | Props applied to the Listbox element. | -| loading | bool | false | If `true`, the component is in a loading state. | -| loadingText | node | 'Loading…' | Text to display when in a loading state.
For localization purposes, you can use the provided [translations](/guides/localization/). | -| multiple | bool | false | If `true`, `value` must be an array and the menu will support multiple selections. | -| noOptionsText | node | 'No options' | Text to display when there are no options.
For localization purposes, you can use the provided [translations](/guides/localization/). | -| onChange | func | | Callback fired when the value changes.

**Signature:**
`function(event: object, value: T \| T[], reason: string) => void`
*event:* The event source of the callback.
*value:* The new value of the component.
*reason:* One of "create-option", "select-option", "remove-option", "blur" or "clear". | -| onClose | func | | Callback fired when the popup requests to be closed. Use in controlled mode (see open).

**Signature:**
`function(event: object, reason: string) => void`
*event:* The event source of the callback.
*reason:* Can be: `"toggleInput"`, `"escape"`, `"select-option"`, `"remove-option"`, `"blur"`. | -| onHighlightChange | func | | Callback fired when the highlight option changes.

**Signature:**
`function(event: object, option: T, reason: string) => void`
*event:* The event source of the callback.
*option:* The highlighted option.
*reason:* Can be: `"keyboard"`, `"auto"`, `"mouse"`. | -| onInputChange | func | | Callback fired when the input value changes.

**Signature:**
`function(event: object, value: string, reason: string) => void`
*event:* The event source of the callback.
*value:* The new value of the text input.
*reason:* Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`. | -| onOpen | func | | Callback fired when the popup requests to be opened. Use in controlled mode (see open).

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | -| open | bool | | Control the popup` open state. | -| openOnFocus | bool | false | If `true`, the popup will open on input focus. | -| openText | string | 'Open' | Override the default text for the *open popup* icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). | -| options* | array | | Array of options. | -| PaperComponent | elementType | Paper | The component used to render the body of the popup. | -| PopperComponent | elementType | Popper | The component used to position the popup. | -| popupIcon | node | <ArrowDropDownIcon /> | The icon to display in place of the default popup icon. | -| renderGroup | func | | Render the group.

**Signature:**
`function(option: any) => ReactNode`
*option:* The group to render. | -| renderInput* | func | | Render the input.

**Signature:**
`function(params: object) => ReactNode`
| -| renderOption | func | | Render the option, use `getOptionLabel` by default.

**Signature:**
`function(props: object, option: T, state: object) => ReactNode`
*props:* The props to apply on the li element.
*option:* The option to render.
*state:* The state of the component. | -| renderTags | func | | Render the selected value.

**Signature:**
`function(value: T[], getTagProps: function) => ReactNode`
*value:* The `value` provided to the component.
*getTagProps:* A tag props getter. | -| selectOnFocus | bool | !props.freeSolo | If `true`, the input's text will be selected on focus. It helps the user clear the selected value. | -| size | 'medium'
| 'small' | 'medium' | The size of the autocomplete. | -| value | any | | The value of the autocomplete.
The value must have reference equality with the option in order to be selected. You can customize the equality behavior with the `getOptionSelected` prop. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiAutocomplete-root | Styles applied to the root element. -| fullWidth | .MuiAutocomplete-fullWidth | Styles applied to the root element if `fullWidth={true}`. -| focused | .Mui-focused | Pseudo-class applied to the root element if focused. -| tag | .MuiAutocomplete-tag | Styles applied to the tag elements, e.g. the chips. -| tagSizeSmall | .MuiAutocomplete-tagSizeSmall | Styles applied to the tag elements, e.g. the chips if `size="small"`. -| hasPopupIcon | .MuiAutocomplete-hasPopupIcon | Styles applied when the popup icon is rendered. -| hasClearIcon | .MuiAutocomplete-hasClearIcon | Styles applied when the clear icon is rendered. -| inputRoot | .MuiAutocomplete-inputRoot | Styles applied to the Input element. -| input | .MuiAutocomplete-input | Styles applied to the input element. -| inputFocused | .MuiAutocomplete-inputFocused | Styles applied to the input element if tag focused. -| endAdornment | .MuiAutocomplete-endAdornment | Styles applied to the endAdornment element. -| clearIndicator | .MuiAutocomplete-clearIndicator | Styles applied to the clear indicator. -| clearIndicatorDirty | .MuiAutocomplete-clearIndicatorDirty | Styles applied to the clear indicator if the input is dirty. -| popupIndicator | .MuiAutocomplete-popupIndicator | Styles applied to the popup indicator. -| popupIndicatorOpen | .MuiAutocomplete-popupIndicatorOpen | Styles applied to the popup indicator if the popup is open. -| popper | .MuiAutocomplete-popper | Styles applied to the popper element. -| popperDisablePortal | .MuiAutocomplete-popperDisablePortal | Styles applied to the popper element if `disablePortal={true}`. -| paper | .MuiAutocomplete-paper | Styles applied to the `Paper` component. -| listbox | .MuiAutocomplete-listbox | Styles applied to the `listbox` component. -| loading | .MuiAutocomplete-loading | Styles applied to the loading wrapper. -| noOptions | .MuiAutocomplete-noOptions | Styles applied to the no option wrapper. -| option | .MuiAutocomplete-option | Styles applied to the option elements. -| groupLabel | .MuiAutocomplete-groupLabel | Styles applied to the group's label elements. -| groupUl | .MuiAutocomplete-groupUl | Styles applied to the group's ul elements. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Autocomplete/Autocomplete.js) for more detail. - -## Demos - -- [Autocomplete](/components/autocomplete/) - diff --git a/docs/pages/api-docs/avatar-group.js b/docs/pages/api-docs/avatar-group.js index 1641e49047137f..8bf0772cb51de2 100644 --- a/docs/pages/api-docs/avatar-group.js +++ b/docs/pages/api-docs/avatar-group.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './avatar-group.json'; -const pageFilename = 'api/avatar-group'; -const requireRaw = require.context('!raw-loader!./', false, /\/avatar-group\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'AvatarGroup'); + const classDescriptions = mapApiTranslations(req2, 'AvatarGroup'); + const classConditions = mapApiTranslations(req3, 'AvatarGroup'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/avatar-group.json b/docs/pages/api-docs/avatar-group.json new file mode 100644 index 00000000000000..223159f089e18d --- /dev/null +++ b/docs/pages/api-docs/avatar-group.json @@ -0,0 +1,66 @@ +{ + "name": "AvatarGroup", + "filename": "/packages/material-ui/src/AvatarGroup/AvatarGroup.js", + "description": "", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "max": { + "type": { + "name": "custom", + "raw": "chainPropTypes(PropTypes.number, (props) => {\n if (props.max < 2) {\n throw new Error(\n [\n 'Material-UI: The prop `max` should be equal to 2 or above.',\n 'A value below is clamped to 2.',\n ].join('\\n'),\n );\n }\n})" + }, + "required": false, + "jsdocDefaultValue": { "value": "5" }, + "defaultValue": { "value": "5", "computed": false } + }, + "spacing": { + "type": { + "name": "union", + "value": [ + { + "name": "enum", + "value": [ + { "value": "'medium'", "computed": false }, + { "value": "'small'", "computed": false } + ] + }, + { "name": "number" } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'medium'" }, + "defaultValue": { "value": "'medium'", "computed": false } + }, + "variant": { + "type": { + "name": "union", + "value": [ + { + "name": "enum", + "value": [ + { "value": "'circular'", "computed": false }, + { "value": "'rounded'", "computed": false }, + { "value": "'square'", "computed": false } + ] + }, + { "name": "string" } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'circular'" }, + "defaultValue": { "value": "'circular'", "computed": false } + } + }, + "spread": true, + "styles": { + "classes": ["root", "avatar"], + "name": "MuiAvatarGroup", + "descriptions": {}, + "globalClasses": { "root": "MuiAvatarGroup-root", "avatar": "MuiAvatarGroup-avatar" } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": null, + "demos": "- [Avatars](/components/avatars/)" +} diff --git a/docs/pages/api-docs/avatar-group.md b/docs/pages/api-docs/avatar-group.md deleted file mode 100644 index 85f912a7ede5b4..00000000000000 --- a/docs/pages/api-docs/avatar-group.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -filename: /packages/material-ui/src/AvatarGroup/AvatarGroup.js ---- - - - -# AvatarGroup API - -

The API documentation of the AvatarGroup React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import AvatarGroup from '@material-ui/core/AvatarGroup'; -// or -import { AvatarGroup } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiAvatarGroup` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The avatars to stack. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| max | number | 5 | Max avatars to show before +x. | -| spacing | 'medium'
| 'small'
| number | 'medium' | Spacing between avatars. | -| variant | 'circular'
| 'rounded'
| 'square'
| string | 'circular' | The shape of the avatars. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiAvatarGroup-root | Styles applied to the root element. -| avatar | .MuiAvatarGroup-avatar | Styles applied to the avatar elements. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/AvatarGroup/AvatarGroup.js) for more detail. - -## Demos - -- [Avatars](/components/avatars/) - diff --git a/docs/pages/api-docs/avatar.js b/docs/pages/api-docs/avatar.js index a2cb2cb580fdb5..288670fa8767ea 100644 --- a/docs/pages/api-docs/avatar.js +++ b/docs/pages/api-docs/avatar.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './avatar.json'; -const pageFilename = 'api/avatar'; -const requireRaw = require.context('!raw-loader!./', false, /\/avatar\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'Avatar'); + const classDescriptions = mapApiTranslations(req2, 'Avatar'); + const classConditions = mapApiTranslations(req3, 'Avatar'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/avatar.json b/docs/pages/api-docs/avatar.json new file mode 100644 index 00000000000000..5a3553e8f16700 --- /dev/null +++ b/docs/pages/api-docs/avatar.json @@ -0,0 +1,57 @@ +{ + "name": "Avatar", + "filename": "/packages/material-ui/src/Avatar/Avatar.js", + "description": "", + "props": { + "alt": { "type": { "name": "string" }, "required": false }, + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "component": { + "type": { "name": "elementType" }, + "required": false, + "defaultValue": { "value": "'div'", "computed": false } + }, + "imgProps": { "type": { "name": "object" }, "required": false }, + "sizes": { "type": { "name": "string" }, "required": false }, + "src": { "type": { "name": "string" }, "required": false }, + "srcSet": { "type": { "name": "string" }, "required": false }, + "variant": { + "type": { + "name": "union", + "value": [ + { + "name": "enum", + "value": [ + { "value": "'circular'", "computed": false }, + { "value": "'rounded'", "computed": false }, + { "value": "'square'", "computed": false } + ] + }, + { "name": "string" } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'circular'" }, + "defaultValue": { "value": "'circular'", "computed": false } + } + }, + "spread": true, + "styles": { + "classes": ["root", "colorDefault", "circular", "rounded", "square", "img", "fallback"], + "name": "MuiAvatar", + "descriptions": {}, + "globalClasses": { + "root": "MuiAvatar-root", + "colorDefault": "MuiAvatar-colorDefault", + "circular": "MuiAvatar-circular", + "rounded": "MuiAvatar-rounded", + "square": "MuiAvatar-square", + "img": "MuiAvatar-img", + "fallback": "MuiAvatar-fallback" + } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": null, + "demos": "- [Avatars](/components/avatars/)" +} diff --git a/docs/pages/api-docs/avatar.md b/docs/pages/api-docs/avatar.md deleted file mode 100644 index cc386de23ccd83..00000000000000 --- a/docs/pages/api-docs/avatar.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -filename: /packages/material-ui/src/Avatar/Avatar.js ---- - - - -# Avatar API - -

The API documentation of the Avatar React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import Avatar from '@material-ui/core/Avatar'; -// or -import { Avatar } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiAvatar` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| alt | string | | Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. | -| children | node | | Used to render icon or text elements inside the Avatar if `src` is not set. This can be an element, or just a string. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | elementType | 'div' | The component used for the root node. Either a string to use a HTML element or a component. | -| imgProps | object | | Attributes applied to the `img` element if the component is used to display an image. It can be used to listen for the loading error event. | -| sizes | string | | The `sizes` attribute for the `img` element. | -| src | string | | The `src` attribute for the `img` element. | -| srcSet | string | | The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. | -| variant | 'circular'
| 'rounded'
| 'square'
| string | 'circular' | The shape of the avatar. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiAvatar-root | Styles applied to the root element. -| colorDefault | .MuiAvatar-colorDefault | Styles applied to the root element if not `src` or `srcSet`. -| circular | .MuiAvatar-circular | Styles applied to the root element if `variant="circular"`. -| rounded | .MuiAvatar-rounded | Styles applied to the root element if `variant="rounded"`. -| square | .MuiAvatar-square | Styles applied to the root element if `variant="square"`. -| img | .MuiAvatar-img | Styles applied to the img element if either `src` or `srcSet` is defined. -| fallback | .MuiAvatar-fallback | Styles applied to the fallback icon - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Avatar/Avatar.js) for more detail. - -## Demos - -- [Avatars](/components/avatars/) - diff --git a/docs/pages/api-docs/backdrop.js b/docs/pages/api-docs/backdrop.js index 83b7de4db23d61..037c33dfcb876a 100644 --- a/docs/pages/api-docs/backdrop.js +++ b/docs/pages/api-docs/backdrop.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './backdrop.json'; -const pageFilename = 'api/backdrop'; -const requireRaw = require.context('!raw-loader!./', false, /\/backdrop\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'Backdrop'); + const classDescriptions = mapApiTranslations(req2, 'Backdrop'); + const classConditions = mapApiTranslations(req3, 'Backdrop'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/backdrop.json b/docs/pages/api-docs/backdrop.json new file mode 100644 index 00000000000000..d8ae0e6526406e --- /dev/null +++ b/docs/pages/api-docs/backdrop.json @@ -0,0 +1,44 @@ +{ + "name": "Backdrop", + "filename": "/packages/material-ui/src/Backdrop/Backdrop.js", + "description": "", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "invisible": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "open": { "type": { "name": "bool" }, "required": true }, + "transitionDuration": { + "type": { + "name": "union", + "value": [ + { "name": "number" }, + { + "name": "shape", + "value": { + "appear": { "name": "number", "required": false }, + "enter": { "name": "number", "required": false }, + "exit": { "name": "number", "required": false } + } + } + ] + }, + "required": false + } + }, + "spread": true, + "styles": { + "classes": ["root", "invisible"], + "name": "MuiBackdrop", + "descriptions": {}, + "globalClasses": { "root": "MuiBackdrop-root", "invisible": "MuiBackdrop-invisible" } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": { "component": "Fade", "pathname": "/api/fade/" }, + "demos": "- [Backdrop](/components/backdrop/)" +} diff --git a/docs/pages/api-docs/backdrop.md b/docs/pages/api-docs/backdrop.md deleted file mode 100644 index 1dc531467509c5..00000000000000 --- a/docs/pages/api-docs/backdrop.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -filename: /packages/material-ui/src/Backdrop/Backdrop.js ---- - - - -# Backdrop API - -

The API documentation of the Backdrop React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import Backdrop from '@material-ui/core/Backdrop'; -// or -import { Backdrop } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiBackdrop` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| invisible | bool | false | If `true`, the backdrop is invisible. It can be used when rendering a popover or a custom select component. | -| open* | bool | | If `true`, the backdrop is open. | -| transitionDuration | number
| { appear?: number, enter?: number, exit?: number } | | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element ([Fade](/api/fade/)). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiBackdrop-root | Styles applied to the root element. -| invisible | .MuiBackdrop-invisible | Styles applied to the root element if `invisible={true}`. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Backdrop/Backdrop.js) for more detail. - -## Inheritance - -The props of the [Fade](/api/fade/) component are also available. -You can take advantage of this behavior to [target nested components](/guides/api/#spread). - -## Demos - -- [Backdrop](/components/backdrop/) - diff --git a/docs/pages/api-docs/badge.js b/docs/pages/api-docs/badge.js index 43302b4cc93f2b..de3979e9cd3643 100644 --- a/docs/pages/api-docs/badge.js +++ b/docs/pages/api-docs/badge.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './badge.json'; -const pageFilename = 'api/badge'; -const requireRaw = require.context('!raw-loader!./', false, /\/badge\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'Badge'); + const classDescriptions = mapApiTranslations(req2, 'Badge'); + const classConditions = mapApiTranslations(req3, 'Badge'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/badge.json b/docs/pages/api-docs/badge.json new file mode 100644 index 00000000000000..95bc1eb5fbc4d6 --- /dev/null +++ b/docs/pages/api-docs/badge.json @@ -0,0 +1,146 @@ +{ + "name": "Badge", + "filename": "/packages/material-ui/src/Badge/Badge.js", + "description": "", + "props": { + "anchorOrigin": { + "type": { + "name": "shape", + "value": { + "horizontal": { + "name": "enum", + "value": [ + { "value": "'left'", "computed": false }, + { "value": "'right'", "computed": false } + ], + "required": true + }, + "vertical": { + "name": "enum", + "value": [ + { "value": "'bottom'", "computed": false }, + { "value": "'top'", "computed": false } + ], + "required": true + } + } + }, + "required": false, + "jsdocDefaultValue": { "value": "{\n vertical: 'top',\n horizontal: 'right',\n}" }, + "defaultValue": { + "value": "{\n vertical: 'top',\n horizontal: 'right',\n}", + "computed": false + } + }, + "badgeContent": { "type": { "name": "node" }, "required": false }, + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "color": { + "type": { + "name": "enum", + "value": [ + { "value": "'default'", "computed": false }, + { "value": "'error'", "computed": false }, + { "value": "'primary'", "computed": false }, + { "value": "'secondary'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'default'" }, + "defaultValue": { "value": "'default'", "computed": false } + }, + "component": { + "type": { "name": "elementType" }, + "required": false, + "defaultValue": { "value": "'span'", "computed": false } + }, + "invisible": { "type": { "name": "bool" }, "required": false }, + "max": { + "type": { "name": "number" }, + "required": false, + "jsdocDefaultValue": { "value": "99" }, + "defaultValue": { "value": "99", "computed": false } + }, + "overlap": { + "type": { + "name": "enum", + "value": [ + { "value": "'circular'", "computed": false }, + { "value": "'rectangular'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'rectangular'" }, + "defaultValue": { "value": "'rectangular'", "computed": false } + }, + "showZero": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "variant": { + "type": { + "name": "union", + "value": [ + { + "name": "enum", + "value": [ + { "value": "'dot'", "computed": false }, + { "value": "'standard'", "computed": false } + ] + }, + { "name": "string" } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'standard'" }, + "defaultValue": { "value": "'standard'", "computed": false } + } + }, + "spread": true, + "styles": { + "classes": [ + "root", + "badge", + "colorPrimary", + "colorSecondary", + "colorError", + "dot", + "standard", + "anchorOriginTopRightRectangular", + "anchorOriginBottomRightRectangular", + "anchorOriginTopLeftRectangular", + "anchorOriginBottomLeftRectangular", + "anchorOriginTopRightCircular", + "anchorOriginBottomRightCircular", + "anchorOriginTopLeftCircular", + "anchorOriginBottomLeftCircular", + "invisible" + ], + "name": "MuiBadge", + "descriptions": {}, + "globalClasses": { + "root": "MuiBadge-root", + "badge": "MuiBadge-badge", + "colorPrimary": "MuiBadge-colorPrimary", + "colorSecondary": "MuiBadge-colorSecondary", + "colorError": "MuiBadge-colorError", + "dot": "MuiBadge-dot", + "standard": "MuiBadge-standard", + "anchorOriginTopRightRectangular": "MuiBadge-anchorOriginTopRightRectangular", + "anchorOriginBottomRightRectangular": "MuiBadge-anchorOriginBottomRightRectangular", + "anchorOriginTopLeftRectangular": "MuiBadge-anchorOriginTopLeftRectangular", + "anchorOriginBottomLeftRectangular": "MuiBadge-anchorOriginBottomLeftRectangular", + "anchorOriginTopRightCircular": "MuiBadge-anchorOriginTopRightCircular", + "anchorOriginBottomRightCircular": "MuiBadge-anchorOriginBottomRightCircular", + "anchorOriginTopLeftCircular": "MuiBadge-anchorOriginTopLeftCircular", + "anchorOriginBottomLeftCircular": "MuiBadge-anchorOriginBottomLeftCircular", + "invisible": "MuiBadge-invisible" + } + }, + "forwardsRefTo": "HTMLSpanElement", + "inheritance": null, + "demos": "- [Avatars](/components/avatars/)\n- [Badges](/components/badges/)" +} diff --git a/docs/pages/api-docs/badge.md b/docs/pages/api-docs/badge.md deleted file mode 100644 index d9f13d3b35f7bb..00000000000000 --- a/docs/pages/api-docs/badge.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -filename: /packages/material-ui/src/Badge/Badge.js ---- - - - -# Badge API - -

The API documentation of the Badge React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import Badge from '@material-ui/core/Badge'; -// or -import { Badge } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiBadge` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| anchorOrigin | { horizontal: 'left'
| 'right', vertical: 'bottom'
| 'top' } | { vertical: 'top', horizontal: 'right',} | The anchor of the badge. | -| badgeContent | node | | The content rendered within the badge. | -| children | node | | The badge will be added relative to this node. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'default'
| 'error'
| 'primary'
| 'secondary' | 'default' | The color of the component. It supports those theme colors that make sense for this component. | -| component | elementType | 'span' | The component used for the root node. Either a string to use a HTML element or a component. | -| invisible | bool | | If `true`, the badge will be invisible. | -| max | number | 99 | Max count to show. | -| overlap | 'circular'
| 'rectangular' | 'rectangular' | Wrapped shape the badge should overlap. | -| showZero | bool | false | Controls whether the badge is hidden when `badgeContent` is zero. | -| variant | 'dot'
| 'standard'
| string | 'standard' | The variant to use. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiBadge-root | Styles applied to the root element. -| badge | .MuiBadge-badge | Styles applied to the badge `span` element. -| colorPrimary | .MuiBadge-colorPrimary | Styles applied to the root element if `color="primary"`. -| colorSecondary | .MuiBadge-colorSecondary | Styles applied to the root element if `color="secondary"`. -| colorError | .MuiBadge-colorError | Styles applied to the root element if `color="error"`. -| dot | .MuiBadge-dot | Styles applied to the root element if `variant="dot"`. -| standard | .MuiBadge-standard | Styles applied to the root element if `variant="standard"`. -| anchorOriginTopRightRectangular | .MuiBadge-anchorOriginTopRightRectangular | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`. -| anchorOriginBottomRightRectangular | .MuiBadge-anchorOriginBottomRightRectangular | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`. -| anchorOriginTopLeftRectangular | .MuiBadge-anchorOriginTopLeftRectangular | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`. -| anchorOriginBottomLeftRectangular | .MuiBadge-anchorOriginBottomLeftRectangular | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`. -| anchorOriginTopRightCircular | .MuiBadge-anchorOriginTopRightCircular | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`. -| anchorOriginBottomRightCircular | .MuiBadge-anchorOriginBottomRightCircular | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`. -| anchorOriginTopLeftCircular | .MuiBadge-anchorOriginTopLeftCircular | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`. -| anchorOriginBottomLeftCircular | .MuiBadge-anchorOriginBottomLeftCircular | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`. -| invisible | .MuiBadge-invisible | Pseudo-class to the badge `span` element if `invisible={true}`. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Badge/Badge.js) for more detail. - -## Demos - -- [Avatars](/components/avatars/) -- [Badges](/components/badges/) - diff --git a/docs/pages/api-docs/bottom-navigation-action.js b/docs/pages/api-docs/bottom-navigation-action.js index 91d6b984d8202f..2bb24e81a00b7a 100644 --- a/docs/pages/api-docs/bottom-navigation-action.js +++ b/docs/pages/api-docs/bottom-navigation-action.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './bottom-navigation-action.json'; -const pageFilename = 'api/bottom-navigation-action'; -const requireRaw = require.context('!raw-loader!./', false, /\/bottom-navigation-action\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'BottomNavigationAction'); + const classDescriptions = mapApiTranslations(req2, 'BottomNavigationAction'); + const classConditions = mapApiTranslations(req3, 'BottomNavigationAction'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/bottom-navigation-action.json b/docs/pages/api-docs/bottom-navigation-action.json new file mode 100644 index 00000000000000..8456927d0fd7ad --- /dev/null +++ b/docs/pages/api-docs/bottom-navigation-action.json @@ -0,0 +1,34 @@ +{ + "name": "BottomNavigationAction", + "filename": "/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js", + "description": "", + "props": { + "children": { "type": { "name": "custom", "raw": "unsupportedProp" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "icon": { "type": { "name": "node" }, "required": false }, + "label": { "type": { "name": "node" }, "required": false }, + "onChange": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onClick": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onTouchEnd": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onTouchStart": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "showLabel": { "type": { "name": "bool" }, "required": false }, + "value": { "type": { "name": "any" }, "required": false } + }, + "spread": true, + "styles": { + "classes": ["root", "selected", "iconOnly", "wrapper", "label"], + "name": "MuiBottomNavigationAction", + "descriptions": {}, + "globalClasses": { + "root": "MuiBottomNavigationAction-root", + "selected": "Mui-selected", + "iconOnly": "MuiBottomNavigationAction-iconOnly", + "wrapper": "MuiBottomNavigationAction-wrapper", + "label": "MuiBottomNavigationAction-label" + } + }, + "forwardsRefTo": "HTMLButtonElement", + "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" }, + "demos": "- [Bottom Navigation](/components/bottom-navigation/)" +} diff --git a/docs/pages/api-docs/bottom-navigation-action.md b/docs/pages/api-docs/bottom-navigation-action.md deleted file mode 100644 index b06e79083fb1c3..00000000000000 --- a/docs/pages/api-docs/bottom-navigation-action.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -filename: /packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js ---- - - - -# BottomNavigationAction API - -

The API documentation of the BottomNavigationAction React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import BottomNavigationAction from '@material-ui/core/BottomNavigationAction'; -// or -import { BottomNavigationAction } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiBottomNavigationAction` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | unsupportedProp | | This prop isn't supported. Use the `component` prop if you need to change the children structure. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| icon | node | | The icon element. | -| label | node | | The label element. | -| showLabel | bool | | If `true`, the `BottomNavigationAction` will show its label. By default, only the selected `BottomNavigationAction` inside `BottomNavigation` will show its label.
The prop defaults to the value (`false`) inherited from the parent BottomNavigation component. | -| value | any | | You can provide your own value. Otherwise, we fallback to the child position index. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element ([ButtonBase](/api/button-base/)). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiBottomNavigationAction-root | Styles applied to the root element. -| selected | .Mui-selected | Pseudo-class applied to the root element if selected. -| iconOnly | .MuiBottomNavigationAction-iconOnly | Pseudo-class applied to the root element if `showLabel={false}` and not selected. -| wrapper | .MuiBottomNavigationAction-wrapper | Styles applied to the span element that wraps the icon and label. -| label | .MuiBottomNavigationAction-label | Styles applied to the label's span element. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js) for more detail. - -## Inheritance - -The props of the [ButtonBase](/api/button-base/) component are also available. -You can take advantage of this behavior to [target nested components](/guides/api/#spread). - -## Demos - -- [Bottom Navigation](/components/bottom-navigation/) - diff --git a/docs/pages/api-docs/bottom-navigation.js b/docs/pages/api-docs/bottom-navigation.js index cb343e6cc8b968..1d893a93d2b4fa 100644 --- a/docs/pages/api-docs/bottom-navigation.js +++ b/docs/pages/api-docs/bottom-navigation.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './bottom-navigation.json'; -const pageFilename = 'api/bottom-navigation'; -const requireRaw = require.context('!raw-loader!./', false, /\/bottom-navigation\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'BottomNavigation'); + const classDescriptions = mapApiTranslations(req2, 'BottomNavigation'); + const classConditions = mapApiTranslations(req3, 'BottomNavigation'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/bottom-navigation.json b/docs/pages/api-docs/bottom-navigation.json new file mode 100644 index 00000000000000..86f157c1508d39 --- /dev/null +++ b/docs/pages/api-docs/bottom-navigation.json @@ -0,0 +1,33 @@ +{ + "name": "BottomNavigation", + "filename": "/packages/material-ui/src/BottomNavigation/BottomNavigation.js", + "description": "", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "component": { + "type": { "name": "elementType" }, + "required": false, + "defaultValue": { "value": "'div'", "computed": false } + }, + "onChange": { "type": { "name": "func" }, "required": false }, + "showLabels": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "value": { "type": { "name": "any" }, "required": false } + }, + "spread": true, + "styles": { + "classes": ["root"], + "name": "MuiBottomNavigation", + "descriptions": {}, + "globalClasses": { "root": "MuiBottomNavigation-root" } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": null, + "demos": "- [Bottom Navigation](/components/bottom-navigation/)" +} diff --git a/docs/pages/api-docs/bottom-navigation.md b/docs/pages/api-docs/bottom-navigation.md deleted file mode 100644 index 8786b50e61107f..00000000000000 --- a/docs/pages/api-docs/bottom-navigation.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -filename: /packages/material-ui/src/BottomNavigation/BottomNavigation.js ---- - - - -# BottomNavigation API - -

The API documentation of the BottomNavigation React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import BottomNavigation from '@material-ui/core/BottomNavigation'; -// or -import { BottomNavigation } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiBottomNavigation` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | elementType | 'div' | The component used for the root node. Either a string to use a HTML element or a component. | -| onChange | func | | Callback fired when the value changes.

**Signature:**
`function(event: object, value: any) => void`
*event:* The event source of the callback. **Warning**: This is a generic event not a change event.
*value:* We default to the index of the child. | -| showLabels | bool | false | If `true`, all `BottomNavigationAction`s will show their labels. By default, only the selected `BottomNavigationAction` will show its label. | -| value | any | | The value of the currently selected `BottomNavigationAction`. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiBottomNavigation-root | Styles applied to the root element. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/BottomNavigation/BottomNavigation.js) for more detail. - -## Demos - -- [Bottom Navigation](/components/bottom-navigation/) - diff --git a/docs/pages/api-docs/breadcrumbs.js b/docs/pages/api-docs/breadcrumbs.js index ee13354b763f06..19f6e829e9c7d8 100644 --- a/docs/pages/api-docs/breadcrumbs.js +++ b/docs/pages/api-docs/breadcrumbs.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './breadcrumbs.json'; -const pageFilename = 'api/breadcrumbs'; -const requireRaw = require.context('!raw-loader!./', false, /\/breadcrumbs\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'Breadcrumbs'); + const classDescriptions = mapApiTranslations(req2, 'Breadcrumbs'); + const classConditions = mapApiTranslations(req3, 'Breadcrumbs'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/breadcrumbs.json b/docs/pages/api-docs/breadcrumbs.json new file mode 100644 index 00000000000000..c127b7ffb8dca4 --- /dev/null +++ b/docs/pages/api-docs/breadcrumbs.json @@ -0,0 +1,60 @@ +{ + "name": "Breadcrumbs", + "filename": "/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js", + "description": "", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "component": { + "type": { "name": "elementType" }, + "required": false, + "defaultValue": { "value": "'nav'", "computed": false } + }, + "expandText": { + "type": { "name": "string" }, + "required": false, + "jsdocDefaultValue": { "value": "'Show path'" }, + "defaultValue": { "value": "'Show path'", "computed": false } + }, + "itemsAfterCollapse": { + "type": { "name": "number" }, + "required": false, + "jsdocDefaultValue": { "value": "1" }, + "defaultValue": { "value": "1", "computed": false } + }, + "itemsBeforeCollapse": { + "type": { "name": "number" }, + "required": false, + "jsdocDefaultValue": { "value": "1" }, + "defaultValue": { "value": "1", "computed": false } + }, + "maxItems": { + "type": { "name": "number" }, + "required": false, + "jsdocDefaultValue": { "value": "8" }, + "defaultValue": { "value": "8", "computed": false } + }, + "separator": { + "type": { "name": "node" }, + "required": false, + "jsdocDefaultValue": { "value": "'/'" }, + "defaultValue": { "value": "'/'", "computed": false } + } + }, + "spread": true, + "styles": { + "classes": ["root", "ol", "li", "separator"], + "name": "MuiBreadcrumbs", + "descriptions": {}, + "globalClasses": { + "root": "MuiBreadcrumbs-root", + "ol": "MuiBreadcrumbs-ol", + "li": "MuiBreadcrumbs-li", + "separator": "MuiBreadcrumbs-separator" + } + }, + "forwardsRefTo": "HTMLElement", + "inheritance": null, + "demos": "- [Breadcrumbs](/components/breadcrumbs/)" +} diff --git a/docs/pages/api-docs/breadcrumbs.md b/docs/pages/api-docs/breadcrumbs.md deleted file mode 100644 index 9c2e09d6c410f9..00000000000000 --- a/docs/pages/api-docs/breadcrumbs.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -filename: /packages/material-ui/src/Breadcrumbs/Breadcrumbs.js ---- - - - -# Breadcrumbs API - -

The API documentation of the Breadcrumbs React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import Breadcrumbs from '@material-ui/core/Breadcrumbs'; -// or -import { Breadcrumbs } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiBreadcrumbs` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The breadcrumb children. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | elementType | 'nav' | The component used for the root node. Either a string to use a HTML element or a component. | -| expandText | string | 'Show path' | Override the default label for the expand button.
For localization purposes, you can use the provided [translations](/guides/localization/). | -| itemsAfterCollapse | number | 1 | If max items is exceeded, the number of items to show after the ellipsis. | -| itemsBeforeCollapse | number | 1 | If max items is exceeded, the number of items to show before the ellipsis. | -| maxItems | number | 8 | Specifies the maximum number of breadcrumbs to display. When there are more than the maximum number, only the first `itemsBeforeCollapse` and last `itemsAfterCollapse` will be shown, with an ellipsis in between. | -| separator | node | '/' | Custom separator node. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiBreadcrumbs-root | Styles applied to the root element. -| ol | .MuiBreadcrumbs-ol | Styles applied to the ol element. -| li | .MuiBreadcrumbs-li | Styles applied to the li element. -| separator | .MuiBreadcrumbs-separator | Styles applied to the separator element. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js) for more detail. - -## Demos - -- [Breadcrumbs](/components/breadcrumbs/) - diff --git a/docs/pages/api-docs/button-base.js b/docs/pages/api-docs/button-base.js index e1931b61cd7cb6..7faae39e2aba7e 100644 --- a/docs/pages/api-docs/button-base.js +++ b/docs/pages/api-docs/button-base.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './button-base.json'; -const pageFilename = 'api/button-base'; -const requireRaw = require.context('!raw-loader!./', false, /\/button-base\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'ButtonBase'); + const classDescriptions = mapApiTranslations(req2, 'ButtonBase'); + const classConditions = mapApiTranslations(req3, 'ButtonBase'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/button-base.json b/docs/pages/api-docs/button-base.json new file mode 100644 index 00000000000000..a57058881cc0f3 --- /dev/null +++ b/docs/pages/api-docs/button-base.json @@ -0,0 +1,101 @@ +{ + "name": "ButtonBase", + "filename": "/packages/material-ui/src/ButtonBase/ButtonBase.js", + "description": "`ButtonBase` contains as few styles as possible.\nIt aims to be a simple building block for creating a button.\nIt contains a load of style reset and some focus/ripple logic.", + "props": { + "action": { "type": { "name": "custom", "raw": "refType" }, "required": false }, + "buttonRef": { "type": { "name": "custom", "raw": "refType" }, "required": false }, + "centerRipple": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "component": { + "type": { "name": "custom", "raw": "elementTypeAcceptingRef" }, + "required": false, + "defaultValue": { "value": "'button'", "computed": false } + }, + "disabled": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "disableRipple": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "disableTouchRipple": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "focusRipple": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "focusVisibleClassName": { "type": { "name": "string" }, "required": false }, + "href": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "onBlur": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onClick": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onDragLeave": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onFocus": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onFocusVisible": { "type": { "name": "func" }, "required": false }, + "onKeyDown": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onKeyUp": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onMouseDown": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onMouseLeave": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onMouseUp": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onTouchEnd": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onTouchMove": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onTouchStart": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "tabIndex": { + "type": { "name": "union", "value": [{ "name": "number" }, { "name": "string" }] }, + "required": false, + "jsdocDefaultValue": { "value": "0" }, + "defaultValue": { "value": "0", "computed": false } + }, + "TouchRippleProps": { "type": { "name": "object" }, "required": false }, + "type": { + "type": { + "name": "union", + "value": [ + { + "name": "enum", + "value": [ + { "value": "'button'", "computed": false }, + { "value": "'reset'", "computed": false }, + { "value": "'submit'", "computed": false } + ] + }, + { "name": "string" } + ] + }, + "required": false, + "description": "@ignore" + } + }, + "spread": true, + "styles": { + "classes": ["root", "disabled", "focusVisible"], + "name": "MuiButtonBase", + "descriptions": {}, + "globalClasses": { + "root": "MuiButtonBase-root", + "disabled": "Mui-disabled", + "focusVisible": "Mui-focusVisible" + } + }, + "forwardsRefTo": "HTMLButtonElement", + "inheritance": null, + "demos": "- [Buttons](/components/buttons/)" +} diff --git a/docs/pages/api-docs/button-base.md b/docs/pages/api-docs/button-base.md deleted file mode 100644 index 35926a3232c4fe..00000000000000 --- a/docs/pages/api-docs/button-base.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -filename: /packages/material-ui/src/ButtonBase/ButtonBase.js ---- - - - -# ButtonBase API - -

The API documentation of the ButtonBase React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import ButtonBase from '@material-ui/core/ButtonBase'; -// or -import { ButtonBase } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - -`ButtonBase` contains as few styles as possible. -It aims to be a simple building block for creating a button. -It contains a load of style reset and some focus/ripple logic. - -## Component name - -The `MuiButtonBase` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| action | ref | | A ref for imperative actions. It currently only supports `focusVisible()` action. | -| centerRipple | bool | false | If `true`, the ripples will be centered. They won't start at the cursor interaction position. | -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | element type | 'button' | The component used for the root node. Either a string to use a HTML element or a component.
⚠️ [Needs to be able to hold a ref](/guides/composition/#caveat-with-refs). | -| disabled | bool | false | If `true`, the base button will be disabled. | -| disableRipple | bool | false | If `true`, the ripple effect will be disabled.
⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the `focusVisibleClassName`. | -| disableTouchRipple | bool | false | If `true`, the touch ripple effect will be disabled. | -| focusRipple | bool | false | If `true`, the base button will have a keyboard focus ripple. | -| focusVisibleClassName | string | | This prop can help a person know which element has the keyboard focus. The class name will be applied when the element gain the focus through a keyboard interaction. It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo). The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/master/explainer.md). A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components if needed. | -| onFocusVisible | func | | Callback fired when the component is focused with a keyboard. We trigger a `onFocus` callback too. | -| TouchRippleProps | object | | Props applied to the `TouchRipple` element. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiButtonBase-root | Styles applied to the root element. -| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. -| focusVisible | .Mui-focusVisible | Pseudo-class applied to the root element if keyboard focused. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/ButtonBase/ButtonBase.js) for more detail. - -## Demos - -- [Buttons](/components/buttons/) - diff --git a/docs/pages/api-docs/button-group.js b/docs/pages/api-docs/button-group.js index c45a61ff829c35..7f6cb39c8b1a7b 100644 --- a/docs/pages/api-docs/button-group.js +++ b/docs/pages/api-docs/button-group.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './button-group.json'; -const pageFilename = 'api/button-group'; -const requireRaw = require.context('!raw-loader!./', false, /\/button-group\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'ButtonGroup'); + const classDescriptions = mapApiTranslations(req2, 'ButtonGroup'); + const classConditions = mapApiTranslations(req3, 'ButtonGroup'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/button-group.json b/docs/pages/api-docs/button-group.json new file mode 100644 index 00000000000000..ddcc0b5a0f8cba --- /dev/null +++ b/docs/pages/api-docs/button-group.json @@ -0,0 +1,166 @@ +{ + "name": "ButtonGroup", + "filename": "/packages/material-ui/src/ButtonGroup/ButtonGroup.js", + "description": "", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "color": { + "type": { + "name": "enum", + "value": [ + { "value": "'inherit'", "computed": false }, + { "value": "'primary'", "computed": false }, + { "value": "'secondary'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'primary'" }, + "defaultValue": { "value": "'primary'", "computed": false } + }, + "component": { + "type": { "name": "elementType" }, + "required": false, + "defaultValue": { "value": "'div'", "computed": false } + }, + "disabled": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "disableElevation": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "disableFocusRipple": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "disableRipple": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "fullWidth": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "orientation": { + "type": { + "name": "enum", + "value": [ + { "value": "'horizontal'", "computed": false }, + { "value": "'vertical'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'horizontal'" }, + "defaultValue": { "value": "'horizontal'", "computed": false } + }, + "size": { + "type": { + "name": "enum", + "value": [ + { "value": "'large'", "computed": false }, + { "value": "'medium'", "computed": false }, + { "value": "'small'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'medium'" }, + "defaultValue": { "value": "'medium'", "computed": false } + }, + "variant": { + "type": { + "name": "union", + "value": [ + { + "name": "enum", + "value": [ + { "value": "'contained'", "computed": false }, + { "value": "'outlined'", "computed": false }, + { "value": "'text'", "computed": false } + ] + }, + { "name": "string" } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'outlined'" }, + "defaultValue": { "value": "'outlined'", "computed": false } + } + }, + "spread": true, + "styles": { + "classes": [ + "root", + "contained", + "outlined", + "text", + "disableElevation", + "disabled", + "fullWidth", + "vertical", + "grouped", + "groupedHorizontal", + "groupedVertical", + "groupedText", + "groupedTextHorizontal", + "groupedTextVertical", + "groupedTextPrimary", + "groupedTextSecondary", + "groupedOutlined", + "groupedOutlinedHorizontal", + "groupedOutlinedVertical", + "groupedOutlinedPrimary", + "groupedOutlinedSecondary", + "groupedContained", + "groupedContainedHorizontal", + "groupedContainedVertical", + "groupedContainedPrimary", + "groupedContainedSecondary" + ], + "name": "MuiButtonGroup", + "descriptions": {}, + "globalClasses": { + "root": "MuiButtonGroup-root", + "contained": "MuiButtonGroup-contained", + "outlined": "MuiButtonGroup-outlined", + "text": "MuiButtonGroup-text", + "disableElevation": "MuiButtonGroup-disableElevation", + "disabled": "Mui-disabled", + "fullWidth": "MuiButtonGroup-fullWidth", + "vertical": "MuiButtonGroup-vertical", + "grouped": "MuiButtonGroup-grouped", + "groupedHorizontal": "MuiButtonGroup-groupedHorizontal", + "groupedVertical": "MuiButtonGroup-groupedVertical", + "groupedText": "MuiButtonGroup-groupedText", + "groupedTextHorizontal": "MuiButtonGroup-groupedTextHorizontal", + "groupedTextVertical": "MuiButtonGroup-groupedTextVertical", + "groupedTextPrimary": "MuiButtonGroup-groupedTextPrimary", + "groupedTextSecondary": "MuiButtonGroup-groupedTextSecondary", + "groupedOutlined": "MuiButtonGroup-groupedOutlined", + "groupedOutlinedHorizontal": "MuiButtonGroup-groupedOutlinedHorizontal", + "groupedOutlinedVertical": "MuiButtonGroup-groupedOutlinedVertical", + "groupedOutlinedPrimary": "MuiButtonGroup-groupedOutlinedPrimary", + "groupedOutlinedSecondary": "MuiButtonGroup-groupedOutlinedSecondary", + "groupedContained": "MuiButtonGroup-groupedContained", + "groupedContainedHorizontal": "MuiButtonGroup-groupedContainedHorizontal", + "groupedContainedVertical": "MuiButtonGroup-groupedContainedVertical", + "groupedContainedPrimary": "MuiButtonGroup-groupedContainedPrimary", + "groupedContainedSecondary": "MuiButtonGroup-groupedContainedSecondary" + } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": null, + "demos": "- [Button Group](/components/button-group/)" +} diff --git a/docs/pages/api-docs/button-group.md b/docs/pages/api-docs/button-group.md deleted file mode 100644 index 96a9cf9a83eadd..00000000000000 --- a/docs/pages/api-docs/button-group.md +++ /dev/null @@ -1,90 +0,0 @@ ---- -filename: /packages/material-ui/src/ButtonGroup/ButtonGroup.js ---- - - - -# ButtonGroup API - -

The API documentation of the ButtonGroup React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import ButtonGroup from '@material-ui/core/ButtonGroup'; -// or -import { ButtonGroup } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiButtonGroup` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The content of the button group. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'inherit'
| 'primary'
| 'secondary' | 'primary' | The color of the component. It supports those theme colors that make sense for this component. | -| component | elementType | 'div' | The component used for the root node. Either a string to use a HTML element or a component. | -| disabled | bool | false | If `true`, the buttons will be disabled. | -| disableElevation | bool | false | If `true`, no elevation is used. | -| disableFocusRipple | bool | false | If `true`, the button keyboard focus ripple will be disabled. | -| disableRipple | bool | false | If `true`, the button ripple effect will be disabled. | -| fullWidth | bool | false | If `true`, the buttons will take up the full width of its container. | -| orientation | 'horizontal'
| 'vertical' | 'horizontal' | The group orientation (layout flow direction). | -| size | 'large'
| 'medium'
| 'small' | 'medium' | The size of the button. `small` is equivalent to the dense button styling. | -| variant | 'contained'
| 'outlined'
| 'text'
| string | 'outlined' | The variant to use. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiButtonGroup-root | Styles applied to the root element. -| contained | .MuiButtonGroup-contained | Styles applied to the root element if `variant="contained"`. -| outlined | .MuiButtonGroup-outlined | Styles applied to the root element if `variant="outlined"`. -| text | .MuiButtonGroup-text | Styles applied to the root element if `variant="text"`. -| disableElevation | .MuiButtonGroup-disableElevation | Styles applied to the root element if `disableElevation={true}`. -| disabled | .Mui-disabled | Pseudo-class applied to child elements if `disabled={true}`. -| fullWidth | .MuiButtonGroup-fullWidth | Styles applied to the root element if `fullWidth={true}`. -| vertical | .MuiButtonGroup-vertical | Styles applied to the root element if `orientation="vertical"`. -| grouped | .MuiButtonGroup-grouped | Styles applied to the children. -| groupedHorizontal | .MuiButtonGroup-groupedHorizontal | Styles applied to the children if `orientation="horizontal"`. -| groupedVertical | .MuiButtonGroup-groupedVertical | Styles applied to the children if `orientation="vertical"`. -| groupedText | .MuiButtonGroup-groupedText | Styles applied to the children if `variant="text"`. -| groupedTextHorizontal | .MuiButtonGroup-groupedTextHorizontal | Styles applied to the children if `variant="text"` and `orientation="horizontal"`. -| groupedTextVertical | .MuiButtonGroup-groupedTextVertical | Styles applied to the children if `variant="text"` and `orientation="vertical"`. -| groupedTextPrimary | .MuiButtonGroup-groupedTextPrimary | Styles applied to the children if `variant="text"` and `color="primary"`. -| groupedTextSecondary | .MuiButtonGroup-groupedTextSecondary | Styles applied to the children if `variant="text"` and `color="secondary"`. -| groupedOutlined | .MuiButtonGroup-groupedOutlined | Styles applied to the children if `variant="outlined"`. -| groupedOutlinedHorizontal | .MuiButtonGroup-groupedOutlinedHorizontal | Styles applied to the children if `variant="outlined"` and `orientation="horizontal"`. -| groupedOutlinedVertical | .MuiButtonGroup-groupedOutlinedVertical | Styles applied to the children if `variant="outlined"` and `orientation="vertical"`. -| groupedOutlinedPrimary | .MuiButtonGroup-groupedOutlinedPrimary | Styles applied to the children if `variant="outlined"` and `color="primary"`. -| groupedOutlinedSecondary | .MuiButtonGroup-groupedOutlinedSecondary | Styles applied to the children if `variant="outlined"` and `color="secondary"`. -| groupedContained | .MuiButtonGroup-groupedContained | Styles applied to the children if `variant="contained"`. -| groupedContainedHorizontal | .MuiButtonGroup-groupedContainedHorizontal | Styles applied to the children if `variant="contained"` and `orientation="horizontal"`. -| groupedContainedVertical | .MuiButtonGroup-groupedContainedVertical | Styles applied to the children if `variant="contained"` and `orientation="vertical"`. -| groupedContainedPrimary | .MuiButtonGroup-groupedContainedPrimary | Styles applied to the children if `variant="contained"` and `color="primary"`. -| groupedContainedSecondary | .MuiButtonGroup-groupedContainedSecondary | Styles applied to the children if `variant="contained"` and `color="secondary"`. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/ButtonGroup/ButtonGroup.js) for more detail. - -## Demos - -- [Button Group](/components/button-group/) - diff --git a/docs/pages/api-docs/button.js b/docs/pages/api-docs/button.js index 31ea06b24525d8..5c514fc5f1b97d 100644 --- a/docs/pages/api-docs/button.js +++ b/docs/pages/api-docs/button.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './button.json'; -const pageFilename = 'api/button'; -const requireRaw = require.context('!raw-loader!./', false, /\/button\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'Button'); + const classDescriptions = mapApiTranslations(req2, 'Button'); + const classConditions = mapApiTranslations(req3, 'Button'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/button.json b/docs/pages/api-docs/button.json new file mode 100644 index 00000000000000..a1e0c69118a751 --- /dev/null +++ b/docs/pages/api-docs/button.json @@ -0,0 +1,181 @@ +{ + "name": "Button", + "filename": "/packages/material-ui/src/Button/Button.js", + "description": "", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "color": { + "type": { + "name": "enum", + "value": [ + { "value": "'inherit'", "computed": false }, + { "value": "'primary'", "computed": false }, + { "value": "'secondary'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'primary'" }, + "defaultValue": { "value": "'primary'", "computed": false } + }, + "component": { + "type": { "name": "elementType" }, + "required": false, + "defaultValue": { "value": "'button'", "computed": false } + }, + "disabled": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "disableElevation": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "disableFocusRipple": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "disableRipple": { "type": { "name": "bool" }, "required": false }, + "endIcon": { "type": { "name": "node" }, "required": false }, + "focusVisibleClassName": { + "type": { "name": "string" }, + "required": false, + "description": "@ignore" + }, + "fullWidth": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "href": { "type": { "name": "string" }, "required": false }, + "size": { + "type": { + "name": "enum", + "value": [ + { "value": "'large'", "computed": false }, + { "value": "'medium'", "computed": false }, + { "value": "'small'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'medium'" }, + "defaultValue": { "value": "'medium'", "computed": false } + }, + "startIcon": { "type": { "name": "node" }, "required": false }, + "type": { + "type": { + "name": "union", + "value": [ + { + "name": "enum", + "value": [ + { "value": "'button'", "computed": false }, + { "value": "'reset'", "computed": false }, + { "value": "'submit'", "computed": false } + ] + }, + { "name": "string" } + ] + }, + "required": false, + "description": "@ignore" + }, + "variant": { + "type": { + "name": "union", + "value": [ + { + "name": "enum", + "value": [ + { "value": "'contained'", "computed": false }, + { "value": "'outlined'", "computed": false }, + { "value": "'text'", "computed": false } + ] + }, + { "name": "string" } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'text'" }, + "defaultValue": { "value": "'text'", "computed": false } + } + }, + "spread": true, + "styles": { + "classes": [ + "root", + "label", + "text", + "textPrimary", + "textSecondary", + "outlined", + "outlinedPrimary", + "outlinedSecondary", + "contained", + "containedPrimary", + "containedSecondary", + "disableElevation", + "focusVisible", + "disabled", + "colorInherit", + "textSizeSmall", + "textSizeLarge", + "outlinedSizeSmall", + "outlinedSizeLarge", + "containedSizeSmall", + "containedSizeLarge", + "sizeSmall", + "sizeLarge", + "fullWidth", + "startIcon", + "endIcon", + "iconSizeSmall", + "iconSizeMedium", + "iconSizeLarge" + ], + "name": "MuiButton", + "descriptions": {}, + "globalClasses": { + "root": "MuiButton-root", + "label": "MuiButton-label", + "text": "MuiButton-text", + "textPrimary": "MuiButton-textPrimary", + "textSecondary": "MuiButton-textSecondary", + "outlined": "MuiButton-outlined", + "outlinedPrimary": "MuiButton-outlinedPrimary", + "outlinedSecondary": "MuiButton-outlinedSecondary", + "contained": "MuiButton-contained", + "containedPrimary": "MuiButton-containedPrimary", + "containedSecondary": "MuiButton-containedSecondary", + "disableElevation": "MuiButton-disableElevation", + "focusVisible": "Mui-focusVisible", + "disabled": "Mui-disabled", + "colorInherit": "MuiButton-colorInherit", + "textSizeSmall": "MuiButton-textSizeSmall", + "textSizeLarge": "MuiButton-textSizeLarge", + "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", + "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", + "containedSizeSmall": "MuiButton-containedSizeSmall", + "containedSizeLarge": "MuiButton-containedSizeLarge", + "sizeSmall": "MuiButton-sizeSmall", + "sizeLarge": "MuiButton-sizeLarge", + "fullWidth": "MuiButton-fullWidth", + "startIcon": "MuiButton-startIcon", + "endIcon": "MuiButton-endIcon", + "iconSizeSmall": "MuiButton-iconSizeSmall", + "iconSizeMedium": "MuiButton-iconSizeMedium", + "iconSizeLarge": "MuiButton-iconSizeLarge" + } + }, + "forwardsRefTo": "HTMLButtonElement", + "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" }, + "demos": "- [Button Group](/components/button-group/)\n- [Buttons](/components/buttons/)" +} diff --git a/docs/pages/api-docs/button.md b/docs/pages/api-docs/button.md deleted file mode 100644 index 53ef1362ffbfe5..00000000000000 --- a/docs/pages/api-docs/button.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -filename: /packages/material-ui/src/Button/Button.js ---- - - - -# Button API - -

The API documentation of the Button React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import Button from '@material-ui/core/Button'; -// or -import { Button } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiButton` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The content of the button. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'inherit'
| 'primary'
| 'secondary' | 'primary' | The color of the component. It supports those theme colors that make sense for this component. | -| component | elementType | 'button' | The component used for the root node. Either a string to use a HTML element or a component. | -| disabled | bool | false | If `true`, the button will be disabled. | -| disableElevation | bool | false | If `true`, no elevation is used. | -| disableFocusRipple | bool | false | If `true`, the keyboard focus ripple will be disabled. | -| disableRipple | bool | | If `true`, the ripple effect will be disabled.
⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the `focusVisibleClassName`. | -| endIcon | node | | Element placed after the children. | -| fullWidth | bool | false | If `true`, the button will take up the full width of its container. | -| href | string | | The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. | -| size | 'large'
| 'medium'
| 'small' | 'medium' | The size of the button. `small` is equivalent to the dense button styling. | -| startIcon | node | | Element placed before the children. | -| variant | 'contained'
| 'outlined'
| 'text'
| string | 'text' | The variant to use. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element ([ButtonBase](/api/button-base/)). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiButton-root | Styles applied to the root element. -| label | .MuiButton-label | Styles applied to the span element that wraps the children. -| text | .MuiButton-text | Styles applied to the root element if `variant="text"`. -| textPrimary | .MuiButton-textPrimary | Styles applied to the root element if `variant="text"` and `color="primary"`. -| textSecondary | .MuiButton-textSecondary | Styles applied to the root element if `variant="text"` and `color="secondary"`. -| outlined | .MuiButton-outlined | Styles applied to the root element if `variant="outlined"`. -| outlinedPrimary | .MuiButton-outlinedPrimary | Styles applied to the root element if `variant="outlined"` and `color="primary"`. -| outlinedSecondary | .MuiButton-outlinedSecondary | Styles applied to the root element if `variant="outlined"` and `color="secondary"`. -| contained | .MuiButton-contained | Styles applied to the root element if `variant="contained"`. -| containedPrimary | .MuiButton-containedPrimary | Styles applied to the root element if `variant="contained"` and `color="primary"`. -| containedSecondary | .MuiButton-containedSecondary | Styles applied to the root element if `variant="contained"` and `color="secondary"`. -| disableElevation | .MuiButton-disableElevation | Styles applied to the root element if `disableElevation={true}`. -| focusVisible | .Mui-focusVisible | Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. -| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. -| colorInherit | .MuiButton-colorInherit | Styles applied to the root element if `color="inherit"`. -| textSizeSmall | .MuiButton-textSizeSmall | Styles applied to the root element if `size="small"` and `variant="text"`. -| textSizeLarge | .MuiButton-textSizeLarge | Styles applied to the root element if `size="large"` and `variant="text"`. -| outlinedSizeSmall | .MuiButton-outlinedSizeSmall | Styles applied to the root element if `size="small"` and `variant="outlined"`. -| outlinedSizeLarge | .MuiButton-outlinedSizeLarge | Styles applied to the root element if `size="large"` and `variant="outlined"`. -| containedSizeSmall | .MuiButton-containedSizeSmall | Styles applied to the root element if `size="small"` and `variant="contained"`. -| containedSizeLarge | .MuiButton-containedSizeLarge | Styles applied to the root element if `size="large"` and `variant="contained"`. -| sizeSmall | .MuiButton-sizeSmall | Styles applied to the root element if `size="small"`. -| sizeLarge | .MuiButton-sizeLarge | Styles applied to the root element if `size="large"`. -| fullWidth | .MuiButton-fullWidth | Styles applied to the root element if `fullWidth={true}`. -| startIcon | .MuiButton-startIcon | Styles applied to the startIcon element if supplied. -| endIcon | .MuiButton-endIcon | Styles applied to the endIcon element if supplied. -| iconSizeSmall | .MuiButton-iconSizeSmall | Styles applied to the icon element if supplied and `size="small"`. -| iconSizeMedium | .MuiButton-iconSizeMedium | Styles applied to the icon element if supplied and `size="medium"`. -| iconSizeLarge | .MuiButton-iconSizeLarge | Styles applied to the icon element if supplied and `size="large"`. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Button/Button.js) for more detail. - -## Inheritance - -The props of the [ButtonBase](/api/button-base/) component are also available. -You can take advantage of this behavior to [target nested components](/guides/api/#spread). - -## Demos - -- [Button Group](/components/button-group/) -- [Buttons](/components/buttons/) - diff --git a/docs/pages/api-docs/card-action-area.js b/docs/pages/api-docs/card-action-area.js index ce00afb26b9c6e..caeab55fc6f7a4 100644 --- a/docs/pages/api-docs/card-action-area.js +++ b/docs/pages/api-docs/card-action-area.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './card-action-area.json'; -const pageFilename = 'api/card-action-area'; -const requireRaw = require.context('!raw-loader!./', false, /\/card-action-area\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'CardActionArea'); + const classDescriptions = mapApiTranslations(req2, 'CardActionArea'); + const classConditions = mapApiTranslations(req3, 'CardActionArea'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/card-action-area.json b/docs/pages/api-docs/card-action-area.json new file mode 100644 index 00000000000000..6409eda63872a9 --- /dev/null +++ b/docs/pages/api-docs/card-action-area.json @@ -0,0 +1,29 @@ +{ + "name": "CardActionArea", + "filename": "/packages/material-ui/src/CardActionArea/CardActionArea.js", + "description": "", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "focusVisibleClassName": { + "type": { "name": "string" }, + "required": false, + "description": "@ignore" + } + }, + "spread": true, + "styles": { + "classes": ["root", "focusVisible", "focusHighlight"], + "name": "MuiCardActionArea", + "descriptions": {}, + "globalClasses": { + "root": "MuiCardActionArea-root", + "focusVisible": "Mui-focusVisible", + "focusHighlight": "MuiCardActionArea-focusHighlight" + } + }, + "forwardsRefTo": "HTMLButtonElement", + "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" }, + "demos": "- [Cards](/components/cards/)" +} diff --git a/docs/pages/api-docs/card-action-area.md b/docs/pages/api-docs/card-action-area.md deleted file mode 100644 index 64c60083ea46d6..00000000000000 --- a/docs/pages/api-docs/card-action-area.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -filename: /packages/material-ui/src/CardActionArea/CardActionArea.js ---- - - - -# CardActionArea API - -

The API documentation of the CardActionArea React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import CardActionArea from '@material-ui/core/CardActionArea'; -// or -import { CardActionArea } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiCardActionArea` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element ([ButtonBase](/api/button-base/)). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiCardActionArea-root | Styles applied to the root element. -| focusVisible | .Mui-focusVisible | Pseudo-class applied to the ButtonBase root element if the action area is keyboard focused. -| focusHighlight | .MuiCardActionArea-focusHighlight | Styles applied to the overlay that covers the action area when it is keyboard focused. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/CardActionArea/CardActionArea.js) for more detail. - -## Inheritance - -The props of the [ButtonBase](/api/button-base/) component are also available. -You can take advantage of this behavior to [target nested components](/guides/api/#spread). - -## Demos - -- [Cards](/components/cards/) - diff --git a/docs/pages/api-docs/card-actions.js b/docs/pages/api-docs/card-actions.js index 1158a5986fc25b..307253132abff9 100644 --- a/docs/pages/api-docs/card-actions.js +++ b/docs/pages/api-docs/card-actions.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './card-actions.json'; -const pageFilename = 'api/card-actions'; -const requireRaw = require.context('!raw-loader!./', false, /\/card-actions\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'CardActions'); + const classDescriptions = mapApiTranslations(req2, 'CardActions'); + const classConditions = mapApiTranslations(req3, 'CardActions'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/card-actions.json b/docs/pages/api-docs/card-actions.json new file mode 100644 index 00000000000000..d08dd7dffeba6f --- /dev/null +++ b/docs/pages/api-docs/card-actions.json @@ -0,0 +1,26 @@ +{ + "name": "CardActions", + "filename": "/packages/material-ui/src/CardActions/CardActions.js", + "description": "", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "disableSpacing": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + } + }, + "spread": true, + "styles": { + "classes": ["root", "spacing"], + "name": "MuiCardActions", + "descriptions": {}, + "globalClasses": { "root": "MuiCardActions-root", "spacing": "MuiCardActions-spacing" } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": null, + "demos": "- [Cards](/components/cards/)" +} diff --git a/docs/pages/api-docs/card-actions.md b/docs/pages/api-docs/card-actions.md deleted file mode 100644 index e6946471fe8832..00000000000000 --- a/docs/pages/api-docs/card-actions.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -filename: /packages/material-ui/src/CardActions/CardActions.js ---- - - - -# CardActions API - -

The API documentation of the CardActions React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import CardActions from '@material-ui/core/CardActions'; -// or -import { CardActions } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiCardActions` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| disableSpacing | bool | false | If `true`, the actions do not have additional margin. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiCardActions-root | Styles applied to the root element. -| spacing | .MuiCardActions-spacing | Styles applied to the root element unless `disableSpacing={true}`. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/CardActions/CardActions.js) for more detail. - -## Demos - -- [Cards](/components/cards/) - diff --git a/docs/pages/api-docs/card-content.js b/docs/pages/api-docs/card-content.js index 4ada07e2eb72a6..92ade199b37662 100644 --- a/docs/pages/api-docs/card-content.js +++ b/docs/pages/api-docs/card-content.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './card-content.json'; -const pageFilename = 'api/card-content'; -const requireRaw = require.context('!raw-loader!./', false, /\/card-content\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'CardContent'); + const classDescriptions = mapApiTranslations(req2, 'CardContent'); + const classConditions = mapApiTranslations(req3, 'CardContent'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/card-content.json b/docs/pages/api-docs/card-content.json new file mode 100644 index 00000000000000..a18e9b40236197 --- /dev/null +++ b/docs/pages/api-docs/card-content.json @@ -0,0 +1,25 @@ +{ + "name": "CardContent", + "filename": "/packages/material-ui/src/CardContent/CardContent.js", + "description": "", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "component": { + "type": { "name": "elementType" }, + "required": false, + "defaultValue": { "value": "'div'", "computed": false } + } + }, + "spread": true, + "styles": { + "classes": ["root"], + "name": "MuiCardContent", + "descriptions": {}, + "globalClasses": { "root": "MuiCardContent-root" } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": null, + "demos": "- [Cards](/components/cards/)" +} diff --git a/docs/pages/api-docs/card-content.md b/docs/pages/api-docs/card-content.md deleted file mode 100644 index cd54205fc579fc..00000000000000 --- a/docs/pages/api-docs/card-content.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -filename: /packages/material-ui/src/CardContent/CardContent.js ---- - - - -# CardContent API - -

The API documentation of the CardContent React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import CardContent from '@material-ui/core/CardContent'; -// or -import { CardContent } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiCardContent` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | elementType | 'div' | The component used for the root node. Either a string to use a HTML element or a component. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiCardContent-root | Styles applied to the root element. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/CardContent/CardContent.js) for more detail. - -## Demos - -- [Cards](/components/cards/) - diff --git a/docs/pages/api-docs/card-header.js b/docs/pages/api-docs/card-header.js index b65e81e5bf21fa..ec8eb61168608c 100644 --- a/docs/pages/api-docs/card-header.js +++ b/docs/pages/api-docs/card-header.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './card-header.json'; -const pageFilename = 'api/card-header'; -const requireRaw = require.context('!raw-loader!./', false, /\/card-header\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'CardHeader'); + const classDescriptions = mapApiTranslations(req2, 'CardHeader'); + const classConditions = mapApiTranslations(req3, 'CardHeader'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/card-header.json b/docs/pages/api-docs/card-header.json new file mode 100644 index 00000000000000..8509997c2d2fee --- /dev/null +++ b/docs/pages/api-docs/card-header.json @@ -0,0 +1,44 @@ +{ + "name": "CardHeader", + "filename": "/packages/material-ui/src/CardHeader/CardHeader.js", + "description": "", + "props": { + "action": { "type": { "name": "node" }, "required": false }, + "avatar": { "type": { "name": "node" }, "required": false }, + "children": { "type": { "name": "node" }, "required": false, "description": "@ignore" }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "component": { + "type": { "name": "elementType" }, + "required": false, + "defaultValue": { "value": "'div'", "computed": false } + }, + "disableTypography": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "subheader": { "type": { "name": "node" }, "required": false }, + "subheaderTypographyProps": { "type": { "name": "object" }, "required": false }, + "title": { "type": { "name": "node" }, "required": false }, + "titleTypographyProps": { "type": { "name": "object" }, "required": false } + }, + "spread": true, + "styles": { + "classes": ["root", "avatar", "action", "content", "title", "subheader"], + "name": "MuiCardHeader", + "descriptions": {}, + "globalClasses": { + "root": "MuiCardHeader-root", + "avatar": "MuiCardHeader-avatar", + "action": "MuiCardHeader-action", + "content": "MuiCardHeader-content", + "title": "MuiCardHeader-title", + "subheader": "MuiCardHeader-subheader" + } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": null, + "demos": "- [Cards](/components/cards/)" +} diff --git a/docs/pages/api-docs/card-header.md b/docs/pages/api-docs/card-header.md deleted file mode 100644 index 8289db17bc7494..00000000000000 --- a/docs/pages/api-docs/card-header.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -filename: /packages/material-ui/src/CardHeader/CardHeader.js ---- - - - -# CardHeader API - -

The API documentation of the CardHeader React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import CardHeader from '@material-ui/core/CardHeader'; -// or -import { CardHeader } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiCardHeader` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| action | node | | The action to display in the card header. | -| avatar | node | | The Avatar for the Card Header. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | elementType | 'div' | The component used for the root node. Either a string to use a HTML element or a component. | -| disableTypography | bool | false | If `true`, `subheader` and `title` won't be wrapped by a Typography component. This can be useful to render an alternative Typography variant by wrapping the `title` text, and optional `subheader` text with the Typography component. | -| subheader | node | | The content of the component. | -| subheaderTypographyProps | object | | These props will be forwarded to the subheader (as long as disableTypography is not `true`). | -| title | node | | The content of the Card Title. | -| titleTypographyProps | object | | These props will be forwarded to the title (as long as disableTypography is not `true`). | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiCardHeader-root | Styles applied to the root element. -| avatar | .MuiCardHeader-avatar | Styles applied to the avatar element. -| action | .MuiCardHeader-action | Styles applied to the action element. -| content | .MuiCardHeader-content | Styles applied to the content wrapper element. -| title | .MuiCardHeader-title | Styles applied to the title Typography element. -| subheader | .MuiCardHeader-subheader | Styles applied to the subheader Typography element. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/CardHeader/CardHeader.js) for more detail. - -## Demos - -- [Cards](/components/cards/) - diff --git a/docs/pages/api-docs/card-media.js b/docs/pages/api-docs/card-media.js index 8e7ecd8527778e..c9fd849fba5c64 100644 --- a/docs/pages/api-docs/card-media.js +++ b/docs/pages/api-docs/card-media.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './card-media.json'; -const pageFilename = 'api/card-media'; -const requireRaw = require.context('!raw-loader!./', false, /\/card-media\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'CardMedia'); + const classDescriptions = mapApiTranslations(req2, 'CardMedia'); + const classConditions = mapApiTranslations(req3, 'CardMedia'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/card-media.json b/docs/pages/api-docs/card-media.json new file mode 100644 index 00000000000000..fc3e1a6c69bb9e --- /dev/null +++ b/docs/pages/api-docs/card-media.json @@ -0,0 +1,38 @@ +{ + "name": "CardMedia", + "filename": "/packages/material-ui/src/CardMedia/CardMedia.js", + "description": "", + "props": { + "children": { + "type": { + "name": "custom", + "raw": "chainPropTypes(PropTypes.node, (props) => {\n if (!props.children && !props.image && !props.src && !props.component) {\n return new Error(\n 'Material-UI: Either `children`, `image`, `src` or `component` prop must be specified.',\n );\n }\n return null;\n})" + }, + "required": false + }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "component": { + "type": { "name": "elementType" }, + "required": false, + "defaultValue": { "value": "'div'", "computed": false } + }, + "image": { "type": { "name": "string" }, "required": false }, + "src": { "type": { "name": "string" }, "required": false }, + "style": { "type": { "name": "object" }, "required": false, "description": "@ignore" } + }, + "spread": true, + "styles": { + "classes": ["root", "media", "img"], + "name": "MuiCardMedia", + "descriptions": {}, + "globalClasses": { + "root": "MuiCardMedia-root", + "media": "MuiCardMedia-media", + "img": "MuiCardMedia-img" + } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": null, + "demos": "- [Cards](/components/cards/)" +} diff --git a/docs/pages/api-docs/card-media.md b/docs/pages/api-docs/card-media.md deleted file mode 100644 index 10dac103377b5d..00000000000000 --- a/docs/pages/api-docs/card-media.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -filename: /packages/material-ui/src/CardMedia/CardMedia.js ---- - - - -# CardMedia API - -

The API documentation of the CardMedia React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import CardMedia from '@material-ui/core/CardMedia'; -// or -import { CardMedia } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiCardMedia` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | elementType | 'div' | The component used for the root node. Either a string to use a HTML element or a component. | -| image | string | | Image to be displayed as a background image. Either `image` or `src` prop must be specified. Note that caller must specify height otherwise the image will not be visible. | -| src | string | | An alias for `image` property. Available only with media components. Media components: `video`, `audio`, `picture`, `iframe`, `img`. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiCardMedia-root | Styles applied to the root element. -| media | .MuiCardMedia-media | Styles applied to the root element if `component="video, audio, picture, iframe, or img"`. -| img | .MuiCardMedia-img | Styles applied to the root element if `component="picture or img"`. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/CardMedia/CardMedia.js) for more detail. - -## Demos - -- [Cards](/components/cards/) - diff --git a/docs/pages/api-docs/card.js b/docs/pages/api-docs/card.js index b2b7fceadd03bf..54994de0348326 100644 --- a/docs/pages/api-docs/card.js +++ b/docs/pages/api-docs/card.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './card.json'; -const pageFilename = 'api/card'; -const requireRaw = require.context('!raw-loader!./', false, /\/card\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'Card'); + const classDescriptions = mapApiTranslations(req2, 'Card'); + const classConditions = mapApiTranslations(req3, 'Card'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/card.json b/docs/pages/api-docs/card.json new file mode 100644 index 00000000000000..26e281126412d4 --- /dev/null +++ b/docs/pages/api-docs/card.json @@ -0,0 +1,26 @@ +{ + "name": "Card", + "filename": "/packages/material-ui/src/Card/Card.js", + "description": "", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "raised": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + } + }, + "spread": true, + "styles": { + "classes": ["root"], + "name": "MuiCard", + "descriptions": {}, + "globalClasses": { "root": "MuiCard-root" } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": { "component": "Paper", "pathname": "/api/paper/" }, + "demos": "- [Cards](/components/cards/)" +} diff --git a/docs/pages/api-docs/card.md b/docs/pages/api-docs/card.md deleted file mode 100644 index 8b910b3d631aa5..00000000000000 --- a/docs/pages/api-docs/card.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -filename: /packages/material-ui/src/Card/Card.js ---- - - - -# Card API - -

The API documentation of the Card React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import Card from '@material-ui/core/Card'; -// or -import { Card } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiCard` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| raised | bool | false | If `true`, the card will use raised styling. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element ([Paper](/api/paper/)). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiCard-root | Styles applied to the root element. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Card/Card.js) for more detail. - -## Inheritance - -The props of the [Paper](/api/paper/) component are also available. -You can take advantage of this behavior to [target nested components](/guides/api/#spread). - -## Demos - -- [Cards](/components/cards/) - diff --git a/docs/pages/api-docs/checkbox.js b/docs/pages/api-docs/checkbox.js index e6c751fb961224..81e698244d208e 100644 --- a/docs/pages/api-docs/checkbox.js +++ b/docs/pages/api-docs/checkbox.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './checkbox.json'; -const pageFilename = 'api/checkbox'; -const requireRaw = require.context('!raw-loader!./', false, /\/checkbox\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'Checkbox'); + const classDescriptions = mapApiTranslations(req2, 'Checkbox'); + const classConditions = mapApiTranslations(req3, 'Checkbox'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/checkbox.json b/docs/pages/api-docs/checkbox.json new file mode 100644 index 00000000000000..6ec20f51f8e17d --- /dev/null +++ b/docs/pages/api-docs/checkbox.json @@ -0,0 +1,83 @@ +{ + "name": "Checkbox", + "filename": "/packages/material-ui/src/Checkbox/Checkbox.js", + "description": "", + "props": { + "checked": { "type": { "name": "bool" }, "required": false }, + "checkedIcon": { + "type": { "name": "node" }, + "required": false, + "jsdocDefaultValue": { "value": "" }, + "defaultValue": { "value": "", "computed": false } + }, + "classes": { "type": { "name": "object" }, "required": false }, + "color": { + "type": { + "name": "enum", + "value": [ + { "value": "'default'", "computed": false }, + { "value": "'primary'", "computed": false }, + { "value": "'secondary'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'secondary'" }, + "defaultValue": { "value": "'secondary'", "computed": false } + }, + "disabled": { "type": { "name": "bool" }, "required": false }, + "disableRipple": { "type": { "name": "bool" }, "required": false }, + "icon": { + "type": { "name": "node" }, + "required": false, + "jsdocDefaultValue": { "value": "" }, + "defaultValue": { "value": "", "computed": false } + }, + "id": { "type": { "name": "string" }, "required": false }, + "indeterminate": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "indeterminateIcon": { + "type": { "name": "node" }, + "required": false, + "jsdocDefaultValue": { "value": "" }, + "defaultValue": { "value": "", "computed": false } + }, + "inputProps": { "type": { "name": "object" }, "required": false }, + "inputRef": { "type": { "name": "custom", "raw": "refType" }, "required": false }, + "onChange": { "type": { "name": "func" }, "required": false }, + "required": { "type": { "name": "bool" }, "required": false }, + "size": { + "type": { + "name": "enum", + "value": [ + { "value": "'medium'", "computed": false }, + { "value": "'small'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'medium'" }, + "defaultValue": { "value": "'medium'", "computed": false } + }, + "value": { "type": { "name": "any" }, "required": false } + }, + "spread": true, + "styles": { + "classes": ["root", "checked", "disabled", "indeterminate", "colorPrimary", "colorSecondary"], + "name": "MuiCheckbox", + "descriptions": {}, + "globalClasses": { + "root": "MuiCheckbox-root", + "checked": "Mui-checked", + "disabled": "Mui-disabled", + "indeterminate": "MuiCheckbox-indeterminate", + "colorPrimary": "MuiCheckbox-colorPrimary", + "colorSecondary": "MuiCheckbox-colorSecondary" + } + }, + "forwardsRefTo": "HTMLSpanElement", + "inheritance": { "component": "IconButton", "pathname": "/api/icon-button/" }, + "demos": "- [Checkboxes](/components/checkboxes/)\n- [Transfer List](/components/transfer-list/)" +} diff --git a/docs/pages/api-docs/checkbox.md b/docs/pages/api-docs/checkbox.md deleted file mode 100644 index b627db3f099297..00000000000000 --- a/docs/pages/api-docs/checkbox.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -filename: /packages/material-ui/src/Checkbox/Checkbox.js ---- - - - -# Checkbox API - -

The API documentation of the Checkbox React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import Checkbox from '@material-ui/core/Checkbox'; -// or -import { Checkbox } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiCheckbox` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| checked | bool | | If `true`, the component is checked. | -| checkedIcon | node | <CheckBoxIcon /> | The icon to display when the component is checked. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'default'
| 'primary'
| 'secondary' | 'secondary' | The color of the component. It supports those theme colors that make sense for this component. | -| disabled | bool | | If `true`, the checkbox will be disabled. | -| disableRipple | bool | | If `true`, the ripple effect will be disabled. | -| icon | node | <CheckBoxOutlineBlankIcon /> | The icon to display when the component is unchecked. | -| id | string | | The id of the `input` element. | -| indeterminate | bool | false | If `true`, the component appears indeterminate. This does not set the native input element to indeterminate due to inconsistent behavior across browsers. However, we set a `data-indeterminate` attribute on the input. | -| indeterminateIcon | node | <IndeterminateCheckBoxIcon /> | The icon to display when the component is indeterminate. | -| inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | -| inputRef | ref | | Pass a ref to the `input` element. | -| onChange | func | | Callback fired when the state is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new checked state by accessing `event.target.checked` (boolean). | -| required | bool | | If `true`, the `input` element will be required. | -| size | 'medium'
| 'small' | 'medium' | The size of the checkbox. `small` is equivalent to the dense checkbox styling. | -| value | any | | The value of the component. The DOM API casts this to a string. The browser uses "on" as the default value. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element ([IconButton](/api/icon-button/)). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiCheckbox-root | Styles applied to the root element. -| checked | .Mui-checked | Pseudo-class applied to the root element if `checked={true}`. -| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. -| indeterminate | .MuiCheckbox-indeterminate | Pseudo-class applied to the root element if `indeterminate={true}`. -| colorPrimary | .MuiCheckbox-colorPrimary | Styles applied to the root element if `color="primary"`. -| colorSecondary | .MuiCheckbox-colorSecondary | Styles applied to the root element if `color="secondary"`. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Checkbox/Checkbox.js) for more detail. - -## Inheritance - -The props of the [IconButton](/api/icon-button/) component are also available. -You can take advantage of this behavior to [target nested components](/guides/api/#spread). - -## Demos - -- [Checkboxes](/components/checkboxes/) -- [Transfer List](/components/transfer-list/) - diff --git a/docs/pages/api-docs/chip.js b/docs/pages/api-docs/chip.js index b2e5b41ab626f1..be22493de0d8b7 100644 --- a/docs/pages/api-docs/chip.js +++ b/docs/pages/api-docs/chip.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './chip.json'; -const pageFilename = 'api/chip'; -const requireRaw = require.context('!raw-loader!./', false, /\/chip\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'Chip'); + const classDescriptions = mapApiTranslations(req2, 'Chip'); + const classConditions = mapApiTranslations(req3, 'Chip'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/chip.json b/docs/pages/api-docs/chip.json new file mode 100644 index 00000000000000..3e5a08c3c829f8 --- /dev/null +++ b/docs/pages/api-docs/chip.json @@ -0,0 +1,145 @@ +{ + "name": "Chip", + "filename": "/packages/material-ui/src/Chip/Chip.js", + "description": "Chips represent complex entities in small blocks, such as a contact.", + "props": { + "avatar": { "type": { "name": "element" }, "required": false }, + "children": { "type": { "name": "custom", "raw": "unsupportedProp" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "clickable": { "type": { "name": "bool" }, "required": false }, + "color": { + "type": { + "name": "enum", + "value": [ + { "value": "'default'", "computed": false }, + { "value": "'primary'", "computed": false }, + { "value": "'secondary'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'default'" }, + "defaultValue": { "value": "'default'", "computed": false } + }, + "component": { "type": { "name": "elementType" }, "required": false }, + "deleteIcon": { "type": { "name": "element" }, "required": false }, + "disabled": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "icon": { "type": { "name": "element" }, "required": false }, + "label": { "type": { "name": "node" }, "required": false }, + "onClick": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onDelete": { "type": { "name": "func" }, "required": false }, + "onKeyDown": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onKeyUp": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "size": { + "type": { + "name": "enum", + "value": [ + { "value": "'medium'", "computed": false }, + { "value": "'small'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'medium'" }, + "defaultValue": { "value": "'medium'", "computed": false } + }, + "variant": { + "type": { + "name": "union", + "value": [ + { + "name": "enum", + "value": [ + { "value": "'filled'", "computed": false }, + { "value": "'outlined'", "computed": false } + ] + }, + { "name": "string" } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'filled'" }, + "defaultValue": { "value": "'filled'", "computed": false } + } + }, + "spread": true, + "styles": { + "classes": [ + "root", + "sizeSmall", + "colorPrimary", + "colorSecondary", + "disabled", + "clickable", + "clickableColorPrimary", + "clickableColorSecondary", + "deletable", + "deletableColorPrimary", + "deletableColorSecondary", + "outlined", + "filled", + "outlinedPrimary", + "outlinedSecondary", + "avatar", + "avatarSmall", + "avatarColorPrimary", + "avatarColorSecondary", + "icon", + "iconSmall", + "iconColorPrimary", + "iconColorSecondary", + "label", + "labelSmall", + "deleteIcon", + "deleteIconSmall", + "deleteIconColorPrimary", + "deleteIconColorSecondary", + "deleteIconOutlinedColorPrimary", + "deleteIconOutlinedColorSecondary", + "focusVisible" + ], + "name": "MuiChip", + "descriptions": {}, + "globalClasses": { + "root": "MuiChip-root", + "sizeSmall": "MuiChip-sizeSmall", + "colorPrimary": "MuiChip-colorPrimary", + "colorSecondary": "MuiChip-colorSecondary", + "disabled": "Mui-disabled", + "clickable": "MuiChip-clickable", + "clickableColorPrimary": "MuiChip-clickableColorPrimary", + "clickableColorSecondary": "MuiChip-clickableColorSecondary", + "deletable": "MuiChip-deletable", + "deletableColorPrimary": "MuiChip-deletableColorPrimary", + "deletableColorSecondary": "MuiChip-deletableColorSecondary", + "outlined": "MuiChip-outlined", + "filled": "MuiChip-filled", + "outlinedPrimary": "MuiChip-outlinedPrimary", + "outlinedSecondary": "MuiChip-outlinedSecondary", + "avatar": "MuiChip-avatar", + "avatarSmall": "MuiChip-avatarSmall", + "avatarColorPrimary": "MuiChip-avatarColorPrimary", + "avatarColorSecondary": "MuiChip-avatarColorSecondary", + "icon": "MuiChip-icon", + "iconSmall": "MuiChip-iconSmall", + "iconColorPrimary": "MuiChip-iconColorPrimary", + "iconColorSecondary": "MuiChip-iconColorSecondary", + "label": "MuiChip-label", + "labelSmall": "MuiChip-labelSmall", + "deleteIcon": "MuiChip-deleteIcon", + "deleteIconSmall": "MuiChip-deleteIconSmall", + "deleteIconColorPrimary": "MuiChip-deleteIconColorPrimary", + "deleteIconColorSecondary": "MuiChip-deleteIconColorSecondary", + "deleteIconOutlinedColorPrimary": "MuiChip-deleteIconOutlinedColorPrimary", + "deleteIconOutlinedColorSecondary": "MuiChip-deleteIconOutlinedColorSecondary", + "focusVisible": "Mui-focusVisible" + } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": null, + "demos": "- [Chips](/components/chips/)" +} diff --git a/docs/pages/api-docs/chip.md b/docs/pages/api-docs/chip.md deleted file mode 100644 index c002f647cd9541..00000000000000 --- a/docs/pages/api-docs/chip.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -filename: /packages/material-ui/src/Chip/Chip.js ---- - - - -# Chip API - -

The API documentation of the Chip React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import Chip from '@material-ui/core/Chip'; -// or -import { Chip } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - -Chips represent complex entities in small blocks, such as a contact. - -## Component name - -The `MuiChip` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| avatar | element | | Avatar element. | -| children | unsupportedProp | | This prop isn't supported. Use the `component` prop if you need to change the children structure. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| clickable | bool | | If `true`, the chip will appear clickable, and will raise when pressed, even if the onClick prop is not defined. If false, the chip will not be clickable, even if onClick prop is defined. This can be used, for example, along with the component prop to indicate an anchor Chip is clickable. | -| color | 'default'
| 'primary'
| 'secondary' | 'default' | The color of the component. It supports those theme colors that make sense for this component. | -| component | elementType | | The component used for the root node. Either a string to use a HTML element or a component. | -| deleteIcon | element | | Override the default delete icon element. Shown only if `onDelete` is set. | -| disabled | bool | false | If `true`, the chip should be displayed in a disabled state. | -| icon | element | | Icon element. | -| label | node | | The content of the label. | -| onDelete | func | | Callback fired when the delete icon is clicked. If set, the delete icon will be shown. | -| size | 'medium'
| 'small' | 'medium' | The size of the chip. | -| variant | 'filled'
| 'outlined'
| string | 'filled' | The variant to use. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiChip-root | Styles applied to the root element. -| sizeSmall | .MuiChip-sizeSmall | Styles applied to the root element if `size="small"`. -| colorPrimary | .MuiChip-colorPrimary | Styles applied to the root element if `color="primary"`. -| colorSecondary | .MuiChip-colorSecondary | Styles applied to the root element if `color="secondary"`. -| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. -| clickable | .MuiChip-clickable | Styles applied to the root element if `onClick` is defined or `clickable={true}`. -| clickableColorPrimary | .MuiChip-clickableColorPrimary | Styles applied to the root element if `onClick` and `color="primary"` is defined or `clickable={true}`. -| clickableColorSecondary | .MuiChip-clickableColorSecondary | Styles applied to the root element if `onClick` and `color="secondary"` is defined or `clickable={true}`. -| deletable | .MuiChip-deletable | Styles applied to the root element if `onDelete` is defined. -| deletableColorPrimary | .MuiChip-deletableColorPrimary | Styles applied to the root element if `onDelete` and `color="primary"` is defined. -| deletableColorSecondary | .MuiChip-deletableColorSecondary | Styles applied to the root element if `onDelete` and `color="secondary"` is defined. -| outlined | .MuiChip-outlined | Styles applied to the root element if `variant="outlined"`. -| filled | .MuiChip-filled | Styles applied to the root element if `variant="filled"`. -| outlinedPrimary | .MuiChip-outlinedPrimary | Styles applied to the root element if `variant="outlined"` and `color="primary"`. -| outlinedSecondary | .MuiChip-outlinedSecondary | Styles applied to the root element if `variant="outlined"` and `color="secondary"`. -| avatar | .MuiChip-avatar | Styles applied to the `avatar` element. -| avatarSmall | .MuiChip-avatarSmall | Styles applied to the `avatar` element if `size="small"`. -| avatarColorPrimary | .MuiChip-avatarColorPrimary | Styles applied to the `avatar` element if `color="primary"`. -| avatarColorSecondary | .MuiChip-avatarColorSecondary | Styles applied to the `avatar` element if `color="secondary"`. -| icon | .MuiChip-icon | Styles applied to the `icon` element. -| iconSmall | .MuiChip-iconSmall | Styles applied to the `icon` element if `size="small"`. -| iconColorPrimary | .MuiChip-iconColorPrimary | Styles applied to the `icon` element if `color="primary"`. -| iconColorSecondary | .MuiChip-iconColorSecondary | Styles applied to the `icon` element if `color="secondary"`. -| label | .MuiChip-label | Styles applied to the label `span` element. -| labelSmall | .MuiChip-labelSmall | Styles applied to the label `span` element if `size="small"`. -| deleteIcon | .MuiChip-deleteIcon | Styles applied to the `deleteIcon` element. -| deleteIconSmall | .MuiChip-deleteIconSmall | Styles applied to the `deleteIcon` element if `size="small"`. -| deleteIconColorPrimary | .MuiChip-deleteIconColorPrimary | Styles applied to the deleteIcon element if `color="primary"` and `variant="filled"`. -| deleteIconColorSecondary | .MuiChip-deleteIconColorSecondary | Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`. -| deleteIconOutlinedColorPrimary | .MuiChip-deleteIconOutlinedColorPrimary | Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`. -| deleteIconOutlinedColorSecondary | .MuiChip-deleteIconOutlinedColorSecondary | Styles applied to the deleteIcon element if `color="secondary"` and `variant="outlined"`. -| focusVisible | .Mui-focusVisible | Pseudo-class applied to the root element if keyboard focused. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Chip/Chip.js) for more detail. - -## Demos - -- [Chips](/components/chips/) - diff --git a/docs/pages/api-docs/circular-progress.js b/docs/pages/api-docs/circular-progress.js index 154208c945f323..496799f4d48368 100644 --- a/docs/pages/api-docs/circular-progress.js +++ b/docs/pages/api-docs/circular-progress.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './circular-progress.json'; -const pageFilename = 'api/circular-progress'; -const requireRaw = require.context('!raw-loader!./', false, /\/circular-progress\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'CircularProgress'); + const classDescriptions = mapApiTranslations(req2, 'CircularProgress'); + const classConditions = mapApiTranslations(req3, 'CircularProgress'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/circular-progress.json b/docs/pages/api-docs/circular-progress.json new file mode 100644 index 00000000000000..92adfb9c080339 --- /dev/null +++ b/docs/pages/api-docs/circular-progress.json @@ -0,0 +1,94 @@ +{ + "name": "CircularProgress", + "filename": "/packages/material-ui/src/CircularProgress/CircularProgress.js", + "description": "## ARIA\n\nIf the progress bar is describing the loading progress of a particular region of a page,\nyou should use `aria-describedby` to point to the progress bar, and set the `aria-busy`\nattribute to `true` on that region until it has finished loading.", + "props": { + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "color": { + "type": { + "name": "enum", + "value": [ + { "value": "'inherit'", "computed": false }, + { "value": "'primary'", "computed": false }, + { "value": "'secondary'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'primary'" }, + "defaultValue": { "value": "'primary'", "computed": false } + }, + "disableShrink": { + "type": { + "name": "custom", + "raw": "chainPropTypes(PropTypes.bool, (props) => {\n if (props.disableShrink && props.variant && props.variant !== 'indeterminate') {\n return new Error(\n 'Material-UI: You have provided the `disableShrink` prop ' +\n 'with a variant other than `indeterminate`. This will have no effect.',\n );\n }\n\n return null;\n})" + }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "size": { + "type": { "name": "union", "value": [{ "name": "number" }, { "name": "string" }] }, + "required": false, + "jsdocDefaultValue": { "value": "40" }, + "defaultValue": { "value": "40", "computed": false } + }, + "style": { "type": { "name": "object" }, "required": false, "description": "@ignore" }, + "thickness": { + "type": { "name": "number" }, + "required": false, + "jsdocDefaultValue": { "value": "3.6" }, + "defaultValue": { "value": "3.6", "computed": false } + }, + "value": { + "type": { "name": "number" }, + "required": false, + "jsdocDefaultValue": { "value": "0" }, + "defaultValue": { "value": "0", "computed": false } + }, + "variant": { + "type": { + "name": "enum", + "value": [ + { "value": "'determinate'", "computed": false }, + { "value": "'indeterminate'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'indeterminate'" }, + "defaultValue": { "value": "'indeterminate'", "computed": false } + } + }, + "spread": true, + "styles": { + "classes": [ + "root", + "determinate", + "indeterminate", + "colorPrimary", + "colorSecondary", + "svg", + "circle", + "circleDeterminate", + "circleIndeterminate", + "circleDisableShrink" + ], + "name": "MuiCircularProgress", + "descriptions": {}, + "globalClasses": { + "root": "MuiCircularProgress-root", + "determinate": "MuiCircularProgress-determinate", + "indeterminate": "MuiCircularProgress-indeterminate", + "colorPrimary": "MuiCircularProgress-colorPrimary", + "colorSecondary": "MuiCircularProgress-colorSecondary", + "svg": "MuiCircularProgress-svg", + "circle": "MuiCircularProgress-circle", + "circleDeterminate": "MuiCircularProgress-circleDeterminate", + "circleIndeterminate": "MuiCircularProgress-circleIndeterminate", + "circleDisableShrink": "MuiCircularProgress-circleDisableShrink" + } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": null, + "demos": "- [Progress](/components/progress/)" +} diff --git a/docs/pages/api-docs/circular-progress.md b/docs/pages/api-docs/circular-progress.md deleted file mode 100644 index ecdc8b37c2bada..00000000000000 --- a/docs/pages/api-docs/circular-progress.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -filename: /packages/material-ui/src/CircularProgress/CircularProgress.js ---- - - - -# CircularProgress API - -

The API documentation of the CircularProgress React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import CircularProgress from '@material-ui/core/CircularProgress'; -// or -import { CircularProgress } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - -## ARIA - -If the progress bar is describing the loading progress of a particular region of a page, -you should use `aria-describedby` to point to the progress bar, and set the `aria-busy` -attribute to `true` on that region until it has finished loading. - -## Component name - -The `MuiCircularProgress` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'inherit'
| 'primary'
| 'secondary' | 'primary' | The color of the component. It supports those theme colors that make sense for this component. | -| disableShrink | bool | false | If `true`, the shrink animation is disabled. This only works if variant is `indeterminate`. | -| size | number
| string | 40 | The size of the circle. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g '3rem'. | -| thickness | number | 3.6 | The thickness of the circle. | -| value | number | 0 | The value of the progress indicator for the determinate variant. Value between 0 and 100. | -| variant | 'determinate'
| 'indeterminate' | 'indeterminate' | The variant to use. Use indeterminate when there is no progress value. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiCircularProgress-root | Styles applied to the root element. -| determinate | .MuiCircularProgress-determinate | Styles applied to the root element if `variant="determinate"`. -| indeterminate | .MuiCircularProgress-indeterminate | Styles applied to the root element if `variant="indeterminate"`. -| colorPrimary | .MuiCircularProgress-colorPrimary | Styles applied to the root element if `color="primary"`. -| colorSecondary | .MuiCircularProgress-colorSecondary | Styles applied to the root element if `color="secondary"`. -| svg | .MuiCircularProgress-svg | Styles applied to the `svg` element. -| circle | .MuiCircularProgress-circle | Styles applied to the `circle` svg path. -| circleDeterminate | .MuiCircularProgress-circleDeterminate | Styles applied to the `circle` svg path if `variant="determinate"`. -| circleIndeterminate | .MuiCircularProgress-circleIndeterminate | Styles applied to the `circle` svg path if `variant="indeterminate"`. -| circleDisableShrink | .MuiCircularProgress-circleDisableShrink | Styles applied to the `circle` svg path if `disableShrink={true}`. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/CircularProgress/CircularProgress.js) for more detail. - -## Demos - -- [Progress](/components/progress/) - diff --git a/docs/pages/api-docs/click-away-listener.js b/docs/pages/api-docs/click-away-listener.js index 43b7a90994cce9..a985c5b8e9a673 100644 --- a/docs/pages/api-docs/click-away-listener.js +++ b/docs/pages/api-docs/click-away-listener.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './click-away-listener.json'; -const pageFilename = 'api/click-away-listener'; -const requireRaw = require.context('!raw-loader!./', false, /\/click-away-listener\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'ClickAwayListener'); + const classDescriptions = mapApiTranslations(req2, 'ClickAwayListener'); + const classConditions = mapApiTranslations(req3, 'ClickAwayListener'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/click-away-listener.json b/docs/pages/api-docs/click-away-listener.json new file mode 100644 index 00000000000000..706482ba58ec96 --- /dev/null +++ b/docs/pages/api-docs/click-away-listener.json @@ -0,0 +1,49 @@ +{ + "name": "ClickAwayListener", + "filename": "/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js", + "description": "Listen for click events that occur somewhere in the document, outside of the element itself.\nFor instance, if you need to hide a menu when people click anywhere else on your page.", + "props": { + "children": { + "type": { "name": "custom", "raw": "elementAcceptingRef.isRequired" }, + "required": false + }, + "disableReactTree": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "mouseEvent": { + "type": { + "name": "enum", + "value": [ + { "value": "'onClick'", "computed": false }, + { "value": "'onMouseDown'", "computed": false }, + { "value": "'onMouseUp'", "computed": false }, + { "value": "false", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'onClick'" }, + "defaultValue": { "value": "'onClick'", "computed": false } + }, + "onClickAway": { "type": { "name": "func" }, "required": true }, + "touchEvent": { + "type": { + "name": "enum", + "value": [ + { "value": "'onTouchEnd'", "computed": false }, + { "value": "'onTouchStart'", "computed": false }, + { "value": "false", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'onTouchEnd'" }, + "defaultValue": { "value": "'onTouchEnd'", "computed": false } + } + }, + "spread": false, + "styles": { "classes": [], "name": null, "descriptions": {}, "globalClasses": {} }, + "inheritance": null, + "demos": "- [Click Away Listener](/components/click-away-listener/)\n- [Menus](/components/menus/)" +} diff --git a/docs/pages/api-docs/click-away-listener.md b/docs/pages/api-docs/click-away-listener.md deleted file mode 100644 index ecba2f2884ce37..00000000000000 --- a/docs/pages/api-docs/click-away-listener.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -filename: /packages/material-ui/src/ClickAwayListener/ClickAwayListener.js ---- - - - -# ClickAwayListener API - -

The API documentation of the ClickAwayListener React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import ClickAwayListener from '@material-ui/core/ClickAwayListener'; -// or -import { ClickAwayListener } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - -Listen for click events that occur somewhere in the document, outside of the element itself. -For instance, if you need to hide a menu when people click anywhere else on your page. - - - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children* | element | | The wrapped element.
⚠️ [Needs to be able to hold a ref](/guides/composition/#caveat-with-refs). | -| disableReactTree | bool | false | If `true`, the React tree is ignored and only the DOM tree is considered. This prop changes how portaled elements are handled. | -| mouseEvent | 'onClick'
| 'onMouseDown'
| 'onMouseUp'
| false | 'onClick' | The mouse event to listen to. You can disable the listener by providing `false`. | -| onClickAway* | func | | Callback fired when a "click away" event is detected. | -| touchEvent | 'onTouchEnd'
| 'onTouchStart'
| false | 'onTouchEnd' | The touch event to listen to. You can disable the listener by providing `false`. | - -The component cannot hold a ref. - - -## Demos - -- [Click Away Listener](/components/click-away-listener/) -- [Menus](/components/menus/) - diff --git a/docs/pages/api-docs/collapse.js b/docs/pages/api-docs/collapse.js index 4f99e7ff06e9a3..a9f6243f6f6bf4 100644 --- a/docs/pages/api-docs/collapse.js +++ b/docs/pages/api-docs/collapse.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './collapse.json'; -const pageFilename = 'api/collapse'; -const requireRaw = require.context('!raw-loader!./', false, /\/collapse\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'Collapse'); + const classDescriptions = mapApiTranslations(req2, 'Collapse'); + const classConditions = mapApiTranslations(req3, 'Collapse'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/collapse.json b/docs/pages/api-docs/collapse.json new file mode 100644 index 00000000000000..63d075984a57e2 --- /dev/null +++ b/docs/pages/api-docs/collapse.json @@ -0,0 +1,81 @@ +{ + "name": "Collapse", + "filename": "/packages/material-ui/src/Collapse/Collapse.js", + "description": "The Collapse transition is used by the\n[Vertical Stepper](/components/steppers/#vertical-stepper) StepContent component.\nIt uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "collapsedSize": { + "type": { "name": "union", "value": [{ "name": "number" }, { "name": "string" }] }, + "required": false, + "jsdocDefaultValue": { "value": "'0px'" }, + "defaultValue": { "value": "'0px'", "computed": false } + }, + "component": { + "type": { "name": "custom", "raw": "elementTypeAcceptingRef" }, + "required": false, + "defaultValue": { "value": "'div'", "computed": false } + }, + "in": { "type": { "name": "bool" }, "required": false }, + "onEnter": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onEntered": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onEntering": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onExit": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onExited": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onExiting": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "orientation": { + "type": { + "name": "enum", + "value": [ + { "value": "'horizontal'", "computed": false }, + { "value": "'vertical'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'vertical'" }, + "defaultValue": { "value": "'vertical'", "computed": false } + }, + "style": { "type": { "name": "object" }, "required": false, "description": "@ignore" }, + "timeout": { + "type": { + "name": "union", + "value": [ + { "name": "enum", "value": [{ "value": "'auto'", "computed": false }] }, + { "name": "number" }, + { + "name": "shape", + "value": { + "appear": { "name": "number", "required": false }, + "enter": { "name": "number", "required": false }, + "exit": { "name": "number", "required": false } + } + } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "duration.standard" }, + "defaultValue": { "value": "duration.standard", "computed": true } + } + }, + "spread": true, + "styles": { + "classes": ["root", "horizontal", "entered", "hidden", "wrapper", "wrapperInner"], + "name": "MuiCollapse", + "descriptions": {}, + "globalClasses": { + "root": "MuiCollapse-root", + "horizontal": "MuiCollapse-horizontal", + "entered": "MuiCollapse-entered", + "hidden": "MuiCollapse-hidden", + "wrapper": "MuiCollapse-wrapper", + "wrapperInner": "MuiCollapse-wrapperInner" + } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": { + "component": "Transition", + "pathname": "https://reactcommunity.org/react-transition-group/transition#Transition-props" + }, + "demos": "- [Cards](/components/cards/)\n- [Lists](/components/lists/)\n- [Transitions](/components/transitions/)" +} diff --git a/docs/pages/api-docs/collapse.md b/docs/pages/api-docs/collapse.md deleted file mode 100644 index 050187b068a25c..00000000000000 --- a/docs/pages/api-docs/collapse.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -filename: /packages/material-ui/src/Collapse/Collapse.js ---- - - - -# Collapse API - -

The API documentation of the Collapse React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import Collapse from '@material-ui/core/Collapse'; -// or -import { Collapse } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - -The Collapse transition is used by the -[Vertical Stepper](/components/steppers/#vertical-stepper) StepContent component. -It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally. - -## Component name - -The `MuiCollapse` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The content node to be collapsed. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| collapsedSize | number
| string | '0px' | The width (horizontal) or height (vertical) of the container when collapsed. | -| component | element type | 'div' | The component used for the root node. Either a string to use a HTML element or a component.
⚠️ [Needs to be able to hold a ref](/guides/composition/#caveat-with-refs). | -| in | bool | | If `true`, the component will transition in. | -| orientation | 'horizontal'
| 'vertical' | 'vertical' | The collapse transition orientation. | -| timeout | 'auto'
| number
| { appear?: number, enter?: number, exit?: number } | duration.standard | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
Set to 'auto' to automatically calculate transition time based on height. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element ([Transition](https://reactcommunity.org/react-transition-group/transition#Transition-props)). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiCollapse-root | Styles applied to the root element. -| horizontal | .MuiCollapse-horizontal | Pseudo-class applied to the root element if `orientation="horizontal"`. -| entered | .MuiCollapse-entered | Styles applied to the root element when the transition has entered. -| hidden | .MuiCollapse-hidden | Styles applied to the root element when the transition has exited and `collapsedSize` != 0px. -| wrapper | .MuiCollapse-wrapper | Styles applied to the outer wrapper element. -| wrapperInner | .MuiCollapse-wrapperInner | Styles applied to the inner wrapper element. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Collapse/Collapse.js) for more detail. - -## Inheritance - -The props of the [Transition](https://reactcommunity.org/react-transition-group/transition#Transition-props) component, from react-transition-group, are also available. -You can take advantage of this behavior to [target nested components](/guides/api/#spread). - -## Demos - -- [Cards](/components/cards/) -- [Lists](/components/lists/) -- [Transitions](/components/transitions/) - diff --git a/docs/pages/api-docs/container.js b/docs/pages/api-docs/container.js index 367330ec6a89d5..8e712dc87d28fb 100644 --- a/docs/pages/api-docs/container.js +++ b/docs/pages/api-docs/container.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './container.json'; -const pageFilename = 'api/container'; -const requireRaw = require.context('!raw-loader!./', false, /\/container\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'Container'); + const classDescriptions = mapApiTranslations(req2, 'Container'); + const classConditions = mapApiTranslations(req3, 'Container'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/container.json b/docs/pages/api-docs/container.json new file mode 100644 index 00000000000000..e43dc086ceb8a5 --- /dev/null +++ b/docs/pages/api-docs/container.json @@ -0,0 +1,71 @@ +{ + "name": "Container", + "filename": "/packages/material-ui/src/Container/Container.js", + "description": "", + "props": { + "children": { "type": { "name": "node" }, "required": false, "description": "@ignore" }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "component": { + "type": { "name": "elementType" }, + "required": false, + "defaultValue": { "value": "'div'", "computed": false } + }, + "disableGutters": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "fixed": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "maxWidth": { + "type": { + "name": "enum", + "value": [ + { "value": "'lg'", "computed": false }, + { "value": "'md'", "computed": false }, + { "value": "'sm'", "computed": false }, + { "value": "'xl'", "computed": false }, + { "value": "'xs'", "computed": false }, + { "value": "false", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'lg'" }, + "defaultValue": { "value": "'lg'", "computed": false } + } + }, + "spread": true, + "styles": { + "classes": [ + "root", + "disableGutters", + "fixed", + "maxWidthXs", + "maxWidthSm", + "maxWidthMd", + "maxWidthLg", + "maxWidthXl" + ], + "name": "MuiContainer", + "descriptions": {}, + "globalClasses": { + "root": "MuiContainer-root", + "disableGutters": "MuiContainer-disableGutters", + "fixed": "MuiContainer-fixed", + "maxWidthXs": "MuiContainer-maxWidthXs", + "maxWidthSm": "MuiContainer-maxWidthSm", + "maxWidthMd": "MuiContainer-maxWidthMd", + "maxWidthLg": "MuiContainer-maxWidthLg", + "maxWidthXl": "MuiContainer-maxWidthXl" + } + }, + "forwardsRefTo": "HTMLElement", + "inheritance": null, + "demos": "- [Container](/components/container/)" +} diff --git a/docs/pages/api-docs/container.md b/docs/pages/api-docs/container.md deleted file mode 100644 index ec9e5dead67ce4..00000000000000 --- a/docs/pages/api-docs/container.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -filename: /packages/material-ui/src/Container/Container.js ---- - - - -# Container API - -

The API documentation of the Container React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import Container from '@material-ui/core/Container'; -// or -import { Container } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiContainer` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | elementType | 'div' | The component used for the root node. Either a string to use a HTML element or a component. | -| disableGutters | bool | false | If `true`, the left and right padding is removed. | -| fixed | bool | false | Set the max-width to match the min-width of the current breakpoint. This is useful if you'd prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport. It's fluid by default. | -| maxWidth | 'lg'
| 'md'
| 'sm'
| 'xl'
| 'xs'
| false | 'lg' | Determine the max-width of the container. The container width grows with the size of the screen. Set to `false` to disable `maxWidth`. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiContainer-root | Styles applied to the root element. -| disableGutters | .MuiContainer-disableGutters | Styles applied to the root element if `disableGutters={true}`. -| fixed | .MuiContainer-fixed | Styles applied to the root element if `fixed={true}`. -| maxWidthXs | .MuiContainer-maxWidthXs | Styles applied to the root element if `maxWidth="xs"`. -| maxWidthSm | .MuiContainer-maxWidthSm | Styles applied to the root element if `maxWidth="sm"`. -| maxWidthMd | .MuiContainer-maxWidthMd | Styles applied to the root element if `maxWidth="md"`. -| maxWidthLg | .MuiContainer-maxWidthLg | Styles applied to the root element if `maxWidth="lg"`. -| maxWidthXl | .MuiContainer-maxWidthXl | Styles applied to the root element if `maxWidth="xl"`. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Container/Container.js) for more detail. - -## Demos - -- [Container](/components/container/) - diff --git a/docs/pages/api-docs/css-baseline.js b/docs/pages/api-docs/css-baseline.js index 6ef62b32af7582..ebfe1f5154d2f7 100644 --- a/docs/pages/api-docs/css-baseline.js +++ b/docs/pages/api-docs/css-baseline.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './css-baseline.json'; -const pageFilename = 'api/css-baseline'; -const requireRaw = require.context('!raw-loader!./', false, /\/css-baseline\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'CssBaseline'); + const classDescriptions = mapApiTranslations(req2, 'CssBaseline'); + const classConditions = mapApiTranslations(req3, 'CssBaseline'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/css-baseline.json b/docs/pages/api-docs/css-baseline.json new file mode 100644 index 00000000000000..2b186345de7bc8 --- /dev/null +++ b/docs/pages/api-docs/css-baseline.json @@ -0,0 +1,17 @@ +{ + "name": "CssBaseline", + "filename": "/packages/material-ui/src/CssBaseline/CssBaseline.js", + "description": "Kickstart an elegant, consistent, and simple baseline to build upon.", + "props": { + "children": { + "type": { "name": "node" }, + "required": false, + "jsdocDefaultValue": { "value": "null" }, + "defaultValue": { "value": "null", "computed": false } + } + }, + "spread": false, + "styles": { "classes": [], "name": "MuiCssBaseline", "descriptions": {}, "globalClasses": {} }, + "inheritance": null, + "demos": "- [Css Baseline](/components/css-baseline/)" +} diff --git a/docs/pages/api-docs/css-baseline.md b/docs/pages/api-docs/css-baseline.md deleted file mode 100644 index 015143faae2a6c..00000000000000 --- a/docs/pages/api-docs/css-baseline.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -filename: /packages/material-ui/src/CssBaseline/CssBaseline.js ---- - - - -# CssBaseline API - -

The API documentation of the CssBaseline React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import CssBaseline from '@material-ui/core/CssBaseline'; -// or -import { CssBaseline } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - -Kickstart an elegant, consistent, and simple baseline to build upon. - -## Component name - -The `MuiCssBaseline` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | null | You can wrap a node. | - -The component cannot hold a ref. - - -## Demos - -- [Css Baseline](/components/css-baseline/) - diff --git a/docs/pages/api-docs/dialog-actions.js b/docs/pages/api-docs/dialog-actions.js index 47db03616798a0..9886df8add0d19 100644 --- a/docs/pages/api-docs/dialog-actions.js +++ b/docs/pages/api-docs/dialog-actions.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './dialog-actions.json'; -const pageFilename = 'api/dialog-actions'; -const requireRaw = require.context('!raw-loader!./', false, /\/dialog-actions\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'DialogActions'); + const classDescriptions = mapApiTranslations(req2, 'DialogActions'); + const classConditions = mapApiTranslations(req3, 'DialogActions'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/dialog-actions.json b/docs/pages/api-docs/dialog-actions.json new file mode 100644 index 00000000000000..d7b13a075ccb45 --- /dev/null +++ b/docs/pages/api-docs/dialog-actions.json @@ -0,0 +1,26 @@ +{ + "name": "DialogActions", + "filename": "/packages/material-ui/src/DialogActions/DialogActions.js", + "description": "", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "disableSpacing": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + } + }, + "spread": true, + "styles": { + "classes": ["root", "spacing"], + "name": "MuiDialogActions", + "descriptions": {}, + "globalClasses": { "root": "MuiDialogActions-root", "spacing": "MuiDialogActions-spacing" } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": null, + "demos": "- [Dialogs](/components/dialogs/)" +} diff --git a/docs/pages/api-docs/dialog-actions.md b/docs/pages/api-docs/dialog-actions.md deleted file mode 100644 index c3f807ba491ade..00000000000000 --- a/docs/pages/api-docs/dialog-actions.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -filename: /packages/material-ui/src/DialogActions/DialogActions.js ---- - - - -# DialogActions API - -

The API documentation of the DialogActions React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import DialogActions from '@material-ui/core/DialogActions'; -// or -import { DialogActions } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiDialogActions` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| disableSpacing | bool | false | If `true`, the actions do not have additional margin. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiDialogActions-root | Styles applied to the root element. -| spacing | .MuiDialogActions-spacing | Styles applied to the root element unless `disableSpacing={true}`. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/DialogActions/DialogActions.js) for more detail. - -## Demos - -- [Dialogs](/components/dialogs/) - diff --git a/docs/pages/api-docs/dialog-content-text.js b/docs/pages/api-docs/dialog-content-text.js index 655db26bff595b..44cd738e326549 100644 --- a/docs/pages/api-docs/dialog-content-text.js +++ b/docs/pages/api-docs/dialog-content-text.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './dialog-content-text.json'; -const pageFilename = 'api/dialog-content-text'; -const requireRaw = require.context('!raw-loader!./', false, /\/dialog-content-text\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'DialogContentText'); + const classDescriptions = mapApiTranslations(req2, 'DialogContentText'); + const classConditions = mapApiTranslations(req3, 'DialogContentText'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/dialog-content-text.json b/docs/pages/api-docs/dialog-content-text.json new file mode 100644 index 00000000000000..da7ca4fd01b805 --- /dev/null +++ b/docs/pages/api-docs/dialog-content-text.json @@ -0,0 +1,19 @@ +{ + "name": "DialogContentText", + "filename": "/packages/material-ui/src/DialogContentText/DialogContentText.js", + "description": "", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false } + }, + "spread": true, + "styles": { + "classes": ["root"], + "name": "MuiDialogContentText", + "descriptions": {}, + "globalClasses": { "root": "MuiDialogContentText-root" } + }, + "forwardsRefTo": "HTMLParagraphElement", + "inheritance": { "component": "Typography", "pathname": "/api/typography/" }, + "demos": "- [Dialogs](/components/dialogs/)" +} diff --git a/docs/pages/api-docs/dialog-content-text.md b/docs/pages/api-docs/dialog-content-text.md deleted file mode 100644 index 1f1a91a63ddf8a..00000000000000 --- a/docs/pages/api-docs/dialog-content-text.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -filename: /packages/material-ui/src/DialogContentText/DialogContentText.js ---- - - - -# DialogContentText API - -

The API documentation of the DialogContentText React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import DialogContentText from '@material-ui/core/DialogContentText'; -// or -import { DialogContentText } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiDialogContentText` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element ([Typography](/api/typography/)). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiDialogContentText-root | Styles applied to the root element. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/DialogContentText/DialogContentText.js) for more detail. - -## Inheritance - -The props of the [Typography](/api/typography/) component are also available. -You can take advantage of this behavior to [target nested components](/guides/api/#spread). - -## Demos - -- [Dialogs](/components/dialogs/) - diff --git a/docs/pages/api-docs/dialog-content.js b/docs/pages/api-docs/dialog-content.js index 97d8f80d7212d1..b34dea95e3b889 100644 --- a/docs/pages/api-docs/dialog-content.js +++ b/docs/pages/api-docs/dialog-content.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './dialog-content.json'; -const pageFilename = 'api/dialog-content'; -const requireRaw = require.context('!raw-loader!./', false, /\/dialog-content\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'DialogContent'); + const classDescriptions = mapApiTranslations(req2, 'DialogContent'); + const classConditions = mapApiTranslations(req3, 'DialogContent'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/dialog-content.json b/docs/pages/api-docs/dialog-content.json new file mode 100644 index 00000000000000..8f602931387aea --- /dev/null +++ b/docs/pages/api-docs/dialog-content.json @@ -0,0 +1,26 @@ +{ + "name": "DialogContent", + "filename": "/packages/material-ui/src/DialogContent/DialogContent.js", + "description": "", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "dividers": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + } + }, + "spread": true, + "styles": { + "classes": ["root", "dividers"], + "name": "MuiDialogContent", + "descriptions": {}, + "globalClasses": { "root": "MuiDialogContent-root", "dividers": "MuiDialogContent-dividers" } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": null, + "demos": "- [Dialogs](/components/dialogs/)" +} diff --git a/docs/pages/api-docs/dialog-content.md b/docs/pages/api-docs/dialog-content.md deleted file mode 100644 index 2d82f4d16f1234..00000000000000 --- a/docs/pages/api-docs/dialog-content.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -filename: /packages/material-ui/src/DialogContent/DialogContent.js ---- - - - -# DialogContent API - -

The API documentation of the DialogContent React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import DialogContent from '@material-ui/core/DialogContent'; -// or -import { DialogContent } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiDialogContent` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| dividers | bool | false | Display the top and bottom dividers. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiDialogContent-root | Styles applied to the root element. -| dividers | .MuiDialogContent-dividers | Styles applied to the root element if `dividers={true}`. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/DialogContent/DialogContent.js) for more detail. - -## Demos - -- [Dialogs](/components/dialogs/) - diff --git a/docs/pages/api-docs/dialog-title.js b/docs/pages/api-docs/dialog-title.js index 59ce357a872567..f05f3ebbfae7ce 100644 --- a/docs/pages/api-docs/dialog-title.js +++ b/docs/pages/api-docs/dialog-title.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './dialog-title.json'; -const pageFilename = 'api/dialog-title'; -const requireRaw = require.context('!raw-loader!./', false, /\/dialog-title\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'DialogTitle'); + const classDescriptions = mapApiTranslations(req2, 'DialogTitle'); + const classConditions = mapApiTranslations(req3, 'DialogTitle'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/dialog-title.json b/docs/pages/api-docs/dialog-title.json new file mode 100644 index 00000000000000..f03beec1e714fd --- /dev/null +++ b/docs/pages/api-docs/dialog-title.json @@ -0,0 +1,26 @@ +{ + "name": "DialogTitle", + "filename": "/packages/material-ui/src/DialogTitle/DialogTitle.js", + "description": "", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "disableTypography": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + } + }, + "spread": true, + "styles": { + "classes": ["root"], + "name": "MuiDialogTitle", + "descriptions": {}, + "globalClasses": { "root": "MuiDialogTitle-root" } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": null, + "demos": "- [Dialogs](/components/dialogs/)" +} diff --git a/docs/pages/api-docs/dialog-title.md b/docs/pages/api-docs/dialog-title.md deleted file mode 100644 index e7f98e36367cf0..00000000000000 --- a/docs/pages/api-docs/dialog-title.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -filename: /packages/material-ui/src/DialogTitle/DialogTitle.js ---- - - - -# DialogTitle API - -

The API documentation of the DialogTitle React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import DialogTitle from '@material-ui/core/DialogTitle'; -// or -import { DialogTitle } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiDialogTitle` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| disableTypography | bool | false | If `true`, the children won't be wrapped by a typography component. For instance, this can be useful to render an h4 instead of the default h2. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiDialogTitle-root | Styles applied to the root element. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/DialogTitle/DialogTitle.js) for more detail. - -## Demos - -- [Dialogs](/components/dialogs/) - diff --git a/docs/pages/api-docs/dialog.js b/docs/pages/api-docs/dialog.js index b703a05e7648e8..574a56359101e0 100644 --- a/docs/pages/api-docs/dialog.js +++ b/docs/pages/api-docs/dialog.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './dialog.json'; -const pageFilename = 'api/dialog'; -const requireRaw = require.context('!raw-loader!./', false, /\/dialog\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'Dialog'); + const classDescriptions = mapApiTranslations(req2, 'Dialog'); + const classConditions = mapApiTranslations(req3, 'Dialog'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/dialog.json b/docs/pages/api-docs/dialog.json new file mode 100644 index 00000000000000..ebbe219be0206d --- /dev/null +++ b/docs/pages/api-docs/dialog.json @@ -0,0 +1,154 @@ +{ + "name": "Dialog", + "filename": "/packages/material-ui/src/Dialog/Dialog.js", + "description": "Dialogs are overlaid modal paper based components with a backdrop.", + "props": { + "aria-describedby": { "type": { "name": "string" }, "required": false }, + "aria-labelledby": { "type": { "name": "string" }, "required": false }, + "BackdropProps": { "type": { "name": "object" }, "required": false, "description": "@ignore" }, + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "disableBackdropClick": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "disableEscapeKeyDown": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "fullScreen": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "fullWidth": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "maxWidth": { + "type": { + "name": "enum", + "value": [ + { "value": "'lg'", "computed": false }, + { "value": "'md'", "computed": false }, + { "value": "'sm'", "computed": false }, + { "value": "'xl'", "computed": false }, + { "value": "'xs'", "computed": false }, + { "value": "false", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'sm'" }, + "defaultValue": { "value": "'sm'", "computed": false } + }, + "onBackdropClick": { "type": { "name": "func" }, "required": false }, + "onClose": { "type": { "name": "func" }, "required": false }, + "onEscapeKeyDown": { "type": { "name": "func" }, "required": false }, + "open": { "type": { "name": "bool" }, "required": true }, + "PaperComponent": { + "type": { "name": "elementType" }, + "required": false, + "jsdocDefaultValue": { "value": "Paper" }, + "defaultValue": { "value": "Paper", "computed": true } + }, + "PaperProps": { + "type": { "name": "object" }, + "required": false, + "jsdocDefaultValue": { "value": "{}" }, + "defaultValue": { "value": "{}", "computed": false } + }, + "scroll": { + "type": { + "name": "enum", + "value": [ + { "value": "'body'", "computed": false }, + { "value": "'paper'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'paper'" }, + "defaultValue": { "value": "'paper'", "computed": false } + }, + "TransitionComponent": { + "type": { "name": "elementType" }, + "required": false, + "jsdocDefaultValue": { "value": "Fade" }, + "defaultValue": { "value": "Fade", "computed": true } + }, + "transitionDuration": { + "type": { + "name": "union", + "value": [ + { "name": "number" }, + { + "name": "shape", + "value": { + "appear": { "name": "number", "required": false }, + "enter": { "name": "number", "required": false }, + "exit": { "name": "number", "required": false } + } + } + ] + }, + "required": false, + "jsdocDefaultValue": { + "value": "{ enter: duration.enteringScreen, exit: duration.leavingScreen }" + }, + "defaultValue": { + "value": "{ enter: duration.enteringScreen, exit: duration.leavingScreen }", + "computed": false + } + }, + "TransitionProps": { "type": { "name": "object" }, "required": false } + }, + "spread": true, + "styles": { + "classes": [ + "root", + "scrollPaper", + "scrollBody", + "container", + "paper", + "paperScrollPaper", + "paperScrollBody", + "paperWidthFalse", + "paperWidthXs", + "paperWidthSm", + "paperWidthMd", + "paperWidthLg", + "paperWidthXl", + "paperFullWidth", + "paperFullScreen" + ], + "name": "MuiDialog", + "descriptions": {}, + "globalClasses": { + "root": "MuiDialog-root", + "scrollPaper": "MuiDialog-scrollPaper", + "scrollBody": "MuiDialog-scrollBody", + "container": "MuiDialog-container", + "paper": "MuiDialog-paper", + "paperScrollPaper": "MuiDialog-paperScrollPaper", + "paperScrollBody": "MuiDialog-paperScrollBody", + "paperWidthFalse": "MuiDialog-paperWidthFalse", + "paperWidthXs": "MuiDialog-paperWidthXs", + "paperWidthSm": "MuiDialog-paperWidthSm", + "paperWidthMd": "MuiDialog-paperWidthMd", + "paperWidthLg": "MuiDialog-paperWidthLg", + "paperWidthXl": "MuiDialog-paperWidthXl", + "paperFullWidth": "MuiDialog-paperFullWidth", + "paperFullScreen": "MuiDialog-paperFullScreen" + } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": { "component": "Modal", "pathname": "/api/modal/" }, + "demos": "- [Dialogs](/components/dialogs/)" +} diff --git a/docs/pages/api-docs/dialog.md b/docs/pages/api-docs/dialog.md deleted file mode 100644 index 1e572aa90537b4..00000000000000 --- a/docs/pages/api-docs/dialog.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -filename: /packages/material-ui/src/Dialog/Dialog.js ---- - - - -# Dialog API - -

The API documentation of the Dialog React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import Dialog from '@material-ui/core/Dialog'; -// or -import { Dialog } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - -Dialogs are overlaid modal paper based components with a backdrop. - -## Component name - -The `MuiDialog` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| aria-describedby | string | | The id(s) of the element(s) that describe the dialog. | -| aria-labelledby | string | | The id(s) of the element(s) that label the dialog. | -| children | node | | Dialog children, usually the included sub-components. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| disableBackdropClick | bool | false | If `true`, clicking the backdrop will not fire the `onClose` callback. | -| disableEscapeKeyDown | bool | false | If `true`, hitting escape will not fire the `onClose` callback. | -| fullScreen | bool | false | If `true`, the dialog will be full-screen | -| fullWidth | bool | false | If `true`, the dialog stretches to `maxWidth`.
Notice that the dialog width grow is limited by the default margin. | -| maxWidth | 'lg'
| 'md'
| 'sm'
| 'xl'
| 'xs'
| false | 'sm' | Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to `false` to disable `maxWidth`. | -| onBackdropClick | func | | Callback fired when the backdrop is clicked. | -| onClose | func | | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object, reason: string) => void`
*event:* The event source of the callback.
*reason:* Can be: `"escapeKeyDown"`, `"backdropClick"`. | -| onEscapeKeyDown | func | | Callback fired when the escape key is pressed, `disableKeyboard` is false and the modal is in focus. | -| open* | bool | | If `true`, the Dialog is open. | -| PaperComponent | elementType | Paper | The component used to render the body of the dialog. | -| PaperProps | object | {} | Props applied to the [`Paper`](/api/paper/) element. | -| scroll | 'body'
| 'paper' | 'paper' | Determine the container for scrolling the dialog. | -| TransitionComponent | elementType | Fade | The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. | -| transitionDuration | number
| { appear?: number, enter?: number, exit?: number } | { enter: duration.enteringScreen, exit: duration.leavingScreen } | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | -| TransitionProps | object | | Props applied to the transition element. By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition) component. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element ([Modal](/api/modal/)). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiDialog-root | Styles applied to the root element. -| scrollPaper | .MuiDialog-scrollPaper | Styles applied to the container element if `scroll="paper"`. -| scrollBody | .MuiDialog-scrollBody | Styles applied to the container element if `scroll="body"`. -| container | .MuiDialog-container | Styles applied to the container element. -| paper | .MuiDialog-paper | Styles applied to the `Paper` component. -| paperScrollPaper | .MuiDialog-paperScrollPaper | Styles applied to the `Paper` component if `scroll="paper"`. -| paperScrollBody | .MuiDialog-paperScrollBody | Styles applied to the `Paper` component if `scroll="body"`. -| paperWidthFalse | .MuiDialog-paperWidthFalse | Styles applied to the `Paper` component if `maxWidth=false`. -| paperWidthXs | .MuiDialog-paperWidthXs | Styles applied to the `Paper` component if `maxWidth="xs"`. -| paperWidthSm | .MuiDialog-paperWidthSm | Styles applied to the `Paper` component if `maxWidth="sm"`. -| paperWidthMd | .MuiDialog-paperWidthMd | Styles applied to the `Paper` component if `maxWidth="md"`. -| paperWidthLg | .MuiDialog-paperWidthLg | Styles applied to the `Paper` component if `maxWidth="lg"`. -| paperWidthXl | .MuiDialog-paperWidthXl | Styles applied to the `Paper` component if `maxWidth="xl"`. -| paperFullWidth | .MuiDialog-paperFullWidth | Styles applied to the `Paper` component if `fullWidth={true}`. -| paperFullScreen | .MuiDialog-paperFullScreen | Styles applied to the `Paper` component if `fullScreen={true}`. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Dialog/Dialog.js) for more detail. - -## Inheritance - -The props of the [Modal](/api/modal/) component are also available. -You can take advantage of this behavior to [target nested components](/guides/api/#spread). - -## Demos - -- [Dialogs](/components/dialogs/) - diff --git a/docs/pages/api-docs/divider.js b/docs/pages/api-docs/divider.js index 0ea897a9459515..52d89deb5a2c5d 100644 --- a/docs/pages/api-docs/divider.js +++ b/docs/pages/api-docs/divider.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './divider.json'; -const pageFilename = 'api/divider'; -const requireRaw = require.context('!raw-loader!./', false, /\/divider\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'Divider'); + const classDescriptions = mapApiTranslations(req2, 'Divider'); + const classConditions = mapApiTranslations(req3, 'Divider'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/divider.json b/docs/pages/api-docs/divider.json new file mode 100644 index 00000000000000..20f2b181bed9b1 --- /dev/null +++ b/docs/pages/api-docs/divider.json @@ -0,0 +1,123 @@ +{ + "name": "Divider", + "filename": "/packages/material-ui/src/Divider/Divider.js", + "description": "", + "props": { + "absolute": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "component": { + "type": { "name": "elementType" }, + "required": false, + "defaultValue": { "value": "children ? 'div' : 'hr'", "computed": false } + }, + "flexItem": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "light": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "orientation": { + "type": { + "name": "enum", + "value": [ + { "value": "'horizontal'", "computed": false }, + { "value": "'vertical'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'horizontal'" }, + "defaultValue": { "value": "'horizontal'", "computed": false } + }, + "role": { + "type": { "name": "string" }, + "required": false, + "description": "@ignore", + "defaultValue": { "value": "Component !== 'hr' ? 'separator' : undefined", "computed": false } + }, + "textAlign": { + "type": { + "name": "enum", + "value": [ + { "value": "'center'", "computed": false }, + { "value": "'left'", "computed": false }, + { "value": "'right'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'center'" }, + "defaultValue": { "value": "'center'", "computed": false } + }, + "variant": { + "type": { + "name": "union", + "value": [ + { + "name": "enum", + "value": [ + { "value": "'fullWidth'", "computed": false }, + { "value": "'inset'", "computed": false }, + { "value": "'middle'", "computed": false } + ] + }, + { "name": "string" } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'fullWidth'" }, + "defaultValue": { "value": "'fullWidth'", "computed": false } + } + }, + "spread": true, + "styles": { + "classes": [ + "root", + "absolute", + "inset", + "fullWidth", + "light", + "middle", + "vertical", + "flexItem", + "withChildren", + "withChildrenVertical", + "textAlignRight", + "textAlignLeft", + "wrapper", + "wrapperVertical" + ], + "name": "MuiDivider", + "descriptions": {}, + "globalClasses": { + "root": "MuiDivider-root", + "absolute": "MuiDivider-absolute", + "inset": "MuiDivider-inset", + "fullWidth": "MuiDivider-fullWidth", + "light": "MuiDivider-light", + "middle": "MuiDivider-middle", + "vertical": "MuiDivider-vertical", + "flexItem": "MuiDivider-flexItem", + "withChildren": "MuiDivider-withChildren", + "withChildrenVertical": "MuiDivider-withChildrenVertical", + "textAlignRight": "MuiDivider-textAlignRight", + "textAlignLeft": "MuiDivider-textAlignLeft", + "wrapper": "MuiDivider-wrapper", + "wrapperVertical": "MuiDivider-wrapperVertical" + } + }, + "forwardsRefTo": "HTMLHRElement", + "inheritance": null, + "demos": "- [Dividers](/components/dividers/)\n- [Lists](/components/lists/)" +} diff --git a/docs/pages/api-docs/divider.md b/docs/pages/api-docs/divider.md deleted file mode 100644 index 2242e438f5183f..00000000000000 --- a/docs/pages/api-docs/divider.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -filename: /packages/material-ui/src/Divider/Divider.js ---- - - - -# Divider API - -

The API documentation of the Divider React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import Divider from '@material-ui/core/Divider'; -// or -import { Divider } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiDivider` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| absolute | bool | false | Absolutely position the element. | -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | elementType | children ? 'div' : 'hr' | The component used for the root node. Either a string to use a HTML element or a component. | -| flexItem | bool | false | If `true`, a vertical divider will have the correct height when used in flex container. (By default, a vertical divider will have a calculated height of `0px` if it is the child of a flex container.) | -| light | bool | false | If `true`, the divider will have a lighter color. | -| orientation | 'horizontal'
| 'vertical' | 'horizontal' | The divider orientation. | -| textAlign | 'center'
| 'left'
| 'right' | 'center' | The text alignment. | -| variant | 'fullWidth'
| 'inset'
| 'middle'
| string | 'fullWidth' | The variant to use. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiDivider-root | Styles applied to the root element. -| absolute | .MuiDivider-absolute | Styles applied to the root element if `absolute={true}`. -| inset | .MuiDivider-inset | Styles applied to the root element if `variant="inset"`. -| fullWidth | .MuiDivider-fullWidth | Styles applied to the root element if `variant="fullWidth"`. -| light | .MuiDivider-light | Styles applied to the root element if `light={true}`. -| middle | .MuiDivider-middle | Styles applied to the root element if `variant="middle"`. -| vertical | .MuiDivider-vertical | Styles applied to the root element if `orientation="vertical"`. -| flexItem | .MuiDivider-flexItem | Styles applied to the root element if `flexItem={true}`. -| withChildren | .MuiDivider-withChildren | Styles applied to the root element if divider have text. -| withChildrenVertical | .MuiDivider-withChildrenVertical | Styles applied to the root element if divider have text and `orientation="vertical"`. -| textAlignRight | .MuiDivider-textAlignRight | Styles applied to the root element if `textAlign="right" orientation="horizontal"`. -| textAlignLeft | .MuiDivider-textAlignLeft | Styles applied to the root element if `textAlign="left" orientation="horizontal"`. -| wrapper | .MuiDivider-wrapper | Styles applied to the span children element if `orientation="horizontal"`. -| wrapperVertical | .MuiDivider-wrapperVertical | Styles applied to the span children element if `orientation="vertical"`. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Divider/Divider.js) for more detail. - -## Demos - -- [Dividers](/components/dividers/) -- [Lists](/components/lists/) - diff --git a/docs/pages/api-docs/drawer.js b/docs/pages/api-docs/drawer.js index d8b18cb8592ca1..b148a8be5ef87c 100644 --- a/docs/pages/api-docs/drawer.js +++ b/docs/pages/api-docs/drawer.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './drawer.json'; -const pageFilename = 'api/drawer'; -const requireRaw = require.context('!raw-loader!./', false, /\/drawer\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'Drawer'); + const classDescriptions = mapApiTranslations(req2, 'Drawer'); + const classConditions = mapApiTranslations(req3, 'Drawer'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/drawer.json b/docs/pages/api-docs/drawer.json new file mode 100644 index 00000000000000..9dfa34d508dbc0 --- /dev/null +++ b/docs/pages/api-docs/drawer.json @@ -0,0 +1,124 @@ +{ + "name": "Drawer", + "filename": "/packages/material-ui/src/Drawer/Drawer.js", + "description": "The props of the [Modal](/api/modal/) component are available\nwhen `variant=\"temporary\"` is set.", + "props": { + "anchor": { + "type": { + "name": "enum", + "value": [ + { "value": "'bottom'", "computed": false }, + { "value": "'left'", "computed": false }, + { "value": "'right'", "computed": false }, + { "value": "'top'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'left'" }, + "defaultValue": { "value": "'left'", "computed": false } + }, + "BackdropProps": { "type": { "name": "object" }, "required": false, "description": "@ignore" }, + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "elevation": { + "type": { "name": "number" }, + "required": false, + "jsdocDefaultValue": { "value": "16" }, + "defaultValue": { "value": "16", "computed": false } + }, + "ModalProps": { + "type": { "name": "object" }, + "required": false, + "jsdocDefaultValue": { "value": "{}" }, + "defaultValue": { "value": "{}", "computed": false } + }, + "onClose": { "type": { "name": "func" }, "required": false }, + "open": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "PaperProps": { + "type": { "name": "object" }, + "required": false, + "jsdocDefaultValue": { "value": "{}" }, + "defaultValue": { "value": "{}", "computed": false } + }, + "SlideProps": { "type": { "name": "object" }, "required": false }, + "transitionDuration": { + "type": { + "name": "union", + "value": [ + { "name": "number" }, + { + "name": "shape", + "value": { + "appear": { "name": "number", "required": false }, + "enter": { "name": "number", "required": false }, + "exit": { "name": "number", "required": false } + } + } + ] + }, + "required": false, + "jsdocDefaultValue": { + "value": "{ enter: duration.enteringScreen, exit: duration.leavingScreen }" + }, + "defaultValue": { + "value": "{ enter: duration.enteringScreen, exit: duration.leavingScreen }", + "computed": false + } + }, + "variant": { + "type": { + "name": "enum", + "value": [ + { "value": "'permanent'", "computed": false }, + { "value": "'persistent'", "computed": false }, + { "value": "'temporary'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'temporary'" }, + "defaultValue": { "value": "'temporary'", "computed": false } + } + }, + "spread": true, + "styles": { + "classes": [ + "root", + "docked", + "paper", + "paperAnchorLeft", + "paperAnchorRight", + "paperAnchorTop", + "paperAnchorBottom", + "paperAnchorDockedLeft", + "paperAnchorDockedTop", + "paperAnchorDockedRight", + "paperAnchorDockedBottom", + "modal" + ], + "name": "MuiDrawer", + "descriptions": {}, + "globalClasses": { + "root": "MuiDrawer-root", + "docked": "MuiDrawer-docked", + "paper": "MuiDrawer-paper", + "paperAnchorLeft": "MuiDrawer-paperAnchorLeft", + "paperAnchorRight": "MuiDrawer-paperAnchorRight", + "paperAnchorTop": "MuiDrawer-paperAnchorTop", + "paperAnchorBottom": "MuiDrawer-paperAnchorBottom", + "paperAnchorDockedLeft": "MuiDrawer-paperAnchorDockedLeft", + "paperAnchorDockedTop": "MuiDrawer-paperAnchorDockedTop", + "paperAnchorDockedRight": "MuiDrawer-paperAnchorDockedRight", + "paperAnchorDockedBottom": "MuiDrawer-paperAnchorDockedBottom", + "modal": "MuiDrawer-modal" + } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": null, + "demos": "- [Drawers](/components/drawers/)" +} diff --git a/docs/pages/api-docs/drawer.md b/docs/pages/api-docs/drawer.md deleted file mode 100644 index 15a79c66084956..00000000000000 --- a/docs/pages/api-docs/drawer.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -filename: /packages/material-ui/src/Drawer/Drawer.js ---- - - - -# Drawer API - -

The API documentation of the Drawer React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import Drawer from '@material-ui/core/Drawer'; -// or -import { Drawer } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - -The props of the [Modal](/api/modal/) component are available -when `variant="temporary"` is set. - -## Component name - -The `MuiDrawer` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| anchor | 'bottom'
| 'left'
| 'right'
| 'top' | 'left' | Side from which the drawer will appear. | -| children | node | | The contents of the drawer. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| elevation | number | 16 | The elevation of the drawer. | -| ModalProps | object | {} | Props applied to the [`Modal`](/api/modal/) element. | -| onClose | func | | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | -| open | bool | false | If `true`, the drawer is open. | -| PaperProps | object | {} | Props applied to the [`Paper`](/api/paper/) element. | -| SlideProps | object | | Props applied to the [`Slide`](/api/slide/) element. | -| transitionDuration | number
| { appear?: number, enter?: number, exit?: number } | { enter: duration.enteringScreen, exit: duration.leavingScreen } | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | -| variant | 'permanent'
| 'persistent'
| 'temporary' | 'temporary' | The variant to use. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiDrawer-root | Styles applied to the root element. -| docked | .MuiDrawer-docked | Styles applied to the root element if `variant="permanent or persistent"`. -| paper | .MuiDrawer-paper | Styles applied to the `Paper` component. -| paperAnchorLeft | .MuiDrawer-paperAnchorLeft | Styles applied to the `Paper` component if `anchor="left"`. -| paperAnchorRight | .MuiDrawer-paperAnchorRight | Styles applied to the `Paper` component if `anchor="right"`. -| paperAnchorTop | .MuiDrawer-paperAnchorTop | Styles applied to the `Paper` component if `anchor="top"`. -| paperAnchorBottom | .MuiDrawer-paperAnchorBottom | Styles applied to the `Paper` component if `anchor="bottom"`. -| paperAnchorDockedLeft | .MuiDrawer-paperAnchorDockedLeft | Styles applied to the `Paper` component if `anchor="left"` and `variant` is not "temporary". -| paperAnchorDockedTop | .MuiDrawer-paperAnchorDockedTop | Styles applied to the `Paper` component if `anchor="top"` and `variant` is not "temporary". -| paperAnchorDockedRight | .MuiDrawer-paperAnchorDockedRight | Styles applied to the `Paper` component if `anchor="right"` and `variant` is not "temporary". -| paperAnchorDockedBottom | .MuiDrawer-paperAnchorDockedBottom | Styles applied to the `Paper` component if `anchor="bottom"` and `variant` is not "temporary". -| modal | .MuiDrawer-modal | Styles applied to the `Modal` component. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Drawer/Drawer.js) for more detail. - -## Demos - -- [Drawers](/components/drawers/) - diff --git a/docs/pages/api-docs/fab.js b/docs/pages/api-docs/fab.js index 62eb0408f0ada5..43a864c4b57945 100644 --- a/docs/pages/api-docs/fab.js +++ b/docs/pages/api-docs/fab.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './fab.json'; -const pageFilename = 'api/fab'; -const requireRaw = require.context('!raw-loader!./', false, /\/fab\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'Fab'); + const classDescriptions = mapApiTranslations(req2, 'Fab'); + const classConditions = mapApiTranslations(req3, 'Fab'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/fab.json b/docs/pages/api-docs/fab.json new file mode 100644 index 00000000000000..2fda01dae07934 --- /dev/null +++ b/docs/pages/api-docs/fab.json @@ -0,0 +1,113 @@ +{ + "name": "Fab", + "filename": "/packages/material-ui/src/Fab/Fab.js", + "description": "", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "color": { + "type": { + "name": "enum", + "value": [ + { "value": "'default'", "computed": false }, + { "value": "'inherit'", "computed": false }, + { "value": "'primary'", "computed": false }, + { "value": "'secondary'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'default'" }, + "defaultValue": { "value": "'default'", "computed": false } + }, + "component": { + "type": { "name": "elementType" }, + "required": false, + "defaultValue": { "value": "'button'", "computed": false } + }, + "disabled": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "disableFocusRipple": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "disableRipple": { "type": { "name": "bool" }, "required": false }, + "focusVisibleClassName": { + "type": { "name": "string" }, + "required": false, + "description": "@ignore" + }, + "href": { "type": { "name": "string" }, "required": false }, + "size": { + "type": { + "name": "enum", + "value": [ + { "value": "'large'", "computed": false }, + { "value": "'medium'", "computed": false }, + { "value": "'small'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'large'" }, + "defaultValue": { "value": "'large'", "computed": false } + }, + "variant": { + "type": { + "name": "union", + "value": [ + { + "name": "enum", + "value": [ + { "value": "'circular'", "computed": false }, + { "value": "'extended'", "computed": false } + ] + }, + { "name": "string" } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'circular'" }, + "defaultValue": { "value": "'circular'", "computed": false } + } + }, + "spread": true, + "styles": { + "classes": [ + "root", + "label", + "primary", + "secondary", + "extended", + "circular", + "focusVisible", + "disabled", + "colorInherit", + "sizeSmall", + "sizeMedium" + ], + "name": "MuiFab", + "descriptions": {}, + "globalClasses": { + "root": "MuiFab-root", + "label": "MuiFab-label", + "primary": "MuiFab-primary", + "secondary": "MuiFab-secondary", + "extended": "MuiFab-extended", + "circular": "MuiFab-circular", + "focusVisible": "Mui-focusVisible", + "disabled": "Mui-disabled", + "colorInherit": "MuiFab-colorInherit", + "sizeSmall": "MuiFab-sizeSmall", + "sizeMedium": "MuiFab-sizeMedium" + } + }, + "forwardsRefTo": "HTMLButtonElement", + "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" }, + "demos": "- [Floating Action Button](/components/floating-action-button/)" +} diff --git a/docs/pages/api-docs/fab.md b/docs/pages/api-docs/fab.md deleted file mode 100644 index 65eaf509f75a1e..00000000000000 --- a/docs/pages/api-docs/fab.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -filename: /packages/material-ui/src/Fab/Fab.js ---- - - - -# Fab API - -

The API documentation of the Fab React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import Fab from '@material-ui/core/Fab'; -// or -import { Fab } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiFab` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The content of the button. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'default'
| 'inherit'
| 'primary'
| 'secondary' | 'default' | The color of the component. It supports those theme colors that make sense for this component. | -| component | elementType | 'button' | The component used for the root node. Either a string to use a HTML element or a component. | -| disabled | bool | false | If `true`, the button will be disabled. | -| disableFocusRipple | bool | false | If `true`, the keyboard focus ripple will be disabled. | -| disableRipple | bool | | If `true`, the ripple effect will be disabled. | -| href | string | | The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. | -| size | 'large'
| 'medium'
| 'small' | 'large' | The size of the button. `small` is equivalent to the dense button styling. | -| variant | 'circular'
| 'extended'
| string | 'circular' | The variant to use. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element ([ButtonBase](/api/button-base/)). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiFab-root | Styles applied to the root element. -| label | .MuiFab-label | Styles applied to the span element that wraps the children. -| primary | .MuiFab-primary | Styles applied to the root element if `color="primary"`. -| secondary | .MuiFab-secondary | Styles applied to the root element if `color="secondary"`. -| extended | .MuiFab-extended | Styles applied to the root element if `variant="extended"`. -| circular | .MuiFab-circular | Styles applied to the root element if `variant="circular"`. -| focusVisible | .Mui-focusVisible | Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. -| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. -| colorInherit | .MuiFab-colorInherit | Styles applied to the root element if `color="inherit"`. -| sizeSmall | .MuiFab-sizeSmall | Styles applied to the root element if `size="small"``. -| sizeMedium | .MuiFab-sizeMedium | Styles applied to the root element if `size="medium"``. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Fab/Fab.js) for more detail. - -## Inheritance - -The props of the [ButtonBase](/api/button-base/) component are also available. -You can take advantage of this behavior to [target nested components](/guides/api/#spread). - -## Demos - -- [Floating Action Button](/components/floating-action-button/) - diff --git a/docs/pages/api-docs/fade.js b/docs/pages/api-docs/fade.js index e0f7e5209ca607..12227d8816e0e5 100644 --- a/docs/pages/api-docs/fade.js +++ b/docs/pages/api-docs/fade.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './fade.json'; -const pageFilename = 'api/fade'; -const requireRaw = require.context('!raw-loader!./', false, /\/fade\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'Fade'); + const classDescriptions = mapApiTranslations(req2, 'Fade'); + const classConditions = mapApiTranslations(req3, 'Fade'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/fade.json b/docs/pages/api-docs/fade.json new file mode 100644 index 00000000000000..fc4e7c4e5981c9 --- /dev/null +++ b/docs/pages/api-docs/fade.json @@ -0,0 +1,48 @@ +{ + "name": "Fade", + "filename": "/packages/material-ui/src/Fade/Fade.js", + "description": "The Fade transition is used by the [Modal](/components/modal/) component.\nIt uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.", + "props": { + "children": { "type": { "name": "custom", "raw": "elementAcceptingRef" }, "required": false }, + "in": { "type": { "name": "bool" }, "required": false }, + "onEnter": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onEntered": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onEntering": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onExit": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onExited": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onExiting": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "style": { "type": { "name": "object" }, "required": false, "description": "@ignore" }, + "timeout": { + "type": { + "name": "union", + "value": [ + { "name": "number" }, + { + "name": "shape", + "value": { + "appear": { "name": "number", "required": false }, + "enter": { "name": "number", "required": false }, + "exit": { "name": "number", "required": false } + } + } + ] + }, + "required": false, + "jsdocDefaultValue": { + "value": "{\n enter: duration.enteringScreen,\n exit: duration.leavingScreen,\n}" + }, + "defaultValue": { + "value": "{\n enter: duration.enteringScreen,\n exit: duration.leavingScreen,\n}", + "computed": false + } + } + }, + "spread": true, + "styles": { "classes": [], "name": null, "descriptions": {}, "globalClasses": {} }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": { + "component": "Transition", + "pathname": "https://reactcommunity.org/react-transition-group/transition#Transition-props" + }, + "demos": "- [Transitions](/components/transitions/)" +} diff --git a/docs/pages/api-docs/fade.md b/docs/pages/api-docs/fade.md deleted file mode 100644 index 123b402e7f4156..00000000000000 --- a/docs/pages/api-docs/fade.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -filename: /packages/material-ui/src/Fade/Fade.js ---- - - - -# Fade API - -

The API documentation of the Fade React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import Fade from '@material-ui/core/Fade'; -// or -import { Fade } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - -The Fade transition is used by the [Modal](/components/modal/) component. -It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally. - - - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | element | | A single child content element.
⚠️ [Needs to be able to hold a ref](/guides/composition/#caveat-with-refs). | -| in | bool | | If `true`, the component will transition in. | -| timeout | number
| { appear?: number, enter?: number, exit?: number } | { enter: duration.enteringScreen, exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element ([Transition](https://reactcommunity.org/react-transition-group/transition#Transition-props)). - -## Inheritance - -The props of the [Transition](https://reactcommunity.org/react-transition-group/transition#Transition-props) component, from react-transition-group, are also available. -You can take advantage of this behavior to [target nested components](/guides/api/#spread). - -## Demos - -- [Transitions](/components/transitions/) - diff --git a/docs/pages/api-docs/filled-input.js b/docs/pages/api-docs/filled-input.js index 53ae0920bddaaa..3db4f0baefa926 100644 --- a/docs/pages/api-docs/filled-input.js +++ b/docs/pages/api-docs/filled-input.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './filled-input.json'; -const pageFilename = 'api/filled-input'; -const requireRaw = require.context('!raw-loader!./', false, /\/filled-input\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'FilledInput'); + const classDescriptions = mapApiTranslations(req2, 'FilledInput'); + const classConditions = mapApiTranslations(req3, 'FilledInput'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/filled-input.json b/docs/pages/api-docs/filled-input.json new file mode 100644 index 00000000000000..1a8c97d1fc9473 --- /dev/null +++ b/docs/pages/api-docs/filled-input.json @@ -0,0 +1,127 @@ +{ + "name": "FilledInput", + "filename": "/packages/material-ui/src/FilledInput/FilledInput.js", + "description": "", + "props": { + "autoComplete": { "type": { "name": "string" }, "required": false }, + "autoFocus": { "type": { "name": "bool" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "color": { + "type": { + "name": "enum", + "value": [ + { "value": "'primary'", "computed": false }, + { "value": "'secondary'", "computed": false } + ] + }, + "required": false + }, + "defaultValue": { "type": { "name": "any" }, "required": false }, + "disabled": { "type": { "name": "bool" }, "required": false }, + "disableUnderline": { "type": { "name": "bool" }, "required": false }, + "endAdornment": { "type": { "name": "node" }, "required": false }, + "error": { "type": { "name": "bool" }, "required": false }, + "fullWidth": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "id": { "type": { "name": "string" }, "required": false }, + "inputComponent": { + "type": { "name": "elementType" }, + "required": false, + "jsdocDefaultValue": { "value": "'input'" }, + "defaultValue": { "value": "'input'", "computed": false } + }, + "inputProps": { "type": { "name": "object" }, "required": false }, + "inputRef": { "type": { "name": "custom", "raw": "refType" }, "required": false }, + "margin": { + "type": { + "name": "enum", + "value": [ + { "value": "'dense'", "computed": false }, + { "value": "'none'", "computed": false } + ] + }, + "required": false + }, + "maxRows": { + "type": { "name": "union", "value": [{ "name": "number" }, { "name": "string" }] }, + "required": false + }, + "minRows": { + "type": { "name": "union", "value": [{ "name": "number" }, { "name": "string" }] }, + "required": false + }, + "multiline": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "name": { "type": { "name": "string" }, "required": false }, + "onChange": { "type": { "name": "func" }, "required": false }, + "placeholder": { "type": { "name": "string" }, "required": false }, + "readOnly": { "type": { "name": "bool" }, "required": false }, + "required": { "type": { "name": "bool" }, "required": false }, + "rows": { + "type": { "name": "union", "value": [{ "name": "number" }, { "name": "string" }] }, + "required": false + }, + "startAdornment": { "type": { "name": "node" }, "required": false }, + "type": { + "type": { "name": "string" }, + "required": false, + "jsdocDefaultValue": { "value": "'text'" }, + "defaultValue": { "value": "'text'", "computed": false } + }, + "value": { "type": { "name": "any" }, "required": false } + }, + "spread": true, + "styles": { + "classes": [ + "root", + "colorSecondary", + "underline", + "focused", + "disabled", + "adornedStart", + "adornedEnd", + "error", + "marginDense", + "multiline", + "hiddenLabel", + "input", + "inputMarginDense", + "inputHiddenLabel", + "inputMultiline", + "inputAdornedStart", + "inputAdornedEnd" + ], + "name": "MuiFilledInput", + "descriptions": {}, + "globalClasses": { + "root": "MuiFilledInput-root", + "colorSecondary": "MuiFilledInput-colorSecondary", + "underline": "MuiFilledInput-underline", + "focused": "Mui-focused", + "disabled": "Mui-disabled", + "adornedStart": "MuiFilledInput-adornedStart", + "adornedEnd": "MuiFilledInput-adornedEnd", + "error": "Mui-error", + "marginDense": "MuiFilledInput-marginDense", + "multiline": "MuiFilledInput-multiline", + "hiddenLabel": "MuiFilledInput-hiddenLabel", + "input": "MuiFilledInput-input", + "inputMarginDense": "MuiFilledInput-inputMarginDense", + "inputHiddenLabel": "MuiFilledInput-inputHiddenLabel", + "inputMultiline": "MuiFilledInput-inputMultiline", + "inputAdornedStart": "MuiFilledInput-inputAdornedStart", + "inputAdornedEnd": "MuiFilledInput-inputAdornedEnd" + } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": { "component": "InputBase", "pathname": "/api/input-base/" }, + "demos": "- [Text Fields](/components/text-fields/)" +} diff --git a/docs/pages/api-docs/filled-input.md b/docs/pages/api-docs/filled-input.md deleted file mode 100644 index e6958f5c2f387f..00000000000000 --- a/docs/pages/api-docs/filled-input.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -filename: /packages/material-ui/src/FilledInput/FilledInput.js ---- - - - -# FilledInput API - -

The API documentation of the FilledInput React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import FilledInput from '@material-ui/core/FilledInput'; -// or -import { FilledInput } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiFilledInput` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| autoComplete | string | | This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). | -| autoFocus | bool | | If `true`, the `input` element will be focused during the first mount. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'primary'
| 'secondary' | | The color of the component. It supports those theme colors that make sense for this component. The prop defaults to the value (`'primary'`) inherited from the parent FormControl component. | -| defaultValue | any | | The default `input` element value. Use when the component is not controlled. | -| disabled | bool | | If `true`, the `input` element will be disabled. The prop defaults to the value (`false`) inherited from the parent FormControl component. | -| disableUnderline | bool | | If `true`, the input will not have an underline. | -| endAdornment | node | | End `InputAdornment` for this component. | -| error | bool | | If `true`, the input will indicate an error. The prop defaults to the value (`false`) inherited from the parent FormControl component. | -| fullWidth | bool | false | If `true`, the input will take up the full width of its container. | -| id | string | | The id of the `input` element. | -| inputComponent | elementType | 'input' | The component used for the `input` element. Either a string to use a HTML element or a component. | -| inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | -| inputRef | ref | | Pass a ref to the `input` element. | -| margin | 'dense'
| 'none' | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. The prop defaults to the value (`'none'`) inherited from the parent FormControl component. | -| maxRows | number
| string | | Maximum number of rows to display when multiline option is set to true. | -| minRows | number
| string | | Minimum number of rows to display when multiline option is set to true. | -| multiline | bool | false | If `true`, a textarea element will be rendered. | -| name | string | | Name attribute of the `input` element. | -| onChange | func | | Callback fired when the value is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value` (string). | -| placeholder | string | | The short hint displayed in the input before the user enters a value. | -| readOnly | bool | | It prevents the user from changing the value of the field (not from interacting with the field). | -| required | bool | | If `true`, the `input` element will be required. The prop defaults to the value (`false`) inherited from the parent FormControl component. | -| rows | number
| string | | Number of rows to display when multiline option is set to true. | -| startAdornment | node | | Start `InputAdornment` for this component. | -| type | string | 'text' | Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). | -| value | any | | The value of the `input` element, required for a controlled component. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element ([InputBase](/api/input-base/)). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiFilledInput-root | Styles applied to the root element. -| colorSecondary | .MuiFilledInput-colorSecondary | Styles applied to the root element if color secondary. -| underline | .MuiFilledInput-underline | Styles applied to the root element unless `disableUnderline={true}`. -| focused | .Mui-focused | Pseudo-class applied to the root element if the component is focused. -| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. -| adornedStart | .MuiFilledInput-adornedStart | Styles applied to the root element if `startAdornment` is provided. -| adornedEnd | .MuiFilledInput-adornedEnd | Styles applied to the root element if `endAdornment` is provided. -| error | .Mui-error | Pseudo-class applied to the root element if `error={true}`. -| marginDense | .MuiFilledInput-marginDense | Styles applied to the `input` element if `margin="dense"`. -| multiline | .MuiFilledInput-multiline | Styles applied to the root element if `multiline={true}`. -| hiddenLabel | .MuiFilledInput-hiddenLabel | Styles applied to the root element if `hiddenLabel={true}`. -| input | .MuiFilledInput-input | Styles applied to the `input` element. -| inputMarginDense | .MuiFilledInput-inputMarginDense | Styles applied to the `input` element if `margin="dense"`. -| inputHiddenLabel | .MuiFilledInput-inputHiddenLabel | Styles applied to the `input` if in ``. -| inputMultiline | .MuiFilledInput-inputMultiline | Styles applied to the `input` element if `multiline={true}`. -| inputAdornedStart | .MuiFilledInput-inputAdornedStart | Styles applied to the `input` element if `startAdornment` is provided. -| inputAdornedEnd | .MuiFilledInput-inputAdornedEnd | Styles applied to the `input` element if `endAdornment` is provided. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/FilledInput/FilledInput.js) for more detail. - -## Inheritance - -The props of the [InputBase](/api/input-base/) component are also available. -You can take advantage of this behavior to [target nested components](/guides/api/#spread). - -## Demos - -- [Text Fields](/components/text-fields/) - diff --git a/docs/pages/api-docs/form-control-label.js b/docs/pages/api-docs/form-control-label.js index 5c16a507df141f..d122660349e536 100644 --- a/docs/pages/api-docs/form-control-label.js +++ b/docs/pages/api-docs/form-control-label.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './form-control-label.json'; -const pageFilename = 'api/form-control-label'; -const requireRaw = require.context('!raw-loader!./', false, /\/form-control-label\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'FormControlLabel'); + const classDescriptions = mapApiTranslations(req2, 'FormControlLabel'); + const classConditions = mapApiTranslations(req3, 'FormControlLabel'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/form-control-label.json b/docs/pages/api-docs/form-control-label.json new file mode 100644 index 00000000000000..b77c064c3152a4 --- /dev/null +++ b/docs/pages/api-docs/form-control-label.json @@ -0,0 +1,55 @@ +{ + "name": "FormControlLabel", + "filename": "/packages/material-ui/src/FormControlLabel/FormControlLabel.js", + "description": "Drop in replacement of the `Radio`, `Switch` and `Checkbox` component.\nUse this component if you want to display an extra label.", + "props": { + "checked": { "type": { "name": "bool" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "control": { "type": { "name": "element" }, "required": true }, + "disabled": { "type": { "name": "bool" }, "required": false }, + "inputRef": { "type": { "name": "custom", "raw": "refType" }, "required": false }, + "label": { "type": { "name": "node" }, "required": false }, + "labelPlacement": { + "type": { + "name": "enum", + "value": [ + { "value": "'bottom'", "computed": false }, + { "value": "'end'", "computed": false }, + { "value": "'start'", "computed": false }, + { "value": "'top'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'end'" }, + "defaultValue": { "value": "'end'", "computed": false } + }, + "name": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "onChange": { "type": { "name": "func" }, "required": false }, + "value": { "type": { "name": "any" }, "required": false } + }, + "spread": true, + "styles": { + "classes": [ + "root", + "labelPlacementStart", + "labelPlacementTop", + "labelPlacementBottom", + "disabled", + "label" + ], + "name": "MuiFormControlLabel", + "descriptions": {}, + "globalClasses": { + "root": "MuiFormControlLabel-root", + "labelPlacementStart": "MuiFormControlLabel-labelPlacementStart", + "labelPlacementTop": "MuiFormControlLabel-labelPlacementTop", + "labelPlacementBottom": "MuiFormControlLabel-labelPlacementBottom", + "disabled": "Mui-disabled", + "label": "MuiFormControlLabel-label" + } + }, + "forwardsRefTo": "HTMLLabelElement", + "inheritance": null, + "demos": "- [Checkboxes](/components/checkboxes/)\n- [Radio Buttons](/components/radio-buttons/)\n- [Switches](/components/switches/)" +} diff --git a/docs/pages/api-docs/form-control-label.md b/docs/pages/api-docs/form-control-label.md deleted file mode 100644 index 24e5ebb95111bb..00000000000000 --- a/docs/pages/api-docs/form-control-label.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -filename: /packages/material-ui/src/FormControlLabel/FormControlLabel.js ---- - - - -# FormControlLabel API - -

The API documentation of the FormControlLabel React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import FormControlLabel from '@material-ui/core/FormControlLabel'; -// or -import { FormControlLabel } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - -Drop in replacement of the `Radio`, `Switch` and `Checkbox` component. -Use this component if you want to display an extra label. - -## Component name - -The `MuiFormControlLabel` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| checked | bool | | If `true`, the component appears selected. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| control* | element | | A control element. For instance, it can be a `Radio`, a `Switch` or a `Checkbox`. | -| disabled | bool | | If `true`, the control will be disabled. | -| inputRef | ref | | Pass a ref to the `input` element. | -| label | node | | The text to be used in an enclosing label element. | -| labelPlacement | 'bottom'
| 'end'
| 'start'
| 'top' | 'end' | The position of the label. | -| onChange | func | | Callback fired when the state is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new checked state by accessing `event.target.checked` (boolean). | -| value | any | | The value of the component. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiFormControlLabel-root | Styles applied to the root element. -| labelPlacementStart | .MuiFormControlLabel-labelPlacementStart | Styles applied to the root element if `labelPlacement="start"`. -| labelPlacementTop | .MuiFormControlLabel-labelPlacementTop | Styles applied to the root element if `labelPlacement="top"`. -| labelPlacementBottom | .MuiFormControlLabel-labelPlacementBottom | Styles applied to the root element if `labelPlacement="bottom"`. -| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. -| label | .MuiFormControlLabel-label | Styles applied to the label's Typography component. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/FormControlLabel/FormControlLabel.js) for more detail. - -## Demos - -- [Checkboxes](/components/checkboxes/) -- [Radio Buttons](/components/radio-buttons/) -- [Switches](/components/switches/) - diff --git a/docs/pages/api-docs/form-control.js b/docs/pages/api-docs/form-control.js index 433f6a922ef529..76adb44ba5151a 100644 --- a/docs/pages/api-docs/form-control.js +++ b/docs/pages/api-docs/form-control.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './form-control.json'; -const pageFilename = 'api/form-control'; -const requireRaw = require.context('!raw-loader!./', false, /\/form-control\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'FormControl'); + const classDescriptions = mapApiTranslations(req2, 'FormControl'); + const classConditions = mapApiTranslations(req3, 'FormControl'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/form-control.json b/docs/pages/api-docs/form-control.json new file mode 100644 index 00000000000000..f64fdb3df5fef9 --- /dev/null +++ b/docs/pages/api-docs/form-control.json @@ -0,0 +1,109 @@ +{ + "name": "FormControl", + "filename": "/packages/material-ui/src/FormControl/FormControl.js", + "description": "Provides context such as filled/focused/error/required for form inputs.\nRelying on the context provides high flexibility and ensures that the state always stays\nconsistent across the children of the `FormControl`.\nThis context is used by the following components:\n\n - FormLabel\n - FormHelperText\n - Input\n - InputLabel\n\nYou can find one composition example below and more going to [the demos](/components/text-fields/#components).\n\n```jsx\n\n Email address\n \n We'll never share your email.\n\n```\n\n⚠️ Only one `InputBase` can be used within a FormControl because it create visual inconsistencies.\nFor instance, only one input can be focused at the same time, the state shouldn't be shared.", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "color": { + "type": { + "name": "enum", + "value": [ + { "value": "'primary'", "computed": false }, + { "value": "'secondary'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'primary'" }, + "defaultValue": { "value": "'primary'", "computed": false } + }, + "component": { + "type": { "name": "elementType" }, + "required": false, + "defaultValue": { "value": "'div'", "computed": false } + }, + "disabled": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "error": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "focused": { "type": { "name": "bool" }, "required": false }, + "fullWidth": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "hiddenLabel": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "margin": { + "type": { + "name": "enum", + "value": [ + { "value": "'dense'", "computed": false }, + { "value": "'none'", "computed": false }, + { "value": "'normal'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'none'" }, + "defaultValue": { "value": "'none'", "computed": false } + }, + "required": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "size": { + "type": { + "name": "enum", + "value": [ + { "value": "'medium'", "computed": false }, + { "value": "'small'", "computed": false } + ] + }, + "required": false + }, + "variant": { + "type": { + "name": "enum", + "value": [ + { "value": "'filled'", "computed": false }, + { "value": "'outlined'", "computed": false }, + { "value": "'standard'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'standard'" }, + "defaultValue": { "value": "'standard'", "computed": false } + } + }, + "spread": true, + "styles": { + "classes": ["root", "marginNormal", "marginDense", "fullWidth"], + "name": "MuiFormControl", + "descriptions": {}, + "globalClasses": { + "root": "MuiFormControl-root", + "marginNormal": "MuiFormControl-marginNormal", + "marginDense": "MuiFormControl-marginDense", + "fullWidth": "MuiFormControl-fullWidth" + } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": null, + "demos": "- [Checkboxes](/components/checkboxes/)\n- [Radio Buttons](/components/radio-buttons/)\n- [Switches](/components/switches/)\n- [Text Fields](/components/text-fields/)" +} diff --git a/docs/pages/api-docs/form-control.md b/docs/pages/api-docs/form-control.md deleted file mode 100644 index 828b4aae676ca6..00000000000000 --- a/docs/pages/api-docs/form-control.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -filename: /packages/material-ui/src/FormControl/FormControl.js ---- - - - -# FormControl API - -

The API documentation of the FormControl React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import FormControl from '@material-ui/core/FormControl'; -// or -import { FormControl } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - -Provides context such as filled/focused/error/required for form inputs. -Relying on the context provides high flexibility and ensures that the state always stays -consistent across the children of the `FormControl`. -This context is used by the following components: - - - FormLabel - - FormHelperText - - Input - - InputLabel - -You can find one composition example below and more going to [the demos](/components/text-fields/#components). - -```jsx - - Email address - - We'll never share your email. - -``` - -⚠️ Only one `InputBase` can be used within a FormControl because it create visual inconsistencies. -For instance, only one input can be focused at the same time, the state shouldn't be shared. - -## Component name - -The `MuiFormControl` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The contents of the form control. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'primary'
| 'secondary' | 'primary' | The color of the component. It supports those theme colors that make sense for this component. | -| component | elementType | 'div' | The component used for the root node. Either a string to use a HTML element or a component. | -| disabled | bool | false | If `true`, the label, input and helper text should be displayed in a disabled state. | -| error | bool | false | If `true`, the label should be displayed in an error state. | -| focused | bool | | If `true`, the component will be displayed in focused state. | -| fullWidth | bool | false | If `true`, the component will take up the full width of its container. | -| hiddenLabel | bool | false | If `true`, the label will be hidden. This is used to increase density for a `FilledInput`. Be sure to add `aria-label` to the `input` element. | -| margin | 'dense'
| 'none'
| 'normal' | 'none' | If `dense` or `normal`, will adjust vertical spacing of this and contained components. | -| required | bool | false | If `true`, the label will indicate that the input is required. | -| size | 'medium'
| 'small' | | The size of the text field. | -| variant | 'filled'
| 'outlined'
| 'standard' | 'standard' | The variant to use. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiFormControl-root | Styles applied to the root element. -| marginNormal | .MuiFormControl-marginNormal | Styles applied to the root element if `margin="normal"`. -| marginDense | .MuiFormControl-marginDense | Styles applied to the root element if `margin="dense"`. -| fullWidth | .MuiFormControl-fullWidth | Styles applied to the root element if `fullWidth={true}`. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/FormControl/FormControl.js) for more detail. - -## Demos - -- [Checkboxes](/components/checkboxes/) -- [Radio Buttons](/components/radio-buttons/) -- [Switches](/components/switches/) -- [Text Fields](/components/text-fields/) - diff --git a/docs/pages/api-docs/form-group.js b/docs/pages/api-docs/form-group.js index f1fedc62ae2244..feaea776437d15 100644 --- a/docs/pages/api-docs/form-group.js +++ b/docs/pages/api-docs/form-group.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './form-group.json'; -const pageFilename = 'api/form-group'; -const requireRaw = require.context('!raw-loader!./', false, /\/form-group\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'FormGroup'); + const classDescriptions = mapApiTranslations(req2, 'FormGroup'); + const classConditions = mapApiTranslations(req3, 'FormGroup'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/form-group.json b/docs/pages/api-docs/form-group.json new file mode 100644 index 00000000000000..804a1a26e108de --- /dev/null +++ b/docs/pages/api-docs/form-group.json @@ -0,0 +1,26 @@ +{ + "name": "FormGroup", + "filename": "/packages/material-ui/src/FormGroup/FormGroup.js", + "description": "`FormGroup` wraps controls such as `Checkbox` and `Switch`.\nIt provides compact row layout.\nFor the `Radio`, you should be using the `RadioGroup` component instead of this one.", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "row": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + } + }, + "spread": true, + "styles": { + "classes": ["root", "row"], + "name": "MuiFormGroup", + "descriptions": {}, + "globalClasses": { "root": "MuiFormGroup-root", "row": "MuiFormGroup-row" } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": null, + "demos": "- [Checkboxes](/components/checkboxes/)\n- [Switches](/components/switches/)" +} diff --git a/docs/pages/api-docs/form-group.md b/docs/pages/api-docs/form-group.md deleted file mode 100644 index 471086dbedb3be..00000000000000 --- a/docs/pages/api-docs/form-group.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -filename: /packages/material-ui/src/FormGroup/FormGroup.js ---- - - - -# FormGroup API - -

The API documentation of the FormGroup React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import FormGroup from '@material-ui/core/FormGroup'; -// or -import { FormGroup } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - -`FormGroup` wraps controls such as `Checkbox` and `Switch`. -It provides compact row layout. -For the `Radio`, you should be using the `RadioGroup` component instead of this one. - -## Component name - -The `MuiFormGroup` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| row | bool | false | Display group of elements in a compact row. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiFormGroup-root | Styles applied to the root element. -| row | .MuiFormGroup-row | Styles applied to the root element if `row={true}`. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/FormGroup/FormGroup.js) for more detail. - -## Demos - -- [Checkboxes](/components/checkboxes/) -- [Switches](/components/switches/) - diff --git a/docs/pages/api-docs/form-helper-text.js b/docs/pages/api-docs/form-helper-text.js index ddf08e0d7cdc2f..05aadb8d0e5373 100644 --- a/docs/pages/api-docs/form-helper-text.js +++ b/docs/pages/api-docs/form-helper-text.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './form-helper-text.json'; -const pageFilename = 'api/form-helper-text'; -const requireRaw = require.context('!raw-loader!./', false, /\/form-helper-text\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'FormHelperText'); + const classDescriptions = mapApiTranslations(req2, 'FormHelperText'); + const classConditions = mapApiTranslations(req3, 'FormHelperText'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/form-helper-text.json b/docs/pages/api-docs/form-helper-text.json new file mode 100644 index 00000000000000..38eca12ac101a2 --- /dev/null +++ b/docs/pages/api-docs/form-helper-text.json @@ -0,0 +1,63 @@ +{ + "name": "FormHelperText", + "filename": "/packages/material-ui/src/FormHelperText/FormHelperText.js", + "description": "", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "component": { + "type": { "name": "elementType" }, + "required": false, + "defaultValue": { "value": "'p'", "computed": false } + }, + "disabled": { "type": { "name": "bool" }, "required": false }, + "error": { "type": { "name": "bool" }, "required": false }, + "filled": { "type": { "name": "bool" }, "required": false }, + "focused": { "type": { "name": "bool" }, "required": false }, + "margin": { + "type": { "name": "enum", "value": [{ "value": "'dense'", "computed": false }] }, + "required": false + }, + "required": { "type": { "name": "bool" }, "required": false }, + "variant": { + "type": { + "name": "enum", + "value": [ + { "value": "'filled'", "computed": false }, + { "value": "'outlined'", "computed": false }, + { "value": "'standard'", "computed": false } + ] + }, + "required": false + } + }, + "spread": true, + "styles": { + "classes": [ + "root", + "error", + "disabled", + "marginDense", + "contained", + "focused", + "filled", + "required" + ], + "name": "MuiFormHelperText", + "descriptions": {}, + "globalClasses": { + "root": "MuiFormHelperText-root", + "error": "Mui-error", + "disabled": "Mui-disabled", + "marginDense": "MuiFormHelperText-marginDense", + "contained": "MuiFormHelperText-contained", + "focused": "Mui-focused", + "filled": "MuiFormHelperText-filled", + "required": "Mui-required" + } + }, + "forwardsRefTo": "HTMLParagraphElement", + "inheritance": null, + "demos": "- [Text Fields](/components/text-fields/)" +} diff --git a/docs/pages/api-docs/form-helper-text.md b/docs/pages/api-docs/form-helper-text.md deleted file mode 100644 index 000ef246121f41..00000000000000 --- a/docs/pages/api-docs/form-helper-text.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -filename: /packages/material-ui/src/FormHelperText/FormHelperText.js ---- - - - -# FormHelperText API - -

The API documentation of the FormHelperText React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import FormHelperText from '@material-ui/core/FormHelperText'; -// or -import { FormHelperText } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiFormHelperText` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The content of the component.
If `' '` is provided, the component reserves one line height for displaying a future message. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | elementType | 'p' | The component used for the root node. Either a string to use a HTML element or a component. | -| disabled | bool | | If `true`, the helper text should be displayed in a disabled state. | -| error | bool | | If `true`, helper text should be displayed in an error state. | -| filled | bool | | If `true`, the helper text should use filled classes key. | -| focused | bool | | If `true`, the helper text should use focused classes key. | -| margin | 'dense' | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | -| required | bool | | If `true`, the helper text should use required classes key. | -| variant | 'filled'
| 'outlined'
| 'standard' | | The variant to use. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiFormHelperText-root | Styles applied to the root element. -| error | .Mui-error | Pseudo-class applied to the root element if `error={true}`. -| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. -| marginDense | .MuiFormHelperText-marginDense | Styles applied to the root element if `margin="dense"`. -| contained | .MuiFormHelperText-contained | Styles applied to the root element if `variant="filled"` or `variant="outlined"`. -| focused | .Mui-focused | Pseudo-class applied to the root element if `focused={true}`. -| filled | .MuiFormHelperText-filled | Pseudo-class applied to the root element if `filled={true}`. -| required | .Mui-required | Pseudo-class applied to the root element if `required={true}`. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/FormHelperText/FormHelperText.js) for more detail. - -## Demos - -- [Text Fields](/components/text-fields/) - diff --git a/docs/pages/api-docs/form-label.js b/docs/pages/api-docs/form-label.js index 978231ae2e0a87..9caaf13ad790ba 100644 --- a/docs/pages/api-docs/form-label.js +++ b/docs/pages/api-docs/form-label.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './form-label.json'; -const pageFilename = 'api/form-label'; -const requireRaw = require.context('!raw-loader!./', false, /\/form-label\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'FormLabel'); + const classDescriptions = mapApiTranslations(req2, 'FormLabel'); + const classConditions = mapApiTranslations(req3, 'FormLabel'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/form-label.json b/docs/pages/api-docs/form-label.json new file mode 100644 index 00000000000000..caa4fb9c6fd5b8 --- /dev/null +++ b/docs/pages/api-docs/form-label.json @@ -0,0 +1,58 @@ +{ + "name": "FormLabel", + "filename": "/packages/material-ui/src/FormLabel/FormLabel.js", + "description": "", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "color": { + "type": { + "name": "enum", + "value": [ + { "value": "'primary'", "computed": false }, + { "value": "'secondary'", "computed": false } + ] + }, + "required": false + }, + "component": { + "type": { "name": "elementType" }, + "required": false, + "defaultValue": { "value": "'label'", "computed": false } + }, + "disabled": { "type": { "name": "bool" }, "required": false }, + "error": { "type": { "name": "bool" }, "required": false }, + "filled": { "type": { "name": "bool" }, "required": false }, + "focused": { "type": { "name": "bool" }, "required": false }, + "required": { "type": { "name": "bool" }, "required": false } + }, + "spread": true, + "styles": { + "classes": [ + "root", + "colorSecondary", + "focused", + "disabled", + "error", + "filled", + "required", + "asterisk" + ], + "name": "MuiFormLabel", + "descriptions": {}, + "globalClasses": { + "root": "MuiFormLabel-root", + "colorSecondary": "MuiFormLabel-colorSecondary", + "focused": "Mui-focused", + "disabled": "Mui-disabled", + "error": "Mui-error", + "filled": "MuiFormLabel-filled", + "required": "Mui-required", + "asterisk": "MuiFormLabel-asterisk" + } + }, + "forwardsRefTo": "HTMLLabelElement", + "inheritance": null, + "demos": "- [Checkboxes](/components/checkboxes/)\n- [Radio Buttons](/components/radio-buttons/)\n- [Switches](/components/switches/)" +} diff --git a/docs/pages/api-docs/form-label.md b/docs/pages/api-docs/form-label.md deleted file mode 100644 index 31b070290c9e9b..00000000000000 --- a/docs/pages/api-docs/form-label.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -filename: /packages/material-ui/src/FormLabel/FormLabel.js ---- - - - -# FormLabel API - -

The API documentation of the FormLabel React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import FormLabel from '@material-ui/core/FormLabel'; -// or -import { FormLabel } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiFormLabel` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'primary'
| 'secondary' | | The color of the component. It supports those theme colors that make sense for this component. | -| component | elementType | 'label' | The component used for the root node. Either a string to use a HTML element or a component. | -| disabled | bool | | If `true`, the label should be displayed in a disabled state. | -| error | bool | | If `true`, the label should be displayed in an error state. | -| filled | bool | | If `true`, the label should use filled classes key. | -| focused | bool | | If `true`, the input of this label is focused (used by `FormGroup` components). | -| required | bool | | If `true`, the label will indicate that the input is required. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiFormLabel-root | Styles applied to the root element. -| colorSecondary | .MuiFormLabel-colorSecondary | Styles applied to the root element if the color is secondary. -| focused | .Mui-focused | Pseudo-class applied to the root element if `focused={true}`. -| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. -| error | .Mui-error | Pseudo-class applied to the root element if `error={true}`. -| filled | .MuiFormLabel-filled | Pseudo-class applied to the root element if `filled={true}`. -| required | .Mui-required | Pseudo-class applied to the root element if `required={true}`. -| asterisk | .MuiFormLabel-asterisk | Styles applied to the asterisk element. - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/FormLabel/FormLabel.js) for more detail. - -## Demos - -- [Checkboxes](/components/checkboxes/) -- [Radio Buttons](/components/radio-buttons/) -- [Switches](/components/switches/) - diff --git a/docs/pages/api-docs/grid.js b/docs/pages/api-docs/grid.js index 35fcee3aa8e2f6..e6a5c6cb3c6582 100644 --- a/docs/pages/api-docs/grid.js +++ b/docs/pages/api-docs/grid.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './grid.json'; -const pageFilename = 'api/grid'; -const requireRaw = require.context('!raw-loader!./', false, /\/grid\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'Grid'); + const classDescriptions = mapApiTranslations(req2, 'Grid'); + const classConditions = mapApiTranslations(req3, 'Grid'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/grid.json b/docs/pages/api-docs/grid.json new file mode 100644 index 00000000000000..c84be2facf1301 --- /dev/null +++ b/docs/pages/api-docs/grid.json @@ -0,0 +1,379 @@ +{ + "name": "Grid", + "filename": "/packages/material-ui/src/Grid/Grid.js", + "description": "", + "props": { + "alignContent": { + "type": { + "name": "enum", + "value": [ + { "value": "'center'", "computed": false }, + { "value": "'flex-end'", "computed": false }, + { "value": "'flex-start'", "computed": false }, + { "value": "'space-around'", "computed": false }, + { "value": "'space-between'", "computed": false }, + { "value": "'stretch'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'stretch'" }, + "defaultValue": { "value": "'stretch'", "computed": false } + }, + "alignItems": { + "type": { + "name": "enum", + "value": [ + { "value": "'baseline'", "computed": false }, + { "value": "'center'", "computed": false }, + { "value": "'flex-end'", "computed": false }, + { "value": "'flex-start'", "computed": false }, + { "value": "'stretch'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'stretch'" }, + "defaultValue": { "value": "'stretch'", "computed": false } + }, + "children": { "type": { "name": "node" }, "required": false }, + "classes": { "type": { "name": "object" }, "required": false }, + "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, + "component": { + "type": { "name": "elementType" }, + "required": false, + "defaultValue": { "value": "'div'", "computed": false } + }, + "container": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "direction": { + "type": { + "name": "enum", + "value": [ + { "value": "'column-reverse'", "computed": false }, + { "value": "'column'", "computed": false }, + { "value": "'row-reverse'", "computed": false }, + { "value": "'row'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'row'" }, + "defaultValue": { "value": "'row'", "computed": false } + }, + "item": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "justifyContent": { + "type": { + "name": "enum", + "value": [ + { "value": "'center'", "computed": false }, + { "value": "'flex-end'", "computed": false }, + { "value": "'flex-start'", "computed": false }, + { "value": "'space-around'", "computed": false }, + { "value": "'space-between'", "computed": false }, + { "value": "'space-evenly'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'flex-start'" }, + "defaultValue": { "value": "'flex-start'", "computed": false } + }, + "lg": { + "type": { + "name": "union", + "value": [ + { + "name": "enum", + "value": [ + { "value": "'auto'", "computed": false }, + { "value": "1", "computed": false }, + { "value": "2", "computed": false }, + { "value": "3", "computed": false }, + { "value": "4", "computed": false }, + { "value": "5", "computed": false }, + { "value": "6", "computed": false }, + { "value": "7", "computed": false }, + { "value": "8", "computed": false }, + { "value": "9", "computed": false }, + { "value": "10", "computed": false }, + { "value": "11", "computed": false }, + { "value": "12", "computed": false } + ] + }, + { "name": "bool" } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "md": { + "type": { + "name": "union", + "value": [ + { + "name": "enum", + "value": [ + { "value": "'auto'", "computed": false }, + { "value": "1", "computed": false }, + { "value": "2", "computed": false }, + { "value": "3", "computed": false }, + { "value": "4", "computed": false }, + { "value": "5", "computed": false }, + { "value": "6", "computed": false }, + { "value": "7", "computed": false }, + { "value": "8", "computed": false }, + { "value": "9", "computed": false }, + { "value": "10", "computed": false }, + { "value": "11", "computed": false }, + { "value": "12", "computed": false } + ] + }, + { "name": "bool" } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "sm": { + "type": { + "name": "union", + "value": [ + { + "name": "enum", + "value": [ + { "value": "'auto'", "computed": false }, + { "value": "1", "computed": false }, + { "value": "2", "computed": false }, + { "value": "3", "computed": false }, + { "value": "4", "computed": false }, + { "value": "5", "computed": false }, + { "value": "6", "computed": false }, + { "value": "7", "computed": false }, + { "value": "8", "computed": false }, + { "value": "9", "computed": false }, + { "value": "10", "computed": false }, + { "value": "11", "computed": false }, + { "value": "12", "computed": false } + ] + }, + { "name": "bool" } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "spacing": { + "type": { + "name": "enum", + "value": [ + { "value": "0", "computed": false }, + { "value": "1", "computed": false }, + { "value": "2", "computed": false }, + { "value": "3", "computed": false }, + { "value": "4", "computed": false }, + { "value": "5", "computed": false }, + { "value": "6", "computed": false }, + { "value": "7", "computed": false }, + { "value": "8", "computed": false }, + { "value": "9", "computed": false }, + { "value": "10", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "0" }, + "defaultValue": { "value": "0", "computed": false } + }, + "wrap": { + "type": { + "name": "enum", + "value": [ + { "value": "'nowrap'", "computed": false }, + { "value": "'wrap-reverse'", "computed": false }, + { "value": "'wrap'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'wrap'" }, + "defaultValue": { "value": "'wrap'", "computed": false } + }, + "xl": { + "type": { + "name": "union", + "value": [ + { + "name": "enum", + "value": [ + { "value": "'auto'", "computed": false }, + { "value": "1", "computed": false }, + { "value": "2", "computed": false }, + { "value": "3", "computed": false }, + { "value": "4", "computed": false }, + { "value": "5", "computed": false }, + { "value": "6", "computed": false }, + { "value": "7", "computed": false }, + { "value": "8", "computed": false }, + { "value": "9", "computed": false }, + { "value": "10", "computed": false }, + { "value": "11", "computed": false }, + { "value": "12", "computed": false } + ] + }, + { "name": "bool" } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "xs": { + "type": { + "name": "union", + "value": [ + { + "name": "enum", + "value": [ + { "value": "'auto'", "computed": false }, + { "value": "1", "computed": false }, + { "value": "2", "computed": false }, + { "value": "3", "computed": false }, + { "value": "4", "computed": false }, + { "value": "5", "computed": false }, + { "value": "6", "computed": false }, + { "value": "7", "computed": false }, + { "value": "8", "computed": false }, + { "value": "9", "computed": false }, + { "value": "10", "computed": false }, + { "value": "11", "computed": false }, + { "value": "12", "computed": false } + ] + }, + { "name": "bool" } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "zeroMinWidth": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + } + }, + "spread": true, + "styles": { + "classes": [ + "root", + "container", + "item", + "zeroMinWidth", + "direction-xs-column", + "direction-xs-column-reverse", + "direction-xs-row-reverse", + "wrap-xs-nowrap", + "wrap-xs-wrap-reverse", + "align-items-xs-center", + "align-items-xs-flex-start", + "align-items-xs-flex-end", + "align-items-xs-baseline", + "align-content-xs-center", + "align-content-xs-flex-start", + "align-content-xs-flex-end", + "align-content-xs-space-between", + "align-content-xs-space-around", + "justify-content-xs-center", + "justify-content-xs-flex-end", + "justify-content-xs-space-between", + "justify-content-xs-space-around", + "justify-content-xs-space-evenly", + "spacing-xs-1", + "spacing-xs-2", + "spacing-xs-3", + "spacing-xs-4", + "spacing-xs-5", + "spacing-xs-6", + "spacing-xs-7", + "spacing-xs-8", + "spacing-xs-9", + "spacing-xs-10", + "grid-xs-auto", + "grid-xs-true", + "grid-xs-1", + "grid-xs-2", + "grid-xs-3", + "grid-xs-4", + "grid-xs-5", + "grid-xs-6", + "grid-xs-7", + "grid-xs-8", + "grid-xs-9", + "grid-xs-10", + "grid-xs-11", + "grid-xs-12" + ], + "name": "MuiGrid", + "descriptions": {}, + "globalClasses": { + "root": "MuiGrid-root", + "container": "MuiGrid-container", + "item": "MuiGrid-item", + "zeroMinWidth": "MuiGrid-zeroMinWidth", + "direction-xs-column": "MuiGrid-direction-xs-column", + "direction-xs-column-reverse": "MuiGrid-direction-xs-column-reverse", + "direction-xs-row-reverse": "MuiGrid-direction-xs-row-reverse", + "wrap-xs-nowrap": "MuiGrid-wrap-xs-nowrap", + "wrap-xs-wrap-reverse": "MuiGrid-wrap-xs-wrap-reverse", + "align-items-xs-center": "MuiGrid-align-items-xs-center", + "align-items-xs-flex-start": "MuiGrid-align-items-xs-flex-start", + "align-items-xs-flex-end": "MuiGrid-align-items-xs-flex-end", + "align-items-xs-baseline": "MuiGrid-align-items-xs-baseline", + "align-content-xs-center": "MuiGrid-align-content-xs-center", + "align-content-xs-flex-start": "MuiGrid-align-content-xs-flex-start", + "align-content-xs-flex-end": "MuiGrid-align-content-xs-flex-end", + "align-content-xs-space-between": "MuiGrid-align-content-xs-space-between", + "align-content-xs-space-around": "MuiGrid-align-content-xs-space-around", + "justify-content-xs-center": "MuiGrid-justify-content-xs-center", + "justify-content-xs-flex-end": "MuiGrid-justify-content-xs-flex-end", + "justify-content-xs-space-between": "MuiGrid-justify-content-xs-space-between", + "justify-content-xs-space-around": "MuiGrid-justify-content-xs-space-around", + "justify-content-xs-space-evenly": "MuiGrid-justify-content-xs-space-evenly", + "spacing-xs-1": "MuiGrid-spacing-xs-1", + "spacing-xs-2": "MuiGrid-spacing-xs-2", + "spacing-xs-3": "MuiGrid-spacing-xs-3", + "spacing-xs-4": "MuiGrid-spacing-xs-4", + "spacing-xs-5": "MuiGrid-spacing-xs-5", + "spacing-xs-6": "MuiGrid-spacing-xs-6", + "spacing-xs-7": "MuiGrid-spacing-xs-7", + "spacing-xs-8": "MuiGrid-spacing-xs-8", + "spacing-xs-9": "MuiGrid-spacing-xs-9", + "spacing-xs-10": "MuiGrid-spacing-xs-10", + "grid-xs-auto": "MuiGrid-grid-xs-auto", + "grid-xs-true": "MuiGrid-grid-xs-true", + "grid-xs-1": "MuiGrid-grid-xs-1", + "grid-xs-2": "MuiGrid-grid-xs-2", + "grid-xs-3": "MuiGrid-grid-xs-3", + "grid-xs-4": "MuiGrid-grid-xs-4", + "grid-xs-5": "MuiGrid-grid-xs-5", + "grid-xs-6": "MuiGrid-grid-xs-6", + "grid-xs-7": "MuiGrid-grid-xs-7", + "grid-xs-8": "MuiGrid-grid-xs-8", + "grid-xs-9": "MuiGrid-grid-xs-9", + "grid-xs-10": "MuiGrid-grid-xs-10", + "grid-xs-11": "MuiGrid-grid-xs-11", + "grid-xs-12": "MuiGrid-grid-xs-12" + } + }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": null, + "demos": "- [Grid](/components/grid/)" +} diff --git a/docs/pages/api-docs/grid.md b/docs/pages/api-docs/grid.md deleted file mode 100644 index 1763d0be66b814..00000000000000 --- a/docs/pages/api-docs/grid.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -filename: /packages/material-ui/src/Grid/Grid.js ---- - - - -# Grid API - -

The API documentation of the Grid React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import Grid from '@material-ui/core/Grid'; -// or -import { Grid } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiGrid` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| alignContent | 'center'
| 'flex-end'
| 'flex-start'
| 'space-around'
| 'space-between'
| 'stretch' | 'stretch' | Defines the `align-content` style property. It's applied for all screen sizes. | -| alignItems | 'baseline'
| 'center'
| 'flex-end'
| 'flex-start'
| 'stretch' | 'stretch' | Defines the `align-items` style property. It's applied for all screen sizes. | -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | elementType | 'div' | The component used for the root node. Either a string to use a HTML element or a component. | -| container | bool | false | If `true`, the component will have the flex *container* behavior. You should be wrapping *items* with a *container*. | -| direction | 'column-reverse'
| 'column'
| 'row-reverse'
| 'row' | 'row' | Defines the `flex-direction` style property. It is applied for all screen sizes. | -| item | bool | false | If `true`, the component will have the flex *item* behavior. You should be wrapping *items* with a *container*. | -| justifyContent | 'center'
| 'flex-end'
| 'flex-start'
| 'space-around'
| 'space-between'
| 'space-evenly' | 'flex-start' | Defines the `justify-content` style property. It is applied for all screen sizes. | -| lg | 'auto'
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10
| 11
| 12
| bool | false | Defines the number of grids the component is going to use. It's applied for the `lg` breakpoint and wider screens if not overridden. | -| md | 'auto'
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10
| 11
| 12
| bool | false | Defines the number of grids the component is going to use. It's applied for the `md` breakpoint and wider screens if not overridden. | -| sm | 'auto'
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10
| 11
| 12
| bool | false | Defines the number of grids the component is going to use. It's applied for the `sm` breakpoint and wider screens if not overridden. | -| spacing | 0
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10 | 0 | Defines the space between the type `item` component. It can only be used on a type `container` component. | -| wrap | 'nowrap'
| 'wrap-reverse'
| 'wrap' | 'wrap' | Defines the `flex-wrap` style property. It's applied for all screen sizes. | -| xl | 'auto'
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10
| 11
| 12
| bool | false | Defines the number of grids the component is going to use. It's applied for the `xl` breakpoint and wider screens. | -| xs | 'auto'
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10
| 11
| 12
| bool | false | Defines the number of grids the component is going to use. It's applied for all the screen sizes with the lowest priority. | -| zeroMinWidth | bool | false | If `true`, it sets `min-width: 0` on the item. Refer to the limitations section of the documentation to better understand the use case. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiGrid-root | Styles applied to the root element. -| container | .MuiGrid-container | Styles applied to the root element if `container={true}`. -| item | .MuiGrid-item | Styles applied to the root element if `item={true}`. -| zeroMinWidth | .MuiGrid-zeroMinWidth | Styles applied to the root element if `zeroMinWidth={true}`. -| direction-xs-column | .MuiGrid-direction-xs-column | -| direction-xs-column-reverse | .MuiGrid-direction-xs-column-reverse | -| direction-xs-row-reverse | .MuiGrid-direction-xs-row-reverse | -| wrap-xs-nowrap | .MuiGrid-wrap-xs-nowrap | -| wrap-xs-wrap-reverse | .MuiGrid-wrap-xs-wrap-reverse | -| align-items-xs-center | .MuiGrid-align-items-xs-center | -| align-items-xs-flex-start | .MuiGrid-align-items-xs-flex-start | -| align-items-xs-flex-end | .MuiGrid-align-items-xs-flex-end | -| align-items-xs-baseline | .MuiGrid-align-items-xs-baseline | -| align-content-xs-center | .MuiGrid-align-content-xs-center | -| align-content-xs-flex-start | .MuiGrid-align-content-xs-flex-start | -| align-content-xs-flex-end | .MuiGrid-align-content-xs-flex-end | -| align-content-xs-space-between | .MuiGrid-align-content-xs-space-between | -| align-content-xs-space-around | .MuiGrid-align-content-xs-space-around | -| justify-content-xs-center | .MuiGrid-justify-content-xs-center | -| justify-content-xs-flex-end | .MuiGrid-justify-content-xs-flex-end | -| justify-content-xs-space-between | .MuiGrid-justify-content-xs-space-between | -| justify-content-xs-space-around | .MuiGrid-justify-content-xs-space-around | -| justify-content-xs-space-evenly | .MuiGrid-justify-content-xs-space-evenly | -| spacing-xs-1 | .MuiGrid-spacing-xs-1 | -| spacing-xs-2 | .MuiGrid-spacing-xs-2 | -| spacing-xs-3 | .MuiGrid-spacing-xs-3 | -| spacing-xs-4 | .MuiGrid-spacing-xs-4 | -| spacing-xs-5 | .MuiGrid-spacing-xs-5 | -| spacing-xs-6 | .MuiGrid-spacing-xs-6 | -| spacing-xs-7 | .MuiGrid-spacing-xs-7 | -| spacing-xs-8 | .MuiGrid-spacing-xs-8 | -| spacing-xs-9 | .MuiGrid-spacing-xs-9 | -| spacing-xs-10 | .MuiGrid-spacing-xs-10 | -| grid-xs-auto | .MuiGrid-grid-xs-auto | -| grid-xs-true | .MuiGrid-grid-xs-true | -| grid-xs-1 | .MuiGrid-grid-xs-1 | -| grid-xs-2 | .MuiGrid-grid-xs-2 | -| grid-xs-3 | .MuiGrid-grid-xs-3 | -| grid-xs-4 | .MuiGrid-grid-xs-4 | -| grid-xs-5 | .MuiGrid-grid-xs-5 | -| grid-xs-6 | .MuiGrid-grid-xs-6 | -| grid-xs-7 | .MuiGrid-grid-xs-7 | -| grid-xs-8 | .MuiGrid-grid-xs-8 | -| grid-xs-9 | .MuiGrid-grid-xs-9 | -| grid-xs-10 | .MuiGrid-grid-xs-10 | -| grid-xs-11 | .MuiGrid-grid-xs-11 | -| grid-xs-12 | .MuiGrid-grid-xs-12 | - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Grid/Grid.js) for more detail. - -## Demos - -- [Grid](/components/grid/) - diff --git a/docs/pages/api-docs/grow.js b/docs/pages/api-docs/grow.js index ee20906eecd902..ba306ce06b6e62 100644 --- a/docs/pages/api-docs/grow.js +++ b/docs/pages/api-docs/grow.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './grow.json'; -const pageFilename = 'api/grow'; -const requireRaw = require.context('!raw-loader!./', false, /\/grow\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'Grow'); + const classDescriptions = mapApiTranslations(req2, 'Grow'); + const classConditions = mapApiTranslations(req3, 'Grow'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/grow.json b/docs/pages/api-docs/grow.json new file mode 100644 index 00000000000000..fb588160952f88 --- /dev/null +++ b/docs/pages/api-docs/grow.json @@ -0,0 +1,44 @@ +{ + "name": "Grow", + "filename": "/packages/material-ui/src/Grow/Grow.js", + "description": "The Grow transition is used by the [Tooltip](/components/tooltips/) and\n[Popover](/components/popover/) components.\nIt uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.", + "props": { + "children": { "type": { "name": "custom", "raw": "elementAcceptingRef" }, "required": false }, + "in": { "type": { "name": "bool" }, "required": false }, + "onEnter": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onEntered": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onEntering": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onExit": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onExited": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "onExiting": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, + "style": { "type": { "name": "object" }, "required": false, "description": "@ignore" }, + "timeout": { + "type": { + "name": "union", + "value": [ + { "name": "enum", "value": [{ "value": "'auto'", "computed": false }] }, + { "name": "number" }, + { + "name": "shape", + "value": { + "appear": { "name": "number", "required": false }, + "enter": { "name": "number", "required": false }, + "exit": { "name": "number", "required": false } + } + } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'auto'" }, + "defaultValue": { "value": "'auto'", "computed": false } + } + }, + "spread": true, + "styles": { "classes": [], "name": null, "descriptions": {}, "globalClasses": {} }, + "forwardsRefTo": "HTMLDivElement", + "inheritance": { + "component": "Transition", + "pathname": "https://reactcommunity.org/react-transition-group/transition#Transition-props" + }, + "demos": "- [Popover](/components/popover/)\n- [Transitions](/components/transitions/)" +} diff --git a/docs/pages/api-docs/grow.md b/docs/pages/api-docs/grow.md deleted file mode 100644 index ef9444c1aeef36..00000000000000 --- a/docs/pages/api-docs/grow.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -filename: /packages/material-ui/src/Grow/Grow.js ---- - - - -# Grow API - -

The API documentation of the Grow React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import Grow from '@material-ui/core/Grow'; -// or -import { Grow } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - -The Grow transition is used by the [Tooltip](/components/tooltips/) and -[Popover](/components/popover/) components. -It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally. - - - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | element | | A single child content element.
⚠️ [Needs to be able to hold a ref](/guides/composition/#caveat-with-refs). | -| in | bool | | If `true`, show the component; triggers the enter or exit animation. | -| timeout | 'auto'
| number
| { appear?: number, enter?: number, exit?: number } | 'auto' | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
Set to 'auto' to automatically calculate transition time based on height. | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element ([Transition](https://reactcommunity.org/react-transition-group/transition#Transition-props)). - -## Inheritance - -The props of the [Transition](https://reactcommunity.org/react-transition-group/transition#Transition-props) component, from react-transition-group, are also available. -You can take advantage of this behavior to [target nested components](/guides/api/#spread). - -## Demos - -- [Popover](/components/popover/) -- [Transitions](/components/transitions/) - diff --git a/docs/pages/api-docs/hidden.js b/docs/pages/api-docs/hidden.js index 6d67ca39ce34d8..a7cc52a0d15af7 100644 --- a/docs/pages/api-docs/hidden.js +++ b/docs/pages/api-docs/hidden.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './hidden.json'; -const pageFilename = 'api/hidden'; -const requireRaw = require.context('!raw-loader!./', false, /\/hidden\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'Hidden'); + const classDescriptions = mapApiTranslations(req2, 'Hidden'); + const classConditions = mapApiTranslations(req3, 'Hidden'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/hidden.json b/docs/pages/api-docs/hidden.json new file mode 100644 index 00000000000000..7021c84212faad --- /dev/null +++ b/docs/pages/api-docs/hidden.json @@ -0,0 +1,128 @@ +{ + "name": "Hidden", + "filename": "/packages/material-ui/src/Hidden/Hidden.js", + "description": "Responsively hides children based on the selected implementation.", + "props": { + "children": { "type": { "name": "node" }, "required": false }, + "implementation": { + "type": { + "name": "enum", + "value": [ + { "value": "'css'", "computed": false }, + { "value": "'js'", "computed": false } + ] + }, + "required": false, + "jsdocDefaultValue": { "value": "'js'" }, + "defaultValue": { "value": "'js'", "computed": false } + }, + "initialWidth": { + "type": { + "name": "enum", + "value": [ + { "value": "'xs'", "computed": false }, + { "value": "'sm'", "computed": false }, + { "value": "'md'", "computed": false }, + { "value": "'lg'", "computed": false }, + { "value": "'xl'", "computed": false } + ] + }, + "required": false + }, + "lgDown": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "lgUp": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "mdDown": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "mdUp": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "only": { + "type": { + "name": "union", + "value": [ + { + "name": "enum", + "value": [ + { "value": "'xs'", "computed": false }, + { "value": "'sm'", "computed": false }, + { "value": "'md'", "computed": false }, + { "value": "'lg'", "computed": false }, + { "value": "'xl'", "computed": false } + ] + }, + { + "name": "arrayOf", + "value": { + "name": "enum", + "value": [ + { "value": "'xs'", "computed": false }, + { "value": "'sm'", "computed": false }, + { "value": "'md'", "computed": false }, + { "value": "'lg'", "computed": false }, + { "value": "'xl'", "computed": false } + ] + } + } + ] + }, + "required": false + }, + "smDown": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "smUp": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "xlDown": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "xlUp": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "xsDown": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + }, + "xsUp": { + "type": { "name": "bool" }, + "required": false, + "jsdocDefaultValue": { "value": "false" }, + "defaultValue": { "value": "false", "computed": false } + } + }, + "spread": true, + "styles": { "classes": [], "name": null, "descriptions": {}, "globalClasses": {} }, + "inheritance": null, + "demos": "- [Hidden](/components/hidden/)" +} diff --git a/docs/pages/api-docs/hidden.md b/docs/pages/api-docs/hidden.md deleted file mode 100644 index 7d4d778a82b6b4..00000000000000 --- a/docs/pages/api-docs/hidden.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -filename: /packages/material-ui/src/Hidden/Hidden.js ---- - - - -# Hidden API - -

The API documentation of the Hidden React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import Hidden from '@material-ui/core/Hidden'; -// or -import { Hidden } from '@material-ui/core'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - -Responsively hides children based on the selected implementation. - - - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| implementation | 'css'
| 'js' | 'js' | Specify which implementation to use. 'js' is the default, 'css' works better for server-side rendering. | -| initialWidth | 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl' | | You can use this prop when choosing the `js` implementation with server-side rendering.
As `window.innerWidth` is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use a heuristic to approximate the screen width of the client browser screen width.
For instance, you could be using the user-agent or the client-hints. https://caniuse.com/#search=client%20hint | -| lgDown | bool | false | If `true`, screens this size and down will be hidden. | -| lgUp | bool | false | If `true`, screens this size and up will be hidden. | -| mdDown | bool | false | If `true`, screens this size and down will be hidden. | -| mdUp | bool | false | If `true`, screens this size and up will be hidden. | -| only | 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| Array<'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'> | | Hide the given breakpoint(s). | -| smDown | bool | false | If `true`, screens this size and down will be hidden. | -| smUp | bool | false | If `true`, screens this size and up will be hidden. | -| xlDown | bool | false | If `true`, screens this size and down will be hidden. | -| xlUp | bool | false | If `true`, screens this size and up will be hidden. | -| xsDown | bool | false | If `true`, screens this size and down will be hidden. | -| xsUp | bool | false | If `true`, screens this size and up will be hidden. | - -The component cannot hold a ref. - -Any other props supplied will be provided to the root element (native element). - -## Demos - -- [Hidden](/components/hidden/) - diff --git a/docs/pages/api-docs/icon-button.js b/docs/pages/api-docs/icon-button.js index 76fadb870d463a..a708a997178a6b 100644 --- a/docs/pages/api-docs/icon-button.js +++ b/docs/pages/api-docs/icon-button.js @@ -1,15 +1,23 @@ import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; +import ApiDocs from 'docs/src/modules/components/ApiDocs'; +import mapApiTranslations from 'docs/src/modules/utils/mapApiTranslations'; +import jsonPageContent from './icon-button.json'; -const pageFilename = 'api/icon-button'; -const requireRaw = require.context('!raw-loader!./', false, /\/icon-button\.md$/); +export async function getStaticProps() { + const req = require.context('docs/translations', false, /prop-descriptions.*.json$/); + const req2 = require.context('docs/translations', false, /class-descriptions.*.json$/); + const req3 = require.context('docs/translations', false, /class-conditions.*.json$/); -export default function Page({ docs }) { - return ; + const propDescriptions = mapApiTranslations(req, 'IconButton'); + const classDescriptions = mapApiTranslations(req2, 'IconButton'); + const classConditions = mapApiTranslations(req3, 'IconButton'); + + const pageContent = { ...jsonPageContent, propDescriptions, classDescriptions, classConditions }; + return { + props: { pageContent }, + }; } -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; +export default function Page({ pageContent }) { + return ; +} diff --git a/docs/pages/api-docs/icon-button.json b/docs/pages/api-docs/icon-button.json new file mode 100644 index 00000000000000..e5f33f98ccf504 --- /dev/null +++ b/docs/pages/api-docs/icon-button.json @@ -0,0 +1,98 @@ +{ + "name": "IconButton", + "filename": "/packages/material-ui/src/IconButton/IconButton.js", + "description": "Refer to the [Icons](/components/icons/) section of the documentation\nregarding the available icon options.", + "props": { + "children": { + "type": { + "name": "custom", + "raw": "chainPropTypes(PropTypes.node, (props) => {\n const found = React.Children.toArray(props.children).some(\n (child) => React.isValidElement(child) && child.props.onClick,\n );\n\n if (found) {\n return new Error(\n [\n 'Material-UI: You are providing an onClick event listener to a child of a button element.',\n 'Prefer applying it to the IconButton directly.',\n 'This guarantees that the whole