Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: update mgt-login to new fluent-ui designs #1807

Merged
merged 11 commits into from
Sep 2, 2022
Merged

feat: update mgt-login to new fluent-ui designs #1807

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
29f9fe7
feat: update mgt-login to fluent-ui designs
gavinbarron Aug 16, 2022
005c735
tests: added story for multiple logged in accounts
gavinbarron Aug 16, 2022
0b5e534
fix: use correct import for MockProvider initialization
gavinbarron Aug 16, 2022
7e06837
fix: correct spacing and hover colors
gavinbarron Aug 16, 2022
8a19bd7
updating spacing, and mgt-person hover states
gavinbarron Aug 22, 2022
c873cc8
docs: correcting doc comments and fixing small style issue
gavinbarron Aug 23, 2022
7cbfb8f
adding retries to yarn install for azure devops
gavinbarron Aug 23, 2022
06300ed
clean up button colors, spacing, and documentation
gavinbarron Aug 23, 2022
f35bb03
Ensuring doc comments are provided where needed
gavinbarron Aug 23, 2022
fcab755
Merge branch 'next/fluentui' into next/login-design
gavinbarron Aug 29, 2022
17a198b
Merge remote-tracking branch 'origin/next/fluentui' into next/login-d…
gavinbarron Aug 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 61 additions & 56 deletions packages/mgt-components/src/components/mgt-login/mgt-login.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,12 @@
mgt-login {
--font-size: #{$ms-font-size-m};
--font-weight: #{$ms-font-weight-semibold};
--width: '100%';
--height: '100%';
--margin: 0;
--padding: 12px 20px;
--popup-command-font-size: 14px;
--popup-command-margin: 16px 0 0;
--popup-padding: 10px 4px 16px 4px;
--box-shadow: none; // disable the box-shadow on the flyout and use the one from fluent-card
--popup-padding: 12px 4px;
}

:host .root,
Expand All @@ -38,7 +37,6 @@ mgt-login .login-button {
width: var(--width);
height: var(--height);
margin: var(--margin);
padding: var(--padding);
color: set-var(button__color, $theme-default, $login);
background-color: var(--button-background-color, transparent);
border: none;
Expand All @@ -48,10 +46,6 @@ mgt-login .login-button {
text-indent: inherit;
letter-spacing: inherit;

mgt-person {
--color-sub1: set-var(button__color, $theme-default, $login);
}

&:hover {
color: $button__color--hover;
--color: #{$button__color--hover};
Expand All @@ -72,6 +66,35 @@ mgt-login .login-button {
&.no-click {
pointer-events: none;
}

&.signed-in {
padding: 7px 11px;
&:hover {
color: inherit;
--color: inherit;
--color-sub1: inherit;
}

&.small {
padding: 0;
&:hover {
background-color: inherit;
}
> mgt-person {
--focus-offset: 2px;
}
}

&.full-size {
padding: 9px 11px;
}
}
> mgt-person {
--focus-offset: 8px;
}
}
:host fluent-button.login-button::part(content) {
margin: 5px 0;
}

:host .login-icon,
Expand Down Expand Up @@ -114,38 +137,20 @@ mgt-login .popup-content {
--accent-fill-hover: $popup__background-color;
--accent-fill-active: $popup__background-color;
--accent-foreground-cut-rest: black;
color: black !important;
// eliminates the border on the list-box
--stroke-width: 0;
.list-box-option {
margin-bottom: 4px;
// keeps background hover inside list-box and ensure focus rings don't overlap other accounts
margin: 8px 1px;
mgt-person {
max-width: 270px;
width: 270px;
margin-left: 18px;
--details-spacing: 9px;
max-width: 246px;
width: 246px;
margin: 0 22px;
--avatar-size: 40px;
position: relative;
--line1-color: rgba(0, 0, 0, 0.83);
--line2-color: rgba(0, 0, 0, 0.55);
&:after {
content: '';
position: absolute;
z-index: 1;
top: 0;
right: 8px;
bottom: 0px;
pointer-events: none;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), $popup__background-color 100%);
width: 50%;
}
--focus-offset: 4px;
}
&:hover {
border-radius: 4px;
background: rgba(0, 0, 0, 0.1);
mgt-person {
&:after {
background-image: none;
}
}
background-color: var(--login-hover-fill, set-var(background-color--hover, $theme-default, $common));
}
}
&:focus {
Expand Down Expand Up @@ -192,48 +197,46 @@ mgt-login .popup-content {
}
}
.add-account {
margin: 0 8px;
.add-account-button {
position: relative;
color: #{$commblue_primary};
color: $popup__add-account-button-color;
border: none;
background-color: $popup__background-color;
cursor: pointer;
margin: 0px 0px 10px 19px;
padding: 0;
border: 1px solid transparent;
--neutral-fill-stealth-hover: #{$popup__button-color--hover};
&:hover {
color: #{$commblue_shade20};
text-shadow: 0 0 0.01px #{$commblue_shade20};
// hack to prevent text color changing on hover
--accent-foreground-hover: #{$popup__add-account-button-color};
background-color: $popup__button-color--hover;
}
.account-switch-icon {
vertical-align: middle;
display: inline-block;
display: inline-flex;
svg {
path {
fill: $popup__add-account-button-color;
}
}
}
}
}

.main-profile {
margin-bottom: 35px;
text-align: center;
mgt-person {
--avatar-size: 72px;
--person-flex-direction: column;
--details-spacing: 0px;
--line1-color: rgba(0, 0, 0, 0.83);
--line2-color: rgba(0, 0, 0, 0.55);
}
padding: 0 21px;
margin: 12px 0 28px 0;
}
}

:host .popup-commands ul,
mgt-login .popup-commands ul {
list-style-type: none;
margin: var(--popup-command-margin);
padding: 0;
margin-bottom: 10px;
margin-top: 6px;
padding: 0 8px;
margin: 0;
text-align: right;
padding-right: 16px;
}

:host .popup-command,
Expand All @@ -250,10 +253,12 @@ mgt-login .popup-command {
text-indent: inherit;
letter-spacing: inherit;
border: 1px solid transparent;

--neutral-fill-stealth-hover: #{$popup__button-color--hover};
&:hover {
text-shadow: 0 0 0.01px #{$commblue_shade20};
color: #{$commblue_shade20};
// hack to prevent text color changing on hover
--accent-foreground-hover: --accent-foreground-rest;
// ensure that the background of the popup command host element changes on hover
background-color: $popup__button-color--hover;
}
}

Expand Down
5 changes: 5 additions & 0 deletions packages/mgt-components/src/components/mgt-login/mgt-login.theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@ $button__background-color--hover: var(
set-var(background-color--hover, $theme-default, $common)
);
$popup__background-color: var(--popup-background-color, set-var(background-color, $theme-default, $common));
$popup__add-account-button-color: var(--add-account-button-color, set-var(color__sub2, $theme-default, $common));
$popup__button-color--hover: var(
--popup-button-color--hover,
var(--neutral-fill-stealth-hover, #{$neutralFillStealthHover})
);

$login: (
button__color: (
Expand Down
Loading