diff --git a/docs/pages/api-docs/list-item-text.md b/docs/pages/api-docs/list-item-text.md index 298c339e098fd2..ee854498a5ec4a 100644 --- a/docs/pages/api-docs/list-item-text.md +++ b/docs/pages/api-docs/list-item-text.md @@ -24,7 +24,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | Alias for the `primary` property. | +| children | node | | Alias for the `primary` prop. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | disableTypography | bool | false | If `true`, the children won't be wrapped by a Typography component. This can be useful to render an alternative Typography variant by wrapping the `children` (or `primary`) text, and optional `secondary` text with the Typography component. | | inset | bool | false | If `true`, the children will be indented. This should be used if there is no left avatar or left icon. | diff --git a/docs/pages/company/software-engineer.js b/docs/pages/company/software-engineer.js deleted file mode 100644 index 8a2d172c56f5b2..00000000000000 --- a/docs/pages/company/software-engineer.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import TopLayoutCompany from 'docs/src/modules/components/TopLayoutCompany'; - -const req = require.context('docs/src/pages/company/software-engineer', false, /\.(md|js|tsx)$/); -const reqSource = require.context( - '!raw-loader!../../src/pages/company/software-engineer', - false, - /\.(js|tsx)$/, -); -const reqPrefix = 'pages/company/software-engineer'; - -export default function Page() { - return ; -} diff --git a/docs/src/modules/components/AppContainer.js b/docs/src/modules/components/AppContainer.js index 653197e47f6c16..46cda5318851da 100644 --- a/docs/src/modules/components/AppContainer.js +++ b/docs/src/modules/components/AppContainer.js @@ -4,11 +4,15 @@ import clsx from 'clsx'; import { makeStyles } from '@material-ui/core/styles'; import Container from '@material-ui/core/Container'; -const useStyles = makeStyles({ +const useStyles = makeStyles((theme) => ({ root: { paddingTop: 80 + 16, + [theme.breakpoints.up('lg')]: { + paddingLeft: theme.spacing(5), + paddingRight: theme.spacing(5), + }, }, -}); +})); export default function AppContainer(props) { const { className, ...other } = props; diff --git a/docs/src/modules/components/AppFooter.js b/docs/src/modules/components/AppFooter.js index 0eb49aa9b347cc..a973d0b6a3b010 100644 --- a/docs/src/modules/components/AppFooter.js +++ b/docs/src/modules/components/AppFooter.js @@ -140,11 +140,13 @@ function AppFooter(props) { Contact Us + {/*
  • Jobs
  • + */} diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js index fa912f3064b7d1..7767ef75e40fcc 100644 --- a/docs/src/modules/components/AppSearch.js +++ b/docs/src/modules/components/AppSearch.js @@ -117,6 +117,7 @@ export default function AppSearch() { const inputRef = React.useRef(null); const theme = useTheme(); const userLanguage = useSelector((state) => state.options.userLanguage); + const t = useSelector((state) => state.options.t); React.useEffect(() => { const styleNode = loadCSS( @@ -219,9 +220,9 @@ export default function AppSearch() { ({ }, }, '& code': { + lineHeight: 1.4, display: 'inline-block', fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace', WebkitFontSmoothing: 'subpixel-antialiased', - padding: '2px 6px', + padding: '0 3px', color: theme.palette.text.primary, backgroundColor: - theme.palette.type === 'light' ? 'rgba(255, 229, 100, 0.1)' : 'rgba(255, 229, 100, 0.2)', + theme.palette.type === 'light' ? 'rgba(255, 229, 100, 0.2)' : 'rgba(255, 229, 100, 0.2)', fontSize: 14, borderRadius: 2, }, diff --git a/docs/src/pages/company/jobs/jobs.md b/docs/src/pages/company/jobs/jobs.md index 24a86f58256776..4bc08b3a11267f 100644 --- a/docs/src/pages/company/jobs/jobs.md +++ b/docs/src/pages/company/jobs/jobs.md @@ -2,5 +2,5 @@

    Join our team!

    -- [Senior Software Engineer](/company/software-engineer/) • Remote
    - We are looking for a software engineer to help support our open source team, assist the Material-UI community and grow our premium products. Join us in our mission to make React application development fun by making it simple. + diff --git a/docs/src/pages/components/modal/SimpleModal.js b/docs/src/pages/components/modal/SimpleModal.js index 979c97def724f2..fe15755412eeda 100644 --- a/docs/src/pages/components/modal/SimpleModal.js +++ b/docs/src/pages/components/modal/SimpleModal.js @@ -42,24 +42,28 @@ export default function SimpleModal() { setOpen(false); }; + const body = ( +
    +

    Text in a modal

    +

    + Duis mollis, est non commodo luctus, nisi erat porttitor ligula. +

    + +
    + ); + return (
    -
    -

    Text in a modal

    -

    - Duis mollis, est non commodo luctus, nisi erat porttitor ligula. -

    - -
    + {body}
    ); diff --git a/docs/src/pages/components/modal/SimpleModal.tsx b/docs/src/pages/components/modal/SimpleModal.tsx index 3d33d45e676ab1..fb3560c11b2b76 100644 --- a/docs/src/pages/components/modal/SimpleModal.tsx +++ b/docs/src/pages/components/modal/SimpleModal.tsx @@ -44,24 +44,28 @@ export default function SimpleModal() { setOpen(false); }; + const body = ( +
    +

    Text in a modal

    +

    + Duis mollis, est non commodo luctus, nisi erat porttitor ligula. +

    + +
    + ); + return (
    -
    -

    Text in a modal

    -

    - Duis mollis, est non commodo luctus, nisi erat porttitor ligula. -

    - -
    + {body}
    ); diff --git a/docs/src/pages/landing/Quotes.js b/docs/src/pages/landing/Quotes.js index ff7ca81825f6ff..50c1848408f5d0 100644 --- a/docs/src/pages/landing/Quotes.js +++ b/docs/src/pages/landing/Quotes.js @@ -24,7 +24,7 @@ const quotes = [ 'Material-UI continues to blow my mind how easily I can put together really aesthetic and functional components and minimize overhead.', }, { - avatar: 'https://pbs.twimg.com/profile_images/1169043984561389568/pEdFvVIW_400x400.jpg', + avatar: 'https://pbs.twimg.com/profile_images/1231452795368329216/GhjrxYH2_400x400.jpg', name: 'Derek Shanks', username: '@fragileglass', tweet: 'https://twitter.com/fragileglass/status/1205256087290753025', @@ -129,8 +129,8 @@ const QuoteLink = React.forwardRef((props, ref) => { data-ga-event-label="home-link" target="_blank" rel="noopener nofollow" - naked ref={ref} + underline="none" {...props} /> ); diff --git a/docs/translations/translations.json b/docs/translations/translations.json index e03e9a6ef51e89..a0712421d8fd49 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -1,98 +1,99 @@ { - "homeQuickWord": "A quick word from our sponsors:", - "helpToTranslate": "Help to translate", - "editWebsiteColors": "Edit website colors", - "useDarkTheme": "Use dark theme", - "toggleTheme": "Toggle light/dark theme", - "toggleRTL": "Toggle right-to-left/left-to-right", - "toggleNotifications": "Toggle notifications panel", - "github": "GitHub repository", - "strapline": "React components for faster and easier web development. Build your own design system, or start with Material Design.", - "getStarted": "Get Started", - "installation": "Installation", - "installDescr": "Install Material-UI's source files via npm. We take care of injecting the CSS needed.", - "cdn": "or use a CDN.", - "loadFont": "Load the default Roboto font.", - "installButton": "Read installation docs", - "usage": "Usage", - "usageDescr": "Material-UI components work without any additional setup, and don't pollute the global scope.", - "usageButton": "Explore the docs", - "themes": "Premium themes", - "themesDescr": "Take your project to the next level with premium themes from our store – all built on Material-UI.", - "themesButton": "Browse themes", - "whosUsing": "Who's using Material-UI?", - "joinThese": "Join these and other great organisations!", - "usingMui": "Are you using Material-UI?", - "letUsKnow": "Let us know!", - "praise": "Praise for Material-UI", - "praiseDescr": "Here's what some of our users are saying.", - "footerCommunity": "Community", - "footerResources": "Resources", - "footerCompany": "Company", - "homeFooterRelease": "Currently {{versionNumber}}. Released under the {{license}}.", - "license": "MIT License", - "likeMui": "Help us keep running", "adblock": "If you don't mind tech related ads (no tracking or remarketing), and want to keep us running, please whitelist Material-UI in your blocker.", - "thanks": "Thank you!", - "editPage": "Edit this page", - "tableOfContents": "Contents", - "sourceCode": "Source code", - "traffic": "Traffic", - "newest": "Newest", - "stars": "GitHub stars", - "visit": "Visit the website", - "dashboardTitle": "Dashboard", - "dashboardDescr": "A minimal dashboard with taskbar and mini variant draw. The chart is courtesy of Recharts, but it is simple to substitute an alternative.", - "signInTitle": "Sign In", - "signInDescr": "A simple Sign In page.", - "signInSideTitle": "Sign-in side", - "signInSideDescr": "A simple Sign In side page.", - "signUpTitle": "Sign Up", - "signUpDescr": "A simple Sign Up page.", - "blogTitle": "Blog", + "albumDescr": "A responsive album / gallery page layout with a hero unit and footer.", + "albumTitle": "Album", + "algoliaSearch": "Search", "blogDescr": "A sophisticated blog page layout. Markdown support is courtesy of markdown-to-jsx but is easily replaced.", - "checkoutTitle": "Checkout", + "blogTitle": "Blog", + "cdn": "or use a CDN.", + "changeLanguage": "Change language", "checkoutDescr": "A step-by-step checkout page layout. Adapt the number of steps to suit your needs, or make steps optional.", - "albumTitle": "Album", - "albumDescr": "A responsive album / gallery page layout with a hero unit and footer.", - "pricingTitle": "Pricing", - "pricingDescr": "Quickly build an effective pricing table for your potential customers with this page layout.", - "stickyFooterTitle": "Sticky footer", - "stickyFooterDescr": "Attach a footer to the bottom of the viewport when page content is short.", - "expandAll": "Expand all", - "showSource": "Show the source", - "hideSource": "Hide the source", - "showFullSource": "Show the full source", - "hideFullSource": "Hide the full source", - "viewGitHub": "View the source on GitHub", + "checkoutTitle": "Checkout", + "close": "Close", "codesandbox": "Edit in CodeSandbox", - "seeMore": "See more", - "copySource": "Copy the source", "copiedSource": "The source code has been copied.", + "copiedSourceLink": "Link to the source code has been copied.", + "copySource": "Copy the source", "copySourceLinkJS": "Copy link to JavaScript source", "copySourceLinkTS": "Copy link to TypeScript source", - "copiedSourceLink": "Link to the source code has been copied.", - "stackblitz": "Edit in StackBlitz (JS only)", - "headTitle": "Material-UI: A popular React UI framework", + "dashboardDescr": "A minimal dashboard with taskbar and mini variant draw. The chart is courtesy of Recharts, but it is simple to substitute an alternative.", + "dashboardTitle": "Dashboard", + "decreaseSpacing": "decrease spacing", + "demoToolbarLabel": "demo source", + "diamondSponsors": "Diamond Sponsors", + "editPage": "Edit this page", + "editWebsiteColors": "Edit website colors", "emojiLove": "Love", "emoojiWarning": "Warning", + "expandAll": "Expand all", + "footerCommunity": "Community", + "footerCompany": "Company", + "footerResources": "Resources", + "getProfessionalSupport": "Get Professional Support", + "getStarted": "Get Started", + "github": "GitHub repository", + "headTitle": "Material-UI: A popular React UI framework", + "helpToTranslate": "Help to translate", + "hideFullSource": "Hide the full source", + "hideSource": "Hide the source", + "homeFooterRelease": "Currently {{versionNumber}}. Released under the {{license}}.", + "homeQuickWord": "A quick word from our sponsors:", + "increaseSpacing": "increase spacing", + "installation": "Installation", + "installButton": "Read installation docs", + "installDescr": "Install Material-UI's source files via npm. We take care of injecting the CSS needed.", + "joinThese": "Join these and other great organisations!", + "letUsKnow": "Let us know!", + "license": "MIT License", + "likeMui": "Help us keep running", + "loadFont": "Load the default Roboto font.", "mainNavigation": "Main navigation", - "skipToContent": "Skip to content", + "newest": "Newest", "openDrawer": "Open main navigation", - "changeLanguage": "Change language", "pageTOC": "Page table of contents", + "praise": "Praise for Material-UI", + "praiseDescr": "Here's what some of our users are saying.", + "pricingDescr": "Quickly build an effective pricing table for your potential customers with this page layout.", + "pricingTitle": "Pricing", + "resetDemo": "Reset demo", + "resetDensity": "Reset density", + "seeMore": "See more", + "showFullSource": "Show the full source", "showJSSource": "Show JavaScript source", + "showSource": "Show the source", "showTSSource": "Show TypeScript source", - "close": "Close", - "useHighDensity": "Apply higher density via props", + "signInDescr": "A simple Sign In page.", + "signInSideDescr": "A simple Sign In side page.", + "signInSideTitle": "Sign-in side", + "signInTitle": "Sign In", + "signUpDescr": "A simple Sign Up page.", + "signUpTitle": "Sign Up", + "skipToContent": "Skip to content", + "sourceCode": "Source code", "spacingUnit": "Spacing unit", - "resetDensity": "Reset density", - "increaseSpacing": "increase spacing", - "decreaseSpacing": "decrease spacing", - "getProfessionalSupport": "Get Professional Support", - "diamondSponsors": "Diamond Sponsors", - "demoToolbarLabel": "demo source", - "resetDemo": "Reset demo", + "stackblitz": "Edit in StackBlitz (JS only)", + "stars": "GitHub stars", + "stickyFooterDescr": "Attach a footer to the bottom of the viewport when page content is short.", + "stickyFooterTitle": "Sticky footer", + "strapline": "React components for faster and easier web development. Build your own design system, or start with Material Design.", + "tableOfContents": "Contents", + "thanks": "Thank you!", + "themes": "Premium themes", + "themesButton": "Browse themes", + "themesDescr": "Take your project to the next level with premium themes from our store – all built on Material-UI.", + "toggleNotifications": "Toggle notifications panel", + "toggleRTL": "Toggle right-to-left/left-to-right", + "toggleTheme": "Toggle light/dark theme", + "traffic": "Traffic", + "usage": "Usage", + "usageButton": "Explore the docs", + "usageDescr": "Material-UI components work without any additional setup, and don't pollute the global scope.", + "useDarkTheme": "Use dark theme", + "useHighDensity": "Apply higher density via props", + "usingMui": "Are you using Material-UI?", + "viewGitHub": "View the source on GitHub", + "visit": "Visit the website", + "whosUsing": "Who's using Material-UI?", "pages": { "/getting-started": "Getting Started", "/getting-started/installation": "Installation", diff --git a/packages/material-ui/src/ListItemText/ListItemText.d.ts b/packages/material-ui/src/ListItemText/ListItemText.d.ts index 9ea6fd3282b146..66edd98a7434af 100644 --- a/packages/material-ui/src/ListItemText/ListItemText.d.ts +++ b/packages/material-ui/src/ListItemText/ListItemText.d.ts @@ -7,7 +7,7 @@ export interface ListItemTextProps< SecondaryTypographyComponent extends React.ElementType = 'p' > extends StandardProps, ListItemTextClassKey> { /** - * Alias for the `primary` property. + * Alias for the `primary` prop. */ children?: React.ReactNode; /** diff --git a/packages/material-ui/src/ListItemText/ListItemText.js b/packages/material-ui/src/ListItemText/ListItemText.js index 244b7fabaf2d9c..dddc89481b4bc3 100644 --- a/packages/material-ui/src/ListItemText/ListItemText.js +++ b/packages/material-ui/src/ListItemText/ListItemText.js @@ -101,7 +101,7 @@ ListItemText.propTypes = { // | To update them edit the d.ts file and run "yarn proptypes" | // ---------------------------------------------------------------------- /** - * Alias for the `primary` property. + * Alias for the `primary` prop. */ children: PropTypes.node, /** diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.d.ts b/packages/material-ui/src/SvgIcon/SvgIcon.d.ts index 3497dd1c887144..2290bbd4a7bb44 100644 --- a/packages/material-ui/src/SvgIcon/SvgIcon.d.ts +++ b/packages/material-ui/src/SvgIcon/SvgIcon.d.ts @@ -23,7 +23,7 @@ export interface SvgIconTypeMap

    { /** * The shape-rendering attribute. The behavior of the different options is described on the * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering). - * If you are having issues with blurry icons you should investigate this property. + * If you are having issues with blurry icons you should investigate this prop. * @document */ shapeRendering?: string; diff --git a/packages/material-ui/src/styles/createPalette.spec.ts b/packages/material-ui/src/styles/createPalette.spec.ts index 45779b5112a974..2e67fb7e97280d 100644 --- a/packages/material-ui/src/styles/createPalette.spec.ts +++ b/packages/material-ui/src/styles/createPalette.spec.ts @@ -1,14 +1,14 @@ import { Color } from '@material-ui/core'; import { blue, common } from '@material-ui/core/colors'; import { - createPalette, + createMuiTheme, PaletteColorOptions, SimplePaletteColorOptions, Theme, } from '@material-ui/core/styles'; { - const palette = createPalette({}); + const palette = createMuiTheme().palette; const color: Color = blue; const option: SimplePaletteColorOptions = { main: blue[400] }; const colorOrOption: PaletteColorOptions = undefined as any; diff --git a/packages/material-ui/src/styles/index.d.ts b/packages/material-ui/src/styles/index.d.ts index febaa62123e73c..7414c1adc8c6c0 100644 --- a/packages/material-ui/src/styles/index.d.ts +++ b/packages/material-ui/src/styles/index.d.ts @@ -1,10 +1,6 @@ export * from './colorManipulator'; export { default as createMuiTheme, ThemeOptions, Theme, Direction } from './createMuiTheme'; -export { - default as createPalette, - PaletteColorOptions, - SimplePaletteColorOptions, -} from './createPalette'; +export { PaletteColorOptions, SimplePaletteColorOptions } from './createPalette'; export { default as createStyles } from './createStyles'; export { TypographyStyle, Variant as TypographyVariant } from './createTypography'; export { default as makeStyles } from './makeStyles';