Skip to content

Commit fc4f1e0

Browse files
musalegavinbarronMnickii
authored
feat: use fluentui to theme the person component. (#2072)
* 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]>
1 parent 1ebb02f commit fc4f1e0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+2747
-3695
lines changed

‎.github/workflows/pr.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ name: Build pr
77

88
on:
99
pull_request:
10-
branches: [main, release/**, next/**, feat/add-jest-tests]
10+
branches: [main, release/**, next/**]
1111

1212
jobs:
1313
build:

‎packages/mgt-components/src/components/mgt-agenda/mgt-agenda.scss‎

Lines changed: 30 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -9,37 +9,48 @@
99
@import '../../styles/shared-styles.scss';
1010
@import './mgt-agenda.theme.scss';
1111

12+
$agenda-header-margin: var(--agenda-header-margin, 18px 0px 12px 10px);
13+
$agenda-header-font-size: var(--agenda-header-font-size, 24px);
14+
$agenda-event-row-gap: var(--agenda-event-row-gap, 14px);
15+
$agenda-event-border: var(--agenda-event-border, solid 2px rgba(0, 0, 0, 0));
16+
$agenda-event-box-shadow: var(--agenda-event-box-shadow, var(--elevation-shadow-card-rest));
17+
$agenda-event-padding: var(--agenda-event-padding, 12px);
18+
$agenda-event-time-font-size: var(--agenda-event-time-font-size, 12px);
19+
$agenda-event-subject-font-size: var(--agenda-event-subject-font-size, 20px);
20+
$agenda-event-location-font-size: var(--agenda-event-location-font-size, 12px);
21+
1222
:host,
1323
mgt-agenda {
1424
--card-height: auto;
1525
--card-width: 99%;
26+
background-color: $agenda-background-color;
1627

1728
.header {
18-
margin: var(--agenda-header-margin, 18px 0px 12px 10px);
29+
margin: $agenda-header-margin;
1930
font-family: $font-family;
20-
font-size: var(--agenda-header-font-size, 24px);
31+
font-size: $agenda-header-font-size;
2132
font-style: normal;
2233
font-weight: 400;
2334
line-height: 32px;
24-
color: $header__color;
35+
color: $agenda-header-color;
2536
opacity: 0.9;
2637
}
2738

2839
.agenda,
2940
.group {
3041
display: flex;
3142
flex-direction: column;
32-
row-gap: var(--event-row-gap, 14px);
43+
row-gap: $agenda-event-row-gap;
3344

3445
& > .group:first-child > .header {
3546
margin-top: 0;
3647
}
3748

3849
.event {
39-
background: set-var(event__background-color, $theme-default, $agenda);
40-
border: var(--event-border, solid 2px rgba(0, 0, 0, 0));
41-
box-shadow: var(--elevation-shadow-card-rest, --event-box-shadow);
42-
padding: var(--event-padding, 12px);
50+
background: $agenda-event-background-color;
51+
border: $agenda-event-border;
52+
box-shadow: $agenda-event-box-shadow;
53+
padding: $agenda-event-padding;
4354
position: relative;
4455
display: flex;
4556
flex: 1 1 auto;
@@ -58,28 +69,23 @@ mgt-agenda {
5869
}
5970

6071
&-time-container {
61-
font-family: var(--default-font-family);
72+
font-family: $font-family;
6273
font-style: normal;
6374
font-weight: 600;
6475
font-size: 12px;
65-
color: $event__time__color;
76+
color: $agenda-event-time-color;
6677
width: 112px;
6778
height: 16px;
6879

6980
&.narrow {
7081
margin-bottom: 1px;
7182
width: 100%;
7283
}
73-
.event {
74-
&-time-loading {
75-
@include loading-element;
76-
}
77-
}
7884
}
7985

8086
&-time {
81-
font-size: var(--event-time-font-size, 12px);
82-
color: $event__time__color;
87+
font-size: $agenda-event-time-font-size;
88+
color: $agenda-event-time-color;
8389
font-weight: 600;
8490
}
8591

@@ -98,20 +104,15 @@ mgt-agenda {
98104
flex-direction: column;
99105
padding-inline-start: 0px;
100106
}
101-
.event {
102-
&-subject-loading {
103-
@include loading-element;
104-
}
105-
}
106107
}
107108

108109
&-subject {
109110
font-family: $font-family;
110111
font-style: normal;
111112
font-weight: 400;
112-
font-size: var(--event-subject-font-size, 20px);
113+
font-size: $agenda-event-subject-font-size;
113114
line-height: 28px;
114-
color: $event__subject__color;
115+
color: $agenda-event-subject-color;
115116
mix-blend-mode: normal;
116117
position: inherit;
117118
bottom: 8px;
@@ -127,32 +128,31 @@ mgt-agenda {
127128
font-family: $font-family;
128129
font-style: normal;
129130
font-weight: 400;
130-
font-size: var(--event-location-font-size, 12px);
131+
font-size: $agenda-event-location-font-size;
131132
line-height: 16px;
132-
color: $event__location__color;
133+
color: $agenda-event-location-color;
133134

134135
&-loading {
135136
width: 90px;
136137
height: 10px;
137138
margin: 2px 0px 0px 4px;
138-
@include loading-element;
139139
}
140140
}
141141
&-location-icon {
142+
display: inline-flex;
142143
svg {
143144
position: relative;
144145
top: 2px;
145146
width: 12px;
146147
height: 12px;
147148

148149
path {
149-
stroke: $event__location__color;
150+
stroke: $agenda-event-location-color;
150151
}
151152
}
152153
&-loading {
153154
width: 14px;
154155
height: 14px;
155-
@include loading-element;
156156
}
157157
}
158158
&-attendee {
@@ -161,7 +161,6 @@ mgt-agenda {
161161
height: 20px;
162162
border-radius: 10px;
163163
margin: 0 2px 0 0;
164-
@include loading-element;
165164
}
166165
}
167166
}
@@ -184,7 +183,7 @@ fluent-card.event {
184183
}
185184

186185
:host mgt-people {
187-
--color: $event__attendees__color;
186+
--color: $agenda-event-attendees-color;
188187
}
189188

190189
:host fluent-tooltip {

‎packages/mgt-components/src/components/mgt-agenda/mgt-agenda.theme.scss‎

Lines changed: 10 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -6,30 +6,13 @@
66
*/
77
@import '../../styles/shared-sass-variables.scss';
88

9-
$event__time__color: var(--event-time-color, set-var(color, $theme-default, $common));
10-
$event__subject__color: var(--event-subject-color, set-var(color__sub1, $theme-default, $common));
11-
$event__location__color: var(--event-location-color, set-var(color, $theme-default, $common));
12-
$event__attendees__color: var(--event-attendees-color, set-var(color, $theme-default, $common));
13-
$header__color: var(--agenda-header-color, set-var(color__sub1, $theme-default, $common));
14-
15-
$agenda: (
16-
event__background-color: (
17-
_var: --event-background-color,
18-
light: $background-color__main--light,
19-
dark: $background-color__sub1--dark
20-
),
21-
background-color: (
22-
_var: background-color,
23-
light: transparent,
24-
dark: 'transparent !important'
25-
)
26-
);
27-
28-
@mixin loading-element {
29-
&.loading-element {
30-
background: set-var(event__background-color, $theme-default, $agenda);
31-
border-radius: 1px;
32-
}
33-
}
34-
35-
@include create-themes($agenda);
9+
$agenda-event-time-color: var(--agenda-event-time-color, var(--neutral-foreground-rest));
10+
$agenda-event-subject-color: var(--agenda-event-subject-color, var(--neutral-foreground-rest));
11+
$agenda-event-location-color: var(--agenda-event-location-color, var(--neutral-foreground-rest));
12+
$agenda-event-attendees-color: var(--agenda-event-attendees-color, var(--neutral-foreground-rest));
13+
$agenda-header-color: var(--agenda-header-color, var(--neutral-foreground-rest));
14+
$agenda-background-color: var(--agenda-background-color, var(--neutral-layer-floating));
15+
$agenda-header-background-color: var(--agenda-header-background-color, var(--neutral-layer-floating));
16+
$agenda-header-border-color: var(--agenda-header-border-color, var(--neutral-foreground-rest));
17+
$agenda-event-background-color: var(--agenda-event-border-color, var(--neutral-layer-floating));
18+
$agenda-event-background-color: var(--agenda-event-background-color, var(--neutral-layer-floating));

‎packages/mgt-components/src/components/mgt-contact/mgt-contact.scss‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,9 @@
2929
margin-left: 20px;
3030
margin-top: 10px;
3131
line-height: 20px;
32+
svg {
33+
fill: $contact-copy-icon-color;
34+
}
3235
}
3336

3437
.part__details {
@@ -37,19 +40,19 @@
3740

3841
.part__title {
3942
font-size: 12px;
40-
color: set-var(title__color__sub2, $theme-default, $common);
43+
color: $contact-title-color;
4144
line-height: 16px;
4245
}
4346

4447
.part__value {
4548
grid-column: 2;
46-
color: set-var(color__sub1, $theme-default, $common);
49+
color: $contact-value-color;
4750
font-size: 14px;
4851
font-weight: 400;
4952
line-height: 19px;
5053

5154
.part__link {
52-
color: set-var(person-card-contact-link-color, $theme-default, $contact-theme);
55+
color: $contact-link-color;
5356
font-family: $font-family;
5457
font-size: 14px;
5558
cursor: pointer;
@@ -60,7 +63,7 @@
6063
display: inline-block;
6164

6265
&:hover {
63-
color: set-var(person-card-contact-link-hover-color, $theme-default, $contact-theme);
66+
color: $contact-link-hover-color;
6467
}
6568
}
6669
}
@@ -69,14 +72,14 @@
6972
.part__copy {
7073
width: 32px;
7174
height: 100%;
72-
background-color: set-var(background-color__sub2, $theme-default, $common);
75+
background-color: $contact-background-color;
7376
visibility: hidden;
7477
display: flex;
7578
align-items: center;
76-
justify-content: center;
79+
justify-content: flex-start;
7780

7881
svg {
79-
fill: set-var(icon__color, $theme-default, $common);
82+
fill: $contact-copy-icon-color;
8083
cursor: pointer;
8184
}
8285
}

‎packages/mgt-components/src/components/mgt-contact/mgt-contact.theme.scss‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,9 @@
77

88
@import '../../styles/shared-sass-variables.scss';
99

10-
$contact-theme: (
11-
person-card-contact-link-color: (
12-
_var: --person-card-contact-link-color,
13-
light: $link__color--light,
14-
dark: $link__color--dark
15-
),
16-
person-card-contact-link-hover-color: (
17-
_var: --person-card-contact-link-hover-color,
18-
light: $link__color__hover--light,
19-
dark: $link__color__hover--dark
20-
)
21-
);
22-
23-
@include create-themes($contact-theme);
10+
$contact-title-color: var(--contact-title-color, var(--neutral-foreground-hint));
11+
$contact-value-color: var(--contact-value-color, var(--neutral-foreground-rest));
12+
$contact-link-color: var(--contact-link-color, var(--accent-foreground-rest));
13+
$contact-link-hover-color: var(--contact-link-hover-color, var(--accent-foreground-hover));
14+
$contact-background-color: var(--contact-background-color, transparent);
15+
$contact-copy-icon-color: var(--contact-copy-icon-color, var(--neutral-foreground-hint));

‎packages/mgt-components/src/components/mgt-contact/mgt-contact.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -80,41 +80,41 @@ export class MgtContact extends BasePersonCardSection {
8080

8181
private _contactParts: Record<string, IContactPart> = {
8282
email: {
83-
icon: getSvg(SvgIcon.Email, '#605e5c'),
83+
icon: getSvg(SvgIcon.Email),
8484
onClick: () => this.sendEmail(getEmailFromGraphEntity(this._person)),
8585
showCompact: true,
8686
title: this.strings.emailTitle
8787
},
8888
chat: {
89-
icon: getSvg(SvgIcon.Chat, '#605e5c'),
89+
icon: getSvg(SvgIcon.Chat),
9090
onClick: () => this.sendChat(this._person?.userPrincipalName),
9191
showCompact: false,
9292
title: this.strings.chatTitle
9393
},
9494
businessPhone: {
95-
icon: getSvg(SvgIcon.Phone, '#605e5c'),
95+
icon: getSvg(SvgIcon.Phone),
9696
onClick: () => this.sendCall(this._person?.businessPhones?.length > 0 ? this._person.businessPhones[0] : null),
9797
showCompact: true,
9898
title: this.strings.businessPhoneTitle
9999
},
100100
cellPhone: {
101-
icon: getSvg(SvgIcon.CellPhone, '#605e5c'),
101+
icon: getSvg(SvgIcon.CellPhone),
102102
onClick: () => this.sendCall(this._person?.mobilePhone),
103103
showCompact: true,
104104
title: this.strings.cellPhoneTitle
105105
},
106106
department: {
107-
icon: getSvg(SvgIcon.Department, '#605e5c'),
107+
icon: getSvg(SvgIcon.Department),
108108
showCompact: false,
109109
title: this.strings.departmentTitle
110110
},
111111
title: {
112-
icon: getSvg(SvgIcon.Person, '#605e5c'),
112+
icon: getSvg(SvgIcon.Person),
113113
showCompact: false,
114114
title: this.strings.titleTitle
115115
},
116116
officeLocation: {
117-
icon: getSvg(SvgIcon.OfficeLocation, '#605e5c'),
117+
icon: getSvg(SvgIcon.OfficeLocation),
118118
showCompact: true,
119119
title: this.strings.officeLocationTitle
120120
}

‎packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,6 @@ $progress-ring-size: var(--progress-ring-size, 24px);
4040
}
4141
}
4242

43-
:host .root {
44-
padding-inline-start: 20px;
45-
}
46-
4743
:host .file-list-wrapper {
4844
background-color: $file-list-background-color;
4945
box-shadow: $file-list-box-shadow;
@@ -53,6 +49,7 @@ $progress-ring-size: var(--progress-ring-size, 24px);
5349
display: flex;
5450
flex-direction: column;
5551
border-radius: 8px;
52+
5653
.title {
5754
font-size: 14px;
5855
font-weight: 600;
@@ -69,24 +66,21 @@ $progress-ring-size: var(--progress-ring-size, 24px);
6966
.file-item {
7067
cursor: pointer;
7168
border-radius: var(--file-border-radius);
72-
margin: var(--file-margin, 2px 4px);
7369

7470
&:focus,
7571
&:focus-within {
76-
--file-background-color: var(--file-background-color-focus,var(--neutral-layer-2));
72+
--file-background-color: var(--file-background-color-focus, var(--neutral-layer-2));
7773
}
7874

79-
&.selected{
80-
--file-background-color: var(--file-background-color-active,var(--neutral-layer-3));
75+
&.selected {
76+
--file-background-color: var(--file-background-color-active, var(--neutral-layer-3));
8177
}
8278

8379
.mgt-file-item {
84-
--file-padding: 10px 8px 10px 8px;
80+
--file-padding: 10px 20px 10px 20px;
8581
--file-padding-inline-start: 24px;
8682
--file-border-radius: 2px;
87-
--file-background-color: var(--neutral-layer-1);
88-
--file-background-color-focus: var(--neutral-layer-2);
89-
--file-background-color-hover: var(--neutral-layer-2);
83+
--file-background-color: var(--file-item-background-color, var(--neutral-layer-1));
9084
}
9185
}
9286
}

0 commit comments

Comments
 (0)