Skip to content
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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SpeedDial] Added tooltipOpen property to SpeedDialAction component #11103

Closed
wants to merge 3 commits into from
Closed

[SpeedDial] Added tooltipOpen property to SpeedDialAction component #11103

wants to merge 3 commits into from

Conversation

vudzero
Copy link

@vudzero vudzero commented Apr 22, 2018

Added always open options to SpeedDialAction component

Closes #11564

@oliviertassinari oliviertassinari added package: lab Specific to @mui/lab component: speed dial This is the name of the generic UI component, not the React module! labels Apr 23, 2018
@mbrookes mbrookes self-requested a review May 3, 2018 19:02
@oliviertassinari oliviertassinari changed the base branch from v1-beta to master May 12, 2018 18:19
@hashwin
Copy link
Contributor

hashwin commented May 17, 2018

Any update on the review for this? This is a must-have for my speed dial implementation.

@mbrookes
Copy link
Member

mbrookes commented May 17, 2018

@hashwin We have been focussed on the final countdown to v1. I'll revisit the lab components after that.

Copy link
Member

@mbrookes mbrookes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good so far. What do you think about controlling this from SpeedDial?

/**
* Make the tooltip always visible.
*/
tooltipAlwaysOpen: PropTypes.bool,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps this should be an @ignored prop controlled by the SpeedDial? Thoughts?

Either way, tooltipOpen should be sufficient for the prop name.

@@ -19,7 +19,14 @@ module.exports = require('fs')
js: require('docs/src/pages/lab/speed-dial/OpenIconSpeedDial').default,
raw: preval`
module.exports = require('fs')
.readFileSync(require.resolve('docs/src/pages/lab/speed-dial/OpenIconSpeedDial'), 'utf8')
.readFileSync(require.resolve('docs/src/pages/lab/speed-dial/SpeedDialTooltipOpen'), 'utf8')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops!

@@ -12,3 +12,7 @@ You can provide an alternate icon for the closed and open states using the `icon
of the `SpeedDialIcon` component.

{{"demo": "pages/lab/speed-dial/OpenIconSpeedDial.js"}}

Actions tooltip can be set to always visible to prevent long press on mobile platform.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"The SpeedDialActions tooltips can be be displayed persistently so that users don't have to long-press in order to see the tooltip on touch devices.

It is enabled here across all devices for demo purposes, but in production could use the isTouch logic to conditionally set the property."

@Forfold
Copy link

Forfold commented Jun 5, 2018

@MatxBerg any plans on updating this pr? Hoping to use this feature from the lab soon.

@vudzero
Copy link
Author

vudzero commented Jun 6, 2018

@Auchindoun Sorry I don't have write access to complete this PR...

@Forfold
Copy link

Forfold commented Jun 6, 2018

@MatxBerg I'm confused, it looks like the PR is based off of your fork though? MatxBerg:speeddial-label-visibility

@vudzero
Copy link
Author

vudzero commented Jun 9, 2018 via email

@mbrookes
Copy link
Member

mbrookes commented Jun 9, 2018

@MatxBerg That doesn't prevent you from updating the PR though. I gave some feedback 3 weeks ago, but it's still pending. If you don't have time, no problem, but wanted to give you the opportunity to finish up the PR.

@vudzero
Copy link
Author

vudzero commented Jun 20, 2018

@mbrookes I'm very sorry, it's my first PR EVER so I kind of don't know the whole process. Can you just pinpoint what are the steps?

@mbrookes
Copy link
Member

@MatxBerg IF you could correct the issues raised here (#11103 (review)) and push the commit to you repo. One of those is a discussion point - you can reply inline.

@mbrookes mbrookes changed the title Added always open options to SpeedDialAction component [SpeedDial] Added tooltipOpen property to SpeedDialAction component Jul 18, 2018
@mbrookes
Copy link
Member

@MatxBerg I updated your PR based on the feedback I left in May, however there are still a couple of problems with the current implementation.

Because the Tooltip is opening immediately, its positioning with respect to the Action is incorrect:

image

That may be an artifact of the recent Popper / Tooltip changes (@oliviertassinari ?)

Even so, the Tooltip should be appearing in coordination with the Action rather than all at once.

Since this PR has been dormant for some time, I'm closing for now. Feel free to reopen it i you have time to work on it.

@Auchindoun - feel free to pick it up if you need this feature sooner.

@mbrookes mbrookes closed this Jul 18, 2018
@tomhalley
Copy link

It would be great if this could be added

@mariahmartinez
Copy link

I'm going to work on getting this done since the last issue was closed. I have a working version, just need to tweak the position of the label in relation to the button.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: speed dial This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants