fab-speed-dial component

[jelbourn]

E.g., AngularJS Material version

Update: We currently have no plans on adding or accepting a fab-speed-dial in Angular Material at this time, but are always open to changing our mind based on feedback.

We encourage folks in the community to also publish / share components that don't live directly in Angular Material. This issue will be left open so that people can discover it.

[madthad91]

Does this mean that you are working on it? Or are you looking for someone to contribute here?

[aateeque]

Any dev on this?

[jasonhodges]

@jelbourn could we get a status update on this item? Thanks

[jefersonestevo]

@jelbourn, I've developed a FAB Speed Dial fully based on AngularJS FAB Speed Dial using the angular material2 components:

Project Doc

Running Demo

If you need some contribution to develop this component just let us know

[sneridagh]

@jefersonestevo Awesome work! Maybe you can prepare a PR?

[jefersonestevo]

@sneridagh I think I can send something on the beginning of the next week. I just need to adjust the code to the angular material 2 master (the code was done on 2.0.0-beta1 and there are a few breaking changes) before I can send it.

[chaoranxie]

@jefersonestevo, the running demo looks great. @jelbourn any idea on when the PR might be merged.

[Todd-Werelius]

@jefersonestevo, outside of a couple of minor timing issues really nice components

[jelbourn]

Status on this: we have no plans to add fab-speed-dial or fab-toolbar to the library at this time. Our reasoning is that these components are somewhat out of vogue now. They're also relatively high-complexity and less commonly used, so we think our resources are better spent on other work.

Keeping the issue open so that people can find the status.

[buu700]

When you say that fab speed dial and toolbar are out of vogue, why and to what extent do you think this is the case? (I know that my application @cyph, Google Inbox, and LastPass all use speed dials, but beyond that I don't have a lot of experience using Material apps.) Within Material Design as a whole (not just Angular Material), should they be considered deprecated / on track for deprecation?

Also, to clarify the plans for this library, do you mean that fab speed dial and toolbar are explicitly unwanted for the rest of time, or more that they've been deferred to some time post-1.0 and may still be included in a future release?

Would it make sense to provisionally accept @jefersonestevo's implementation without a design doc and put it into some kind of "extras"/"experimental"/"contrib" module, where it could be lightly maintained (just for continued compatibility) and pseudo-officially blessed by the Angular Material team while remaining distinctly separate from the main components? That way it would look less like an active risk for anyone considering Material2​ for a design that depends on speed dial, while still being clearly discouraged (for the moment) in applications that don't need it.

[jelbourn]

We have no plans on adding or accepting one in Angular Material at this time, but are always open to changing our mind based on feedback.

We encourage folks in the community to also publish / share components that don't live directly in Angular Material.

[aateeque]

@jelbourn can you please elaborate on "somewhat out of vogue"? See fab-speed-dial used in a number of commonly used material apps

[spoilsportmotors]

I'm a little confused too; the Material Design Spec explicitly lists a speed-dial as useful part of a floating action button.

While I'm mostly OK with incorporating components from others - and what @jefersonestevo has done looks great - I far prefer relying on one package instead of multiple. I expect that given the rate of changes of Angular, that relying on packages that don't have a lot of community support behind them means that I have to be willing to take on maintenance of them, should their authors become tired / disinterested.

[GustavoCostaW]

Hey friends, I shared my FAB component here:

https://github.com/GustavoCostaW/ngc-float-button

Check demo here: http://bit.ly/2hydANi

@jelbourn @ThomasBurleson Hey, I want to know about the pull request for this feature, you can see above the FAB sample, but checking the pull requests, a previous FAB component pull request was rejected #3227. I would like to know what's status about if the material team will implement this feature and if I can proceed with PR.

[criticalbh]

@GustavoCostaW could you create your own library if nothing?

[moravcik]

@jelbourn to be honest, I don't really understand reasoning like "out of vogue" or "less commonly used" when people are saying they need it. There is clearly some misalignment.

In fact, there are quite lot of features from material design specs not implemented and no plans to (!!). This attitude about adding new features will sooner or later lead developers to choose more mature libraries and then decrease of interest in your lib.

[GustavoCostaW]

Hey guys, I'm working and I will share very soon the FAB component.

[GustavoCostaW]

Hey friends, I shared my FAB component here:

https://github.com/GustavoCostaW/ngc-float-button

Check demo here: http://bit.ly/2hydANi

@jelbourn can you check the code above?

Enjoy!

[GustavoCostaW]

@jelbourn @ThomasBurleson Hey, I want to know about the pull request for this feature, you can see above the FAB sample, but checking the pull requests, a previous FAB component pull request was rejected #3227. I would like to know what's status about if the material team will implement this feature and if I can proceed with PR.

[jelbourn]

@GustavoCostaW we're not accepting any PRs for the speed-dial at this time. I definitely encourage you to publish your component for others to use!

[aateeque]

@jelbourn can you please point to any discussion on this (or other components) that are falling out of vogue?

[demienYu]

@jelbourn What do you mean "out of vogue"? Let's look at "Inbox" app. Fab-speed-dial very useful there. Any app that needs to provide new content item using more than one method find that feature very useful. I think that every feature mentioned in material design guide must be inplemented in framework. Without it framework is not complete and not mature. Please consider it.

[thaichors3000]

@jelbourn Without fab-speed-dial, I cannot implement some workflows. So I think it is needed. e.g when a plus button, provide options to many things from there.

[Todd-Werelius]

How can you say they are in or out of vogue if they have not been implemented?

If they are not being implemented outside of Angular Material 2/4+ it might it not be because of the complexity that you mentioned?

If you look at sites that use 'Material Design' without a library they tend to be the lowest common denominator features, I guess you could throw motion into that argument to since the more complex series are not easy to implement, so people tend not to.

Speed dials come in pretty handy for some use cases, used them from Angular Material 1 lib, seems kind of random to just toss them out because you think they might not be useful

If Material Design is doing away with them fine, but if not this doesn't seem to be the case.

[ghost]

If I could express in emoji my disappointment at the outcome of parting ways with the FAB speed dial I would - these will have to do

👎🏽💔😭

[willshowell]

To add to the mix of 3rd-party options,

https://stackblitz.com/edit/sat-popover-speed-dial

[kanelloc]

Any update on adding official support for speed dials?

[eyalhakim]

@willshowell i really like your implementation! it will be even nicer if you would publish it as an npm library! :)

Also, iv'e tweaked it a bit to use material's matTooltip instead of your own custom tooltip.

[william-lohan]

Not as full featured as other examples but here is a simple one using the existing mat-fab, mat-mini-fab, and shown with @angular/cdk/overlay

https://stackblitz.com/edit/speed-dial

[ampled]

What's the developer's stance on this now?

The original reasons for not adding the speed dial (complexity / less commonly used / out of vogue) were completely fine and understandable, but it's been a year since the last statement from @jelbourn and it would be nice to have an update from the team.

It's still a big part of the material design guidelines and it would be nice to know if there's a plan for an official implementation, accepting pull requests or what an eventual timeline would be (especially for projects coming close to completing migration from angularjs).

[PowerKiKi]

@ampled this won't answer your question, but you might be interested in that up-to-date fab-speed-dial implementation: https://github.com/ecodev/fab-speed-dial

[buu700]

Yeah, it was understandable when Material2 was in a relatively immature state and had so many more important things to address, but at this point what's next after virtual scrolling?

It just seems weird to have the entire roadmap now be a list of three things that inexplicably won't ever be done.

I mean, a feature freeze with continued polish (fixing subtle things like #5712) and indefinite maintenance (ensuring it always works with the latest Angular and browser versions) wouldn't be the worst thing in the world, but of all the originally planned features it isn't clear at all why speed dial was singled out.

Also, FYI, anyone else who needs it, I've been maintaining a fork of @jefersonestevo's original implementation (mainly for use in @cyph) here: https://www.npmjs.com/package/angular-speed-dial.

[vovikdrg]

https://material.io/design/components/buttons-floating-action-button.html#types-of-transitions

[Splaktar]

@buu700 I think that most new component work is on hold pending the third bullet item in the latest roadmap:

High level stuff planned for Q4 2018 (October - Dec):

• Improve our own build and automation tooling
• Fix bugs and reduce some technical debt inside Google
• Working on long-term plans on how to collaborate with the MDC Web team
• Designs for advanced table improvements (column resize, selection directives, inline-edit)

[vovikdrg]

@Splaktar I hope ionic is going to be release soon :) so would be great replacement 🥇

[mhagnumdw]

Based on this implementation: https://stackblitz.com/edit/angular-6-material-speed-dial-fab

I've added some features to use in my application:

• it is possible to pass an array of buttons (already existing);
• it is possible to pass an array of containers (eg: divs) and the buttons marked from inside the containers are placed on the speed dial automatically;
• changes in the buttons of the containers reflect on the speed dial (MutationObserver);
• it is possible to display/hide the speed dial if a particular element (eg: div) is or is not in the viewport (IntersectionObserver)

Available here: https://stackblitz.com/edit/angular-6-material-speed-dial-fab-mhagnumdw-v001

Maybe some idea from here can be added to the component that will be made for the Angular Material.