Adding a Flex utility for general purpose usage with shorthands to fluents spacing values

[bubulux]

I am maintaining two projects with fluent, one for the company I work for and one I privately work on.

One Issue I encountered regarding both environments is the lack of a general-purpose component for making use of FlexBox properties (like direction, justify-content, etc.) in addition to common shorthands for width/height/padding/margin/gap.

I am wondering, if there are others as well, who lack this and would appreciate a general-purpose implementation for a FlexBox component ?

I would be glad to contribute my current implementation as a starting point and engage in a process to refine the props API / options as well as implementation (which I assume has poor performance currently, because I merge lots of utility classes to make this work dynamically)

Best, Sam

[spmonahan]

It's a deliberate design decision to not include layout components like Flex, Grid, and Stack in Fluent v9 as these are quite simple to achieve with CSS these days (CSS grid was not widely available when Fluent v8 was released as one example).

I'm not aware of any plans to add layout components in the future.

[bubulux]

Hey @spmonahan, sorry for the late reply, I would like to address your response:

I realize I might not have made myself clear enough: I am not arguing that using FlexBox natively with CSS is complicated.

My primary concern is that a consistent implementation of a FlexBox layout component is not available for maintaining larger codebases (such as the one I have for my private side project and the one I am maintaining for my company).

This concern grows larger when taking into consideration, that using FlexBox requires a good amount of boilerplate, for recurring patterns, that could be easily covered with a more or less simple FlexBox props API. I don't want to dig into griffel makeStyle calls just to see what the FlexBox behavior of a given container is.

I am open to the possibility that this in itself is already a "strong" opinion, that others might not share. To me, it seems other libraries like Material UI / Mantine have components like these for very similar reasons (in addition to handling more complex dependencies like breakpoints, etc.).

Being able to:

• use native spacing tokens with quick shorthands for: padding, margin, gap
• use common dimension shorthands like width/height (100%, 75%, 50%, 25%)
• specify the position (absolute, relative, etc.)
• specify common flexbox properties (alignItems, justifyContent, direction, wrap, grow, etc...)

In any case, I, of course, respect your decision, I just wanted to clear up any misconceptions about my proposal.

At last, I would like to know, If it is okay to post a link to a package I am going to publish soon, under this thread, that will contain lots of helper utilities (including the mentioned FlexBox component). I am asking specifically because I am not sure if this is against some policy here.

Bet Sam