Stack/Flex Convergence

[andrefcdias]

Preparation:

• Started prep
• Open UI Research complete
  • https://open-ui.org/components/flex.research/
  • PR: Add initial research for Flex component openui/open-ui#264
• Comparison on v8 and v0 complete
  • In spec comparison: Spec
• Gather open GitHub issues related to component in epic issue
  • Flex
    • Command bar doesn't resize properly with flex configured #16268
    • Attachment Component Won't Update Progress Indicator When Inside Flex With Scrollbar in Teams for Windows Client #16250
  • Stack
    • Wrong horizontal gaps between Stack items in RTL mode #15795
    • there is no overlay property on overflow in IRawStyleBase #15524
    • StackItem does not accept a flexBasis prop #12694
• react-* package scaffolded
  • PR: Converged Flex component scaffolding #17332
• Component Spec authored and reviewed
  • https://github.com/microsoft/fluentui/blob/master/packages/react-flex/Spec.md
  • PR: Converged Flex spec #17034
• Deliverable: Reviewed component spec

Conclusion

• Started concluding
• Create migration guide
  • PR: Flex deprecation #18236
• Reverting existing work
  • PR: Flex deprecation #18236

[andrefcdias]

February Project cycle

Goals:

• Open UI research and submission of proposal
• Spec creation and approval
• Flex implementation
• Unit tests

Stretch goals:

• Storybook stories
• Conformance and VR tests

[JustSlone]

Update:

• Making progress on research for Open UI
  • Difficult to reconcile layout components via Open UI research

[paulgildea]

Here's some links that I just quickly grabbed that are in Flex/Stack layout domain:

• https://getbootstrap.com/docs/4.3/utilities/flex/
• https://primer.style/components/Flex
• https://fluentsite.z22.web.core.windows.net/0.52.0/components/flex/definition
• https://developer.microsoft.com/en-us/fluentui#/controls/web/stack
• https://material-ui.com/components/grid/ (a one-dimensional version of this)
• https://www.w3.org/TR/css-flexbox-1/
• https://ant.design/components/space/ (neat way to distribute remaining space across children elements)

My hypothesis is that folks would like the feature set of CSS Flexbox in a React based package - specifically for just 1D horizontal/vertical children layout.

Hope this helps!

[chrisdholt]

Update:

• Making progress on research for Open UI

  • Difficult to reconcile layout components via Open UI research

@JustSlone I've added some feedback on the Open UI PR and can understand the difficulty you noted. This may be one that you find is specific and helpful to React.

From a convergence standpoint, I don't see us adding an abstraction like this in the form of a component for the web components. Previously, in our FAST React packages we had a composable react-based layout package built off CSS Grid to explicitly offer what @paulgildea called out above. When we shifted to focus on web components, we had some asks if there would be a web component version, but in the case of custom elements it seems like an unnecessary abstraction of the platform which only adds complexity.

All that said, here's a link to our (now deprecated/archived) package which may be beneficial for your research :): https://github.com/microsoft/fast-react/tree/master/packages/react/fast-layouts-react#fast-layouts-react

I'm happy to walk you through what we did and our reasoning for it if you like.

[andrefcdias]

Thanks for the feedback and CR, @chrisdholt, I've gone ahead and answered your points on the research PR.
I'd also love to hear about the reasoning behind it if you have the time!

[andrefcdias]

Update:

• Submitted Open UI PR
• Got PR review and applied revisions

[JustSlone]

Update:

• Gathered github issues
• inprogress: Comparison between v0 and v8

Goal for Feb:

• Finish spec

[JustSlone]

Update - 3/1

• Submitted PR with the finished spec, looking good

Goals for March:

• Finish implementation @andrefcdias elaborate on goals for March

[andrefcdias]

Goals for March:

• Deliver spec and close Preparation phase
• Finish Flex implementation with unit tests

Stretch goal:

• Add storybook stories

[JustSlone]

Update:

• Created PR for scaffolding

In progress:

• Implementation starting tomorrow

[JustSlone]

Update:

• PR for scaffolding merged
• No work otherwise

[andrefcdias]

Linking #17923 as the implementation relies on CSS vars and without guaranteeing their uniqueness Flex cannot be used inside of another Flex and user variables might colide with Flex.

[andrefcdias]

Over the past days there were discussions about Flex and the concerns of performance/bundle size vs the benefits we get from a component like it.
The conclusion we came to is:

• Any implementation we come up with will always be an extra layer with regards to performance and bundle size, compared to just using makeStyles directly.
• There's little benefit to usability given that the user needs to learn how to use the component API regardless. If they already have CSS knowledge, then no learning is required.
• Users are limited to the functionality/prop support we end up implementing, forcing them to override in edge cases.

Next steps will be to come up with a migration guide and removing the existing implementation.