Material-ui: [FloatingActionButton] Support horizontal and vertical speed dials

[James-Parsons]

Scroll down a little here, and you'll see a speed dial pattern. It would be nice if Material UI could support both a vertical and horizontal speed dial on it's Floating Action Buttons.

[markshust]

Here's the link to material design spec https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions

[igorpreston]

Anyone interested in PR?

[Dartanjan]

I'd love to see this. It is relatively common for material ui projects. (Would be especially useful for us designers prototyping designs to clients!)

[mbrookes]

@dltmd6262 To answer your question in #2002, I would suggest to make a separate component to extend FAB rather than bloating FAB with this feature.

[dltmd6262]

Great! If there's someone already working on this I'd love to help. In the meantime I'll be working on this on my own :]

[antoinerousseau]

I made one for my app, if you are interested I can make it generic and share it :)
https://gist.github.com/antoinerousseau/349a42337f7763afaf1a4abeffc22b94

[antoinerousseau]

Here is a bad gif (in reality it's very smooth):

[dltmd6262]

Looks like work done??

[oliviertassinari]

@antoinerousseau That looks great! Do you want to contribute it back here? I'm willing too help if needed.

[antoinerousseau]

@oliviertassinari glad you are interested, so I'll prepare a PR asap then :)

[oliviertassinari]

@antoinerousseau Awesome.
I see that you have been using a CSS approach to style the component. It might be better to start from the next branch in that case. We already have some FloatingActionButtons:

[antoinerousseau]

Yeah I was about to ask about css, so you guys are going to switch from inline styles to css? I read that performances are better, is that why? Is there a thread about the next branch and its css use? Or should I just check the 0.16 milestone? Also did you checkout http://react-toolbox.com/ ?

[nathanmarks]

@antoinerousseau @oliviertassinari

Transition groups helping to choreograph multiple elements transitioning in a material design compliant fashion would be a nice feature to abstract and make available for other uses too 👍

[oliviertassinari]

so you guys are going to switch from inline styles to css?

Yes, we are going to use the CSS styling capability of the browser instead of the inline style.
Still, we are keeping the styling-in-JS approach.

Also did you checkout http://react-toolbox.com/ ?

I'm well aware of this project. What's your point?
Are we going to use CSS module? No.
Why? I could sum-up it in one citation from the creator of CSS modules:

JavaScript is a much, much better programming language than Sass

https://twitter.com/markdalgleish/status/756778026604466176

@nathanmarks Has developed an original and awesome solution for our needs: stylishly.

I read that performances are better, is that why?

I'm gonna give my point of view, @nathanmarks may not share it.
I won't say that our reason n°1 for the migration is solving the performance issue.
We could have done it with the same cache tradeoff that everybody is doing when writing CSS.
For me, the reason n°1 for the migration is the style capabilities, like server side media query, that are not available with inline style.

Actually, the CSS approach may perform a bit less based on the CSSDOM algorithm:
https://github.com/necolas/react-native-web/issues/110#issuecomment-231633059. But I think that it's a tradeoff / risk worth taking.

Is there a thread about the next branch and its css use? Or should I just check the 0.16 milestone?

Good question, there isn't much information about it. @nathanmarks do you think it worth writing a documentation about it? I'm wondering if this wouldn't address @rosskevin's issue regarding not knwowing about what we are working on and how he could help.
Well, that could be a simple link to waffle.io in the ROADMAP.md.

[nathanmarks]

@oliviertassinari Yes, it's about time that there's something more written about next.

[antoinerousseau]

thanks @oliviertassinari for all these precisions. and stylishly looks promising! i'm glad you guys are committed on pushing this project forward into modernity :)

about react-toolbox, I mentioned it because I saw that it has more or less the same goal than your lib, but I didn't test it (and I'm not planning on rewriting my whole project anyway), but I saw that they are using CSS modules so I was wondering what were you thoughts about their code, and what alternative you are taking to make some big refactoring more relevant than switching to contributing to their project 😅

[antoinerousseau]

But I think I found some answers in these threads :)
https://github.com/react-toolbox/react-toolbox/issues/39
https://www.reddit.com/r/reactjs/comments/4fd4ro/materialui_vs_reacttoolbox_and_why/

[nathanmarks]

@antoinerousseau We're confident that the next major changes are going to bring a lot more stability and consistency to the library (along with easier to override css, better performance and a cleaner API surface). There's a big test feature coming which is going to help plug a lot of holes -- automated cross-browser visual regression testing.

[nathanmarks]

@antoinerousseau Fixing the issues with the library has been a goal of mine since the start of this year when I began contributing, and we're well underway.

[markshust]

Just wanted to throw in my 2c, even with some small performance issues I've been loving material-ui (I've been avoiding low-end devices though). I just think it's important to maintain a backwards-compatibility of some sort though with this style update, as the upgrade from 0.14 to 0.15 was indeed a bit painful. I like the direction this library is moving though 👍

[antoinerousseau]

Thanks for these infos! Looking forward to playing with the new version then!

[johanatan]

@antoinerousseau Did you make your speed dial component available anywhere? Merged into this project?

[antoinerousseau]

@johanatan I was waiting for a more stable next version with official announcement, to write this component using _stylishly_ instead of inline styles

I see that @oliviertassinari is preparing the 0.16, is that going to include the rewrite?
I'll play with it when out of RC since I've got some other stuff to do for now :)

[oliviertassinari]

@antoinerousseau The v0.16.0 release isn't going to include the rewrite. It's a regular release with some breaking changes and a lot of bug fixes.

@nathanmarks Has made some great progress on the next branch. I'm confident with the direction it's taking. I will soon start to migrate my app to the rewrote components.
We also plan to quickly stop supporting components already migrated to the next branch.

[antoinerousseau]

Sounds great! I'll give it a try asap then (i.e. hopefully in a few days) :)

[jampy]

So, the speed dial component won't be released anytime soon?

[jampy]

@antoinerousseau the links to your SpeedDial.js / SpeedDial.css don't work anymore - could you please re-release these files somewhere? Thanks.

[antoinerousseau]

Sure! here you go:
https://gist.github.com/antoinerousseau/349a42337f7763afaf1a4abeffc22b94

You can also see it in action if you register at https://beta.tribeez.net

[jampy]

For those interested, I just published my own Speed dial component.

Demo:

Available on NPM: https://www.npmjs.com/package/react-mui-speeddial

Unfortunately I wasn't able to create a demo on WebpackBin since it only allows whitelisted packages it seems...

[mbrookes]

Closed by #10288 (building on #9539)