[Tooltip] Rework the implementation

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

Hide file tree

Showing 101 changed files with 1,864 additions and 893 deletions.
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}
             >

diff --git a/docs/src/pages/demos/menus/MenuListComposition.js b/docs/src/pages/demos/menus/MenuListComposition.js
@@ -1,13 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { Manager, Target, Popper } from 'react-popper';
 import Button from '@material-ui/core/Button';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-import Collapse from '@material-ui/core/Collapse';
 import Grow from '@material-ui/core/Grow';
 import Paper from '@material-ui/core/Paper';
-import Portal from '@material-ui/core/Portal';
+import Popper from '@material-ui/core/Popper';
 import MenuItem from '@material-ui/core/MenuItem';
 import MenuList from '@material-ui/core/MenuList';
 import { withStyles } from '@material-ui/core/styles';
@@ -19,9 +16,6 @@ const styles = theme => ({
   paper: {
     marginRight: theme.spacing.unit * 2,
   },
-  popperClose: {
-    pointerEvents: 'none',
-  },
 });
 
 class MenuListComposition extends React.Component {
@@ -34,7 +28,7 @@ class MenuListComposition extends React.Component {
   };
 
   handleClose = event => {
-    if (this.target1.contains(event.target) || this.target2.contains(event.target)) {
+    if (this.anchorEl.contains(event.target)) {
       return;
     }
 
@@ -54,76 +48,37 @@ class MenuListComposition extends React.Component {
             <MenuItem>Logout</MenuItem>
           </MenuList>
         </Paper>
-        <Manager>
-          <Target>
-            <div
-              ref={node => {
-                this.target1 = node;
-              }}
-            >
-              <Button
-                aria-owns={open ? 'menu-list-grow' : null}
-                aria-haspopup="true"
-                onClick={this.handleToggle}
-              >
-                Toggle Menu Grow
-              </Button>
-            </div>
-          </Target>
-          <Popper
-            placement="bottom-start"
-            eventsEnabled={open}
-            className={classNames({ [classes.popperClose]: !open })}
+        <div>
+          <Button
+            buttonRef={node => {
+              this.anchorEl = node;
+            }}
+            aria-owns={open ? 'menu-list-grow' : null}
+            aria-haspopup="true"
+            onClick={this.handleToggle}
           >
-            <ClickAwayListener onClickAway={this.handleClose}>
-              <Grow in={open} id="menu-list-grow" style={{ transformOrigin: '0 0 0' }}>
-                <Paper>
-                  <MenuList role="menu">
-                    <MenuItem onClick={this.handleClose}>Profile</MenuItem>
-                    <MenuItem onClick={this.handleClose}>My account</MenuItem>
-                    <MenuItem onClick={this.handleClose}>Logout</MenuItem>
-                  </MenuList>
-                </Paper>
-              </Grow>
-            </ClickAwayListener>
-          </Popper>
-        </Manager>
-        <Manager>
-          <Target>
-            <div
-              ref={node => {
-                this.target2 = node;
-              }}
-            >
-              <Button
-                aria-owns={open ? 'menu-list-collapse' : null}
-                aria-haspopup="true"
-                onClick={this.handleToggle}
+            Toggle Menu Grow
+          </Button>
+          <Popper open={open} anchorEl={this.anchorEl} transition disablePortal>
+            {({ TransitionProps, placement }) => (
+              <Grow
+                {...TransitionProps}
+                id="menu-list-grow"
+                style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
               >
-                Toggle Menu Collapse
-              </Button>
-            </div>
-          </Target>
-          <Portal>
-            <Popper
-              placement="bottom"
-              eventsEnabled={open}
-              className={classNames({ [classes.popperClose]: !open })}
-            >
-              <ClickAwayListener onClickAway={this.handleClose}>
-                <Collapse in={open} id="menu-list-collapse" style={{ transformOrigin: '0 0 0' }}>
-                  <Paper style={{ margin: 3 }}>
-                    <MenuList role="menu">
+                <Paper>
+                  <ClickAwayListener onClickAway={this.handleClose}>
+                    <MenuList>
                       <MenuItem onClick={this.handleClose}>Profile</MenuItem>
                       <MenuItem onClick={this.handleClose}>My account</MenuItem>
                       <MenuItem onClick={this.handleClose}>Logout</MenuItem>
                     </MenuList>
-                  </Paper>
-                </Collapse>
-              </ClickAwayListener>
-            </Popper>
-          </Portal>
-        </Manager>
+                  </ClickAwayListener>
+                </Paper>
+              </Grow>
+            )}
+          </Popper>
+        </div>
       </div>
     );
   }