# Convergence in June

## What we shot for in May

* 7 components: Button, Link, Slider, Checkbox, Toggle, Pivot, Avatar

For each:

* Convert to function components
* Convert styles to sass
* Convert logic to hooks
* Use `compose`
* Add slots support
* Add any additional needed tests
* Validate nothing breaks (add shims as needed)
* Export from react-next, prepare for shipping in v8
- Expected performance gains
- Usage of css variables
- Introduction of ThemeProvider
- Way to opt into legacy components, or avoid breaks

Additional work was needed to make this all happen:

* Investigate IE11 polyfill feasibility
* Add useStylesheet and StylesheetProvider to support SSR/childwindow scenarios
* Add a ThemeProvider to provide theme generally
* Define how themes are defined
* Update Just scss task to integrate postcss-rtl for auto flipping
* Update compose to support slots, slotProps, classes and class functions
* Come up with backwards compat story for styles props

## What we got done

* All components on the list converted to function components.
* All component styling converted to sass.
* All component logic converted to use hooks.
* Some components are using compose, but not final.
* postcss-rtl plugin integrated, some blocking issues hit
* IE11 polyfill vetted, some blocking issues hit
* Initial `react-theme-provider` package checked in with `ThemeProvider` and `useTheme`
* Initial backwards compat layer in react-next for supporting legacy `loadTheme` and `Customizer` scenarios.
* `StylesheetProvider` and `useStylesheet` checked in
* Bundle size auditing hooked up to `react-compose`, `react-button`, `@react-next`
* Flamegrill tests set up for new components

## What didn't finalize

* Avatar on hold to ensure all of the other work succeeds
* `compose` slots integration still work-in-progress, PR being reviewed in parts and components still need to be updated to expose them.
* Interim RTL solution in place while auto rtl flipping is on hold until the bundle size issue is resolved
* Updates to sass build system to output stylesheet as string targeted this week to get a PR out

## What we learned

### IE11 polyfill

* It is allergic to class name mutations. It's fixable but author doesn't want to risk the change.
* Some concerns with edge cases not working right. (css variable values don't cascade in pseudo elements, but fallbacks do.)

Proposal: We should fork the polyfill repo to make required changes, and ensure that we have the right amount of tests on it.

### Build differences blocking actual convergence of v0 and v7

* We tried integrating the react-theme-provider package into v0, but getting things to build was blocked because v0 build assumes it needs to build dependent projects as well, rather than consume pre-built bits. This caused it to choke on sass imports, which blocked usage.
* Importing v7 from v0 will be blocked because v0 builds with `isolatedModules` (TS option required for babel compat) and v7 does not. Certain TS constructs which we use widely in v7 are not compatible with `isolatedModules`, and there may not be an obvious solution for all these cases.

### Bundle size affected by backwards compat

If we ship components in v8 with dependency on both merge styles and sass, we end up with bundle size penalties rather than improvements.

Penalties are OK for backwards compatibility, but we must have a story that reduces bundle size to a minimum, that becomes the "default recommendation", while those who use legacy features can continue to do so without breaks. For example;

ThemeProvider exported from v8 should have no merge-styles or Customizer dependency.

Components which use Customizer for providing the theme currently should flow into ThemeProvider. We should document using the ThemeProvider to provide theme settings.

However there's a concern: if we don't convert ALL of the components to css variables, how will this work? We have a few options:

* Don't rework every css file; just replace the theme.palette and semantic colors with variables. That way using the vanilla ThemeProvider will pipe colors into the old components, but not styles.

### Runtime perf mixed results

* Some runtime perf is improving, some is not

We're seeing great perf improvements with button, but some regressions with other components which have only changed to be function components. This needs to be investigated and addressed.

Proposal is to try and separate the backwards compat layer in a separate composed component exposed in a compat import. This would let codemods simply change the import location to keep code intact while providing guidance on manually updating the code.

## Who's doing what in June

Our goal is that by end of June, we have a solid set of release notes for the v8 release and have locked down our initial set of converged components to ship.

* Continue strict mode support (convert to FC)
* https://github.com/microsoft/fluentui/projects/35
* Finish off compose and slots integration (All)
* Finish off Slider slots, perf investigates, inline tokens (Jon)
* Finish Pivot (Ben)
* Compat layer for button and implement codemod (TBD)
* IE11 polyfill fork and fix (Possibly Elizabeth or David)
* Inline token props support (Mak)
* Finish off css build pipeline updates (David)
* Draft release notes (and update public github issue) (David)
* Finalizing all breaking changes that need codmods/shim/doc
* Polish. Work with Daisy/Sunmin to ensure visual defaults match expectations (e.g. focus-rectangle changes) (All)
* Investigate perf improvements across the components (Xu)
* Finish integrating ThemeProvider (Xu)
* Add Pivot responsiveness (Ben)
* Make sure our Theming story for V8 works (Xu, Mak)
* ThemeProvider documentation and examples
* `compose` documentation for partners (need clear messaging around `compose` not working on all components exported from V8)
* Packages for themes (e.g. `@fluentui/react-teams-theme`)
* Recommended way to customize component-level styles
- Wholesale compose conversion, or
- Selectively document which components can be composed.

Some work will need to be balanced with Elizabeth and Esteban.