---
robots: nofollow, noindex
tags: status
---
# July Project Cycle: Sprint 53 & 54 (July 6 - July 31)

## Quick links

[Sprint 53][sprint53]

[Full VSO backlog][backlog]

[Fluent UI Roadmap](/zS7XP735R76Si87i7aI2Aw)

## Projects for July
|Project|Status|Contributors|
|---|---|---|
|[v7 Accessibility Fixes](https://hackmd.io/AyaMPIyKQzOJe8_yBKUgdw?both)|Reviewed|Tomi, Xu (organizer)|
|[Converge Stack/Flex](https://hackmd.io/@fluentui/rJVpxk_AI)|Reviewed|Esteban|
|[Style Override API](https://hackmd.io/vSpu2gz_RoK9ifX5sWObMA?both)|Reviewed|Levi|
|[CodeMods for props - Intern edition](https://hackmd.io/LC4PKDUlS160LVZMO_9mWA?view)|Reviewed|Jon, Trip|
|[CodeMods infrastructure](https://hackmd.io/FDpXAKqFQsCNvUfc_3a2Pg?both) : [Requirements for V1](https://hackmd.io/hFkWIhxhTAKSPGobEPT1kw)|Reviewed|Jon|
| [Function component conversions](/ydwqgpavTPqOpqA3QAq_Rw?both) | [github project](https://github.com/microsoft/fluentui/projects/35) | Elizabeth |
|[UI Builder](/5nq725ewQ4mclX51ekIk9Q)|Reviewed|Miro|
|[Tree shaking (1/2 length?)](https://hackmd.io/ARdU6YyMT5uZsqSMY5VgIg?both)|Reviewed|Shift|
|[Cards scenario for office.com](https://hackmd.io/_kqQegXFTLKwt0GchgeUnQ) |Reviewed|Mak, Shift, Roman?|
|[Complex perf examples](https://hackmd.io/-oOwrB0AT26BtD0-UtyLTA)|Reviewed|Lukas (intern)|
|[Office Ribbon convergence integration](https://hackmd.io/kJYnBEIAQUa84WAARHo0pQ)|Reviewed|David, Xu, Mak
|[Slider Updates](https://hackmd.io/oyakrIdbRkWgAg06lx4d9g) |Needs Review|Ben|
|Shield|N/A|Marija, Xu|

## v7 Accessibility Fixes (Tomi)
### Week 3 - 7/20
#### Achievements
- Bug fixes:
- [x] https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/7874
- [x] https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/7912
- [x] https://github.com/microsoft/fluentui/issues/13865
- [x] https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/7846 (in PR)
- Finished triaging bugs in ADO
- Grade in scorecard is now C (from D previously)

#### Objectives
- Continue fixing [scorecard impacting bugs](https://dev.azure.com/microsoftdesign/fluent-ui/_queries/query/fef39447-5962-4250-bd69-36ec0b9569f9/) and [high-impact bugs](https://dev.azure.com/microsoftdesign/fluent-ui/_queries/query/38ef4a22-fefc-42d2-9c2f-f2b6dab9bdb8) in our code examples.
- Finish writing triage doc.
#### Learnings
Reached out to Sarah Higley and she will be helping with triaging/fixing a11y bugs.
### Week 2 - 7/14
#### Achievements
- [x] https://github.com/microsoft/fluentui/issues/13869
- [x] https://github.com/microsoft/fluentui/issues/13633 (in PR)

#### Objectives
- [ ] https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/7852
- [ ] https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/7846
- [ ] https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/7874
- [ ] https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/7912
- [ ] https://github.com/microsoft/fluentui/issues/13865
#### Learning
- Chatted with details list, charting, calendar, etc. Pingged about Accessibility bugs
- Will triage this month and fix as much as they can
- Juraj and Ben Truelove will help with some time on triage and follow up on accessibility
- Need to follow up on accessibility specing process with design
- On-going accessibility planning for trusted testers in Fy21
- All up for all of Fluent UI across all platforms

## Converge Stack/Flex (Esteban)
### Week 3 - 7/20
#### Achievements
* Everyone agrees on the prop names.
#### Objectives
* Get Flex and Flex item working with compose.
* Remove perf hit from cloning items.
#### Learnings
* I need to get a better understanding of compose, will talk with Mak or Elizabeth about it.

### Week 2 - 7/14
#### Achievements
* Decided on renaming to Flex(react-flex)
#### Objectives
* Creating and pushing package to master
* Decide which prop names to keep and which ones to rename
* Update OpenUI with Flex naming research (PR out)
#### Learnings

## Style Override Api (Levi)
### Week 3 - 7/20
#### Achievements
- Down to 3 variables left in avatar styles
- Agreed proposed API for the signature
#### Objectives
- Ready to try out implementing the API and review
- Should be v0/v7/v8 applicable low level function for style override
#### Learnings
- 300+ lines of [notes](https://domoreexp.visualstudio.com/Teamspace/_git/teams-modular-packages?version=GBlethoma%2Frewrite-styles&path=%2FNOTES.md&_a=preview) and feedback

### Week 2 - 7/14
#### Achievements
* Possibility of converging between v8 and v0 similar/identical function for optimizing inline style objects
* 90% through style refactor in teams for Avatar (contains proposed API)
#### Objectives
* last 10% of avatar styles
* Creating utility that works in teams and v8
#### Learning

## CodeMods for props (Trip)
### Week 3 - 7/20
#### Achievements
* Added support for powerful and generic transform functions that allow for generic value changes to be handled externally to the prop renaming utility. This includes the enum case, which is now in its own predefined utility transform that is easy for developers to use.
* Better generalized the case in which a prop is embedded in a spread attribute. All of that logic is in a helper function that is called by both the prop renaming utility and the custom transform functions to maximize compatibility between the two approaches.
* Implemented support for another edge case, best depicted by the following code:

export const RenderSpinnerPropsArrow = (props: ISpinnerProps): any => <Spinner {...props} />;

The problem above being that there is no body in which to decompose the object to get the desired prop. Instead I had to manipulate the AST to create a body for this code, which wasn't challenging on its own, but getting it to interface cleanly and generally with all of the other code I had written was a ticky.
#### Objectives
* Write a few more transforms to change the value of simple types like string or number (I have a feeling that it's possible to make this totally generic, but there might be benefit in having multiple templates for developers to use to maximize flexibility).
* Test my utility outside of its testing harness on real codebases in order to get a better idea of what still needs to be done.
* An an addendum, this will require me to write more formalized codemods (than the ones I have in my tests right now), and doing so should let me better document, and then hopefully streamline, the developer experience.
* If I have extra time, potentially tackle more complex transforms that handle changes in props that are less straightforawrd, like values that are functions.
#### Learnings
* As the work of creating contributions to the utility gets easier (as I'm getting better at navigating ts-morph), the process of incorporating these contributions is getting significantly more difficult. As the codebase gets larger and more complex, new additions must both be user-friendly and compatible with every other moving part.
* Any change to a node in ts-morph renders the node unusable until one reacquires it by accessing it through its parent. This is a little bit annoying.

### Week 2 - 7/14
#### Achievements
* Implemented a codemod utility to rename props in primitives and objects.
* Finishing up simple support for enums (in PR)
#### Objectives
* Work on implementing escape hatches for more powerful overrides of the current renaming proces. Ensure that said overrides interface cleanly with the rest of the process.
* Begin to document developer process of creating a code mod in order to create a stable and safe system that allows developers to create their own codemods.
#### Learning
* Ts-morph is cool, with not great documentation

## CodeMods infrastructure (Jon)
### Week 3 - 7/20
#### Achievements
* Completed Filtering, allows it to happen globally for now but it will be easy to make it work for individual projects as well.
* You can now filter from the command line based on Regex or an Exact name match. This can be exclusionary or inclusionary depending on a flag
#### Objectives
* Add logging. Specifically for errors, what codemods were run and which files they ran against.
#### Learnings
* Maybe has still proved quite useful as a way of controlling the flow of data.

### Week 2 - 7/14
#### Achievements
* Filtering for codemods to run
#### Objectives
* More logging
#### Learning
* Implementation of filtering, may want on a global level, or per project basis
* Implemented Maybe, it's cool!

## Function component conversions (Elizabeth)
### Week 3 - 7/20
#### Achievements
- Started enabling `eslint-plugin-react-hooks` to help validate function component work
- Started working on prioritizing components to convert
#### Objectives
- Find (and fix or file issues for) function component side effect issues (see learnings) https://github.com/microsoft/fluentui/issues/14147
- Prioritize (and maybe roughly assign) component conversions/fixes, and designate ones for unsafe lifecycle removal only
- evaluate difficulty of removing unsafe lifecycles and side effects from lists
- Track down anything missing from release notes
- Figure out how to ensure fixes to v7 are being ported to v8
- check for existing changes where this didn't happen
- decide on procedure moving forward
#### Learnings
- We need to go back and fix all the places that are:
- Updating `ref.current` during render (at least in any way that will behave differently if run multiple times during the same render cycle)--[this will be a problem in concurrent mode](https://medium.com/better-programming/how-to-properly-use-the-react-useref-hook-in-concurrent-mode-38c54543857b). Thank you Shift for pointing this out.
- Calling state setters during render, partly for the same reason
- Tracking: https://github.com/microsoft/fluentui/issues/14147

### Week 2 - 7/14
#### Achievements
- Decided breaking changes should be documented in react-next RELEASE_NOTES.md
#### Objectives
- Determine final prioritized list of components to convert or not for version 8.
- Ensure [github project](https://github.com/microsoft/fluentui/projects/35) is complete and stays up to date
- Include risk assessment and current test coverage level
- Could consider partner priority components
- Drive status and make sure nothing is stuck, we agree on what's next, and people are not working at cross purposes.
- Review existing conversion PRs
#### Learning

## UI Builder (Miro)
### Week 3 - 7/20
#### Achievements
- Only 1 day of work last week
#### Objectives
* v7, v8 and v0 button side by side in UI Builder
#### Learnings

### Week 2 - 7/14
#### Achievements
* Not started yet
#### Objectives
* v7, v8 and v0 button side by side in UI Builder
#### Learning

## Cards scenario for office.com (Mak, Shift)
### Week 3 - 7/20
#### Achievements

- `Card` component research page for Open UI [in PR](https://github.com/WICG/open-ui/pull/134).
- Fix for component name grouping in Open UI made and [in PR](https://github.com/WICG/open-ui/pull/128).
- Initial package scaffolding for `@fluentui/react-image` [in PR](https://github.com/microsoft/fluentui/pull/14083).
- Implementation for the base `Card` component started.
- Reviewed Image design spec

#### Objectives

- Finish implementation for the base `Card` component.
- Merge in package scaffolding for `@fluentui/react-image` and continue moving forward with `Image` component.

#### Learnings

- Having someone from both teams on the same project is good, it allows both mindsets to be put into the product and shared responsibility means feedback is given faster.

### Week 2 - 7/14
#### Achievements
* Not much progress yet
* Split Button PR out
#### Objectives
* Adding component page for card in open ui
* Start on base card
#### Learning

## Office Ribbon convergence integration (David, Xu, Mak)
### Week 3 - 7/20
#### Achievements
#### Objectives
#### Learnings

OOUI Ribbon work:

| Work item | Status |
| - | - |
| Test `compose` with `Button` in Ribbon to replace HOC wrappers and style overrides | In progress
| Identify blocks and required improvements | Complete
| Update code to use improvements |

Compose/variants improvements:

| Work item | Status |
| - | - |
| Compose improvements: implementation | In progress
| Compose improvements: Reviewed/PR merged |
| Variants support: implementation | In progress
| Variants support: PR merged |

Button leverages improvements:

| Work item | Status |
| - | - |
| Button uses variants: implementation | In progress |
| Button uses variants: PR merged |
| Button uses compose improvements: implementation | In progress |
| Button uses compose improvements: PR merged |

Additional related work:

| Work item | Status |
| - | - |
| MenuButton implemented | Complete
| SplitButton implemented | In PR
| SplitButton needs API review | Needs discussion
| Button uses HC selectors | Needs discussion
| Button is compliant with v0 Button a11y behavior | In PR
| Button API differences reviewed | Needs discussion
| `styles` prop replacement guidance |
| Documentation for using compose/BaseButton |
| ThemeProvider can affect old/new Button (side by side support) |

More details [here](https://hackmd.io/IHhaBBOCRk-xiSAGnzRRWg)

## ~~Slider Updates~~ Move Pivot to react-tabs, and rename to Tabs (Ben)
### Week 3 - 7/20
#### Achievements
* "Pivoted" away from slider updates.
* Created new package react-tabs and moved Pivot from react-next into it. This will let partners try the new overflow behavior before v8 is published.
* PR: https://github.com/microsoft/fluentui/pull/14125

#### Objectives
* Rename to `Tabs`, leaving `Pivot` as an alias.
* Need to decide on name for `<PivotItem headerText="...">` (will start a thread in Convergence channel). Possibilities include:
* `<Tab label="...">`
* `<TabItem headerText="...">`
* `<TabPage header={<TabHeader>...</TabHeader>}>`
* ?
* Move shared scss files to a shared package
* Get back to the slider work that was originally planned.

#### Learnings
* Original plan was for Mak to move dependencies (old Button, ContextualMenu) into their own package. But we ultimately decided the most straightforward was to have a dependency on v7 office-ui-fabric-react for old components that haven't been moved into their own package yet.
* Got to learn about package dependencies, TS/Lint config files, and other fun build config items.

### Week 2 - 7/14
#### Achievements
* Still had some spillover work for Pivot overflow last week: it's now merged!
* I also spent time last week helping with some Win32 features from my past ~~life~~ team.
* Spoke to David last night and came up with a small project, to add tick marks and tick labels to slider: [Slider Updates](https://hackmd.io/oyakrIdbRkWgAg06lx4d9g).

#### Objectives
* I should have the slider updates done next week.
* Will talk more to David to find another project to finish up July.

#### Learning
* There are lots of *potential* things to work on; it's been a little harder to find a good scoped project to work on this month.

## Tree shaking (Shift) - Completed!
### Week 2 - 7/14
#### Achievements
* Completed!
* We have a tool that measures how v0 code is bundled
* 650kb of minified code for accordian/themeprovider/etc.
* Reduced to 450kb minified code!
#### Objectives
* Next step, write up summary of learnings. Blog post?
* Add pure annotations to everything (v8 code).
#### Learning
* Lodash still contributing significantly to bundle size
* for instance mergeStyles is not tree shakable completely due to side effects (only 3kb though)
* This is also true for other utilities
* Current approach of webpack isn't as effective as rollup. Rollup performs better.

## Complex perf examples (Lukas)
- Tracked elsewhere

## Projects for Next Month
|Project|Status|Contributors|
|---|---|---|
|Add v0 Debug & TelemetryGuard to Teams|Need a short writeup|Can this happen in august?|
|Integrate button into teams|Need a short writeup|Next Month?|
|IE11 polyfill work and testing|Needs project proposal |Later|
|react-m365 components (was Fluent UI Teams)|Engagement|Levi, David, is there more work?|
|Assist upgrading Teams to v0.50.x||Who will support?|
|Add perf telemetry to v7||LAter|
|Validate accessibility approach|||
|Script/Codemod to rename all the IPrefix interfaces [#10266](https://github.com/microsoft/fluentui/issues/10266)|||

> Q: What about convergence of doc sites

## Notes:
- upgrade teams
- [Levi] What is it like to upgrade products?
- Integrating our new code in real products
- [David] Insight from working with Azure Portal
- Azure portal lets anyone use what ever they want
- No single point of entry for importing Fluent components (like Teams)
- No centralized overrides, complicates upgrades
- Azure Share out, usage of v7, future plans
- They might do a brownbag
- Sync between Marija and Jon on codemods solution
- Follow up on 30% baseline

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