Continued styling convergence

[jurokapsiar]

Goals

• Verify makeStyles-next is performant enough
• Make it production ready

Tasks

• [x] find a good name
• makeStyles
• [ ] measure perf in TMP @miroslavstastny
• calling roster
• [x] test in Office? @xugao
• ribbon
• confirm with David
• [ ] make makeStyles production ready @layershifter
• global selector (we need to fix stylis)
• implement React wrapper for makeStyles
• [x] keyframes @xugao: #16757
• [ ] font faces @xugao
• should this be part of makeStyles
• maybe not, but we need to provide an API to process and inject static CSS
• [x] implement Provider @layershifter
• existing ThemeProvider should work
• [ ] use makeStyles in react-button @khmakoto
• PR 16172
• is it true react-button is not used anywhere and we can break it?
  • double check with David (he has done some work in Ribbon) - @khmakoto
• do we have the whole inner dev loop for it?
  • story book
  • visual tests in seperate directory -> used in Fabric Screener
• [x] remove Fabric dependencies from react-button
• still needs to be discussed
• suite package vs component package
• we cannot mix v7 and v8 components in the suite package and call it v8
• RFC Increasing focus and iteration speed in convergence - Lean the Towers v2.0 · Issue #15929 · microsoft/fluentui · GitHub
  • v7 suite package
  • converged suite package [image:818BE8C6-79CA-4240-BAE7-608CB370A468-654-00008C6F16174CE5/A4D93757-5380-4336-A8A8-ACB677E1B422.png]
  • let's do nothing for now, fix it once we hit the wall
• [ ] introduce the react-button to Northstar docs @levithomason
• there are props missing in react-button which are present in N* button (@xugao worked on that previously) - talk to @xugao and @khmakoto
• [ ] do build time stuff (@layershifter but not in January)
• do we need it right now?

Motivation

In Nov/Dec iteration, we implemented a PoC of next version of makeStyles in #16082.

Synthetic performance tests show that the new makeStyles is on par with Emotion, 10-20% slower than native CSS and twice as fast as Fela.

Unfortunately, comparison with mergeStyles (v7) and previous iteration of makeStyles (v8) is still unclear - mergeStyles (v7) seem to be equally fast but it has been blamed for its slowness which is one of the reasons to get rid of that. I am not sure if mergeStyles is generally slow or only has perf issues in specific use cases.

makeStyles goals

• build time CSS evaluation
  • RTL,
  • expand
• additive style overrides (without recomputing component styles)
• SSR
• enforces correct way how to do overrides in Application code

Risks

• In case we find out performance is not good enough, it is back to the drawing board.

[JustSlone]

@levithomason @miroslavstastny can we update this list for February and drop something similar on the February project cycle?

[miroslavstastny]

February 2021 update

In January we made a good progress on this

• moved existing v8 components and utilities from react-* packages to react-internal
• added converged react-theme with converged global tokens - #16703, merged
• added converged react-theme-provider which sets the theme on context and also inject into DOM as CSS variables
• added FluenProvider which handles RTL, and document for converged components
• added react-make-styles

Next steps:

• [ ] convert react-* components from previous version of make-styles to react-make-styles and update styles to match design spec
  • preferably do not start with a Button
• [ ] iterate on component hooks
  • slot definitions
• [ ] address todos in work done in January
  • [ ] get rid of proxy converting theme to css variables
• [ ] build time transform + remove compat from make-styles

[miroslavstastny]

Weekly update Feb 9

Achievements

• migrated Avatar to makeStyles - WIP #16793
• added support for static CSS and keyframes - WIP #16880
• compared performance of PersonaCoin (v7 mergeStyles), v8 Avatar (SCSS makeStyles) and converged Avatar (makeStyles) - #16871
• upgraded a shape of a converged theme - #16844

Objectives

• implement makeOverrides - compare performance with makeStyles

[layershifter]

@miroslavstastny can you please add items below to the tracking list?

Issues to follow up

Based on https://github.com/microsoft/fluentui/pull/16793.

A way to define and apply component level tokens

Previously there was tokens prop, but in makeStyles() we don't have it. We should figure out an approach.

Animation timings should be defined as globals/aliases?

Avatar component has some interactions, there are definitions for transitions. Should they become a part of them?

*Darker definitions for shadows

Avatar's design spec uses *Darker variants, we don't have them in react-theme definitions. We should follow up with design and update spec or theme & styles definitions. Resolved: Avatar spec has been updated to no longer use the "darker" shadows -@behowell

[miroslavstastny]

Weekly update Feb 16

Achievements

• implemented makeOverrides - compare performance with makeStyles - #16923
  • matcher logic moved from array of matcher functions to a single matcher in a component
  • 10% perf improvement compared to makeStyles, less than 10% slower compared to SCSS
• support for static styles merged - #16880

Objectives

• merge converged react-avatar
• finish makeOverrides work
• decide on component tokens / overrides story
• discuss how to handle theme-specific static styles

[miroslavstastny]

Weekly update Feb 23

Achievements

• react-avatar, makeOverrides merged
• discussed how to handle theme-specific static styles = do not support them for now
• agreed on converged packaging and versioning - alpha release tracked in #17056
• react-components created - #17100
• versions bumped to 9.0.0-alpha.0, dist tag alpha - #17093

Objectives

• get rid of SCSS in Avatar/Badge
• prune v8 dependencies in react-components
• first release of @fluentui/react-components@9.0.0-alpha - #17056

[miroslavstastny]

Continues in #17242