💡 Proposal - Flex component for F36

👋 F36 community!

I would like to propose to create Flex component for F36. I think there might be cases where we add additional styles just to add flex and position elements with it, or maybe to add flex and specify spacing between elements. It might be useful to have a generic component in the library that could do it for us, like <Flex />. I know that we have <Grid /> already, but I guess there is still room for <Flex /> to handle less complex cases. Flex is still very much in use and it’s good to have a choice between those 2 components in the library, in my opinion.

Flex component potentially could take following props:

Prop	Description
fullWidth	boolean, sets width to 100%
fullHeight	boolean, sets height to 100%
noShrink	boolean, sets flex-shrink to 0 - default is 1
alignItems	string, one of align-items css values
alignContent	string, one of align-content css values - maybe this one is actually not needed?
justifyItems	string, one of justify-items css values - maybe this one is actually not needed?
justifyContent	string, one of justify-content css values
alignSelf	string, one of align-self css values
direction	string, one of flex-direction css values
wrap	boolean, sets css value of flex-wrap to wrap
wrapReverse	boolean, sets css value of flex-wrap to wrap-reverse

We could also have options for margins suited for using spacing tokens only:

Prop	Description
margin	string, accepts one of the spacing tokens and pass it to margin="spacingL" to margin: 1.5rem
marginTop	string, accepts one of the spacing tokens like marginTop="spacingL" transformed to margin-top: 1.5rem
marginBottom	string, accepts one of the spacing tokens like marginBottom="spacingL" transformed to margin-bottom: 1.5rem
marginLeft	string, accepts one of the spacing tokens like marginLeft="spacingL" transformed to margin-left: 1.5rem
marginRight	string, accepts one of the spacing tokens ike marginRight="spacingL" transformed to margin-right: 1.5rem

The proposed solution

At the end this component would end up as something like this:

<Flex
  direction="column"
  alignItems="center"
  justifyContent="center"
>
  <Flex marginRight="spacingL">I have 24px margin on the right side</Flex>
  <OtherComponent />
</Flex>

I’m curious WDYT, thx for any comments or feedback 🙂

[mshaaban0]

@burakukula Thank you for your proposal.

IMO, I was hoping to see us using standard CSS more often, however, since emotion is already draining our web-app performance, and flex is used more than 400 times in our code base

@wichniowski pointed out that this component could actually help us to reduce the cpu usage caused by styles recalculation, which I believe is a great point, and it would be nice to validate that

I would be interested to see if this component can actually help us if we rely on css only when we build it.

[mshaaban0]

@burakukula yes, we can create two react components one with emotion and one with css only, render each 1000 times in an empty html, and use react profiler to see the results. feel free to reach out if you want to pair on this.