feat: use fluentui to theme the person component. by musale · Pull Request #2072 · microsoftgraph/microsoft-graph-toolkit

musale · 2023-03-02T15:23:20Z

Closes #2073, Closes #2117

PR Type

Feature

Description of the changes

Updated the person component to use fluent UI colors for theming.
Renamed current mgt tokens to use the person-* format for person component.
Pruned the tokens to only the necessary ones.

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

I'm yet to fix usages of the person in other components. Still a WIP.

ghost · 2023-03-02T15:23:26Z

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)

* 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

sebastienlevert · 2023-03-02T15:27:13Z

😃 waiting the the Storybook 😃

github-actions · 2023-03-02T15:34:16Z

The updated storybook is available here

github-actions · 2023-03-02T15:36:27Z

The updated storybook is available here

github-actions · 2023-03-02T15:53:59Z

The updated storybook is available here

sebastienlevert · 2023-03-02T15:56:19Z

I feel we should never set a background color to the control. It should use the app's background color, right? Though, overall we are absolutely on the right track!

musale · 2023-03-02T15:57:55Z

I feel we should never set a background color to the control. It should use the app's background color, right? Though, overall we are absolutely on the right track!

I agree with you. For dev purposes, I start it out with a bg therefore before merge, I will ensure it's not set to be the same as the bg.

github-actions · 2023-03-02T16:07:55Z

The updated storybook is available here

github-actions · 2023-04-12T11:43:00Z

The updated storybook is available here

github-actions · 2023-04-18T10:17:08Z

The updated storybook is available here

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

github-actions · 2023-04-20T06:09:05Z

The updated storybook is available here

github-actions · 2023-04-20T13:39:36Z

The updated storybook is available here

sebastienlevert · 2023-04-24T19:54:56Z

@musale There seems to have an issue with the presence badge on small avatars story.

Is this related to the tokens or to the updates we made to the components?

sebastienlevert · 2023-04-24T19:56:04Z

  pull_request:
    types: [opened, labeled, synchronize, reopened]
-    branches: [main, release/**, next/**]
+    branches: ['**']


sebastienlevert · 2023-04-24T19:56:40Z

 on:
  pull_request:
-    branches: [main, release/**, next/**, feat/add-jest-tests]
+    branches: ['**']


This was to enable testing the sub-branches from this one. Reverting to main, release and next only.

Signed-off-by: Musale Martin <[email protected]>

musale · 2023-04-25T08:54:52Z

@musale There seems to have an issue with the presence badge on small avatars story.

Is this related to the tokens or to the updates we made to the components?

It's a positioning issue for initials and contact icon avatars. It's now fixed.

github-actions · 2023-04-25T09:03:30Z

The updated storybook is available here

Signed-off-by: Musale Martin <[email protected]>

github-actions · 2023-04-25T09:23:06Z

The updated storybook is available here

musale added 10 commits February 28, 2023 07:55

feat: use devcontainer for development

2145b11

wip: add new tokens and style person

bf016b9

wip: re-arrange style class order

05e1e3f

wip: view all lines for testing

c19cdc3

fix: add the css for person component

890b917

fix: update the stories for person component

b91db51

chore: remove deprecated code and generate react files

264df86

fix: add the presence icons svgs

d3f7433

fix: add anchor slot in flyout

e459a68

fix: add new tokens and refactor component rendering

15d402c

musale added the Build: Storybook label Mar 2, 2023

musale added this to the v3.0.0 milestone Mar 2, 2023

musale requested review from Mnickii, gavinbarron, sebastienlevert and yejuntak March 2, 2023 15:23

gavinbarron and others added 2 commits March 2, 2023 18:25

ci: setup pipeline for preview release (#2062)

17738be

* 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

Merge branch 'next/fluentui' into fix/theme/person

6b6ff93

Merge branch 'next/fluentui' into fix/theme/person

245eded

chore: fix prettier issues in SCSS files

de0bd76

Merge branch 'next/fluentui' into fix/theme/person

fd21054

musale mentioned this pull request Mar 6, 2023

feat: update the login component to fluentui theming #2110

Merged

6 tasks

Merge branch 'next/fluentui' into fix/theme/person

2ce7138

musale added 2 commits April 18, 2023 12:55

Merge branch 'next/fluentui' into fix/theme/person

597f387

Add missing imports

31a712e

musale marked this pull request as ready for review April 20, 2023 12:59

musale requested a review from gavinbarron April 20, 2023 12:59

Merge branch 'next/fluentui' into fix/theme/person

ef75d1c

sebastienlevert reviewed Apr 24, 2023

View reviewed changes

musale added 3 commits April 25, 2023 11:28

Merge branch 'next/fluentui' into fix/theme/person

3786cae

Fix icon position when you have initials or contact icon only

58b0547

Signed-off-by: Musale Martin <[email protected]>

Revert to only 3 branches for pr and storybook workflows

d6d4b1f

Signed-off-by: Musale Martin <[email protected]>

musale added 2 commits April 25, 2023 12:09

Fix tokens that are missing from story

9b84f24

Signed-off-by: Musale Martin <[email protected]>

Use person border radius token

0dadfc9

Signed-off-by: Musale Martin <[email protected]>

musale requested a review from sebastienlevert April 25, 2023 09:37

Mnickii approved these changes Apr 25, 2023

View reviewed changes

sebastienlevert approved these changes Apr 25, 2023

View reviewed changes

musale merged commit fc4f1e0 into next/fluentui Apr 25, 2023

musale deleted the fix/theme/person branch April 25, 2023 18:08

This was referenced Jul 17, 2023

chore(release-please/bootstrap/default): release 3.0.1 #2607

Closed

chore(main): release 4.0.0 #2612

Closed

chore(main): release 3.0.1 #2615

Merged

Conversation

musale commented Mar 2, 2023 • edited by Mnickii 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 2, 2023

Uh oh!

sebastienlevert commented Mar 2, 2023

Uh oh!

github-actions Bot commented Mar 2, 2023

Uh oh!

github-actions Bot commented Mar 2, 2023

Uh oh!

github-actions Bot commented Mar 2, 2023

Uh oh!

sebastienlevert commented Mar 2, 2023

Uh oh!

musale commented Mar 2, 2023

Uh oh!

github-actions Bot commented Mar 2, 2023

Uh oh!

github-actions Bot commented Apr 12, 2023

Uh oh!

github-actions Bot commented Apr 18, 2023

Uh oh!

github-actions Bot commented Apr 20, 2023

Uh oh!

github-actions Bot commented Apr 20, 2023

Uh oh!

sebastienlevert commented Apr 24, 2023

Uh oh!

sebastienlevert Apr 24, 2023

Choose a reason for hiding this comment

Uh oh!

sebastienlevert Apr 24, 2023

Choose a reason for hiding this comment

Uh oh!

musale Apr 25, 2023

Choose a reason for hiding this comment

Uh oh!

musale commented Apr 25, 2023

Uh oh!

github-actions Bot commented Apr 25, 2023

Uh oh!

github-actions Bot commented Apr 25, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

musale commented Mar 2, 2023 •

edited by Mnickii

Loading