feature: Update teams-channel-picker to fluent UI designs

[musale]

Closes #1202

PR Type

• Feature

Description of the changes

Updates the teams channel picker component to the new fluent UI designs. Designs can be found here

PR checklist

• [x] Project builds (yarn build) and changes have been tested in at least two supported browsers (Edge + non-Chromium based browser)
• [x] All public APIs (classes, methods, etc) have been documented following the jsdoc syntax
• [x] Stories have been added and existing stories have been tested
• [ ] Added appropriate documentation. Docs PR:

• [ ] License header has been added to all new source files (yarn setLicense)
• [ ] Contains NO breaking changes

Other information

Initial work done on this update has been closed in favor of this.

[msftbot[bot]]

Thank you for creating a Pull Request @musale.

This is a checklist for the PR reviewer(s) to complete before approving and merging this PR:

• [ ] I have verified a documentation PR has been linked and is approved (or not applicable)
• [ ] I have ran this PR locally and have tested the fix/feature
• [ ] I have verified that stories have been added to storybook (or not applicable)
• [ ] I have tested existing stories in storybook to verify no regression has occured
• [ ] I have tested the solution in at least two browsers (Edge + 1 non-Chromium based browser)

[github-actions[bot]]

The updated storybook is available here

[gavinbarron]

@musale this looks beautiful, but I can't use my keyboard to select anything in the list now :(

[github-actions[bot]]

The updated storybook is available here

[gavinbarron]

Can we expand a group when we get hits within it due to a search? Having the groups collapsed is a bit of a regression from the previous behavior.

[musale]

@musale this looks beautiful, but I can't use my keyboard to select anything in the list now :(

Let me investigate this, thank you.

[musale]

Can we expand a group when we get hits within it due to a search? Having the groups collapsed is a bit of a regression from the previous behavior.

Yes, I have done a POC and it's working. Furnishing some rough edges then I update it.

[github-actions[bot]]

The updated storybook is available here

[github-actions[bot]]

The updated storybook is available here

[github-actions[bot]]

The updated storybook is available here

[github-actions[bot]]

The updated storybook is available here

[github-actions[bot]]

The updated storybook is available here

[sebastienlevert]

I suggest scheduling a design review on the component. There are a couple of behaviors I'm unsure of and I think we should meet!

[github-actions[bot]]

The updated storybook is available here

[gavinbarron]

Nice work @musale, It's getting better with the keyboard, now I can tab from the input field to the filtered tree view. Can we add a key down handler that traps on DownArrow to also set the focus to the first element in the tree?

We need to ensure that backspace or delete when there is no input text and there is a selectedChannel clears the selectedChannel.

In our design review we should drill into the user flows for keyboard users after selecting a channel as at the moment there is no means to change the selected channel at all based on my testing.