From 42c32dcbf3ddab99bc06c55b86cafdfbe25704ac Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 28 Apr 2020 17:01:45 +0200 Subject: [PATCH 01/13] Close the developer survey --- docs/notifications.json | 6 ------ 1 file changed, 6 deletions(-) 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 From 16bdb64aa2121690be562b2343cde335749b29fb Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 28 Apr 2020 17:03:57 +0200 Subject: [PATCH 02/13] [l10n] Improve fr-FR value https://github.com/mui-org/material-ui/commit/9c053f85f0353cfc5ede1ce8cc0a87a618675277#r38650085 --- packages/material-ui/src/locale/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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}`; From 611a655d612a1ca675ade6508f64ea45cd83b4f6 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 28 Apr 2020 17:10:33 +0200 Subject: [PATCH 03/13] [docs] Automatically redirect pt to pt-BR The /pt/ is the most used locale used, it's also the most transalted, almost 100%. It seems safe to enable auto redirection for this locale. --- docs/pages/_app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 = []; From cea1d62775a6edce94740ac104c5177098ab8ccb Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 28 Apr 2020 17:14:36 +0200 Subject: [PATCH 04/13] [Autocomplete] Improve the heading structure freeSolo has two main use cases, make it explicit. --- docs/src/pages/components/autocomplete/autocomplete.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) 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"}} From a4ec7278c8e6b35182e8d882b8dd5b3f58079e01 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 28 Apr 2020 17:16:43 +0200 Subject: [PATCH 05/13] [core] Most of the time, we use aria-hidden as a boolean --- packages/material-ui/src/SvgIcon/SvgIcon.js | 2 +- packages/material-ui/src/SvgIcon/SvgIcon.test.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 e34d9ac6b55a8a..e68cfb5d2d799a 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}); assert.strictEqual(wrapper.contains(path), true); - assert.strictEqual(wrapper.props()['aria-hidden'], 'true'); + assert.strictEqual(wrapper.props()['aria-hidden'], true); }); describe('prop: titleAccess', () => { From a638ef8959f171662b903d76bc37a89f42b4c902 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 28 Apr 2020 17:20:06 +0200 Subject: [PATCH 06/13] [l10n] Fix dark mode support of the demo --- docs/src/pages/guides/localization/Locales.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/src/pages/guides/localization/Locales.tsx b/docs/src/pages/guides/localization/Locales.tsx index 1b449e17392ca2..46d7cc73eedb82 100644 --- a/docs/src/pages/guides/localization/Locales.tsx +++ b/docs/src/pages/guides/localization/Locales.tsx @@ -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)}> Date: Tue, 28 Apr 2020 17:29:41 +0200 Subject: [PATCH 07/13] [docs] Add a new introduction series of videos --- docs/src/pages/getting-started/learn/learn.md | 2 ++ 1 file changed, 2 insertions(+) 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. From bee571e0bbeea23fe5d6c7cd2e7f40d22eb4ad4e Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 28 Apr 2020 17:42:30 +0200 Subject: [PATCH 08/13] [docs] Warn about the a11y implication of changing htmlf ont size --- .../customization/typography/typography.md | 55 ++++++++++--------- 1 file changed, 29 insertions(+), 26 deletions(-) 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: From 3f0bed0e4285c9552a296231ea7d101db7e5516f Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 28 Apr 2020 17:48:48 +0200 Subject: [PATCH 09/13] [Autocomplete] Use useControlled instead of custom logic --- .../src/useAutocomplete/useAutocomplete.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js index fdd530a7907cdf..b22099b2a86e25 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js @@ -232,9 +232,12 @@ export default function useAutocomplete(props) { resetInputValue(null, value); }, [value, resetInputValue]); - const { current: isOpenControlled } = React.useRef(openProp != null); - const [openState, setOpenState] = React.useState(false); - const open = isOpenControlled ? openProp : openState; + const [open, setOpenState] = useControlled({ + controlled: openProp, + default: false, + name: componentName, + state: 'open', + }); const inputValueIsSelectedValue = !multiple && value != null && inputValue === getOptionLabel(value); @@ -461,12 +464,11 @@ export default function useAutocomplete(props) { return; } + setOpenState(true); + if (onOpen) { onOpen(event); } - if (!isOpenControlled) { - setOpenState(true); - } }; const handleClose = (event, reason) => { @@ -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) => { From 7e64043db789eddf61a2bb4334b6a6955a391449 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 28 Apr 2020 17:52:02 +0200 Subject: [PATCH 10/13] [docs] Fix centering of code on mobile --- docs/src/modules/components/MarkdownElement.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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', From 18bee68bd0e2caa5d27bc9552d7aef64a3ca06ad Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 28 Apr 2020 18:18:43 +0200 Subject: [PATCH 11/13] [docs] Display a loading state for notifications --- docs/src/modules/components/Notifications.js | 120 +++++++++++-------- 1 file changed, 71 insertions(+), 49 deletions(-) diff --git a/docs/src/modules/components/Notifications.js b/docs/src/modules/components/Notifications.js index 81e6d0a40fbd67..f7aa2c9c852fd9 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,6 +33,11 @@ const useStyles = makeStyles((theme) => ({ display: 'flex', flexDirection: 'column', }, + loading: { + display: 'flex', + justifyContent: 'center', + margin: theme.spacing(1, 0), + }, divider: { margin: theme.spacing(1, 0), }, @@ -53,34 +59,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) { + dispatch({ + type: ACTION_TYPES.NOTIFICATIONS_CHANGE, + payload: { + lastSeen: messageList[0].id, + }, + }); + document.cookie = `lastSeenNotification=${messageList[0].id};path=/;max-age=31536000`; + } }; React.useEffect(() => { @@ -142,7 +148,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 +181,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} + + )) + ) : ( +
+ +
+ )} From c517ab82c71dabe7aecc8fe957fff1c6fb47365e Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 28 Apr 2020 18:43:15 +0200 Subject: [PATCH 12/13] fix ci --- docs/src/pages/guides/localization/Locales.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) 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)}> Date: Wed, 29 Apr 2020 10:52:24 +0200 Subject: [PATCH 13/13] Josh review --- docs/src/modules/components/Notifications.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/docs/src/modules/components/Notifications.js b/docs/src/modules/components/Notifications.js index f7aa2c9c852fd9..4213cae30b39cc 100644 --- a/docs/src/modules/components/Notifications.js +++ b/docs/src/modules/components/Notifications.js @@ -43,11 +43,6 @@ const useStyles = makeStyles((theme) => ({ }, })); -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); @@ -78,7 +73,7 @@ export default function Notifications() { setOpen((prevOpen) => !prevOpen); setTooltipOpen(false); - if (messageList) { + if (messageList && messageList.length > 0) { dispatch({ type: ACTION_TYPES.NOTIFICATIONS_CHANGE, payload: { @@ -110,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, }, }); }