---
robots: nofollow, noindex
tags: status
---
# June Project Cycle: Sprint 51 & 52 (June 1 - June 26)

## Quick links

[Sprint 51 (June 1 - June 12)][sprint51]

[Full VSO backlog][backlog]

[Fluent UI Roadmap](/zS7XP735R76Si87i7aI2Aw)

## Projects for June
|Project|Status|Contributors|
|---|---|---|
| [Convergence - June](https://hackmd.io/LJfjwlDcQ8ythXbJTPUI4w) | Reviewed | **David**, Jon, Xu, Mak, Elizabeth, Ben |
|[CodeMods - June](/W2QJM0SLQRapeQ_rk3m5RA)|Reviewed |**Jon** |
|[Improve compose based on learnings from Menu and converged components](/x_opO2K1T42589AYebZ5vg)|Reviewed|Marija, Shift|
|[Improve react-northstar performance (css expand during build time)](/sDyAkx_dTl2RmSfJ8OGnLA)|Reviewed|Shift, Miro|
| [Pivot Overflow](/yltXoK0lTW2Lnv1uWt7-0w) |Reviewed|Ben|
|Upgrade Teams to latest react-northstar|Tactical work|Marija, Miro, Shift|
| Teams performance investigations/improvements | Tactical work | Levi
| Teams integration of converged components (just button?) | Stretch goal | ... |
| Convert v7 to eslint | In Progress | Elizabeth |
| Converged Conformance Tests | In Progress | Esteban |
|Shield|N/A|JD|
|UI Builder - v7 components -> postpone (perf) |Later|Miro|
|[Accessibility fixes](/QgeTil9FTd6pb5BVj0GWZw)|What needed when?|Paul|
|[Real world Performance baselines](/dOufoJPzRD2z8xzIFbWqiA)|Writeup for June|Paul|
|Strict Mode support (concurrent)|In-progress - Michael|Xu|
| Continue IE11 testing with converged components | Need docs on how to use v8/northstar in Ie11 |Jon, David, Ben|
|Repo in a box custom: Fluent UI React components|Later|...|
|Open UI|Later|Levi|

### Convergence

### Project Name (**David**, Jon, Xu, Mak, Elizabeth, Ben)
- End Status
- Integrate components and refinements in the Ribbon (WAC)
- KeyTips removal PR out (Button)
- MenuButton in PR (or close)
- Checkbox uses new svg Icons
- Support slot props for label and icon
- Next:
- Split Button
- Need Specs for MenuButton and SplitButton (README)
- Drive work from Daisy/Sunmin figma specs
- Accessibility, Iteraction, Tab Stops, Tokens
- Theming needs variants support (needed for Ribbon)

#### Achievements

- PR open to remove KeytipData from V8 components.
- Buttons can accept tokens inline as well as contextually
- Demo'd to react-native folks, working on alignment tokesn
- Demo'd to design, working on alignment of tokens
- Started documentation on v8 theming here: https://hackmd.io/CtOj9T-qQQmaRiDsYo1o1A
- Initial integration of Button into Office Ribbon
- Bug bash from Prague caught lots of great issues, Mak/David addressing
- codesandbox integration into PRs as a bonus
- `build:min` added to deal with timeouts in sandbox builds
- Function component conversion progress

#### Objectives

- Investigate if we can remove V7 Icon dependency for Checkbox and use `react-icons` instead, and how.
- Add tokens support for Checkbox.
- Finish off IE11 screener integration

#### Learnings

* Lots of edge cases with mergeProps and multiple layers of recomposition scenarios. Thank you Prague folks for the bug bash.
* compose works well for our own scenarios, but for partner scenarios something a little lighter for creating named groups of customized token variants for a component, without a lot of work, would be ideal.
* Customers have Button tweak scenarios - all buttons are 40px wide except one which is 20.
* We need a way to extend the theme to have multiple button variants, and that you can easily opt in to them without recomposition. Super common: literally the same component with a slight difference in token values.
* merge-styles didn't work with css variables due to typings and extra greedy kebab casing. Fix in PR.
* Tokens can eliminates gobs and gobs of style overrides!
* react-native compose not far off from react compose; opportunities to share utilities and patterns.

Demos

* Office ribbon with Button

==== Below is from previous week ====

Achievements

* mergeProps integration into v0 - Perf issues with getNativeProps
* Resolved by using handledProps v0 approach
* createClassResolver integration with Button - Perf issues with loops and extraneous logic
* Resolved by simplifying loops

Merged both changes into Button code, reduced render time by 20%:

Before:

After:

* Ramping up with Elizabeth on TextField plan
* Working with IE11 polyfill author on resolution to class mutation issue
* Merged state recomposition PR for recomposing things with state:

const ToggleButtonBase = compose(ButtonBase, {
  state: useToggleButton // transforms useButton output and adds additional state logic.

* Perf tests re-render support:


Objectives

* Get Button tokens PR reviewed and refined/merged - Done
* Initial stab at token shape
* Reviewed with Daisy and Sunmin
* compat exports for old code to stage removing Keytips/Icons/styles
* Improve perf numbers in Checkbox PR
* Added perf test for validating tokens (inline tokens overhead)
* Perf test for Theme Provider (injecting tokens, changing theme)
* [v8] Need to validate button, toggle, checkbox in real world scenarios
* Teams scenarios
* Office.com scenarios - Cards
* Start from v0 for actual convergence
* Office WAC Ribbon (Scott) - Wants static CSS for perf benefit
* Measure first, establish baseline
* Ribbon heavily uses Button

Learnings

* Things impacting perf progress:
* legacy styles support - we will drop support and export a compat layer which includes the old untouched code.
* legacy icons usage - 6% overhead using base icon plus styling/theming dependency.
* keytips contributes to bundle size; must be moved into it's own standalone package - we can't keep it going forward.

* Legacy getNativeProps slow

## Codemods

* [x] Jon starting this week
* [x] Detects tsconfigs to automate run
* [x] Testing out locally
* Target EOW - to publish for others to use
* Moving code into the fluent repo
* [x] Single run command
* Next Steps
* Feedback on logging
* Finish codemods for compat exports

## Compose

- End status:
- Need something other than compose for styling overrides

Achievements
* Met last week

Objectives
* Splitting compose into hooks prototype
* Wrapping up typings
* Menu component

### Performance in northstar

* Split render times in telemetry between various categories
* Fela perf investigate - Robin not interested in perf numbers
* Switching to emotion
* *Static css still faster but maybe interim solution*
* Untangled `renderer` from the implementation
* Still using Fela
* But can be simply switched to Emotion to test Teams perf impact and bugs.

## Pivot Overflow (Ben)
- End Status:
- In PR; waiting for final design

**Achievements**

* Pivot overflow is in PR: https://github.com/microsoft/fluentui/pull/13631
* Updated the implementation from last week to improve perf and reduce the number of layout cycles and calls to getBoundingClientRect.
* Fixed bugs and incomplete features from last time (e.g. custom header rendering inside the overflow menu).
* Waiting for final overflow menu behavior design. The user study had some issues and didn't finish last week. ETA from design is Friday 6/26.
* Demo! Functionally similar to last time, but with better perf.

**Objectives**

* Finalize and merge PR
* May need to make further changes to the design if it changes as a result of the user study that's happening this week.
* Add support for ResizeObserver for cases where the pivot resizes due to DOM changes instead of window size changes.

**Learnings**

* Perf improvements can be a rabbit hole. I spent more time than I should have trying different approaches to improve the perf of calculating the overflow.

**--- Below is from previous week ---**

**Achievements**

* Working draft of useOverflow hook, which hides items that overflow the parent container and shows an overflow menu
* Hooked up useOverflow to Pivot
* Populated overflow menu in Pivot with tabs

**Objectives**

* Add prop to Pivot to configure overflow behavior
* Clean up code and submit a PR for useOverflow
* Test and fix accessibility
* Write tests for useOverflow and pivot with overflow
* Support styling of items in overflow menu
* If time permits, measure perf and evaluate different approaches to measuring the overflow container

**Learnings**

* Tried several approaches to measuring and hiding overflowing elements. I settled on a relatively simple one, but it may need to be modified depending on perf measurements.
* Lots more reading and learning about the details of React hooks and HTML layout

**Update**
* Pull request out this week
* Need input from Design
* Need ETA

## Teams update to 0.47.0

- End Status:
- Done and merged!
- Getting in perf info as it rolls through the rings
- Drastic improvements on re-render perf
- Next:
- 0.50.0 update underway
- Upgrading icons first
- Hoping to make it smoother

~~Still in progress, unsure when it will be produced.~~
Think we're done!
TODO: Download with the team about experience
* What it's like for product to go through a cycle
* Demo of changes
* Q&A

## eslint update

* Hit perf issues a week ago;
* Slower than tslint
* Workaround for the main perf issue: Don't run expensive things in lint staged
* Share learnings with OOUI

Objectives

* Get it out today and checked in over the next few days
* PR for just config
* Need review of PR when available

Learnings
* Deprecation is slower than tslint
* Avoid running it in lint staged
* Cache option to try to see if it improves perf

Next steps
* Working through issues in CI on config PR
* Next - Make changes across many files to update tslint disable comments

## Conformance tests

- End Status:
- Issues with PR, working with Shift
- Next (this week)
- 10 more tests to finish up
- PRs out by this week

Objectives

* Finishing tests this week
* Trying to merge PR but currently blocked due to weird error (Shift is currently helping)

Achievements

* Merged about more than half the tests, working on the rest.

## Codesandbox

- End Status:
- Got react-next setup
- Next:
- Hitting a strange error, following up with codesandbox
- Expect to be done this week

## Meta notes
- Demos are good
- Talking is good
- Writing down is good?

## 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
[sprint49]: https://dev.azure.com/microsoftdesign/fluent-ui/_sprints/backlog/fluent-ui%20Team/fluent-ui/Sprint%2049
[sprint50]: https://dev.azure.com/microsoftdesign/fluent-ui/_sprints/backlog/fluent-ui%20Team/fluent-ui/Sprint%2050
[sprint51]: https://dev.azure.com/microsoftdesign/fluent-ui/_sprints/backlog/fluent-ui%20Team/fluent-ui/Sprint%2051
[sprint52]: https://dev.azure.com/microsoftdesign/fluent-ui/_sprints/backlog/fluent-ui%20Team/fluent-ui/Sprint%2052
[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

### Projects In Progress in May

|Project|Status|Contributors|
|---|---|---|
|[Convergence - May](/4v1f3b1jRAmpBbkCmV9YpA)|Reviewed|**David**, Jon, Ben, Xu, Mak|
|[CodeMods - May](/W2QJM0SLQRapeQ_rk3m5RA)|Review Thurs|**Jon**, David, Ben|
|[Base Theme & Teams Shell 2.0](https://hackmd.io/2lHy4oK-Sq6s2YBw8Aq61A?both=#)|Review Thurs|Levi|
|[Compose cont. (Use in v0/converged)](https://hackmd.io/NcvmFBECRz2p9QoLwyT5Vg?edit)|Reviewed|Marija, Shift|
|[UI Builder (Fabric, Material and composed components)](/nNmiEJpUR0q9VGWeDElODw)|Reviewed|Miroslav|

### Proposed Projects for July

- Add v0 Debug & TelemetryGuard to Teams
- Suitable style override API for Teams
- Assist upgrading Teams to v0.50.x