diff --git a/docs/notifications.json b/docs/notifications.json index 335bfaa7fdab3e..5fe5605e7b926a 100644 --- a/docs/notifications.json +++ b/docs/notifications.json @@ -14,11 +14,5 @@ "date": "2020-03-30", "title": "Sketch", "text": "Introducing Material-UI for Sketch. Today, we’re excited to introduce the Sketch symbols 💎 for Material-UI." - }, - { - "id": 50, - "date": "2020-04-07", - "title": "Developer Survey", - "text": "Help shape the future of Material-UI.
🙏Please fill the survey." } ] \ No newline at end of file diff --git a/docs/pages/_app.js b/docs/pages/_app.js index 076a6f61277372..28ef7b26a945a1 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -37,7 +37,7 @@ function useFirstRender() { return firstRenderRef.current; } -acceptLanguage.languages(['en', 'zh']); +acceptLanguage.languages(['en', 'zh', 'pt']); function loadCrowdin() { window._jipt = []; diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index 08234a31f43cce..856a91dc7c2df4 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -13,7 +13,7 @@ const styles = (theme) => ({ position: 'absolute', }, '& pre': { - margin: theme.spacing(3, 0), + margin: theme.spacing(3, 'auto'), padding: theme.spacing(2), backgroundColor: '#272c34', direction: 'ltr', diff --git a/docs/src/modules/components/Notifications.js b/docs/src/modules/components/Notifications.js index 81e6d0a40fbd67..4213cae30b39cc 100644 --- a/docs/src/modules/components/Notifications.js +++ b/docs/src/modules/components/Notifications.js @@ -5,6 +5,7 @@ import { useSelector, useDispatch } from 'react-redux'; import { makeStyles } from '@material-ui/core/styles'; import NotificationsIcon from '@material-ui/icons/Notifications'; import Tooltip from '@material-ui/core/Tooltip'; +import CircularProgress from '@material-ui/core/CircularProgress'; import IconButton from '@material-ui/core/IconButton'; import Badge from '@material-ui/core/Badge'; import Typography from '@material-ui/core/Typography'; @@ -32,16 +33,16 @@ const useStyles = makeStyles((theme) => ({ display: 'flex', flexDirection: 'column', }, + loading: { + display: 'flex', + justifyContent: 'center', + margin: theme.spacing(1, 0), + }, divider: { margin: theme.spacing(1, 0), }, })); -function getLastSeenNotification() { - const seen = getCookie('lastSeenNotification'); - return seen === '' ? 0 : parseInt(seen, 10); -} - export default function Notifications() { const classes = useStyles(); const [open, setOpen] = React.useState(false); @@ -53,34 +54,34 @@ export default function Notifications() { const messages = useSelector((state) => state.notifications.messages); const lastSeen = useSelector((state) => state.notifications.lastSeen); - const messageList = (messages || []) - .filter((message) => { - if ( - message.userLanguage && - message.userLanguage !== userLanguage && - message.userLanguage !== navigator.language.substring(0, 2) - ) { - return false; - } - return true; - }) - .reverse(); - - const unseenNotificationsCount = messageList.reduce( - (count, message) => (message.id > lastSeen ? count + 1 : count), - 0, - ); + const messageList = messages + ? messages + .filter((message) => { + if ( + message.userLanguage && + message.userLanguage !== userLanguage && + message.userLanguage !== navigator.language.substring(0, 2) + ) { + return false; + } + return true; + }) + .reverse() + : null; const handleToggle = () => { setOpen((prevOpen) => !prevOpen); setTooltipOpen(false); - dispatch({ - type: ACTION_TYPES.NOTIFICATIONS_CHANGE, - payload: { - lastSeen: messageList[0].id, - }, - }); - document.cookie = `lastSeenNotification=${messageList[0].id};path=/;max-age=31536000`; + + if (messageList && messageList.length > 0) { + dispatch({ + type: ACTION_TYPES.NOTIFICATIONS_CHANGE, + payload: { + lastSeen: messageList[0].id, + }, + }); + document.cookie = `lastSeenNotification=${messageList[0].id};path=/;max-age=31536000`; + } }; React.useEffect(() => { @@ -104,11 +105,14 @@ export default function Notifications() { } if (active) { + const seen = getCookie('lastSeenNotification'); + const lastSeenNotification = seen === '' ? 0 : parseInt(seen, 10); + dispatch({ type: ACTION_TYPES.NOTIFICATIONS_CHANGE, payload: { messages: newMessages || [], - lastSeen: getLastSeenNotification(), + lastSeen: lastSeenNotification, }, }); } @@ -142,7 +146,17 @@ export default function Notifications() { data-ga-event-category="AppBar" data-ga-event-action="toggleNotifications" > - + (message.id > lastSeen ? count + 1 : count), + 0, + ) + : 0 + } + > @@ -165,31 +179,37 @@ export default function Notifications() { - {messageList.map((message, index) => ( - - - {message.title} - - - - {message.date && ( - - {new Date(message.date).toLocaleDateString('en-US', { - year: 'numeric', - month: 'long', - day: 'numeric', - })} + {messageList ? ( + messageList.map((message, index) => ( + + + {message.title} + + - )} - - {index < messageList.length - 1 ? ( - - ) : null} - - ))} + {message.date && ( + + {new Date(message.date).toLocaleDateString('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric', + })} + + )} + + {index < messageList.length - 1 ? ( + + ) : null} + + )) + ) : ( +
+ +
+ )} diff --git a/docs/src/pages/components/autocomplete/autocomplete.md b/docs/src/pages/components/autocomplete/autocomplete.md index d3c3e81eaa4247..eb2cad636ac88c 100644 --- a/docs/src/pages/components/autocomplete/autocomplete.md +++ b/docs/src/pages/components/autocomplete/autocomplete.md @@ -45,7 +45,11 @@ The component has two states that can be controlled: ## Free solo -Set `freeSolo` to true so the textbox can contain any arbitrary value. The prop is designed to cover the primary use case of a **search box** with suggestions, e.g. Google search or react-autowhatever. +Set `freeSolo` to true so the textbox can contain any arbitrary value. + +### Search input + +The prop is designed to cover the primary use case of a **search input** with suggestions, e.g. Google search or react-autowhatever. {{"demo": "pages/components/autocomplete/FreeSolo.js"}} diff --git a/docs/src/pages/customization/typography/typography.md b/docs/src/pages/customization/typography/typography.md index ef19e6a2217d70..ca1a12381341ff 100644 --- a/docs/src/pages/customization/typography/typography.md +++ b/docs/src/pages/customization/typography/typography.md @@ -106,32 +106,6 @@ The computed font size by the browser follows this mathematical equation: -### HTML font size - -You might want to change the `` element default font size. For instance, when using the [10px simplification](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/). -An `htmlFontSize` theme property is provided for this use case, -which tells Material-UI what the font-size on the `` element is. -This is used to adjust the `rem` value so the calculated font-size always match the specification. - -```js -const theme = createMuiTheme({ - typography: { - // Tell Material-UI what's the font-size on the html element is. - htmlFontSize: 10, - }, -}); -``` - -```css -html { - font-size: 62.5%; /* 62.5% of 16px = 10px */ -} -``` - -_You need to apply the above CSS on the html element of this page to see the below demo rendered correctly_ - -{{"demo": "pages/customization/typography/FontSizeTheme.js"}} - ### Responsive font sizes The typography variants properties map directly to the generated CSS. @@ -172,6 +146,35 @@ theme = responsiveFontSizes(theme); To be done: [#15251](https://github.com/mui-org/material-ui/issues/15251). +### HTML font size + +You might want to change the `` element default font size. For instance, when using the [10px simplification](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/). + +> ⚠️ Changing the font size can harm accessibility ♿️. Most browsers agreed on the default size of 16 pixels, but the user can change it. For instance, someone with an impaired vision could have set their browser’s default font size to something larger. + +An `htmlFontSize` theme property is provided for this use case, +which tells Material-UI what the font-size on the `` element is. +This is used to adjust the `rem` value so the calculated font-size always match the specification. + +```js +const theme = createMuiTheme({ + typography: { + // Tell Material-UI what's the font-size on the html element is. + htmlFontSize: 10, + }, +}); +``` + +```css +html { + font-size: 62.5%; /* 62.5% of 16px = 10px */ +} +``` + +*You need to apply the above CSS on the html element of this page to see the below demo rendered correctly* + +{{"demo": "pages/customization/typography/FontSizeTheme.js"}} + ## Variants The typography object comes with [13 variants](/components/typography/#component) by default: diff --git a/docs/src/pages/getting-started/learn/learn.md b/docs/src/pages/getting-started/learn/learn.md index 6919b2278e8cb5..40c5cabbcad695 100644 --- a/docs/src/pages/getting-started/learn/learn.md +++ b/docs/src/pages/getting-started/learn/learn.md @@ -25,6 +25,8 @@ Here are some recommended resources, some of which are free. ### Free +- **Introduction to Material-UI**: a series of videos covering all the important Material-UI components. + - 📹 [The videos](https://www.youtube.com/watch?v=pHclLuRolzE&list=PLQg6GaokU5CwiVmsZ0d_9Zsg_DnIP_xwr) - **Meet Material-UI — your new favorite user interface library**: a blog post that guides you in building a Todo MVC while covering some important concepts of Material-UI. - 📝 [The blog post](https://medium.freecodecamp.org/meet-your-material-ui-your-new-favorite-user-interface-library-6349a1c88a8c) - **Learn React & Material-UI**: a series of videos covering all the important Material-UI components. diff --git a/docs/src/pages/guides/localization/Locales.js b/docs/src/pages/guides/localization/Locales.js index 1b449e17392ca2..46d7cc73eedb82 100644 --- a/docs/src/pages/guides/localization/Locales.js +++ b/docs/src/pages/guides/localization/Locales.js @@ -6,12 +6,10 @@ import TextField from '@material-ui/core/TextField'; import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; import { zhCN } from '@material-ui/core/locale'; -const theme = createMuiTheme({}, zhCN); - export default function Locales() { return (
- + createMuiTheme(outerTheme, zhCN)}> - + createMuiTheme(outerTheme, zhCN)}> { @@ -474,12 +476,11 @@ export default function useAutocomplete(props) { return; } + setOpenState(false); + if (onClose) { onClose(event, reason); } - if (!isOpenControlled) { - setOpenState(false); - } }; const handleValue = (event, newValue, reason, details) => { diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.js b/packages/material-ui/src/SvgIcon/SvgIcon.js index 77603b055cd03f..2b46a6be3f23ba 100644 --- a/packages/material-ui/src/SvgIcon/SvgIcon.js +++ b/packages/material-ui/src/SvgIcon/SvgIcon.js @@ -79,7 +79,7 @@ const SvgIcon = React.forwardRef(function SvgIcon(props, ref) { focusable="false" viewBox={viewBox} color={htmlColor} - aria-hidden={titleAccess ? undefined : 'true'} + aria-hidden={titleAccess ? undefined : true} role={titleAccess ? 'img' : undefined} ref={ref} {...other} diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.test.js b/packages/material-ui/src/SvgIcon/SvgIcon.test.js index 3b24b7aa534483..a5c41a42974a53 100644 --- a/packages/material-ui/src/SvgIcon/SvgIcon.test.js +++ b/packages/material-ui/src/SvgIcon/SvgIcon.test.js @@ -47,7 +47,7 @@ describe('', () => { it('renders children by default', () => { const wrapper = shallow({path}); expect(wrapper.contains(path)).to.equal(true); - expect(wrapper.props()['aria-hidden']).to.equal('true'); + expect(wrapper.props()['aria-hidden']).to.equal(true); }); describe('prop: titleAccess', () => { diff --git a/packages/material-ui/src/locale/index.ts b/packages/material-ui/src/locale/index.ts index 589904d6b07d47..294f692f1d4aef 100644 --- a/packages/material-ui/src/locale/index.ts +++ b/packages/material-ui/src/locale/index.ts @@ -571,7 +571,7 @@ export const frFR: Localization = { closeText: 'Fermer', }, MuiPagination: { - 'aria-label': 'pagination navigation', + 'aria-label': 'navigation de pagination', getItemAriaLabel: (type, page, selected) => { if (type === 'page') { return `${selected ? '' : 'Aller à la '}page ${page}`;