# Q4 2020 Objectives & Key Results (OKRs)
We use Objectives & Key Results (OKRs) as a quarterly planning tool. These help our team focus on a few core outcomes each quarter and identify measurerable results (or sometimes deliverables) that we believe will move us closer to our Objectives.

- **Vette Fluent UI in Product​**
- Ship hooks component model and design tokens in Ribbon (dogfood)
- Ship open source subset of MDL2 icons
- OWA integrates new ThemeProvider​
- Use of converged utilities in newly build react-northstar components​
- **Prove out our new styling and component model​**
- Deliver ThemeProvider to consume the same converged primitives in both Office and Teams - Xu
- Deliver refreshed primitives for Card Scenario to Office.com and Teams
- Deliver refreshed primitives and update existing Me control for Teams
- Release a guide covering how to build components​ with new hooks based model
- Identify next set of converged primitives and roll out plan​
- Prototype and close on converged Accessibility approach​
- **Upgrades of @fluentui/react-northstar and @fluentui/react@8 are easy and less time consuming**
- Reduce the engineering cost it takes Teams to consume an update of @fluentui/react-northstar to 1eng/month
- Move Tier 1 partners on to @fluentui/react@8 by end of the quarter​
- **Customers and Partners find the answers they need when reaching out to our team through broad channels**
- Responses on React Teams channel increase by 50%​
- Increase Github Issues that are either fixed or closed by 35%​
- **The microsoft/fluentui repo fosters community and contribution with fast builds, good testing, and great documentation​**
- Improve PR/CI pipeline duration (30 day) 24m to 17m (30% improvement)
- Improve PR/CI build reliability by 30% (measurement TBD)

## Work backlog
Below is the work backlog associated with our OKRs this quarter. We won't get 100% of this work below done this quarter, but expect most of it to be complete.

- **Vette Fluent UI in Product​**
- [ ] Ship hooks component model and design tokens in Ribbon (dogfood)
- [ ] Ship open source subset of MDL2 icons
- [ ] [Finish version 8 release](https://github.com/microsoft/fluentui/projects/36)
- OWA integrates new ThemeProvider​
- [ ] Gather feedback from OWA - Xu
- Use of converged utilities in newly build react-northstar components​
- [ ] validate v8 hooks in northstar
- [ ] children as slot VS. as replacement of all slots (investigate size of breaking change in TMP)
- [ ] Finish converging FocusZone/FocusTrapZone
- [ ] Unify click outside and ESC to close scenarios between v7/v8/northstar so that components can be integrated (v7/v8 Files experience in Teams)
- [ ] style overrides hook - document, migrate TMP style overrides to it
- **Prove out our new styling and component model​**
- [ ] Deliver ThemeProvider to consume the same converged primitives in both Office and Teams - Xu
- Refresh primitives for Card and Me Ctrl Scenario
- [ ] Tabs
- [ ] Text
- [ ] Image
- [ ] Avatar
- [ ] Badge
- [ ] FocusZone
- [ ] FocusTrapZone
- [ ] Card
- [ ] Link
- [ ] Callout
- [ ] Separator
- Start work on
- [ ] Icon
- [ ] Tooltip
- [ ] Menu
- [ ] Release a guide covering how to build components with new hooks based model
- [ ] Identify next set of converged primitives and roll out plan
- [ ] Prototype and close on converged Accessibility approach
- **Upgrades of @fluentui/react-northstar and @fluentui/react@8 are easy and less time consuming**
- Reduce the engineering cost it takes Teams to consume an update of @fluentui/react-northstar to 1eng/month
- [ ] [Fluent UI upgrades](/_7uLsbHXS6ytTBOvVNaURg) - Miro
- Move Tier 1 partners on to @fluentui/react@8 by end of the quarter​
- [ ] Engage through Teir 1 partner relationships - Jon
- **Customers and Partners find the answers they need when reaching out to our team through broad channels**
- Responses on React Teams channel increase by 50%​
- Increase Github Issues that are either fixed or closed by 35%​
- **The microsoft/fluentui repo fosters community and contribution with fast builds, good testing, and great documentation​**
- Improve PR/CI pipeline duration (30 day) 24m to 17m (30% improvement)
- Improve PR/CI build reliability by 30% (measurement TBD)
- [ ] [Versioned docsite for react-northstar](/roW27OhISDmCcQnOm2hviA)

# Vision
Build on the strengths of Fabric and Stardust to establish a first class, open source UX component library.

## Community
Fabric and Stardust both grew out of strong open source communities. Going forward we will invest in this even more.
- Moving our OKRs and project plans to GitHub to allow community feedback
- Create Fluent UI community repo directory, helping discovery of Fluent UI based component libraries, both inside and out side of Microsoft
- Release build tooling and repo templates to help teams get setup quickly with a new Fluent UI based library
- Share conformance and accessibility tests to help community libraries deliver high quality components easily

## Focusing on three key techincal areas:
- Theming
- Customimze styling through design tokens and variants, instead of inline overrides. Community built components are able to offer the same benefit. UI Builder allows anyone to quickly mock and style App experiences.
- Performance
- Reduce Application component layers, CSS mutation, and overal component size
- Accessibility
- Improve and maintain first class Accessibility through fixes and testing

## Customer Value
### Theming
- Support robust style overrides.
- Applications have access to customize the styling of all (resonable) aspects of a component.
- The library encourages style customization through variants and theming rather than inline style overrides
- Design to code
- UI Builder allows PMs, designers, or engineers to ensure a particlar component variant can be achieved through design tokens, prior to implementing the feature
- Converged ThemeProvider
- Applications are able to use legacy Stardust and Fabric components alongside refreshed components (minus the benefit of design tokens)
- Once styling is controlled through variants and themes, visual refreshes become a simple as releasing a new theme
- Hook based composition
- Components are reusable independent of styling, allowing reuse even with incompatible styling solutions

### Performance
- Streamlined composable components
- Smaller recomposable components reduce bundle size of any given component
- Applications can customize and add functionality to components without wrapping them
- Components internally mutate state, avoding object creation
- Semi-static CSS
- Stylesheets are only rebuilt when the theme changes or RTL flips, leading to render time performance improvements

### Accessibility
- Accessibility Updates
- Refresh of components allows addressing difficult to fix existing accessibility issues
- Components are "accessible by default" without signifcant work from Applications
- Accessibility testing
- Extracting accessibility behaviors allows better testing and reuse
- Improved accessibility PR gates prevent regressing accessibility