---
# System prepended metadata

title: 'November/December Project Cycle: (Nov 9 - Dec 31)'
tags: [status]

---

---
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

