feat: add iconPosition to FAB

[caiotracera]

Motivation

When using the Floating Action Button component, we are able to provide the icon and the label that we want to use. But, searching between the documentation and the code, it seems that there are no implemented way of changing the order the label and the icon are displayed.

By default, we render the icon and the label respectively in this order. But we may want to render the label before the icon, and that is not possible at this moment. Because of that, this PR adds a new prop called iconPosition (we can change it if necessary) that will change the flex-direction prop based on the value:

• When the iconPosition is left, the flex-direction will be set to row (the current default value);
• When the iconPosition is right, the flex-direction will be set to row-inverted;

Related issue

I didn't find any issues about this, but I need to implement a solution that will use the FAB component, but the UX Designer wants the icon to be rendered on the right of the label. I did try to fix this on my side, but I thought that it would be a good idea to have this option by default, because other developers may also want to change the display order.

Test plan

• Open the example app;
• Navigate to the Floating Action Button examples;
• You will find the example that I added with the two possible values for this prop;

But you can easily test on your own by simply adding the iconPosition prop to the FAB component. The left is the default value, so:

• If the iconPosition is not defined, it will assume the left value and stay as it is today.
• If the iconPosition is set to right, the label and the icon should change places.
• If the iconPosition is set but no label is provided, the flex-direction will be changed to row-inverted but it should not impact on the final result.

[callstack-bot]

Hey @caiotracera, thank you for your pull request 🤗. The documentation from this branch can be viewed here.