Extended Fab enhancements? #12017

simoami posted onGitHub

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:

extended fab

Here's my observations from the current implementation:

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.
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.
I noticed that the extended fab height is smaller than the Fab button height, making the transition between the normal and extended fab difficult.
Border radius should be a fixed value of (height / 2), not 50%, which gives you an oval factor form when text is present.

Thoughts?

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

posted by oliviertassinari almost 7 years ago

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.

posted by oliviertassinari almost 7 years ago

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.

posted by simoami almost 7 years ago

@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.)

posted by mbrookes almost 7 years ago

@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

posted by simoami over 6 years ago

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

posted by mbrookes over 6 years ago

@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!

posted by btroncone over 6 years ago