Material-ui: Extended Fab enhancements?

[simoami]

Hi @oliviertassinari and @mbrookes,

I just gave the extended fab a run. Thanks for adding it. However, I believe that the extended fab solution can be improved to enable the following behavior, part of the new Google guideline.

The following demo is based on the existing example on material-ui.com but modified on the fly from dev tools:

Here's my observations from the current implementation:

1. There's really no need for a new variant because switching between variants won't allow for the transition above. Instead, I suggest we keep the same Fab variant and allow for a label like we do with regular buttons. Introduce a property for hiding the label. hideLabel or hideText.
2. The margin between the icon and text should be assigned to the text, because it should collapse when the label shrinks to leave the icon alone without a margin hanging to the right.
3. I noticed that the extended fab height is smaller than the Fab button height, making the transition between the normal and extended fab difficult.
4. Border radius should be a fixed value of (height / 2), not 50%, which gives you an oval factor form when text is present.

Thoughts?

[oliviertassinari]

The specification https://material.io/design/components/buttons-floating-action-button.html#extended-fab.

[oliviertassinari]

I start to believe that we should move the floating action button into it's own component. This would allow to grow the number of feature without arming the canonical use case of the button. It would also allow to pick a different API tradeoff.

[simoami]

Good ideas @oliviertassinari . I'd just keep in mind that one type could morph to another. Today, it's Fab to Extended Fab. Tomorrow, it could be floating to non-floating. Changing apis on the fly could prevent such transitions. But then again, I'm not 100% sure what you have in mind.

[mbrookes]

@simoami The height of the extended fab is per the spec. If you look carefully at the transformation examples, it changes height between the extended and standard fab. (However the speed dial example keeps the extended height of 48px for both.)

[simoami]

@mbrookes Good observation. I think the speed dial is a separate feature we don't need to worry much about, since you control the css of the inner components.

The measurements are on the page as well: https://material.io/design/components/buttons-floating-action-button.html#specs

[mbrookes]

Yup, I think you'll find the extended FAB meets those dimension.

[btroncone]

@simoami Do you have the above example in a code pen or similar? I would love to see how you are making the smooth transition between showing and hiding text. Thanks!

[IssueHuntBot]

@issuehuntfest has funded $20.00 to this issue. See it on IssueHunt

[IssueHuntBot]

@issuehuntfest has funded $40.00 to this issue. See it on IssueHunt

[anthonydillon]

Sorry, but could someone explain the interaction? From the image it looks like clicking triggers the normal click event but is to a drag to the right that reveals the label?

[mbrookes]

@anthonydillon I believe in @simoami's example, the Fab variant is being controlled programatically.