---
robots: nofollow, noindex
tags: status
---
# November/December Project Cycle: (Nov 9 - Dec 31)
## Quick links
[GitHub Milestone](https://github.com/microsoft/fluentui/milestone/19)
[Create a New Proposal](https://github.com/microsoft/fluentui/issues/new?body=%23%20Project%20Proposal%0A%0A%23%23%20Problem%0A%23%23%20Appetite%0A%23%23%20Solution%0A%23%23%20Risks%20%28Rabbit%20holes%29%0A%23%23%20Out%20of%20scope%20%28No-gos%29&labels=Type:%20Feature)
## Proposed Projects for Nov/Dec
|Project|Status|Contributors|
|---|---|---|
|[new Fluent UI icons (svg)](https://github.com/microsoft/fluentui/issues/15758)|[Publish New Icons](https://hackmd.io/KU2pQNXpRaG0UXZO8aDyNg) [Icon Convergence](https://hackmd.io/jg3hhF0qS9yPx41e9rukfw)|Tomi
|[Separator Convergence](https://github.com/microsoft/fluentui/issues/15759)|Need Writeup|Josche|
|[Consume react-button Buttons in TMP](https://github.com/microsoft/fluentui/issues/15897)|[Reviewed](https://hackmd.io/bv1a7fTTTOGfVqjnlTZz_g)|Mak, Miro|
|[Consume ThemeProvider in TMP](https://github.com/microsoft/fluentui/issues/15749)|Reviewed|Xu, Miro|
|[Memory consumption measurement for Teams/northstar](https://hackmd.io/4v71gvX0Td2aPGG8xSriAA)| Reviewed |Xu, CC: Levi, Miro|
| [It's a repo in a box](https://github.com/microsoft/fluentui/issues/15900) + ecosystem| Need Detailed writeup | Jon, JD |
|[v8 release tasks](https://github.com/microsoft/fluentui/projects/36)|GitHub Project |Elizabeth |
|[Fluent UI upgrades (northstar)](/_7uLsbHXS6ytTBOvVNaURg)| Reviewed |Shift, Ling|
|Start working on react-badge| Need Writeup |Ling|
| Shield | | Ben |
## new Fluent UI icons (svg)
### Week 4 - 12/14
#### Achievements
#### Objectives
#### Learnings
### Week 3 - 12/8
#### Achievements
- Wrapping up test suite for icon overrides
- Documentation update on Fluent UI website comming soon
- react-icons-mdl2 published
#### Objectives
- Update documentation on wiki page for the icons
- Publish the new icon package
- publishing of react-icons end of week
#### Learnings
- Markus will reach out to Angela/Peter on Icon usage flowchart
### Week 2 - 12/1
#### Achievements
- Synced with Markus to start work on updating icon documentation. Need to add examples for react-icons-mdl2 package and update usage information for the package
- Followed up with Andrew about usage of new package in Teams. It makes sense to use the new Fluent Icons package, with the caveat that some Teams icons have a viewBox set to `viewBox= 2 2 16 16` and the default Fluent Icon in the package is shipped as `viewBox= 0 0 20 20` so need to add padding to make it look right.
#### Objectives
- Add reference to package once published
- Ablity to override icons globally
- Finalize updating icon documentation
- Update v8 components to leverage @fluentui/react-icons-mdl2
- May have some bundle size impacts for AMD
- Follow up with Spencer on publishing react-icons-mdl2
#### Learnings
### Week 1 - 11/16
#### Achievements
- Script is finished, waiting to be published to system repo
#### Objectives
- Add reference to package once published
- Ablity to override icons globally
- Updating icon documentation
- Update v8 components to leverage @fluentui/react-icons-mdl2
- May have some bundle size impacts for AMD
- Follow up with Andrew on Teams about his icon learnings - and using the new package
#### Learnings
## Separator Convergence
### Week 4 - 12/14
#### Achievements
- CreateComponent script done, out in PR
- RFC for documentation in hackmd
- OpenUI comparison for separator
#### Objectives
- Need to work with someone on resolving differences between v8 and northstar
#### Learnings
- Challenge here is reconciling differences between v8 and northstar
### Week 3 - 12/8
#### Achievements
- CreatePackage and CreateComponent scripts in branch, in review
#### Objectives
- Working on this more this week
#### Learnings
### Week 12/1
#### Achievements
- Working on create package script
- Adding create component script
#### Objectives
- Using script to create separator - Name Divider
- Working on Open UI research
#### Learnings
- Decided on Divider name
### Week 1 - 11/16
#### Achievements
#### Objectives
#### Learnings
## Consume react-button Buttons in TMP
### Week 4 - 12/14
#### Achievements
- `makeStyles` moved into separate package to allow for quicker iteration.
- Added support for `global` selectors.
- Added support for `variants`.
- Mostly there in terms of styling of `Button` in `react-button` when compared to when it was using previous iteration of `makeStyles`.
#### Objectives
- Vet in northstar docsite and then transition into TMP once we feel good about it.
- Fix screener issues.
- Resolve API differences.
#### Learnings
### Week 3 - 12/8
#### Achievements
- Initial [draft PR](https://github.com/microsoft/fluentui/pull/16172) using prototype `makeStyles` to style `Button` in `react-button`
- Styling mostly there but missing support for global selectors for focus scenarios.
- Support for tokens and theming available but some token overrides seem to have broken in the process.
- Concerns about bundle and perf hits, need to follow up with Miro and Shift. May be because of changes I made to support it.
- It does solve the specifity issues.
#### Objectives
- Follow up on concerns above and get a plan for working with this in other components on January.
- Vet in northstar docsite and then transition into TMP once we feel good about it.
#### Learnings
- Styling is hard.
- `makeStyles` solves one the biggest issues.
- The underlying framework is really good and flexible.
### Week 12/1
#### Achievements
- Conversations on styling override approach ongoing
#### Objectives
- Porting API and styling differences
- Resolving ambiguity
#### Learnings
- Styling is HARD, TMP is harder
### Week 1 - 11/16
#### Achievements
- In sync this past week
- Write up for makeStyles/component tokens? - [Link]()
- Testing makeStyles in Office, Teams, Outlook
- DOM order overrides might not work
- Agreed to update makeStyles instead of using DOM order
#### Objectives
- Update makeStyles
- Meet with David/Shift on the plan there
#### Learnings
- Component Tokens - complexity using variables
## Consume ThemeProvider in TMP
### Week 4 - 12/14
- Discussed different [API proposals](https://hackmd.io/Bz1xS3HRRYmsrZtmy_zpCg) for make animation styles. We will go with option 2 for now.
- Tried using `makeStyles` for styling v7 components (Callout/Checkbox).
#### Objectives
- Try out using `makeStyles` on v7 examples. Summarize/fix any issue found.
- Perf comparison between makeStyles and mergeStyles
- Can we get more realworld testcases?
#### Learnings
### Week 3 - 12/8
#### Achievements
- Working on registering animations
- Spent most time on memory investigation last week
#### Objectives
- PR for registering animations this week
#### Learnings
### Week 12/1
#### Achievements
- Understanding components styles in TMP
- Close collaboration with Mak on Button work
#### Objectives
- Working on registering animations and font-faces without file scope
- makeAnimations and makeFonts
#### Learnings
- Not possible to convert directly from TMP theme to converged theme
- Convert scenario at a time
### Week 1 - 11/16
#### Achievements
- Able to use `react-button` and `ThemeProvider` in v0 `docs` and got FUI screener running (thanks to Miro's help; [draft PR](https://github.com/microsoft/fluentui/pull/15914)) (this is typescript version of the button, tho not ideal)
- Able to map `ButtonVariables` (in v0 theme) to `ButtonVariants` (in v8 theme)
#### Objectives
- Finish mapping `ButtonVariables` (in v0 theme) to `ButtonVariants` (in v8 theme) and add any missing button tokens to v8
- Support registering font faces and animations
- Figure out how to handle `componentStyles`: likely path is to move most of these definitions to `Variables`/`Variants` and use `makeStyles` to create one-off style overrides
(The way we migrate components styles it to component variables? for the ones that don't belong, move to makeStyles and create a classname?)
#### Learnings
- It's not required to converge on single renderer to unblock using `react-button` in TMP
## supporting styling in TMP (Miro & Shift)
### Week 4 - 12/14
#### Achievements
- PR for `makeStyles` to merge it to master and simplify testing
- tested on v8 button
- global selectors
- keyframes
- media queries
- converted object matchers to functions as proposed by David
```js
// before:
[[{primary: true}, {background: 'blue'}]]
// after:
[[p => p.primary, {background: 'blue'}]] // improved perf
```
- perf details: https://hackmd.io/pox-riItRQ2WeGGEWXmATw
- on par with Emotion
- 10-20% slower than CSS
- 2x faster than Fela (current northstar)
- IN SYNTHETIC TESTS
#### Objectives
- test in TMP
- Perf numbers in TMP
- test IE11
- build time magic
#### Learnings
- IE11 does not support `'string'.startsWith()`
### Week 3 - 12/8
#### Achievements
- PoC implementation of makeStyles with atomic CSS
- tested on couple of v0 components
- summary of styling approaches we've tested so far: https://hackmd.io/9fuFHIVjQRSyPgeVQlh-tA
#### Objectives
- test on v8 button
- discuss/address issues/concerns found by Mak
- improve perf
- test IE11
#### Learnings
- new makeStyles perf seems to be comparable to Emotion
- ~20% slower than static styles!
### Week 2
#### Achievements
- Working on makeStyles update to meet TMP needs
#### Objectives
- Meeting to work out styling approach tomorrow
#### Learnings
## Memory consumption measurement for Teams/northstar
### Week 4 - 12/14
#### Achievements
- Presented initial measurements with teams
#### Objectives
- resolving feedback
- Compare measurements in different environments
- Electron
- Windows vs Mac
- Working on automating measurement
#### Learnings
### Week 3 - 12/8
#### Achievements
- Measurements available in ppt in chat
#### Objectives
- Share out with teams
#### Learnings
- see ppt
### Week 12/1
#### Achievements
- Synced up on plan
- Take initial measurements (mock chat scenario)
- ETA this week
#### Objectives
- ETA on measurements this week
#### Learnings
- It's not clear where the hot spots for memory are
- We need to provide estimates on memory cost of rendering fluent components
- Manual is more useful than automation at this point
## It’s a repo in a box
### Week 4 - 12/14
#### Achievements
- Worked on sample documentation consumption experience
- Will share soon
#### Objectives
#### Learnings
- Learnings around publishing on NPM
- Training for folks on publishing components
- A lot more documentation rather than one-off hand holding
- Help teams know what they need to know
### Week 3 - 12/8
#### Achievements
- Made some progress, no major updates
#### Objectives
- Demo to share end of week for feedback
#### Learnings
### Week 12/1
#### Achievements
- Looking at 3rd party teams-component library
- Reaching out to other teams interested in publishing components of their own
#### Objectives
- Get a proposal doc for the work
- Document experience for publishing and consuming components
#### Learnings
- Identified a lot of tooling support
- Lean on standard js ecosystem tooling
- Don't want to end up with large matainece cost here
### Week 1 - 11/16
#### Achievements
#### Objectives
#### Learnings
## v8 release tasks
### Week 4 - 12/14
#### Achievements
#### Objectives
#### Learnings
### Week 3 - 12/8
#### Achievements
- Removing react-button as default export
- No longer in @fluentui/react by default
- Available in undocumented @fluentui/react-next
- Follow up on this package
- Still available in @fluentui/react-button package
- Plan long term for converged components is via independent packages
- Webpack file deduping, Dalimil from Wac working on this
- Helps a lot with bundle size during upgrade
#### Objectives
- Website updated for version 8
- Communication updated on button and timeline
#### Learnings
- Verifying with partners before locking version 8
### Week 12/1
#### Achievements
- Found an issue (we already knew about). Got a bunch of spin button fixes merged.
- Spin button onChange handler
- Wrote up spec
#### Objectives
- Go through remainin v8 open issues, triage what needs to be done or not
- Get website updated for v8 (thanks Mak!)
#### Learnings
- People are trying v8-beta! :tada:
### Week 1 - 11/16
### Week 2 11/24
- spec for spin button
- Figuring out when onChange called for spin button can be complicated
- Making updates to the websites
- Cherry pick all v7 commits as required
- WAC going through v8 upgrade -> challenging
- office online repo depends on packages in fabric internal -> depends on packages in the mdigard repo
- dependency hell \o/
- Diamond dependency problems
- Just upgrading some parts with v8 required aliasing
- Webpack not being intelligent enough to dedupe modules, e.g. rename package from uifr to fluentui, duplication even if both have the same content
- Is there a way to identify duplicate files as a webpack plugin and remove them ? plugins exist to dedupe but not generate aliasing
- David looking into prototype plugin
#### Achievements
#### Objectives
#### Learnings
## Fluent UI upgrades (northstar) - Ling
### Week 4 - 12/14
#### Achievements
* All tests can be green consistently
* Perf metrics are now available
* Bundle size gates -> all chunks are smaller except for one
* The one larger chunk is no longer blocking
* Applied fixes for majority of currently reported issues
#### Objectives
* Hunt for more reviews -> 9 review groups
* Convert blocking reviews to approvals
#### Learnings
* It's easy to create your own language/grammar to specify tests - terrible for maintenance
* Cypress features are great for debugging/maintaining browser tests
### Week 3 - 12/8
#### Achievements
- almost green CI
- Bundle size gates (bundling lodash related to icons)
- Working with ES folks in TMP
- Positioning library (popper) smallish? issues
- Feature teams to review and approve upgrade
- Difficult as we go in December
#### Objectives
#### Learnings
### Week 12/1
#### Achievements
- Upgrade PR can build with northstar v.51
- [HackMD with upgrade issues](/Hfewou_1TwWHiMTjRMG-pQ)
#### Objectives
- Work through outstanding list of issues
- Working on getting to completely green CI (end to end tests)
- 3/4 of end to end tests have updates/fixes
- [shift] analyzing bundle size gates
- Next step fixing regressions
#### Learnings
- Learning from bundle size investigation
- Moved icons to JSX (should improve bundle size)
- Multiwindow comes from different applications
- Each app has own copy of fluentui (previous theme object was shared)
- Icons are not shared
- fluentui probably needs to be a shared bundle / vendors
- Moving icons to theme chunk as workaround
- include levi in conversations
### Week 1 - 11/16
### Week 2 - 11/24
- Unit tests all green \o/
- Solved many TS issues caused by TS4 upgrade in TMP
- Biggest blocker is E2E tests failing with visual regressions
- Some caused by bugs
- SOme caused by intentional design changes -> need feedback from feature teams
- Main object hasn't changed -> Green CI
- After green CI start the backporting and review chasing game
Going! :car:
#### Achievements
- Migration of tmp to new icons
- eslint plugin detect use of old icons at build time only catches half of usage
#### Objectives
- Fixing up unit test and end to end test
- Issues around mocking hooks, this is biggest issue for unit tests
- Requires understanding of why the hooks were mocked in the first place
- [TODO] Ling link to examples in TMP
- In tests
- Use is drilling down into components and setting state directly
- Accessing instance directly
- Huge number of tests to update
#### Learnings
- Why mock hooks?
- Unfamilarity with React?
- Overuse of mocking, driving for code coverage
- Found actual bugs in .51
- Can we improve tests to catch things like this?
- This should be the default
## Start working on react-badge
- Want to build converged badge directly using new component and styling model
### Week 4 - 12/14
#### Achievements
#### Objectives
#### Learnings
### Week 3 - 12/8
#### Achievements
#### Objectives
#### Learnings
### Week 12/1
#### Achievements
- Full time on TMP upgrade
- Charles did badge open ui research
- [todo link]
#### Objectives
#### Learnings
### Week 1 - 11/16
#### Achievements
#### Objectives
#### Learnings
---
## Projects from October
|Project|Status|Contributors|
|---|---|---|
|[v8 release tasks](https://github.com/microsoft/fluentui/projects/36)|GitHub Project |Elizabeth, Xu, Jon, Mak |
|[Fluent UI upgrades (northstar)](/_7uLsbHXS6ytTBOvVNaURg)| Reviewed |Miro + Jon|
|[Versioned docsite for northstar](/roW27OhISDmCcQnOm2hviA)| Reviewed | Ling |
|Avatar, Badge/Status| | Ben|
|[Converge Tabs](https://hackmd.io/JaKTijmWS2a5bJU4CvI5iQ)| | Ben|
|[Bug bash! _Subset of v8 release tasks_]( https://hackmd.io/OhQnHLNMQgqeLGGCNYQNSQ?both) |Done | Jon
|Integrate hooks and utilities into react-northstar| On-Hold| Levi |
|Shield| | Tomi|
|Bug fixing|Done|Jon|
|[v8 IE11 polyfill alternative](https://hackmd.io/SVBThXZNSimOx3t-RDbygw)||David, Tomi, Xu|
---
# More projects for Later
|Project|Status|Contributors|
|---|---|---|
|[Validate hooks approach in v0](https://hackmd.io/fOIeQHflTnymsE4uxKpCpA)||Levi|
|[Tooltip](https://hackmd.io/6RdyiPsYQvu0Ljy3FVWuFA)| Reviewed |Josche/Mak|
|Add v0 Debug & TelemetryGuard to Teams|||
|Add perf telemetry to v7||Later|
|Script/Codemod to rename all the IPrefix interfaces [#10266](https://github.com/microsoft/fluentui/issues/10266)|||
|v0 Docs site - make sure examples for each prop exist and are reasonable|||
|Customer connection/feedback/gripes | | Paul|
|Allow typescript to be imported?|Write Proposal|Shift/Levi + Elizabeth|
|Menu component||Ben/Tomi + Charles|
## More links
[Shared OneNote for eng process][onenote]
[Accessibility Issues](https://dev.azure.com/microsoftdesign/fluent-ui/_queries/query/ab37cec7-fd8f-4828-99ac-d56e65396ada/)
[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
[sprint53]: https://dev.azure.com/microsoftdesign/fluent-ui/_sprints/backlog/fluent-ui%20Team/fluent-ui/Sprint%2053
[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