New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Tooltip] Rework the implementation #12085
Conversation
8fbd01d
to
9ccb79d
Compare
@@ -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', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
馃殌
9ccb79d
to
4cc7cfa
Compare
4cc7cfa
to
8bfb2df
Compare
@oliviertassinari, regarding #10909. Tooltips are used for Accessibility only when mounted ( |
@Z-AX If people are providing a string title property, we apply it to the children when the tooltip is closed. This is the nominal use case. We are good. |
@oliviertassinari Awesome job! |
Thanks! We'll check this out within the next sprint. |
Rad, this looks like exactly what my team needs for some perf issues we've been trying to get to the bottom of. I'm not familiar with your release process -- any idea roughly how long it might be until this patch is rolled into a release and available on NPM? I want to be sure to update when it's ready! Thanks for your work on this! 馃憤 |
I need it too for the office. We have a critical screen that surfers from an important performance issue. |
I'm sorry, I should have done smaller pull requests fixing one issue after another, but it was so much fun! Yes, it's closing 20 issues. Hopefully, it's not introducing any breaking changes.
Closes [ToolTip] Tables with ToolTips create extra space on screen聽#11350, Closes [Tooltip] Wrongly created initial tooltip positioning after resizing the window enough which results in scrollbars聽#9362
ClickAwayListener
with multiple children. It should be a single node. It's aReactDOM.findDOMNode
API limitation.disablePortal
property to the Portal.Closes [ClickAwayListener] Triggers on Select (and more)聽#12034
TransitionComponent
property.Closes Tooltip performances makes them unusable on large scales since v1.0.0-beta.40聽#11431
Closes [Tooltip] Unmount Tooltip on exit and mount on enter聽#10909
PopperProps
property so people can provide their owncontainer
property.Closes How can I make elements such as select menus, tooltip, etc. render in a specific DOM element?聽#11454
Popper
component. I have been trying to upgrade react-popper to v1 in [Tooltip] Update react-popper聽#11862, but I had to revert with [Tooltip] Revert update react-popper聽#11920. I fail to see the value react-popper is providing over using Popper.js directly, worse, I find it harming performances (higher payload + many rerender) and code comprehension. So, I think that we are better off without. We are going down one level of abstraction. Save 1 kB gzipped 馃殌The Popper is a wrapper on top of Popper.js with some additional feature (transition, portal and rtl). In the future, we could look into making Popper a wrapper on top of Modal so we can have some extra focus and keyboard feature.
Closes Cannot find module 'react-popper'聽#11197, Closes Support scroll and reposition of Popover聽#11796
Closes [Document] Bug of the
Menus
document's example聽#11882Closes Allow tooltips to function on disabled elements聽#11601
Closes [Tooltip] Tooltips should not disappear when hovered聽#11705.
Closes [Tooltip] How to customize the tooltip?聽#11467
Closes Autocomplete dropdown options hided by dialog.聽#11824, Closes Ability to override Modal container inside Popover聽#11733
Closes Tooltip stays displayed on top of MenuItem components of a Select component聽#11186
Closes Text in Tooltip component is blurry on secondary Retina Screen聽#12056.
modifiers.preventOverflow.boundariesElement = viewport
option of Popper.js.Closes [Tooltip] Flickers when overlaped with element it is attached to聽#10735, Closes Allow tooltips on tabs聽#10714, Closes Tooltip does not show when hover on MenuItem聽#10502
disablePortal
property. In the future, I would like to explore if we can make Popper rely on the Modal component. This will require to dive into the internal of the Modal. Like blueprint is doing with their Popover and Overlay component.Closes Use react-overlays directly?聽#10479
The implementations I have been benchmarking before / during the effort: