[SpeedDial] Add a prop to change orientation of actions

[aarontropy]

So, this has been discussed in
#2851
#10288
#9539
but this specific feature is not present. I'm happy to do a PR, but wanted to gauge interest and get feedback first.

• I have searched the issues of this repository and believe that this is not a duplicate.

Current/Expected Behavior

Currently, SpeedDial orients actions above the FAB; that is, when you click on or mouseover a FAB, the actions appear above the FAB. That's great for FABs at the bottom of the page, but not so good when they are at the top. It would be nice to be able to specify which direction the actions are oriented.

I would propose adding a prop (orientation or perhaps position) of type enum. The value of the prop would determine which direction the actions appear relative to the FAB.

(sorry for the edit, I hit 'enter' and WHOOSH, the darn thing published :))

[mbrookes]

I'm personally not a big fan of the horizontal speed-dial from a design perspective, regardless of screen position. Do you have any examples of it being used in the wild?

[aarontropy]

Hmm...I don't have any examples of a horizontal speed-dial.

I'm much more interested in a vertical speed-dial, but with the actions below the FAB. I'd be happy to leave the horizontal question for another time.

[mbrookes]

I'm much more interested in a vertical speed-dial, but with the actions below the FAB.

Arguably that's just a drop-down menu, but perhaps a speed-dial is more mobile friendly? Do you want to work on it?

[aarontropy]

I am happy to work it. Probably a simple first contribution.

I'm getting this from the Material ui specs here (near the bottom)

[mbrookes]

That example is with references to a FAB though, rather than SpeedDial.

For horizontal use, the FAB-toolbar seems to be the way to go.

I can't find any examples of a drop-down FAB, either in the spec, or in a Google image search.

[adamscybot]

The speed dial is a subtype of the FAB, they aren't separate controls. The positioning documentation in the material specs for FAB's applies to "speed dial". Though, granted, theres no specific example of a downwards orientation -- though it's sort of suggested by virtue of the positioning.

[adamscybot]

To anyone coming across this, you can actually change the orientation really easily just by applying flexDirection: 'column' to the SpeedDial (it defaults to flex-direction: 'column-reverse'.