---
robots: nofollow, noindex
tags: status
---
# May Project Cycle: Sprint 49 & 50 (May 4 - May 29)

## Quick links

[Sprint 49 (May 4 - May 15)][sprint49]

[Full VSO backlog][backlog]

[Fluent UI Roadmap](/zS7XP735R76Si87i7aI2Aw)

## Projects on deck for 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|
|Shield|N/A|Elizabeth|
|Strict Mode support (concurrent)|In-progress - Michael|Xu|
|[Accessibility fixes](/QgeTil9FTd6pb5BVj0GWZw)|Later|...|
|Real world Performance baselines|Later|...|
|Open UI|Later|Levi|
|MVP repo of custom Fluent UI React components (Hudson, Office-start?)|Later|...|
|IE11 support for Fluent UI styling|No-proposal investigate in may|Jon, David, Ben|

## Weekly updates

### Convergence

#### Achievements

| Component | [Converted to FC](https://github.com/microsoft/fluentui/projects/35) | Static SCSS | Compose | Testing/Stabilization/A11y | Exported in v8 | Exported in v0 |
|-|-|-|-|-|-|-|
|Button| Merged | **Updates in PR** | **Initial draft merged** |
|Link| Merged | Merged | **In PR** |
|Slider| Merged | Merged | **Moving to hooks** |
|Checkbox| Merged | Merged | **Initial draft in PR** |
|Toggle| Merged | Merged | |
|Pivot| Merged | **In PR** |
|Avatar| In branch | In branch |In branch |

Next work (jslone):
- Get some of these into Teams (see if it solves perf)
- Baseline perf as part of investigation?

Additional items:

| Feature | Status |
|-|-|
| RTL in scss | Merged |
| ThemeProvider package checked in | Merged |
| SASS typescript build outputs stylesheet for useStylesheet to consume | Focus for week 4
| Styles can be rendered in child window | Blocked
| Styles can be rendered in SSR | Blocked
| IE11 polyfill performance exercising | In progress
| IE11 polyfill can render CSS variables scoped | Validated
| IE11 polyfill can render inline style variables | Validated
| IE11 polyfill can handle classname mutations | Failed, PR out
| IE11 polyfill can render variables in :before and :after | Failed but fallbacks work
| Compose `classes` option added | Merged
| Compose `classes` option can be a function | **In PR**
| mergeProps moved into react-compose | **In PR**
| Button package uses react-compose | **In PR**
| Slider tests and fixes| Merged |
| TS-Morph plan for running mods | Shaped |
|Use ThemeProvider to provide css variables instead of scss| Merged |
| Integrate ThemeProvider into v7, ensure backward compatibility with Customizer and loadTheme. | **Merged** |
| Integrate ThemeProvider into v0, ensure backward compatibility with Provider | |

#### Next objectives

* Finish merging scss conversion efforts.
* Base theme package scaffolding and base tokens work.
* Update `classes` support for `compose`, add tests.
* Move `mergeProps` to `react-compose` package, add tests.
* Adjust `scss` pipeline to output stylesheets, add tests.
* Use `compose` to build `Checkbox`.
* Use `compose` to build `Slider`.
* Finalize work to use `compose` to build `Link`.
* Further improvements on `Button` and start work on `MenuButton` and `SplitButton`.
* Ensure v0 compatibility
* Integrate in TMP first, side by side with v0 button before replacing v0
* Need to resolve the 1500+ lines of styling overrides in tmp

#### Learnings

IE11 polyfill investigation progress: Optimistic, but investigating bugs that are confusing

See experiment in IE11: https://github.com/dzearing/token-fun
* Inline variables work (style="--foo: red")
* Inline variable mutations work
* Variables through class work
* Scoping seems to work most of the time
* initial state renders fine
* classname mutations create problems
* react replacing the classnames is fixable, PR out
* new classname defines new variable value, some subelements don't seem to pick it up. Digging into what's unique.
* Classname mutations break styles - PR out
* :before and :after classes with variables do not (due to IE11 bug), fallbacks work, no known workarounds
* Some issues with specificity (Intentional overrides can lose to selectors)
* Some performance concerns with cleanup and mappings

TypeScript 3.9.2 upgrade pain and suffering
* Breaks in merge-styles typings required a lot of time to find 3.7-3.9 compatible fixes

postcss-rtl plugin integrated into Just task, but introduces bundle issue
* Unnecessary prefxing of symmetrical rtl rules adds bulk. Patch in branch. Can use existing sass mixins (e.g. `@left(42px)` ) until this is resolved.

Static styling concerns/risks:
* RTL bundle bloat risks perf improvements (better runtime, worse size... tradeoffs)
* Can csslint rules help steer styling to symmetrical solutions? (better bundle size)
* Static styling specificity wars with dynamic cssinjs styling (user overrides should always be more specific, Xu workaround increasing specificity would work)
* Runtime css transforms go to build time, need to make sure our pipeline is easily reusable by partners and 3rd parties
* Jest snapshots won't have classnames expanded like before

### Base Theme & Shell 2.0 (Levi)
Status: Less Exploded :exploding_head:
- Teams and Office Web designers not using 10X design work this was based on.
- Need to understand design re-org

Update:
- Web, Benedikt, Teams, Angela, in agreement to implement Daisy/Sunmi design.
- Theme needs to be ready for engineering in 3-4 months

Achievements
- SOME Get prototype cascade done for 7-8 themes with a single component (Button)
- Finish controls for tweaking theme (for validating, discovery, and testing)

Objectives
- While waiting for tokens/styles, switch to getting build working v7 + v0 docs
- Find out which tokens and styles specifically we shuld be implementing

Learnings
- Shell2.0 is not based on Spencer's token work. OXO + Teams has a web first token work that is not compatible.

5/12

Status: On Track, slow risks fall behind
- Why/Resolution: Lost couple days to build stuff. Levi will cancel more meetings for focus time.

Achievements
- Pulled in Button tokens from Spencer and design folks
- First round of feedback/iteration on tokens with design
- Collab with WinUI / XAML
- Started branch showing 7-8 themes at various levels
- Plan has been setup with Teams for validating Fluent base theme and Shell 2.0

Objectives
- Get prototype cascade done for 7-8 themes with a single component (Button)
- Finish controls for tweaking theme (for validating, discovery, and testing)

Learnings
- v7 components don't work in v0 doc build. Blocking progress and will block UI Builder.

### Compose(), phase 2 (Shift, Marija)

Status: work in progress.

Menu is merged into master.
This week: toolbar.

We are working on `Toolbar` & `Menu` to use `compose()` for all subcomponents and verify user scenarios.

Achievements:
- Have `Toolbar` & `Menu` powered by `compose()` [in progress]

Objectives:
- Solve circular dependencies issues related to collection components

Learnings:
- minor issues related to types in `compose()` should be just fixed
- circular import dependencies are dangerous and should be avoided

### UI Builder (Miro)

Status: Behind schedule
- Resolution: Be more realistic with estimates

Achievements
- Code to UI Builder
- Improve props editors [in progress]
- extend existing `component.info` to contain necessary type information

Objectives
- [Pushed to Next Cycle] Add v7 components (blocked on build)

### Project Name (Person, Person)

Status:

Achievements

Objectives

Learnings

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