Vuetify: [Feature Request] Extended Floating Action Button

[heath3n]

Problem to solve

The Material Design spec describes the concept of an extended FAB. I currently have need for this component as it provides linguistic reinforcement or clarification of an icon's action (such as that of the ambiguous ＋) and feel it should be included anyway for completeness.

I realize this can be faked with the existing button component but it would be nice if a prop existed so there was no manual effort involved in checking screen sizes to shrink the button appropriately, modify speed dial appearance, etc.

Proposed solution

Add a fab-extended property to the existing <v-btn> component. In most cases, all this should do is elongate the button but note from the spec that the button shrinks to normal size under certain circumstances (scrolling, viewport resized) and speed dial items gain an extended view on hover.

[megaroeny]

Yes please, we've been using this in our desktop app designs, and it's been especially helpful. Right now, we have to make our own custom Extended FAB

[megaroeny]

@sh7dm @MajesticPotatoe what's the workflow like for these feature requests? I see that it was removed for Vuetify 2.0, so is there some timeline for that? I'm assuming that we need some folks who can contribute to a PR for this, correct?

[sh7dm]

@johnleider when do you want to implement this one?

[jacekkarczmarczyk]

Something like this? https://codepen.io/anon/pen/NoyONE?editors=1000

[sh7dm]

@jacekkarczmarczyk looks good!

[megaroeny]

@jacekkarczmarczyk that looks too narrow and the elevation isn't high enough. An Extended FAB isn't the same specs as a button. Make sure to cross check with the Material guidelines:
https://www.material.io/design/components/buttons-floating-action-button.html

[sh7dm]

@jaminroe I already have done it the correct way, it is compatible to md2 and I will finish some work and open PR today

[MajesticPotatoe]

@jaminroe just noting that it wasn't removed from 2.0, was just moved from one list and put in another (we were just reorganizing issues between projects). still slotted for 2.0 👍

[johnleider]

We are most definitely going to implement this, didn't make the timeline cut for v2.0 release.

[Dev1lDragon]

its will be good if you can implement something like this: Extended FAB speed dial, its from.Buttons: floating action button - Material Design.

My fast interpretation: https://codepen.io/dev1ldragon/pen/Wqqvav

[megaroeny]

its will be good if you can implement something like this: Extended FAB speed dial, its from.Buttons: floating action button - Material Design.

My fast interpretation: https://codepen.io/dev1ldragon/pen/Wqqvav

The only thing I disagree about this interpretation is that it's not supposed to change between a regular FAB and an Extended one. That is not a pattern in the Material Design system.

Looking forward to seeing this added in the future. 😃

[heath3n]

The only thing I disagree about this interpretation is that it's not supposed to change between a regular FAB and an Extended one. That is not a pattern in the Material Design system.

@jaminroe Usually not, but see the speed dial example under the "Behavior" section: https://material.io/design/components/buttons-floating-action-button.html#extended-fab

[clementmas]

We are most definitely going to implement this, didn't make the timeline cut for v2.0 release.

Any news on this feature? Will it make the cut for the 2.2 release? Thanks!

[jorisdemange]

We are most definitely going to implement this, didn't make the timeline cut for v2.0 release.

Still looking for this essential feature. How is it going?