Improve input mask UX and a11y (#1661)

* Add jest debug configuration * Move jest config to separate file * Change input mask generation logic * Use new geFormatHelperText date-io method to generate helper text and placeholder * Update @date-io/jalaali and @date-io/hijiri * [docs] Update component demo titles * Fix mask input issues and update e2e tests * Optimize new masked input for date range picker * Remove meaningless comment * Update component based tests * Use auto injecting dependencies for hooks * Remove maskChar prop * Again remove `date` from the useEffect dependency in usePickerState * Make keyboard input isFocused mutable ref instead of state
mui · Apr 21, 2020 · b223777 · b223777 · vercel · Apr 21, 2020
1 parent 1c011a4
commit b223777
Show file tree

Hide file tree

Showing 22 changed files with 427 additions and 358 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -4,6 +4,19 @@
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Jest Current File",
+      "program": "${workspaceFolder}/lib/node_modules/.bin/jest",
+      "args": ["--config", "${workspaceFolder}/lib/jest.config.js", "${fileBasenameNoExtension}"],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "disableOptimisticBPs": true,
+      "windows": {
+        "program": "${workspaceFolder}/lib/node_modules/jest/bin/jest"
+      }
+    },
     {
       "type": "chrome",
       "request": "launch",

diff --git a/docs/package.json b/docs/package.json
@@ -18,8 +18,8 @@
   },
   "dependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.9.0",
-    "@date-io/hijri": "^2.2.0",
-    "@date-io/jalaali": "^2.0.0",
+    "@date-io/hijri": "^2.6.0",
+    "@date-io/jalaali": "^2.6.0",
     "@mapbox/rehype-prism": "^0.4.0",
     "@material-ui/core": "^4.9.9",
     "@material-ui/icons": "^4.9.1",

diff --git a/docs/pages/demo/datepicker/index.mdx b/docs/pages/demo/datepicker/index.mdx
@@ -12,7 +12,7 @@ import * as StaticDatePicker from './StaticDatePicker.example';
 import * as DatePickers from './DatePickers.example';
 import * as AdvancedKeyboard from './AdvancedKeyboard.example';
 
-<PageMeta component="Datepicker" />
+<PageMeta component="DatePicker" />
 
 ## Date picker
 

diff --git a/docs/pages/demo/daterangepicker/index.mdx b/docs/pages/demo/daterangepicker/index.mdx
@@ -10,7 +10,7 @@ import * as MinMaxDateRangePicker from './MinMaxDateRangePicker.example';
 import * as CalendarsDateRangePicker from './CalendarsDateRangePicker.example';
 import * as StaticDateRangePicker from './StaticDateRangePicker.example';
 
-<PageMeta component="Datepicker" />
+<PageMeta component="DateRangePicker" />
 
 ## Date picker
 

diff --git a/docs/pages/demo/datetime-picker/index.mdx b/docs/pages/demo/datetime-picker/index.mdx
@@ -8,7 +8,7 @@ import * as DateTimePickers from './DateTimePickers.example';
 import * as CustomDateTimePicker from './CustomDateTimePicker.example';
 import * as DateTimeValidation from './DateTimeValidation.example';
 
-<PageMeta component="Date & Time picker" />
+<PageMeta component="DateTimePicker" />
 
 ## Date & Time picker
 

diff --git a/docs/pages/demo/timepicker/index.mdx b/docs/pages/demo/timepicker/index.mdx
@@ -10,7 +10,7 @@ import * as InlineTimePicker from './InlineTimePicker.example';
 import * as StaticTimePicker from './StaticTimePicker.example';
 import * as SecondsTimePicker from './SecondsTimePicker.example';
 
-<PageMeta component="Timepicker" />
+<PageMeta component="TimePicker" />
 
 ## Time Picker
 

diff --git a/docs/pages/localization/Date-fns.example.jsx b/docs/pages/localization/Date-fns.example.jsx
@@ -1,10 +1,9 @@
+import * as React from 'react';
 import frLocale from 'date-fns/locale/fr';
 import ruLocale from 'date-fns/locale/ru';
 import enLocale from 'date-fns/locale/en-US';
-import MoreIcon from '@material-ui/icons/MoreVert';
-import React, { useState, useCallback } from 'react';
 import DateFnsAdapter from '@material-ui/pickers/adapter/date-fns';
-import { IconButton, Menu, MenuItem } from '@material-ui/core';
+import { Button, ButtonGroup } from '@material-ui/core';
 import { DatePicker, LocalizationProvider } from '@material-ui/pickers';
 
 const localeMap = {
@@ -13,55 +12,31 @@ const localeMap = {
   ru: ruLocale,
 };
 
-function DateFnsLocalizationExample() {
-  const [locale, setLocale] = useState('ru');
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [selectedDate, handleDateChange] = useState(new Date());
+const maskMap = {
+  fr: '__/__/____',
+  en: '__/__/____',
+  ru: '__.__.____',
+};
 
-  const handleMenuOpen = useCallback(e => {
-    e.stopPropagation();
-    setAnchorEl(e.currentTarget);
-  }, []);
+function DateFnsLocalizationExample() {
+  const [locale, setLocale] = React.useState('ru');
+  const [selectedDate, handleDateChange] = React.useState(new Date());
 
-  const selectLocale = useCallback(locale => {
+  const selectLocale = React.useCallback(locale => {
     setLocale(locale);
-    setAnchorEl(null);
   }, []);
 
   return (
     <LocalizationProvider dateAdapter={DateFnsAdapter} locale={localeMap[locale]}>
-      <DatePicker
-        value={selectedDate}
-        onChange={handleDateChange}
-        InputProps={{
-          endAdornment: (
-            <IconButton
-              aria-label="Select locale"
-              onClick={handleMenuOpen}
-              aria-owns={anchorEl ? 'locale-menu' : undefined}
-            >
-              <MoreIcon />
-            </IconButton>
-          ),
-        }}
-      />
+      <DatePicker mask={maskMap[locale]} value={selectedDate} onChange={handleDateChange} />
 
-      <Menu
-        id="locale-menu"
-        anchorEl={anchorEl}
-        open={Boolean(anchorEl)}
-        onClose={() => setAnchorEl(null)}
-      >
+      <ButtonGroup>
         {Object.keys(localeMap).map(localeItem => (
-          <MenuItem
-            key={localeItem}
-            selected={localeItem === locale}
-            onClick={() => selectLocale(localeItem)}
-          >
+          <Button key={localeItem} onClick={() => selectLocale(localeItem)}>
             {localeItem}
-          </MenuItem>
+          </Button>
         ))}
-      </Menu>
+      </ButtonGroup>
     </LocalizationProvider>
   );
 }

diff --git a/docs/pages/localization/Moment.example.jsx b/docs/pages/localization/Moment.example.jsx
@@ -1,8 +1,7 @@
 import moment from 'moment';
-import MoreIcon from '@material-ui/icons/MoreVert';
 import React, { useState, useCallback } from 'react';
 import MomentAdapter from '@material-ui/pickers/adapter/moment';
-import { IconButton, Menu, MenuItem } from '@material-ui/core';
+import { Button, ButtonGroup } from '@material-ui/core';
 import { DatePicker, LocalizationProvider } from '@material-ui/pickers';
 import 'moment/locale/fr';
 import 'moment/locale/ru';
@@ -15,57 +14,37 @@ const localeMap = {
   ru: 'ru',
 };
 
+const maskMap = {
+  fr: '__/__/____',
+  en: '__/__/____',
+  ru: '__.__.____',
+};
+
 function MomentLocalizationExample() {
   const [locale, setLocale] = useState('fr');
-  const [anchorEl, setAnchorEl] = useState(null);
   const [selectedDate, handleDateChange] = useState(new Date());
 
-  const handleMenuOpen = useCallback(e => {
-    e.stopPropagation();
-    setAnchorEl(e.currentTarget);
-  }, []);
-
   const selectLocale = useCallback(locale => {
     moment.locale(locale);
 
     setLocale(locale);
-    setAnchorEl(null);
   }, []);
 
   return (
     <LocalizationProvider dateLibInstance={moment} dateAdapter={MomentAdapter} locale={locale}>
       <DatePicker
+        mask={maskMap[locale]}
         value={selectedDate}
         onChange={date => handleDateChange(date)}
-        InputProps={{
-          endAdornment: (
-            <IconButton
-              aria-label="Select locale"
-              onClick={handleMenuOpen}
-              aria-owns={anchorEl ? 'locale-menu' : undefined}
-            >
-              <MoreIcon />
-            </IconButton>
-          ),
-        }}
       />
 
-      <Menu
-        id="locale-menu"
-        anchorEl={anchorEl}
-        open={Boolean(anchorEl)}
-        onClose={() => setAnchorEl(null)}
-      >
+      <ButtonGroup>
         {Object.keys(localeMap).map(localeItem => (
-          <MenuItem
-            key={localeItem}
-            selected={localeItem === locale}
-            onClick={() => selectLocale(localeItem)}
-          >
+          <Button key={localeItem} onClick={() => selectLocale(localeItem)}>
             {localeItem}
-          </MenuItem>
+          </Button>
         ))}
-      </Menu>
+      </ButtonGroup>
     </LocalizationProvider>
   );
 }

diff --git a/docs/prop-types.json b/docs/prop-types.json