[Tooltip] Rework the implementation (#12085)

mui · Jul 8, 2018 · 2af3c82 · 2af3c82
1 parent 3adacc8
commit 2af3c82
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}
  >