# July Ribbon Status

## Checklist

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

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 |

OOUI:

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 |

## Reference

### Compose improvements

#### defaultProps replacement of slots/slotProps
#### initialState support

#### useHooks support

Components need a way to augment state prior to rendering. In the current `compose`, there is only a single `state` hook, which gives you state to compute a new state. This means adding more state hooks will recompute, reallocate, and respread state objects to maintain immutability.

Proposed change is to allow for an array of hooks to be given a cloned state object to be mutated. This maintains lower GC pressure, less spreads, but at the same time enabling the building of reusable hooks.

Variant hooks are a good example where we need to augment the state. We take in variants and need to add a few more classnames. Giving the hook the freedom to mutate the state object simplifies design and reduces performance overhead.

compose
### Variants support

compose(Button, {
useHooks: {
makeButtonVariants({
base: {
...tokens
},
flyout: {
...tokens
}
})
}
})