RFC: SpeedDial and Tooltip vs. Labels

I’d like to use this issue to gather some real world examples of speed dials with tooltips to see what the optimal solution should be.

I believe that we don’t actually have to pull in the Tooltip dependency from the core. The spec does not mention implicit tooltips but only labels and then only persistent labels.

Pros

• smaller bundle
• reduced implementation logic
• clear answer to what is the root element of SpeedDialAction (concerns className property)
• simpler logic for persistent “tooltip” (i.e. labels) regarding open transitions (there is a race condition when opening the Actions and applying focus to the first actions which causes a misplaced tooltip)

Cons

• the current cloneElement approach makes it hard for users to actually apply a tooltip. However other core components have the same issue (see #12921)

If somebody wants to have some sort of tooltip for the actual FAB then I would refer to the extended FAB variant.

Examples

Labels

• native google calendar on android when tapping the FAB
• https://smollweide.github.io/react-speed-dial/#/
• https://github.com/farfromrefug/react-mui-speeddial#demo
• google inbox on mobile has the same approach as google calendar on mobile

Tooltip

• https://material.angularjs.org/latest/demo/fabSpeedDial#more-options (persistent on touch devices)
• google inbox on desktop (from @mbrookes ):

Other implementations

• vuetify has neither tooltips nor labels
• vuematerial has neither tooltips nor labels
• material components web only has basic FABs without related actions
• Angular Material only has basic FABs without related actions

[eps1lon]

A lenovo thinkpad x1. Had the keyboard and mouse plugged in. In tablet and non-tablet mode. It seems google doesn’t do much with their ui besides browser vs. native app.

[eps1lon]

@aemc Please open a separate issue and follow the issue template.