From 4c415342785c4409e6b7a0ba1f0430baed5afcd1 Mon Sep 17 00:00:00 2001 From: Nickii Miaro Date: Tue, 5 Dec 2023 22:35:03 +0300 Subject: [PATCH] fix: mgt-person avatar size customization in vertical layout (#2875) Add custom avatar size tokens for components building from mgt-person Add login person custom avatar-size token Update css props in login, people and people-picker Add default values to css tokens Update JSDoc comments for person card with section css customization tokens --- .../src/components/mgt-agenda/mgt-agenda.scss | 2 +- .../src/components/mgt-login/mgt-login.scss | 10 +++- .../src/components/mgt-login/mgt-login.ts | 1 + .../components/mgt-messages/mgt-messages.scss | 8 +-- .../mgt-messages/mgt-messages.theme.scss | 2 +- .../mgt-organization/mgt-organization.scss | 21 ++++++-- .../mgt-organization/mgt-organization.ts | 5 ++ .../mgt-people-picker/mgt-people-picker.scss | 11 +++- .../mgt-people-picker/mgt-people-picker.ts | 6 ++- .../src/components/mgt-people/mgt-people.scss | 6 +++ .../src/components/mgt-people/mgt-people.ts | 2 + .../mgt-person-card/mgt-person-card.ts | 40 ++++++++++++++ .../src/components/mgt-person/mgt-person.scss | 53 +++++++++++-------- .../components/mgt-person/mgt-person.tests.ts | 2 +- .../src/components/mgt-person/mgt-person.ts | 10 ++++ .../react-contoso/src/components/Messages.tsx | 2 +- .../agenda/agenda.templating.stories.js | 2 +- stories/components/get/get.stories.js | 2 +- .../components/person/person.style.stories.js | 4 +- stories/samples/templating.stories.js | 2 +- 20 files changed, 150 insertions(+), 41 deletions(-) diff --git a/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.scss b/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.scss index 9c1655a1d2..c41abf10d6 100644 --- a/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.scss +++ b/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.scss @@ -168,7 +168,7 @@ $agenda-event-location-font-size: var(--agenda-event-location-font-size, 12px); &-attendees { --list-margin: 8px 0 0 0; - --avatar-size-s: 20px; + --person-avatar-size: 20px; } } } diff --git a/packages/mgt-components/src/components/mgt-login/mgt-login.scss b/packages/mgt-components/src/components/mgt-login/mgt-login.scss index 1f7f02cad9..a7b0470871 100644 --- a/packages/mgt-components/src/components/mgt-login/mgt-login.scss +++ b/packages/mgt-components/src/components/mgt-login/mgt-login.scss @@ -9,7 +9,8 @@ @import '../../styles/shared-styles'; @import './mgt-login.theme'; -$signed-out-bg: padding-box linear-gradient(var(--neutral-fill-rest), var(--neutral-fill-rest)), +$signed-out-bg: + padding-box linear-gradient(var(--neutral-fill-rest), var(--neutral-fill-rest)), border-box var(--neutral-stroke-control-rest); $signed-out-background: #{var(--login-signed-out-button-background, $signed-out-bg)}; $signed-out-hover-background: #{var(--login-signed-out-button-hover-background, var(--neutral-fill-stealth-hover))}; @@ -17,6 +18,7 @@ $login-popup-background-color: #{var(--login-popup-background-color, var(--neutr $login-account-item-hover-bg-color: #{var(--login-account-item-hover-bg-color, var(--neutral-fill-stealth-hover))}; $button-padding: var(--login-button-padding, 0); $login-flyout-command-text-color: #{var(--login-flyout-command-text-color, var(--accent-foreground-rest))}; +$login-person-avatar-size: #{var(--login-person-avatar-size, 40px)}; :host { .signed-in-person { @@ -30,6 +32,12 @@ $login-flyout-command-text-color: #{var(--login-flyout-command-text-color, var(- margin: 7px 0; } + .signed-in-person, + .account, + .person { + --person-avatar-size: #{$login-person-avatar-size}; + } + fluent-button { &.signed-in { height: auto; diff --git a/packages/mgt-components/src/components/mgt-login/mgt-login.ts b/packages/mgt-components/src/components/mgt-login/mgt-login.ts index c16021076d..7d7383edc0 100644 --- a/packages/mgt-components/src/components/mgt-login/mgt-login.ts +++ b/packages/mgt-components/src/components/mgt-login/mgt-login.ts @@ -82,6 +82,7 @@ export const registerMgtLoginComponent = () => { * @cssprop --login-command-button-hover-background-color - {Color} the color for the background of the command button on hovering. * @cssprop --login-account-item-hover-bg-color - {Color} the background color of the account item on hover. * @cssprop --login-flyout-command-text-color - {Color} the color for the text of the flyout command button. + * @cssprop --login-person-avatar-size - {Length} the size of the avatar in the person component. Default is 40px. */ export class MgtLogin extends MgtTemplatedComponent { /** diff --git a/packages/mgt-components/src/components/mgt-messages/mgt-messages.scss b/packages/mgt-components/src/components/mgt-messages/mgt-messages.scss index 4ede686217..251d97f241 100644 --- a/packages/mgt-components/src/components/mgt-messages/mgt-messages.scss +++ b/packages/mgt-components/src/components/mgt-messages/mgt-messages.scss @@ -13,9 +13,9 @@ $message-subject-font-size: var(--message-subject-font-size, 14px); $message-subject-font-weight: var(--message-subject-font-weight, 600); $message-subject-line-height: var(--message-subject-line-height, 20px); -$message-from-font-size: var(--message-subject-font-size, 12px); -$message-from-font-weight: var(--message-subject-font-weight, 400); -$message-from-line-height: var(--message-subject-line-height, 16px); +$message-from-font-size: var(--message-from-font-size, 12px); +$message-from-font-weight: var(--message-from-font-weight, 400); +$message-from-line-height: var(--message-from-line-height, 16px); :host { position: relative; @@ -76,7 +76,7 @@ $message-from-line-height: var(--message-subject-line-height, 16px); .message__date { margin-top: 8px; font-size: 12px; - color: $message-date; + color: $message-date-color; margin-left: 10px; white-space: nowrap; } diff --git a/packages/mgt-components/src/components/mgt-messages/mgt-messages.theme.scss b/packages/mgt-components/src/components/mgt-messages/mgt-messages.theme.scss index a47715c30b..2ba723e677 100644 --- a/packages/mgt-components/src/components/mgt-messages/mgt-messages.theme.scss +++ b/packages/mgt-components/src/components/mgt-messages/mgt-messages.theme.scss @@ -11,4 +11,4 @@ $message-subject-color: var(--message-subject-color, var(--neutral-foreground-co $message-from-color: var(--message-from-color, var(--neutral-foreground-color)); $message-color: var(--message-color, var(--neutral-foreground-hint)); $message-hover-color: var(--message-hover-color, var(--neutral-fill-hover)); -$message-date: var(--message-date, var(--neutral-foreground-hint)); +$message-date-color: var(--message-date-color, var(--neutral-foreground-hint)); diff --git a/packages/mgt-components/src/components/mgt-organization/mgt-organization.scss b/packages/mgt-components/src/components/mgt-organization/mgt-organization.scss index 4d99d788e6..9012b221b3 100644 --- a/packages/mgt-components/src/components/mgt-organization/mgt-organization.scss +++ b/packages/mgt-components/src/components/mgt-organization/mgt-organization.scss @@ -10,6 +10,10 @@ @import '../../styles/shared-sass-variables'; @import './mgt-organization.theme'; +$organization-coworker-person-avatar-size: var(--organization-coworker-person-avatar-size, 40px); +$organization-member-person-avatar-size: var(--organization-member-person-avatar-size, 40px); +$organization-direct-report-person-avatar-size: var(--organization-direct-report-person-avatar-size, 38px); + :host { position: relative; user-select: none; @@ -19,13 +23,12 @@ padding: 0; .coworker { - .coworker__image { + .coworker__person-image { height: 40px; width: 40px; border-radius: 40px; - --avatar-size: 40px; - --avatar-size-s: 40px; + --person-avatar-size: 40px; margin-right: 12px; } @@ -79,6 +82,10 @@ .org-member__person { flex-grow: 1; + + .org-member__person-image { + --person-avatar-size: #{$organization-member-person-avatar-size}; + } } .org-member__details { @@ -120,6 +127,10 @@ height: 46px; border-radius: 46px; margin-right: 8px; + + .coworker__person-image { + --person-avatar-size: #{$organization-coworker-person-avatar-size}; + } } } @@ -132,7 +143,9 @@ margin-right: 4px; display: inline; - --avatar-size: 38px; + .direct-report__person-image { + --person-avatar-size: #{$organization-direct-report-person-avatar-size}; + } } } } diff --git a/packages/mgt-components/src/components/mgt-organization/mgt-organization.ts b/packages/mgt-components/src/components/mgt-organization/mgt-organization.ts index 751ff8dec6..c950175b40 100644 --- a/packages/mgt-components/src/components/mgt-organization/mgt-organization.ts +++ b/packages/mgt-components/src/components/mgt-organization/mgt-organization.ts @@ -194,6 +194,7 @@ export class MgtOrganization extends BasePersonCardSection { >
this.navigateCard(person)} >
{ * @cssprop --people-picker-input-placeholder-text-color - {Color} the placeholder text color. * @cssprop --people-picker-search-icon-color - {Color} the search icon color * @cssprop --people-picker-remove-selected-close-icon-color - {Color} the remove selected person close icon color. + * @cssprop --people-picker-result-person-avatar-size - {Length} the avatar size of the person in the result. Default is 40px. + * @cssprop --people-picker-selected-person-avatar-size - {Length} the avatar size of the selected person. Default is 24px. */ export class MgtPeoplePicker extends MgtTemplatedComponent { /** @@ -998,7 +1000,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent { this.renderTemplate('person', { person }, person.id) || mgtHtml` { @@ -450,6 +451,7 @@ export class MgtPeople extends MgtTemplatedComponent { // query the image from the graph mgtHtml` { * @cssprop --person-card-fluent-background-color-hover - {Color} The hover background color of the fluent buttons in person card component * @cssprop --person-card-chat-input-hover-color - {Color} The chat input hover color * @cssprop --person-card-chat-input-focus-color - {Color} The chat input focus color + * @cssprop --contact-title-color - {Color} The color of the contact title in the contact section of the person card component + * @cssprop --contact-value-color - {Color} The color of the contact value in the contact section of the person card component + * @cssprop --contact-link-color - {Color} The color of the contact link in the contact section of the person card component + * @cssprop --contact-link-hover-color - {Color} The hover color of the contact link in the contact section of the person card component + * @cssprop --contact-background-color - {Color} The background color of the contact section in person card component + * @cssprop --contact-copy-icon-color - {Color} The color of the copy icon in the contact section of the person card component + * @cssprop --message-subject-font-size - {Length} The font size of the message subject in the message section of the person card component + * @cssprop --message-subject-font-weight - {FontWeight} The font weight of the message subject in the message section of the person card component + * @cssprop --message-subject-line-height - {Length} The line height of the message subject in the message section of the person card component + * @cssprop --message-from-font-size - {Length} The font size of the message sender in the message section of the person card component + * @cssprop --message-from-font-weight - {FontWeight} The font weight of the message sender in the message section of the person card component + * @cssprop --message-subject-color - {Color} The color of the message subject in the message section of the person card component + * @cssprop --message-from-color - {Color} The color of the message sender in the message section of the person card component + * @cssprop --message-color - {Color} The color of the message in the message section of the person card component + * @cssprop --message-hover-color - {Color} The hover color of the message section of the person card component + * @cssprop --message-date-color - {Color} The color of the message date in the message section of the person card component + * @cssprop --message-from-line-height - {Length} The line height of the message sender in the message section of the person card component + * @cssprop --profile-background-color - {Color} The background color of the profile section in the person card component + * @cssprop --profile-title-color - {Color} The color of the profile title in the profile section of the person card component + * @cssprop --profile-section-title-color - {Color} The color of the profile section title in the profile section of the person card component + * @cssprop --profile-token-item-color - {Color} The color of the profile token item in the profile section of the person card component + * @cssprop --profile-token-item-background-color - {Color} The background color of the profile token item in the profile section of the person card component + * @cssprop --profile-token-overflow-color - {Color} The color of the profile token overflow in the profile section of the person card component + * @cssprop --organization-active-org-member-border-color - {Color} The border color of the active organization member in the organization section of the person card component + * @cssprop --organization-active-org-member-target-background-color - {Color} The background color of the active organization member target in the organization section of the person card component + * @cssprop --organization-coworker-hover-color - {Color} The hover color of the coworker in the organization section of the person card component + * @cssprop --organization-coworker-border-color - {Color} The border color of the coworker in the organization section of the person card component + * @cssprop --organization-coworker-person-avatar-size - {Length} The avatar size of the coworker in the organization section of the person card component + * @cssprop --organization-member-person-avatar-size - {Length} The avatar size of the member in the organization section of the person card component + * @cssprop --organization-direct-report-person-avatar-size - {Length} The avatar size of the direct report in the organization section of the person card component + * @cssprop --organization-title-color - {Color} The color of the organization title in the organization section of the person card component + * @cssprop --organization-sub-title-color - {Color} The color of the organization sub-title in the organization section of the person card component + * @cssprop --organization-hover-color - {Color} The hover color of the organization section of the person card component + * @cssprop --profile-background-color - {Color} The background color of the profile section in the person card component + * @cssprop --profile-title-color - {Color} The color of the profile title in the profile section of the person card component + * @cssprop --profile-section-title-color - {Color} The color of the profile section title of the person card component + * @cssprop --profile-token-item-color - {Color} The color of the token item in the profile section of the person card component + * @cssprop --profile-token-item-background-color - {Color} The background color of the token item in the profile section of the person card component + * @cssprop --profile-token-overflow-color - {Color} The color of the token overflow in the profile section of the person card component + * */ export class MgtPersonCard extends MgtTemplatedComponent implements IHistoryClearer, IExpandable { /** diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.scss b/packages/mgt-components/src/components/mgt-person/mgt-person.scss index 983b6e040a..054d1d866c 100644 --- a/packages/mgt-components/src/components/mgt-person/mgt-person.scss +++ b/packages/mgt-components/src/components/mgt-person/mgt-person.scss @@ -51,8 +51,6 @@ $person-line4-text-line-height: var(--person-line4-text-line-height, 16px); justify-content: center; align-items: center; margin-inline-start: 0; - - --person-avatar-size: 72px; } } } @@ -70,10 +68,40 @@ $person-line4-text-line-height: var(--person-line4-text-line-height, 16px); width: $person-avatar-size; height: $person-avatar-size; } + + .initials, + .contact-icon { + font-size: calc(#{$person-avatar-size} * 0.4); + } + + .presence-wrapper { + svg { + width: calc(#{$person-avatar-size} * 0.28); + height: calc(#{$person-avatar-size} * 0.28); + } + } } &.noline, &.oneline { + .avatar-wrapper { + min-width: $person-avatar-size; + width: $person-avatar-size; + height: $person-avatar-size; + + .initials, + .contact-icon { + font-size: calc(#{$person-avatar-size} * 0.4); + } + + .presence-wrapper { + svg { + width: calc(#{$person-avatar-size} * 0.28); + height: calc(#{$person-avatar-size} * 0.28); + } + } + } + .presence-basic { border-width: 1px; position: relative; @@ -122,7 +150,8 @@ $person-line4-text-line-height: var(--person-line4-text-line-height, 16px); } } - &.fourlines { + &.fourlines, + &.vertical { .avatar-wrapper { min-width: $person-avatar-size-72; width: $person-avatar-size-72; @@ -146,24 +175,6 @@ $person-line4-text-line-height: var(--person-line4-text-line-height, 16px); flex-direction: column; justify-content: center; align-items: center; - - .avatar-wrapper { - min-width: $person-avatar-size-72; - width: $person-avatar-size-72; - height: $person-avatar-size-72; - - .initials, - .contact-icon { - font-size: calc(#{$person-avatar-size-72} * 0.4); - } - - .presence-wrapper { - svg { - width: calc(#{$person-avatar-size-72} * 0.28); - height: calc(#{$person-avatar-size-72} * 0.28); - } - } - } } .avatar-wrapper { diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.tests.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.tests.ts index 05d1bea4f7..cf87ea806e 100644 --- a/packages/mgt-components/src/components/mgt-person/mgt-person.tests.ts +++ b/packages/mgt-components/src/components/mgt-person/mgt-person.tests.ts @@ -40,7 +40,7 @@ describe('mgt-person - tests', () => { class="flyout" light-dismiss="" > -
+
Photo for Megan Bowen
diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts index 894183fe10..a289ee7e85 100644 --- a/packages/mgt-components/src/components/mgt-person/mgt-person.ts +++ b/packages/mgt-components/src/components/mgt-person/mgt-person.ts @@ -672,6 +672,9 @@ export class MgtPerson extends MgtTemplatedComponent { 'avatar-icon': true, vertical: this.isVertical(), small: !this.isLargeAvatar(), + noline: this.isNoLine(), + oneline: this.isOneLine(), + twolines: this.isTwoLines(), threeLines: this.isThreeLines(), fourLines: this.isFourLines() }; @@ -1042,6 +1045,13 @@ export class MgtPerson extends MgtTemplatedComponent { : html``; const slotClasses = classMap({ + small: !this.isThreeLines() && !this.isFourLines() && !this.isLargeAvatar(), + large: this.avatarSize !== 'auto' && this.isLargeAvatar(), + noline: this.isNoLine(), + oneline: this.isOneLine(), + twolines: this.isTwoLines(), + threelines: this.isThreeLines(), + fourlines: this.isFourLines(), vertical: this.isVertical() }); diff --git a/samples/react-contoso/src/components/Messages.tsx b/samples/react-contoso/src/components/Messages.tsx index c771578ff1..e5131efb89 100644 --- a/samples/react-contoso/src/components/Messages.tsx +++ b/samples/react-contoso/src/components/Messages.tsx @@ -14,7 +14,7 @@ const useStyles = makeStyles({ }, 'mgt-person': { '--font-size': '12px', - '--avatar-size-s': '16px' + '--person-avatar-size': '16px' } }, diff --git a/stories/components/agenda/agenda.templating.stories.js b/stories/components/agenda/agenda.templating.stories.js index c5542f9403..df08b09365 100644 --- a/stories/components/agenda/agenda.templating.stories.js +++ b/stories/components/agenda/agenda.templating.stories.js @@ -235,7 +235,7 @@ export const eventTemplate = () => html` } mgt-person { - --avatar-size-s: 16px; + --person-avatar-size: 16px; margin-right: 4px; display: inline-block; } diff --git a/stories/components/get/get.stories.js b/stories/components/get/get.stories.js index c215c22b55..87ff3533db 100644 --- a/stories/components/get/get.stories.js +++ b/stories/components/get/get.stories.js @@ -88,7 +88,7 @@ export const GetEmail = () => html` .email mgt-person { --font-size: 10px; - --avatar-size-s: 12px; + --person-avatar-size: 12px; } .email .preview { diff --git a/stories/components/person/person.style.stories.js b/stories/components/person/person.style.stories.js index 41c2c07c5a..d7cac7932f 100644 --- a/stories/components/person/person.style.stories.js +++ b/stories/components/person/person.style.stories.js @@ -79,5 +79,7 @@ export const customCSSProperties = () => html`
- + + `; diff --git a/stories/samples/templating.stories.js b/stories/samples/templating.stories.js index eafc0427e0..2dad92ed37 100644 --- a/stories/samples/templating.stories.js +++ b/stories/samples/templating.stories.js @@ -242,7 +242,7 @@ export const AgendaEventTemplate = () => html` } mgt-person { - --avatar-size-s: 16px; + --person-avatar-size: 16px; margin-right: 4px; display: inline-block; }