Skip to content

Commit 4cc7cfa

Browse files
oliviertassinarioliviertassinari
committed
[Tooltip] Rework the implementation
1 parent 3adacc8 commit 4cc7cfa

File tree

104 files changed

+1885
-899
lines changed

Some content is hidden

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

104 files changed

+1885
-899
lines changed

‎.size-limit.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,13 @@ module.exports = [
2727
name: 'The size of all the modules of material-ui.',
2828
webpack: true,
2929
path: 'packages/material-ui/build/index.js',
30-
limit: '95.3 KB',
30+
limit: '94.3 KB',
3131
},
3232
{
3333
name: 'The main bundle of the docs',
3434
webpack: false,
3535
path: getMainFile().path,
36-
limit: '177.1 KB',
36+
limit: '175 KB',
3737
},
3838
{
3939
name: 'The home page of the docs',

‎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
>

0 commit comments

Comments
 (0)