feat: use fluent UI to theme the people-picker component#2132
feat: use fluent UI to theme the people-picker component#2132musale merged 22 commits intofix/theme/personfrom
Conversation
|
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:
|
musale
changed the title
musale
changed the title
Ensure select all, select/deselect with arrow keys works
- move the keydown event to the fluent card for better aesthetics
musale
changed the title
musale
requested review from
Mnickii,
gavinbarron,
sebastienlevert and
yejuntak
|
The updated storybook is available here |
1 similar comment
|
The updated storybook is available here |
gavinbarron
left a comment
gavinbarron
left a comment
There was a problem hiding this comment.
Great work on this!
Love the reduction of code, simplifications, and improved use of fluent elements!
|
|
||
| if (event.code === 'Tab') { | ||
| this.hideFlyout(); | ||
| // this.hideFlyout(); |
There was a problem hiding this comment.
How does the flyout get hidden now when the user tabs away?
There was a problem hiding this comment.
It doesn't. What I plan to do is this, you click on tab and the dropdown is focused, then you can navigate through it with arrow keys. When you press the tab after that, it closes the flyout.
There was a problem hiding this comment.
I think we need to be careful here with the arrow/tab behavior. The current behavior is what we landed on when working with the Viva Pulse team. The suggestions list and input field work together like a combo box.
In short, when the input field is focused a query is run, either the zero input query or a query based on the input field. This populates the options in the list. A user can use the up/down arrows to move the pending selection and then the enter key will select the current item. The tab keystroke when the input field is selected should move to the next focusable/interactive item in the page beyond the selection list. AFAIK none of the items in the suggestions list should be focusable via tab stops.
There was a problem hiding this comment.
@gavinbarron now I see your point. So, when tabbing through the component, falling in the input element should trigger the empty/typed query and render the results in a flyout. Then clicking on the tab again, closes the flyout and onto the next focusable element. Otherwise, you can navigate through the flyout results with the arrow keys.
There was a problem hiding this comment.
Yes, that's the intended behavior
ghost
added
the
|
The updated storybook is available here |
|
The updated storybook is available here |
|
The updated storybook is available here |
gavinbarron
left a comment
gavinbarron
left a comment
There was a problem hiding this comment.
This looks fantastic!
It will be worth reviewing this with respect to the VoiceOver defects that have been reported for 2.x but that shouldn't stop us merging what we have here as I think it correctly addresses the styling concerns.
* feat: use devcontainer for development * wip: add new tokens and style person * wip: re-arrange style class order * wip: view all lines for testing * fix: add the css for person component * fix: update the stories for person component * chore: remove deprecated code and generate react files * fix: add the presence icons svgs * fix: add anchor slot in flyout * fix: add new tokens and refactor component rendering * ci: setup pipeline for preview release (#2062) * ci setup pipeline for preview release * altering setVersion script to ensure four part numeric version in package-solution.json * adding picker to the generated React code * fixing setversion logic and adding theme toggle * chore: fix prettier issues in SCSS files * chore: fix build by adding temp variable * fix: align details to flex-start and make bg transparent * fix: remove margin on flyout - Remove tabindex on the person component * chore: add a CI build for PRs into fix/theme/person * chore: add building storybook to fix/theme/person * chore: set border-radius to 50% * chore: run pr builds and storybook on all branches * feat: use fluent ui to theme the people component (#2121) * feat: upgrade to fluentui theming tokens * feat: update the people story with new tokens * feat: update the login component to fluentui theming (#2110) * chore: use margin-inline-start * wip: update the sign in/out button * wip: update the sign in/out button * fix: update the CSS styling and theming * chore: add more accounts, use strings, fix svg color * fix: update the structure and custom tokens * fix: add a hover bg for the accounts list * fix: check the userDetails are not null Co-authored-by: Nickii Miaro <[email protected]> * fix: remove margin on flyout - Remove tabindex on the person component * chore: add changelog (#2098) adding a changelog for ease of automating release notes in future * chore: adding preview tag to preview release workflow (#2097) * chore: add a CI build for PRs into fix/theme/person * chore: change the button content template name Co-authored-by: Gavin Barron <[email protected]> * chore: fix failing build * refactor: use typesafe Boolean * fix: close the component tag Co-authored-by: Gavin Barron <[email protected]> * chore: remove optional chaining * chore: fix documentation strings, add types Signed-off-by: Musale Martin <[email protected]> --------- Signed-off-by: Musale Martin <[email protected]> Co-authored-by: Nickii Miaro <[email protected]> Co-authored-by: Gavin Barron <[email protected]> * feat: use fluent UI to theme the people-picker component (#2132) * fix: update the yarn lock file * fix: set svg icon color to currentColor * fix: use named slot to for anchor in mgt-flyout * fix: use currentColor on close svg * feat: update the picker to use fluent-text-field * fix: style the picker to use fluent UI components * wip: handle copy/cut and paste * fix: update copy/cut and paste Ensure select all, select/deselect with arrow keys works * fix: show/hide the search icon on de/selection * fix: style the loading and no results components * chore: remove all commented out code blocks * fix: set default values for arrays - move the keydown event to the fluent card for better aesthetics * fix: update the component with new custom CSS tokens * chore: document the new CSS tokens * chore: fix scss formatting * fix: review fixes and updates * fix: remove tabbing on the flyout * feat: use fluentui tokens to theme mgt-agenda (#2152) * add fluent theming tokens * fix location icon * update agenda stories to reflect new custom properties * Use variable for border-radius Signed-off-by: Musale Martin <[email protected]> * Remove commented out code Signed-off-by: Musale Martin <[email protected]> * Add missing imports * feat: use fluent UI tokens to theme the person-card component (#2136) * fix person-card hover state styling * update: person card theming changes * add new person-card customization tokens * theme chat input, include new css props * theme the chat input border * chore: fix location icon color and refactor code * Update packages/mgt-components/src/utils/SvgHelper.ts * fix hover styles * fix perosn-card file-list section color * fix file-list item z-index issue * refactor fluent-tabs activeIndicator style padding * use hidden svgs to fix the hover fill persistence issue * Fix section nav border z-index issue * Fix section nav border z-index issue * update fluent-button aria labels and divider color * update profile section tokens * update fluent-button aria-labels * fix build * Fix build, remove fullView styles * fix eslint * use similar view for files compact and fullView, remove logging * fix additional eslint errors --------- Co-authored-by: Martin Musale <[email protected]> * Fix icon position when you have initials or contact icon only Signed-off-by: Musale Martin <[email protected]> * Revert to only 3 branches for pr and storybook workflows Signed-off-by: Musale Martin <[email protected]> * Fix tokens that are missing from story Signed-off-by: Musale Martin <[email protected]> * Use person border radius token Signed-off-by: Musale Martin <[email protected]> --------- Signed-off-by: Musale Martin <[email protected]> Co-authored-by: Gavin Barron <[email protected]> Co-authored-by: Nickii Miaro <[email protected]>
2 participants
Closes #2080
PR Type
Description of the changes
PR checklist
yarn build) and changes have been tested in at least two supported browsers (Edge + non-Chromium based browser)yarn setLicense)Other information