Teams Channel Picker component should be updated to the latest Fluent UI design

[vogtn]

Proposal: facilitate the integration of Fluent UI web components into the mgt-teams-channel-picker

Description

This is an open thread for implementation, discussion and review of the mgt-teams-channel-picker upgrade to utilize Fluent UI web components.

https://github.com/microsoft/fluentui/tree/master/packages/web-components

Rationale

Further mgt alignment with the current fluent guidelines

Design File

https://www.figma.com/file/tVj3DubCqeip6mhw14Up0j/Microsoft-Graph-Toolkit?node-id=133%3A761

Preferred Solution

• [x] Phase 1: Suggest controls/UI/text with similar functionality/design that could be replaced with the Fluent UI web component. any concerns with implementation should be noted
• [ ] Phase 2: Review preferred components to be used with the mgt-teams-channel-picker (ideally with conformation from additional authors).
• [ ] Phase 3: Develop POC with the mgt-teams-channel-picker and the new Fluent UI web components
• [ ] Phase 4: Test against current functionality.
• [ ] Phase 5: Prepare for merge

[ghost]

Hello vogtn, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[vogtn]

Phase 1: Proposal

Proposed Fluent UI web components:

1. Breadcrumb
2. Text Field
3. Tree View

Potential Concerns:

[1] BreadCrumb - this might be totally unnecessary as we don't need most of the functionality, but the UI does provide us similar implementation.

[2] Text Field- will it support SVGs if we cant use breadcrumbs