feat: use fluent ui to theme the people component#2121
Merged
musale merged 4 commits intofix/theme/personfrom Mar 21, 2023
Merged
feat: use fluent ui to theme the people component#2121musale merged 4 commits intofix/theme/personfrom
musale merged 4 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:
|
Mnickii
requested changes
Mar 10, 2023
Collaborator
Mnickii
left a comment
Mnickii
left a comment
There was a problem hiding this comment.
Works well, remove mgt-dark from people stories.
ghost
added
the
Contributor
Author
Can we do that in a separate PR that just removes them from all components? |
Contributor
|
No actions are running on that PR... It's weird? |
Member
|
it's because this PR is targeting a branch that doesn't match the branch protection filters that trigger the CI build or the branch filter in the storybook workflow |
Contributor
Author
|
@Mnickii @gavinbarron @sebastienlevert I have made a temporary build update to build the storybook. I'll remove when the main PR is merged. We have storybook links to review with now 😃 |
|
The updated storybook is available here |
Mnickii
approved these changes
Mar 14, 2023
|
The updated storybook is available here |
musale
added a commit
that referenced
this pull request
Apr 25, 2023
* 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]>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #2077
PR Type
Description of the changes
Update the people component to fluent UI theming.
Updated the mgt tokens.
PR checklist
yarn build) and changes have been tested in at least two supported browsers (Edge + non-Chromium based browser)yarn setLicense)Other information