FluentUI Web AOLs: Sprint 44 (Feb 24 - Mar 8)

--- tags: status --- # FluentUI Web AOLs: Sprint 44 (Feb 24 - Mar 8) We merged repos this week! We have not renamed office-ui-fabric-react, but will do so once we've stablized CI build times and other misc issues. We officially moved `FocusZone` into a subpackage, after partners helped validate subpackage splits will work for them. Huge thanks to Mak, Kevin, and ODSP friends to validate. CELA and marketing have finalized on `Fluent UI` as our name! We presented [this deck](https://microsoft.sharepoint.com/:p:/t/Office_CXE/PM/EcaCW6i3epBGoxQpw3Gum2wBDi90tpsOOtZAtbrRGpNTVw?e=K7Heqe) to Rajesh and other senior leaders across the company this last week. It was very well received. ## Quick links [Sprint 44 (Feb 24 - Mar 8)][sprint44] [Full VSO backlog][backlog] [Shared OneNote for eng process][onenote] See something missing? Please add it in the next update. ### Achievements ([Sprint 43][sprint43]) #### [One library][onelib] * [5191: Share a single `@fluentui/react-focus` package](https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/5191) - We staged the break-up of the `FocusZone` component into the new `@fluentui/react-focus` package. - We first copied the `FocusZone` code and examples into the new package without removing them from the `office-ui-fabric-react` package. - To do this we had to modify the examples to use native web elements instead of Fabric components to avoid a dependency on `office-ui-fabric-react`. - We then worked on enabling Storybook on the new `@fluentui/react-focus` package. - We published a pre-release build in which we added a dependency on `@fluentui/react-focus` to `office-ui-fabric-react`, and removed the `FocusZone` code, replacing it with a re-export of everything that was already in `@fluentui/react-focus`. - With this pre-release build we communicated with Sharepoint devs to test some scenarios and look for any potential regressions and, once we were given the green light that everything worked correctly, proceeded to merge this change, officially bumping up the version on `@fluentui/react-focus` to `7.1.0`. - We also worked in moving the `FocusZone` docs and examples into a new `@fluentui/examples` package where we could take dependencies on `office-ui-fabric-react` for the examples without introducing a circular dependency problem while preserving the ability to `yarn start` the `react-focus` package. - We started transitioning to a unified eventing model and `FocusZone` was one of the first ones to test changes (related to 5377 below). * [5377: Developers have one way to do native eventing](https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/5377) Aneesha is continuing to work with Shift through edge cases when converting code to use `EventListener`. * [5425: Components in v0 and v7 should have aligned names](https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/5425) Jon OOF last week #### [One repo][onerepo] * WE ARE CONVERGED! Through the collaboration between Miro, Shift, Jason, Elizabeth and I, we have gotten our Fabric repo in a state that can take on the Fluent UI codebase. * Lots of work can be seen in the convergence hackmd (below in the Objectives) * Highlights: * Fluent UI React repo is currently in archived (read-only) mode: https://github.com/microsoft/fluent-ui-react * CI convergence took a LOT of work * Build tools folks from across the teams have figured out a good cadence and rhythm in communication * Almost all the circleci build steps have been ported over * FluentUI code import script was a good success - we were able to keep importing new code as we were improving the build tools on the Fabric repo #### [Performance] EventGroup replacement ongoing Initial investigations on next steps for supporting React concurrent mode #### [Shield][issues] * Triaged and fixed new issues as they came in. * Continued to re-triage old issues and to ping on PRs to drive them to close (we went from ~450 to ~430 issues during the sprint). * Investigated memory leak issue related to FilePicker (which uses Fabric components) in Teams. * Added (mostly moved) [Shield documentation](https://microsoft.sharepoint-df.com/teams/FluentUIInternal/_layouts/15/Doc.aspx?sourcedoc={66e5f1ff-23d0-49ab-9a7d-acf3b47344f3}&action=edit&wd=target%28Dev%20guides.one%7C7694e6c2-bb6a-4e88-916c-f75430e05012%2FShield%20guide%7Cda51d04f-b66b-0d49-a2aa-30785ff7110f%2F%29&wdorigin=703) into Fluent UI OneNote. * Turned on deprecation tslint rule in the `office-ui-fabric-react` repo and its dependencies (`styling`, `utilities`, etc.) so that we can better enforce not using deprecated props and interfaces and so that we can be more effective in removing them in major releases. ### Objectives ([Sprint 44][sprint44]) #### [One library][onelib] * [5191: Share a single `@fluentui/react-focus` package](https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/5191) - Identify deltas in features and props between the `FocusZone` existing in `v7` and the one that will exist in `v0`. Once this is done, come up with a plan to bring the two closer together. - Continue driving the unification of eventing in `FocusZone` between versions forward. * [5377: Developers have one way to do native eventing](https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/5377) * [5425: Components in v0 and v7 should have aligned names](https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/5425) Next steps (Jon): 1. Have meeting about proposed announcement/rename plan 1. Talk to Ken (Done) about codemods to enable an upgrade path * Based on that I'll spend some time learning/investigating ts-morph #### [One repo][onerepo] * We have a list of quick followup items listed here: https://hackmd.io/J39aOlQNRWe53KeYmxO71Q#Converge-Repos * We are focusing on being able to publish new FUI bits out of this repo this week * CI machines are hitting scaling issues - we need to ramp up the # of VMs in the pool and also have a strategy in place to clean out the built artifacts (FUI pkgs favors writing to /tmp which was not cleaned up after a job) * Build times will get brought down from 40min to somewhere around 20mins * We will execute on ONE manual publish of @fluentui/* packages from the newly imported code to make sure that is still working * Perf stats are going to be recorded and updated in the perf stats DB #### [Performance] * Enable fluent0 perf stats in one repo * Add bundle size stats chart to fluent0 docsite #### [Shield][issues] * Continue to drive down the total number of open issues by responding to new issues and reviewing older ones. * Finalize with Paul on accessibility bug triaging workflow and resume accessibility testing once ready. * Follow up on Teams' pipeline (ADO → Github) for issue management. #### Theming & Composition - removing internal hard dependencies on icons in the internal fluent components (part of moving the Icons out of the theme) - working with design on the tokens for the Button component and experimenting with the theme interop ### Learnings ([Sprint 43][sprint43]) * Azure DevOps CI using self-hosted pipelines require a non-trivial amount of maintenance (disk filling up in /tmp, etc); we should revisit whether this is the best perfomant way to go * Manual publish in FUI is our go-to strategy for publishing @fluentui/* packages, but will need to reconcile the use of beachball as a fast-follow * Consider (temporarily) switching fluent0 to child lerna repo [PR 12159](https://github.com/OfficeDev/office-ui-fabric-react/pull/12159) * We can turn timezone differences into a great advantage if we frame it as a workforce that can do work 24/5 - requires really high bandwidth communication methods (issues / tickets aren't good enough) [backlog]: https://dev.azure.com/microsoftdesign/fluent-ui/_backlogs/backlog/fluent-ui%20Team/Epics [issues]: https://github.com/OfficeDev/office-ui-fabric-react/issues [onenote]: https://microsoft.sharepoint-df.com/:o:/t/FluentUIInternal/Ev_x5WbQI6tJmn2s87RzRPMBTG3d0gmYJN6QCpQttOFyzw?e=rnbj9H [sprint42]: https://dev.azure.com/microsoftdesign/fluent-ui/_sprints/backlog/fluent-ui%20Team/fluent-ui/Sprint%2042 [sprint43]: https://dev.azure.com/microsoftdesign/fluent-ui/_sprints/backlog/fluent-ui%20Team/fluent-ui/Sprint%2043 [sprint44]: https://dev.azure.com/microsoftdesign/fluent-ui/_sprints/backlog/fluent-ui%20Team/fluent-ui/Sprint%2044 [onelibrary]: https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/4469 [theming]: https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/4464 [performance]: https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/4462 [composition]: https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/4465 [onerepo]: https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/4468 [onelib]: https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/4469