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=""
>
-
+
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;
}