diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index 9896a6a10fad20..c43995b9f9421c 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -1,5 +1,6 @@ { "buildCommand": "build:codesandbox", + "installCommand": "install:codesandbox", "packages": [ "packages/material-ui", "packages/material-ui-icons", diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 7de03781f1384e..6635a87dec2df0 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -14,6 +14,9 @@ jobs: steps: - run: echo "${{ github.actor }}" - uses: actions/checkout@v2 + with: + # fetch all tags which are required for `yarn release:changelog` + fetch-depth: 0 - name: Use Node.js 14.x uses: actions/setup-node@v1 with: @@ -23,3 +26,6 @@ jobs: # Don't need playwright in this job PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1 - run: yarn release:build + - run: yarn release:changelog + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.mocharc.js b/.mocharc.js index 6d46bdc33b1455..844c4c877c92e0 100644 --- a/.mocharc.js +++ b/.mocharc.js @@ -8,7 +8,7 @@ module.exports = { 'docs/.next/**', ], recursive: true, - timeout: (process.env.CIRCLECI === 'true' ? 3 : 2) * 1000, // Circle CI has low-performance CPUs. + timeout: (process.env.CIRCLECI === 'true' ? 4 : 2) * 1000, // Circle CI has low-performance CPUs. reporter: 'dot', require: [require.resolve('./test/utils/setupBabel'), require.resolve('./test/utils/setupJSDOM')], 'watch-ignore': [ diff --git a/.stylelintrc.js b/.stylelintrc.js index 059de2fca134a1..12f7a1c2197b6e 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -1,6 +1,11 @@ module.exports = { processors: ['stylelint-processor-styled-components'], extends: 'stylelint-config-standard', + ignoreFiles: [ + // TypeScript declaration files contain no styles. + // Stylelint is also reporting parseError on `docs/types/react-docgen.d.ts`. + '**/*.d.ts', + ], rules: { 'value-no-vendor-prefix': true, 'property-no-vendor-prefix': true, diff --git a/CHANGELOG.md b/CHANGELOG.md index 85be214a9ebb75..8915e60ac0a0ae 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,130 @@ ### [Versions](https://material-ui.com/versions/) +## 5.0.0-alpha.24 + + + +_Jan 26, 2021_ + +Big thanks to the 23 contributors who made this release possible. Here are some highlights ✨: + +- 👩‍🎤 Convert 31 components to emotion. Around 40% of the components have been migrated so far thanks to the help of the community. +- 🐛 Fix two long-standing issues with the Grid. Solve the horizontal scrollbar as well as dimensions when nesting (#24332) @greguintow. +- 📚 Fix various display issues on API documentation pages (#24526, #24503, #24504. #24517, #24417). +- 📐 Add a subset of the system as flatten props on the CSS utility components (`Grid` and `Box` so far, `Typography` and `Stack` coming later) (#24485, #24499) @mnajdova. + + ```jsx + + ``` + +### `@material-ui/core@5.0.0-alpha.24` + +- [Dialog] Migrate DialogActions to emotion (#24613) @vicasas +- [Toolbar] Migrate to emotion (#24567) @natac13 +- [Hidden] Fix unsupported props warning when sx prop is used (#24624) @mnajdova +- [List] Migrate ListItemText to emotion (#24602) @natac13 +- [List] Migrate ListItemSecondaryAction to emotion (#24593) @xs9627 +- [BottomNavigation] Migrate to emotion (#24556) @vinyldarkscratch +- [CardActions] Fix wrong classes export name (#24609) @mnajdova +- [Card] Migrate CardContent to emotion (#24600) @vicasas +- [Card] Migrate to emotion (#24597) @povilass +- [TextField] Migrate InputBase to emotion (#24555) @duganbrett +- [Accordion] Allow to disable gutter/spacing (#24532) @TimonPllkrn +- [List] Migrate to emotion (#24560) @vinyldarkscratch +- [Card] Migrate CardActions to emotion (#24604) @vicasas +- [List] Migrate ListSubheader to emotion (#24561) @vinyldarkscratch +- [Breadcrumbs] Migrate to emotion (#24522) @vinyldarkscratch +- [Divider] Migrate to emotion (#24558) @vinyldarkscratch +- [Switch] Migrate SwitchBase to emotion (#24552) @vinyldarkscratch +- [Hidden] Migrate to emotion (#24544) @vinyldarkscratch +- [List] Migrate ListItem to emotion (#24543) @xs9627 +- [TextField] Fix Google Translate zero-width space issue (#24563) @d3mp +- [Table] Separate classes for different labels (#24568) @tonysepia +- [Accordion] Migrate AccordionSummary to emotion (#24540) @vinyldarkscratch +- [IconButton] Migrate to emotion (#24542) @vinyldarkscratch +- [Accordion] Migrate AccordionActions to emotion (#24538) @vinyldarkscratch +- [Accordion] Migrate AccordionDetails to emotion (#24539) @vinyldarkscratch +- [Link] Migrate to emotion (#24529) @praveenkumar-kalidass +- [Accordion] Migrate to emotion (#24518) @vinyldarkscratch +- [Backdrop] Migrate to emotion (#24523) @vinyldarkscratch +- [Grid] Add system props (#24499) @mnajdova +- [Icon] Migrate to emotion (#24516) @vinyldarkscratch +- [Collapse] Migrate to emotion (#24501) @vinyldarkscratch +- [SvgIcon] Migrate to emotion (#24506) @oliviertassinari +- [Avatar] Migrate AvatarGroup to emotion (#24452) @praveenkumar-kalidass +- [Box] Add back system props (#24485) @mnajdova +- [Alert] Migrate AlertTitle to emotion (#24448) @povilass +- [Alert] Migrate to emotion (#24442) @kutnickclose +- [l10n] Improve Hebrew translation (#24449) @eladmotola +- [Checkbox][Switch] Document defaultChecked (#24446) @praveenkumar-kalidass +- [AppBar] Migrate to emotion (#24439) @povilass +- [l10n] Improve German translation (#24436) @lukaselmer +- [Button][Badge] Support custom colors and sizes (#24408) @mnajdova +- [Grid] Fix horizontal scrollbar and nested dimensions (#24332) @greguintow +- [Grid] Migrate to emotion (#24395) @mnajdova +- [Badge] Fix TS custom variants (#24407) @mnajdova + +### `@material-ui/lab@5.0.0-alpha.24` + +- [DatePicker] Remove unnecessary wrapping dom node (#24533) @mxsph +- [DateRangePicker] Remove variant prop override for Textfield (#24433) @praveenkumar-kalidass +- [lab] Reflect draft pattern of picker value in implementation (#24367) @eps1lon + +### `@material-ui/styled-engine@5.0.0-alpha.24` + +- [styled-engine] Rename StylesProvider to StyledEngineProvider (#24429) @mnajdova + +### `@material-ui/system@5.0.0-alpha.24` + +- [system] Fix handling of null-ish values (#24530) @oliviertassinari + +### `@material-ui/unstyled@5.0.0-alpha.24` + +- [unstyled] Convert composeClasses to TypeScript (#24396) @eps1lon + +### `@material-ui/utils@5.0.0-alpha.24` + +- [utils] `useEventCallback` `args` defaults to `unknown[]` (#24564) @eps1lon +- [utils] Fix requirePropFactory to merge validators (#24423) @mnajdova + +### docs + +- [examples] Patch preact example not working (#24616) +- [docs] Add missing newline in component JSDOC (#24610) @eps1lon +- [docs] Add API of picker components (#24497) @eps1lon +- [examples] Add `locale` prop to the Nextjs Link component (#24596) @CyanoFresh +- [docs] List required props first in /api/* (#24526) @eps1lon +- [docs] Mention the system props when available in the API pages (#24503) @mnajdova +- [docs] Improve system properties page (#24524) @mnajdova +- [docs] Fix malformed component API description (#24504) @eps1lon +- [docs] Fix ToC "Component name" fragment link on /api/* (#24517) @eps1lon +- [docs] Fix ToC on /api pages linking to api-docs (#24515) @eps1lon +- [docs] Add comment explaining specificity bump on Select (#24509) @KarimMokhtar +- [docs] Compute spreadable from tests (#24490) @eps1lon +- [docs] Fix label bug in stepper vertical demo (#24491) @artola +- [docs] Update Divjoy URL (#24447) @mbrookes +- [docs] Improve packages description (#24330) @oliviertassinari +- [docs] Fix content-layout-shift (#24418) @oliviertassinari +- [docs] Document default values of external props (#24417) @eps1lon +- [docs] Update in-house ads (#24410) @mbrookes @ewldev + +### core + +- [core] Skip downloading browser binaries in codesandbox/ci (#24628) @eps1lon +- [core] Batch small changes (#24599) @oliviertassinari +- [test] Simplify DatePicker tests (#24545) @eps1lon +- [core] Improve pseudo classes overrides error (#24535) @mnajdova +- [core] Fix styleProps to always contain all props (#24505) @mnajdova +- [test] Fix AvatarGroup failing test (#24512) @mnajdova +- [pickers] Sort tests (#24481) @eps1lon +- [test] Split tests in describeConformanceV5 to isolate them (#24479) @mnajdova +- [core] Do not forward classes prop by default in experimentalStyled (#24451) @mnajdova +- [core] Pass styleProps on all slots in the styled() components (#24454) @mnajdova +- [core] Batch small changes (#24445) @oliviertassinari +- [core] Normalize generating declaration files (#24411) @eps1lon + +All contributors of this release in alphabetical order: @artola, @CyanoFresh, @d3mp, @duganbrett, @eladmotola, @eps1lon, @ewldev, @greguintow, @KarimMokhtar, @kutnickclose, @lukaselmer, @mbrookes, @mnajdova, @mxsph, @natac13, @oliviertassinari, @povilass, @praveenkumar-kalidass, @TimonPllkrn, @tonysepia, @vicasas, @vinyldarkscratch, @xs9627 + ## 5.0.0-alpha.23 ###### _Jan 14, 2021_ diff --git a/README.md b/README.md index cdc1d2cd8f6ab0..ba13144fae2c7b 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@
-[React](https://reactjs.org/) components for faster and simpler web development. Build your own design system, or start with [Material Design](https://material.io/design/introduction/). +Quickly build beautiful [React](https://reactjs.org/) apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with [Material Design](https://material.io/design/introduction/). [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mui-org/material-ui/blob/master/LICENSE) [![npm latest package](https://img.shields.io/npm/v/@material-ui/core/latest.svg)](https://www.npmjs.com/package/@material-ui/core) diff --git a/benchmark/browser/README.md b/benchmark/browser/README.md index 73cdaa8cbf3351..3bde60633c9a69 100644 --- a/benchmark/browser/README.md +++ b/benchmark/browser/README.md @@ -16,29 +16,29 @@ For compareable results ask a maintainer to approve the CircleCI job `benchmark` ``` noop (baseline): - 05.82 ±00.29ms + 06.13 ±00.83ms React primitives: - 42.62 ±03.55ms + 61.38 ±51.51ms React components: - 128 ±4% + 100 ±6% Styled Material-UI: - 192 ±8% + 160 ±11% Styled emotion: - 179 ±8% + 144 ±7% Styled SC: - 224 ±13% + 170 ±9% makeStyles: - 184 ±9% + 149 ±5% Box Baseline: - 213 ±11% + 170 ±12% Box Material-UI: - 501 ±23% + 402 ±14% Box Theme-UI: - 447 ±20% + 354 ±16% Box Chakra-UI: - 364 ±17% + 268 ±14% styled-components Box + @material-ui/system: - 506 ±22% + 373 ±13% styled-components Box + styled-system: - 388 ±12% + 298 ±13% ``` diff --git a/benchmark/package.json b/benchmark/package.json index 3849b5b3bbd9cd..bf270c22df3b98 100644 --- a/benchmark/package.json +++ b/benchmark/package.json @@ -1,6 +1,6 @@ { "name": "benchmark", - "version": "5.0.0-alpha.23", + "version": "5.0.0-alpha.24", "private": "true", "scripts": { "browser": "yarn webpack --config browser/webpack.config.js && node browser/scripts/benchmark.js", @@ -14,9 +14,9 @@ "@chakra-ui/system": "^1.0.0", "@emotion/react": "^11.0.0", "@emotion/styled": "^11.0.0", - "@material-ui/core": "5.0.0-alpha.23", - "@material-ui/styles": "5.0.0-alpha.23", - "@material-ui/system": "5.0.0-alpha.23", + "@material-ui/core": "5.0.0-alpha.24", + "@material-ui/styles": "5.0.0-alpha.24", + "@material-ui/system": "5.0.0-alpha.24", "@styled-system/css": "^5.1.5", "benchmark": "^2.1.4", "playwright": "^1.6.1", diff --git a/docs/package.json b/docs/package.json index fbcae2aff66ce1..80420145e2052d 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,6 +1,6 @@ { "name": "docs", - "version": "5.0.0-alpha.23", + "version": "5.0.0-alpha.24", "private": true, "author": "Material-UI Team", "license": "MIT", @@ -29,17 +29,17 @@ "@fortawesome/fontawesome-svg-core": "^1.2.30", "@fortawesome/free-solid-svg-icons": "^5.14.0", "@fortawesome/react-fontawesome": "^0.1.11", - "@material-ui/core": "5.0.0-alpha.23", + "@material-ui/core": "5.0.0-alpha.24", + "@material-ui/docs": "5.0.0-alpha.24", + "@material-ui/icons": "5.0.0-alpha.24", + "@material-ui/lab": "5.0.0-alpha.24", + "@material-ui/styled-engine": "5.0.0-alpha.24", + "@material-ui/styled-engine-sc": "5.0.0-alpha.24", + "@material-ui/styles": "5.0.0-alpha.24", + "@material-ui/system": "5.0.0-alpha.24", + "@material-ui/types": "5.1.6", + "@material-ui/unstyled": "5.0.0-alpha.24", "@material-ui/data-grid": "^4.0.0-alpha.18", - "@material-ui/docs": "5.0.0-alpha.23", - "@material-ui/icons": "5.0.0-alpha.23", - "@material-ui/lab": "5.0.0-alpha.23", - "@material-ui/styled-engine": "5.0.0-alpha.23", - "@material-ui/styled-engine-sc": "5.0.0-alpha.23", - "@material-ui/styles": "5.0.0-alpha.23", - "@material-ui/system": "5.0.0-alpha.23", - "@material-ui/types": "5.1.5", - "@material-ui/unstyled": "5.0.0-alpha.23", "@trendmicro/react-interpolate": "^0.5.5", "@types/autosuggest-highlight": "^3.1.0", "@types/css-mediaquery": "^0.1.0", @@ -110,7 +110,7 @@ "react-virtualized": "^9.21.1", "react-window": "^1.8.5", "recast": "^0.20.2", - "recharts": "^1.6.2", + "recharts": "^2.0.3", "redux": "^4.0.4", "redux-logger": "^3.0.6", "rimraf": "^3.0.0", @@ -126,7 +126,7 @@ "@babel/preset-typescript": "^7.7.4", "@types/marked": "^1.2.1", "@types/recharts": "^1.8.14", - "babel-plugin-unwrap-createstyles": "5.0.0-alpha.23", + "babel-plugin-unwrap-createstyles": "5.0.0-alpha.24", "cross-fetch": "^3.0.5", "gm": "^1.23.0" } diff --git a/docs/packages/feedback/package.json b/docs/packages/feedback/package.json index 500368b164cb2a..acd27398de5646 100644 --- a/docs/packages/feedback/package.json +++ b/docs/packages/feedback/package.json @@ -1,6 +1,6 @@ { "name": "feedback", - "version": "5.0.0-alpha.23", + "version": "5.0.0-alpha.24", "description": "Store and retrieve page ratings and comments", "main": "./index.js", "license": "MIT", diff --git a/docs/pages/_app.js b/docs/pages/_app.js index 027f443e99f750..1d86aaed7e9105 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -11,7 +11,7 @@ import { create } from 'jss'; import jssRtl from 'jss-rtl'; import { useRouter } from 'next/router'; import { StylesProvider, jssPreset } from '@material-ui/styles'; -import { StylesProvider as CoreStylesProvider } from '@material-ui/core'; +import StyledEngineProvider from '@material-ui/core/StyledEngineProvider'; import pages from 'docs/src/pages'; import initRedux from 'docs/src/modules/redux/initRedux'; import PageContext from 'docs/src/modules/components/PageContext'; @@ -21,7 +21,7 @@ import { ThemeProvider } from 'docs/src/modules/components/ThemeContext'; import { pathnameToLanguage, getCookie } from 'docs/src/modules/utils/helpers'; import { ACTION_TYPES, CODE_VARIANTS, LANGUAGES } from 'docs/src/modules/constants'; import { useUserLanguage } from 'docs/src/modules/utils/i18n'; -import StyledEngineProvider, { cacheLtr } from 'docs/src/modules/utils/StyledEngineProvider'; +import DocsStyledEngineProvider, { cacheLtr } from 'docs/src/modules/utils/StyledEngineProvider'; export { cacheLtr }; @@ -320,13 +320,13 @@ function AppWrapper(props) { - + - {children} + {children} - + diff --git a/docs/pages/api-docs/accordion-actions.json b/docs/pages/api-docs/accordion-actions.json index fbab0e15e5a6d4..8bac62912da24f 100644 --- a/docs/pages/api-docs/accordion-actions.json +++ b/docs/pages/api-docs/accordion-actions.json @@ -2,7 +2,8 @@ "props": { "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" } }, - "disableSpacing": { "type": { "name": "bool" } } + "disableSpacing": { "type": { "name": "bool" } }, + "sx": { "type": { "name": "object" } } }, "name": "AccordionActions", "styles": { "classes": ["root", "spacing"], "globalClasses": {}, "name": "MuiAccordionActions" }, @@ -11,5 +12,6 @@ "filename": "/packages/material-ui/src/AccordionActions/AccordionActions.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/accordion-details.json b/docs/pages/api-docs/accordion-details.json index 322e8d6b1c6a0c..903962e1d213d4 100644 --- a/docs/pages/api-docs/accordion-details.json +++ b/docs/pages/api-docs/accordion-details.json @@ -1,7 +1,8 @@ { "props": { "children": { "type": { "name": "node" } }, - "classes": { "type": { "name": "object" } } + "classes": { "type": { "name": "object" } }, + "sx": { "type": { "name": "object" } } }, "name": "AccordionDetails", "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiAccordionDetails" }, @@ -10,5 +11,6 @@ "filename": "/packages/material-ui/src/AccordionDetails/AccordionDetails.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/accordion-summary.json b/docs/pages/api-docs/accordion-summary.json index ff3abf2526424e..d761ee6e6cf944 100644 --- a/docs/pages/api-docs/accordion-summary.json +++ b/docs/pages/api-docs/accordion-summary.json @@ -3,11 +3,21 @@ "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" } }, "expandIcon": { "type": { "name": "node" } }, - "focusVisibleClassName": { "type": { "name": "string" } } + "focusVisibleClassName": { "type": { "name": "string" } }, + "sx": { "type": { "name": "object" } } }, "name": "AccordionSummary", "styles": { - "classes": ["root", "expanded", "focusVisible", "disabled", "content", "expandIconWrapper"], + "classes": [ + "root", + "expanded", + "focusVisible", + "disabled", + "gutters", + "contentGutters", + "content", + "expandIconWrapper" + ], "globalClasses": { "expanded": "Mui-expanded", "focusVisible": "Mui-focusVisible", @@ -20,5 +30,6 @@ "filename": "/packages/material-ui/src/AccordionSummary/AccordionSummary.js", "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" }, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/accordion.json b/docs/pages/api-docs/accordion.json index 9b4f264ea0d9db..0418744b77d4d1 100644 --- a/docs/pages/api-docs/accordion.json +++ b/docs/pages/api-docs/accordion.json @@ -4,15 +4,17 @@ "classes": { "type": { "name": "object" } }, "defaultExpanded": { "type": { "name": "bool" } }, "disabled": { "type": { "name": "bool" } }, + "disableGutters": { "type": { "name": "bool" } }, "expanded": { "type": { "name": "bool" } }, "onChange": { "type": { "name": "func" } }, "square": { "type": { "name": "bool" } }, + "sx": { "type": { "name": "object" } }, "TransitionComponent": { "type": { "name": "elementType" }, "default": "Collapse" }, "TransitionProps": { "type": { "name": "object" } } }, "name": "Accordion", "styles": { - "classes": ["root", "rounded", "expanded", "disabled", "region"], + "classes": ["root", "rounded", "expanded", "disabled", "gutters", "region"], "globalClasses": { "expanded": "Mui-expanded", "disabled": "Mui-disabled" }, "name": "MuiAccordion" }, @@ -21,5 +23,6 @@ "filename": "/packages/material-ui/src/Accordion/Accordion.js", "inheritance": { "component": "Paper", "pathname": "/api/paper/" }, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/alert-title.json b/docs/pages/api-docs/alert-title.json index 73184478b748c4..860af576ec4188 100644 --- a/docs/pages/api-docs/alert-title.json +++ b/docs/pages/api-docs/alert-title.json @@ -1,7 +1,8 @@ { "props": { "children": { "type": { "name": "node" } }, - "classes": { "type": { "name": "object" } } + "classes": { "type": { "name": "object" } }, + "sx": { "type": { "name": "object" } } }, "name": "AlertTitle", "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiAlertTitle" }, @@ -10,5 +11,6 @@ "filename": "/packages/material-ui/src/AlertTitle/AlertTitle.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/alert.json b/docs/pages/api-docs/alert.json index 78ef0408a53584..4cbe542220066d 100644 --- a/docs/pages/api-docs/alert.json +++ b/docs/pages/api-docs/alert.json @@ -26,6 +26,7 @@ }, "default": "'success'" }, + "sx": { "type": { "name": "object" } }, "variant": { "type": { "name": "union", @@ -65,5 +66,6 @@ "filename": "/packages/material-ui/src/Alert/Alert.js", "inheritance": { "component": "Paper", "pathname": "/api/paper/" }, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/app-bar.json b/docs/pages/api-docs/app-bar.json index 8ce0a151495e3a..a444efbb5ac400 100644 --- a/docs/pages/api-docs/app-bar.json +++ b/docs/pages/api-docs/app-bar.json @@ -15,7 +15,8 @@ "description": "'absolute'
| 'fixed'
| 'relative'
| 'static'
| 'sticky'" }, "default": "'fixed'" - } + }, + "sx": { "type": { "name": "object" } } }, "name": "AppBar", "styles": { @@ -40,5 +41,6 @@ "filename": "/packages/material-ui/src/AppBar/AppBar.js", "inheritance": { "component": "Paper", "pathname": "/api/paper/" }, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/autocomplete.json b/docs/pages/api-docs/autocomplete.json index 20fe9873b8e8f9..d5224e2daea313 100644 --- a/docs/pages/api-docs/autocomplete.json +++ b/docs/pages/api-docs/autocomplete.json @@ -1,5 +1,7 @@ { "props": { + "options": { "type": { "name": "array" }, "required": true }, + "renderInput": { "type": { "name": "func" }, "required": true }, "autoComplete": { "type": { "name": "bool" } }, "autoHighlight": { "type": { "name": "bool" } }, "autoSelect": { "type": { "name": "bool" } }, @@ -59,12 +61,10 @@ "open": { "type": { "name": "bool" } }, "openOnFocus": { "type": { "name": "bool" } }, "openText": { "type": { "name": "string" }, "default": "'Open'" }, - "options": { "type": { "name": "array" }, "required": true }, "PaperComponent": { "type": { "name": "elementType" }, "default": "Paper" }, "PopperComponent": { "type": { "name": "elementType" }, "default": "Popper" }, "popupIcon": { "type": { "name": "node" }, "default": "" }, "renderGroup": { "type": { "name": "func" } }, - "renderInput": { "type": { "name": "func" }, "required": true }, "renderOption": { "type": { "name": "func" } }, "renderTags": { "type": { "name": "func" } }, "selectOnFocus": { "type": { "name": "bool" }, "default": "!props.freeSolo" }, @@ -109,5 +109,6 @@ "filename": "/packages/material-ui/src/Autocomplete/Autocomplete.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/avatar-group.json b/docs/pages/api-docs/avatar-group.json index f267333fde1d97..404cbc9e7f7260 100644 --- a/docs/pages/api-docs/avatar-group.json +++ b/docs/pages/api-docs/avatar-group.json @@ -10,6 +10,7 @@ }, "default": "'medium'" }, + "sx": { "type": { "name": "object" } }, "variant": { "type": { "name": "union", @@ -25,5 +26,6 @@ "filename": "/packages/material-ui/src/AvatarGroup/AvatarGroup.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/avatar.json b/docs/pages/api-docs/avatar.json index c6992ccfc86faa..ecb2f569f28fee 100644 --- a/docs/pages/api-docs/avatar.json +++ b/docs/pages/api-docs/avatar.json @@ -28,5 +28,6 @@ "filename": "/packages/material-ui/src/Avatar/Avatar.js", "inheritance": null, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/backdrop.json b/docs/pages/api-docs/backdrop.json index 492220088c2053..2b00e61d9f3852 100644 --- a/docs/pages/api-docs/backdrop.json +++ b/docs/pages/api-docs/backdrop.json @@ -1,9 +1,10 @@ { "props": { + "open": { "type": { "name": "bool" }, "required": true }, "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" } }, "invisible": { "type": { "name": "bool" } }, - "open": { "type": { "name": "bool" }, "required": true }, + "sx": { "type": { "name": "object" } }, "transitionDuration": { "type": { "name": "union", @@ -18,5 +19,6 @@ "filename": "/packages/material-ui/src/Backdrop/Backdrop.js", "inheritance": { "component": "Fade", "pathname": "/api/fade/" }, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/badge-unstyled.json b/docs/pages/api-docs/badge-unstyled.json index 7b021fd6520f88..fc342d6fdc44c9 100644 --- a/docs/pages/api-docs/badge-unstyled.json +++ b/docs/pages/api-docs/badge-unstyled.json @@ -64,5 +64,6 @@ "filename": "/packages/material-ui-unstyled/src/BadgeUnstyled/BadgeUnstyled.js", "inheritance": null, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/badge.json b/docs/pages/api-docs/badge.json index 4e35a97e6300f1..942beae3a8af4e 100644 --- a/docs/pages/api-docs/badge.json +++ b/docs/pages/api-docs/badge.json @@ -12,11 +12,12 @@ "classes": { "type": { "name": "object" }, "default": "{}" }, "color": { "type": { - "name": "enum", - "description": "'default'
| 'error'
| 'primary'
| 'secondary'" + "name": "union", + "description": "'default'
| 'error'
| 'primary'
| 'secondary'
| string" }, "default": "'default'" }, + "component": { "type": { "name": "elementType" } }, "components": { "type": { "name": "shape", "description": "{ Badge?: elementType, Root?: elementType }" }, "default": "{}" @@ -36,8 +37,7 @@ "description": "'dot'
| 'standard'
| string" }, "default": "'standard'" - }, - "component": { "type": { "name": "elementType" } } + } }, "name": "Badge", "styles": { @@ -67,5 +67,6 @@ "filename": "/packages/material-ui/src/Badge/Badge.js", "inheritance": { "component": "BadgeUnstyled", "pathname": "/api/badge-unstyled/" }, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/bottom-navigation-action.json b/docs/pages/api-docs/bottom-navigation-action.json index 33f2ead59b3f49..4849dad1ee8021 100644 --- a/docs/pages/api-docs/bottom-navigation-action.json +++ b/docs/pages/api-docs/bottom-navigation-action.json @@ -5,6 +5,7 @@ "icon": { "type": { "name": "node" } }, "label": { "type": { "name": "node" } }, "showLabel": { "type": { "name": "bool" } }, + "sx": { "type": { "name": "object" } }, "value": { "type": { "name": "any" } } }, "name": "BottomNavigationAction", @@ -18,5 +19,6 @@ "filename": "/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js", "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" }, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/bottom-navigation.json b/docs/pages/api-docs/bottom-navigation.json index ebdef486d58d41..6abdadc661841a 100644 --- a/docs/pages/api-docs/bottom-navigation.json +++ b/docs/pages/api-docs/bottom-navigation.json @@ -5,6 +5,7 @@ "component": { "type": { "name": "elementType" } }, "onChange": { "type": { "name": "func" } }, "showLabels": { "type": { "name": "bool" } }, + "sx": { "type": { "name": "object" } }, "value": { "type": { "name": "any" } } }, "name": "BottomNavigation", @@ -14,5 +15,6 @@ "filename": "/packages/material-ui/src/BottomNavigation/BottomNavigation.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/breadcrumbs.json b/docs/pages/api-docs/breadcrumbs.json index e326142122f34a..9caa03a2639b55 100644 --- a/docs/pages/api-docs/breadcrumbs.json +++ b/docs/pages/api-docs/breadcrumbs.json @@ -7,7 +7,8 @@ "itemsAfterCollapse": { "type": { "name": "number" }, "default": "1" }, "itemsBeforeCollapse": { "type": { "name": "number" }, "default": "1" }, "maxItems": { "type": { "name": "number" }, "default": "8" }, - "separator": { "type": { "name": "node" }, "default": "'/'" } + "separator": { "type": { "name": "node" }, "default": "'/'" }, + "sx": { "type": { "name": "object" } } }, "name": "Breadcrumbs", "styles": { @@ -20,5 +21,6 @@ "filename": "/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/button-base.json b/docs/pages/api-docs/button-base.json index 22197ce7f7d4dd..e201f31e99e844 100644 --- a/docs/pages/api-docs/button-base.json +++ b/docs/pages/api-docs/button-base.json @@ -25,5 +25,6 @@ "filename": "/packages/material-ui/src/ButtonBase/ButtonBase.js", "inheritance": null, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/button-group.json b/docs/pages/api-docs/button-group.json index 44ef4f53362ab3..90e45e9dd80109 100644 --- a/docs/pages/api-docs/button-group.json +++ b/docs/pages/api-docs/button-group.json @@ -72,5 +72,6 @@ "filename": "/packages/material-ui/src/ButtonGroup/ButtonGroup.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/button.json b/docs/pages/api-docs/button.json index d746d41b8b5677..0e770c7fc91da8 100644 --- a/docs/pages/api-docs/button.json +++ b/docs/pages/api-docs/button.json @@ -4,8 +4,8 @@ "classes": { "type": { "name": "object" } }, "color": { "type": { - "name": "enum", - "description": "'inherit'
| 'primary'
| 'secondary'" + "name": "union", + "description": "'inherit'
| 'primary'
| 'secondary'
| string" }, "default": "'primary'" }, @@ -19,8 +19,8 @@ "href": { "type": { "name": "string" } }, "size": { "type": { - "name": "enum", - "description": "'large'
| 'medium'
| 'small'" + "name": "union", + "description": "'small'
| 'medium'
| 'large'
| string" }, "default": "'medium'" }, @@ -82,5 +82,6 @@ "filename": "/packages/material-ui/src/Button/Button.js", "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" }, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/card-action-area.json b/docs/pages/api-docs/card-action-area.json index 4752f0820d4580..1346871da259bb 100644 --- a/docs/pages/api-docs/card-action-area.json +++ b/docs/pages/api-docs/card-action-area.json @@ -14,5 +14,6 @@ "filename": "/packages/material-ui/src/CardActionArea/CardActionArea.js", "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/card-actions.json b/docs/pages/api-docs/card-actions.json index d7a85f285834e6..4576ff1a5d0012 100644 --- a/docs/pages/api-docs/card-actions.json +++ b/docs/pages/api-docs/card-actions.json @@ -2,7 +2,8 @@ "props": { "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" } }, - "disableSpacing": { "type": { "name": "bool" } } + "disableSpacing": { "type": { "name": "bool" } }, + "sx": { "type": { "name": "object" } } }, "name": "CardActions", "styles": { "classes": ["root", "spacing"], "globalClasses": {}, "name": "MuiCardActions" }, @@ -11,5 +12,6 @@ "filename": "/packages/material-ui/src/CardActions/CardActions.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/card-content.json b/docs/pages/api-docs/card-content.json index b11d99a3f0b77b..a9d46900c13957 100644 --- a/docs/pages/api-docs/card-content.json +++ b/docs/pages/api-docs/card-content.json @@ -2,7 +2,8 @@ "props": { "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" } }, - "component": { "type": { "name": "elementType" } } + "component": { "type": { "name": "elementType" } }, + "sx": { "type": { "name": "object" } } }, "name": "CardContent", "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiCardContent" }, @@ -11,5 +12,6 @@ "filename": "/packages/material-ui/src/CardContent/CardContent.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/card-header.json b/docs/pages/api-docs/card-header.json index b584018c911258..38d9e3e97f3c8a 100644 --- a/docs/pages/api-docs/card-header.json +++ b/docs/pages/api-docs/card-header.json @@ -7,6 +7,7 @@ "disableTypography": { "type": { "name": "bool" } }, "subheader": { "type": { "name": "node" } }, "subheaderTypographyProps": { "type": { "name": "object" } }, + "sx": { "type": { "name": "object" } }, "title": { "type": { "name": "node" } }, "titleTypographyProps": { "type": { "name": "object" } } }, @@ -21,5 +22,6 @@ "filename": "/packages/material-ui/src/CardHeader/CardHeader.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/card-media.json b/docs/pages/api-docs/card-media.json index 6cc27bd49b157e..528452a3976a72 100644 --- a/docs/pages/api-docs/card-media.json +++ b/docs/pages/api-docs/card-media.json @@ -4,7 +4,8 @@ "classes": { "type": { "name": "object" } }, "component": { "type": { "name": "elementType" } }, "image": { "type": { "name": "string" } }, - "src": { "type": { "name": "string" } } + "src": { "type": { "name": "string" } }, + "sx": { "type": { "name": "object" } } }, "name": "CardMedia", "styles": { "classes": ["root", "media", "img"], "globalClasses": {}, "name": "MuiCardMedia" }, @@ -13,5 +14,6 @@ "filename": "/packages/material-ui/src/CardMedia/CardMedia.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/card.json b/docs/pages/api-docs/card.json index 9a6b8544292e09..da2a64aa952f13 100644 --- a/docs/pages/api-docs/card.json +++ b/docs/pages/api-docs/card.json @@ -2,7 +2,8 @@ "props": { "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" } }, - "raised": { "type": { "name": "bool" } } + "raised": { "type": { "name": "bool" } }, + "sx": { "type": { "name": "object" } } }, "name": "Card", "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiCard" }, @@ -11,5 +12,6 @@ "filename": "/packages/material-ui/src/Card/Card.js", "inheritance": { "component": "Paper", "pathname": "/api/paper/" }, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/checkbox.json b/docs/pages/api-docs/checkbox.json index e67fa8662577f8..b25c30ee0066aa 100644 --- a/docs/pages/api-docs/checkbox.json +++ b/docs/pages/api-docs/checkbox.json @@ -10,6 +10,7 @@ }, "default": "'secondary'" }, + "defaultChecked": { "type": { "name": "bool" } }, "disabled": { "type": { "name": "bool" } }, "disableRipple": { "type": { "name": "bool" } }, "icon": { "type": { "name": "node" }, "default": "" }, @@ -37,5 +38,6 @@ "filename": "/packages/material-ui/src/Checkbox/Checkbox.js", "inheritance": { "component": "IconButton", "pathname": "/api/icon-button/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/chip.json b/docs/pages/api-docs/chip.json index a8fff925e6a3fd..c730093609a65c 100644 --- a/docs/pages/api-docs/chip.json +++ b/docs/pages/api-docs/chip.json @@ -73,5 +73,6 @@ "filename": "/packages/material-ui/src/Chip/Chip.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/circular-progress.json b/docs/pages/api-docs/circular-progress.json index 17e8771d98c6f6..e3adf896a1a9eb 100644 --- a/docs/pages/api-docs/circular-progress.json +++ b/docs/pages/api-docs/circular-progress.json @@ -42,5 +42,6 @@ "filename": "/packages/material-ui/src/CircularProgress/CircularProgress.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/click-away-listener.json b/docs/pages/api-docs/click-away-listener.json index d9848a3f45bc2a..635def8deaccae 100644 --- a/docs/pages/api-docs/click-away-listener.json +++ b/docs/pages/api-docs/click-away-listener.json @@ -1,6 +1,7 @@ { "props": { "children": { "type": { "name": "custom", "description": "element" }, "required": true }, + "onClickAway": { "type": { "name": "func" }, "required": true }, "disableReactTree": { "type": { "name": "bool" } }, "mouseEvent": { "type": { @@ -9,7 +10,6 @@ }, "default": "'onClick'" }, - "onClickAway": { "type": { "name": "func" }, "required": true }, "touchEvent": { "type": { "name": "enum", @@ -24,5 +24,6 @@ "filename": "/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js", "inheritance": null, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/collapse.json b/docs/pages/api-docs/collapse.json index c1591f2d4e8b9f..1521fcc69f8aab 100644 --- a/docs/pages/api-docs/collapse.json +++ b/docs/pages/api-docs/collapse.json @@ -12,6 +12,7 @@ "type": { "name": "enum", "description": "'horizontal'
| 'vertical'" }, "default": "'vertical'" }, + "sx": { "type": { "name": "object" } }, "timeout": { "type": { "name": "union", @@ -34,5 +35,6 @@ "pathname": "https://reactcommunity.org/react-transition-group/transition#Transition-props" }, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/container.json b/docs/pages/api-docs/container.json index eaf0a60c0bb591..0f893d6199cd67 100644 --- a/docs/pages/api-docs/container.json +++ b/docs/pages/api-docs/container.json @@ -33,5 +33,6 @@ "filename": "/packages/material-ui/src/Container/Container.js", "inheritance": null, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/css-baseline.json b/docs/pages/api-docs/css-baseline.json index d440cfa0710a0c..3c3c56712aff64 100644 --- a/docs/pages/api-docs/css-baseline.json +++ b/docs/pages/api-docs/css-baseline.json @@ -6,5 +6,6 @@ "filename": "/packages/material-ui/src/CssBaseline/CssBaseline.js", "inheritance": null, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/desktop-time-picker.js b/docs/pages/api-docs/desktop-time-picker.js new file mode 100644 index 00000000000000..f92ef485a7ea03 --- /dev/null +++ b/docs/pages/api-docs/desktop-time-picker.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import ApiPage from 'docs/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './desktop-time-picker.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docs/translations/api-docs/desktop-time-picker', + false, + /desktop-time-picker.*.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/api-docs/desktop-time-picker.json b/docs/pages/api-docs/desktop-time-picker.json new file mode 100644 index 00000000000000..df0a6818571cd0 --- /dev/null +++ b/docs/pages/api-docs/desktop-time-picker.json @@ -0,0 +1,70 @@ +{ + "props": { + "onChange": { "type": { "name": "func" }, "required": true }, + "renderInput": { "type": { "name": "func" }, "required": true }, + "acceptRegex": { "type": { "name": "instanceOf", "description": "RegExp" } }, + "allowKeyboardControl": { "type": { "name": "bool" } }, + "ampm": { "type": { "name": "bool" } }, + "ampmInClock": { "type": { "name": "bool" } }, + "className": { "type": { "name": "string" } }, + "dateAdapter": { "type": { "name": "object" } }, + "disableCloseOnSelect": { "type": { "name": "bool" } }, + "disabled": { "type": { "name": "bool" } }, + "disableIgnoringDatePartForTimeValidation": { "type": { "name": "bool" } }, + "disableMaskedInput": { "type": { "name": "bool" } }, + "disableOpenPicker": { "type": { "name": "bool" } }, + "getClockLabelText": { "type": { "name": "func" } }, + "getOpenDialogAriaText": { "type": { "name": "func" } }, + "InputAdornmentProps": { "type": { "name": "object" } }, + "inputFormat": { "type": { "name": "string" } }, + "mask": { "type": { "name": "string" } }, + "minutesStep": { "type": { "name": "number" } }, + "onAccept": { "type": { "name": "func" } }, + "onClose": { "type": { "name": "func" } }, + "onError": { "type": { "name": "func" } }, + "onOpen": { "type": { "name": "func" } }, + "open": { "type": { "name": "bool" } }, + "OpenPickerButtonProps": { "type": { "name": "object" } }, + "openPickerIcon": { "type": { "name": "node" } }, + "openTo": { + "type": { + "name": "enum", + "description": "'date'
| 'hours'
| 'minutes'
| 'month'
| 'seconds'
| 'year'" + } + }, + "orientation": { + "type": { "name": "enum", "description": "'landscape'
| 'portrait'" } + }, + "PopperProps": { "type": { "name": "object" } }, + "readOnly": { "type": { "name": "bool" } }, + "rifmFormatter": { "type": { "name": "func" } }, + "shouldDisableTime": { "type": { "name": "func" } }, + "showToolbar": { "type": { "name": "bool" } }, + "ToolbarComponent": { "type": { "name": "elementType" } }, + "toolbarFormat": { "type": { "name": "string" } }, + "toolbarPlaceholder": { "type": { "name": "node" } }, + "toolbarTitle": { "type": { "name": "node" } }, + "TransitionComponent": { "type": { "name": "elementType" } }, + "value": { + "type": { + "name": "union", + "description": "any
| Date
| number
| string" + } + }, + "views": { + "type": { + "name": "arrayOf", + "description": "Array<'hours'
| 'minutes'
| 'seconds'>" + } + } + }, + "name": "DesktopTimePicker", + "styles": { "classes": [], "globalClasses": {}, "name": null }, + "spread": false, + "forwardsRefTo": "HTMLInputElement", + "filename": "/packages/material-ui-lab/src/DesktopTimePicker/DesktopTimePicker.tsx", + "inheritance": null, + "demos": "", + "styledComponent": true, + "cssComponent": false +} diff --git a/docs/pages/api-docs/dialog-actions.json b/docs/pages/api-docs/dialog-actions.json index b027f7fe3dd865..78b2bd5a0f737f 100644 --- a/docs/pages/api-docs/dialog-actions.json +++ b/docs/pages/api-docs/dialog-actions.json @@ -2,7 +2,8 @@ "props": { "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" } }, - "disableSpacing": { "type": { "name": "bool" } } + "disableSpacing": { "type": { "name": "bool" } }, + "sx": { "type": { "name": "object" } } }, "name": "DialogActions", "styles": { "classes": ["root", "spacing"], "globalClasses": {}, "name": "MuiDialogActions" }, @@ -11,5 +12,6 @@ "filename": "/packages/material-ui/src/DialogActions/DialogActions.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/dialog-content-text.json b/docs/pages/api-docs/dialog-content-text.json index 920f2a17b7392c..e0094ce46ec8da 100644 --- a/docs/pages/api-docs/dialog-content-text.json +++ b/docs/pages/api-docs/dialog-content-text.json @@ -10,5 +10,6 @@ "filename": "/packages/material-ui/src/DialogContentText/DialogContentText.js", "inheritance": { "component": "Typography", "pathname": "/api/typography/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/dialog-content.json b/docs/pages/api-docs/dialog-content.json index f62124962d73e0..d93519327e41e1 100644 --- a/docs/pages/api-docs/dialog-content.json +++ b/docs/pages/api-docs/dialog-content.json @@ -11,5 +11,6 @@ "filename": "/packages/material-ui/src/DialogContent/DialogContent.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/dialog-title.json b/docs/pages/api-docs/dialog-title.json index 2f9ed759024455..ba3c91018022d9 100644 --- a/docs/pages/api-docs/dialog-title.json +++ b/docs/pages/api-docs/dialog-title.json @@ -2,7 +2,8 @@ "props": { "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" } }, - "disableTypography": { "type": { "name": "bool" } } + "disableTypography": { "type": { "name": "bool" } }, + "sx": { "type": { "name": "object" } } }, "name": "DialogTitle", "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiDialogTitle" }, @@ -11,5 +12,6 @@ "filename": "/packages/material-ui/src/DialogTitle/DialogTitle.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/dialog.json b/docs/pages/api-docs/dialog.json index f006071f8adbe5..d75ce58ee5a0a1 100644 --- a/docs/pages/api-docs/dialog.json +++ b/docs/pages/api-docs/dialog.json @@ -1,5 +1,6 @@ { "props": { + "open": { "type": { "name": "bool" }, "required": true }, "aria-describedby": { "type": { "name": "string" } }, "aria-labelledby": { "type": { "name": "string" } }, "children": { "type": { "name": "node" } }, @@ -16,7 +17,6 @@ }, "onBackdropClick": { "type": { "name": "func" } }, "onClose": { "type": { "name": "func" } }, - "open": { "type": { "name": "bool" }, "required": true }, "PaperComponent": { "type": { "name": "elementType" }, "default": "Paper" }, "PaperProps": { "type": { "name": "object" }, "default": "{}" }, "scroll": { @@ -60,5 +60,6 @@ "filename": "/packages/material-ui/src/Dialog/Dialog.js", "inheritance": { "component": "Modal", "pathname": "/api/modal/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/divider.json b/docs/pages/api-docs/divider.json index 92b37086f3ff2e..94feceeff9965b 100644 --- a/docs/pages/api-docs/divider.json +++ b/docs/pages/api-docs/divider.json @@ -10,6 +10,7 @@ "type": { "name": "enum", "description": "'horizontal'
| 'vertical'" }, "default": "'horizontal'" }, + "sx": { "type": { "name": "object" } }, "textAlign": { "type": { "name": "enum", @@ -51,5 +52,6 @@ "filename": "/packages/material-ui/src/Divider/Divider.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/drawer.json b/docs/pages/api-docs/drawer.json index 5cab1050e06332..e64d7915596915 100644 --- a/docs/pages/api-docs/drawer.json +++ b/docs/pages/api-docs/drawer.json @@ -54,5 +54,6 @@ "filename": "/packages/material-ui/src/Drawer/Drawer.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/fab.json b/docs/pages/api-docs/fab.json index 97677070c0069d..c5928f084db175 100644 --- a/docs/pages/api-docs/fab.json +++ b/docs/pages/api-docs/fab.json @@ -21,6 +21,7 @@ }, "default": "'large'" }, + "sx": { "type": { "name": "object" } }, "variant": { "type": { "name": "union", @@ -52,5 +53,6 @@ "filename": "/packages/material-ui/src/Fab/Fab.js", "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" }, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/fade.json b/docs/pages/api-docs/fade.json index e5f6000a036e81..65261392217402 100644 --- a/docs/pages/api-docs/fade.json +++ b/docs/pages/api-docs/fade.json @@ -21,5 +21,6 @@ "pathname": "https://reactcommunity.org/react-transition-group/transition#Transition-props" }, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/filled-input.json b/docs/pages/api-docs/filled-input.json index f38b5c210e86f9..9b31ef3631c3dd 100644 --- a/docs/pages/api-docs/filled-input.json +++ b/docs/pages/api-docs/filled-input.json @@ -25,6 +25,7 @@ "required": { "type": { "name": "bool" } }, "rows": { "type": { "name": "union", "description": "number
| string" } }, "startAdornment": { "type": { "name": "node" } }, + "sx": { "type": { "name": "object" } }, "type": { "type": { "name": "string" }, "default": "'text'" }, "value": { "type": { "name": "any" } } }, @@ -57,5 +58,6 @@ "filename": "/packages/material-ui/src/FilledInput/FilledInput.js", "inheritance": { "component": "InputBase", "pathname": "/api/input-base/" }, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/form-control-label.json b/docs/pages/api-docs/form-control-label.json index 49d282ee32a34a..e9f014b875599f 100644 --- a/docs/pages/api-docs/form-control-label.json +++ b/docs/pages/api-docs/form-control-label.json @@ -1,8 +1,8 @@ { "props": { + "control": { "type": { "name": "element" }, "required": true }, "checked": { "type": { "name": "bool" } }, "classes": { "type": { "name": "object" } }, - "control": { "type": { "name": "element" }, "required": true }, "disabled": { "type": { "name": "bool" } }, "inputRef": { "type": { "name": "custom", "description": "ref" } }, "label": { "type": { "name": "node" } }, @@ -34,5 +34,6 @@ "filename": "/packages/material-ui/src/FormControlLabel/FormControlLabel.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/form-control.json b/docs/pages/api-docs/form-control.json index 620374901d958c..7b1ab4edb661be 100644 --- a/docs/pages/api-docs/form-control.json +++ b/docs/pages/api-docs/form-control.json @@ -43,5 +43,6 @@ "filename": "/packages/material-ui/src/FormControl/FormControl.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/form-group.json b/docs/pages/api-docs/form-group.json index 05344612d257a0..c81e7b096396b2 100644 --- a/docs/pages/api-docs/form-group.json +++ b/docs/pages/api-docs/form-group.json @@ -11,5 +11,6 @@ "filename": "/packages/material-ui/src/FormGroup/FormGroup.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/form-helper-text.json b/docs/pages/api-docs/form-helper-text.json index 0cf23462a565ae..6e12aeecfa16d4 100644 --- a/docs/pages/api-docs/form-helper-text.json +++ b/docs/pages/api-docs/form-helper-text.json @@ -41,5 +41,6 @@ "filename": "/packages/material-ui/src/FormHelperText/FormHelperText.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/form-label.json b/docs/pages/api-docs/form-label.json index 6abb9fca8d7c4a..48e934419edbf5 100644 --- a/docs/pages/api-docs/form-label.json +++ b/docs/pages/api-docs/form-label.json @@ -35,5 +35,6 @@ "filename": "/packages/material-ui/src/FormLabel/FormLabel.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/grid.json b/docs/pages/api-docs/grid.json index 862d2a25e81dcb..f7b7005408439b 100644 --- a/docs/pages/api-docs/grid.json +++ b/docs/pages/api-docs/grid.json @@ -1,19 +1,5 @@ { "props": { - "alignContent": { - "type": { - "name": "enum", - "description": "'center'
| 'flex-end'
| 'flex-start'
| 'space-around'
| 'space-between'
| 'stretch'" - }, - "default": "'stretch'" - }, - "alignItems": { - "type": { - "name": "enum", - "description": "'baseline'
| 'center'
| 'flex-end'
| 'flex-start'
| 'stretch'" - }, - "default": "'stretch'" - }, "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" } }, "component": { "type": { "name": "elementType" } }, @@ -26,13 +12,6 @@ "default": "'row'" }, "item": { "type": { "name": "bool" } }, - "justifyContent": { - "type": { - "name": "enum", - "description": "'center'
| 'flex-end'
| 'flex-start'
| 'space-around'
| 'space-between'
| 'space-evenly'" - }, - "default": "'flex-start'" - }, "lg": { "type": { "name": "union", @@ -97,20 +76,6 @@ "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", @@ -144,5 +109,6 @@ "filename": "/packages/material-ui/src/Grid/Grid.js", "inheritance": null, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": true } diff --git a/docs/pages/api-docs/grow.json b/docs/pages/api-docs/grow.json index 992f91909b5439..f4c10d56624af5 100644 --- a/docs/pages/api-docs/grow.json +++ b/docs/pages/api-docs/grow.json @@ -21,5 +21,6 @@ "pathname": "https://reactcommunity.org/react-transition-group/transition#Transition-props" }, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/hidden.json b/docs/pages/api-docs/hidden.json index be2b3192d5dcc6..90d50d8e7c15dc 100644 --- a/docs/pages/api-docs/hidden.json +++ b/docs/pages/api-docs/hidden.json @@ -34,5 +34,6 @@ "filename": "/packages/material-ui/src/Hidden/Hidden.js", "inheritance": null, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/icon-button.json b/docs/pages/api-docs/icon-button.json index 80eec0ed691992..8092039c153db0 100644 --- a/docs/pages/api-docs/icon-button.json +++ b/docs/pages/api-docs/icon-button.json @@ -22,7 +22,8 @@ "size": { "type": { "name": "enum", "description": "'medium'
| 'small'" }, "default": "'medium'" - } + }, + "sx": { "type": { "name": "object" } } }, "name": "IconButton", "styles": { @@ -45,5 +46,6 @@ "filename": "/packages/material-ui/src/IconButton/IconButton.js", "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" }, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/icon.json b/docs/pages/api-docs/icon.json index ec9f571cfd827f..3acb8c1e1093ec 100644 --- a/docs/pages/api-docs/icon.json +++ b/docs/pages/api-docs/icon.json @@ -17,7 +17,8 @@ "description": "'inherit'
| 'large'
| 'medium'
| 'small'" }, "default": "'medium'" - } + }, + "sx": { "type": { "name": "object" } } }, "name": "Icon", "styles": { @@ -40,5 +41,6 @@ "filename": "/packages/material-ui/src/Icon/Icon.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/image-list-item-bar.json b/docs/pages/api-docs/image-list-item-bar.json index 02b7b506298c96..06c30f3a29a98f 100644 --- a/docs/pages/api-docs/image-list-item-bar.json +++ b/docs/pages/api-docs/image-list-item-bar.json @@ -40,5 +40,6 @@ "filename": "/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/image-list-item.json b/docs/pages/api-docs/image-list-item.json index 7869e997992cd9..c774e5f4f98eb3 100644 --- a/docs/pages/api-docs/image-list-item.json +++ b/docs/pages/api-docs/image-list-item.json @@ -4,11 +4,12 @@ "classes": { "type": { "name": "object" } }, "cols": { "type": { "name": "number" }, "default": "1" }, "component": { "type": { "name": "elementType" } }, - "rows": { "type": { "name": "number" }, "default": "1" } + "rows": { "type": { "name": "number" }, "default": "1" }, + "sx": { "type": { "name": "object" } } }, "name": "ImageListItem", "styles": { - "classes": ["root", "img", "standard", "woven"], + "classes": ["root", "img", "standard", "woven", "masonry", "quilted"], "globalClasses": {}, "name": "MuiImageListItem" }, @@ -17,5 +18,6 @@ "filename": "/packages/material-ui/src/ImageListItem/ImageListItem.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/image-list.json b/docs/pages/api-docs/image-list.json index 4885272be0369a..413ed6532a035c 100644 --- a/docs/pages/api-docs/image-list.json +++ b/docs/pages/api-docs/image-list.json @@ -9,6 +9,7 @@ "type": { "name": "union", "description": "'auto'
| number" }, "default": "'auto'" }, + "sx": { "type": { "name": "object" } }, "variant": { "type": { "name": "union", @@ -28,5 +29,6 @@ "filename": "/packages/material-ui/src/ImageList/ImageList.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/input-adornment.json b/docs/pages/api-docs/input-adornment.json index 89c48be1bbc6fd..4ea17a1b24b93a 100644 --- a/docs/pages/api-docs/input-adornment.json +++ b/docs/pages/api-docs/input-adornment.json @@ -32,5 +32,6 @@ "filename": "/packages/material-ui/src/InputAdornment/InputAdornment.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/input-base.json b/docs/pages/api-docs/input-base.json index 6cf7569985cc8f..e5b675c6abd771 100644 --- a/docs/pages/api-docs/input-base.json +++ b/docs/pages/api-docs/input-base.json @@ -4,6 +4,11 @@ "autoFocus": { "type": { "name": "bool" } }, "classes": { "type": { "name": "object" } }, "color": { "type": { "name": "enum", "description": "'primary'
| 'secondary'" } }, + "components": { + "type": { "name": "shape", "description": "{ Input?: elementType, Root?: elementType }" }, + "default": "{}" + }, + "componentsProps": { "type": { "name": "object" }, "default": "{}" }, "defaultValue": { "type": { "name": "any" } }, "disabled": { "type": { "name": "bool" } }, "endAdornment": { "type": { "name": "node" } }, @@ -29,6 +34,7 @@ "rows": { "type": { "name": "union", "description": "number
| string" } }, "size": { "type": { "name": "enum", "description": "'medium'
| 'small'" } }, "startAdornment": { "type": { "name": "node" } }, + "sx": { "type": { "name": "object" } }, "type": { "type": { "name": "string" }, "default": "'text'" }, "value": { "type": { "name": "any" } } }, @@ -63,5 +69,6 @@ "filename": "/packages/material-ui/src/InputBase/InputBase.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/input-label.json b/docs/pages/api-docs/input-label.json index d53189fa3dc840..0d7ccca7e5d85c 100644 --- a/docs/pages/api-docs/input-label.json +++ b/docs/pages/api-docs/input-label.json @@ -46,5 +46,6 @@ "filename": "/packages/material-ui/src/InputLabel/InputLabel.js", "inheritance": { "component": "FormLabel", "pathname": "/api/form-label/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/input.json b/docs/pages/api-docs/input.json index 7b90443c4f41a5..384770ff5d4672 100644 --- a/docs/pages/api-docs/input.json +++ b/docs/pages/api-docs/input.json @@ -54,5 +54,6 @@ "filename": "/packages/material-ui/src/Input/Input.js", "inheritance": { "component": "InputBase", "pathname": "/api/input-base/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/linear-progress.json b/docs/pages/api-docs/linear-progress.json index 230ab7a0441a1d..7489772c9ec770 100644 --- a/docs/pages/api-docs/linear-progress.json +++ b/docs/pages/api-docs/linear-progress.json @@ -45,5 +45,6 @@ "filename": "/packages/material-ui/src/LinearProgress/LinearProgress.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/link.json b/docs/pages/api-docs/link.json index 83b99278f50303..f41398ed1836db 100644 --- a/docs/pages/api-docs/link.json +++ b/docs/pages/api-docs/link.json @@ -10,6 +10,7 @@ "default": "'primary'" }, "component": { "type": { "name": "custom", "description": "element type" } }, + "sx": { "type": { "name": "object" } }, "TypographyClasses": { "type": { "name": "object" } }, "underline": { "type": { @@ -44,5 +45,6 @@ "filename": "/packages/material-ui/src/Link/Link.js", "inheritance": { "component": "Typography", "pathname": "/api/typography/" }, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/list-item-avatar.json b/docs/pages/api-docs/list-item-avatar.json index 6590737fdf4de7..1f11c2b48a93b0 100644 --- a/docs/pages/api-docs/list-item-avatar.json +++ b/docs/pages/api-docs/list-item-avatar.json @@ -14,5 +14,6 @@ "filename": "/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/list-item-icon.json b/docs/pages/api-docs/list-item-icon.json index 56bfef6b8a1135..a0c1d355e79fa6 100644 --- a/docs/pages/api-docs/list-item-icon.json +++ b/docs/pages/api-docs/list-item-icon.json @@ -14,5 +14,6 @@ "filename": "/packages/material-ui/src/ListItemIcon/ListItemIcon.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/list-item-secondary-action.json b/docs/pages/api-docs/list-item-secondary-action.json index fc17e3aaaa81f4..d5d31bf9ee6f0a 100644 --- a/docs/pages/api-docs/list-item-secondary-action.json +++ b/docs/pages/api-docs/list-item-secondary-action.json @@ -1,7 +1,8 @@ { "props": { "children": { "type": { "name": "node" } }, - "classes": { "type": { "name": "object" } } + "classes": { "type": { "name": "object" } }, + "sx": { "type": { "name": "object" } } }, "name": "ListItemSecondaryAction", "styles": { @@ -14,5 +15,6 @@ "filename": "/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/list-item-text.json b/docs/pages/api-docs/list-item-text.json index 8cc2114bfb0eb5..b6d067a24e0bfd 100644 --- a/docs/pages/api-docs/list-item-text.json +++ b/docs/pages/api-docs/list-item-text.json @@ -7,7 +7,8 @@ "primary": { "type": { "name": "node" } }, "primaryTypographyProps": { "type": { "name": "object" } }, "secondary": { "type": { "name": "node" } }, - "secondaryTypographyProps": { "type": { "name": "object" } } + "secondaryTypographyProps": { "type": { "name": "object" } }, + "sx": { "type": { "name": "object" } } }, "name": "ListItemText", "styles": { @@ -20,5 +21,6 @@ "filename": "/packages/material-ui/src/ListItemText/ListItemText.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/list-item.json b/docs/pages/api-docs/list-item.json index 43a8401ad0a96c..b746301afb1ee7 100644 --- a/docs/pages/api-docs/list-item.json +++ b/docs/pages/api-docs/list-item.json @@ -18,7 +18,8 @@ "disabled": { "type": { "name": "bool" } }, "disableGutters": { "type": { "name": "bool" } }, "divider": { "type": { "name": "bool" } }, - "selected": { "type": { "name": "bool" } } + "selected": { "type": { "name": "bool" } }, + "sx": { "type": { "name": "object" } } }, "name": "ListItem", "styles": { @@ -47,5 +48,6 @@ "filename": "/packages/material-ui/src/ListItem/ListItem.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/list-subheader.json b/docs/pages/api-docs/list-subheader.json index f15331f3e46e6b..e6a21e2f31cf64 100644 --- a/docs/pages/api-docs/list-subheader.json +++ b/docs/pages/api-docs/list-subheader.json @@ -12,7 +12,8 @@ "component": { "type": { "name": "elementType" } }, "disableGutters": { "type": { "name": "bool" } }, "disableSticky": { "type": { "name": "bool" } }, - "inset": { "type": { "name": "bool" } } + "inset": { "type": { "name": "bool" } }, + "sx": { "type": { "name": "object" } } }, "name": "ListSubheader", "styles": { @@ -25,5 +26,6 @@ "filename": "/packages/material-ui/src/ListSubheader/ListSubheader.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/list.json b/docs/pages/api-docs/list.json index a246dd8131fc01..6699d71a0b1bf2 100644 --- a/docs/pages/api-docs/list.json +++ b/docs/pages/api-docs/list.json @@ -5,7 +5,8 @@ "component": { "type": { "name": "elementType" } }, "dense": { "type": { "name": "bool" } }, "disablePadding": { "type": { "name": "bool" } }, - "subheader": { "type": { "name": "node" } } + "subheader": { "type": { "name": "node" } }, + "sx": { "type": { "name": "object" } } }, "name": "List", "styles": { @@ -18,5 +19,6 @@ "filename": "/packages/material-ui/src/List/List.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/loading-button.json b/docs/pages/api-docs/loading-button.json index 54a6fa2a1028b9..2f40fbf015dd9f 100644 --- a/docs/pages/api-docs/loading-button.json +++ b/docs/pages/api-docs/loading-button.json @@ -37,5 +37,6 @@ "filename": "/packages/material-ui-lab/src/LoadingButton/LoadingButton.js", "inheritance": { "component": "Button", "pathname": "/api/button/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/menu-item.json b/docs/pages/api-docs/menu-item.json index 400a729f9e83a2..b2a64ce98677c1 100644 --- a/docs/pages/api-docs/menu-item.json +++ b/docs/pages/api-docs/menu-item.json @@ -18,5 +18,6 @@ "filename": "/packages/material-ui/src/MenuItem/MenuItem.js", "inheritance": { "component": "ListItem", "pathname": "/api/list-item/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/menu-list.json b/docs/pages/api-docs/menu-list.json index 3d4f009904da1a..86bedb425ed6f5 100644 --- a/docs/pages/api-docs/menu-list.json +++ b/docs/pages/api-docs/menu-list.json @@ -17,5 +17,6 @@ "filename": "/packages/material-ui/src/MenuList/MenuList.js", "inheritance": { "component": "List", "pathname": "/api/list/" }, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/menu.json b/docs/pages/api-docs/menu.json index 840f99b8cc9a38..ad32143c230e6b 100644 --- a/docs/pages/api-docs/menu.json +++ b/docs/pages/api-docs/menu.json @@ -1,5 +1,6 @@ { "props": { + "open": { "type": { "name": "bool" }, "required": true }, "anchorEl": { "type": { "name": "union", "description": "HTML element
| func" } }, "autoFocus": { "type": { "name": "bool" }, "default": "true" }, "children": { "type": { "name": "node" } }, @@ -7,7 +8,6 @@ "disableAutoFocusItem": { "type": { "name": "bool" } }, "MenuListProps": { "type": { "name": "object" }, "default": "{}" }, "onClose": { "type": { "name": "func" } }, - "open": { "type": { "name": "bool" }, "required": true }, "PopoverClasses": { "type": { "name": "object" } }, "transitionDuration": { "type": { @@ -29,5 +29,6 @@ "filename": "/packages/material-ui/src/Menu/Menu.js", "inheritance": { "component": "Popover", "pathname": "/api/popover/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/mobile-stepper.json b/docs/pages/api-docs/mobile-stepper.json index 79735b93233275..5b9254dd16fad0 100644 --- a/docs/pages/api-docs/mobile-stepper.json +++ b/docs/pages/api-docs/mobile-stepper.json @@ -1,5 +1,6 @@ { "props": { + "steps": { "type": { "name": "number" }, "required": true }, "activeStep": { "type": { "name": "number" }, "default": "0" }, "backButton": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" } }, @@ -12,7 +13,6 @@ }, "default": "'bottom'" }, - "steps": { "type": { "name": "number" }, "required": true }, "variant": { "type": { "name": "enum", @@ -41,5 +41,6 @@ "filename": "/packages/material-ui/src/MobileStepper/MobileStepper.js", "inheritance": { "component": "Paper", "pathname": "/api/paper/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/mobile-time-picker.js b/docs/pages/api-docs/mobile-time-picker.js new file mode 100644 index 00000000000000..ba189fa14c47d5 --- /dev/null +++ b/docs/pages/api-docs/mobile-time-picker.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import ApiPage from 'docs/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './mobile-time-picker.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docs/translations/api-docs/mobile-time-picker', + false, + /mobile-time-picker.*.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/api-docs/mobile-time-picker.json b/docs/pages/api-docs/mobile-time-picker.json new file mode 100644 index 00000000000000..2eca705d3770df --- /dev/null +++ b/docs/pages/api-docs/mobile-time-picker.json @@ -0,0 +1,75 @@ +{ + "props": { + "onChange": { "type": { "name": "func" }, "required": true }, + "renderInput": { "type": { "name": "func" }, "required": true }, + "acceptRegex": { "type": { "name": "instanceOf", "description": "RegExp" } }, + "allowKeyboardControl": { "type": { "name": "bool" } }, + "ampm": { "type": { "name": "bool" } }, + "ampmInClock": { "type": { "name": "bool" } }, + "cancelText": { "type": { "name": "node" } }, + "className": { "type": { "name": "string" } }, + "clearable": { "type": { "name": "bool" } }, + "clearText": { "type": { "name": "node" } }, + "dateAdapter": { "type": { "name": "object" } }, + "DialogProps": { "type": { "name": "object" } }, + "disableCloseOnSelect": { "type": { "name": "bool" } }, + "disabled": { "type": { "name": "bool" } }, + "disableIgnoringDatePartForTimeValidation": { "type": { "name": "bool" } }, + "disableMaskedInput": { "type": { "name": "bool" } }, + "disableOpenPicker": { "type": { "name": "bool" } }, + "getClockLabelText": { "type": { "name": "func" } }, + "getOpenDialogAriaText": { "type": { "name": "func" } }, + "InputAdornmentProps": { "type": { "name": "object" } }, + "inputFormat": { "type": { "name": "string" } }, + "mask": { "type": { "name": "string" } }, + "minutesStep": { "type": { "name": "number" } }, + "okText": { "type": { "name": "node" } }, + "onAccept": { "type": { "name": "func" } }, + "onClose": { "type": { "name": "func" } }, + "onError": { "type": { "name": "func" } }, + "onOpen": { "type": { "name": "func" } }, + "open": { "type": { "name": "bool" } }, + "OpenPickerButtonProps": { "type": { "name": "object" } }, + "openPickerIcon": { "type": { "name": "node" } }, + "openTo": { + "type": { + "name": "enum", + "description": "'date'
| 'hours'
| 'minutes'
| 'month'
| 'seconds'
| 'year'" + } + }, + "orientation": { + "type": { "name": "enum", "description": "'landscape'
| 'portrait'" } + }, + "readOnly": { "type": { "name": "bool" } }, + "rifmFormatter": { "type": { "name": "func" } }, + "shouldDisableTime": { "type": { "name": "func" } }, + "showTodayButton": { "type": { "name": "bool" } }, + "showToolbar": { "type": { "name": "bool" } }, + "todayText": { "type": { "name": "node" } }, + "ToolbarComponent": { "type": { "name": "elementType" } }, + "toolbarFormat": { "type": { "name": "string" } }, + "toolbarPlaceholder": { "type": { "name": "node" } }, + "toolbarTitle": { "type": { "name": "node" } }, + "value": { + "type": { + "name": "union", + "description": "any
| Date
| number
| string" + } + }, + "views": { + "type": { + "name": "arrayOf", + "description": "Array<'hours'
| 'minutes'
| 'seconds'>" + } + } + }, + "name": "MobileTimePicker", + "styles": { "classes": [], "globalClasses": {}, "name": null }, + "spread": false, + "forwardsRefTo": "HTMLInputElement", + "filename": "/packages/material-ui-lab/src/MobileTimePicker/MobileTimePicker.tsx", + "inheritance": null, + "demos": "", + "styledComponent": true, + "cssComponent": false +} diff --git a/docs/pages/api-docs/modal.json b/docs/pages/api-docs/modal.json index c5727ec24a2617..9bd8a192586a86 100644 --- a/docs/pages/api-docs/modal.json +++ b/docs/pages/api-docs/modal.json @@ -1,8 +1,9 @@ { "props": { + "children": { "type": { "name": "custom", "description": "element" }, "required": true }, + "open": { "type": { "name": "bool" }, "required": true }, "BackdropComponent": { "type": { "name": "elementType" }, "default": "SimpleBackdrop" }, "BackdropProps": { "type": { "name": "object" } }, - "children": { "type": { "name": "custom", "description": "element" }, "required": true }, "closeAfterTransition": { "type": { "name": "bool" } }, "container": { "type": { "name": "union", "description": "HTML element
| func" } }, "disableAutoFocus": { "type": { "name": "bool" } }, @@ -14,8 +15,7 @@ "hideBackdrop": { "type": { "name": "bool" } }, "keepMounted": { "type": { "name": "bool" } }, "onBackdropClick": { "type": { "name": "func" } }, - "onClose": { "type": { "name": "func" } }, - "open": { "type": { "name": "bool" }, "required": true } + "onClose": { "type": { "name": "func" } } }, "name": "Modal", "styles": { "classes": [], "globalClasses": {}, "name": null }, @@ -24,5 +24,6 @@ "filename": "/packages/material-ui/src/Modal/Modal.js", "inheritance": null, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/native-select.json b/docs/pages/api-docs/native-select.json index 67ba460ac6865f..1e6df9459fada5 100644 --- a/docs/pages/api-docs/native-select.json +++ b/docs/pages/api-docs/native-select.json @@ -37,5 +37,6 @@ "filename": "/packages/material-ui/src/NativeSelect/NativeSelect.js", "inheritance": { "component": "Input", "pathname": "/api/input/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/no-ssr.json b/docs/pages/api-docs/no-ssr.json index b85665c987640f..8d81134a4368c7 100644 --- a/docs/pages/api-docs/no-ssr.json +++ b/docs/pages/api-docs/no-ssr.json @@ -10,5 +10,6 @@ "filename": "/packages/material-ui/src/NoSsr/NoSsr.js", "inheritance": null, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/outlined-input.json b/docs/pages/api-docs/outlined-input.json index c3c43a6f2cd14f..78e1975ce8ea9a 100644 --- a/docs/pages/api-docs/outlined-input.json +++ b/docs/pages/api-docs/outlined-input.json @@ -57,5 +57,6 @@ "filename": "/packages/material-ui/src/OutlinedInput/OutlinedInput.js", "inheritance": { "component": "InputBase", "pathname": "/api/input-base/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/pagination-item.json b/docs/pages/api-docs/pagination-item.json index 030308f3270796..daee11d760a1f4 100644 --- a/docs/pages/api-docs/pagination-item.json +++ b/docs/pages/api-docs/pagination-item.json @@ -70,5 +70,6 @@ "filename": "/packages/material-ui/src/PaginationItem/PaginationItem.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/pagination.json b/docs/pages/api-docs/pagination.json index 8ca0463a5487a6..79dd3cb717d34c 100644 --- a/docs/pages/api-docs/pagination.json +++ b/docs/pages/api-docs/pagination.json @@ -54,5 +54,6 @@ "filename": "/packages/material-ui/src/Pagination/Pagination.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/paper.json b/docs/pages/api-docs/paper.json index 75773a65810577..206c98710473af 100644 --- a/docs/pages/api-docs/paper.json +++ b/docs/pages/api-docs/paper.json @@ -55,5 +55,6 @@ "filename": "/packages/material-ui/src/Paper/Paper.js", "inheritance": null, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/popover.json b/docs/pages/api-docs/popover.json index 319db06699ead3..4c034015a04250 100644 --- a/docs/pages/api-docs/popover.json +++ b/docs/pages/api-docs/popover.json @@ -1,5 +1,6 @@ { "props": { + "open": { "type": { "name": "bool" }, "required": true }, "action": { "type": { "name": "custom", "description": "ref" } }, "anchorEl": { "type": { "name": "custom", "description": "HTML element
| func" } }, "anchorOrigin": { @@ -26,7 +27,6 @@ "getContentAnchorEl": { "type": { "name": "func" } }, "marginThreshold": { "type": { "name": "number" }, "default": "16" }, "onClose": { "type": { "name": "func" } }, - "open": { "type": { "name": "bool" }, "required": true }, "PaperProps": { "type": { "name": "shape", "description": "{ component?: element type }" }, "default": "{}" @@ -55,5 +55,6 @@ "filename": "/packages/material-ui/src/Popover/Popover.js", "inheritance": { "component": "Modal", "pathname": "/api/modal/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/popper.json b/docs/pages/api-docs/popper.json index c57f717c8008c9..a2450a7aa1739a 100644 --- a/docs/pages/api-docs/popper.json +++ b/docs/pages/api-docs/popper.json @@ -1,5 +1,6 @@ { "props": { + "open": { "type": { "name": "bool" }, "required": true }, "anchorEl": { "type": { "name": "custom", @@ -16,7 +17,6 @@ "description": "Array<{ data?: object, effect?: func, enabled?: bool, fn?: func, name: any, options?: object, phase?: 'afterMain'
| 'afterRead'
| 'afterWrite'
| 'beforeMain'
| 'beforeRead'
| 'beforeWrite'
| 'main'
| 'read'
| 'write', requires?: Array<string>, requiresIfExists?: Array<string> }>" } }, - "open": { "type": { "name": "bool" }, "required": true }, "placement": { "type": { "name": "enum", @@ -41,5 +41,6 @@ "filename": "/packages/material-ui/src/Popper/Popper.js", "inheritance": null, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/portal.json b/docs/pages/api-docs/portal.json index 5c0165c8cc120f..22ff407cba577a 100644 --- a/docs/pages/api-docs/portal.json +++ b/docs/pages/api-docs/portal.json @@ -10,5 +10,6 @@ "filename": "/packages/material-ui/src/Portal/Portal.js", "inheritance": null, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/radio-group.json b/docs/pages/api-docs/radio-group.json index 7189269144774f..7baa451f18ce04 100644 --- a/docs/pages/api-docs/radio-group.json +++ b/docs/pages/api-docs/radio-group.json @@ -18,5 +18,6 @@ "filename": "/packages/material-ui/src/RadioGroup/RadioGroup.js", "inheritance": { "component": "FormGroup", "pathname": "/api/form-group/" }, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/radio.json b/docs/pages/api-docs/radio.json index b357f2367aedcb..c7499080bd807c 100644 --- a/docs/pages/api-docs/radio.json +++ b/docs/pages/api-docs/radio.json @@ -36,5 +36,6 @@ "filename": "/packages/material-ui/src/Radio/Radio.js", "inheritance": { "component": "IconButton", "pathname": "/api/icon-button/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/rating.json b/docs/pages/api-docs/rating.json index eee8b907a8b93d..201c50c1f0cb67 100644 --- a/docs/pages/api-docs/rating.json +++ b/docs/pages/api-docs/rating.json @@ -57,5 +57,6 @@ "filename": "/packages/material-ui/src/Rating/Rating.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/scoped-css-baseline.json b/docs/pages/api-docs/scoped-css-baseline.json index cd5fcc87e38558..248b849f48bb23 100644 --- a/docs/pages/api-docs/scoped-css-baseline.json +++ b/docs/pages/api-docs/scoped-css-baseline.json @@ -10,5 +10,6 @@ "filename": "/packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/select.json b/docs/pages/api-docs/select.json index 214c9c27342c16..9463929d791bb6 100644 --- a/docs/pages/api-docs/select.json +++ b/docs/pages/api-docs/select.json @@ -53,5 +53,6 @@ "filename": "/packages/material-ui/src/Select/Select.js", "inheritance": { "component": "Input", "pathname": "/api/input/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/skeleton.json b/docs/pages/api-docs/skeleton.json index 0ee38c023478af..c5f03fd4d657f3 100644 --- a/docs/pages/api-docs/skeleton.json +++ b/docs/pages/api-docs/skeleton.json @@ -41,5 +41,6 @@ "filename": "/packages/material-ui/src/Skeleton/Skeleton.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/slide.json b/docs/pages/api-docs/slide.json index 26ca177dac0e1d..7ebd053337b138 100644 --- a/docs/pages/api-docs/slide.json +++ b/docs/pages/api-docs/slide.json @@ -28,5 +28,6 @@ "pathname": "https://reactcommunity.org/react-transition-group/transition#Transition-props" }, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/slider-unstyled.json b/docs/pages/api-docs/slider-unstyled.json index 9d48908304a71f..02996d50a511dc 100644 --- a/docs/pages/api-docs/slider-unstyled.json +++ b/docs/pages/api-docs/slider-unstyled.json @@ -102,5 +102,6 @@ "filename": "/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js", "inheritance": null, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/slider.json b/docs/pages/api-docs/slider.json index 577245fc501a12..376dc3d1039f65 100644 --- a/docs/pages/api-docs/slider.json +++ b/docs/pages/api-docs/slider.json @@ -8,6 +8,7 @@ "type": { "name": "enum", "description": "'primary'
| 'secondary'" }, "default": "'primary'" }, + "component": { "type": { "name": "elementType" } }, "components": { "type": { "name": "shape", @@ -59,8 +60,7 @@ "valueLabelFormat": { "type": { "name": "union", "description": "func
| string" }, "default": "(x) => x" - }, - "component": { "type": { "name": "elementType" } } + } }, "name": "Slider", "styles": { @@ -94,5 +94,6 @@ "filename": "/packages/material-ui/src/Slider/Slider.js", "inheritance": { "component": "SliderUnstyled", "pathname": "/api/slider-unstyled/" }, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/snackbar-content.json b/docs/pages/api-docs/snackbar-content.json index c05797e15330a7..828dae95f1e393 100644 --- a/docs/pages/api-docs/snackbar-content.json +++ b/docs/pages/api-docs/snackbar-content.json @@ -16,5 +16,6 @@ "filename": "/packages/material-ui/src/SnackbarContent/SnackbarContent.js", "inheritance": { "component": "Paper", "pathname": "/api/paper/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/snackbar.json b/docs/pages/api-docs/snackbar.json index 2226b190c7fe8f..ff8823f495decb 100644 --- a/docs/pages/api-docs/snackbar.json +++ b/docs/pages/api-docs/snackbar.json @@ -48,5 +48,6 @@ "filename": "/packages/material-ui/src/Snackbar/Snackbar.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/speed-dial-action.json b/docs/pages/api-docs/speed-dial-action.json index 88a163fce07e49..6c7a508c90e1cb 100644 --- a/docs/pages/api-docs/speed-dial-action.json +++ b/docs/pages/api-docs/speed-dial-action.json @@ -36,5 +36,6 @@ "filename": "/packages/material-ui/src/SpeedDialAction/SpeedDialAction.js", "inheritance": { "component": "Tooltip", "pathname": "/api/tooltip/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/speed-dial-icon.json b/docs/pages/api-docs/speed-dial-icon.json index 29afcd5b68bd5d..e477af61435bf1 100644 --- a/docs/pages/api-docs/speed-dial-icon.json +++ b/docs/pages/api-docs/speed-dial-icon.json @@ -15,5 +15,6 @@ "filename": "/packages/material-ui/src/SpeedDialIcon/SpeedDialIcon.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/speed-dial.json b/docs/pages/api-docs/speed-dial.json index 48820db55a81c9..804c415d64e8dd 100644 --- a/docs/pages/api-docs/speed-dial.json +++ b/docs/pages/api-docs/speed-dial.json @@ -47,5 +47,6 @@ "filename": "/packages/material-ui/src/SpeedDial/SpeedDial.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/static-time-picker.js b/docs/pages/api-docs/static-time-picker.js new file mode 100644 index 00000000000000..09624bb4b1610d --- /dev/null +++ b/docs/pages/api-docs/static-time-picker.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import ApiPage from 'docs/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './static-time-picker.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docs/translations/api-docs/static-time-picker', + false, + /static-time-picker.*.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/api-docs/static-time-picker.json b/docs/pages/api-docs/static-time-picker.json new file mode 100644 index 00000000000000..ba2c4a956616fd --- /dev/null +++ b/docs/pages/api-docs/static-time-picker.json @@ -0,0 +1,71 @@ +{ + "props": { + "onChange": { "type": { "name": "func" }, "required": true }, + "renderInput": { "type": { "name": "func" }, "required": true }, + "acceptRegex": { "type": { "name": "instanceOf", "description": "RegExp" } }, + "allowKeyboardControl": { "type": { "name": "bool" } }, + "ampm": { "type": { "name": "bool" } }, + "ampmInClock": { "type": { "name": "bool" } }, + "className": { "type": { "name": "string" } }, + "dateAdapter": { "type": { "name": "object" } }, + "disableCloseOnSelect": { "type": { "name": "bool" } }, + "disabled": { "type": { "name": "bool" } }, + "disableIgnoringDatePartForTimeValidation": { "type": { "name": "bool" } }, + "disableMaskedInput": { "type": { "name": "bool" } }, + "disableOpenPicker": { "type": { "name": "bool" } }, + "displayStaticWrapperAs": { + "type": { "name": "enum", "description": "'desktop'
| 'mobile'" } + }, + "getClockLabelText": { "type": { "name": "func" } }, + "getOpenDialogAriaText": { "type": { "name": "func" } }, + "InputAdornmentProps": { "type": { "name": "object" } }, + "inputFormat": { "type": { "name": "string" } }, + "mask": { "type": { "name": "string" } }, + "minutesStep": { "type": { "name": "number" } }, + "onAccept": { "type": { "name": "func" } }, + "onClose": { "type": { "name": "func" } }, + "onError": { "type": { "name": "func" } }, + "onOpen": { "type": { "name": "func" } }, + "open": { "type": { "name": "bool" } }, + "OpenPickerButtonProps": { "type": { "name": "object" } }, + "openPickerIcon": { "type": { "name": "node" } }, + "openTo": { + "type": { + "name": "enum", + "description": "'date'
| 'hours'
| 'minutes'
| 'month'
| 'seconds'
| 'year'" + } + }, + "orientation": { + "type": { "name": "enum", "description": "'landscape'
| 'portrait'" } + }, + "readOnly": { "type": { "name": "bool" } }, + "rifmFormatter": { "type": { "name": "func" } }, + "shouldDisableTime": { "type": { "name": "func" } }, + "showToolbar": { "type": { "name": "bool" } }, + "ToolbarComponent": { "type": { "name": "elementType" } }, + "toolbarFormat": { "type": { "name": "string" } }, + "toolbarPlaceholder": { "type": { "name": "node" } }, + "toolbarTitle": { "type": { "name": "node" } }, + "value": { + "type": { + "name": "union", + "description": "any
| Date
| number
| string" + } + }, + "views": { + "type": { + "name": "arrayOf", + "description": "Array<'hours'
| 'minutes'
| 'seconds'>" + } + } + }, + "name": "StaticTimePicker", + "styles": { "classes": [], "globalClasses": {}, "name": null }, + "spread": false, + "forwardsRefTo": "undefined", + "filename": "/packages/material-ui-lab/src/StaticTimePicker/StaticTimePicker.tsx", + "inheritance": null, + "demos": "", + "styledComponent": true, + "cssComponent": false +} diff --git a/docs/pages/api-docs/step-button.json b/docs/pages/api-docs/step-button.json index ea285565f7a83d..1d80e3155e86d6 100644 --- a/docs/pages/api-docs/step-button.json +++ b/docs/pages/api-docs/step-button.json @@ -16,5 +16,6 @@ "filename": "/packages/material-ui/src/StepButton/StepButton.js", "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/step-connector.json b/docs/pages/api-docs/step-connector.json index 3be200840c8154..4cf22f1873a94b 100644 --- a/docs/pages/api-docs/step-connector.json +++ b/docs/pages/api-docs/step-connector.json @@ -22,5 +22,6 @@ "filename": "/packages/material-ui/src/StepConnector/StepConnector.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/step-content.json b/docs/pages/api-docs/step-content.json index e9b1fafb7850eb..54de19651c97d9 100644 --- a/docs/pages/api-docs/step-content.json +++ b/docs/pages/api-docs/step-content.json @@ -23,5 +23,6 @@ "filename": "/packages/material-ui/src/StepContent/StepContent.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/step-icon.json b/docs/pages/api-docs/step-icon.json index f9303caf088a53..5f11e44a5eee41 100644 --- a/docs/pages/api-docs/step-icon.json +++ b/docs/pages/api-docs/step-icon.json @@ -17,5 +17,6 @@ "filename": "/packages/material-ui/src/StepIcon/StepIcon.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/step-label.json b/docs/pages/api-docs/step-label.json index 65d0495220a812..d3f365f4806cd6 100644 --- a/docs/pages/api-docs/step-label.json +++ b/docs/pages/api-docs/step-label.json @@ -31,5 +31,6 @@ "filename": "/packages/material-ui/src/StepLabel/StepLabel.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/step.json b/docs/pages/api-docs/step.json index 03c905c4c01e05..72b3d4634e65b0 100644 --- a/docs/pages/api-docs/step.json +++ b/docs/pages/api-docs/step.json @@ -20,5 +20,6 @@ "filename": "/packages/material-ui/src/Step/Step.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/stepper.json b/docs/pages/api-docs/stepper.json index e532987faabebb..7146408f2c452b 100644 --- a/docs/pages/api-docs/stepper.json +++ b/docs/pages/api-docs/stepper.json @@ -22,5 +22,6 @@ "filename": "/packages/material-ui/src/Stepper/Stepper.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/svg-icon.json b/docs/pages/api-docs/svg-icon.json index 45c57865045c63..afb03ddb6c1414 100644 --- a/docs/pages/api-docs/svg-icon.json +++ b/docs/pages/api-docs/svg-icon.json @@ -19,6 +19,7 @@ }, "htmlColor": { "type": { "name": "string" } }, "shapeRendering": { "type": { "name": "string" } }, + "sx": { "type": { "name": "object" } }, "titleAccess": { "type": { "name": "string" } }, "viewBox": { "type": { "name": "string" }, "default": "'0 0 24 24'" } }, @@ -43,5 +44,6 @@ "filename": "/packages/material-ui/src/SvgIcon/SvgIcon.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/swipeable-drawer.json b/docs/pages/api-docs/swipeable-drawer.json index 88018009fdca5d..c54c718b404ff8 100644 --- a/docs/pages/api-docs/swipeable-drawer.json +++ b/docs/pages/api-docs/swipeable-drawer.json @@ -1,5 +1,8 @@ { "props": { + "onClose": { "type": { "name": "func" }, "required": true }, + "onOpen": { "type": { "name": "func" }, "required": true }, + "open": { "type": { "name": "bool" }, "required": true }, "children": { "type": { "name": "node" } }, "disableBackdropTransition": { "type": { "name": "bool" } }, "disableDiscovery": { "type": { "name": "bool" } }, @@ -9,9 +12,6 @@ }, "hysteresis": { "type": { "name": "number" }, "default": "0.52" }, "minFlingVelocity": { "type": { "name": "number" }, "default": "450" }, - "onClose": { "type": { "name": "func" }, "required": true }, - "onOpen": { "type": { "name": "func" }, "required": true }, - "open": { "type": { "name": "bool" }, "required": true }, "SwipeAreaProps": { "type": { "name": "object" } }, "swipeAreaWidth": { "type": { "name": "number" }, "default": "20" }, "transitionDuration": { @@ -29,5 +29,6 @@ "filename": "/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js", "inheritance": { "component": "Drawer", "pathname": "/api/drawer/" }, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/switch.json b/docs/pages/api-docs/switch.json index 7586df092ecb62..067fb6716e85ed 100644 --- a/docs/pages/api-docs/switch.json +++ b/docs/pages/api-docs/switch.json @@ -10,6 +10,7 @@ }, "default": "'secondary'" }, + "defaultChecked": { "type": { "name": "bool" } }, "disabled": { "type": { "name": "bool" } }, "disableRipple": { "type": { "name": "bool" } }, "edge": { @@ -55,5 +56,6 @@ "filename": "/packages/material-ui/src/Switch/Switch.js", "inheritance": { "component": "IconButton", "pathname": "/api/icon-button/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/tab-context.json b/docs/pages/api-docs/tab-context.json index cc746f01905a7a..c6354cf9397373 100644 --- a/docs/pages/api-docs/tab-context.json +++ b/docs/pages/api-docs/tab-context.json @@ -1,7 +1,7 @@ { "props": { - "children": { "type": { "name": "node" } }, - "value": { "type": { "name": "string" }, "required": true } + "value": { "type": { "name": "string" }, "required": true }, + "children": { "type": { "name": "node" } } }, "name": "TabContext", "styles": { "classes": [], "globalClasses": {}, "name": null }, @@ -9,5 +9,6 @@ "filename": "/packages/material-ui-lab/src/TabContext/TabContext.js", "inheritance": null, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/tab-list.json b/docs/pages/api-docs/tab-list.json index 0b19a09037d5b3..443416edc73db3 100644 --- a/docs/pages/api-docs/tab-list.json +++ b/docs/pages/api-docs/tab-list.json @@ -7,5 +7,6 @@ "filename": "/packages/material-ui-lab/src/TabList/TabList.js", "inheritance": { "component": "Tabs", "pathname": "/api/tabs/" }, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/tab-panel.json b/docs/pages/api-docs/tab-panel.json index 816517d2628542..646b283c0b2b89 100644 --- a/docs/pages/api-docs/tab-panel.json +++ b/docs/pages/api-docs/tab-panel.json @@ -1,8 +1,8 @@ { "props": { + "value": { "type": { "name": "string" }, "required": true }, "children": { "type": { "name": "node" } }, - "classes": { "type": { "name": "object" } }, - "value": { "type": { "name": "string" }, "required": true } + "classes": { "type": { "name": "object" } } }, "name": "TabPanel", "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiTabPanel" }, @@ -11,5 +11,6 @@ "filename": "/packages/material-ui-lab/src/TabPanel/TabPanel.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/tab-scroll-button.json b/docs/pages/api-docs/tab-scroll-button.json index 20d8e7e2dccda1..36347802b0b4d2 100644 --- a/docs/pages/api-docs/tab-scroll-button.json +++ b/docs/pages/api-docs/tab-scroll-button.json @@ -1,16 +1,16 @@ { "props": { - "children": { "type": { "name": "node" } }, - "classes": { "type": { "name": "object" } }, "direction": { "type": { "name": "enum", "description": "'left'
| 'right'" }, "required": true }, - "disabled": { "type": { "name": "bool" } }, "orientation": { "type": { "name": "enum", "description": "'horizontal'
| 'vertical'" }, "required": true - } + }, + "children": { "type": { "name": "node" } }, + "classes": { "type": { "name": "object" } }, + "disabled": { "type": { "name": "bool" } } }, "name": "TabScrollButton", "styles": { @@ -23,5 +23,6 @@ "filename": "/packages/material-ui/src/TabScrollButton/TabScrollButton.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/tab.json b/docs/pages/api-docs/tab.json index 79b3f0face847f..b2d7a97088679d 100644 --- a/docs/pages/api-docs/tab.json +++ b/docs/pages/api-docs/tab.json @@ -32,5 +32,6 @@ "filename": "/packages/material-ui/src/Tab/Tab.js", "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/table-body.json b/docs/pages/api-docs/table-body.json index efc1b7b9bcc4e8..09c1a96457dea3 100644 --- a/docs/pages/api-docs/table-body.json +++ b/docs/pages/api-docs/table-body.json @@ -11,5 +11,6 @@ "filename": "/packages/material-ui/src/TableBody/TableBody.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/table-cell.json b/docs/pages/api-docs/table-cell.json index bf951fbe570c60..3fa3e28a1f9502 100644 --- a/docs/pages/api-docs/table-cell.json +++ b/docs/pages/api-docs/table-cell.json @@ -52,5 +52,6 @@ "filename": "/packages/material-ui/src/TableCell/TableCell.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/table-container.json b/docs/pages/api-docs/table-container.json index 5169d19b535f7e..950abe5730e42d 100644 --- a/docs/pages/api-docs/table-container.json +++ b/docs/pages/api-docs/table-container.json @@ -11,5 +11,6 @@ "filename": "/packages/material-ui/src/TableContainer/TableContainer.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/table-footer.json b/docs/pages/api-docs/table-footer.json index 70d6241da909c3..f3b843a0d17dfb 100644 --- a/docs/pages/api-docs/table-footer.json +++ b/docs/pages/api-docs/table-footer.json @@ -11,5 +11,6 @@ "filename": "/packages/material-ui/src/TableFooter/TableFooter.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/table-head.json b/docs/pages/api-docs/table-head.json index c2670d70b859ec..c0a0f87437f439 100644 --- a/docs/pages/api-docs/table-head.json +++ b/docs/pages/api-docs/table-head.json @@ -11,5 +11,6 @@ "filename": "/packages/material-ui/src/TableHead/TableHead.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/table-pagination.json b/docs/pages/api-docs/table-pagination.json index ad420effaae6b3..7428a683fc7905 100644 --- a/docs/pages/api-docs/table-pagination.json +++ b/docs/pages/api-docs/table-pagination.json @@ -1,10 +1,13 @@ { "props": { + "count": { "type": { "name": "number" }, "required": true }, + "onPageChange": { "type": { "name": "func" }, "required": true }, + "page": { "type": { "name": "custom", "description": "number" }, "required": true }, + "rowsPerPage": { "type": { "name": "number" }, "required": true }, "ActionsComponent": { "type": { "name": "elementType" }, "default": "TablePaginationActions" }, "backIconButtonProps": { "type": { "name": "object" } }, "classes": { "type": { "name": "object" } }, "component": { "type": { "name": "elementType" } }, - "count": { "type": { "name": "number" }, "required": true }, "getItemAriaLabel": { "type": { "name": "func" }, "default": "function defaultGetAriaLabel(type) {\n return `Go to ${type} page`;\n}" @@ -15,10 +18,7 @@ }, "labelRowsPerPage": { "type": { "name": "node" }, "default": "'Rows per page:'" }, "nextIconButtonProps": { "type": { "name": "object" } }, - "onPageChange": { "type": { "name": "func" }, "required": true }, "onRowsPerPageChange": { "type": { "name": "func" } }, - "page": { "type": { "name": "custom", "description": "number" }, "required": true }, - "rowsPerPage": { "type": { "name": "number" }, "required": true }, "rowsPerPageOptions": { "type": { "name": "arrayOf", @@ -36,12 +36,13 @@ "root", "toolbar", "spacer", - "caption", + "selectLabel", "selectRoot", "select", "selectIcon", "input", "menuItem", + "displayedRows", "actions" ], "globalClasses": {}, @@ -52,5 +53,6 @@ "filename": "/packages/material-ui/src/TablePagination/TablePagination.js", "inheritance": { "component": "TableCell", "pathname": "/api/table-cell/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/table-row.json b/docs/pages/api-docs/table-row.json index 4c2f6be3fbd296..ba6260617dae65 100644 --- a/docs/pages/api-docs/table-row.json +++ b/docs/pages/api-docs/table-row.json @@ -17,5 +17,6 @@ "filename": "/packages/material-ui/src/TableRow/TableRow.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/table-sort-label.json b/docs/pages/api-docs/table-sort-label.json index a0d4aeece49dc6..1a806ca28983de 100644 --- a/docs/pages/api-docs/table-sort-label.json +++ b/docs/pages/api-docs/table-sort-label.json @@ -21,5 +21,6 @@ "filename": "/packages/material-ui/src/TableSortLabel/TableSortLabel.js", "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/table.json b/docs/pages/api-docs/table.json index 309af8cd4bd8e3..b22f7ee77afd98 100644 --- a/docs/pages/api-docs/table.json +++ b/docs/pages/api-docs/table.json @@ -23,5 +23,6 @@ "filename": "/packages/material-ui/src/Table/Table.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/tabs.json b/docs/pages/api-docs/tabs.json index b4af37295a0c40..fed0b8d02b48ba 100644 --- a/docs/pages/api-docs/tabs.json +++ b/docs/pages/api-docs/tabs.json @@ -67,5 +67,6 @@ "filename": "/packages/material-ui/src/Tabs/Tabs.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/text-field.json b/docs/pages/api-docs/text-field.json index 2ff7aefa507ce4..03f3719e1a21c6 100644 --- a/docs/pages/api-docs/text-field.json +++ b/docs/pages/api-docs/text-field.json @@ -54,5 +54,6 @@ "filename": "/packages/material-ui/src/TextField/TextField.js", "inheritance": { "component": "FormControl", "pathname": "/api/form-control/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/textarea-autosize.json b/docs/pages/api-docs/textarea-autosize.json index be7ae89538e028..95990302830da0 100644 --- a/docs/pages/api-docs/textarea-autosize.json +++ b/docs/pages/api-docs/textarea-autosize.json @@ -13,5 +13,6 @@ "filename": "/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js", "inheritance": null, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/time-picker.js b/docs/pages/api-docs/time-picker.js new file mode 100644 index 00000000000000..8ac417ff3dc7a9 --- /dev/null +++ b/docs/pages/api-docs/time-picker.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import ApiPage from 'docs/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './time-picker.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docs/translations/api-docs/time-picker', + false, + /time-picker.*.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/api-docs/time-picker.json b/docs/pages/api-docs/time-picker.json new file mode 100644 index 00000000000000..d3f6265ad9c36c --- /dev/null +++ b/docs/pages/api-docs/time-picker.json @@ -0,0 +1,78 @@ +{ + "props": { + "onChange": { "type": { "name": "func" }, "required": true }, + "renderInput": { "type": { "name": "func" }, "required": true }, + "acceptRegex": { "type": { "name": "instanceOf", "description": "RegExp" } }, + "allowKeyboardControl": { "type": { "name": "bool" } }, + "ampm": { "type": { "name": "bool" } }, + "ampmInClock": { "type": { "name": "bool" } }, + "cancelText": { "type": { "name": "node" } }, + "className": { "type": { "name": "string" } }, + "clearable": { "type": { "name": "bool" } }, + "clearText": { "type": { "name": "node" } }, + "dateAdapter": { "type": { "name": "object" } }, + "desktopModeMediaQuery": { "type": { "name": "string" } }, + "DialogProps": { "type": { "name": "object" } }, + "disableCloseOnSelect": { "type": { "name": "bool" } }, + "disabled": { "type": { "name": "bool" } }, + "disableIgnoringDatePartForTimeValidation": { "type": { "name": "bool" } }, + "disableMaskedInput": { "type": { "name": "bool" } }, + "disableOpenPicker": { "type": { "name": "bool" } }, + "getClockLabelText": { "type": { "name": "func" } }, + "getOpenDialogAriaText": { "type": { "name": "func" } }, + "InputAdornmentProps": { "type": { "name": "object" } }, + "inputFormat": { "type": { "name": "string" } }, + "mask": { "type": { "name": "string" } }, + "minutesStep": { "type": { "name": "number" } }, + "okText": { "type": { "name": "node" } }, + "onAccept": { "type": { "name": "func" } }, + "onClose": { "type": { "name": "func" } }, + "onError": { "type": { "name": "func" } }, + "onOpen": { "type": { "name": "func" } }, + "open": { "type": { "name": "bool" } }, + "OpenPickerButtonProps": { "type": { "name": "object" } }, + "openPickerIcon": { "type": { "name": "node" } }, + "openTo": { + "type": { + "name": "enum", + "description": "'date'
| 'hours'
| 'minutes'
| 'month'
| 'seconds'
| 'year'" + } + }, + "orientation": { + "type": { "name": "enum", "description": "'landscape'
| 'portrait'" } + }, + "PopperProps": { "type": { "name": "object" } }, + "readOnly": { "type": { "name": "bool" } }, + "rifmFormatter": { "type": { "name": "func" } }, + "shouldDisableTime": { "type": { "name": "func" } }, + "showTodayButton": { "type": { "name": "bool" } }, + "showToolbar": { "type": { "name": "bool" } }, + "todayText": { "type": { "name": "node" } }, + "ToolbarComponent": { "type": { "name": "elementType" } }, + "toolbarFormat": { "type": { "name": "string" } }, + "toolbarPlaceholder": { "type": { "name": "node" } }, + "toolbarTitle": { "type": { "name": "node" } }, + "TransitionComponent": { "type": { "name": "elementType" } }, + "value": { + "type": { + "name": "union", + "description": "any
| Date
| number
| string" + } + }, + "views": { + "type": { + "name": "arrayOf", + "description": "Array<'hours'
| 'minutes'
| 'seconds'>" + } + } + }, + "name": "TimePicker", + "styles": { "classes": [], "globalClasses": {}, "name": null }, + "spread": false, + "forwardsRefTo": "HTMLInputElement", + "filename": "/packages/material-ui-lab/src/TimePicker/TimePicker.tsx", + "inheritance": null, + "demos": "", + "styledComponent": true, + "cssComponent": false +} diff --git a/docs/pages/api-docs/timeline-connector.json b/docs/pages/api-docs/timeline-connector.json index aaaf9cd4761157..e0b0bd86518519 100644 --- a/docs/pages/api-docs/timeline-connector.json +++ b/docs/pages/api-docs/timeline-connector.json @@ -10,5 +10,6 @@ "filename": "/packages/material-ui-lab/src/TimelineConnector/TimelineConnector.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/timeline-content.json b/docs/pages/api-docs/timeline-content.json index cdea53dbb799c1..11799df073a84c 100644 --- a/docs/pages/api-docs/timeline-content.json +++ b/docs/pages/api-docs/timeline-content.json @@ -14,5 +14,6 @@ "filename": "/packages/material-ui-lab/src/TimelineContent/TimelineContent.js", "inheritance": { "component": "Typography", "pathname": "/api/typography/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/timeline-dot.json b/docs/pages/api-docs/timeline-dot.json index fbcf2024951250..de1487c744fd36 100644 --- a/docs/pages/api-docs/timeline-dot.json +++ b/docs/pages/api-docs/timeline-dot.json @@ -38,5 +38,6 @@ "filename": "/packages/material-ui-lab/src/TimelineDot/TimelineDot.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/timeline-item.json b/docs/pages/api-docs/timeline-item.json index d8f1f446e28452..5d22d19baed570 100644 --- a/docs/pages/api-docs/timeline-item.json +++ b/docs/pages/api-docs/timeline-item.json @@ -22,5 +22,6 @@ "filename": "/packages/material-ui-lab/src/TimelineItem/TimelineItem.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/timeline-opposite-content.json b/docs/pages/api-docs/timeline-opposite-content.json index b78a1a75c29153..634cca9a569974 100644 --- a/docs/pages/api-docs/timeline-opposite-content.json +++ b/docs/pages/api-docs/timeline-opposite-content.json @@ -14,5 +14,6 @@ "filename": "/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.js", "inheritance": { "component": "Typography", "pathname": "/api/typography/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/timeline-separator.json b/docs/pages/api-docs/timeline-separator.json index a8b8f5308bd393..7e0152dac8c921 100644 --- a/docs/pages/api-docs/timeline-separator.json +++ b/docs/pages/api-docs/timeline-separator.json @@ -10,5 +10,6 @@ "filename": "/packages/material-ui-lab/src/TimelineSeparator/TimelineSeparator.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/timeline.json b/docs/pages/api-docs/timeline.json index c17bc02aa73dd2..daaca956a69cb3 100644 --- a/docs/pages/api-docs/timeline.json +++ b/docs/pages/api-docs/timeline.json @@ -21,5 +21,6 @@ "filename": "/packages/material-ui-lab/src/Timeline/Timeline.tsx", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/toggle-button-group.json b/docs/pages/api-docs/toggle-button-group.json index 53722e08a1b5b9..e97d1ffb246058 100644 --- a/docs/pages/api-docs/toggle-button-group.json +++ b/docs/pages/api-docs/toggle-button-group.json @@ -28,5 +28,6 @@ "filename": "/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/toggle-button.json b/docs/pages/api-docs/toggle-button.json index 686bba8c7f408a..c76056e17f8092 100644 --- a/docs/pages/api-docs/toggle-button.json +++ b/docs/pages/api-docs/toggle-button.json @@ -1,5 +1,6 @@ { "props": { + "value": { "type": { "name": "any" }, "required": true }, "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" } }, "disabled": { "type": { "name": "bool" } }, @@ -12,8 +13,7 @@ "description": "'large'
| 'medium'
| 'small'" }, "default": "'medium'" - }, - "value": { "type": { "name": "any" }, "required": true } + } }, "name": "ToggleButton", "styles": { @@ -26,5 +26,6 @@ "filename": "/packages/material-ui/src/ToggleButton/ToggleButton.js", "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" }, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/toolbar.json b/docs/pages/api-docs/toolbar.json index efba433285ae2d..553c552e8933f8 100644 --- a/docs/pages/api-docs/toolbar.json +++ b/docs/pages/api-docs/toolbar.json @@ -4,6 +4,7 @@ "classes": { "type": { "name": "object" } }, "component": { "type": { "name": "elementType" } }, "disableGutters": { "type": { "name": "bool" } }, + "sx": { "type": { "name": "object" } }, "variant": { "type": { "name": "union", @@ -23,5 +24,6 @@ "filename": "/packages/material-ui/src/Toolbar/Toolbar.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/tooltip.json b/docs/pages/api-docs/tooltip.json index 4bf940ad0e41dc..5396fc2ffba5fc 100644 --- a/docs/pages/api-docs/tooltip.json +++ b/docs/pages/api-docs/tooltip.json @@ -1,7 +1,8 @@ { "props": { - "arrow": { "type": { "name": "bool" } }, "children": { "type": { "name": "custom", "description": "element" }, "required": true }, + "title": { "type": { "name": "node" }, "required": true }, + "arrow": { "type": { "name": "bool" } }, "classes": { "type": { "name": "object" } }, "describeChild": { "type": { "name": "bool" } }, "disableFocusListener": { "type": { "name": "bool" } }, @@ -27,7 +28,6 @@ }, "PopperComponent": { "type": { "name": "elementType" }, "default": "Popper" }, "PopperProps": { "type": { "name": "object" }, "default": "{}" }, - "title": { "type": { "name": "node" }, "required": true }, "TransitionComponent": { "type": { "name": "elementType" }, "default": "Grow" }, "TransitionProps": { "type": { "name": "object" } } }, @@ -54,5 +54,6 @@ "filename": "/packages/material-ui/src/Tooltip/Tooltip.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/tree-item.json b/docs/pages/api-docs/tree-item.json index 6d4c25721027eb..6c73bfafd0b0ea 100644 --- a/docs/pages/api-docs/tree-item.json +++ b/docs/pages/api-docs/tree-item.json @@ -1,5 +1,6 @@ { "props": { + "nodeId": { "type": { "name": "string" }, "required": true }, "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" } }, "collapseIcon": { "type": { "name": "node" } }, @@ -13,7 +14,6 @@ "expandIcon": { "type": { "name": "node" } }, "icon": { "type": { "name": "node" } }, "label": { "type": { "name": "node" } }, - "nodeId": { "type": { "name": "string" }, "required": true }, "onFocus": { "type": { "name": "custom", "description": "unsupportedProp" } }, "TransitionComponent": { "type": { "name": "elementType" }, "default": "Collapse" }, "TransitionProps": { "type": { "name": "object" } } @@ -44,5 +44,6 @@ "filename": "/packages/material-ui-lab/src/TreeItem/TreeItem.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/tree-view.json b/docs/pages/api-docs/tree-view.json index e7ba9389017fa2..ac029d5fb7c888 100644 --- a/docs/pages/api-docs/tree-view.json +++ b/docs/pages/api-docs/tree-view.json @@ -33,5 +33,6 @@ "filename": "/packages/material-ui-lab/src/TreeView/TreeView.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": false, + "cssComponent": false } diff --git a/docs/pages/api-docs/typography.json b/docs/pages/api-docs/typography.json index 7def40b0ed9dc4..78d1c6d0c65fea 100644 --- a/docs/pages/api-docs/typography.json +++ b/docs/pages/api-docs/typography.json @@ -82,5 +82,6 @@ "filename": "/packages/material-ui/src/Typography/Typography.js", "inheritance": null, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/unstable-trap-focus.json b/docs/pages/api-docs/unstable-trap-focus.json index cbcf29beb7a1e3..4cf0b22760bfe3 100644 --- a/docs/pages/api-docs/unstable-trap-focus.json +++ b/docs/pages/api-docs/unstable-trap-focus.json @@ -1,13 +1,13 @@ { "props": { + "getDoc": { "type": { "name": "func" }, "required": true }, + "isEnabled": { "type": { "name": "func" }, "required": true }, + "open": { "type": { "name": "bool" }, "required": true }, "children": { "type": { "name": "custom", "description": "element" } }, "disableAutoFocus": { "type": { "name": "bool" } }, "disableEnforceFocus": { "type": { "name": "bool" } }, "disableRestoreFocus": { "type": { "name": "bool" } }, - "getDoc": { "type": { "name": "func" }, "required": true }, - "getTabbable": { "type": { "name": "func" } }, - "isEnabled": { "type": { "name": "func" }, "required": true }, - "open": { "type": { "name": "bool" }, "required": true } + "getTabbable": { "type": { "name": "func" } } }, "name": "Unstable_TrapFocus", "styles": { "classes": [], "globalClasses": {}, "name": null }, @@ -15,5 +15,6 @@ "filename": "/packages/material-ui/src/Unstable_TrapFocus/Unstable_TrapFocus.js", "inheritance": null, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/api-docs/zoom.json b/docs/pages/api-docs/zoom.json index 126e00c8fb0de2..a20169ffd2cd7a 100644 --- a/docs/pages/api-docs/zoom.json +++ b/docs/pages/api-docs/zoom.json @@ -21,5 +21,6 @@ "pathname": "https://reactcommunity.org/react-transition-group/transition#Transition-props" }, "demos": "", - "styledComponent": true + "styledComponent": true, + "cssComponent": false } diff --git a/docs/pages/branding/about.tsx b/docs/pages/branding/about.tsx index 43dd0237c042b4..d4768421e226d8 100644 --- a/docs/pages/branding/about.tsx +++ b/docs/pages/branding/about.tsx @@ -2,9 +2,11 @@ import * as React from 'react'; import Container from '@material-ui/core/Container'; import Typography from '@material-ui/core/Typography'; import Grid from '@material-ui/core/Grid'; -import Link from '@material-ui/core/Link'; +import Link from 'docs/src/modules/components/Link'; import Button from '@material-ui/core/Button'; +import Box from '@material-ui/core/Box'; import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer'; +import NavigateNextIcon from '@material-ui/icons/NavigateNext'; import BrandingCard from 'docs/src/modules/branding/BrandingCard'; import UnderlinedText from 'docs/src/modules/branding/UnderlinedText'; import FeedbackIcon from 'docs/src/modules/branding/icons/Feedback'; @@ -15,133 +17,621 @@ import OpenCollectiveIcon from 'docs/src/modules/branding/icons/OpenCollective'; import BrandingRoot from 'docs/src/modules/branding/BrandingRoot'; import BrandingBeginToday from 'docs/src/modules/branding/BrandingBeginToday'; import BrandingDiscoverMore from 'docs/src/modules/branding/BrandingDiscoverMore'; +import BrandingPersona from 'docs/src/modules/branding/BrandingPersona'; +import BrandingQuote from 'docs/src/modules/branding/BrandingQuote'; +import BrandingBulletItem from 'docs/src/modules/branding/BrandingBulletItem'; -export default function Page() { +function BrandingVision() { return ( - - - - Material-UI is awesome. -
- How can I support the project? - - There are many ways to support Material-UI: - - - } title="Spread the word"> - - Evangelize Material-UI by linking to{' '} - material-ui.com on your website, every - backlink matters! Follow us on{' '} - Twitter, like and retweet the - important news. Or just talk about us with your friends. - - - - - } - title="Give us feedback" - > - - Tell us what we're doing well or where we can improve. Please upvote ( - - 👍 - - ) the issues that you are the most interested in seeing solved.{' '} - - Give us feedback - - - + + + Our vision is to provide material to build rich user + interfaces. Material-UI is an elegant React implementation of the Material Design guidelines + that can be customized to fully match your brand. + + + + +
+ + + + + + { + "The Material Design guidelines are an incredible starting point, but they don't provide guidance on all aspects or needs of an application." + } + In addition to the guideline-specific implementation,{' '} + we want Material-UI to be more generally useful for application development. + + + Material-UI implements not only the Material Design guidelines, but is also a general + use UI library of components, offering components that are simply not addressed in the + design guidelines. + + + + + + + + + We focus on providing all the low-level tools needed to build a rich user-interface + with React. + {' '} + We implement the Material Design specification, which is a bar set quite high. You are + able to take advantage of it for your own business with any style customization + needed. + + + We want to see companies succeed using Material-UI in a way that matches their brand, + close to the Material Design philosophy or not. We don't want them to feel that + their UI simply looks like another Google product. + - - } - title="Make changes happen" + + -
    -
  • - Edit the documentation. Every page has an "EDIT THIS PAGE" link in the - top right. -
    • -
  • - Report bugs or missing features by{' '} - - creating an issue - - . -
    • -
  • - Review and comment on existing{' '} - pull requests and{' '} - issues. -
    • -
  • - Help translate the - documentation. -
    • -
  • - - Improve our documentation - - , fix bugs, or add features by{' '} - - submitting a pull request - - . -
    • -
- +
+ + - - } title="Support us financially"> - - If you use Material-UI in a commercial project and would like to support its - continued development by becoming a Sponsor, or in a side or hobby project and would - like to become a Backer, you can do so through OpenCollective. - - - All funds donated are managed transparently, and Sponsors receive recognition in the - README and on the Material-UI home page. - - - - - - } title="Help new users"> - - You can answer questions on{' '} - - StackOverflow + + + + + + React is set on a course to further dominate the way UIs are built on the web for a long + time. +
+ The next major iteration to improve the DX will be a paradigm shift. + {" It's not coming with a new library but low-code."} + + + + + From a developer's point of view, we want Material-UI to: + + + + Deliver on fully encapsulated/composable React components, + + Be themeable/customizable, + + Be cross browser compatible and assistive technology accessible, + + + Promote developer joy, a sense of community, and an environment where new and + experienced developers can learn from each other. + + + + + + ); +} + +function BrandingTeam() { + return ( + + + + Team + + Material-UI is maintained by a group of invaluable core contributors, with the massive + support and involvement of the community. + + + + ); +} + +const company = [ + { + name: 'Olivier Tassinari', + src: '/static/branding/about/olivier.jpg', + title: 'Co-founder', + location: 'Paris, France', + twitter: 'olivtassinari', + github: 'oliviertassinari', + }, + { + name: 'Matt Brookes', + src: '/static/branding/about/matt.jpg', + title: 'Co-founder', + location: 'London, UK', + twitter: 'randomtechdude', + github: 'mbrookes', + }, + { + name: 'Sebastian Silbermann', + src: '/static/branding/about/sebastian.jpg', + title: 'Community focus', + location: 'Dresden, Germany', + twitter: 'sebsilbermann', + github: 'eps1lon', + }, + { + name: 'Damien Tassone', + src: '/static/branding/about/damien.jpg', + title: 'Enterprise focus', + location: 'Barcelona, Spain', + twitter: 'madKakoO', + github: 'dtassone', + }, + { + name: 'Marija Najdova', + src: '/static/branding/about/marija.jpg', + title: 'Community focus', + location: 'Skopje, North Macedonia', + twitter: 'marijanajdova', + github: 'mnajdova', + }, + { + name: 'Danail Hadjiatanasov', + src: '/static/branding/about/danail.jpg', + title: 'Enterprise focus', + location: 'Amsterdam, Netherlands', + twitter: 'danail_h', + github: 'DanailH', + }, +]; + +function BrandingCompany() { + return ( + + + + + Company + + + The development of the project and its ecosystem is guided by an international team. + + + {company.map((member) => ( + + + + ))} + + + + ); +} + +const community = [ + { + name: 'Danica Shen', + github: 'DDDDDanica', + title: '🇨🇳 Chinese docs', + location: 'Ireland', + src: 'https://avatars.githubusercontent.com/u/12678455', + }, + { + name: 'Yan Lee', + github: 'AGDholo', + title: '🇨🇳 Chinese docs', + location: 'China', + src: 'https://avatars.githubusercontent.com/u/13300332', + }, + { + name: 'Jairon Alves Lima', + github: 'jaironalves', + title: '🇧🇷 Brazilian docs', + location: 'São Paulo, Brazil', + src: 'https://avatars.githubusercontent.com/u/29267813', + }, +] as typeof emeriti; + +function BrandingContributors() { + return ( + + + + + Community Contributors + + + Some members of the community have so enriched it, that they deserve special mention. + + + {community.map((member) => ( + + + + ))} + + + + ); +} + +const emeriti = [ + { + name: 'Hai Nguyen', + github: 'hai-cea', + twitter: 'haicea', + title: 'v0.x creator', + location: 'Dallas, Texas, US', + src: 'https://avatars.githubusercontent.com/u/2007468', + }, + { + name: 'Nathan Marks', + github: 'nathanmarks', + title: 'v1.x co-creator', + location: 'Toronto, ON', + src: 'https://avatars.githubusercontent.com/u/4420103', + }, + { + name: 'Kevin Ross', + github: 'rosskevin', + twitter: 'rosskevin', + title: 'Core focus, flow', + location: 'Franklin, Tennessee, US', + src: 'https://avatars.githubusercontent.com/u/136564', + }, + { + name: 'Sebastian Sebald', + github: 'sebald', + twitter: 'sebastiansebald', + title: 'Core focus', + location: 'Freiburg, Germany', + src: 'https://avatars.githubusercontent.com/u/985701', + }, + { + name: 'Ken Gregory', + github: 'kgregory', + title: 'Core focus', + location: 'New Jersey, US', + src: 'https://avatars.githubusercontent.com/u/3155127', + }, + { + name: 'Tom Crockett', + github: 'pelotom', + twitter: 'pelotom', + title: 'Core focus', + location: 'Los Angeles, California, US', + src: 'https://avatars.githubusercontent.com/u/128019', + }, + { + name: 'Maik Marschner', + github: 'leMaik', + twitter: 'leMaikOfficial', + title: 'Core focus', + location: 'Hannover, Germany', + src: 'https://avatars.githubusercontent.com/u/5544859', + }, + { + name: 'Oleg Slobodskoi', + github: 'kof', + twitter: 'oleg008', + title: 'JSS', + location: 'Berlin, Germany', + src: 'https://avatars.githubusercontent.com/u/52824', + }, + { + name: 'Dmitriy Kovalenko', + github: 'dmtrKovalenko', + twitter: 'dmtrKovalenko', + title: 'Date pickers', + location: 'Kharkiv, Ukraine', + src: 'https://avatars.githubusercontent.com/u/16926049', + }, + { + name: 'Josh Wooding', + github: 'joshwooding', + twitter: 'JoshWooding_', + title: 'Core focus, J.P. Morgan', + location: 'London, UK', + src: 'https://avatars.githubusercontent.com/u/12938082', + }, +]; + +function BrandingEmeriti() { + return ( + + + + Community Emeriti + + + We honor some no-longer-active core team members who have made valuable contributons in + the past. They advise us from time-to-time. + + + {emeriti.map((member) => ( + + + + ))} + + + + ); +} + +function BrandingJoinUs() { + return ( + + + + + Join our team of creators & innovators + + + If you love the challenge of doing things differently, empowering creativity, and making + real connections along the way–then this may be the place for you. + + + + + ); +} + +function BrandingSupportUs() { + return ( + + + Material-UI is awesome. +
+ How can I support the project? + + There are many ways to support Material-UI: + + + } title="Spread the word"> + + Evangelize Material-UI by linking to{' '} + material-ui.com on your website, every + backlink matters! Follow us on{' '} + Twitter, retweet the important + news. Star us on GitHub + ⭐️.{" Or share what you've built with Material-UI."} + + + + + } + title="Give us feedback" + > + + Tell us what we're doing well or where we can improve. Please upvote ( + + 👍 + + ) the issues that you are the most interested in seeing solved.{' '} + + Give us feedback + + + + + + } + title="Make changes happen" + sx={{ + ul: { + position: 'relative', + ml: 0, + pl: '1.3em', + }, + 'ul li:before': { + content: '"-"', + position: 'absolute', + left: 0, + }, + }} + > +
    +
  • + Edit the documentation. Every page has an "EDIT THIS PAGE" link in the top + right. +
    • +
  • + Report bugs or missing features by{' '} + creating an issue. +
    • +
  • + Review and comment on existing{' '} + pull requests and{' '} + issues. +
    • +
  • + Help translate the + documentation. +
    • +
  • + + Improve our documentation + + , fix bugs, or add features by{' '} + + submitting a pull request . - - - +
    • +
+ - + + } title="Support us financially"> + + If you use Material-UI in a commercial project and would like to support its continued + development by becoming a Sponsor, or in a side or hobby project and would like to + become a Backer, you can do so through OpenCollective. + + + All funds donated are managed transparently, and Sponsors receive recognition in the + README and on the Material-UI home page. + + + + + + } title="Help new users"> + + You can answer questions on{' '} + + StackOverflow + + . + + + + + + ); +} + +export default function Page() { + return ( + + + + + + + + @@ -157,11 +647,9 @@ export default function Page() { // import CardHeader from '@material-ui/core/CardHeader'; // import CardContent from '@material-ui/core/CardContent'; // import Avatar from '@material-ui/core/Avatar'; -// import NavigateNextIcon from '@material-ui/icons/NavigateNext'; // import { experimentalStyled as styled } from '@material-ui/core/styles'; // import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer'; -// import Quote from 'docs/src/modules/branding/Quote'; -// import BulletItem from 'docs/src/modules/branding/BulletItem'; +// import BrandingBulletItem from 'docs/src/modules/branding/BrandingBulletItem'; // import UnderlinedText from 'docs/src/modules/branding/UnderlinedText'; // import Persona from 'docs/src/modules/branding/Persona'; // import ArrowCirleIcon from 'docs/src/modules/branding/icons/ArrowCircle'; @@ -365,13 +853,13 @@ export default function Page() { // justifyContent="center" // > // -// +// // We're on a mission to make building UIs with{' '} // React fun. // // // -// +// // Material-UI started back in 2014 to unify{' '} // React and{' '} // Material Design. @@ -395,7 +883,7 @@ export default function Page() { // // @@ -441,7 +929,7 @@ export default function Page() { // // // -// +// // Our mission // // // -// +// // Our company is focused on making React UI development faster, simpler, and // accessible to more people. We build open source and commercial tools used by over // two millions developers in production. // -// +// // We're proud not only of the products we make, but also the community and // partnerships we've cultivated with other developers and companies. // @@ -490,7 +978,7 @@ export default function Page() { // -// +// // Our values // -// Transparency, most of our work is public -// Creating a safe, high-trust team -// Building incredible developer experiences -// Maintaining a healthy working environment -// Deliver web experiences that feel amazing -// -// - -// -// -// -// Our vision is to provide material to build UIs. We -// have an elegant React implementation of the Material Design guidelines that can be -// customized to fully match your brand. -// -// -// - -// -// -// -// -// -// -// The Material Design guidelines are an incredible starting point, but they do not -// provide guidance on all aspects or needs of an application. In addition to the -// guidelines-specific implementation,{' '} -// -// we want Material-UI to be whatever is generally useful for application development -// -// , all in the spirit of the Material Design guidelines. -// -// -// Therefore, Material-UI does not only implement the Material Design guidelines, but is -// also a general use UI library of components. It also means we offer components or -// combinations that are simply not addressed in the design guidelines. -// -// -// - -// -// -// -// -// We focus on providing all the low-level tools needed to build a rich user-interface -// with React. -// {' '} -// We implement the Material Design specification (which is a bar set quite high), you -// are able to take advantage of it for your own business with any style customization -// needed. -// -// -// We want to see companies succeeding using Material-UI in a way that matches their -// brand, close to the Material Design philosophy or not. We don't want them to feel -// that their UI simply looks like another Google product. -// -// -// -// -// -// - -// -// -// -// We believe that React is set on a course to dominate the way UIs are built on the web -// for a very long time. We also believe that the next major iteration is coming with -// low-code. Material-UI is at the forefront of this transformation. -// -// -// -// -// From a developer's point of view, we want Material-UI to: -// -// Deliver on fully encapsulated/composable React components, -// Be themeable/customizable, -// Be cross browser compatible and accessible, -// -// Promote developer joy, a sense of community, and an environment where new and -// experienced developers can learn from each other. -// -// -// - -// -// -// -// -// Team -// -// -// -// -// Material-UI is maintained by a group of invaluable core contributors, with the massive -// support and involvement of the community. -// -// -// - -// -// -// -// -// Company -// -// -// -// -// The development of the project and its ecosystem is guided by an international team. -// -// - -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// - -// -// -// -// -// Community contributors -// -// -// -// -// Some members of the community have so enriched it, that they deserve special mention. -// -// - -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// - -// -// -// -// Community Emeriti -// -// -// -// -// We honor some no-longer-active core team members who have made valuable contributons -// in the past. They advise us from time-to-time. -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// - -// -// -// -// -// Join our team of creators & innovators -// -// - -// -// -// If you love the challenge of doing things differently, empowering creativity, and -// making real connections along the way–then this may be the place for you. -// -// - -// -// -// -// +// Transparency, most of our work is public +// Creating a safe, high-trust team +// Building incredible developer experiences +// Maintaining a healthy working environment +// Deliver web experiences that feel amazing // // diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index cbef6fe2464f0e..fee6dc982812cb 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -9,21 +9,25 @@ import * as prettier from 'prettier'; import * as recast from 'recast'; import remark from 'remark'; import remarkVisit from 'unist-util-visit'; -import marked from 'marked'; import * as yargs from 'yargs'; import * as doctrine from 'doctrine'; import { defaultHandlers, + resolver, parse as docgenParse, PropDescriptor, PropTypeDescriptor, ReactDocgenApi, } from 'react-docgen'; import muiDefaultPropsHandler from 'docs/src/modules/utils/defaultPropsHandler'; +import muiFindAnnotatedComponentsResolver from 'docs/src/modules/utils/findAnnotatedComponentsResolver'; import { LANGUAGES, LANGUAGES_IN_PROGRESS } from 'docs/src/modules/constants'; import parseTest from 'docs/src/modules/utils/parseTest'; import { findPagesMarkdown, findComponents } from 'docs/src/modules/utils/find'; -import { getHeaders } from 'docs/src/modules/utils/parseMarkdown'; +import { + getHeaders, + renderInline as renderMarkdownInline, +} from 'docs/src/modules/utils/parseMarkdown'; import { pageToTitle } from 'docs/src/modules/utils/helpers'; import createGenerateClassName from '@material-ui/styles/createGenerateClassName'; import getStylesCreator from '@material-ui/styles/getStylesCreator'; @@ -39,7 +43,7 @@ interface ReactApi extends ReactDocgenApi { inheritance: { component: string; pathname: string } | null; name: string; pagesMarkdown: Array<{ components: string[]; filename: string; pathname: string }>; - spread: boolean; + spread: boolean | undefined; src: string; styles: { classes: string[]; @@ -55,6 +59,8 @@ interface DescribeablePropDescriptor { type: PropTypeDescriptor; } +const cssComponents = ['Box', 'Grid']; + const generateClassName = createGenerateClassName(); function getDeprecatedInfo(type: PropTypeDescriptor) { @@ -73,13 +79,13 @@ function getDeprecatedInfo(type: PropTypeDescriptor) { return false; } -function getChained(type: PropTypeDescriptor) { +function getChained(type: PropTypeDescriptor): false | PropDescriptor { if (type.raw) { const marker = 'chainPropTypes'; const indexStart = type.raw.indexOf(marker); if (indexStart !== -1) { - const parsed = docgenParse( + const parsed: ReactApi = docgenParse( ` import PropTypes from 'prop-types'; const Foo = () =>
@@ -438,25 +444,21 @@ function getInheritance( * why the source includes relative url. We transform them to absolute urls with * this method. */ -function computeApiDescription(api: ReactApi, options: { host: string }): Promise { +async function computeApiDescription(api: ReactApi, options: { host: string }): Promise { const { host } = options; - return new Promise((resolve, reject) => { - remark() - .use(function docsLinksAttacher() { - return function transformer(tree) { - remarkVisit(tree, 'link', (linkNode) => { - if ((linkNode.url as string).startsWith('/')) { - linkNode.url = `${host}${linkNode.url}`; - } - }); - }; - }) - .process(api.description, (error, file) => { - if (error) reject(error); + const file = await remark() + .use(function docsLinksAttacher() { + return function transformer(tree) { + remarkVisit(tree, 'link', (linkNode) => { + if ((linkNode.url as string).startsWith('/')) { + linkNode.url = `${host}${linkNode.url}`; + } + }); + }; + }) + .process(api.description); - resolve(file.contents.toString('utf-8').trim()); - }); - }); + return file.contents.toString('utf-8').trim(); } /** @@ -508,9 +510,19 @@ async function annotateComponentDefinition(context: { } const { leadingComments } = node; - const jsdocBlock = leadingComments != null ? leadingComments[0] : null; - if (leadingComments != null && leadingComments.length > 1) { - throw new Error('Should only have a single leading jsdoc block'); + const leadingCommentBlocks = + leadingComments != null + ? leadingComments.filter(({ type }) => type === 'CommentBlock') + : null; + const jsdocBlock = leadingCommentBlocks != null ? leadingCommentBlocks[0] : null; + if (leadingCommentBlocks != null && leadingCommentBlocks.length > 1) { + throw new Error( + `Should only have a single leading jsdoc block but got ${ + leadingCommentBlocks.length + }:\n${leadingCommentBlocks + .map(({ type, value }, index) => `#${index} (${type}): ${value}`) + .join('\n')}`, + ); } if (jsdocBlock != null) { start = jsdocBlock.start; @@ -551,6 +563,10 @@ async function annotateComponentDefinition(context: { } const markdownLines = (await computeApiDescription(api, { host: HOST })).split('\n'); + // Ensure a newline between manual and generated description. + if (markdownLines[markdownLines.length - 1] !== '') { + markdownLines.push(''); + } if (demos.length > 0) { markdownLines.push( 'Demos:', @@ -861,6 +877,41 @@ function normalizePath(filepath: string): string { return filepath.replace(/\\/g, '/'); } +async function parseComponentSource( + src: string, + componentObject: { filename: string }, +): Promise { + const reactAPI: ReactApi = docgenParse( + src, + // Use `findExportedComponentDefinition` and fallback to `muiFindAnnotatedComponentsResolver` + // `findExportedComponentDefinition` was the default resolver: https://github.com/reactjs/react-docgen/blob/aba7250ff5fde608ee6af7c286b15476d1b5bb99/src/main.js#L19 + (ast, parser, importer) => { + const defaultResolvedDefinition = resolver.findExportedComponentDefinition( + ast, + parser, + importer, + ); + if (defaultResolvedDefinition !== undefined) { + return defaultResolvedDefinition; + } + return muiFindAnnotatedComponentsResolver(ast, parser, importer); + }, + defaultHandlers.concat(muiDefaultPropsHandler), + { + filename: componentObject.filename, + }, + ); + + const fullDescription = reactAPI.description; + // Ignore what we might have generated in `annotateComponentDefinition` + const annotatedDescriptionMatch = fullDescription.match(/(Demos|API):\r?\n\r?\n/); + if (annotatedDescriptionMatch !== null) { + reactAPI.description = fullDescription.slice(0, annotatedDescriptionMatch.index); + } + + return reactAPI; +} + async function buildDocs(options: { component: { filename: string }; pagesMarkdown: Array<{ components: string[]; filename: string; pathname: string }>; @@ -868,7 +919,7 @@ async function buildDocs(options: { outputDirectory: string; theme: object; workspaceRoot: string; -}) { +}): Promise { const { component: componentObject, outputDirectory, @@ -894,16 +945,6 @@ async function buildDocs(options: { const component = require(componentObject.filename); const name = path.parse(componentObject.filename).name; - const componentApi: { - componentDescription: string; - propDescriptions: { [key: string]: string | undefined }; - classDescriptions: { [key: string]: { description: string; conditions?: string } }; - } = { - componentDescription: '', - propDescriptions: {}, - classDescriptions: {}, - }; - const styles: ReactApi['styles'] = { classes: [], name: null, @@ -972,15 +1013,17 @@ async function buildDocs(options: { } } - let reactApi: ReactApi; - try { - reactApi = docgenParse(src, null, defaultHandlers.concat(muiDefaultPropsHandler), { - filename: componentObject.filename, - }); - } catch (err) { - console.error('Error parsing src for', componentObject.filename); - throw err; - } + const reactApi: ReactApi = await parseComponentSource(src, componentObject); + + const componentApi: { + componentDescription: string; + propDescriptions: { [key: string]: string | undefined }; + classDescriptions: { [key: string]: { description: string; conditions?: string } }; + } = { + componentDescription: reactApi.description, + propDescriptions: {}, + classDescriptions: {}, + }; const unstyledFileName = getUnstyledFilename(componentObject.filename); let unstyledSrc; @@ -1020,7 +1063,6 @@ async function buildDocs(options: { reactApi.name = name; reactApi.styles = styles; reactApi.pagesMarkdown = pagesMarkdown; - reactApi.spread = spread; reactApi.EOL = getLineFeed(src); // styled components does not have the options static @@ -1035,6 +1077,7 @@ async function buildDocs(options: { const testInfo = await parseTest(componentObject.filename); // no Object.assign to visually check for collisions reactApi.forwardsRefTo = testInfo.forwardsRefTo; + reactApi.spread = testInfo.spread ?? spread; // Relative location in the file system. reactApi.filename = componentObject.filename.replace(workspaceRoot, ''); @@ -1058,22 +1101,20 @@ async function buildDocs(options: { }, {} as Record); } - /** - * Component description. - */ - if (reactApi.description.length) { - componentApi.componentDescription = marked.parseInline(reactApi.description); - } - - const componentProps = _.fromPairs( + const componentProps = _.fromPairs<{ + default: string | undefined; + required: boolean | undefined; + type: { name: string | undefined; description: string | undefined }; + }>( Object.entries(reactApi.props).map(([propName, propDescriptor]) => { const prop = createDescribeableProp(propDescriptor, propName); if (prop === null) { - return []; + // have to delete `componentProps.undefined` later + return [] as any; } let description = generatePropDescription(prop, propName); - description = marked.parseInline(description); + description = renderMarkdownInline(description); if (propName === 'classes') { description += ' See CSS API below for more details.'; @@ -1119,6 +1160,8 @@ async function buildDocs(options: { ]; }), ); + // created by returning the `[]` entry + delete componentProps.undefined; /** * CSS class descriptiohs. @@ -1169,7 +1212,18 @@ async function buildDocs(options: { * Gather the metadata needed for the component's API page. */ const pageContent = { - props: componentProps, + // Sorted by required DESC, name ASC + props: _.fromPairs( + Object.entries(componentProps).sort(([aName, aData], [bName, bData]) => { + if ((aData.required && bData.required) || (!aData.required && !bData.required)) { + return aName.localeCompare(bName); + } + if (aData.required) { + return -1; + } + return 1; + }), + ), name: reactApi.name, styles: { classes: reactApi.styles.classes, @@ -1187,6 +1241,7 @@ async function buildDocs(options: { inheritance: reactApi.inheritance, demos: generateDemoList(reactApi), styledComponent, + cssComponent: cssComponents.indexOf(reactApi.name) >= 0, }; // docs/pages/component-name.json @@ -1298,7 +1353,7 @@ function run(argv: { componentDirectories?: string[]; grep?: string; outputDirec // Don't document ThmeProvider API if (component.filename.includes('ThemeProvider')) { - return { status: 'fulfilled' }; + return Promise.resolve({ status: 'fulfilled' as const }); } return buildDocs({ @@ -1309,11 +1364,11 @@ function run(argv: { componentDirectories?: string[]; grep?: string; outputDirec theme, workspaceRoot, }) - .then((value) => { - return { status: 'fulfilled' as const, value }; + .then(() => { + return { status: 'fulfilled' as const }; }) .catch((error) => { - error.message = `with component ${component.filename}: ${error.message}`; + error.message = `${component.filename}: ${error.message}`; return { status: 'rejected' as const, reason: error }; }); diff --git a/docs/src/modules/branding/BrandingBeginToday.tsx b/docs/src/modules/branding/BrandingBeginToday.tsx index 70838528c37523..0e833cecfa8dff 100644 --- a/docs/src/modules/branding/BrandingBeginToday.tsx +++ b/docs/src/modules/branding/BrandingBeginToday.tsx @@ -18,6 +18,7 @@ export default function BrandingBeginToday() { diff --git a/docs/src/modules/branding/BrandingBulletItem.tsx b/docs/src/modules/branding/BrandingBulletItem.tsx new file mode 100644 index 00000000000000..e15eb14eb3fac4 --- /dev/null +++ b/docs/src/modules/branding/BrandingBulletItem.tsx @@ -0,0 +1,29 @@ +import * as React from 'react'; +import Box from '@material-ui/core/Box'; +import Typography from '@material-ui/core/Typography'; +import CheckIcon from 'docs/src/modules/branding/icons/Check'; + +interface BrandingBulletItemProps { + children?: React.ReactNode; +} + +export default function BrandingBulletItem(props: BrandingBulletItemProps) { + const { children, ...other } = props; + return ( + + + {children} + + ); +} diff --git a/docs/src/modules/branding/BrandingCard.tsx b/docs/src/modules/branding/BrandingCard.tsx index b0fadf824f7eb6..c247ba8a05f93d 100644 --- a/docs/src/modules/branding/BrandingCard.tsx +++ b/docs/src/modules/branding/BrandingCard.tsx @@ -22,7 +22,6 @@ export default function BrandingCard(props: BrandingCardProps) { width: 80, height: 80, }} - aria-label={title} > {icon} diff --git a/docs/src/modules/branding/BrandingDiscoverMore.tsx b/docs/src/modules/branding/BrandingDiscoverMore.tsx index a8320ec3d7e987..564347410ea66c 100644 --- a/docs/src/modules/branding/BrandingDiscoverMore.tsx +++ b/docs/src/modules/branding/BrandingDiscoverMore.tsx @@ -53,7 +53,13 @@ function DiscoverMoreCard(props: DiscoverMoreCardProps) { - + ); diff --git a/docs/src/modules/branding/BrandingFooter.tsx b/docs/src/modules/branding/BrandingFooter.tsx index 8e2add5758072c..0119f1386a0289 100644 --- a/docs/src/modules/branding/BrandingFooter.tsx +++ b/docs/src/modules/branding/BrandingFooter.tsx @@ -55,7 +55,7 @@ export default function BrandingFooter() { - + {t1('Products')} @@ -205,18 +205,28 @@ export default function BrandingFooter() { - + diff --git a/docs/src/modules/branding/BrandingLogo.tsx b/docs/src/modules/branding/BrandingLogo.tsx index 5eca8964ab2248..b86a83e2eebdfb 100644 --- a/docs/src/modules/branding/BrandingLogo.tsx +++ b/docs/src/modules/branding/BrandingLogo.tsx @@ -5,15 +5,22 @@ import t1 from 'docs/src/modules/branding/t1'; interface BrandingLogoProps { href?: string; - variant?: 'lockup' | 'icon'; + loading?: 'lazy'; sx?: BoxProps['sx']; + variant?: 'lockup' | 'icon'; } export default function BrandingLogo(props: BrandingLogoProps) { - const { href, variant = 'lockup', sx } = props; + const { href, variant = 'lockup', sx, loading } = props; return ( - {t1('Material-UI + {t1('Material-UI ); } diff --git a/docs/src/modules/branding/BrandingPersona.tsx b/docs/src/modules/branding/BrandingPersona.tsx new file mode 100644 index 00000000000000..49d3a3ed8e4771 --- /dev/null +++ b/docs/src/modules/branding/BrandingPersona.tsx @@ -0,0 +1,105 @@ +import * as React from 'react'; +import { OverridableComponent } from '@material-ui/core/OverridableComponent'; +import Box, { BoxTypeMap } from '@material-ui/core/Box'; +import Typography from '@material-ui/core/Typography'; +import TwitterIcon from '@material-ui/icons/Twitter'; +import GitHubIcon from '@material-ui/icons/GitHub'; +import IconButton from '@material-ui/core/IconButton'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; +import t1 from 'docs/src/modules/branding/t1'; + +interface PersonaRootProps { + styleProps: { size: 'large' | 'small' }; +} + +const PersonaRoot: OverridableComponent> = styled( + Box, + {}, + { name: 'Persona', slot: 'Root' }, +)(({ styleProps, theme }) => ({ + display: 'flex', + marginTop: theme.spacing(1), + marginBottom: theme.spacing(1), + flexDirection: 'column', + alignItems: 'center', + '& [class*="MuiAvatar-root"]': { + width: styleProps.size === 'large' ? 200 : 120, + height: styleProps.size === 'large' ? 200 : 120, + marginBottom: theme.spacing(1), + }, + '& [class*="MuiIconButton-root"]': { + width: 40, + height: 40, + backgroundColor: 'white', + color: theme.palette.greyAA, + boxShadow: `0 2px 3px rgba(9, 10, 12, .08)`, + }, +})) as OverridableComponent>; + +interface BrandingPersonaProps { + github: string; + location?: string; + name?: string; + size?: 'small' | 'large'; + src?: string; + srcSet?: string; + title?: string; + twitter?: string; +} + +export default function BrandingPersona(props: BrandingPersonaProps) { + const { name, src, srcSet, title, location, twitter, github, size = 'large' } = props; + return ( + + + + {name} + + + {title} + + + {location} + + * + *': { + ml: 1, + }, + }} + > + {twitter && ( + + + + )} + + + + + + ); +} diff --git a/docs/src/modules/branding/BrandingQuote.tsx b/docs/src/modules/branding/BrandingQuote.tsx new file mode 100644 index 00000000000000..3629d5992e1ebf --- /dev/null +++ b/docs/src/modules/branding/BrandingQuote.tsx @@ -0,0 +1,54 @@ +import * as React from 'react'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; +import Typography from '@material-ui/core/Typography'; + +interface BrandingQuoteProps { + author?: { + avatar?: string; + name?: string; + title?: string; + }; + children: React.ReactNode; +} + +const BrandingQuote = styled((props: BrandingQuoteProps) => { + const { author = {}, children, ...other } = props; + return ( +
+ + + "{children}" + + + + + {author.name} + {', '} + {author.title} + + +
+ ); +})(({ theme }) => ({ + background: theme.palette.greyF3, + padding: theme.spacing(5), +})); + +export default BrandingQuote; diff --git a/docs/src/modules/branding/BrandingRoot.tsx b/docs/src/modules/branding/BrandingRoot.tsx index bd3552c7c684ea..16680a20e611b4 100644 --- a/docs/src/modules/branding/BrandingRoot.tsx +++ b/docs/src/modules/branding/BrandingRoot.tsx @@ -5,7 +5,6 @@ import { darken, createMuiTheme, alpha, ThemeProvider } from '@material-ui/core/ import BrandingFooter from 'docs/src/modules/branding/BrandingFooter'; interface CustomPalette { - azure: string; vividBlue: string; emeral: string; sizzlingRed: string; @@ -20,7 +19,6 @@ interface CustomPalette { } interface CustomPaletteOptions { - azure?: string; vividBlue?: string; emeral?: string; sizzlingRed?: string; @@ -208,14 +206,14 @@ theme = createMuiTheme(theme, { boxShadow: `0 0 0 0.25rem ${alpha(theme.palette.greyD7, 0.5)}`, }, '&:hover': { - backgroundColor: darken(theme.palette.greyD7, 0.1), + backgroundColor: darken(theme.palette.greyD7, 0.07), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: theme.palette.greyD7, }, }, '&:active': { - backgroundColor: darken(theme.palette.greyD7, 0.2), + backgroundColor: darken(theme.palette.greyD7, 0.18), }, }, }, @@ -227,29 +225,14 @@ theme = createMuiTheme(theme, { boxShadow: `0 0 0 0.25rem ${alpha(theme.palette.primary.main, 0.5)}`, }, '&:hover': { - backgroundColor: darken(theme.palette.primary.main, 0.15), + backgroundColor: darken(theme.palette.primary.main, 0.12), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: theme.palette.primary.main, }, }, '&:active': { - backgroundColor: darken(theme.palette.primary.main, 0.3), - }, - }, - }, - { - props: { variant: 'contained', color: 'secondary' }, - style: { - '&:hover': { - backgroundColor: darken(theme.palette.secondary.main, 0.15), - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: theme.palette.secondary.main, - }, - }, - '&:active': { - backgroundColor: darken(theme.palette.secondary.main, 0.3), + backgroundColor: darken(theme.palette.primary.main, 0.25), }, }, }, diff --git a/docs/src/modules/branding/BulletItem.tsx b/docs/src/modules/branding/BulletItem.tsx deleted file mode 100644 index 0865ec137f65a2..00000000000000 --- a/docs/src/modules/branding/BulletItem.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import * as React from 'react'; -import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; -import Grid from '@material-ui/core/Grid'; -import CheckIcon from 'docs/src/modules/branding/icons/Check'; - -interface BulletItemProps { - children?: React.ReactNode; -} - -export default function BulletItem(props: BulletItemProps) { - const { children, ...other } = props; - return ( - - - - - - - - {children} - - - ); -} diff --git a/docs/src/modules/branding/Persona.tsx b/docs/src/modules/branding/Persona.tsx deleted file mode 100644 index b595361ef7fe87..00000000000000 --- a/docs/src/modules/branding/Persona.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import * as React from 'react'; -import { OverridableComponent } from '@material-ui/core/OverridableComponent'; -import Box, { BoxTypeMap } from '@material-ui/core/Box'; -import Grid from '@material-ui/core/Grid'; -import Avatar from '@material-ui/core/Avatar'; -import Typography from '@material-ui/core/Typography'; -import TwitterIcon from '@material-ui/icons/Twitter'; -import GitHubIcon from '@material-ui/icons/GitHub'; -import IconButton from '@material-ui/core/IconButton'; -import { experimentalStyled as styled } from '@material-ui/core/styles'; -import t1 from 'docs/src/modules/branding/t1'; - -interface PersonaRootProps { - styleProps?: { size?: 'large' | 'small' }; -} - -const PersonaRoot: OverridableComponent> = styled( - Box, - {}, - { name: 'Persona', slot: 'Root' }, -)(({ styleProps = { size: 'large' }, theme }) => ({ - '& [class*="MuiAvatar-root"]': { - width: styleProps.size === 'large' ? 200 : 120, - height: styleProps.size === 'large' ? 200 : 120, - marginBottom: theme.spacing(1), - }, - '& [class*="MuiIconButton-root"]': { - width: 40, - height: 40, - background: 'white', - }, - '& .MuiTypography-title': { - color: theme.palette.grey5A, - }, -})) as OverridableComponent>; - -interface PersonaProps { - name?: string; - src?: string; - title?: string; - location?: string; - twitter?: string; - github?: string; - size?: 'small' | 'large'; -} - -export default function Persona(props: PersonaProps) { - const { name, src, title, location, twitter, github, size = 'large' } = props; - return ( - - - - - - - - - {name} - - - - - {title} - - - - {location} - - - - {twitter && ( - - - - - - )} - {github && ( - - - - - - )} - - - - ); -} diff --git a/docs/src/modules/branding/Quote.tsx b/docs/src/modules/branding/Quote.tsx deleted file mode 100644 index 7562b2e148720e..00000000000000 --- a/docs/src/modules/branding/Quote.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import * as React from 'react'; -import { experimentalStyled as styled } from '@material-ui/core/styles'; -import Avatar from '@material-ui/core/Avatar'; -import Grid from '@material-ui/core/Grid'; -import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; -import t1 from 'docs/src/modules/branding/t1'; - -interface QuoteProps { - author?: { - avatar?: string; - name?: string; - title?: string; - }; - children: React.ReactNode; -} - -const Quote = styled((props: QuoteProps) => { - const { author = {}, children, ...other } = props; - return ( - - - "{children}" - - - - - - - {author.name} - {', '} - {author.title} - - - - - ); -})(({ theme }) => ({ - background: theme.palette.greyF3, - padding: 40, -})); - -export default Quote; diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js index 7faa26dc9ecafc..e0a841de2c1eb9 100644 --- a/docs/src/modules/components/Ad.js +++ b/docs/src/modules/components/Ad.js @@ -65,7 +65,7 @@ const inHouseAds = [ name: 'scaffoldhub', link: 'https://scaffoldhub.io/?partner=1', img: '/static/ads-in-house/scaffoldhub.png', - description: 'Scaffold. Automate building your full-stack Material-UI web-app.', + description: 'ScaffoldHub. Automate building your full-stack Material-UI web-app.', }, { name: 'templates', @@ -109,7 +109,7 @@ const inHouseAds = [ }, { name: 'divjoy', - link: 'https://www.producthunt.com/posts/divjoy-2-0', + link: 'https://divjoy.com?via=material-ui', img: '/static/ads-in-house/divjoy.png', description: 'Divjoy. Create your Material-UI app in minutes. You’ll get a nice template, authentication, database integration, subscription payments, and more.', diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js index 385409219ef8d1..b9e4040eb06f07 100644 --- a/docs/src/modules/components/ApiPage.js +++ b/docs/src/modules/components/ApiPage.js @@ -117,35 +117,38 @@ ClassesTable.propTypes = { componentStyles: PropTypes.object.isRequired, }; -function getTransaltedHeader(t, header) { +function getTranslatedHeader(t, header) { const translations = { import: t('api-docs.import'), - componentName: t('api-docs.componentName'), + 'component-name': t('api-docs.componentName'), props: t('api-docs.props'), inheritance: t('api-docs.inheritance'), demos: t('api-docs.demos'), css: 'CSS', }; + // TODO Drop runtime type-checking once we type-check this file + if (!translations.hasOwnProperty(header)) { + throw new TypeError( + `Unable to translate header '${header}'. Did you mean one of '${Object.keys( + translations, + ).join("', '")}'`, + ); + } + return translations[header] || header; } function Heading(props) { const { hash, level: Level = 'h2' } = props; const t = useTranslate(); - const kebabCaseHash = hash === 'componentName' ? 'component-name' : `${hash}`; return ( {/* eslint-disable-next-line jsx-a11y/anchor-is-valid, jsx-a11y/anchor-has-content */} - - {getTransaltedHeader(t, hash)} - + {getTranslatedHeader(t, hash)} +