---
robots: nofollow, noindex
tags: status
---
# FluentUI Web AOLs: Sprint 45 (Mar 9 - Mar 22)
## Quick links
[Sprint 45 (Feb 24 - Mar 8)][sprint45]
[Full VSO backlog][backlog]
[Shared OneNote for eng process][onenote]
See something missing? Please add it in the next update.
### [Web Presence] (Mathieu)
Accomplishments
- Travis prototyping with Spencer on getting design tokens into style dictionary. Spencer to edit JSON token values.
- Zuko's playground has been integrated into the new site.
Objectives
- Update Fabric site and add new info for //build timeframe
- Token work on going for mobile starting in Figma, not using FastDNA plugin yet. Research phase. Goal to update Github from a Figma workflow.
- Touch base and converge M365 product documentation workflows and tools.
### [One repo][onerepo] (Justin)
#### Achievements
- Repo is renamed!
- https://github.com/microsoft/fluentui
- Publish office-ui-fabric-react as @fluentui/react
- Rename @fluentui/react to @fluentui/react-northstar
- CI works - 100%
- Screener, size auditor, publishing works
- Publishing approach:
- https://hackmd.io/HPUDenzVTZ6F7saTGUuzpQ
| Command | Behavior |
| -|-|
| `npm install @fluentui/react` | Installs current v7 release. |
| `npm install @fluentui/react-northstar` | Installs current v0 release. |
|`npm install @flunetui/react-next` | Installs the next major release. |
* Beachball fixes:
* Enable publishing things at different cadences (scoped publishing)
#### Objectives
From: [One Repo - What's left](/6RR8KDQ9RzSpbvD5poAD7A)
- [ ] [Xu] Move all fluent UI subpackages to beachball
- [changelog generation ](https://hackmd.io/IWdVNLNrSPGvFqcxwF8vCQ)
- [ ] Communicate convergance
- [Tracking table for rename](onenote:https://microsoft.sharepoint-df.com/teams/FluentUIInternal/Shared%20Documents/General/Fluent%20UI%20Facts/Blog%20drafts.one#Tracking%20table%20for%20rename§ion-id={A5C2991B-D4CC-495C-9C87-7E3E27E9C553}&page-id={8A39DC71-E34B-4DC7-966E-B012A4392E17}&end) ([Web view](https://microsoft.sharepoint-df.com/teams/FluentUIInternal/_layouts/OneNote.aspx?id=%2Fteams%2FFluentUIInternal%2FShared%20Documents%2FGeneral%2FFluent%20UI%20Facts&wd=target%28Blog%20drafts.one%7CA5C2991B-D4CC-495C-9C87-7E3E27E9C553%2FTracking%20table%20for%20rename%7C8A39DC71-E34B-4DC7-966E-B012A4392E17%2F%29))
- [ ] v0 doc site banner explaining rename
- [ ] Need to pass over readme, wiki, doc site for v7 and v0. Look for major issues, confusing statements.
#### Learnings
### Docs and Ecosystem (Levi)
Achievements
* Teams has PR up for generating doc info JSON file
* UI Builder work, WIP PR up
* IA for all plats reworked with Angela for //build goals
Objectives
* Review / rationalize the getComponentInfo() v0 and API Extractor v7
* Fluent UI Builder iteration will be supported in part by Miro to keep some momentum
* Get Mathieu and Zuko in workstream sync
* Review API extractor use
* Make wholistic pass on all public documentation to ensure the overall story makes sense at all entry points.
### [One library][onelib] (Jon)
* Shared utilities
* Process for renames
#### Achievements
* [Aneesha] EventListener integration PR up but not merged yet.
* [Mak] Integrated keyboard-key into focuszone
* [David] Moved keyboard-key package into repo, reduced bundle size. Still pending some loc fixes Levi called out.
* Open UI Slider research page, PR up
#### Objectives
* Write draft Fluent UI slider spec based on Fluent Design component specs.
* Write tests for all codemods
* Setup a separate package for codemods
* Use ts-morph to write mock codemods to test on sharepoint or owa (or both) code repos to determine viability
* Codemod goals
1. Rename Persona to Avatar
* This includes renaming IPersonaProps and PersonaSize
* Thigns to watch out for, replacing only our "Persona" references. There are examples of others implementing things named persona that might rely on ours, but are custom
1. Write a function transform
* Targeting either adding an ev to `onPhotoLoadingStateChange` or adding another argument to an `onRender` function. This is not necessarily realistic, just seeing if it can be done.
1. Prop modifications
* Rename a Prop
* Deprecate a Prop
#### Learnings
* ts-morph seems to provide a clean and powerful api for manipulating, modifying, and traversing javascript/typescript. It makes it very easy to change all references to an import and do renames. It does provide an easier way to modify code than Riceburn
* There is only 1 instance of oufr being imported using `require` between odsp-common, sp-client, and owa-client code bases
### [Performance][performance] (Miro)
#### Achievements
* fixed broken bundle size tracking, will wait for new results and publish
* fluent0 perf test pipeline up and running
* working on memory leaks issues reported by Teams
* Merged factory for creating bundle size performant icons. Moved out of the theme object for bundle size improvements through tree shaking.
* Step 1 - remove internal icon dependencies - PR example: https://github.com/OfficeDev/office-ui-fabric-react/pull/12164
#### Objectives
* add bundle size stats for fluent0
* perf test for compound pages (multiple example metrics)
* investigate memory consumption and leaks
#### Learnings
* perf tooling workstream resourcing is a problem - one person half-time does not bring much progress
* [Shift] [Stylis](https://www.npmjs.com/package/stylis) can speed up styles generation up to 30% via replacement of vendor prefixing in V0
### [Theming & Composition][composition] (Marija)
#### Achievements
* removed internal hard icon dependencies in v0
* prototyped tokens table to understand how the set will work with css variables (https://codesandbox.io/s/token-fun-o2gh8)
* includes icon refactor proto for Fabric icons to match import proposal
* confirmed prelim IE11 polyfill will work (not done testing though)
* [Marija] Protoype of theme interop: https://codesandbox.io/s/teams-fabric-interop-shared-w4te8
* [Shift] Removed styles overrides from High Contrast Teams theme [v0]. Composed themes now use only variables
#### Objectives
- [Shift] Introduce `compose()` functionality to V0
- Get rid of styles overrides in Teams themes (Dark & High contrast)
- work on design tokens interop
- Introduce named icon component imports to solve bundle issues
- Merge interop and css variables prototypes; define how do we leverage css variables in new styling. Work with Zearing and Peter to get into v7.
- Styling for future merging blocked on what to do. David/Levi to hash out the merge-styles/fela replacement
#### Learnings
- Investigated [IE11 polyfill](https://github.com/nuxodin/ie11CustomProperties) for CSS variables, requires more testing to ensure that it fits all required scenarios
* Theming interop is still important for convergence
* How we ship styles still needs proposals
* Need owner for Fluent UI Icons to unify the set of icons
* Idea: Moving component work and work that interfaces with design to Redmond. More framework and horizontal work in Prague.
* Work seems to go better in Prague when it requires less interfacing with design (timezone issues)
### [Shield][issues] (Aneesha)
#### Achievements
- Triage and fix new issues
#### Objectives
- [Fluent UI V0](https://github.com/OfficeDev/office-ui-fabric-react/issues?q=is%3Aissue+is%3Aopen+label%3A%22Fluent+UI+v0%22) GitHub issues are being reported. Rekha/Juraj are going to triage these.
- Met with Teams team (MWT, SMB) who's filed a bunch of the Fluent UI V0 bugs to understand their issues/needs - mixing Stardust/OUFR components.
### Website (Micah)
#### Achievements
- Merged two large PRs into a [temp branch](https://github.com/OfficeDev/office-ui-fabric-react/tree/website-updates) updating website with new "Fluent" name
#### Objectives
- Finish converting instances of "Fabric" to Fluent/Fluent UI
- Find remaining 'fabric' to determine if they need to be changed to 'fluent' (some URLs will not be changing yet)
[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
[sprint45]: https://dev.azure.com/microsoftdesign/fluent-ui/_sprints/backlog/fluent-ui%20Team/fluent-ui/Sprint%2045
[sprint46]: https://dev.azure.com/microsoftdesign/fluent-ui/_sprints/backlog/fluent-ui%20Team/fluent-ui/Sprint%2046
[sprint47]: https://dev.azure.com/microsoftdesign/fluent-ui/_sprints/backlog/fluent-ui%20Team/fluent-ui/Sprint%2047
[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
Sign in with Wallet
Connect another wallet