Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 49 commits into from
Feb 23, 2023
Merged

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

merged 49 commits into from
Feb 23, 2023

Conversation

musale
Copy link
Contributor

@musale musale commented Aug 15, 2022

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

  • Project builds (yarn build) and changes have been tested in at least two supported browsers (Edge + non-Chromium based browser)
  • All public APIs (classes, methods, etc) have been documented following the jsdoc syntax
  • 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.

@musale musale added this to the v3.0.0 milestone Aug 15, 2022
@musale musale requested review from gavinbarron and Mnickii August 15, 2022 10:18
@ghost
Copy link

ghost commented Aug 15, 2022

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)

@musale musale changed the base branch from main to next/fluentui August 15, 2022 10:18
@musale musale changed the title Musale/fluentui/teams channel picker feature: Update teams-channel-picker to fluent UI designs Aug 15, 2022
@musale musale mentioned this pull request Aug 15, 2022
Closed
6 tasks
@musale musale marked this pull request as ready for review August 18, 2022 16:16
@github-actions
Copy link

The updated storybook is available here

@gavinbarron
Copy link
Member

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

@ghost ghost added the Needs: Author Feedback Issue needs response from issue author label Aug 23, 2022
@github-actions
Copy link

The updated storybook is available here

@gavinbarron
Copy link
Member

gavinbarron commented Aug 24, 2022 •
edited
Loading

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.
image

@musale
Copy link
Contributor Author

musale commented Aug 31, 2022

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

Let me investigate this, thank you.

@ghost ghost removed the Needs: Author Feedback Issue needs response from issue author label Aug 31, 2022
@musale
Copy link
Contributor Author

musale commented Sep 1, 2022

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. image

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

@github-actions
Copy link

github-actions bot commented Sep 1, 2022

The updated storybook is available here

@github-actions
Copy link

github-actions bot commented Sep 2, 2022

The updated storybook is available here

@musale
Copy link
Contributor Author

musale commented Feb 14, 2023

  • When selecting a channel and closing the parent team, I don't have a hint that something is selected within the team

@sebastienlevert this is not possible to implement now. The highlight that shows a tree-item is selected only appears on the selected item. In the tree view, the team and channel are both fluent-tree-items and only one can be selected at a time.

@github-actions
Copy link

The updated storybook is available here

@ghost ghost added the Needs: Author Feedback Issue needs response from issue author label Feb 14, 2023
@github-actions
Copy link

The updated storybook is available here

@ghost ghost removed the Needs: Author Feedback Issue needs response from issue author label Feb 14, 2023
@github-actions
Copy link

The updated storybook is available here

1 similar comment
@github-actions
Copy link

The updated storybook is available here

@sebastienlevert
Copy link
Contributor

@sebastienlevert this is not possible to implement now. The highlight that shows a tree-item is selected only appears on the selected item. In the tree view, the team and channel are both fluent-tree-items and only one can be selected at a time.

Ok, this works then!

gavinbarron and others added 4 commits February 21, 2023 19:24
@gavinbarron @musale
feat: add theme management tools (#2037)
19339d7 
* feat: theme toggle control

adds a new component to allow switching in the ui between light and dark modes
adds a theme toggle to all stories by default
updates developer test page to include toggle
adds helper functions to assist with theme changing using fluentui web components theming tools
@musale
fix: set the search icon to be on the same level with the input field (…
0fb8f65 
…#2043)

* fix: set the search icon on the correct level with the input

* fix: update the layout of selected pills
@musale
fix: update the yarn.lock file
ab11850
@musale
Merge branch 'next/fluentui' into musale/fluentui/teams-channel-picker
7de78a2
@github-actions
Copy link

The updated storybook is available here

@musale
fix: remove end slot on selected team
11634ef 
Render the team parent name with the default slot
@github-actions
Copy link

The updated storybook is available here

gavinbarron
gavinbarron approved these changes Feb 23, 2023
View reviewed changes
Copy link
Member

@gavinbarron gavinbarron left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

@github-actions
Copy link

The updated storybook is available here

@gavinbarron gavinbarron merged commit b2e5d8b into next/fluentui Feb 23, 2023
@gavinbarron gavinbarron deleted the musale/fluentui/teams-channel-picker branch February 23, 2023 18:05
This was referenced Jul 17, 2023
Closed
Closed
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@gavinbarron gavinbarron gavinbarron approved these changes

@sebastienlevert sebastienlevert sebastienlevert approved these changes

@Mnickii Mnickii Awaiting requested review from Mnickii

Assignees

@musale musale

Labels
Build: Storybook
Projects
Graph Toolkit
Archived in project
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Teams Channel Picker component should be updated to the latest Fluent UI design
3 participants
@musale @gavinbarron @sebastienlevert