Skip to content

Commit 5a339d4

Browse files
shweaver-MSFTelisenyangElise Yangvogtnnmetulev
authored
Merge v1.3.1 release into main (#519)
* add person card with presence sample to mgt.dev (#498) Co-authored-by: Elise Yang <[email protected]> * mgt-teams-channel-picker changes event to @keyup for input change (#494) * changes event to @keyup for input change * escape search if input value hasn't changed Co-authored-by: Nikola Metulev <[email protected]> * fixed bug where msal options are not passed to msal in the teams provider (#497) Co-authored-by: Shane Weaver <[email protected]> * handling picker y-overflow in ie11 (#501) * Add background color custom css property for people list items (#503) * Add background color custom css property for people list items * Update css var name * Change name for css var in people picker * Update css var in story and ts file * channel picker keydown enter with no new line (#506) * Add background color custom css property for people list items * Update enter keydown logic to prevent new line * Merge branches * Merge branches * allows for scrolling yoverflow (#507) * added msal 1.3.2 (#508) * Removed license shield from readme (#500) * Authority mgtteamsprovider simon (#510) * Removed license shield from readme (#500) * Added authority parameter to mgt-teams-provider * Fixed linting issues Co-authored-by: Shane Weaver <[email protected]> Co-authored-by: Ågren <[email protected]> Co-authored-by: Nikola Metulev <[email protected]> * polyfills and config necessary for spfx ie11 support (#514) * Add css custom property to change mgt person background color (#513) * Add css custom property to change mgt person background color and presence colors * Add background color css var to mgt-person-card Co-authored-by: Shane Weaver <[email protected]> * Fix indentation (#517) Co-authored-by: Nikola Metulev <[email protected]> * Updated to version 1.3.1 (#516) * Manually fixed package.json conflicts * Updated package-lock Co-authored-by: Elise Yang <[email protected]> Co-authored-by: Elise Yang <[email protected]> Co-authored-by: Nicolas Vogt <[email protected]> Co-authored-by: Nikola Metulev <[email protected]> Co-authored-by: Beth Pan <[email protected]> Co-authored-by: Simon Ågren <[email protected]> Co-authored-by: Ågren <[email protected]>
1 parent 4ffb2f4 commit 5a339d4

File tree

18 files changed

+205
-60
lines changed

18 files changed

+205
-60
lines changed

‎.storybook/addons/codeEditorAddon/editor.js‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
33

44
let debounce = (func, wait, immediate) => {
55
var timeout;
6-
return function () {
6+
return function() {
77
var context = this,
88
args = arguments;
9-
var later = function () {
9+
var later = function() {
1010
timeout = null;
1111
if (!immediate) func.apply(context, args);
1212
};
@@ -32,16 +32,14 @@ export class EditorElement extends LitElement {
3232
background-color: rgb(243, 243, 243);
3333
}
3434
35-
36-
3735
.editor-root {
3836
flex-basis: 100%;
3937
}
4038
4139
.tab {
42-
background-color: rgb(236,236,236);
40+
background-color: rgb(236, 236, 236);
4341
color: #616161;
44-
font-family: -apple-system,BlinkMacSystemFont,sans-serif;
42+
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
4543
font-size: 11px;
4644
padding: 8px 18px;
4745
display: inline-block;
@@ -181,17 +179,21 @@ export class EditorElement extends LitElement {
181179
this.editor.setModel(this.currentEditorState.model);
182180
this.editor.restoreViewState(this.currentEditorState.state);
183181
}
182+
183+
this.editor.getAction('editor.action.formatDocument').run();
184184
}
185185

186186
render() {
187187
return html`
188188
<div class="root">
189189
<div class="tab-root">
190-
${this.fileTypes.map(type => html`
191-
<div @click="${_ => this.showTab(type)}"
192-
class="tab ${type === this.currentType ? 'selected' : ''}">
193-
${type}
194-
</div>`)}
190+
${this.fileTypes.map(
191+
type => html`
192+
<div @click="${_ => this.showTab(type)}" class="tab ${type === this.currentType ? 'selected' : ''}">
193+
${type}
194+
</div>
195+
`
196+
)}
195197
</div>
196198
<div class="editor-root">
197199
<slot name="editor"></slot>

‎packages/mgt/package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/mgt/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@microsoft/mgt",
3-
"version": "1.3.0",
3+
"version": "1.3.1",
44
"description": "The Microsoft Graph Toolkit",
55
"keywords": [
66
"microsoft graph",
@@ -25,7 +25,6 @@
2525
"src"
2626
],
2727
"scripts": {
28-
"pack": "npm pack",
2928
"clean": "shx rm -rf dist",
3029
"start": "npm run sass && run-p sass:watch build:watch serve",
3130
"start:https": "npm run sass && run-p sass:watch build:watch serve:https",
@@ -44,14 +43,15 @@
4443
"copy:wc": "cpx node_modules/@webcomponents/webcomponentsjs/bundles/**/* dist/bundle/wc/bundles && cpx node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js dist/bundle/wc",
4544
"test": "jest",
4645
"test:watch": "jest --watch",
46+
"pack": "npm pack",
4747
"prepack": "npm run build"
4848
},
4949
"dependencies": {
5050
"@microsoft/microsoft-graph-client": "^2.0.0",
5151
"@microsoft/microsoft-graph-types": "^1.12.0",
5252
"@microsoft/microsoft-graph-types-beta": "github:microsoftgraph/msgraph-typescript-typings#beta",
5353
"lit-element": "^2.3.1",
54-
"msal": "^1.3.1",
54+
"msal": "^1.3.2",
5555
"office-ui-fabric-core": "11.0.0"
5656
},
5757
"jest-junit": {
@@ -62,4 +62,4 @@
6262
"ancestorSeparator": " > ",
6363
"usePathForSuiteName": "true"
6464
}
65-
}
65+
}

‎packages/mgt/src/components/mgt-people-picker/mgt-people-picker.scss‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ $input-hover-color: var(--input-hover-color, #323130);
2424
$input-focus-color: var(--input-focus-color, #0078d4);
2525
$input-background-color: var(--input-background-color, var(--people-list-background-color, white));
2626

27+
$selected-person-background-color: var(--selected-person-background-color, #f1f1f1);
28+
2729
$dropdown-background-color: var(--dropdown-background-color, white);
2830
$dropdown-item-hover-background: var(--dropdown-item-hover-background, rgba(241, 241, 241, 0.87));
2931

@@ -36,6 +38,8 @@ $font-color: var(--font-color, #323130);
3638
font-family: var(--default-font-family, 'Segoe UI');
3739
height: 38px;
3840
display: contents;
41+
height: 100%;
42+
overflow: hidden;
3943
}
4044
:host .root,
4145
mgt-people-picker .root {
@@ -44,7 +48,6 @@ mgt-people-picker .root {
4448

4549
:host .people-picker,
4650
mgt-people-picker .people-picker {
47-
position: relative;
4851
background-color: $input-background-color;
4952
padding-bottom: 6px;
5053
border: $input-border;
@@ -126,31 +129,31 @@ mgt-people-picker .overflow-gradient {
126129
to right,
127130
rgba(255, 255, 255, 0) 0%,
128131
rgba(255, 255, 255, 0) 60%,
129-
rgb(241, 241, 241) 100%
132+
$selected-person-background-color 100%
130133
);
131134
background-image: -moz-linear-gradient(
132135
left,
133136
rgba(255, 255, 255, 0) 0%,
134137
rgba(255, 255, 255, 0) 60%,
135-
rgb(241, 241, 241) 100%
138+
$selected-person-background-color 100%
136139
);
137140
background-image: -o-linear-gradient(
138141
left,
139142
rgba(255, 255, 255, 0) 0%,
140143
rgba(255, 255, 255, 0) 60%,
141-
rgb(241, 241, 241) 100%
144+
$selected-person-background-color 100%
142145
);
143146
background-image: -ms-linear-gradient(
144147
left,
145148
rgba(255, 255, 255, 0) 0%,
146149
rgba(255, 255, 255, 0) 60%,
147-
rgb(241, 241, 241) 100%
150+
$selected-person-background-color 100%
148151
);
149152
background-image: -webkit-linear-gradient(
150153
left,
151154
rgba(255, 255, 255, 0) 0%,
152155
rgba(255, 255, 255, 0) 60%,
153-
rgb(241, 241, 241) 100%
156+
$selected-person-background-color 100%
154157
);
155158
}
156159

@@ -162,7 +165,7 @@ mgt-people-picker .CloseIcon {
162165
margin-top: 0px;
163166
cursor: pointer;
164167
color: $font-color;
165-
background-color: rgb(241, 241, 241);
168+
background-color: $selected-person-background-color;
166169
right: 0px;
167170
}
168171

@@ -171,7 +174,7 @@ mgt-people-picker .people-person {
171174
display: flex;
172175
margin: 5px 5px 0px 0;
173176
align-items: center;
174-
background-color: rgba(196, 196, 196, 0.24);
177+
background-color: $selected-person-background-color;
175178
border-radius: 15px;
176179
height: 24px;
177180
white-space: nowrap;

‎packages/mgt/src/components/mgt-people-picker/mgt-people-picker.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,8 @@ interface IFocusable {
5656
* @cssprop --input-hover-color - {Color} Input text hover color
5757
* @cssprop --input-focus-color - {Color} Input text focus color
5858
*
59+
* @cssprop --selected-person-background-color - {Color} Selected person background color
60+
*
5961
* @cssprop --dropdown-background-color - {Color} Background color of dropdown area
6062
* @cssprop --dropdown-item-hover-background - {Color} Background color of person during hover
6163
*

‎packages/mgt/src/components/mgt-person-card/mgt-person-card.scss‎

Lines changed: 37 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,12 @@ $person-card-background-color: var(--person-card-background-color, #ffffff);
3030
display: flex;
3131
padding: 18px 14px;
3232

33-
mgt-person.person-image {
34-
--avatar-size: 75px;
33+
mgt-person {
34+
--background-color: var(--person-card-background-color, #ffffff);
35+
36+
&.person-image {
37+
--avatar-size: 75px;
38+
}
3539
}
3640

3741
.details {
@@ -54,12 +58,37 @@ $person-card-background-color: var(--person-card-background-color, #ffffff);
5458
height: 100%;
5559
top: 0;
5660
right: 0;
57-
background-image: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 80%,$person-card-background-color 100%);
58-
background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 80%,$person-card-background-color 100%);
59-
background-image: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 80%,$person-card-background-color 100%);
60-
background-image: -ms-linear-gradient(left right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 80%,$person-card-background-color 100%);
61-
background-image: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 80%,$person-card-background-color 100%);
62-
}
61+
background-image: linear-gradient(
62+
to right,
63+
rgba(255, 255, 255, 0) 0%,
64+
rgba(255, 255, 255, 0) 80%,
65+
$person-card-background-color 100%
66+
);
67+
background-image: -moz-linear-gradient(
68+
left,
69+
rgba(255, 255, 255, 0) 0%,
70+
rgba(255, 255, 255, 0) 80%,
71+
$person-card-background-color 100%
72+
);
73+
background-image: -o-linear-gradient(
74+
left,
75+
rgba(255, 255, 255, 0) 0%,
76+
rgba(255, 255, 255, 0) 80%,
77+
$person-card-background-color 100%
78+
);
79+
background-image: -ms-linear-gradient(
80+
left,
81+
rgba(255, 255, 255, 0) 0%,
82+
rgba(255, 255, 255, 0) 80%,
83+
$person-card-background-color 100%
84+
);
85+
background-image: -webkit-linear-gradient(
86+
left,
87+
rgba(255, 255, 255, 0) 0%,
88+
rgba(255, 255, 255, 0) 80%,
89+
$person-card-background-color 100%
90+
);
91+
}
6392
}
6493

6594
.job-title {

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

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ $font-size: var(--font-size, #{$ms-font-size-m});
2121
$font-weight: var(--font-weight, #{$ms-font-weight-semibold});
2222
$color: var(--color, #{$ms-color-neutralDark});
2323
$text-transform: var(text-transform, none);
24+
$background-color: var(--background-color, #ffffff);
2425

2526
$line2-font-size: var(--line2-font-size, var(--email-font-size, #{$ms-font-size-s}));
2627
$line2-font-weight: var(--line2-font-weight, 400);
@@ -67,6 +68,7 @@ mgt-person .person-root {
6768
position: relative;
6869
display: flex;
6970
align-items: center;
71+
background-color: $background-color;
7072

7173
.user-avatar {
7274
width: $avatar-size;
@@ -83,11 +85,11 @@ mgt-person .person-root {
8385
top: calc(#{$avatar-size} * 0.72 - 4px);
8486
width: calc(v#{$avatar-size} * 0.28);
8587
height: calc(#{$avatar-size} * 0.28);
86-
border: 2px solid #ffffff;
88+
border: 2px solid $background-color;
8789
border-radius: 50%;
8890

8991
.presence-oof-offline-wrapper {
90-
background-color: #ffffff;
92+
background-color: $background-color;
9193
border-color: $presence-color-oof;
9294

9395
.presence-oof-offline svg {
@@ -110,7 +112,7 @@ mgt-person .person-root {
110112
align-items: center;
111113

112114
&.presence-offline {
113-
background-color: #ffffff;
115+
background-color: $background-color;
114116
border-color: $presence-color-invisible;
115117
}
116118

@@ -120,7 +122,7 @@ mgt-person .person-root {
120122
}
121123

122124
&.presence-oof-available {
123-
background-color: #ffffff;
125+
background-color: $background-color;
124126
border-color: $presence-color-online;
125127
}
126128

@@ -135,7 +137,7 @@ mgt-person .person-root {
135137
}
136138

137139
&.presence-oof-dnd {
138-
background-color: #ffffff;
140+
background-color: $background-color;
139141
border-color: $presence-color-dnd;
140142
}
141143

@@ -145,7 +147,7 @@ mgt-person .person-root {
145147
}
146148

147149
&.presence-oof-busy {
148-
background-color: #ffffff;
150+
background-color: $background-color;
149151
border-color: $presence-color-dnd;
150152
}
151153
}
@@ -159,7 +161,7 @@ mgt-person .person-root {
159161

160162
.presence-available::before {
161163
content: $ms-icon-code-SkypeCheck;
162-
color: #ffffff;
164+
color: $background-color;
163165
margin-left: calc(#{$avatar-size} * 0.07 - 2px);
164166
}
165167

@@ -171,13 +173,13 @@ mgt-person .person-root {
171173

172174
.presence-away::before {
173175
content: $ms-icon-code-SkypeClock;
174-
color: #ffffff;
176+
color: $background-color;
175177
margin-left: calc(#{$avatar-size} * 0.07 - 2px);
176178
}
177179

178180
.presence-dnd::before {
179181
content: $ms-icon-code-SkypeMinus;
180-
color: #ffffff;
182+
color: $background-color;
181183
margin-left: calc(#{$avatar-size} * 0.07 - 2px);
182184
}
183185

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ export enum PersonViewType {
6666
* @cssprop --font-size - {Length} Font size
6767
* @cssprop --font-weight - {Length} Font weight
6868
* @cssprop --color - {Color} Color
69+
* @cssprop --background-color - {Color} Background color
6970
* @cssprop --text-transform - {String} text transform
7071
* @cssprop --line2-font-size - {Length} Line 2 font size
7172
* @cssprop --line2-font-weight - {Length} Line 2 font weight

‎packages/mgt/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,8 @@ $dropdown-item-selected-background: var(--dropdown-item-selected-background, #de
204204
font-weight: normal;
205205
color: $font-color;
206206
display: none;
207+
max-height: 346px;
208+
overflow-y: auto;
207209

208210
&.visible {
209211
display: block;

0 commit comments

Comments
 (0)