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

# Integrating Button into TMP scenarios

### Problem

In developing our "next" set of components one of our key aspirations is to achieve "convergence". To do this, however, there is a requirement to consume our components at all our primary endpoints. This is a problem today because we are not proofing these components in the Teams application since it is currently using the components in the `@fluentui/react-northstar` package.

### Appetite

The project is a moving target with many different layers of completeness. Getting to a "workable, if maybe not completely perfect" solution however should take us about 4 weeks.

### Solution

The solution for this is to go out and try to consume our new components in the Teams Modular Package (TMP going forward) and have them available to be used alongside the components from `@fluentui/react-northstar` during the transition process.

We are going to start with the `Button` component found in the `@fluentui/react-button` package, with the following action items taking place during this period:
- Identifying key scenarios that are prime to try this change in TMP code.
- Porting those scenarios to the `react-northstar` docsite and trying and replacing the `Button` component in them.
- Documenting and porting any API differences that need to be ironed out. That is, things that are missing in the `Button` component in `@fluentui/react-button` that need to be ported from the `Button` in `@fluentui/react-northstar`.
- Documenting and porting any styling differences so that we pass screener scenarios.
- Resolving ambiguity present in the differences that need to be ported and port them.
- Once the differences are ported, finishing the replacement of the `Button` in the key scenarios outlined above.

### Risks (Rabbit holes)

There are a lot of unknowns going into this endeavor with different possibilities for failure along the way. It is really important to avoid getting caught up and spending a lot of time into any one of them without pressing forward, however, as our goal is to find a workable solution and iron out differences, and not to find the perfect solution right away.

This work is also dependent on finding ways for the `theme` and `ThemeProvider` to be somewhat feasible solutions inside TMP. Any changes needed there could slow down the processes here. However, it is important to document those and try to move forward as much as possible in other regards.

### Out of scope (No-gos)

The complete, "perfect" solution is probably unfeasible to be delivered by the end of this project, instead focusing on delivering a workable way to use the `Button` component in TMP that we can iterate on.

The actual, published inclusion of the component in TMP is also something that is probably impossible during the timeframe of the current project since there are rules governing the inclusion of new packages in TMP. A much more reasonable expectation is that we are going to have a proof of concept of what integrating this component in TMP would look like in case we wanted to make the change in the future.