Skip to content

feat: update the login component to fluentui theming#2110

Merged
musale merged 23 commits intofix/theme/personfrom
login-theme
Mar 24, 2023
Merged

feat: update the login component to fluentui theming#2110
musale merged 23 commits intofix/theme/personfrom
login-theme

Conversation

@musale
Copy link
Copy Markdown
Contributor

@musale musale commented Mar 6, 2023

Closes #2078 and #2117

PR Type

  • Feature

Description of the changes

  • Update the tokens for mgt login customization.
  • Update the theming for fluentui dark/light mode.
  • Refactor the code in CSS styling.

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
Copy link
Copy Markdown

ghost commented Mar 6, 2023

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 added this to the 2023-03 milestone Mar 6, 2023
@musale musale marked this pull request as ready for review March 7, 2023 15:46
@musale musale changed the title fix: update the login component to fluentui theming feat: update the login component to fluentui theming Mar 7, 2023
Comment thread packages/mgt-components/src/components/mgt-login/mgt-login.ts Outdated
@ghost ghost added the Needs: Author Feedback Issue needs response from issue author label Mar 10, 2023
@ghost ghost removed the Needs: Author Feedback Issue needs response from issue author label Mar 10, 2023
@sebastienlevert
Copy link
Copy Markdown
Contributor

Same here, no storybook build or any other actions. Hard to validate :(

Comment thread packages/mgt-components/src/components/mgt-login/mgt-login.ts Outdated
@gavinbarron
Copy link
Copy Markdown
Member

Same here, no storybook build or any other actions. Hard to validate :(

@musale can we remove the branch filter on the storybook automation so that we can test each of these changes in the playground?

musale and others added 3 commits March 14, 2023 15:10
- Remove tabindex on the person component
adding a changelog for ease of automating release notes in future
@github-actions
Copy link
Copy Markdown

The updated storybook is available here

@musale
Copy link
Copy Markdown
Contributor Author

musale commented Mar 14, 2023

@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 😃

Comment thread packages/mgt-components/src/components/mgt-person/mgt-person.ts Outdated
Comment thread .github/workflows/pr.yml Outdated
@github-actions
Copy link
Copy Markdown

The updated storybook is available here

1 similar comment
@github-actions
Copy link
Copy Markdown

The updated storybook is available here

Comment thread packages/mgt-components/src/components/mgt-login/mgt-login.ts Outdated
Comment thread packages/mgt-components/src/components/mgt-login/mgt-login.ts Outdated
@ghost ghost added the Needs: Author Feedback Issue needs response from issue author label Mar 20, 2023
@github-actions
Copy link
Copy Markdown

The updated storybook is available here

Co-authored-by: Gavin Barron <[email protected]>
@ghost ghost removed the Needs: Author Feedback Issue needs response from issue author label Mar 21, 2023
@github-actions
Copy link
Copy Markdown

The updated storybook is available here

@musale musale requested a review from gavinbarron March 21, 2023 10:44
@github-actions
Copy link
Copy Markdown

The updated storybook is available here

@github-actions
Copy link
Copy Markdown

The updated storybook is available here

@gavinbarron
Copy link
Copy Markdown
Member

Great work @musale, this looks good to go from my perspective.

@Mnickii can you please take another look here :)

Copy link
Copy Markdown
Contributor

@sebastienlevert sebastienlevert left a comment

Choose a reason for hiding this comment

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

LGTM!

@musale musale merged commit 27d9c59 into fix/theme/person Mar 24, 2023
@musale musale deleted the login-theme branch March 24, 2023 12:27
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]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Archived in project

Development

Successfully merging this pull request may close these issues.

[BUG] Multi-Account styling is off in v3.0-Preview.1 Update theming for mgt-login

4 participants