Skip to content

Commit 8fbd01d

Browse files
oliviertassinarioliviertassinari
committed
[Tooltip] Rework the implementation
1 parent 3adacc8 commit 8fbd01d

File tree

101 files changed

+1864
-893
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

101 files changed

+1864
-893
lines changed

‎docs/src/modules/components/AppFrame.js

+7-11
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ class AppFrame extends React.Component {
133133
<Toolbar>
134134
<IconButton
135135
color="inherit"
136-
aria-label="open drawer"
136+
aria-label="Open drawer"
137137
onClick={this.handleDrawerOpen}
138138
className={navIconClassName}
139139
>
@@ -146,24 +146,20 @@ class AppFrame extends React.Component {
146146
)}
147147
<div className={classes.grow} />
148148
<AppSearch />
149-
<Tooltip id="appbar-theme" title="Toggle light/dark theme" enterDelay={300}>
149+
<Tooltip title="Toggle light/dark theme" enterDelay={300}>
150150
<IconButton
151151
color="inherit"
152152
onClick={this.handleTogglePaletteType}
153-
aria-labelledby="appbar-theme"
153+
aria-label="Toggle light/dark theme"
154154
>
155155
{uiTheme.paletteType === 'light' ? <LightbulbOutlineIcon /> : <LightbulbFullIcon />}
156156
</IconButton>
157157
</Tooltip>
158-
<Tooltip
159-
id="appbar-direction"
160-
title="Toggle right-to-left/left-to-right"
161-
enterDelay={300}
162-
>
158+
<Tooltip title="Toggle right-to-left/left-to-right" enterDelay={300}>
163159
<IconButton
164160
color="inherit"
165161
onClick={this.handleToggleDirection}
166-
aria-labelledby="appbar-direction"
162+
aria-label="Toggle right-to-left/left-to-right"
167163
>
168164
{uiTheme.direction === 'rtl' ? (
169165
<FormatTextdirectionLToR />
@@ -172,12 +168,12 @@ class AppFrame extends React.Component {
172168
)}
173169
</IconButton>
174170
</Tooltip>
175-
<Tooltip id="appbar-github" title="GitHub repository" enterDelay={300}>
171+
<Tooltip title="GitHub repository" enterDelay={300}>
176172
<IconButton
177173
component="a"
178174
color="inherit"
179175
href="https://github.com/mui-org/material-ui"
180-
aria-labelledby="appbar-github"
176+
aria-label="GitHub repository"
181177
>
182178
<GithubIcon />
183179
</IconButton>

‎docs/src/modules/components/Demo.js

+6-22
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,6 @@ const styles = theme => ({
9797
[theme.breakpoints.up('sm')]: {
9898
display: 'flex',
9999
flip: false,
100-
zIndex: 10,
101100
position: 'absolute',
102101
top: 0,
103102
right: theme.spacing.unit,
@@ -207,37 +206,22 @@ class Demo extends React.Component {
207206
{demoOptions.hideHeader ? null : (
208207
<div>
209208
<div className={classes.header}>
210-
<Tooltip id={`demo-github-${index}`} title="See the source on GitHub" placement="top">
211-
<IconButton
212-
href={githubLocation}
213-
target="_blank"
214-
aria-labelledby={`demo-github-${index}`}
215-
>
209+
<Tooltip title="See the source on GitHub" placement="top">
210+
<IconButton href={githubLocation} target="_blank" aria-label="GitHub">
216211
<Github />
217212
</IconButton>
218213
</Tooltip>
219214
{demoOptions.hideEditButton ? null : (
220-
<Tooltip
221-
id={`demo-codesandbox-${index}`}
222-
title="Edit in CodeSandbox"
223-
placement="top"
224-
>
225-
<IconButton
226-
onClick={this.handleClickCodeSandbox}
227-
aria-labelledby={`demo-codesandbox-${index}`}
228-
>
215+
<Tooltip title="Edit in CodeSandbox" placement="top">
216+
<IconButton onClick={this.handleClickCodeSandbox} aria-label="CodeSandbox">
229217
<EditIcon />
230218
</IconButton>
231219
</Tooltip>
232220
)}
233-
<Tooltip
234-
id={`demo-source-${index}`}
235-
title={codeOpen ? 'Hide the source' : 'Show the source'}
236-
placement="top"
237-
>
221+
<Tooltip title={codeOpen ? 'Hide the source' : 'Show the source'} placement="top">
238222
<IconButton
239223
onClick={this.handleClickCodeOpen}
240-
aria-labelledby={`demo-source-${index}`}
224+
aria-label={`Source of demo n°${index}`}
241225
>
242226
<CodeIcon />
243227
</IconButton>

‎docs/src/modules/components/withRoot.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -87,10 +87,13 @@ const pages = [
8787
pathname: '/utils',
8888
children: [
8989
{
90-
pathname: '/utils/modals',
90+
pathname: '/utils/modal',
9191
},
9292
{
93-
pathname: '/utils/popovers',
93+
pathname: '/utils/popover',
94+
},
95+
{
96+
pathname: '/utils/popper',
9497
},
9598
{
9699
pathname: '/utils/portal',

‎docs/src/pages/demos/autocomplete/IntegrationDownshift.js

+33
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import keycode from 'keycode';
44
import Downshift from 'downshift';
55
import { withStyles } from '@material-ui/core/styles';
66
import TextField from '@material-ui/core/TextField';
7+
import Popper from '@material-ui/core/Popper';
78
import Paper from '@material-ui/core/Paper';
89
import MenuItem from '@material-ui/core/MenuItem';
910
import Chip from '@material-ui/core/Chip';
@@ -226,6 +227,8 @@ const styles = theme => ({
226227
},
227228
});
228229

230+
let popperNode;
231+
229232
function IntegrationDownshift(props) {
230233
const { classes } = props;
231234

@@ -259,6 +262,36 @@ function IntegrationDownshift(props) {
259262
)}
260263
</Downshift>
261264
<DownshiftMultiple classes={classes} />
265+
<Downshift>
266+
{({ getInputProps, getItemProps, isOpen, inputValue, selectedItem, highlightedIndex }) => (
267+
<div className={classes.container}>
268+
{renderInput({
269+
fullWidth: true,
270+
classes,
271+
InputProps: getInputProps({
272+
placeholder: 'With Popper',
273+
id: 'integration-downshift-popper',
274+
}),
275+
ref: node => {
276+
popperNode = node;
277+
},
278+
})}
279+
<Popper open={isOpen} anchorEl={popperNode}>
280+
<Paper square style={{ width: popperNode ? popperNode.clientWidth : null }}>
281+
{getSuggestions(inputValue).map((suggestion, index) =>
282+
renderSuggestion({
283+
suggestion,
284+
index,
285+
itemProps: getItemProps({ item: suggestion.label }),
286+
highlightedIndex,
287+
selectedItem,
288+
}),
289+
)}
290+
</Paper>
291+
</Popper>
292+
</div>
293+
)}
294+
</Downshift>
262295
</div>
263296
);
264297
}

‎docs/src/pages/demos/autocomplete/autocomplete.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Autocomplete React component
3-
components: TextField, Paper, MenuItem
3+
components: TextField, Paper, MenuItem, Popper
44
---
55

66
# Autocomplete

‎docs/src/pages/demos/buttons/ButtonSizes.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,10 @@ function ButtonSizes(props) {
4848
</Button>
4949
</div>
5050
<div>
51-
<Button variant="fab" mini color="secondary" aria-label="add" className={classes.button}>
51+
<Button variant="fab" mini color="secondary" aria-label="Add" className={classes.button}>
5252
<AddIcon />
5353
</Button>
54-
<Button variant="fab" color="secondary" aria-label="add" className={classes.button}>
54+
<Button variant="fab" color="secondary" aria-label="Add" className={classes.button}>
5555
<AddIcon />
5656
</Button>
5757
</div>

‎docs/src/pages/demos/buttons/FloatingActionButtons.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,17 @@ function FloatingActionButtons(props) {
2020
const { classes } = props;
2121
return (
2222
<div>
23-
<Button variant="fab" color="primary" aria-label="add" className={classes.button}>
23+
<Button variant="fab" color="primary" aria-label="Add" className={classes.button}>
2424
<AddIcon />
2525
</Button>
26-
<Button variant="fab" color="secondary" aria-label="edit" className={classes.button}>
26+
<Button variant="fab" color="secondary" aria-label="Edit" className={classes.button}>
2727
<Icon>edit_icon</Icon>
2828
</Button>
29-
<Button variant="extendedFab" aria-label="delete" className={classes.button}>
29+
<Button variant="extendedFab" aria-label="Delete" className={classes.button}>
3030
<NavigationIcon className={classes.extendedIcon} />
3131
Extended
3232
</Button>
33-
<Button variant="fab" disabled aria-label="delete" className={classes.button}>
33+
<Button variant="fab" disabled aria-label="Delete" className={classes.button}>
3434
<DeleteIcon />
3535
</Button>
3636
</div>

‎docs/src/pages/demos/dialogs/ConfirmationDialog.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ class ConfirmationDialogRaw extends React.Component {
8484
ref={node => {
8585
this.radioGroup = node;
8686
}}
87-
aria-label="ringtone"
87+
aria-label="Ringtone"
8888
name="ringtone"
8989
value={this.state.value}
9090
onChange={this.handleChange}

‎docs/src/pages/demos/drawers/MiniDrawer.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ class MiniDrawer extends React.Component {
106106
<Toolbar disableGutters={!this.state.open}>
107107
<IconButton
108108
color="inherit"
109-
aria-label="open drawer"
109+
aria-label="Open drawer"
110110
onClick={this.handleDrawerOpen}
111111
className={classNames(classes.menuButton, this.state.open && classes.hide)}
112112
>

‎docs/src/pages/demos/drawers/PersistentDrawer.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ class PersistentDrawer extends React.Component {
174174
<Toolbar disableGutters={!open}>
175175
<IconButton
176176
color="inherit"
177-
aria-label="open drawer"
177+
aria-label="Open drawer"
178178
onClick={this.handleDrawerOpen}
179179
className={classNames(classes.menuButton, open && classes.hide)}
180180
>

‎docs/src/pages/demos/drawers/ResponsiveDrawer.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ class ResponsiveDrawer extends React.Component {
7878
<Toolbar>
7979
<IconButton
8080
color="inherit"
81-
aria-label="open drawer"
81+
aria-label="Open drawer"
8282
onClick={this.handleDrawerToggle}
8383
className={classes.navIconHide}
8484
>

‎docs/src/pages/demos/menus/MenuListComposition.js

+27-72
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import classNames from 'classnames';
4-
import { Manager, Target, Popper } from 'react-popper';
53
import Button from '@material-ui/core/Button';
64
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
7-
import Collapse from '@material-ui/core/Collapse';
85
import Grow from '@material-ui/core/Grow';
96
import Paper from '@material-ui/core/Paper';
10-
import Portal from '@material-ui/core/Portal';
7+
import Popper from '@material-ui/core/Popper';
118
import MenuItem from '@material-ui/core/MenuItem';
129
import MenuList from '@material-ui/core/MenuList';
1310
import { withStyles } from '@material-ui/core/styles';
@@ -19,9 +16,6 @@ const styles = theme => ({
1916
paper: {
2017
marginRight: theme.spacing.unit * 2,
2118
},
22-
popperClose: {
23-
pointerEvents: 'none',
24-
},
2519
});
2620

2721
class MenuListComposition extends React.Component {
@@ -34,7 +28,7 @@ class MenuListComposition extends React.Component {
3428
};
3529

3630
handleClose = event => {
37-
if (this.target1.contains(event.target) || this.target2.contains(event.target)) {
31+
if (this.anchorEl.contains(event.target)) {
3832
return;
3933
}
4034

@@ -54,76 +48,37 @@ class MenuListComposition extends React.Component {
5448
<MenuItem>Logout</MenuItem>
5549
</MenuList>
5650
</Paper>
57-
<Manager>
58-
<Target>
59-
<div
60-
ref={node => {
61-
this.target1 = node;
62-
}}
63-
>
64-
<Button
65-
aria-owns={open ? 'menu-list-grow' : null}
66-
aria-haspopup="true"
67-
onClick={this.handleToggle}
68-
>
69-
Toggle Menu Grow
70-
</Button>
71-
</div>
72-
</Target>
73-
<Popper
74-
placement="bottom-start"
75-
eventsEnabled={open}
76-
className={classNames({ [classes.popperClose]: !open })}
51+
<div>
52+
<Button
53+
buttonRef={node => {
54+
this.anchorEl = node;
55+
}}
56+
aria-owns={open ? 'menu-list-grow' : null}
57+
aria-haspopup="true"
58+
onClick={this.handleToggle}
7759
>
78-
<ClickAwayListener onClickAway={this.handleClose}>
79-
<Grow in={open} id="menu-list-grow" style={{ transformOrigin: '0 0 0' }}>
80-
<Paper>
81-
<MenuList role="menu">
82-
<MenuItem onClick={this.handleClose}>Profile</MenuItem>
83-
<MenuItem onClick={this.handleClose}>My account</MenuItem>
84-
<MenuItem onClick={this.handleClose}>Logout</MenuItem>
85-
</MenuList>
86-
</Paper>
87-
</Grow>
88-
</ClickAwayListener>
89-
</Popper>
90-
</Manager>
91-
<Manager>
92-
<Target>
93-
<div
94-
ref={node => {
95-
this.target2 = node;
96-
}}
97-
>
98-
<Button
99-
aria-owns={open ? 'menu-list-collapse' : null}
100-
aria-haspopup="true"
101-
onClick={this.handleToggle}
60+
Toggle Menu Grow
61+
</Button>
62+
<Popper open={open} anchorEl={this.anchorEl} transition disablePortal>
63+
{({ TransitionProps, placement }) => (
64+
<Grow
65+
{...TransitionProps}
66+
id="menu-list-grow"
67+
style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
10268
>
103-
Toggle Menu Collapse
104-
</Button>
105-
</div>
106-
</Target>
107-
<Portal>
108-
<Popper
109-
placement="bottom"
110-
eventsEnabled={open}
111-
className={classNames({ [classes.popperClose]: !open })}
112-
>
113-
<ClickAwayListener onClickAway={this.handleClose}>
114-
<Collapse in={open} id="menu-list-collapse" style={{ transformOrigin: '0 0 0' }}>
115-
<Paper style={{ margin: 3 }}>
116-
<MenuList role="menu">
69+
<Paper>
70+
<ClickAwayListener onClickAway={this.handleClose}>
71+
<MenuList>
11772
<MenuItem onClick={this.handleClose}>Profile</MenuItem>
11873
<MenuItem onClick={this.handleClose}>My account</MenuItem>
11974
<MenuItem onClick={this.handleClose}>Logout</MenuItem>
12075
</MenuList>
121-
</Paper>
122-
</Collapse>
123-
</ClickAwayListener>
124-
</Popper>
125-
</Portal>
126-
</Manager>
76+
</ClickAwayListener>
77+
</Paper>
78+
</Grow>
79+
)}
80+
</Popper>
81+
</div>
12782
</div>
12883
);
12984
}

0 commit comments

Comments
 (0)