feat: use fluent UI tokens to theme the person-card component by Mnickii · Pull Request #2136 · microsoftgraph/microsoft-graph-toolkit

Mnickii · 2023-03-14T14:38:38Z

Closes #2076

PR Type

Feature

Description of the changes

Use fluent UI tokens for theming.
Includes person-card customization tokens

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

ghost · 2023-03-14T14:38:46Z

Thank you for creating a Pull Request @Mnickii.

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 · 2023-03-14T16:34:49Z

The updated storybook is available here

github-actions · 2023-03-16T11:41:14Z

The updated storybook is available here

github-actions · 2023-03-16T14:44:38Z

The updated storybook is available here

Mnickii · 2023-03-16T15:21:07Z

+      --person-line3-text-line-height: #{$person-card-line3-line-height};
+      --person-line3-text-color: #{$person-card-line3-text-color};
+      --person-avatar-size-3-lines: #{$person-card-avatar-size};
+      --person-presence-wrapper-bottom: -15px;


@gavinbarron how about a negative on the top property? I'm trying to fix a style issue on the avatar on person card, but the presence-wrapper is misplaced according to the design. The top: -15 fixes this but I wonder if there's a better solution.

Good question, there are times when we have to use negative margins to overlap elements, I think that this is one of those cases

github-actions · 2023-03-16T15:28:03Z

The updated storybook is available here

musale

Looks great!

github-actions · 2023-03-22T12:30:22Z

The updated storybook is available here

github-actions · 2023-04-13T16:22:56Z

The updated storybook is available here

github-actions · 2023-04-13T17:58:03Z

The updated storybook is available here

gavinbarron

nice work!
You found a few other spots that needed some work with labeling too.
A couple of small changes left to go.

github-actions · 2023-04-13T19:30:49Z

The updated storybook is available here

github-actions · 2023-04-14T13:47:21Z

The updated storybook is available here

musale

Good to go!

github-actions · 2023-04-19T14:05:58Z

The updated storybook is available here

github-actions · 2023-04-19T14:52:38Z

The updated storybook is available here

github-actions · 2023-04-19T16:31:45Z

The updated storybook is available here

github-actions · 2023-04-19T16:49:29Z

The updated storybook is available here

gavinbarron

LGTM!

* 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]>

Mnickii requested review from gavinbarron and musale March 14, 2023 14:38

Mnickii force-pushed the person-card-theme branch from fe70cd1 to 9d32533 Compare March 14, 2023 14:41

Mnickii changed the title ~~Person card theme~~ feat: use fluent UI tokens to theme the person-card component Mar 14, 2023

gavinbarron added the Build: Storybook label Mar 14, 2023

Mnickii added 2 commits March 15, 2023 12:13

fix person-card hover state styling

fed424a

update: person card theming changes

c90083e

musale reviewed Mar 15, 2023

View reviewed changes

Comment thread packages/mgt-components/src/utils/SvgHelper.ts Outdated

musale reviewed Mar 15, 2023

View reviewed changes

Comment thread packages/mgt-components/src/components/mgt-person-card/mgt-person-card.scss Outdated

gavinbarron reviewed Mar 15, 2023

View reviewed changes

Comment thread packages/mgt-components/src/components/mgt-person-card/mgt-person-card.scss Outdated

Comment thread packages/mgt-components/src/components/mgt-person-card/mgt-person-card.scss Outdated

Comment thread packages/mgt-components/src/utils/SvgHelper.ts Outdated

add new person-card customization tokens

bc1347b

Mnickii force-pushed the person-card-theme branch from 5e564d5 to bc1347b Compare March 16, 2023 11:31

Mnickii marked this pull request as ready for review March 16, 2023 11:32

Mnickii requested review from gavinbarron and musale March 16, 2023 11:32

theme chat input, include new css props

20e11ed

theme the chat input border

21459a8

Mnickii commented Mar 16, 2023

View reviewed changes

Mnickii linked an issue Mar 16, 2023 that may be closed by this pull request

Update theming for mgt-person-card #2076

Closed

musale added 2 commits March 22, 2023 14:54

Merge branch 'fix/theme/person' into person-card-theme

87c8044

chore: fix location icon color and refactor code

3b32da9

musale approved these changes Mar 22, 2023

View reviewed changes

Mnickii commented Mar 22, 2023

View reviewed changes

Comment thread packages/mgt-components/src/utils/SvgHelper.ts Outdated

Update packages/mgt-components/src/utils/SvgHelper.ts

b5514e2

ghost removed the Needs: Author Feedback Issue needs response from issue author label Apr 13, 2023

update profile section tokens

5adffc8

gavinbarron requested changes Apr 13, 2023

View reviewed changes

Comment thread packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts Outdated

Comment thread packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts Outdated

Comment thread packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts Outdated

ghost added the Needs: Author Feedback Issue needs response from issue author label Apr 13, 2023

ghost removed the Needs: Author Feedback Issue needs response from issue author label Apr 14, 2023

update fluent-button aria-labels

37954f0

musale self-requested a review April 18, 2023 09:52

musale approved these changes Apr 18, 2023

View reviewed changes

Mnickii added 2 commits April 19, 2023 12:38

Merge branch 'fix/theme/person' into person-card-theme

2c7bebd

fix build

5c2bbb9

Mnickii requested a review from gavinbarron April 19, 2023 09:39

Mnickii commented Apr 19, 2023

View reviewed changes

Comment thread packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss Outdated

Mnickii commented Apr 19, 2023

View reviewed changes

Comment thread packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts Outdated

Mnickii commented Apr 19, 2023

View reviewed changes

Comment thread packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts Outdated

Fix build, remove fullView styles

66b86a6

fix eslint

5186481

use similar view for files compact and fullView, remove logging

b1a1274

fix additional eslint errors

d96f051

gavinbarron approved these changes Apr 19, 2023

View reviewed changes

Mnickii merged commit 1642569 into fix/theme/person Apr 20, 2023

Mnickii deleted the person-card-theme branch April 20, 2023 05:56

Conversation

Mnickii commented Mar 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Type

Description of the changes

PR checklist

Other information

Uh oh!

ghost commented Mar 14, 2023

Uh oh!

github-actions Bot commented Mar 14, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Mar 16, 2023

Uh oh!

github-actions Bot commented Mar 16, 2023

Uh oh!

Mnickii Mar 16, 2023

Choose a reason for hiding this comment

Uh oh!

gavinbarron Mar 22, 2023

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Mar 16, 2023

Uh oh!

musale left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Mar 22, 2023

Uh oh!

Uh oh!

github-actions Bot commented Apr 13, 2023

Uh oh!

github-actions Bot commented Apr 13, 2023

Uh oh!

gavinbarron left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Apr 13, 2023

Uh oh!

github-actions Bot commented Apr 14, 2023

Uh oh!

musale left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Apr 19, 2023

Uh oh!

github-actions Bot commented Apr 19, 2023

Uh oh!

github-actions Bot commented Apr 19, 2023

Uh oh!

github-actions Bot commented Apr 19, 2023

Uh oh!

gavinbarron left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Mnickii commented Mar 14, 2023 •

edited

Loading