[Tooltip] Rework the implementation

mui · Jul 8, 2018 · 8bfb2df · 8bfb2df
1 parent 3adacc8
commit 8bfb2df
Show file tree

Hide file tree

Showing 104 changed files with 1,933 additions and 885 deletions.
diff --git a/.size-limit.js b/.size-limit.js
@@ -27,13 +27,13 @@ module.exports = [
     name: 'The size of all the modules of material-ui.',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '95.3 KB',
+    limit: '94.3 KB',
   },
   {
     name: 'The main bundle of the docs',
     webpack: false,
     path: getMainFile().path,
-    limit: '177.1 KB',
+    limit: '175 KB',
   },
   {
     name: 'The home page of the docs',

diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -133,7 +133,7 @@ class AppFrame extends React.Component {
           <Toolbar>
             <IconButton
               color="inherit"
-              aria-label="open drawer"
+              aria-label="Open drawer"
               onClick={this.handleDrawerOpen}
               className={navIconClassName}
             >
@@ -146,24 +146,20 @@ class AppFrame extends React.Component {
             )}
             <div className={classes.grow} />
             <AppSearch />
-            <Tooltip id="appbar-theme" title="Toggle light/dark theme" enterDelay={300}>
+            <Tooltip title="Toggle light/dark theme" enterDelay={300}>
               <IconButton
                 color="inherit"
                 onClick={this.handleTogglePaletteType}
-                aria-labelledby="appbar-theme"
+                aria-label="Toggle light/dark theme"
               >
                 {uiTheme.paletteType === 'light' ? <LightbulbOutlineIcon /> : <LightbulbFullIcon />}
               </IconButton>
             </Tooltip>
-            <Tooltip
-              id="appbar-direction"
-              title="Toggle right-to-left/left-to-right"
-              enterDelay={300}
-            >
+            <Tooltip title="Toggle right-to-left/left-to-right" enterDelay={300}>
               <IconButton
                 color="inherit"
                 onClick={this.handleToggleDirection}
-                aria-labelledby="appbar-direction"
+                aria-label="Toggle right-to-left/left-to-right"
               >
                 {uiTheme.direction === 'rtl' ? (
                   <FormatTextdirectionLToR />
@@ -172,12 +168,12 @@ class AppFrame extends React.Component {
                 )}
               </IconButton>
             </Tooltip>
-            <Tooltip id="appbar-github" title="GitHub repository" enterDelay={300}>
+            <Tooltip title="GitHub repository" enterDelay={300}>
               <IconButton
                 component="a"
                 color="inherit"
                 href="https://github.com/mui-org/material-ui"
-                aria-labelledby="appbar-github"
+                aria-label="GitHub repository"
               >
                 <GithubIcon />
               </IconButton>

diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -97,7 +97,6 @@ const styles = theme => ({
     [theme.breakpoints.up('sm')]: {
       display: 'flex',
       flip: false,
-      zIndex: 10,
       position: 'absolute',
       top: 0,
       right: theme.spacing.unit,
@@ -207,37 +206,22 @@ class Demo extends React.Component {
         {demoOptions.hideHeader ? null : (
           <div>
             <div className={classes.header}>
-              <Tooltip id={`demo-github-${index}`} title="See the source on GitHub" placement="top">
-                <IconButton
-                  href={githubLocation}
-                  target="_blank"
-                  aria-labelledby={`demo-github-${index}`}
-                >
+              <Tooltip title="See the source on GitHub" placement="top">
+                <IconButton href={githubLocation} target="_blank" aria-label="GitHub">
                   <Github />
                 </IconButton>
               </Tooltip>
               {demoOptions.hideEditButton ? null : (
-                <Tooltip
-                  id={`demo-codesandbox-${index}`}
-                  title="Edit in CodeSandbox"
-                  placement="top"
-                >
-                  <IconButton
-                    onClick={this.handleClickCodeSandbox}
-                    aria-labelledby={`demo-codesandbox-${index}`}
-                  >
+                <Tooltip title="Edit in CodeSandbox" placement="top">
+                  <IconButton onClick={this.handleClickCodeSandbox} aria-label="CodeSandbox">
                     <EditIcon />
                   </IconButton>
                 </Tooltip>
               )}
-              <Tooltip
-                id={`demo-source-${index}`}
-                title={codeOpen ? 'Hide the source' : 'Show the source'}
-                placement="top"
-              >
+              <Tooltip title={codeOpen ? 'Hide the source' : 'Show the source'} placement="top">
                 <IconButton
                   onClick={this.handleClickCodeOpen}
-                  aria-labelledby={`demo-source-${index}`}
+                  aria-label={`Source of demo n°${index}`}
                 >
                   <CodeIcon />
                 </IconButton>

diff --git a/docs/src/modules/components/withRoot.js b/docs/src/modules/components/withRoot.js
@@ -87,10 +87,13 @@ const pages = [
     pathname: '/utils',
     children: [
       {
-        pathname: '/utils/modals',
+        pathname: '/utils/modal',
       },
       {
-        pathname: '/utils/popovers',
+        pathname: '/utils/popover',
+      },
+      {
+        pathname: '/utils/popper',
       },
       {
         pathname: '/utils/portal',

diff --git a/docs/src/pages/demos/autocomplete/IntegrationDownshift.js b/docs/src/pages/demos/autocomplete/IntegrationDownshift.js
@@ -4,6 +4,7 @@ import keycode from 'keycode';
 import Downshift from 'downshift';
 import { withStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
+import Popper from '@material-ui/core/Popper';
 import Paper from '@material-ui/core/Paper';
 import MenuItem from '@material-ui/core/MenuItem';
 import Chip from '@material-ui/core/Chip';
@@ -226,6 +227,8 @@ const styles = theme => ({
   },
 });
 
+let popperNode;
+
 function IntegrationDownshift(props) {
   const { classes } = props;
 
@@ -259,6 +262,36 @@ function IntegrationDownshift(props) {
         )}
       </Downshift>
       <DownshiftMultiple classes={classes} />
+      <Downshift>
+        {({ getInputProps, getItemProps, isOpen, inputValue, selectedItem, highlightedIndex }) => (
+          <div className={classes.container}>
+            {renderInput({
+              fullWidth: true,
+              classes,
+              InputProps: getInputProps({
+                placeholder: 'With Popper',
+                id: 'integration-downshift-popper',
+              }),
+              ref: node => {
+                popperNode = node;
+              },
+            })}
+            <Popper open={isOpen} anchorEl={popperNode}>
+              <Paper square style={{ width: popperNode ? popperNode.clientWidth : null }}>
+                {getSuggestions(inputValue).map((suggestion, index) =>
+                  renderSuggestion({
+                    suggestion,
+                    index,
+                    itemProps: getItemProps({ item: suggestion.label }),
+                    highlightedIndex,
+                    selectedItem,
+                  }),
+                )}
+              </Paper>
+            </Popper>
+          </div>
+        )}
+      </Downshift>
     </div>
   );
 }

diff --git a/docs/src/pages/demos/autocomplete/autocomplete.md b/docs/src/pages/demos/autocomplete/autocomplete.md
@@ -1,6 +1,6 @@
 ---
 title: Autocomplete React component
-components: TextField, Paper, MenuItem
+components: TextField, Paper, MenuItem, Popper
 ---
 
 # Autocomplete

diff --git a/docs/src/pages/demos/buttons/ButtonSizes.js b/docs/src/pages/demos/buttons/ButtonSizes.js
@@ -48,10 +48,10 @@ function ButtonSizes(props) {
         </Button>
       </div>
       <div>
-        <Button variant="fab" mini color="secondary" aria-label="add" className={classes.button}>
+        <Button variant="fab" mini color="secondary" aria-label="Add" className={classes.button}>
           <AddIcon />
         </Button>
-        <Button variant="fab" color="secondary" aria-label="add" className={classes.button}>
+        <Button variant="fab" color="secondary" aria-label="Add" className={classes.button}>
           <AddIcon />
         </Button>
       </div>

diff --git a/docs/src/pages/demos/buttons/FloatingActionButtons.js b/docs/src/pages/demos/buttons/FloatingActionButtons.js
@@ -20,17 +20,17 @@ function FloatingActionButtons(props) {
   const { classes } = props;
   return (
     <div>
-      <Button variant="fab" color="primary" aria-label="add" className={classes.button}>
+      <Button variant="fab" color="primary" aria-label="Add" className={classes.button}>
         <AddIcon />
       </Button>
-      <Button variant="fab" color="secondary" aria-label="edit" className={classes.button}>
+      <Button variant="fab" color="secondary" aria-label="Edit" className={classes.button}>
         <Icon>edit_icon</Icon>
       </Button>
-      <Button variant="extendedFab" aria-label="delete" className={classes.button}>
+      <Button variant="extendedFab" aria-label="Delete" className={classes.button}>
         <NavigationIcon className={classes.extendedIcon} />
         Extended
       </Button>
-      <Button variant="fab" disabled aria-label="delete" className={classes.button}>
+      <Button variant="fab" disabled aria-label="Delete" className={classes.button}>
         <DeleteIcon />
       </Button>
     </div>

diff --git a/docs/src/pages/demos/dialogs/ConfirmationDialog.js b/docs/src/pages/demos/dialogs/ConfirmationDialog.js
@@ -84,7 +84,7 @@ class ConfirmationDialogRaw extends React.Component {
             ref={node => {
               this.radioGroup = node;
             }}
-            aria-label="ringtone"
+            aria-label="Ringtone"
             name="ringtone"
             value={this.state.value}
             onChange={this.handleChange}

diff --git a/docs/src/pages/demos/drawers/MiniDrawer.js b/docs/src/pages/demos/drawers/MiniDrawer.js
@@ -106,7 +106,7 @@ class MiniDrawer extends React.Component {
           <Toolbar disableGutters={!this.state.open}>
             <IconButton
               color="inherit"
-              aria-label="open drawer"
+              aria-label="Open drawer"
               onClick={this.handleDrawerOpen}
               className={classNames(classes.menuButton, this.state.open && classes.hide)}
             >

diff --git a/docs/src/pages/demos/drawers/PersistentDrawer.js b/docs/src/pages/demos/drawers/PersistentDrawer.js
@@ -174,7 +174,7 @@ class PersistentDrawer extends React.Component {
             <Toolbar disableGutters={!open}>
               <IconButton
                 color="inherit"
-                aria-label="open drawer"
+                aria-label="Open drawer"
                 onClick={this.handleDrawerOpen}
                 className={classNames(classes.menuButton, open && classes.hide)}
               >

diff --git a/docs/src/pages/demos/drawers/ResponsiveDrawer.js b/docs/src/pages/demos/drawers/ResponsiveDrawer.js
@@ -78,7 +78,7 @@ class ResponsiveDrawer extends React.Component {
           <Toolbar>
             <IconButton
               color="inherit"
-              aria-label="open drawer"
+              aria-label="Open drawer"
               onClick={this.handleDrawerToggle}
               className={classes.navIconHide}
             >