---
# System prepended metadata

title: 'Project: Finish up `MenuButton` and `SplitButton` integration in Office Online UI'
tags: [pitch]

---

---
robots: noindex, nofollow
tags: pitch
---

# Project: Finish up `MenuButton` and `SplitButton` integration in Office Online UI

### Problem

We have started integrating some of our vNext components in Office Online UI, specifically `Button` and `ToggleButton`. By integrating `MenuButton` and `SplitButton` we will have replaced ~90% of the front-loading components for the Ribbon and we can get a better measure of the performance improvements we are getting on an existing scenario.

### Appetite

Effort III: Weeks.
Milestone: October Project Cycle Q4 2021.

### Solution

- [x] Bump OOUI to latest package versions of FluentUI vNext.
- [x] Make fixes on `RibbonButton` and `RibbonToggleButton` to make them adhere to the latest patterns in Fluent
- [ ] Create vNext versions of `RibbonFlyoutAnchor` and `RibbonSplitButton` and integrate them as feature gates in the Ribbon 
    - Partially done, version created for `RibbonFlyoutAnchor` but not for `SplitButton` 
- [ ] Get both flamegrill and puppy-run measures of performance before and after the changes
- [ ] Get a PR out and reviewed to be able to start staging the consumption of the change

### Risks (Rabbit holes)

- OOUI is still in Typescript 3.9 so there is always the possibility of something from vNext not being compatible.

### Out of scope (No-gos)

- Integrating other components is out of scope.
- The actual staging of the change will be controlled by our OOUI partner's priorities so that is out of scope for this change.

---

## End of month retrospective

### What was achieved?
The version of converged packages used in OOUI was updated to latest, which required making a bunch of changes to achieve the correct outcome. A version of `RibbonFlyoutAnchor` using vNext `MenuButton` was created and is working correctly.

### What did we miss?
`RibbonSplitButton` is still work in progress that needs to be finished. After finishing this, measurements with both flamegrill and puppy-run will need to be done.

### What went well?
Collaboration with the WISE team has been going great. Kelsey joined the effort more actively this month and we have had a number of conversations talking about the approach we are following with great feedback coming from their side and a good understanding of why we are doing this the way we are being achieved.

### What could have gone better?
The project was maybe too ambitious given we also needed to update the versions of our packages which was not correctly accounted for in the scope or the risks. We should be mindful of correctly scoping the project as we move forward.

### What changed from initial expectations?
As Kelsey has more actively joined the effort we decided on letting her take point on the implementation of `SplitButton`, however, since she was ramping up on this work and the other points took priority that task has been moving slowly or being delayed consistently.