# Sept Button Plan

Overall top level goals:
* Continue Ribbon integration
* Mitigate v8 blockers for Button
* Fit and finish
* Documentation

## Ribbon integration

### Where we are

Work in August was completed to enable a flight and mechanism for future updates to be "opt-in" for dogfood builds. The WAC team is helping to merge this in, but has not yet done so due to fires and other hot issues and one of the devs being on paternity leave.

What we learned in the integration: the hooks model of recomposing gives the user a ton of control over restructuring components.

When pairing with Levi, mostly the hooks approach works for v8 with a few rough edges outlined in (Levi's plan here)[https://hackmd.io/fOIeQHflTnymsE4uxKpCpA]. Levi is making tweaks to the Buttons to make sure we don't run into blockers in v0 as well.

### Next steps

While Button was integrated in SLR, MLR still needs styling updates. Split button also needs to be integrated. Once the flight is merged, we will see if at that point we can leverage WAC devs to help carry the work forward.

## Plan

For v8, we are going to run into compatibility issues if we ship too many breaking changes too fast, so we are scaling back some things about button:

### Register static stylesheets via css in js for v8

The styling delivered by scss will be tweaked to be delivered through a css-in-js renderer provided by the ThemeProvider. In v8 this will default to a `merge-styles` renderer to avoid partner disruption and potential risk.

* Helps avoid a number of issues such as: specificity, ssr, child window projection, rtl, and extra dependencies.
* Style delivery abstracted in one place to bridge the renderers between v0 and v7.

What this looks like:

The styled `Button` export will have a `useButtonClasses.ts` file, which uses a `makeClasses` utility:

// Call hook factory to generate an window/rtl/theme sensitive hook 
// for populating classes.
export const useButtonClasses = makeClasses({ ... static stylesheet as javascript ... })

This will still use css variables to theme, but will avoid creating load ordering problems by using the default registration that v7 uses.

* Note: this is also purposefully providing a theming fallback approach if we are blocked on some of the IE11 polyfill issues we've seen, as `makeClasses` can take in a function given the theme object.

### Button `children` will be rendered in the `content` slot by default

This addresses rendering what users would expect when rendering both icon and children:

// Renders a Button with a share icon that says "Hello":
<Button icon={ <ShareIcon /> }>Hello</Button>

### Button `children` will be overridable via render function

To completely throw out slot rendering, users can provide a render function:

<Button>{ ({ state, slots, slotProps }) => (0
  <span>{state.children}</span>
)}</Button>

### Button typings will work correctly

When using `as` to change the native root element, typings will perform as expected:

<Button ... /> // Accepts HTMLButtonAttributes, returns HTMLButtonElement ref
<Button as="a" ... /> // Accepts HTMLAnchorAttributes, returns HTMLAnchorElement ref

Typings for state should also return correctly. (Some things are returning as `Record<string, any>` currently.)

### ThemeProvider updates

For css-in-js style processing, the `ThemeProvider` will also take in a `renderer` object, which will abstract the css in js registration process. The default styled version will provide a merge-styles default, but this can be easily emotion, or any css renderer here.

The styling for `ThemeProvider` is currently applied via scss and inline styles. We have a branch which moves this to
The `ThemeProvider` `applyTo` prop (value: `element | body`) will assign styling and focus visible classes to either the container element or to the body.

In order to provide compatibility with the `Fabric` component being replaced, we will update it to manage the `dir` attribute for RTL rendering.

## Work distribution

| Area | Work | Assigned to | Status |
|-|-|-|-|
| Ribbon | Flight merged to master | Scott | In progress |
| Ribbon | Old to new props translation | David |
| Ribbon | Split button styling in Ribbon | David |
| v8 Theming | Update ThemeProvider to use abstracted renderer | David
| v8 Theming | merge-styles renderer for bcompat | David
| v8 Theming | ThemeProvider updates to use makeClasses | David
| v8 Theming | ThemeProvider applyTo works correctly | Xu
| v8 Theming | ThemeProvider dir works correctly | Xu
| v8 Theming | ThemeProvider child window projection support | Xu
| v8 Theming | Customer documentation: Fabric/Customizer to ThemeProvider | Xu / David
| v8 Theming | Dark mode and HC styling | Mak and David
| v8 Button | Typings work correctly | Ben |
| v8 Button | Ghost rendered correctly | Mak |
| v8 Button | Compound rendered correctly | Mak |
| v8 Button | Fit and finish button styles | Mak and Xu |
| v8 Button | Styling updates to use makeClasses | David
| v8 Button | Variants draft PR resolved | David
| v8 Button | Updating CommandBar to use new Button | Tomi
| v8 Button | Children function support | Levi
| v8 Button | `children` rendered in `content` slot | Levi
| v8 Button | `components` defines slot containers | Levi
| IE11 support | `@fluentui/ie11-pollyfill` package merged | Tomi
| IE11 support | Screener tests for Button in IE11 | Tomi
| IE11 support | Documentation for partners | Tomi
| Website updates | Flag to opt into v8 updates | TBD
| Website updates | Button example page updates and link to old docs | TBD

## Reference

### Compose plan here

See README in PR
https://github.com/microsoft/fluentui/pull/14268/files?short_path=a61ecc1#diff-a61ecc141219991eeacc7b2af69d57b3