# October Project Cycle: (October 5 - October 30)
## Quick links
[Fluent UI Roadmap](/zS7XP735R76Si87i7aI2Aw)
## Proposed Projects for October
|Project|Status|Contributors|
|---|---|---|
|[v8 release tasks](https://github.com/microsoft/fluentui/projects/36)|GitHub Project |Elizabeth, Xu, Jon, Mak |
|[Fluent UI upgrades (northstar)](/_7uLsbHXS6ytTBOvVNaURg)| Reviewed |Miro + Jon|
|[Versioned docsite for northstar](/roW27OhISDmCcQnOm2hviA)| Reviewed | Ling |
|Avatar, Badge/Status| | Ben|
|[Converge Tabs](https://hackmd.io/JaKTijmWS2a5bJU4CvI5iQ)| | Ben|
|[Bug bash! _Subset of v8 release tasks_]( https://hackmd.io/OhQnHLNMQgqeLGGCNYQNSQ?both) | | Jon
|Integrate hooks and utilities into react-northstar| On-Hold| Levi |
|Shield| | Tomi|
|Bug fixing||Jon|
|[v8 IE11 polyfill alternative](https://hackmd.io/SVBThXZNSimOx3t-RDbygw)||David, Tomi, Xu|
## version 8 release (Elizabeth/Xu)
### Final Update - 11/3
#### Achievements
- Still some work tracked in GitHub
- Followed up on Teams codebase OUFR v7 -> FUR v8
#### Objectives
- Version 8 Beta on Website
- Follow up with ODSP on build updates
- Have plan, will review this week
#### Learnings
### Week 4 - 10/26
#### Achievements
- We released it!!! :tada:
- finishing up follow up tasks
#### Objectives
- Actually annouce beta!
- Reviewing final PRs for addition to beta
- WAC has dev to work on Upgrading to v8
- TODO case study on upgrading WAC
- MOAR Codemods!
- Beta Annoucment in Fluent UI Newsletter
#### Learnings
- [v8 release process retrospective](/Y5x-NbRuQpKx_z8FAFCcRw) <-- Add your thoughts
### Week 3 - 10/19
#### Achievements
- Working on Beta Release Today or tomorrow morning :hand_with_index_and_middle_fingers_crossed:
#### Objectives
- One more release where all the package names bump
#### Learnings
- Goal: Don't major bump everything next release
- [TODO] @07tjbDVTQ7GRSte-Bca3gw
- Retrospective of Version 8 release coming
- [v8 release process retrospective](/Y5x-NbRuQpKx_z8FAFCcRw) <-- Add your thoughts
### Week 2 - 10/13
#### Achievements
- Almost done moving v8 components from react-next to react
#### Objectives
- Finish moving everything and make a beta!
- Beta Release Monday Monday Monday (Oct 19th)
#### Learnings
- Moving next components back to current is nontrivial
- Hitting integration issues that were not present before
- Automation can help
- Mini version of the upgrade process
- Follow up offline
## Fluent UI upgrades - northstar (Miro)
### Final Update - 11/3
#### Achievements
- CI running in TMP branch
#### Objectives
- Finish by EOY
- write up with all learning and future steps
#### Learnings
- Learning a lot about issues we're hitting (on both App and Library side)
### Week 4 - 10/26
#### Achievements
- good progress on upgrade of `"icon"` to `<Icon />` usages in TMP master (Shift :rocket:)
- spliting upgrade to more managable PRs help us understand the issues TMP is facing during upgrade
#### Objectives
- upgrade `"icon"` to `<Icon />` usages in TMP master (Shift :rocket:)
- help with the TMP upgrade process
- we would like to get it merged this year = in November
- make build + Screener working for react-northstar release branches
- write up with all learning and future steps
#### Learnings
- do one thing at a time (do not piggyback refactorings to upgrade PR)
### Week 3 - 10/19
#### Achievements
- discussed TMP master - FUI master build pipeline with TMP devs - currently only available for TSW (Angular) not for TMP (React). It is planned, asked them to let us know once available
- discussed current TMP upgrade (47.x -> 51.x) with TMP devs
- big disappointment
- no commitment to finish it this year
- upgrade PR seems to be stuck
- icons handled in the same PR (even though we did all the additional work and gave them instructions to do that incrementaly BEFORE the upgrade)
- naive unit tests failing (and the whole test pipeline exploding)
- Shift jumped into it :+1:
- Split out to small PRs on master to upgrade icons
- 10+ PRs already :fire:
#### Objectives
- upgrade `"icon"` to `<Icon />` usages in TMP master (Shift :rocket:)
- help with the TMP upgrade process
- we would like to get it merged this year = in November
- make Screener working for react-northstar release branches
#### Learnings
- politics is hard :face_vomiting:
### Week 2 - 10/13
#### Achievements
- met with TMP devs who drive Apollo upgrades in TMP (discussed regex-based codemods vs AST-based upgrade scripts)
#### Objectives
- define the process for breaking changes (0 breaking changes, codemods, lint rules)
- find a way how to build TMP master - react-northstar master
- discuss with TMP
#### Learnings
## Versioned docsite for northstar (Ling)
### Final Update - 11/3
#### Achievements
- Released! :tada:
- People are using it correctly!
- PR in for infra, thanks Elizabeth!
#### Objectives
- Done!
- 
#### Learnings
### Week 4 - 10/26
#### Achievements
- Versioned docsite can now be build from CI/CD and served through the staging environment.
- N* team helped to bug bash and provide feedback which were addressed in staging.
- Previous docsites were fixed
- PR to master for changes to enable multi version docsite, already backported to 51 and 47
#### Objectives
- Validated design concept.
- Get staging ready for final release.
#### Learnings
- Awkard to work on build pipelines with the current contribution model if you don't want to submit a PR
- Availability of designated playground pipeline(s) using UI not yaml for quick iteration and then just convert to yaml
### Week 3 - 10/19
#### Achievements
Created a staging env for versioned docsites and created manual backfill for at least one previous version (0.47.x)
https://fluentsiteversiontest.z5.web.core.windows.net/
#### Objectives
Research ways of loading different SPAs in a static site. Define the infrastructure required to move from a single docsite to a versioned docsite and come up with a rough demo.
#### Learnings
- How the current build tooling handles base paths during bundling, takes a while to get the whole picture, especially for a newbie
- No guarantee that release tags aren't broken
- Avoid patching previous releases if possible :-)
- How to override webpack chunk loading url/path at runtime (ultimately won't be doing this)
- How to hack redirects with a static site by using a a 404 page
### Week 2 - 10/13
#### Achievements
- on hold
#### Objectives
#### Learnings
## Avatar, Badge/Status (Ben)
### Final Update - 11/3
#### Achievements
#### Objectives
#### Learnings
### Week 4 - 10/26
#### Achievements
- Not much this week. Focused on Tabs
- Waiting on final designs for Badge
- Avatar is done waiting for colors
#### Objectives
- Reach out to Design to close on Avatar and Badge
#### Learnings
### Week 3 - 10/19
#### Achievements
* Avatar is mostly done with styling and API waiting for final design on the colors for auto-colored badges.
* Discussed the design the Badge component with David and Kay. Looks like we may want a generic `Badge` component, with specialized versions for cases like Avatar: `PresenceBadge`, or for an unread count: `CountBadge`
#### Objectives
* Stand up react-badge package.
* Continue discussion with Aneesha & design tokens crew, with how we can get the design tokens into our code so that Avatar can consume them (currently it's just using local hardcoded values for things like font size, stroke width, and colors).
#### Learnings
* People love animations! The Avatar's inactive<->active animation got a lot of positive feedback. [Demo here](http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/heads/master/react-avatar/storybook/index.html?path=/story/avatar--active-animation)
## Converge Tabs (Ben)
### Final Update - 11/3
#### Achievements
#### Objectives
#### Learnings
### Week 4 - 10/26
#### Achievements
- Renaming Pivot to Tabs - 2 PRs
- First PR out
- Goal is to have both Tabs and Pivot work
#### Objectives
- Second PR on the way
#### Learnings
- How does Pivot relate to AppBar
- No Rush version 8
### Week 3 - 10/19
#### Achievements
* New project proposal: [Converge Tabs](https://hackmd.io/JaKTijmWS2a5bJU4CvI5iQ)
* Begun work on renaming Pivot to Tabs. Some renaming propsals are here: [Renaming Pivot to Tabs](https://hackmd.io/jDytiF_kQuW2hNELbxgNqA).
#### Objectives
* Should have a draft renaming PR out soon, to get feedback on the new names.
* Begin work on Open UI investigation page, to work out the desired API after refactoring.
#### Learnings
* Sadly renaming the component is bit more complicated than a find/replace of pivot/tabs.
## v8 hooks in v0 (Levi)
### Final Update - 11/3
#### Achievements
- PR up with first working set of hooks in v0 examples and v8 button stories
- Larger conversation on v0 and v8 going forward into Teams
- Can we use react-button directly in teams?
#### Objectives
- Look at TMP and what can we do to use v8 directly in TMP - This is a different project
- Themeprovider - how to make progress at same time as button
- Share ReactContext for the theme. Allows consuming tokens from theme.
- Have ThemeProvider in northstar provider, allows providing tokens to button
- react-components to use syntax changes on hooks
- Avatar, togglebutton, splitbutton
#### Learnings
### Week 4 - 10/26
#### Achievements
- Adding more test and rewriting
- Having trouble with merging props
- May not be a clean way
- Dropping down to lower level, building up from there
- Have it rendering with typings problems
- Looking at short hand props only
- No strings or numbers
- Issue: typings to be conditional every time
#### Objectives
- Need broader team review on notes here
- May need to take a minute to clean up to one set
- Complete one v0 and v8 component
#### Learnings
- Issue with having to memoize every prop
- react-compose major bumped as part of ver8
- Xu to follow up with Miro and Shift (+Levi) on future of react-compose
- No concerns on react-compose. Issue is around date-time utilities. TMP is on Fabric v7 (which includes state-time utilities)
- In TMP we see memoization of short hand props
### Week 3 - 10/19
#### Achievements
- In progress, not quite done
- Paired with Miro
- Removed config options on deeply merging props (name of a key in an object isn't enough to know it should(n't) be merged)
#### Objectives
- Working on new issues from new approach to mergeProps
- Might end up breaking down into seperate functions
#### Learnings
- Great learnings from applying v8 hooks to v0, new cases to handle
- Keep good notes (record decisions) and adding good tests
### Week 2 - 10/13
#### Achievements
- Broke git then repaired git!
- 1 failing test on make merge props
- Fixed recursive merge issue
#### Objectives
- Open PR against components and utilities showing proof of concept ETA this week
- goal: v8 hooks are the same hooks in v0
- goal: includes updates to v0 and iteration on the v8 hooks
#### Learnings
- don't squash and force push :D
## Icons subset (Tomi)
### Final Update - 11/3
#### Achievements
#### Objectives
- Main work on future icon package
- Is there a codemod to could allow migration from
```jsx
<Icon name={"Snow"/>
```
->
```jsx
import {Snow} from react-icons
<Snow/>
```
- or support interim registerIcon
- Learn from Shift's approach to moving TMP
#### Learnings
### Week 4 - 10/26
#### Achievements
- react-icons-mdl2 package PR is out
- Only non-branded icons
#### Objectives
- Future work, new @fluent/react-icons
- Move to fluentui-icons-system repo
- Integrate with build system and pipeline
- Work out how to support customizing icons
#### Learnings
### Week 3 - 10/19
#### Achievements
- Found ~300 branded icons in svg icon set
#### Objectives
- Get feedback from CELA about final icon list
- Publish new icon package(react-icons-mdl2) without branded icons
#### Learnings
- Don't need to do a TM review
- Just run by Trademark/Branding team
### Week 2 - 10/12
#### Achievements
- Sent icons subset proposal to CELA
#### Objectives
- Need to keep working with CELA
- Mistel needs to give heads up
- Then Tracy needs to sign off
- There might need to be TM review?
- CC Mistel in convo with Markus and Tracy (latest thread "happy to start")
- Tracy can you now take a look
#### Learnings
## IE 11 screener (Tomi)
### Final Update - 11/3
#### Achievements
- PR is out for makeVariantClasses updates
- How do consumers opt into the polyfill
#### Objectives
- minified 2kb hit for auto-included polyfill
- it is possible to strip it out, but it's complicated, not right now
- Going through screener failures right now, then merged
#### Learnings
### Week 4 - 10/26
#### Achievements
- David: Polyfill ran into alot of issues (actaully with IE11 mutationObserver)
- makeVariantClasses can replace variables with pre-resolved tokens
- Working well in testing
- pseudo-elements
- calc works
- Styles on Ie11 still get performance benefits
- there is a perf hit, but still faster than old button
#### Objectives
- Working on PR, need to integrate with screener
#### Learnings
- Broad IE11 polyfills are tricky
### Week 3 - 10/19
#### Achievements
- Polyfill passes screener tests
#### Objectives
- Work with David to come up with viable workaround, using an alternative makeVariantClasses helper, which will only load in IE11 scenarios.
- [Proposal](https://hackmd.io/rhxXI2DhTtGEa1JhOuvJ5g)
- Produce a script for polyfill package in our repo using webpack config
- There needs to be a build step that copies it to our cdn (like fonts package)
#### Learnings
- Polyfill breaks for any website that dynamically loads page content
### Week 2 - 10/12
#### Achievements
- Working on getting polyfill in the screener page
- Polyfill is not rendering for page
- Filed support ticket with screener
#### Objectives
- Still working on it
- Waiting on reply for support ticket
- Elizabeth can be helpful here - Setup pairing session
#### Learnings
## Tooltip (Josche/Mak)
### Week 3 - 10/19
#### Achievements
- Move to Novemeber
- Switch to Seperator :+1:
- Documenting (Can we move to hackmd)?
#### Objectives
#### Learnings
### Week 2 - 10/13
#### Achievements
- Initial setup and getting Josche on board with the project.
- Started document writing down the steps needed to create a new package and a new component, as well as what's missing or lacking in this process.
#### Objectives
- Use outdated `create-package` script, document the missing parts to get a complete experience and start updating the script.
- Get started on Open UI investigation.
#### Learnings
---
# More projects for Later
|Project|Status|Contributors|
|---|---|---|
|[Validate hooks approach in v0](https://hackmd.io/fOIeQHflTnymsE4uxKpCpA)||Levi|
|[Tooltip](https://hackmd.io/6RdyiPsYQvu0Ljy3FVWuFA)| Reviewed |Josche/Mak|
|Add v0 Debug & TelemetryGuard to Teams|||
|Add perf telemetry to v7||Later|
|Script/Codemod to rename all the IPrefix interfaces [#10266](https://github.com/microsoft/fluentui/issues/10266)|||
|v0 Docs site - make sure examples for each prop exist and are reasonable|||
|Customer connection/feedback/gripes | | Paul|
|Allow typescript to be imported?|Write Proposal|Shift/Levi + Elizabeth|
|Menu component||Ben/Tomi + Charles|
## More links
[Shared OneNote for eng process][onenote]
[Accessibility Issues](https://dev.azure.com/microsoftdesign/fluent-ui/_queries/query/ab37cec7-fd8f-4828-99ac-d56e65396ada/)
[backlog]: https://dev.azure.com/microsoftdesign/fluent-ui/_backlogs/backlog/fluent-ui%20Team/Epics
[issues]: https://github.com/OfficeDev/office-ui-fabric-react/issues
[onenote]: https://microsoft.sharepoint-df.com/:o:/t/FluentUIInternal/Ev_x5WbQI6tJmn2s87RzRPMBTG3d0gmYJN6QCpQttOFyzw?e=rnbj9H
[sprint53]: https://dev.azure.com/microsoftdesign/fluent-ui/_sprints/backlog/fluent-ui%20Team/fluent-ui/Sprint%2053
[onelibrary]: https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/4469
[theming]: https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/4464
[performance]: https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/4462
[composition]: https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/4465
[onerepo]: https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/4468
[onelib]: https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/4469
Sign in with Wallet
Connect another wallet