Rename Fab component to FAB or FloatingActionButton

The Fab components capitalization is a bit misleading as its an acronym; one would expect it to be named FAB; however, FloatingActionButton would be ideal for clarity and consistency with the rest of the Material-UI API.

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

Context 🔦

Abbreviations and Acronyms hurt a projects readability, as they add to cognitive load, tribal knowledge, and are often considered a ‘code smell’. Grammatically, the main exception would be acronyms that are universally used in everyday language, such as LASER. ‘Fab’ is also used as an abbreviation in words such as prefab which is short for prefabricated, which makes the meaning harder to grok if you do not know the context.

Google uses a mixture of Floating Action Button in their documentation and they do use FAB after explaining the acronyms origin. Their various Google APIs also uses a mixture of FloatingActionButton and FAB as in acronym form, usually when FAB is combined with another component. I have yet to find any Google API’s that have used FAB as an abbreviation for the actual button. Lastly, to be fair and play devil’s advocate, I must admit that ‘Fab’ does show up in Angular docs; however, I would argue that this is a side effect of their documentation generation tools, as the API is lower case kebab-case.

Lastly, while renaming material-ui/packages/material-ui/src/Fab/Fab.js to material-ui/packages/material-ui/src/FAB/FAB.js would be more clearly show that the word is intended as an acronym, it might also create issues for users with case insensitive operating systems. I would thus recommend to go with material-ui/packages/material-ui/src/FloatingActionButton/FloatingActionButton.js, which would avoid any linting errors that FAB might introduce and be much more obvious to individuals less savvy of Material Design jargon.

Thank you for your time and consideration.

[oliviertassinari]

I agree with @liesislukas here. People find that we release too many breaking changes. The name of the component match our acronym convention:

• CssBasline over CSSBaseline
• Fab over FAB
• NoSsr over NoSSR

I’m moving the concern to v5.

[joglr]

I like the verbose FloatingActionButton, since the other names convey little meaning, unless you know the abbreviation. I agree though that it is a bit of a mouthful, but I still think the long name is better. There’s already other components with such long names, such as BottomNavigationAction.